@nexub/react 5.1.0 → 5.3.0

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,