@antscorp/ui 0.1.3 → 0.1.4

package/src/molecules/RevealSwitch.tsx

@@ -1,19 +1,13 @@
-import { Switch } from "@astryxdesign/core/Switch";
+import { Switch, type SwitchProps } from "@astryxdesign/core/Switch";
 import { VStack } from "@astryxdesign/core/VStack";
 import type { ReactNode } from "react";
 
 /** What `RevealSwitch` takes. */
-export type RevealSwitchProps = {
-  /** What the switch turns on. */
-  readonly label: string;
-  /** Whether the switch is on. */
-  readonly value: boolean;
+export type RevealSwitchProps = Pick<SwitchProps, "label" | "isDisabled" | "value"> & {
   /** Called with the new state. */
   readonly onChange: (value: boolean) => void;
   /** The switch's size, `md` by default. */
   readonly size?: "sm" | "md" | undefined;
-  /** Dims the switch and blocks it. */
-  readonly isDisabled?: boolean | undefined;
   /** Shows the value, not dimmed, and ignores changes. */
   readonly isReadOnly?: boolean | undefined;
   /** What shows below the switch while it is on. */

package/src/molecules/Select.tsx

@@ -2,6 +2,7 @@ import {
   Selector,
   type SelectorOptionData,
   type SelectorOptionType,
+  type SelectorProps,
 } from "@astryxdesign/core/Selector";
 import type { ReactNode } from "react";
 
@@ -13,13 +14,20 @@ import { useLoadingShown } from "../lib/useLoadingShown";
 export type SelectOption = SelectorOptionType;
 
 /** What `Select` takes. */
-export type SelectProps = {
-  /** Names the control for assistive tech; shown above it unless `isLabelHidden`. */
-  readonly label: string;
-  /** Hides the label, as in a rule row. */
-  readonly isLabelHidden?: boolean | undefined;
-  /** A line under the label that explains the choice. */
-  readonly description?: string | undefined;
+export type SelectProps = Pick<
+  SelectorProps,
+  | "label"
+  | "isLabelHidden"
+  | "description"
+  | "placeholder"
+  | "hasSearch"
+  | "width"
+  | "isDisabled"
+  | "isReadOnly"
+  | "isRequired"
+  | "controlXstyle"
+  | "containerXstyle"
+> & {
   /** The list, in order. */
   readonly options: readonly SelectOption[];
   /** The picked option's value; `null` or none shows the placeholder. */
@@ -28,22 +36,10 @@ export type SelectProps = {
   readonly onChange: (value: string) => void;
   /** Called by the clear button, which shows only when this is given and an option is picked. */
   readonly onClear?: (() => void) | undefined;
-  /** Shown in the trigger while nothing is picked. */
-  readonly placeholder?: string | undefined;
-  /** A search box over the list, filtering it as it is typed. */
-  readonly hasSearch?: boolean | undefined;
   /** The trigger's look: an underlined field (`input`, the default) or a bare text button (`ghost`). */
   readonly variant?: "input" | "ghost" | undefined;
-  /** The trigger's size, `md` by default (the theme's 30px control height). */
-  readonly size?: "sm" | "md" | undefined;
-  /** The trigger's width, in pixels or any CSS length such as `"100%"`. */
-  readonly width?: number | string | undefined;
-  /** Dims the trigger and blocks it. */
-  readonly isDisabled?: boolean | undefined;
-  /** Shows the picked label without the chevron; the list does not open. */
-  readonly isReadOnly?: boolean | undefined;
-  /** Marks the field as required. */
-  readonly isRequired?: boolean | undefined;
+  /** The trigger's size, md by default; the kit narrows the upstream sizes to sm and md. */
+  readonly size?: Extract<SelectorProps["size"], "sm" | "md"> | undefined;
   /**
    * The options are loading: a spinner in place of the chevron and the trigger busy from 300 ms
    * on, for at least 300 ms (`useLoadingShown`), and the list does not open meanwhile. The picked
@@ -53,7 +49,7 @@ export type SelectProps = {
   readonly isLoading?: boolean | undefined;
   /** A problem with the pick, already in the user's language, shown under the trigger. */
   readonly error?: string | undefined;
-  /** The texts the view shows; the host translates them. Astryx's English stands in for a missing one. */
+  /** Host texts; missing strings use the facade's InternationalizationProvider locale (English by default). */
   readonly labels?:
     | {
         /** The search box's placeholder, such as "Search". */
@@ -72,6 +68,8 @@ export type SelectProps = {
  * The kit's select on Astryx's `Selector`: the list is as wide as the
  * trigger (the theme) and a long option label ends in an ellipsis with the whole label in a
  * tooltip. Every select is one rather than Astryx's `Selector` (lint-enforced). It holds no state.
+ * Localize upstream search, clear and empty text with `InternationalizationProvider` from
+ * `@antscorp/ui/astryx/i18n`; `labels` overrides individual kit captions.
  */
 export function Select(props: SelectProps): ReactNode {
   const { labels = {}, onClear, onChange } = props;
@@ -106,6 +104,8 @@ export function Select(props: SelectProps): ReactNode {
     ...(props.isDisabled !== undefined && { isDisabled: props.isDisabled }),
     ...(props.isReadOnly !== undefined && !isBusy && { isReadOnly: props.isReadOnly }),
     ...(props.isRequired !== undefined && { isRequired: props.isRequired }),
+    ...(props.controlXstyle !== undefined && { controlXstyle: props.controlXstyle }),
+    ...(props.containerXstyle !== undefined && { containerXstyle: props.containerXstyle }),
     ...(labels.search !== undefined && { searchPlaceholder: labels.search }),
     ...(labels.noMatch !== undefined && { emptySearchText: labels.noMatch }),
   };

package/src/molecules/StatusButton.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@astryxdesign/core/Button";
+import { Button, type ButtonProps } from "@astryxdesign/core/Button";
 import { StatusDot } from "@astryxdesign/core/StatusDot";
 import type { ComponentProps, ReactNode } from "react";
 
@@ -6,9 +6,7 @@ import type { ComponentProps, ReactNode } from "react";
 export type StatusTone = ComponentProps<typeof StatusDot>["variant"];
 
 /** What `StatusButton` takes. */
-export type StatusButtonProps = {
-  /** The button's text. */
-  readonly label: string;
+export type StatusButtonProps = Pick<ButtonProps, "label" | "icon" | "isDisabled"> & {
   /** The dot's tone: neutral, accent, success, warning or error. */
   readonly status: StatusTone;
   /** The texts the view shows; the host translates them. */
@@ -16,14 +14,10 @@ export type StatusButtonProps = {
     /** What the dot means, read out for it, e.g. "Connected". */
     readonly status: string;
   };
-  /** A glyph before the text. */
-  readonly icon?: ReactNode;
   /** Called when the button is pressed. */
   readonly onClick: () => void;
   /** The button's height, `md` by default. */
   readonly size?: "sm" | "md" | undefined;
-  /** Dimmed and not pressable. */
-  readonly isDisabled?: boolean | undefined;
 };
 
 /** A button whose dot shows a state beside its text, such as a connection. */

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/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/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[];
-};