@antscorp/ui 0.1.2 → 0.1.4

package/src/molecules/TransferLayout.tsx

@@ -40,7 +40,7 @@ export type TransferLayoutProps = {
 };
 
 /**
- * Two columns side by side in one frame, as fe-app's audience picker: a header strip over two
+ * Two columns side by side in one frame: a header strip over two
  * equal columns of a fixed height whose lists scroll on their own, 1px lines between the parts
  * and no gap, and an optional footer under the start column. The headers and the lists' titles
  * sit outside the scrolling areas. Pure layout: every part is a slot. It holds no state.
@@ -126,8 +126,7 @@ export function TransferLayout({
 
 const LINE_COLOR = "var(--ants-mh-gray-200)";
 
-// fe-app's UITargetSelection grid (WrapperHeaderSelect, WrapperSelectItem, WrapperButtonFooter):
-// lines of its platinum grey, a 41px header strip, columns of a fixed height.
+// Platinum grey grid lines, a 41px header strip, columns of a fixed height.
 const styles = stylex.create({
   frame: {
     gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)",

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 = {
@@ -53,17 +54,20 @@ type Row = {
 };
 
 /**
- * The rows of a two-level tree to pick from, as fe-app's tree list: a group row shows its chevron
+ * The rows of a two-level tree to pick from: a group row shows its chevron
  * at the end (right when closed, down when open) and only opens and closes; a leaf is picked; a
  * 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);
   };
+  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>
+    </div>
+  );
   return (
-    // Raw elements: a flat tree (rows with `aria-level`), which Astryx's TreeList is not: it puts
-    // a group's chevron first, fe-app 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, the whole label in Text's tooltip when cut, as
-              fe-app's tree (`Tree/Item.jsx:235`); 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"
-              />
+    // 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,22 +212,12 @@ 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
 // `itemSizeStyles` (452-460). The radius and the picked row's background and weight
 // (`itemSelected`) are left to the theme's `selector-option-row`. Only `child` is ours: a
-// group's leaves one indent step in, as fe-app's.
+// group's leaves one indent step in.
 const styles = stylex.create({
   row: {
     boxSizing: "border-box",
@@ -250,7 +274,7 @@ export function leafOf(items: readonly TreeItem[], value: string): TreeItem | un
   return undefined;
 }
 
-// The rows a search leaves, as fe-app's `searchTree`: a case-insensitive substring of the label.
+// The rows a search leaves: a case-insensitive substring of the label.
 // A leaf stays when it matches; a group when its label or a child's matches, keeping only the
 // children that match.
 export function matchTree(items: readonly TreeItem[], search: string): TreeItem[] {

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" },
@@ -133,18 +135,18 @@ const styles = stylex.create({
   },
   on: { backgroundColor: colorVars["--color-accent"] },
   off: { backgroundColor: colorVars["--color-neutral"] },
-  // fe-app's cells (SelectHoursOfDay Box) turn its hover blue under the pointer, picked or not,
+  // Cells turn hover blue under the pointer, picked or not,
   // while they can be changed.
   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" },
@@ -283,18 +285,18 @@ const styles = stylex.create({
   },
   on: { backgroundColor: colorVars["--color-accent"] },
   off: { backgroundColor: colorVars["--color-neutral"] },
-  // fe-app's cells (SelectHoursOfDay Box) turn its hover blue under the pointer, picked or not,
+  // Cells turn hover blue under the pointer, picked or not,
   // while they can be changed.
   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/RuleGroups.tsx

@@ -55,11 +55,11 @@ export type RuleGroupsProps<R> = {
 };
 
 /**
- * Rules in groups, as fe-app's attribute filter: each rule a card with an accent stripe, a title
+ * Rules in groups: each rule a card with an accent stripe, a title
  * and a close button; the word "and" under each card but a group's last, and a pill button adding
  * a rule at the end of the group; a dashed divider with "or" between groups, and a pill button
- * adding a group after the last; each word in capitals, as fe-app's. Unlike a list's add, an add at its limit (`maxRules`,
- * `maxGroups`) is gone, as fe-app's. The only rule left has no close button, so the groups are
+ * adding a group after the last; each word in capitals. Unlike a list's add, an add at its limit (`maxRules`,
+ * `maxGroups`) is hidden. The only rule left has no close button, so the groups are
  * never emptied from here; with no group at all only the button adding one shows. It holds no
  * state.
  */

package/src/organisms/SearchableGroupedList.tsx

