@eyesee/ui-components 0.8.0 → 0.9.0

package/dist/components/Fields/SelectField/SelectField.d.ts

@@ -0,0 +1,404 @@
+/**
+ * Combobox select built on {@link InputFieldContent} with optional multi-select, tags, and search.
+ *
+ * ## Props
+ *
+ * **label** `string` — no default
+ * Field label.
+ *
+ * **infoText** `string` — no default
+ * Helper text below the field. Overridden by `error.message`.
+ *
+ * **status** `'default' | 'error'` — default `'default'`
+ * Validation shell state.
+ *
+ * **disabled** `boolean` — default `false`
+ * Disables the field.
+ *
+ * **required** `boolean` — default `false`
+ * Shows required mark when `label` is set.
+ *
+ * **id** `string` — no default
+ * Combobox `id`. Auto-generated when omitted.
+ *
+ * **name** `string` — no default
+ * Field `name`. Also used as RHF field name with `control`.
+ *
+ * **value** `string | string[] | number | number[]` — no default
+ * Controlled value. String/number for single; array for multi.
+ *
+ * **defaultValue** `string | string[] | number | number[] | SelectFieldOption` — no default
+ * Uncontrolled initial value.
+ *
+ * **placeholder** `string` — default `'Select'`
+ * Placeholder when nothing is selected.
+ *
+ * **onChange** `(value: string | string[] | number | number[]) => void` — default `() => {}`
+ * Fired with the selected value (not a DOM event).
+ *
+ * **onBlur** `(event: FocusEvent<HTMLInputElement>) => void` — no default
+ * Blur handler forwarded to the combobox input.
+ *
+ * **options** `SelectFieldOption[] | SelectFieldSection[] | object` — default `[]`
+ * Flat list, section array, or section object map.
+ * - `value` `string | number` — required. Option value.
+ * - `label` `string` — required. Row text.
+ * - `disabled` `boolean` — default `false`
+ * - `infoTooltip` `string` — optional. Used when `listItemType` is `'info'`.
+ *
+ * **size** `'lg' | 'md' | 'sm' | 'xs'` — default `'lg'`
+ * Field height.
+ *
+ * **startIcon** `ReactNode` — no default
+ * Leading icon inside the field.
+ *
+ * **onEndIconClick** `() => void` — no default
+ * Overrides default chevron toggle when set.
+ *
+ * **multiSelect** `boolean` — default `false`
+ * Multiple selection.
+ *
+ * **tags** `boolean` — default `false`
+ * Tag badges in the field; implies multi-select and search.
+ *
+ * **tagsWrap** `boolean` — default `false`
+ * Wrap tags to two rows.
+ *
+ * **search** `boolean` — default `false`
+ * Search input in the dropdown.
+ *
+ * **onSearchChange** `(query: string) => void` — default `() => {}`
+ * Fired when the dropdown search query changes.
+ *
+ * **onLoadMore** `() => void` — no default
+ * Infinite scroll callback on {@link DropdownList}.
+ *
+ * **optionsLoading** `boolean` — default `false`
+ * Shows loading spinner instead of options.
+ *
+ * **selectAllLabel** `string | null` — default `null`
+ * Multi-select only: checkbox row label.
+ *
+ * **listItemType** `'checkbox' | 'info' | null` — default `null`
+ * Row rendering mode. Default `null` (radio for single, checkbox for multi/tags).
+ *
+ * **dir** `'down' | 'up'` — default `'down'`
+ * Preferred dropdown direction.
+ *
+ * **dropdownMaxHeight** `string` — no default
+ * Max height CSS value for the dropdown list.
+ *
+ * **control** `object` — no default
+ * react-hook-form `control`. With `name`, wires via `useController`.
+ *
+ * **rules** `object` — no default
+ * RHF validation rules.
+ *
+ * **error** `object` — no default
+ * RHF field error (`error.message` → info text and error status).
+ *
+ * **inputRef** `Ref` — no default
+ * Ref forwarded to the combobox input.
+ *
+ * **aria-label** `string` — default `'select field'` when no `label`
+ * Accessible name when `label` is omitted.
+ *
+ * @param {SelectFieldProps} props
+ * @returns {import('react').ReactElement}
+ *
+ * @example <caption>Default</caption>
+ * import { SelectField } from '@eyesee/ui-components';
+ *
+ * <SelectField
+ *   label="Country"
+ *   infoText="Pick one"
+ *   placeholder="Select a country"
+ *   options={[
+ *     { value: 'nl', label: 'Netherlands' },
+ *     { value: 'de', label: 'Germany' },
+ *     { value: 'fr', label: 'France' },
+ *   ]}
+ * />
+ *
+ * @example <caption>Error</caption>
+ * import { SelectField } from '@eyesee/ui-components';
+ *
+ * <SelectField
+ *   label="Country"
+ *   infoText="This field is required"
+ *   status="error"
+ *   placeholder="Select a country"
+ *   options={[
+ *     { value: 'nl', label: 'Netherlands' },
+ *     { value: 'de', label: 'Germany' },
+ *   ]}
+ * />
+ *
+ * @example <caption>Disabled</caption>
+ * import { SelectField } from '@eyesee/ui-components';
+ *
+ * <SelectField label="Country" disabled placeholder="Select a country" options={[]} />
+ *
+ * @example <caption>Multi-select + search</caption>
+ * import { SelectField } from '@eyesee/ui-components';
+ *
+ * <SelectField
+ *   label="Markets"
+ *   placeholder="Select markets"
+ *   value={['nl', 'de']}
+ *   multiSelect
+ *   search
+ *   options={[
+ *     { value: 'nl', label: 'Netherlands' },
+ *     { value: 'de', label: 'Germany' },
+ *     { value: 'fr', label: 'France' },
+ *   ]}
+ * />
+ *
+ * @example <caption>Tags</caption>
+ * import { SelectField } from '@eyesee/ui-components';
+ *
+ * <SelectField
+ *   label="Tags mode"
+ *   placeholder="Select tags"
+ *   value={['nl', 'de', 'fr']}
+ *   multiSelect
+ *   tags
+ *   selectAllLabel="Select all"
+ *   options={[
+ *     { value: 'nl', label: 'Netherlands' },
+ *     { value: 'de', label: 'Germany' },
+ *     { value: 'fr', label: 'France' },
+ *   ]}
+ * />
+ *
+ * @example <caption>Tags (wrap 2 rows)</caption>
+ * import { SelectField } from '@eyesee/ui-components';
+ *
+ * <SelectField
+ *   label="Tags wrap"
+ *   placeholder="Select tags"
+ *   value={['nl', 'de', 'fr', 'be']}
+ *   multiSelect
+ *   tags
+ *   tagsWrap
+ *   selectAllLabel="Select all"
+ *   options={[
+ *     { value: 'nl', label: 'Netherlands' },
+ *     { value: 'de', label: 'Germany' },
+ *     { value: 'fr', label: 'France' },
+ *     { value: 'be', label: 'Belgium' },
+ *   ]}
+ * />
+ *
+ * @example <caption>Sections</caption>
+ * import { SelectField } from '@eyesee/ui-components';
+ *
+ * <SelectField
+ *   label="Sectioned select"
+ *   search
+ *   options={[
+ *     {
+ *       sectionTitle: 'Europe',
+ *       options: [
+ *         { value: 'nl', label: 'Netherlands' },
+ *         { value: 'de', label: 'Germany' },
+ *       ],
+ *     },
+ *     {
+ *       sectionTitle: 'Americas',
+ *       options: [{ value: 'us', label: 'United States' }],
+ *     },
+ *   ]}
+ * />
+ *
+ * @example <caption>Loading</caption>
+ * import { SelectField } from '@eyesee/ui-components';
+ *
+ * <SelectField label="Loading options" search optionsLoading options={[]} />
+ *
+ * @example <caption>Search with load more</caption>
+ * import { SelectField } from '@eyesee/ui-components';
+ *
+ * <SelectField
+ *   label="Options"
+ *   placeholder="Select an option"
+ *   search
+ *   dropdownMaxHeight="220px"
+ *   options={[
+ *     { value: 1, label: 'Option 1' },
+ *     { value: 2, label: 'Option 2' },
+ *     { value: 3, label: 'Option 3' },
+ *   ]}
+ * />
+ */
+export function SelectField(props: SelectFieldProps): import("react").ReactElement;
+export type SelectFieldChangeHandler = (value: string | string[] | number | number[]) => void;
+export type SelectFieldSearchChangeHandler = (query: string) => void;
+export type SelectFieldLoadMoreHandler = () => void;
+export type SelectFieldEndIconClickHandler = () => void;
+export type SelectFieldBlurHandler = (event: import("react").FocusEvent<HTMLInputElement>) => void;
+/**
+ * Flat dropdown option.
+ */
+export type SelectFieldOption = {
+    /**
+     * - Option value.
+     */
+    value: string | number;
+    /**
+     * - Row text.
+     */
+    label: string;
+    /**
+     * Disables the row. Default `false`.
+     */
+    disabled?: boolean;
+    /**
+     * Tooltip content when `listItemType` is `'info'`.
+     */
+    infoTooltip?: string;
+};
+/**
+ * Section grouping for dropdown options.
+ */
+export type SelectFieldSection = {
+    /**
+     * - Section heading.
+     */
+    sectionTitle: string;
+    /**
+     * - Options in this section.
+     */
+    options: SelectFieldOption[];
+};
+export type SelectFieldProps = {
+    /**
+     * Field label.
+     */
+    label?: string;
+    /**
+     * Helper text below the field. Overridden by `error.message`.
+     */
+    infoText?: string;
+    /**
+     * Validation shell state. Default `'default'`.
+     */
+    status?: "default" | "error";
+    /**
+     * Disables the field. Default `false`.
+     */
+    disabled?: boolean;
+    /**
+     * Shows required mark when `label` is set. Default `false`.
+     */
+    required?: boolean;
+    /**
+     * Combobox `id`. Auto-generated when omitted.
+     */
+    id?: string;
+    /**
+     * Field `name`. Also used as RHF field name with `control`.
+     */
+    name?: string;
+    /**
+     * Controlled value. String/number for single; array for multi.
+     */
+    value?: string | string[] | number | number[];
+    /**
+     * Uncontrolled initial value. Option object uses its `value`/`label`.
+     */
+    defaultValue?: string | string[] | number | number[] | SelectFieldOption;
+    /**
+     * Placeholder when nothing is selected. Default `'Select'`.
+     */
+    placeholder?: string;
+    /**
+     * Fired with the selected value (not a DOM event). Default `() => {}`.
+     */
+    onChange?: SelectFieldChangeHandler;
+    /**
+     * Blur handler forwarded to the combobox input.
+     */
+    onBlur?: SelectFieldBlurHandler;
+    /**
+     * Flat list, section array, or section object map. Default `[]`.
+     */
+    options?: SelectFieldOption[] | SelectFieldSection[] | object;
+    /**
+     * Field height. Default `'lg'`.
+     */
+    size?: "lg" | "md" | "sm" | "xs";
+    /**
+     * Leading icon inside the field.
+     */
+    startIcon?: React.ReactNode;
+    /**
+     * Overrides default chevron toggle when set.
+     */
+    onEndIconClick?: SelectFieldEndIconClickHandler;
+    /**
+     * Multiple selection. Default `false`.
+     */
+    multiSelect?: boolean;
+    /**
+     * Tag badges in the field; implies multi-select and search. Default `false`.
+     */
+    tags?: boolean;
+    /**
+     * Wrap tags to two rows. Default `false`.
+     */
+    tagsWrap?: boolean;
+    /**
+     * Search input in the dropdown. Default `false`.
+     */
+    search?: boolean;
+    /**
+     * Fired when the dropdown search query changes. Default `() => {}`.
+     */
+    onSearchChange?: SelectFieldSearchChangeHandler;
+    /**
+     * Infinite scroll callback on {@link DropdownList}.
+     */
+    onLoadMore?: SelectFieldLoadMoreHandler;
+    /**
+     * Shows loading spinner instead of options. Default `false`.
+     */
+    optionsLoading?: boolean;
+    /**
+     * Multi-select only: checkbox row label. Default `null`.
+     */
+    selectAllLabel?: string | null;
+    /**
+     * Row rendering mode. Default `null` (radio for single, checkbox for multi/tags).
+     */
+    listItemType?: "checkbox" | "info" | null;
+    /**
+     * Preferred dropdown direction. Default `'down'`.
+     */
+    dir?: "down" | "up";
+    /**
+     * Max height CSS value for the dropdown list.
+     */
+    dropdownMaxHeight?: string;
+    /**
+     * react-hook-form `control`. With `name`, wires via `useController`.
+     */
+    control?: object;
+    /**
+     * RHF validation rules.
+     */
+    rules?: object;
+    /**
+     * RHF field error (`error.message` → info text and error status).
+     */
+    error?: object;
+    /**
+     * Ref forwarded to the combobox input.
+     */
+    inputRef?: any;
+    /**
+     * Accessible name when `label` is omitted. Default `'select field'`.
+     */
+    "aria-label"?: string;
+};

