Merge branch 'develop' into wip/mk/scatterplot-tech-debt

enso-org · Jan 21, 2025 · 583000d · 583000d
2 parents c07ad48 + a02cf2f
commit 583000d
Show file tree

Hide file tree

Showing 77 changed files with 4,023 additions and 1,053 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,19 +9,24 @@
 - [Quick Fix Import Button][12051].
 - [Fixed nodes being selected after deleting other nodes or connections.][11902]
 - [Redo stack is no longer lost when interacting with text literals][11908].
+- [Fixed bug when clicking header in Table Editor Widget didn't start editing
+  it][12064]
 
 [11889]: https://github.com/enso-org/enso/pull/11889
 [11836]: https://github.com/enso-org/enso/pull/11836
 [12051]: https://github.com/enso-org/enso/pull/12051
 [11902]: https://github.com/enso-org/enso/pull/11902
 [11908]: https://github.com/enso-org/enso/pull/11908
+[12064]: https://github.com/enso-org/enso/pull/12064
 
 #### Enso Standard Library
 
 - [Allow using `/` to access files inside a directory reached through a data
   link.][11926]
+- [Added Table.Offset][12071]
 
 [11926]: https://github.com/enso-org/enso/pull/11926
+[12071]: https://github.com/enso-org/enso/pull/12071
 
 #### Enso Language & Runtime
 