@@ -66,7 +66,7 @@ export type SearchableGroupedListProps<I> = {
   /**
    * Caps the height, the groups scrolling under the search box, in a pop-over say; with no
    * `maxHeight` it fills its parent's height, in a side panel say. The list then pads its own edges,
-   * so the search row (its magnifier at the end, as fe-app's) and the rule under it reach the
+   * so the search row (its magnifier at the end) and the rule under it reach the
    * edges of a flush (unpadded) surface, and so does the scrollbar.
    */
   readonly scroll?: { readonly maxHeight?: number | undefined; readonly label: string } | undefined;
@@ -271,7 +271,7 @@ const styles = stylex.create({
   framed: { minHeight: 0 },
   capped: (maxHeight: number) => ({ maxHeight }),
   scroll: { minHeight: 0 },
-  // A folding group's row, as fe-app's picker: 10px sides, 36px high when folded.
+  // A folding group's row: 10px sides, 36px high when folded.
   fold: { paddingInline: 10, paddingBlock: 6 },
   flush: { marginInline: -10 },
   title: { fontSize: typeScaleVars["--text-label-size"] },

package/src/organisms/TransferPicker.tsx

@@ -142,7 +142,7 @@ export type TransferPickerProps<V extends string> = Pick<
 const LOADING_ROWS = 6;
 
 /**
- * Picks options in two columns of one frame, as fe-app's target selection: a header strip with
+ * Picks options in two columns of one frame: a header strip with
  * the search (and the host's controls) over the options to tick, and the host's controls with
  * "Remove all" over the picked ones in framed rows with a remove button. Searching matches every
  * word, in any case; it stays cheap for thousands of options, and a new search scrolls the
@@ -177,7 +177,7 @@ export function TransferPicker<V extends string>(props: TransferPickerProps<V>):
     <HStack gap={2} align="center" justify={props.endHeader === undefined ? "end" : "between"}>
       {props.endHeader}
       {removeAll !== undefined && (
-        // fe-app keeps it pressable while nothing is picked.
+        // Keep the clear action pressable while nothing is picked.
         <TextAction
           label={removeAll}
           isDisabled={isDisabled}
@@ -365,7 +365,7 @@ function OptionsHeading<V extends string>(
             isLabelHidden
             isDisabled={props.isDisabled ?? false}
             isReadOnly={props.isReadOnly ?? false}
-            // fe-app's box: one mark for "some or all picked", and a click clears them.
+            // One mark for "some or all picked", and a click clears them.
             value={props.value.length > 0 ? "indeterminate" : false}
             onChange={props.onSelectAll}
           />

package/src/organisms/TreeSearchPanel.tsx

@@ -14,7 +14,7 @@ import { LoadMoreRow } from "../molecules/LoadMoreRow";
 import { matchTree, TreeOptions } from "../molecules/TreeOptions";
 import type { TreeSelectItem, TreeSelectProps } from "./TreeSelect";
 
-// fe-app's tree list is at most 200px high (UISelectCondition `Tree/index.jsx`).
+// Cap the tree list at 200px so longer results scroll inside the panel.
 const LIST_HEIGHT = 200;
 
 /** What `TreeSearchPanel` takes. */
@@ -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/organisms/TreeSelect.tsx

@@ -88,7 +88,7 @@ export type TreeSelectProps = Pick<LoadMoreOptions, "onLoadMore" | "hasMore" | "
   readonly isLoading?: boolean | undefined;
   /** The trigger's width, in pixels or any CSS length such as `"100%"`; as wide as its content without it. */
   readonly width?: number | string | undefined;
-  /** The trigger's size, `md` by default (30px, as fe-app's controls). */
+  /** The trigger's size, `md` by default (the theme's 30px control height). */
   readonly size?: "sm" | "md" | undefined;
   /** Dims the trigger and blocks it. */
   readonly isDisabled?: boolean | undefined;
@@ -105,8 +105,8 @@ export type TreeSelectProps = Pick<LoadMoreOptions, "onLoadMore" | "hasMore" | "
 };
 
 /**
- * A Selector-like trigger opening a popover with a search box over a two-level tree, as fe-app's
- * `UISelectCondition use="tree"`: a group row (its chevron at the end) only opens and closes, a
+ * A Selector-like trigger opening a popover with a search box over a two-level tree:
+ * a group row (its chevron at the end) only opens and closes, a
  * leaf is picked and closes the popover, a disabled row is not picked. The search keeps a leaf
  * whose label matches and a group whose label or a child's matches, with only its matching
  * children, every group open; with `onSearchChange` the host searches instead. With
@@ -289,7 +289,7 @@ const styles = stylex.create({
     cursor: { default: "pointer", ":disabled": "default" },
   },
   // With an addon the frame has the input look and lays out the addon, the line and the trigger;
-  // fe-app's SelectAssociatedTag: 5px before the tag, the line 6px after it and 1px before the
+  // The tag's inset: 5px before the tag, the line 6px after it and 1px before the
   // select (no spacing step is 5px, 6px or 1px).
   frame: {
     display: "flex",