package/dist/components/Fields/SelectField/SelectField.js

@@ -7,40 +7,40 @@ import { InputFieldContent as J } from "../InputField/InputField.js";
 import { ChevronDownIcon as Te } from "../../icons-v2/ChevronDownIcon.js";
 import { ChevronUpIcon as be } from "../../icons-v2/ChevronUpIcon.js";
 import { LoadingIcon as De } from "../../icons-v2/LoadingIcon.js";
-import { SearchIcon as Ee } from "../../icons-v2/SearchIcon.js";
-import { DropdownList as Fe } from "../../DropdownList/DropdownList.js";
-import { ExpandableItem as Ce } from "../../ExpandableItem/ExpandableItem.js";
-import { renderOptionRow as Re } from "./selectOptionRow.js";
+import { SearchIcon as Fe } from "../../icons-v2/SearchIcon.js";
+import { DropdownList as Ee } from "../../DropdownList/DropdownList.js";
+import { ExpandableItem as Re } from "../../ExpandableItem/ExpandableItem.js";
+import { renderOptionRow as Ce } from "./selectOptionRow.js";
 import { SelectFieldTags as ke } from "./SelectFieldTags.js";
 import { useSelectFieldDropdownPosition as Be } from "./useSelectFieldDropdownPosition.js";
 import { normalizeSelectOptions as Le, getEffectiveSelectValue as Ae, getSelectedOptions as Ve, getSelectFieldDisplayValue as $e, filterOptionsByQuery as Y, toArrayValue as X, emitSelectChange as Me, filterSectionsByQuery as We, getNextToggleAllValues as ze, getResolvedListItemType as Ke, isOptionSelected as Ne, areAllOptionsSelected as je } from "./selectUtils.js";
