@nexub/react 5.1.0 → 5.2.0

package/accessibility.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.1.0",
+  "version": "5.2.0",
   "standard": "WCAG 2.2 Level AA",
   "method": {
     "automated": "axe-core rules tagged wcag2a, wcag2aa, wcag21a, wcag21aa and wcag22aa, run on every Storybook story in light and dark on every pull request; a new violation fails the build.",
@@ -693,6 +693,23 @@
       "keyboard": [],
       "screenReader": []
     },
+    {
+      "slug": "multi-select",
+      "name": "Multi Select",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [
+        "Type: Filters the options and opens the list.",
+        "ArrowDown / ArrowUp: Moves through the options.",
+        "Enter: Toggles the highlighted option.",
+        "Backspace: In an empty field, removes the last chip.",
+        "Escape: Closes the list."
+      ],
+      "screenReader": [
+        "Options carry `aria-checked`; each chip has a \"Remove <label>\" button."
+      ]
+    },
     {
       "slug": "navigation-rail",
       "name": "Navigation Rail",

package/dist/components/Autocomplete/Autocomplete.d.ts

@@ -17,9 +17,18 @@ export interface AutocompleteProps {
      * filtered (fetched for this text), so the built-in filtering is off.
      */
     onInputChange?: (text: string) => void;
+    /**
+     * `'inline'` (default): the list always shows under the input.
+     * `'popover'`: a field whose list opens below it while typing.
+     */
+    mode?: 'inline' | 'popover';
+    /** Adds a "Create “text”" option when the text matches no option exactly. */
+    onCreate?: (text: string) => void;
+    disabled?: boolean;
     className?: string;
+    'aria-label'?: string;
 }
-export declare function Autocomplete({ options, value, onValueChange, placeholder, emptyText, loading, inputValue, onInputChange, className, }: AutocompleteProps): React.JSX.Element;
+export declare function Autocomplete({ options, value, onValueChange, placeholder, emptyText, loading, inputValue, onInputChange, mode, onCreate, disabled, className, 'aria-label': ariaLabel, }: AutocompleteProps): React.JSX.Element;
 export declare namespace Autocomplete {
     var displayName: string;
 }

package/dist/components/Autocomplete/Autocomplete.js

@@ -1,8 +1,11 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { Plus } from "@nexub/icons";
+import { cn } from "../../utils/cn.js";
 import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
 import { Combobox } from "../Combobox/Combobox.js";
+import { ComboboxLoading, ComboboxPopover } from "../Combobox/ComboboxPopover.js";
 function Autocomplete({
   options,
   value,
@@ -12,39 +15,84 @@ function Autocomplete({
   loading = false,
   inputValue,
   onInputChange,
-  className
+  mode = "inline",
+  onCreate,
+  disabled,
+  className,
+  "aria-label": ariaLabel
 }) {
   const messages = useNexubMessages();
   const selectedLabel = options.find((o) => o.value === value)?.label ?? "";
   const [innerSearch, setInnerSearch] = React.useState(selectedLabel);
   const [prevValue, setPrevValue] = React.useState(value);
+  const [open, setOpen] = React.useState(false);
   const search = inputValue ?? innerSearch;
-  const setSearch = (text) => {
-    setInnerSearch(text);
-    onInputChange?.(text);
+  const setSearch = (text2) => {
+    setInnerSearch(text2);
+    onInputChange?.(text2);
   };
   if (value !== prevValue) {
     setPrevValue(value);
     setInnerSearch(selectedLabel);
   }
-  return /* @__PURE__ */ jsxs(Combobox.Root, { className, shouldFilter: !onInputChange, children: [
-    /* @__PURE__ */ jsx(Combobox.Input, { placeholder: placeholder ?? messages.searchPlaceholder, value: search, onValueChange: setSearch }),
-    /* @__PURE__ */ jsx(Combobox.List, { children: loading ? /* @__PURE__ */ jsx("div", { className: "py-6 text-center text-sm text-[var(--color-on-surface-muted)]", children: messages.loading }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Combobox.Empty, { children: emptyText ?? messages.noResults }),
-      options.map((opt) => /* @__PURE__ */ jsx(
-        Combobox.Item,
-        {
-          value: opt.label,
-          keywords: [opt.value],
-          onSelect: () => {
-            onValueChange?.(opt.value);
-            setSearch(opt.label);
-          },
-          children: opt.label
+  const text = search.trim();
+  const canCreate = !!onCreate && !loading && text !== "" && !options.some((o) => o.label.toLowerCase() === text.toLowerCase());
+  const list = /* @__PURE__ */ jsx(Combobox.List, { children: loading ? /* @__PURE__ */ jsx(ComboboxLoading, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    !canCreate && /* @__PURE__ */ jsx(Combobox.Empty, { children: emptyText ?? messages.noResults }),
+    options.map((opt) => /* @__PURE__ */ jsx(
+      Combobox.Item,
+      {
+        value: opt.label,
+        keywords: [opt.value],
+        onSelect: () => {
+          onValueChange?.(opt.value);
+          setSearch(opt.label);
+          setOpen(false);
         },
-        opt.value
-      ))
-    ] }) })
+        children: opt.label
+      },
+      opt.value
+    )),
+    canCreate && /* @__PURE__ */ jsxs(
+      Combobox.Item,
+      {
+        forceMount: true,
+        value: "\0",
+        onSelect: () => {
+          onCreate(text);
+          setOpen(false);
+        },
+        className: "gap-2",
+        children: [
+          /* @__PURE__ */ jsx(Plus, { size: "sm", "aria-hidden": "true" }),
+          messages.createOption(text)
+        ]
+      }
+    )
+  ] }) });
+  const input = {
+    placeholder: placeholder ?? messages.searchPlaceholder,
+    value: search,
+    "aria-label": ariaLabel,
+    onValueChange: (t) => {
+      setSearch(t);
+      setOpen(true);
+    }
+  };
+  if (mode === "popover") {
+    return /* @__PURE__ */ jsx(
+      Combobox.Root,
+      {
+        label: ariaLabel,
+        className: cn("overflow-visible rounded-none bg-transparent", className),
+        shouldFilter: !onInputChange,
+        children: /* @__PURE__ */ jsx(ComboboxPopover, { open: open && !disabled, onOpenChange: setOpen, input, disabled, children: list })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Combobox.Root, { label: ariaLabel, className, shouldFilter: !onInputChange, children: [
+    /* @__PURE__ */ jsx(Combobox.Input, { ...input, disabled }),
+    list
   ] });
 }
 Autocomplete.displayName = "Autocomplete";

package/dist/components/Chip/Chip.d.ts

@@ -8,5 +8,7 @@ export declare const chipVariants: (props?: ({
 export interface ChipProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof chipVariants> {
     tone?: ToneValue;
     onRemove?: () => void;
+    /** Accessible name of the remove button. Defaults to the localised "Remove". */
+    removeLabel?: string;
 }
 export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/Chip/Chip.js

@@ -32,7 +32,7 @@ const chipVariants = cva(
   }
 );
 const Chip = React.forwardRef(
-  ({ className, size, tone = "neutral", onRemove, children, ...props }, ref) => {
+  ({ className, size, tone = "neutral", onRemove, removeLabel, children, ...props }, ref) => {
     const messages = useNexubMessages();
     return /* @__PURE__ */ jsxs(
       "span",
@@ -46,7 +46,7 @@ const Chip = React.forwardRef(
             "button",
             {
               type: "button",
-              "aria-label": messages.remove,
+              "aria-label": removeLabel ?? messages.remove,
               onClick: (e) => {
                 e.stopPropagation();
                 onRemove();

package/dist/components/Combobox/ComboboxPopover.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { Command } from 'cmdk';
+export interface ComboboxPopoverProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Rendered inside the field, before the input (MultiSelect chips). */
+    before?: React.ReactNode;
+    input: React.ComponentProps<typeof Command.Input>;
+    disabled?: boolean;
+    /** The list (a Combobox.List). */
+    children: React.ReactNode;
+}
+/**
+ * A field that keeps focus in its input while a list opens below it.
+ * The list is not portalled: cmdk finds its items inside the Command root.
+ */
+export declare function ComboboxPopover({ open, onOpenChange, before, input, disabled, children }: ComboboxPopoverProps): React.JSX.Element;
+/** Three placeholder rows while options load; the word "Loading" is read out. */
+export declare function ComboboxLoading(): React.JSX.Element;

package/dist/components/Combobox/ComboboxPopover.js

@@ -0,0 +1,91 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as RadixPopover from "@radix-ui/react-popover";
+import { Command } from "cmdk";
+import { cn } from "../../utils/cn.js";
+import { floatingSurface } from "../../utils/surface.js";
+import { field, fieldDisabled, fieldFocusWithin } from "../../utils/control.js";
+import { useIsomorphicLayoutEffect } from "../../hooks/useIsomorphicLayoutEffect.js";
+import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
+import { Skeleton } from "../Skeleton/Skeleton.js";
+function ComboboxPopover({ open, onOpenChange, before, input, disabled, children }) {
+  const anchorRef = React.useRef(null);
+  const inputRef = React.useRef(null);
+  const labelledBy = input["aria-labelledby"];
+  useIsomorphicLayoutEffect(() => {
+    inputRef.current?.setAttribute("aria-expanded", String(open));
+    if (labelledBy) inputRef.current?.setAttribute("aria-labelledby", labelledBy);
+  });
+  return /* @__PURE__ */ jsxs(RadixPopover.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx(RadixPopover.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: anchorRef,
+        className: cn(
+          field,
+          fieldFocusWithin,
+          "flex min-h-control-md w-full flex-wrap items-center gap-1.5 px-3 py-1",
+          disabled && fieldDisabled
+        ),
+        onPointerDown: (e) => {
+          if (disabled) return;
+          if (e.target.closest("button")) return;
+          if (e.target !== inputRef.current) e.preventDefault();
+          inputRef.current?.focus();
+          onOpenChange(true);
+        },
+        children: [
+          before,
+          /* @__PURE__ */ jsx(
+            Command.Input,
+            {
+              ref: inputRef,
+              disabled,
+              ...input,
+              onKeyDown: (e) => {
+                if (e.key === "ArrowDown" && !open) onOpenChange(true);
+                input.onKeyDown?.(e);
+              },
+              className: cn(
+                "min-w-8 flex-1 bg-transparent text-body-md outline-none placeholder:text-[var(--color-on-surface-muted)]",
+                input.className
+              )
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      RadixPopover.Content,
+      {
+        align: "start",
+        sideOffset: 4,
+        onOpenAutoFocus: (e) => e.preventDefault(),
+        onCloseAutoFocus: (e) => e.preventDefault(),
+        onInteractOutside: (e) => {
+          if (anchorRef.current?.contains(e.target)) e.preventDefault();
+        },
+        className: cn(
+          "z-[var(--z-popover)] w-[var(--radix-popover-trigger-width)] overflow-hidden p-0 outline-none",
+          floatingSurface,
+          "nx-motion nx-pop origin-[var(--radix-popover-content-transform-origin)]"
+        ),
+        children
+      }
+    )
+  ] });
+}
+function ComboboxLoading() {
+  const messages = useNexubMessages();
+  return /* @__PURE__ */ jsxs("div", { role: "status", "aria-busy": "true", className: "flex flex-col gap-2 px-2.5 py-2", children: [
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: messages.loading }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "w-3/4", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "w-1/2", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "w-2/3", "aria-hidden": "true" })
+  ] });
+}
+export {
+  ComboboxLoading,
+  ComboboxPopover
+};

package/dist/components/MultiSelect/MultiSelect.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+export interface MultiSelectOption {
+    value: string;
+    label: string;
+}
+export interface MultiSelectProps {
+    options: MultiSelectOption[];
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    placeholder?: string;
+    emptyText?: string;
+    loading?: boolean;
+    /** Controlled search text. */
+    inputValue?: string;
+    /** Called as the user types; options are then shown as given (no built-in filtering). */
+    onInputChange?: (text: string) => void;
+    /** Adds a "Create “text”" option when the text matches no option exactly. */
+    onCreate?: (text: string) => void;
+    /** Chips shown before the rest collapse into "+N more". Default 3. */
+    maxVisibleChips?: number;
+    disabled?: boolean;
+    className?: string;
+    id?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
+/**
+ * Pick several options: chips in the field, a filterable list below.
+ * Backspace in an empty field removes the last chip.
+ */
+export declare function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, placeholder, emptyText, loading, inputValue, onInputChange, onCreate, maxVisibleChips, disabled, className, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, }: MultiSelectProps): React.JSX.Element;
+export declare namespace MultiSelect {
+    var displayName: string;
+}

package/dist/components/MultiSelect/MultiSelect.js

@@ -0,0 +1,142 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Check, Plus } from "@nexub/icons";
+import { cn } from "../../utils/cn.js";
+import { useControllableState } from "../../hooks/useControllableState.js";
+import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
+import { Chip } from "../Chip/Chip.js";
+import { Combobox } from "../Combobox/Combobox.js";
+import { ComboboxLoading, ComboboxPopover } from "../Combobox/ComboboxPopover.js";
+function MultiSelect({
+  options,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  placeholder,
+  emptyText,
+  loading = false,
+  inputValue,
+  onInputChange,
+  onCreate,
+  maxVisibleChips = 3,
+  disabled,
+  className,
+  id,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy
+}) {
+  const messages = useNexubMessages();
+  const [value = [], setValue] = useControllableState({
+    value: valueProp,
+    defaultValue: defaultValue ?? [],
+    onChange: onValueChange
+  });
+  const [innerSearch, setInnerSearch] = React.useState("");
+  const [open, setOpen] = React.useState(false);
+  const search = inputValue ?? innerSearch;
+  const setSearch = (text2) => {
+    setInnerSearch(text2);
+    onInputChange?.(text2);
+  };
+  const [labels, setLabels] = React.useState(() => /* @__PURE__ */ new Map());
+  const missing = options.some((o) => labels.get(o.value) !== o.label);
+  if (missing) setLabels(new Map([...labels, ...options.map((o) => [o.value, o.label])]));
+  const labelOf = (v) => labels.get(v) ?? options.find((o) => o.value === v)?.label ?? v;
+  const toggle = (v) => setValue(value.includes(v) ? value.filter((x) => x !== v) : [...value, v]);
+  const remove = (v) => setValue(value.filter((x) => x !== v));
+  const text = search.trim();
+  const canCreate = !!onCreate && !loading && text !== "" && !options.some((o) => o.label.toLowerCase() === text.toLowerCase());
+  const hiddenCount = Math.max(0, value.length - maxVisibleChips);
+  const chips = /* @__PURE__ */ jsxs(Fragment, { children: [
+    value.slice(0, maxVisibleChips).map((v) => /* @__PURE__ */ jsx(
+      Chip,
+      {
+        size: "sm",
+        onRemove: disabled ? void 0 : () => remove(v),
+        removeLabel: messages.removeOption(labelOf(v)),
+        children: labelOf(v)
+      },
+      v
+    )),
+    hiddenCount > 0 && /* @__PURE__ */ jsxs(Chip, { size: "sm", children: [
+      "+",
+      messages.moreCount(hiddenCount)
+    ] })
+  ] });
+  return /* @__PURE__ */ jsx(
+    Combobox.Root,
+    {
+      label: ariaLabel,
+      className: cn("overflow-visible rounded-none bg-transparent", className),
+      shouldFilter: !onInputChange,
+      children: /* @__PURE__ */ jsx(
+        ComboboxPopover,
+        {
+          open: open && !disabled,
+          onOpenChange: setOpen,
+          before: chips,
+          disabled,
+          input: {
+            id,
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy,
+            placeholder: value.length ? void 0 : placeholder ?? messages.searchPlaceholder,
+            value: search,
+            onValueChange: (t) => {
+              setSearch(t);
+              setOpen(true);
+            },
+            onKeyDown: (e) => {
+              if (e.key === "Backspace" && search === "" && value.length) remove(value[value.length - 1]);
+            }
+          },
+          children: /* @__PURE__ */ jsx(Combobox.List, { "aria-multiselectable": "true", children: loading ? /* @__PURE__ */ jsx(ComboboxLoading, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            !canCreate && /* @__PURE__ */ jsx(Combobox.Empty, { children: emptyText ?? messages.noResults }),
+            options.map((opt) => {
+              const checked = value.includes(opt.value);
+              return /* @__PURE__ */ jsxs(
+                Combobox.Item,
+                {
+                  value: opt.label,
+                  keywords: [opt.value],
+                  "aria-checked": checked,
+                  onSelect: () => {
+                    toggle(opt.value);
+                    if (search) setSearch("");
+                  },
+                  className: "gap-2",
+                  children: [
+                    /* @__PURE__ */ jsx(Check, { size: "sm", "aria-hidden": "true", className: cn(!checked && "invisible") }),
+                    opt.label
+                  ]
+                },
+                opt.value
+              );
+            }),
+            canCreate && /* @__PURE__ */ jsxs(
+              Combobox.Item,
+              {
+                forceMount: true,
+                value: "\0",
+                onSelect: () => {
+                  onCreate(text);
+                  setSearch("");
+                },
+                className: "gap-2",
+                children: [
+                  /* @__PURE__ */ jsx(Plus, { size: "sm", "aria-hidden": "true" }),
+                  messages.createOption(text)
+                ]
+              }
+            )
+          ] }) })
+        }
+      )
+    }
+  );
+}
+MultiSelect.displayName = "MultiSelect";
+export {
+  MultiSelect
+};

package/dist/components/MultiSelect/index.d.ts

@@ -0,0 +1,2 @@
+export { MultiSelect } from './MultiSelect.js';
+export type { MultiSelectProps, MultiSelectOption } from './MultiSelect.js';

package/dist/components/MultiSelect/index.js

@@ -0,0 +1,4 @@
+import { MultiSelect } from "./MultiSelect.js";
+export {
+  MultiSelect
+};

package/dist/index.d.ts

@@ -160,6 +160,8 @@ export { Select } from './components/Select/index.js';
 export { Combobox } from './components/Combobox/index.js';
 export { Autocomplete } from './components/Autocomplete/index.js';
 export type { AutocompleteOption, AutocompleteProps } from './components/Autocomplete/index.js';
+export { MultiSelect } from './components/MultiSelect/index.js';
+export type { MultiSelectOption, MultiSelectProps } from './components/MultiSelect/index.js';
 export { Switch } from './components/Switch/index.js';
 export type { SwitchProps } from './components/Switch/index.js';
 export { Checkbox } from './components/Checkbox/index.js';

package/dist/index.js

@@ -89,6 +89,7 @@ import { Drawer, Sheet } from "./components/Drawer/index.js";
 import { Select } from "./components/Select/index.js";
 import { Combobox } from "./components/Combobox/index.js";
 import { Autocomplete } from "./components/Autocomplete/index.js";
+import { MultiSelect } from "./components/MultiSelect/index.js";
 import { Switch } from "./components/Switch/index.js";
 import { Checkbox } from "./components/Checkbox/index.js";
 import { RadioGroup } from "./components/RadioGroup/index.js";
@@ -201,6 +202,7 @@ export {
   MessageActions,
   MessageBubble,
   MoneyInput,
+  MultiSelect,
   NavigationMenu,
   NavigationRail,
   NexubProvider,