@antscorp/ui 0.1.3 → 0.1.5

package/src/molecules/TreeOptions.tsx

@@ -1,3 +1,4 @@
+import { useTreeFocus } from "@astryxdesign/core/hooks";
 import { Icon } from "@astryxdesign/core/Icon";
 import { useIndicator } from "@astryxdesign/core/Indicator";
 import { Text } from "@astryxdesign/core/Text";
@@ -9,7 +10,7 @@ import {
 } from "@astryxdesign/core/theme/tokens.stylex";
 import { themeProps } from "@astryxdesign/core/utils";
 import * as stylex from "@stylexjs/stylex";
-import { type KeyboardEvent, type ReactNode, useState } from "react";
+import { Fragment, type ReactNode, useId, useState } from "react";
 
 /** One row of a two-level tree to pick from: a leaf, or a group of leaves. */
 export type TreeItem = {
@@ -58,12 +59,15 @@ type Row = {
  * disabled row does neither. Rows are the Selector's option rows (its styles, its option-row and
  * check theme targets, its check on the picked leaf at the end, where a group shows its chevron),
  * so a theme styles both alike: the picked row's look and whether a check shows are the theme's.
- * Tab reaches the picked leaf (else the first enabled row), Up and Down move between rows, Enter
- * and Space act. Its state is which groups are open.
+ * Tab initially reaches the picked leaf (else the first enabled row); arrows, Home and End move
+ * through enabled rows, Right opens or enters a group, Left collapses or returns to its parent,
+ * and Enter and Space act. Its state is which groups are open and which row has focus.
  */
 export function TreeOptions(props: TreeOptionsProps): ReactNode {
   const { items, value } = props;
   const size = props.size ?? "md";
+  const id = useId();
+  const [active, setActive] = useState<string>();
   const [open, setOpen] = useState<ReadonlySet<string>>(
     () =>
       new Set(
@@ -87,7 +91,9 @@ export function TreeOptions(props: TreeOptionsProps): ReactNode {
   const Check = useIndicator("check");
   const enabled = rows.filter((row) => row.item.isDisabled !== true);
   const tabbable =
-    enabled.find((row) => row.isOpen === undefined && row.item.value === value) ?? enabled[0];
+    enabled.find((row) => row.item.value === active) ??
+    enabled.find((row) => row.isOpen === undefined && row.item.value === value) ??
+    enabled[0];
   const act = (row: Row): void => {
     if (row.item.isDisabled === true) return;
     if (row.isOpen === undefined) {
@@ -98,56 +104,84 @@ export function TreeOptions(props: TreeOptionsProps): ReactNode {
     if (!next.delete(row.item.value)) next.add(row.item.value);
     setOpen(next);
   };
-  return (
-    // Raw elements: a flat tree (rows with `aria-level`), which Astryx's TreeList is not: it puts
-    // a group's chevron first; this tree puts it at the end.
-    <div role="tree" aria-label={props.label} onKeyDown={moveFocus}>
-      {rows.map((row) => (
-        <div
-          key={row.item.value}
-          role="treeitem"
-          aria-level={row.level}
-          aria-expanded={row.isOpen}
-          aria-selected={row.isOpen === undefined ? row.item.value === value : undefined}
-          aria-disabled={row.item.isDisabled === true || undefined}
-          tabIndex={row === tabbable ? 0 : -1}
-          onClick={() => {
-            act(row);
-          }}
-          onKeyDown={(event) => {
-            if (event.key !== "Enter" && event.key !== " ") return;
-            event.preventDefault();
-            act(row);
-          }}
-          {...rowProps(row, size, value)}
-        >
-          {/* The option's content and mark column, as `Selector.tsx:1407-1431`. */}
-          {/* One line cut with an ellipsis, with Text's tooltip for the whole label;
+  const activate = (key: string | undefined): void => {
+    const row = rows.find((candidate) => candidate.item.value === key);
+    if (row !== undefined) act(row);
+  };
+  const { treeRef, handleKeyDown } = useTreeFocus({
+    itemSelector: '[role="treeitem"]:not([aria-disabled="true"])',
+    onToggleExpand: activate,
+    onActivate: (_item, key) => {
+      activate(key);
+      return true;
+    },
+  });
+  const groupId = (row: Row): string => `${id}-${encodeURIComponent(row.item.value)}`;
+  const renderRow = (row: Row): ReactNode => (
+    <div
+      key={row.item.value}
+      role="treeitem"
+      aria-label={row.item.label}
+      data-tree-id={row.item.value}
+      aria-level={row.level}
+      aria-expanded={row.isOpen}
+      aria-owns={row.isOpen === true ? groupId(row) : undefined}
+      aria-selected={row.isOpen === undefined ? row.item.value === value : undefined}
+      aria-disabled={row.item.isDisabled === true || undefined}
+      tabIndex={row.item === tabbable?.item ? 0 : -1}
+      onFocus={() => {
+        setActive(row.item.value);
+      }}
+      onClick={() => {
+        act(row);
+      }}
+      {...rowProps(row, size, value)}
+    >
+      {/* The option's content and mark column, as `Selector.tsx:1407-1431`. */}
+      {/* One line cut with an ellipsis, with Text's tooltip for the whole label;
               Astryx's SelectorOption would run under the mark. */}
-          <span {...stylex.props(styles.content)}>
-            <Text type="inherit" color="inherit" maxLines={1}>
-              {row.item.label}
-            </Text>
-          </span>
-          {/* A leaf's column sets no display of its own: the theme may hide it with its check. */}
-          <span {...stylex.props(styles.mark, row.isOpen !== undefined && styles.markCentred)}>
-            {row.isOpen === undefined ? (
-              <Check
-                state={row.item.value === value ? "checked" : "unchecked"}
-                size="sm"
-                isDisabled={row.item.isDisabled === true}
-                {...themeProps("selector-check")}
-              />
-            ) : (
-              <Icon
-                icon={row.isOpen ? "chevronDown" : "chevronRight"}
-                size="sm"
-                color="secondary"
-              />
+      <span {...stylex.props(styles.content)}>
+        <Text type="inherit" color="inherit" maxLines={1}>
+          {row.item.label}
+        </Text>
+      </span>
+      {/* A leaf's column sets no display of its own: the theme may hide it with its check. */}
+      <span {...stylex.props(styles.mark, row.isOpen !== undefined && styles.markCentred)}>
+        {row.isOpen === undefined ? (
+          <Check
+            state={row.item.value === value ? "checked" : "unchecked"}
+            size="sm"
+            isDisabled={row.item.isDisabled === true}
+            {...themeProps("selector-check")}
+          />
+        ) : (
+          <Icon icon={row.isOpen ? "chevronDown" : "chevronRight"} size="sm" color="secondary" />
+        )}
+      </span>
+    </div>
+  );
+  return (
+    // Raw tree roles preserve the trailing chevron layout; each parent owns its sibling group.
+    <div
+      role="tree"
+      aria-label={props.label}
+      ref={(element) => {
+        treeRef.current = element;
+      }}
+      onKeyDown={handleKeyDown}
+    >
+      {rows
+        .filter((row) => row.level === 1)
+        .map((row) => (
+          <Fragment key={row.item.value}>
+            {renderRow(row)}
+            {row.isOpen === true && (
+              <div role="group" id={groupId(row)}>
+                {row.item.children?.map((child) => renderRow({ item: child, level: 2 }))}
+              </div>
             )}
-          </span>
-        </div>
-      ))}
+          </Fragment>
+        ))}
     </div>
   );
 }
@@ -178,16 +212,6 @@ function rowProps(
   };
 }
 
-// Up and Down move the keyboard to the row above or below.
-function moveFocus(event: KeyboardEvent<HTMLDivElement>): void {
-  const step = event.key === "ArrowDown" ? 1 : event.key === "ArrowUp" ? -1 : 0;
-  if (step === 0) return;
-  event.preventDefault();
-  const rows = [...event.currentTarget.querySelectorAll<HTMLElement>('[role="treeitem"]')];
-  const at = rows.findIndex((row) => row === event.target);
-  rows[Math.min(Math.max(at + step, 0), rows.length - 1)]?.focus();
-}
-
 // Astryx `Selector/Selector.tsx` styles: `item` (345-366, without its radius), `itemContent`
 // (367-373), `itemMarkColumn` (379-389), `itemHighlighted` (395-397, here on hover and keyboard
 // focus, as the rows take focus, never on the picked row), `itemDisabled` (401-404) and

package/src/organisms/HourOfDayRow.tsx

@@ -1,3 +1,4 @@
+import type { AccentRole } from "@antscorp/astryx-theme-antsomi/palette";
 import { FieldStatus } from "@astryxdesign/core/FieldStatus";
 import { ScrollableArea } from "@astryxdesign/core/ScrollableArea";
 import { colorVars } from "@astryxdesign/core/theme/tokens.stylex";
@@ -115,6 +116,7 @@ export function HourOfDayRow(props: HourOfDayRowProps): ReactNode {
 }
 
 // As the week grid's: 24px cells, 11px text.
+const accentHover: AccentRole = "var(--ants-accent-hover)";
 const styles = stylex.create({
   grid: { width: "max-content", userSelect: "none", cursor: "pointer" },
   locked: { cursor: "default" },
@@ -138,13 +140,13 @@ const styles = stylex.create({
   liveOn: {
     backgroundColor: {
       default: colorVars["--color-accent"],
-      ":hover": { default: null, "@media (hover: hover)": "var(--ants-mh-blue-50)" },
+      ":hover": { default: null, "@media (hover: hover)": accentHover },
     },
   },
   liveOff: {
     backgroundColor: {
       default: colorVars["--color-neutral"],
-      ":hover": { default: null, "@media (hover: hover)": "var(--ants-mh-blue-50)" },
+      ":hover": { default: null, "@media (hover: hover)": accentHover },
     },
   },
   axis: { color: colorVars["--color-text-secondary"], fontSize: 11, whiteSpace: "nowrap" },

package/src/organisms/HourOfWeekGrid.tsx

@@ -1,3 +1,4 @@
+import type { AccentRole } from "@antscorp/astryx-theme-antsomi/palette";
 import { FieldStatus } from "@astryxdesign/core/FieldStatus";
 import { ScrollableArea } from "@astryxdesign/core/ScrollableArea";
 import { Text } from "@astryxdesign/core/Text";
@@ -239,6 +240,7 @@ export function HourOfWeekGrid(props: HourOfWeekGridProps): ReactNode {
 }
 
 // Sizes follow the form it came from: 24px cells, a 76px column of day names, 11px text.
+const accentHover: AccentRole = "var(--ants-accent-hover)";
 const styles = stylex.create({
   // Every cell picks, as in the form it came from; the cells inherit it.
   grid: { width: "max-content", userSelect: "none", cursor: "pointer" },
@@ -288,13 +290,13 @@ const styles = stylex.create({
   liveOn: {
     backgroundColor: {
       default: colorVars["--color-accent"],
-      ":hover": { default: null, "@media (hover: hover)": "var(--ants-mh-blue-50)" },
+      ":hover": { default: null, "@media (hover: hover)": accentHover },
     },
   },
   liveOff: {
     backgroundColor: {
       default: colorVars["--color-neutral"],
-      ":hover": { default: null, "@media (hover: hover)": "var(--ants-mh-blue-50)" },
+      ":hover": { default: null, "@media (hover: hover)": accentHover },
     },
   },
   axis: {

package/src/organisms/TokenPickerDialog.tsx

@@ -6,6 +6,7 @@ import { TextInput } from "@astryxdesign/core/TextInput";
 import { VStack } from "@astryxdesign/core/VStack";
 import { type ReactNode, useState } from "react";
 
+import type { Forwardable } from "../lib/forwardable";
 import { useLoadingShown } from "../lib/useLoadingShown";
 import { FieldSkeleton } from "../molecules/FieldSkeleton";
 import { leafOf, type TreeItem } from "../molecules/TreeOptions";
@@ -22,7 +23,7 @@ export type TokenPickerValue = {
 };
 
 /** What `TokenPickerDialog` takes. */
-export type TokenPickerDialogProps = Pick<DialogProps, "isOpen"> & {
+export type TokenPickerDialogProps = Forwardable<Pick<DialogProps, "isOpen">> & {
   /** Closes or cancels the dialog. */
   readonly onClose: () => void;
   /** Dialog heading. */

package/src/organisms/TransferPicker.tsx

@@ -10,6 +10,7 @@ import { InfoTip } from "../atoms/InfoTip";
 import { PanelSearchInput } from "../atoms/PanelSearchInput";
 import { RowSkeletons } from "../atoms/RowSkeletons";
 import { TextAction } from "../atoms/TextAction";
+import type { Forwardable } from "../lib/forwardable";
 import { useLoadingShown } from "../lib/useLoadingShown";
 import { type LoadMoreOptions, useLoadMore } from "../lib/useLoadMore";
 import { CheckRow } from "../molecules/CheckRow";
@@ -34,9 +35,8 @@ export type TransferPickerOption<V extends string> = {
 };
 
 /** What `TransferPicker` takes. */
-export type TransferPickerProps<V extends string> = Pick<
-  LoadMoreOptions,
-  "onLoadMore" | "hasMore" | "isLoadingMore"
+export type TransferPickerProps<V extends string> = Forwardable<
+  Pick<LoadMoreOptions, "onLoadMore" | "hasMore" | "isLoadingMore">
 > & {
   /** Names the list of options (the start column). */
   readonly label: string;

package/src/organisms/TreeSearchPanel.tsx

@@ -64,7 +64,7 @@ export function TreeSearchPanel(props: TreeSearchPanelProps): ReactNode {
   const { rootRef, sentinelRef } = useLoadMore({
     ...more,
     hasLoadMoreError: labels.loadMoreError !== undefined,
-    itemCount: shown.length,
+    itemCount: shown.reduce((count, item) => count + 1 + (item.children?.length ?? 0), 0),
   });
   const groups = shown.filter((item) => item.children !== undefined).length;
   return (

package/src/theme/AntsomiTheme.tsx

@@ -2,11 +2,13 @@ import { antsomiTheme } from "@antscorp/astryx-theme-antsomi";
 import { Theme } from "@astryxdesign/core/theme";
 import type { ComponentProps, ReactElement } from "react";
 
+import type { Forwardable } from "../lib/forwardable";
+
 /**
  * Astryx Theme props with the Antsomi base theme as the default.
  * Inherited `children` renders the themed subtree; `mode` selects light, dark or system mode.
  */
-export type AntsomiThemeProps = Omit<ComponentProps<typeof Theme>, "theme"> & {
+export type AntsomiThemeProps = Forwardable<Omit<ComponentProps<typeof Theme>, "theme">> & {
   /** Optional override created with `defineTheme({ extends: antsomiTheme, … })`. */
   readonly theme?: ComponentProps<typeof Theme>["theme"];
 };
@@ -16,6 +18,10 @@ export type AntsomiThemeProps = Omit<ComponentProps<typeof Theme>, "theme"> & {
  * Import `@antscorp/ui/theme.css` separately. Extend the base with Astryx's
  * `defineTheme({ name: "custom", extends: antsomiTheme, tokens: { … } })` and pass it as `theme`.
  */
-export function AntsomiTheme({ theme, ...rest }: AntsomiThemeProps): ReactElement {
-  return <Theme theme={theme ?? antsomiTheme} {...rest} />;
+export function AntsomiTheme({ theme, mode, children }: AntsomiThemeProps): ReactElement {
+  return (
+    <Theme theme={theme ?? antsomiTheme} {...(mode !== undefined && { mode })}>
+      {children}
+    </Theme>
+  );
 }

package/dist/atoms/AddButton.doc.d.ts

@@ -1,21 +0,0 @@
-/** Usage guidance for AddButton. */
-export declare const doc: {
-    category: "Inputs";
-    keywords: string[];
-    usage: {
-        description: string;
-        bestPractices: ({
-            guidance: true;
-            description: string;
-        } | {
-            guidance: false;
-            description: string;
-        })[];
-        anatomy: {
-            name: string;
-            required: true;
-            description: string;
-        }[];
-    };
-    accessibility: string[];
-};

package/dist/atoms/AddGlyph.doc.d.ts

@@ -1,16 +0,0 @@
-/** Usage guidance for AddGlyph. */
-export declare const doc: {
-    category: "Data display";
-    keywords: string[];
-    usage: {
-        description: string;
-        bestPractices: ({
-            guidance: true;
-            description: string;
-        } | {
-            guidance: false;
-            description: string;
-        })[];
-    };
-    accessibility: string[];
-};

package/dist/atoms/Chip.doc.d.ts

@@ -1,29 +0,0 @@
-/** Usage guidance for Chip. */
-export declare const doc: {
-    category: "Data display";
-    keywords: string[];
-    related: {
-        name: string;
-        when: string;
-    }[];
-    usage: {
-        description: string;
-        bestPractices: ({
-            guidance: true;
-            description: string;
-        } | {
-            guidance: false;
-            description: string;
-        })[];
-        anatomy: ({
-            name: string;
-            required: true;
-            description: string;
-        } | {
-            name: string;
-            required: false;
-            description: string;
-        })[];
-    };
-    accessibility: string[];
-};

package/dist/atoms/ChipSkeletons.doc.d.ts

@@ -1,21 +0,0 @@
-/** Usage guidance for ChipSkeletons. */
-export declare const doc: {
-    category: "Feedback";
-    keywords: string[];
-    usage: {
-        description: string;
-        bestPractices: ({
-            guidance: true;
-            description: string;
-        } | {
-            guidance: false;
-            description: string;
-        })[];
-        anatomy: {
-            name: string;
-            required: true;
-            description: string;
-        }[];
-    };
-    accessibility: string[];
-};

package/dist/atoms/FieldHeading.doc.d.ts

@@ -1,15 +0,0 @@
-/** Usage guidance for FieldHeading. */
-export declare const doc: {
-    category: "Data display";
-    keywords: string[];
-    usage: {
-        description: string;
-        bestPractices: ({
-            guidance: true;
-            description: string;
-        } | {
-            guidance: false;
-            description: string;
-        })[];
-    };
-};

package/dist/atoms/HoverSwap.doc.d.ts

@@ -1,25 +0,0 @@
-/** Usage guidance for HoverSwap. */
-export declare const doc: {
-    category: "Layout";
-    keywords: string[];
-    usage: {
-        description: string;
-        bestPractices: ({
-            guidance: true;
-            description: string;
-        } | {
-            guidance: false;
-            description: string;
-        })[];
-        anatomy: ({
-            name: string;
-            required: false;
-            description: string;
-        } | {
-            name: string;
-            required: true;
-            description: string;
-        })[];
-    };
-    accessibility: string[];
-};

package/dist/atoms/InfoTip.doc.d.ts

@@ -1,25 +0,0 @@
-/** Usage guidance for InfoTip. */
-export declare const doc: {
-    category: "Feedback";
-    keywords: string[];
-    usage: {
-        description: string;
-        bestPractices: ({
-            guidance: true;
-            description: string;
-        } | {
-            guidance: false;
-            description: string;
-        })[];
-        anatomy: ({
-            name: string;
-            required: true;
-            description: string;
-        } | {
-            name: string;
-            required: false;
-            description: string;
-        })[];
-    };
-    accessibility: string[];
-};

package/dist/atoms/JointLabel.doc.d.ts

@@ -1,15 +0,0 @@
-/** Usage guidance for JointLabel. */
-export declare const doc: {
-    category: "Data display";
-    keywords: string[];
-    usage: {
-        description: string;
-        bestPractices: ({
-            guidance: true;
-            description: string;
-        } | {
-            guidance: false;
-            description: string;
-        })[];
-    };
-};

package/dist/atoms/LabeledDivider.doc.d.ts

@@ -1,21 +0,0 @@
-/** Usage guidance for LabeledDivider. */
-export declare const doc: {
-    category: "Layout";
-    keywords: string[];
-    usage: {
-        description: string;
-        bestPractices: ({
-            guidance: true;
-            description: string;
-        } | {
-            guidance: false;
-            description: string;
-        })[];
-        anatomy: {
-            name: string;
-            required: true;
-            description: string;
-        }[];
-    };
-    accessibility: string[];
-};

package/dist/atoms/LogoImage.doc.d.ts

@@ -1,21 +0,0 @@
-/** Usage guidance for LogoImage. */
-export declare const doc: {
-    category: "Data display";
-    keywords: string[];
-    usage: {
-        description: string;
-        bestPractices: ({
-            guidance: true;
-            description: string;
-        } | {
-            guidance: false;
-            description: string;
-        })[];
-        anatomy: {
-            name: string;
-            required: false;
-            description: string;
-        }[];
-    };
-    accessibility: string[];
-};

package/dist/atoms/PanelSearchInput.doc.d.ts

@@ -1,25 +0,0 @@
-/** Usage guidance for PanelSearchInput. */
-export declare const doc: {
-    category: "Inputs";
-    keywords: string[];
-    usage: {
-        description: string;
-        bestPractices: ({
-            guidance: true;
-            description: string;
-        } | {
-            guidance: false;
-            description: string;
-        })[];
-        anatomy: ({
-            name: string;
-            required: true;
-            description: string;
-        } | {
-            name: string;
-            required: false;
-            description: string;
-        })[];
-    };
-    accessibility: string[];
-};

package/dist/atoms/PathMark.doc.d.ts

@@ -1,16 +0,0 @@
-/** Usage guidance for PathMark. */
-export declare const doc: {
-    category: "Layout";
-    keywords: string[];
-    usage: {
-        description: string;
-        bestPractices: ({
-            guidance: true;
-            description: string;
-        } | {
-            guidance: false;
-            description: string;
-        })[];
-    };
-    accessibility: string[];
-};

package/dist/atoms/RemoveButton.doc.d.ts

@@ -1,16 +0,0 @@
-/** Usage guidance for RemoveButton. */
-export declare const doc: {
-    category: "Inputs";
-    keywords: string[];
-    usage: {
-        description: string;
-        bestPractices: ({
-            guidance: true;
-            description: string;
-        } | {
-            guidance: false;
-            description: string;
-        })[];
-    };
-    accessibility: string[];
-};

package/dist/atoms/RowSkeletons.doc.d.ts

@@ -1,25 +0,0 @@
-/** Usage guidance for RowSkeletons. */
-export declare const doc: {
-    category: "Feedback";
-    keywords: string[];
-    usage: {
-        description: string;
-        bestPractices: ({
-            guidance: true;
-            description: string;
-        } | {
-            guidance: false;
-            description: string;
-        })[];
-        anatomy: ({
-            name: string;
-            required: true;
-            description: string;
-        } | {
-            name: string;
-            required: false;
-            description: string;
-        })[];
-    };
-    accessibility: string[];
-};

package/dist/atoms/TextAction.doc.d.ts

@@ -1,25 +0,0 @@
-/** Usage guidance for TextAction. */
-export declare const doc: {
-    category: "Inputs";
-    keywords: string[];
-    usage: {
-        description: string;
-        bestPractices: ({
-            guidance: true;
-            description: string;
-        } | {
-            guidance: false;
-            description: string;
-        })[];
-        anatomy: ({
-            name: string;
-            required: true;
-            description: string;
-        } | {
-            name: string;
-            required: false;
-            description: string;
-        })[];
-    };
-    accessibility: string[];
-};