diff --git a/app/common/src/utilities/data/object.ts b/app/common/src/utilities/data/object.ts
@@ -193,27 +193,6 @@ export type ExtractKeys<T, U> = {
 /** An instance method of the given type. */
 export type MethodOf<T> = (this: T, ...args: never) => unknown
 
-// ===================
-// === useObjectId ===
-// ===================
-
-/** Composable providing support for managing object identities. */
-export function useObjectId() {
-  let lastId = 0
-  const idNumbers = new WeakMap<object, number>()
-  /** @returns A value that can be used to compare object identity. */
-  function objectId(o: object): number {
-    const id = idNumbers.get(o)
-    if (id == null) {
-      lastId += 1
-      idNumbers.set(o, lastId)
-      return lastId
-    }
-    return id
-  }
-  return { objectId }
-}
-
 /**
  * Returns the union of `A` and `B`, with a type-level assertion that `A` and `B` don't have any keys in common; this
  * can be used to splice together objects without the risk of collisions.

diff --git a/app/gui/package.json b/app/gui/package.json
@@ -112,6 +112,7 @@
     "react-aria": "3.34.3",
     "react-aria-components": "1.3.3",
     "react-compiler-runtime": "19.0.0-beta-a7bf2bd-20241110",
+    "react-keyed-flatten-children": "3.0.2",
     "react-dom": "^18.3.1",
     "react-error-boundary": "4.0.13",
     "react-hook-form": "^7.54.2",

diff --git a/app/gui/src/dashboard/assets/expand_arrow_down.svg b/app/gui/src/dashboard/assets/expand_arrow_down.svg
diff --git a/app/gui/src/dashboard/assets/expand_arrow_right.svg b/app/gui/src/dashboard/assets/expand_arrow_right.svg
diff --git a/app/gui/src/dashboard/assets/expand_arrow_up.svg b/app/gui/src/dashboard/assets/expand_arrow_up.svg
diff --git a/app/gui/src/dashboard/assets/sort_ascending.svg b/app/gui/src/dashboard/assets/sort_ascending.svg
diff --git a/app/gui/src/dashboard/components/AriaComponents/Button/Button.stories.tsx b/app/gui/src/dashboard/components/AriaComponents/Button/Button.stories.tsx
@@ -1,11 +1,13 @@
 import Enso from '#/assets/enso_logo.svg'
+import ArrowDownIcon from '#/assets/expand_arrow_down.svg'
+import Plus from '#/assets/plus.svg'
+
 import type * as aria from '#/components/aria'
-import { Text } from '#/components/AriaComponents'
+import { Popover, Separator, Text } from '#/components/AriaComponents'
 import type { Meta, StoryObj } from '@storybook/react'
 import { expect, userEvent, within } from '@storybook/test'
+import { Button, type BaseButtonProps } from '.'
 import { Badge } from '../../Badge'
-import type { BaseButtonProps } from './Button'
-import { Button } from './Button'
 
 type Story = StoryObj<BaseButtonProps<aria.ButtonRenderProps>>
 
@@ -18,6 +20,7 @@ const variants = [
   'link',
   'submit',
   'outline',
+  'icon',
 ] as const
 const sizes = ['hero', 'large', 'medium', 'small', 'xsmall', 'xxsmall'] as const
 
@@ -43,22 +46,15 @@ export const Variants: Story = {
   render: () => (
     <div className="flex flex-col gap-4">
       <Text.Heading>Variants</Text.Heading>
-      <div className="grid grid-cols-4 place-content-start place-items-start gap-3">
-        {variants.map((variant) => (
-          <Button key={variant} variant={variant}>
-            {variant}
-          </Button>
-        ))}
-      </div>
-
-      <Text.Heading>Sizes</Text.Heading>
-      <div className="grid grid-cols-4 place-content-center place-items-start gap-3">
-        {sizes.map((size) => (
-          <Button key={size} size={size}>
-            {size}
-          </Button>
-        ))}
-      </div>
+      {variants.map((variant) => (
+        <div className="grid grid-cols-4 place-items-center gap-3">
+          {sizes.map((size) => (
+            <Button key={variant} variant={variant} size={size}>
+              {variant}
+            </Button>
+          ))}
+        </div>
+      ))}
 
       <Text.Heading>Icons</Text.Heading>
       <div className="grid grid-cols-4 place-content-center place-items-start gap-3">
@@ -167,3 +163,227 @@ export const Addons: Story = {
     </>
   ),
 }
+
+export const ButtonGroup: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-2">
+        <Text.Heading>Separate</Text.Heading>
+        <Button.Group>
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <Text.Heading>Joined</Text.Heading>
+
+        {variants.map((variant) => (
+          <Button.GroupJoin key={variant} buttonVariants={{ variant }}>
+            <Button>Button 1</Button>
+            <Button>Button 2</Button>
+            <Button icon={ArrowDownIcon} />
+          </Button.GroupJoin>
+        ))}
+
+        <Button.GroupJoin buttonVariants={{ variant: 'primary' }}>
+          <Button icon={Plus}>New Project</Button>
+
+          <Popover.Trigger>
+            <Button icon={ArrowDownIcon} />
+
+            <Popover>
+              <Text>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</Text>
+            </Popover>
+          </Popover.Trigger>
+        </Button.GroupJoin>
+      </div>
+
+      {/* Column */}
+      <div className="flex flex-col gap-2">
+        <Text.Heading>Column</Text.Heading>
+        <Button.Group direction="column">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+
+        <Separator />
+
+        <Button.Group direction="column" align="center">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+
+        <Separator />
+
+        <Button.Group direction="column" align="end">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+
+        <Separator />
+
+        <Button.Group direction="column" align="between">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+
+        <Separator />
+
+        <Button.Group direction="column" align="around">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+
+        <Separator />
+
+        <Button.Group direction="column" align="evenly">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+
+        <Separator />
+
+        <Button.Group direction="column" align="start">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+
+        <Separator />
+
+        <Button.Group direction="column" verticalAlign="end">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+
+        <Separator />
+
+        <Button.Group direction="column" verticalAlign="center">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+
+        <Separator />
+
+        <Button.Group direction="column" verticalAlign="start">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+
+        <Separator />
+
+        <Button.Group direction="column" verticalAlign="end">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+
+        <Separator />
+      </div>
+      {/* End Column */}
+
+      {/* Row */}
+      <div className="flex flex-col gap-4">
+        <Text.Heading>Row</Text.Heading>
+        <Button.Group direction="row">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+
+        <Separator />
+
+        <Button.Group direction="row" align="center">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+
+        <Separator />
+
+        <Button.Group direction="row" align="end">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+
+        <Separator />
+
+        <Button.Group direction="row" align="between">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+
+        <Separator />
+
+        <Button.Group direction="row" align="around">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+
+        <Separator />
+
+        <Button.Group direction="row" align="evenly">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+
+        <Separator />
+
+        <Button.Group direction="row" align="start">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+
+        <Separator />
+
+        <Button.Group direction="row" verticalAlign="end">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+
+        <Separator />
+
+        <Button.Group direction="row" verticalAlign="center">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+
+        <Separator />
+
+        <Button.Group direction="row" verticalAlign="start">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+      </div>
+      {/* End Row */}
+
+      <div className="flex flex-col gap-2">
+        <Text.Heading>Button Styles</Text.Heading>
+        <Button.Group buttonVariants={{ isDisabled: true, variant: 'outline' }}>
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+      </div>
+    </div>
+  ),
+}