-const Qe = ({ isOpen: s }) => s ? /* @__PURE__ */ n(be, {}) : /* @__PURE__ */ n(Te, {}), He = ({
-  withSections: s,
+const Qe = ({ isOpen: i }) => i ? /* @__PURE__ */ n(be, {}) : /* @__PURE__ */ n(Te, {}), He = ({
+  withSections: i,
   sections: f,
   flatOptionList: c,
-  searchValue: r,
+  searchValue: l,
   listItemType: k,
-  value: i,
+  value: r,
   selectAllLabel: I,
   onSelectOption: B,
   onToggleAll: w
 }) => {
   const p = h(
-    () => We(f, r),
-    [f, r]
+    () => We(f, l),
+    [f, l]
   ), O = h(
-    () => Y(c, r),
-    [c, r]
-  ), L = (o) => Ne(i, o), y = (o, a = k, T = L, m = !1) => Re(o, a, T, B, w, m);
+    () => Y(c, l),
+    [c, l]
+  ), L = (o) => Ne(r, o), y = (o, a = k, T = L, m = !1) => Ce(o, a, T, B, w, m);
   return /* @__PURE__ */ H(ye, { children: [
     I ? y(
       { label: I },
       "checkbox",
-      () => je(i, c),
+      () => je(r, c),
       !0
     ) : null,
-    s ? p.map((o) => /* @__PURE__ */ n(
-      Ce,
+    i ? p.map((o) => /* @__PURE__ */ n(
+      Re,
       {
         title: o.sectionTitle,
         defaultOpen: !0,
@@ -50,13 +50,14 @@ const Qe = ({ isOpen: s }) => s ? /* @__PURE__ */ n(be, {}) : /* @__PURE__ */ n(
       o.sectionTitle
     )) : O.map((o) => /* @__PURE__ */ n("div", { children: y(o) }, String(o.value)))
   ] });
-}, Pe = ({
-  id: s,
+};
+function Pe({
+  id: i,
   name: f,
   value: c,
-  defaultValue: r,
+  defaultValue: l,
   placeholder: k = "Select",
-  disabled: i = !1,
+  disabled: r = !1,
   onChange: I = () => {
   },
   ariaLabel: B,
@@ -79,29 +80,29 @@ const Qe = ({ isOpen: s }) => s ? /* @__PURE__ */ n(be, {}) : /* @__PURE__ */ n(
   listItemType: ne = null,
   dir: P = "down",
   dropdownMaxHeight: ie
-}) => {
+}) {
   const u = !!(T || m), re = !!(_ || m), le = !!(m && u), se = Ke({
     multiSelect: T,
     tags: m,
     listItemType: ne
-  }), [g, V] = j(!1), [b, D] = j(""), E = G(null), $ = G(null), F = s ? `${s}-listbox` : void 0, [v, ce] = j(!1);
+  }), [g, V] = j(!1), [b, D] = j(""), F = G(null), $ = G(null), E = i ? `${i}-listbox` : void 0, [v, ce] = j(!1);
   xe(() => {
     var e;
-    ce(!!((e = E.current) != null && e.closest("#modal")));
+    ce(!!((e = F.current) != null && e.closest("#modal")));
   }, []);
-  const l = Be({
+  const s = Be({
     open: g,
-    anchorRef: E,
+    anchorRef: F,
     dropdownRef: $,
     dir: P,
     fixed: v
-  }), ae = (l == null ? void 0 : l.resolvedDir) ?? P;
+  }), ae = (s == null ? void 0 : s.resolvedDir) ?? P;
   Ie(() => {
     if (!g) return () => {
     };
     const e = (t) => {
       var x, K;
-      (x = E.current) != null && x.contains(t.target) || v && ((K = $.current) != null && K.contains(t.target)) || (V(!1), D(""));
+      (x = F.current) != null && x.contains(t.target) || v && ((K = $.current) != null && K.contains(t.target)) || (V(!1), D(""));
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
   }, [g, v]);
@@ -110,34 +111,34 @@ const Qe = ({ isOpen: s }) => s ? /* @__PURE__ */ n(be, {}) : /* @__PURE__ */ n(
     sections: fe,
     options: d
   } = h(() => Le(O), [O]), S = h(
-    () => Ae(c, r),
-    [c, r]
+    () => Ae(c, l),
+    [c, l]
   ), U = h(
     () => Ve(S, d),
     [S, d]
-  ), pe = $e(c, r, d), me = h(
+  ), pe = $e(c, l, d), me = h(
     () => Y(d, b),
     [d, b]
   ), M = (e) => {
     const t = u ? e : e[0] ?? "";
     Me(I, t);
   }, q = (e) => {
-    const t = X(S), R = t.map((N) => String(N)), x = String(e), he = R.includes(x) ? t.filter((N) => String(N) !== x) : [...t, e];
+    const t = X(S), C = t.map((N) => String(N)), x = String(e), he = C.includes(x) ? t.filter((N) => String(N) !== x) : [...t, e];
     M(u ? he : [e]), u || (V(!1), D(""));
   }, ue = (e) => {
-    if (i) return;
-    const t = X(S).filter((R) => String(R) !== String(e));
+    if (r) return;
+    const t = X(S).filter((C) => String(C) !== String(e));
     M(t);
   }, ge = le && U.length > 0 ? /* @__PURE__ */ n(
     ke,
     {
       options: U,
       wrap: Z,
-      disabled: i,
+      disabled: r,
       onRemove: ue
     }
-  ) : null, C = () => {
-    i || (V((e) => !e), D(""));
+  ) : null, R = () => {
+    r || (V((e) => !e), D(""));
   }, ve = () => {
     u && M(ze(S, d));
   }, Se = () => {
@@ -145,21 +146,21 @@ const Qe = ({ isOpen: s }) => s ? /* @__PURE__ */ n(be, {}) : /* @__PURE__ */ n(
       o();
       return;
     }
-    C();
+    R();
   };
   let W;
-  v && l ? W = {
+  v && s ? W = {
     position: "fixed",
     zIndex: 9999,
-    top: l.top,
-    bottom: l.bottom,
-    left: l.left,
-    minWidth: l.minWidth
+    top: s.top,
+    bottom: s.bottom,
+    left: s.left,
+    minWidth: s.minWidth
   } : v && (W = { position: "fixed", visibility: "hidden" });
   const z = g ? /* @__PURE__ */ H(
-    Fe,
+    Ee,
     {
-      id: F,
+      id: E,
       listRef: $,
       dir: ae,
       maxHeight: ie,
@@ -169,18 +170,18 @@ const Qe = ({ isOpen: s }) => s ? /* @__PURE__ */ n(be, {}) : /* @__PURE__ */ n(
         re ? /* @__PURE__ */ n("div", { className: Q.search, onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ n(
           J,
           {
-            id: F ? `${F}-search` : void 0,
+            id: E ? `${E}-search` : void 0,
             name: f ? `${f}-search` : void 0,
             value: b,
             placeholder: "Search",
-            disabled: i,
+            disabled: r,
             ariaLabel: "Search options",
             size: "sm",
             onChange: (e) => {
               D(e.target.value), A == null || A(e.target.value);
             },
             containerFieldClassName: a,
-            startIcon: /* @__PURE__ */ n(Ee, {}),
+            startIcon: /* @__PURE__ */ n(Fe, {}),
             inputProps: {
               onKeyDown: (e) => {
                 if (e.key !== "Enter") return;
@@ -207,22 +208,22 @@ const Qe = ({ isOpen: s }) => s ? /* @__PURE__ */ n(be, {}) : /* @__PURE__ */ n(
       ]
     }
   ) : null;
-  return /* @__PURE__ */ H("div", { className: Q.wrapper, ref: E, children: [
+  return /* @__PURE__ */ H("div", { className: Q.wrapper, ref: F, children: [
     /* @__PURE__ */ n(
       J,
       {
-        id: s,
+        id: i,
         name: f,
         value: pe,
         placeholder: k,
-        disabled: i,
+        disabled: r,
         onChange: () => {
         },
         startIcon: y,
         endIcon: Qe({ isOpen: g }),
         onEndIconClick: Se,
-        onFieldClick: C,
-        onEnter: C,
+        onFieldClick: R,
+        onEnter: R,
         size: L,
         ariaLabel: B ?? (w ? void 0 : "select field"),
         label: w,
@@ -231,20 +232,24 @@ const Qe = ({ isOpen: s }) => s ? /* @__PURE__ */ n(be, {}) : /* @__PURE__ */ n(
         inputProps: {
           readOnly: !0,
           role: "combobox",
-          "aria-controls": F,
+          "aria-controls": E,
           "aria-expanded": g,
           "aria-haspopup": "listbox",
           ...p,
           onKeyDown: (e) => {
             var t;
-            e.key === " " && !i && (e.preventDefault(), C()), (t = p.onKeyDown) == null || t.call(p, e);
+            e.key === " " && !r && (e.preventDefault(), R()), (t = p.onKeyDown) == null || t.call(p, e);
           }
         }
       }
     ),
     z && (v ? we(z, document.body) : z)
   ] });
-}, ct = Oe(Pe);
+}
+const Ue = Oe(Pe);
+function at(i) {
+  return /* @__PURE__ */ n(Ue, { ...i });
+}
 export {
-  ct as SelectField
+  at as SelectField
 };

package/dist/components/Fields/SelectField/SelectFieldTags.d.ts

@@ -0,0 +1,6 @@
+export function SelectFieldTags({ options, wrap, disabled, onRemove, }: {
+    options?: any[];
+    wrap?: boolean;
+    disabled?: boolean;
+    onRemove?: () => void;
+}): import("react").JSX.Element;

package/dist/components/Fields/SelectField/selectOptionRow.d.ts

@@ -0,0 +1 @@
+export function renderOptionRow(opt: any, listItemType: any, isSelected: any, toggleValue: any, toggleAllValues: any, checkAll?: boolean): import("react").JSX.Element;