@vitavision/ui 0.9.0 → 0.10.0

package/src/components/ui/VectorInput.tsx

@@ -52,8 +52,8 @@ export interface VectorInputProps {
  * A row of number fields editing one small vector, with the axis labels before the fields
  * and the unit once after them.
  *
- * Controlled. A `role="group"` named by `aria-label`, each field named by its label and
- * described by the unit. While a field has focus it shows what is typed; on blur or Enter it
+ * Controlled. A `role="group"` named by `aria-label`. Each field is named by the group and its
+ * label ("Translation x"), so two vectors on one screen stay apart, and is described by the unit. While a field has focus it shows what is typed; on blur or Enter it
  * shows the value at `precision`; Escape restores the value it had on focus. With `readOnly`
  * it renders a `ReadoutStrip` (`x 0.100 m · y …`) instead. The row carries `data-readonly`
  * and `data-disabled`.
@@ -106,6 +106,7 @@ export function VectorInput({
         <label key={index} className="flex min-w-0 flex-1 items-center gap-1">
           <span className="shrink-0 font-mono text-[11px] text-fg-subtle">{labelOf(index)}</span>
           <ComponentField
+            name={`${ariaLabel} ${labelOf(index)}`}
             value={component}
             precision={precision}
             step={step}
@@ -128,6 +129,7 @@ export function VectorInput({
 
 /** One component: formatted at rest, the typed text while focused. */
 function ComponentField({
+  name,
   value,
   precision,
   step,
@@ -137,6 +139,7 @@ function ComponentField({
   describedBy,
   onCommit,
 }: {
+  name: string;
   value: number;
   precision: number;
   step: number | undefined;
@@ -167,6 +170,7 @@ function ComponentField({
       min={min}
       max={max}
       disabled={disabled}
+      aria-label={name}
       aria-describedby={describedBy}
       onFocus={() => setDraft({ text: formatted, initial: value })}
       onBlur={() => setDraft(null)}

package/src/components/ui/index.ts

@@ -12,6 +12,16 @@ export { Button, ButtonLink, buttonClasses, type ButtonSize, type ButtonVariant
 export { DensityProvider, byDensity, useDensity, type Density } from "./Density";
 export { ConfirmDialog, Dialog, DialogClose } from "./Dialog";
 export { Disclosure } from "./Disclosure";
+export {
+  DropdownMenu,
+  MenuCheckboxItem,
+  MenuItem,
+  MenuLabel,
+  MenuSeparator,
+  type DropdownMenuProps,
+  type MenuCheckboxItemProps,
+  type MenuItemProps,
+} from "./DropdownMenu";
 export {
   Callout,
   type CalloutTone,
@@ -31,6 +41,14 @@ export {
   useControlHeight,
   type NumberInputProps,
 } from "./Input";
+export { Kbd } from "./Kbd";
+export {
+  Listbox,
+  type ListboxOption,
+  type ListboxOptionState,
+  type ListboxProps,
+} from "./Listbox";
+export { formatNumber, parseNumber } from "./numberText";
 export {
   PageHeader,
   type BackLink,
@@ -39,6 +57,7 @@ export {
   Section,
   type ReadoutItem,
 } from "./Panel";
+export { Popover, PopoverClose, type PopoverProps } from "./Popover";
 export {
   PoseInput,
   type PoseInputProps,

package/src/components/ui/listboxModel.ts

@@ -0,0 +1,63 @@
+/*
+ * Keyboard movement in a single-select listbox, as a pure function so it is tested without a
+ * DOM. `Listbox` calls it on every key press.
+ */
+
+/** The keys that move the active option. */
+export type ListboxKey = "ArrowDown" | "ArrowUp" | "Home" | "End" | "PageDown" | "PageUp";
+
+/**
+ * The option a key moves the active one to, skipping disabled options.
+ *
+ * Arrows move by one and stop at the ends (no wrap: a long list that wraps loses its place).
+ * Home and End go to the first and last enabled option. Page keys move by `page` options.
+ * From no active option (`-1`), Down and Page Down go to the first enabled option, and Up and
+ * Page Up to the last.
+ *
+ * @param disabled - Per option, whether it is disabled.
+ * @param from - The active index, or -1.
+ * @param key - The key pressed.
+ * @param page - Options per page, for Page Up/Down. Defaults to 10.
+ * @returns The new active index; `from` when there is nowhere to go; -1 when every option is
+ *   disabled.
+ */
+export function moveActive(
+  disabled: readonly boolean[],
+  from: number,
+  key: ListboxKey,
+  page = 10,
+): number {
+  const enabled = disabled.flatMap((off, index) => (off ? [] : [index]));
+  if (enabled.length === 0) return -1;
+  const first = enabled[0]!;
+  const last = enabled[enabled.length - 1]!;
+  if (key === "Home") return first;
+  if (key === "End") return last;
+  if (from < 0) return key === "ArrowDown" || key === "PageDown" ? first : last;
+
+  const forward = key === "ArrowDown" || key === "PageDown";
+  const steps = key === "PageDown" || key === "PageUp" ? Math.max(1, page) : 1;
+  let target = from;
+  let moved = 0;
+  for (let index = from + (forward ? 1 : -1); index >= 0 && index < disabled.length; index += forward ? 1 : -1) {
+    if (disabled[index]) continue;
+    target = index;
+    moved += 1;
+    if (moved === steps) break;
+  }
+  return target;
+}
+
+/**
+ * The first enabled option at or after `index`, or before it when none is after. Used to place
+ * the active option when the list opens or changes.
+ *
+ * @param disabled - Per option, whether it is disabled.
+ * @param index - The preferred index.
+ * @returns An enabled index, or -1 when every option is disabled.
+ */
+export function nearestEnabled(disabled: readonly boolean[], index: number): number {
+  for (let i = Math.max(0, index); i < disabled.length; i += 1) if (!disabled[i]) return i;
+  for (let i = Math.min(index, disabled.length) - 1; i >= 0; i -= 1) if (!disabled[i]) return i;
+  return -1;
+}

package/src/components/ui/numberText.ts

@@ -1,6 +1,6 @@
 /*
- * Numbers as a field shows them and as a person types them. Internal to this package (used by
- * `VectorInput` and `PoseInput`); not exported.
+ * Numbers as a field shows them and as a person types them. Used by `NumberInput`'s
+ * number-valued mode, `VectorInput` and `PoseInput`, and exported for an app's own fields.
  *
  * A field bound straight to a number re-formats under the cursor: typing `0.` into a field
  * showing `0.000` becomes `0` before the next digit arrives. So the multi-number fields keep