@sito/dashboard 0.0.72 → 0.0.74

package/README.md

@@ -94,11 +94,33 @@ export function UsersTable() {
 - `CheckInput` is controlled with `checked` (not `value`).
 - `FileInput` `onChange` receives the native input event; read files from `e.currentTarget.files`.
 
+## `TableOptionsProvider` Initial State
+
+`TableOptionsProvider` supports optional `initialState` configuration:
+
+```tsx
+import { SortOrder, TableOptionsProvider } from "@sito/dashboard";
+
+<TableOptionsProvider
+  defaultHiddenColumns={["email"]}
+  initialState={{
+    currentPage: 0,
+    pageSize: 50,
+    pageSizes: [25, 50, 100],
+    sortingBy: "createdAt",
+    sortingOrder: SortOrder.ASC,
+    filters: { status: "active" },
+  }}
+>
+  <UsersTable />
+</TableOptionsProvider>;
+```
+
 ## Core `Table` Props
 
 | Prop                        | Type                                                              | Required | Description                                                                 |
 | --------------------------- | ----------------------------------------------------------------- | -------- | --------------------------------------------------------------------------- |
-| `entity`                    | `string`                                                          | Yes      | Entity name used by internal table state.                                   |
+| `entity`                    | `string`                                                          | No       | Optional logical entity identifier.                                         |
 | `data`                      | `TRow[]`                                                          | Yes      | Rows to render. `TRow` must extend `BaseDto` and include `id`.              |
 | `columns`                   | `ColumnType<TRow>[]`                                              | No       | Column definitions.                                                         |
 | `actions`                   | `(row: TRow) => ActionType<TRow>[]`                               | No       | Per-row action factory.                                                     |
@@ -106,6 +128,8 @@ export function UsersTable() {
 | `toolbar`                   | `ReactNode`                                                       | No       | Extra content rendered in the table header.                                 |
 | `isLoading`                 | `boolean`                                                         | No       | Loading state for table UI.                                                 |
 | `filterOptions`             | `FilterOptions`                                                   | No       | Extra options passed to filter behavior/components.                         |
+| `canHideColumns`            | `boolean`                                                         | No       | Shows column visibility menu in the header.                                 |
+| `canReset`                  | `boolean`                                                         | No       | Shows table reset button in the header.                                     |
 | `onSort`                    | `(prop: string, sortOrder: SortOrder) => void`                    | No       | Sort callback when a sortable column is toggled.                            |
 | `onRowSelect`               | `(row: TRow, selected: boolean) => void`                          | No       | Row selection callback.                                                     |
 | `onSelectedRowsChange`      | `(rows: TRow[]) => void`                                          | No       | Callback with selected rows.                                                |
@@ -121,8 +145,8 @@ export function UsersTable() {
 
 Main package exports include:
 
-- Components: `Action`, `Actions`, `ActionsDropdown`, `Badge`, `Button`, `Chip`, `Dropdown`, `Form`, `IconButton`, `Loading`, `SvgIcons`, `Table`, `Tooltip`.
-- Providers: `FiltersProvider`, `TableOptionsProvider`, `TranslationProvider` and related hooks/types.
+- Components: `Action`, `Actions`, `ActionsDropdown`, `Badge`, `Button`, `Chip`, `Dropdown`, `IconButton`, `Loading`, `SvgIcons`, `Table`, `Tooltip`, `TextInput`, `SelectInput`, `AutocompleteInput`, `CheckInput`, `FileInput`.
+- Providers: `FiltersProvider`, `TableOptionsProvider`, `TranslationProvider` and related hooks/types (`useFilters`, `useTableOptions`, `useTranslation`).
 - Utilities and models: `FilterTypes`, `SortOrder`, `BaseDto`, and query/filter helpers from `lib`.
 
 ## Development Setup

package/dist/{FiltersProvider-DVMj0LV0.cjs → FiltersProvider-CnrF3xWV.cjs}

@@ -1 +1 @@
-"use strict";const p=require("react/jsx-runtime"),i=require("react"),f=require("./TableOptionsProvider-i4uVLLwH.cjs");var n=(e=>(e[e.update=0]="update",e[e.reset=1]="reset",e))(n||{});const o=e=>{if(e){const t={};return Object.keys(e)?.forEach(r=>{t[r]={value:e[r]}}),t}return{}};function a(e,t){const{type:s}=t;switch(s){case n.reset:return{};case n.update:{const{toUpdate:r}=t;return{...e,...r}}default:return e}}const d=i.createContext(void 0),v=e=>{const{children:t}=e,{filters:s}=f.useTableOptions(),[r,u]=i.useReducer(a,o(s));i.useEffect(()=>{u({type:n.reset});const c=o(s);Object.keys(c).length&&u({type:n.update,toUpdate:c})},[s]);const l=i.useMemo(()=>({currentFilters:r,setCurrentFilters:u}),[r]);return p.jsx(d.Provider,{value:l,children:t})},x=()=>{const e=i.useContext(d);if(!e)throw new Error("filtersContext must be used within a Provider");return e};exports.FiltersActions=n;exports.FiltersProvider=v;exports.filtersReducer=a;exports.initializer=o;exports.useFilters=x;
+"use strict";const p=require("react/jsx-runtime"),i=require("react"),f=require("./TableOptionsProvider-bPNtpa4V.cjs");var n=(e=>(e[e.update=0]="update",e[e.reset=1]="reset",e))(n||{});const o=e=>{if(e){const t={};return Object.keys(e)?.forEach(r=>{t[r]={value:e[r]}}),t}return{}};function a(e,t){const{type:s}=t;switch(s){case n.reset:return{};case n.update:{const{toUpdate:r}=t;return{...e,...r}}default:return e}}const d=i.createContext(void 0),v=e=>{const{children:t}=e,{filters:s}=f.useTableOptions(),[r,u]=i.useReducer(a,o(s));i.useEffect(()=>{u({type:n.reset});const c=o(s);Object.keys(c).length&&u({type:n.update,toUpdate:c})},[s]);const l=i.useMemo(()=>({currentFilters:r,setCurrentFilters:u}),[r]);return p.jsx(d.Provider,{value:l,children:t})},x=()=>{const e=i.useContext(d);if(!e)throw new Error("filtersContext must be used within a Provider");return e};exports.FiltersActions=n;exports.FiltersProvider=v;exports.filtersReducer=a;exports.initializer=o;exports.useFilters=x;

package/dist/{FiltersProvider-BV023mmu.js → FiltersProvider-iOkSYSFZ.js}

@@ -1,6 +1,6 @@
 import { jsx as d } from "react/jsx-runtime";
 import { useReducer as p, useEffect as f, useMemo as l, createContext as m, useContext as v } from "react";
-import { u as x } from "./TableOptionsProvider-BgnISoXx.js";
+import { u as x } from "./TableOptionsProvider-Dzq4dOu8.js";
 var n = /* @__PURE__ */ ((e) => (e[e.update = 0] = "update", e[e.reset = 1] = "reset", e))(n || {});
 const a = (e) => {
   if (e) {

package/dist/FiltersProvider.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./FiltersProvider-DVMj0LV0.cjs");exports.FiltersActions=e.FiltersActions;exports.FiltersProvider=e.FiltersProvider;exports.filtersReducer=e.filtersReducer;exports.initializer=e.initializer;exports.useFilters=e.useFilters;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./FiltersProvider-CnrF3xWV.cjs");exports.FiltersActions=e.FiltersActions;exports.FiltersProvider=e.FiltersProvider;exports.filtersReducer=e.filtersReducer;exports.initializer=e.initializer;exports.useFilters=e.useFilters;

package/dist/FiltersProvider.js

@@ -1,4 +1,4 @@
-import { a as e, F as r, f as a, i as t, u as l } from "./FiltersProvider-BV023mmu.js";
+import { a as e, F as r, f as a, i as t, u as l } from "./FiltersProvider-iOkSYSFZ.js";
 export {
   e as FiltersActions,
   r as FiltersProvider,

package/dist/Form.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./SelectInput-B9EEu-h1.cjs"),t=require("./FileInput-CqzVk1gQ.cjs");exports.AutocompleteInput=e.AutocompleteInput;exports.CheckInput=e.CheckInput;exports.SelectInput=e.SelectInput;exports.State=e.State;exports.TextInput=e.TextInput;exports.helperTextStateClassName=e.helperTextStateClassName;exports.inputStateClassName=e.inputStateClassName;exports.labelStateClassName=e.labelStateClassName;exports.FileInput=t.FileInput;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./SelectInput-dYjrdopP.cjs"),t=require("./FileInput-CqzVk1gQ.cjs");exports.AutocompleteInput=e.AutocompleteInput;exports.CheckInput=e.CheckInput;exports.SelectInput=e.SelectInput;exports.State=e.State;exports.TextInput=e.TextInput;exports.helperTextStateClassName=e.helperTextStateClassName;exports.inputStateClassName=e.inputStateClassName;exports.labelStateClassName=e.labelStateClassName;exports.FileInput=t.FileInput;

package/dist/Form.js

@@ -1,4 +1,4 @@
-import { A as e, C as s, S as l, a as p, T as u, h as m, i as n, l as o } from "./SelectInput-H421nC22.js";
+import { A as e, C as s, S as l, a as p, T as u, h as m, i as n, l as o } from "./SelectInput-Dm7gv03Z.js";
 import { F as r } from "./FileInput-Cr4TxWUg.js";
 export {
   e as AutocompleteInput,

package/dist/SelectInput-Dm7gv03Z.js

@@ -0,0 +1,521 @@
+import "./SelectInput.css";
+import { jsxs as E, jsx as a, Fragment as Y } from "react/jsx-runtime";
+import { forwardRef as W, useState as F, useEffect as H, useMemo as j, useRef as U, useCallback as k, useLayoutEffect as Z } from "react";
+import { C as M } from "./Chip-C5ogKbFn.js";
+import { I as ee } from "./IconButton-BpsTEj0z.js";
+import { C as te } from "./Close-rKC9AcNX.js";
+const oe = W(function(l, p) {
+  const {
+    state: m,
+    value: t,
+    onChange: r,
+    options: x = [],
+    name: $ = "",
+    id: w = "",
+    label: y = "",
+    containerClassName: A = "",
+    inputContainerClassName: N = "",
+    helperText: S = "",
+    placeholder: T = "",
+    multiple: d = !1,
+    ...D
+  } = l, [i, f] = F("");
+  H(() => {
+    if (!d && t && !Array.isArray(t)) {
+      f(String(t.value ?? t.name ?? ""));
+      return;
+    }
+    f("");
+  }, [d, t]);
+  const [g, C] = F(!1), [b, v] = F(-1), s = j(
+    () => x.filter((e) => {
+      const n = String(e.value ?? e.name).toLowerCase().includes(i?.toLowerCase());
+      return Array.isArray(t) && t.length ? n && !t.some((c) => c.id === e.id) : t && !Array.isArray(t) ? n && t.id !== e.id : n;
+    }),
+    [x, t, i]
+  );
+  H(() => {
+    if (!g || !s.length) {
+      v(-1);
+      return;
+    }
+    v(0);
+  }, [g, s]);
+  const o = U(null), h = U(null), [O, I] = F(!1), u = U(null);
+  H(() => {
+    const e = (c) => {
+      o.current && !o.current.contains(c.target) && C(!1);
+    }, n = (c) => {
+      c.key === "Escape" && C(!1);
+    };
+    return document.addEventListener("mousedown", e), document.addEventListener("keydown", n), () => {
+      document.removeEventListener("mousedown", e), document.removeEventListener("keydown", n);
+    };
+  }, []);
+  const P = k((e) => {
+    f(e.target.value);
+  }, []), L = k(
+    (e) => {
+      e ? d ? (f(""), Array.isArray(t) && t.length ? r([...t, e]) : r([e])) : (f(String(e.name ?? e.value ?? "")), r(e)) : r(null), C(!1);
+    },
+    [d, r, t]
+  ), K = k(
+    (e) => {
+      if (!s.length) {
+        e.key === "Escape" && C(!1);
+        return;
+      }
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        if (e.preventDefault(), !g) {
+          C(!0), v(0);
+          return;
+        }
+        v((n) => {
+          const c = n >= 0 ? n : 0;
+          return e.key === "ArrowDown" ? (c + 1 + s.length) % s.length : (c - 1 + s.length) % s.length;
+        });
+        return;
+      }
+      if (e.key === "Enter" && g) {
+        e.preventDefault();
+        const n = b >= 0 ? b : 0;
+        L(s[n]);
+        return;
+      }
+      e.key === "Escape" && g && (e.preventDefault(), C(!1));
+    },
+    [
+      L,
+      b,
+      g,
+      s
+    ]
+  ), R = k(
+    (e) => {
+      if (!Array.isArray(t)) {
+        r(null);
+        return;
+      }
+      const n = t.filter((c, z) => z !== e);
+      n.length ? r(n) : r(null);
+    },
+    [r, t]
+  ), V = k(() => {
+    Array.isArray(t) && r([t[0]]);
+  }, [r, t]);
+  return Z(() => {
+    const e = u.current?.offsetWidth ?? 0, n = o.current?.offsetWidth ?? 0;
+    I(e > n * 0.4);
+  }, [t]), /* @__PURE__ */ E(
+    "div",
+    {
+      className: `autocomplete-input-container ${A}`,
+      ref: o,
+      children: [
+        /* @__PURE__ */ E("div", { className: "autocomplete-value-input-container", children: [
+          /* @__PURE__ */ a(
+            Q,
+            {
+              state: m,
+              name: $,
+              id: w,
+              value: i,
+              onChange: P,
+              placeholder: T,
+              helperText: S,
+              onFocus: () => C(!0),
+              onKeyDown: K,
+              label: y,
+              containerClassName: `autocomplete-text-input ${N}`,
+              ref: p ?? h,
+              ...D,
+              children: !d && t && !Array.isArray(t) && (t.value || t.name) && /* @__PURE__ */ a(
+                ee,
+                {
+                  icon: /* @__PURE__ */ a(te, {}),
+                  className: "autocomplete-delete-button",
+                  onClick: (e) => {
+                    L(), e.stopPropagation();
+                  }
+                }
+              )
+            }
+          ),
+          d && Array.isArray(t) && t.length ? /* @__PURE__ */ a("ul", { ref: u, className: "autocomplete-value-container", children: O ? /* @__PURE__ */ E(Y, { children: [
+            /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(
+              M,
+              {
+                text: t[0]?.value ?? t[0]?.name,
+                onDelete: (e) => {
+                  R(0), e.stopPropagation();
+                }
+              }
+            ) }),
+            t.length > 1 && /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(
+              M,
+              {
+                text: `+${t.length - 1}`,
+                onDelete: (e) => {
+                  V(), e.stopPropagation();
+                }
+              }
+            ) })
+          ] }) : t.map((e, n) => /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(
+            M,
+            {
+              text: String(e.value ?? e.name),
+              onDelete: (c) => {
+                R(n), c.stopPropagation();
+              }
+            }
+          ) }, e.id ?? e.value ?? e.name)) }) : null
+        ] }),
+        g && /* @__PURE__ */ a(
+          "ul",
+          {
+            className: "autocomplete-suggestions-container",
+            style: { width: o.current?.offsetWidth },
+            children: s.map((e) => /* @__PURE__ */ a(
+              "li",
+              {
+                className: `autocomplete-suggestion-item ${e.id === s[b]?.id ? "highlighted" : ""}`,
+                onMouseEnter: () => v(
+                  s.findIndex((n) => n.id === e.id)
+                ),
+                onClick: (n) => {
+                  L(e), n.stopPropagation();
+                },
+                children: e.value ?? e.name
+              },
+              e.id ?? e.value ?? e.name
+            ))
+          }
+        )
+      ]
+    }
+  );
+});
+var B = /* @__PURE__ */ ((l) => (l.error = "error", l.good = "good", l.default = "default", l))(B || {});
+const q = (l) => {
+  switch (l) {
+    case "error":
+      return "input-error";
+    case "good":
+      return "input-good";
+    default:
+      return "input-normal";
+  }
+}, _ = (l) => {
+  switch (l) {
+    case "error":
+      return "input-label-error";
+    case "good":
+      return "input-label-good";
+    default:
+      return "input-label-normal";
+  }
+}, J = (l) => {
+  switch (l) {
+    case "error":
+      return "input-helper-text-error";
+    case "good":
+      return "input-helper-text-good";
+    default:
+      return "input-helper-text-normal";
+  }
+}, ce = W(function(l, p) {
+  const {
+    checked: m,
+    onChange: t,
+    name: r = "",
+    id: x = "",
+    label: $ = "",
+    state: w = B.default,
+    containerClassName: y = "",
+    inputClassName: A = "",
+    labelClassName: N = "",
+    ...S
+  } = l;
+  return /* @__PURE__ */ E("label", { className: `input-check-container ${y}`, children: [
+    /* @__PURE__ */ a(
+      "input",
+      {
+        id: x,
+        ref: p,
+        name: r,
+        type: "checkbox",
+        checked: m,
+        onChange: t,
+        className: `input-check ${q(w)} ${A}`,
+        ...S
+      }
+    ),
+    /* @__PURE__ */ a(
+      "span",
+      {
+        className: `input-check-label ${_(w)} ${N}`,
+        children: $
+      }
+    )
+  ] });
+}), G = (l) => l == null ? !1 : Array.isArray(l) ? l.length > 0 : `${l}`.length > 0, Q = W(function(l, p) {
+  const {
+    children: m,
+    state: t = B.default,
+    label: r = "",
+    containerClassName: x = "",
+    inputClassName: $ = "",
+    labelClassName: w = "",
+    helperText: y = "",
+    helperTextClassName: A = "",
+    value: N,
+    defaultValue: S,
+    onChange: T,
+    onFocus: d,
+    onBlur: D,
+    ...i
+  } = l, f = N !== void 0, [g, C] = F(
+    () => G(S)
+  ), b = f ? G(N) : g, v = i.type === "date", s = !!i.placeholder || v, o = (h) => {
+    f || C(h.currentTarget.value.length > 0), T?.(h);
+  };
+  return /* @__PURE__ */ E("div", { className: `text-input-container ${x}`, children: [
+    /* @__PURE__ */ a(
+      "input",
+      {
+        ref: p,
+        defaultValue: S,
+        onChange: o,
+        onFocus: d,
+        onBlur: D,
+        ...f ? { value: N } : {},
+        className: `text-input ${q(t)} ${$} ${b ? "has-value" : ""} ${i.placeholder ? "has-placeholder" : ""} ${s ? "keep-label-up" : ""}`,
+        ...i
+      }
+    ),
+    !!r && /* @__PURE__ */ E(
+      "label",
+      {
+        htmlFor: i.id,
+        className: `text-input-label ${_(t)} ${w}`,
+        children: [
+          r,
+          i.required ? " *" : ""
+        ]
+      }
+    ),
+    m,
+    !!y && /* @__PURE__ */ a(
+      "p",
+      {
+        className: `text-input-helper-text ${J(t)} ${A}`,
+        children: y
+      }
+    )
+  ] });
+}), ue = W(function(l, p) {
+  const {
+    value: m,
+    onChange: t,
+    options: r,
+    containerClassName: x = "",
+    inputClassName: $ = "",
+    labelClassName: w = "",
+    helperText: y = "",
+    helperTextClassName: A = "",
+    label: N = "",
+    placeholder: S = "",
+    name: T = "",
+    id: d = "",
+    state: D = B.default,
+    native: i = !0,
+    disabled: f,
+    required: g,
+    autoFocus: C,
+    children: b,
+    ...v
+  } = l, s = U(null), [o, h] = F(!1), [O, I] = F(-1), u = j(
+    () => r.findIndex(
+      (e) => String(e.id) === String(m ?? r[0]?.id ?? "")
+    ),
+    [r, m]
+  ), P = j(
+    () => u >= 0 ? r[u] : void 0,
+    [r, u]
+  );
+  H(() => {
+    if (!(i || !o)) {
+      if (!r.length) {
+        I(-1);
+        return;
+      }
+      I(u >= 0 ? u : 0);
+    }
+  }, [i, r.length, u, o]), H(() => {
+    if (i) return;
+    const e = (n) => {
+      s.current && !s.current.contains(n.target) && h(!1);
+    };
+    return document.addEventListener("mousedown", e), () => {
+      document.removeEventListener("mousedown", e);
+    };
+  }, [i]);
+  const L = k(
+    (e) => {
+      p && (typeof p == "function" ? p(e) : p.current = e);
+    },
+    [p]
+  ), K = k(
+    (e) => {
+      if (!t) return;
+      const n = {
+        target: { value: String(e) },
+        currentTarget: { value: String(e) }
+      };
+      t(n);
+    },
+    [t]
+  ), R = k(
+    (e) => {
+      const n = r[e];
+      n && (K(n.id), h(!1));
+    },
+    [K, r]
+  ), V = k(
+    (e) => {
+      if (r.length) {
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+          if (e.preventDefault(), !o) {
+            h(!0);
+            const n = u >= 0 ? u : 0;
+            I(n);
+            return;
+          }
+          I((n) => {
+            const c = n >= 0 ? n : u;
+            return e.key === "ArrowDown" ? (c + 1 + r.length) % r.length : (c - 1 + r.length) % r.length;
+          });
+          return;
+        }
+        if (e.key === "Enter") {
+          if (!o) {
+            e.preventDefault(), h(!0), I(u >= 0 ? u : 0);
+            return;
+          }
+          e.preventDefault(), R(O >= 0 ? O : 0);
+          return;
+        }
+        e.key === "Escape" && o && (e.preventDefault(), h(!1));
+      }
+    },
+    [O, r, R, u, o]
+  );
+  return i ? /* @__PURE__ */ E("div", { className: `select-input-container ${x}`, children: [
+    /* @__PURE__ */ a(
+      "select",
+      {
+        ...v,
+        id: d,
+        ref: L,
+        name: T,
+        value: m,
+        onChange: t,
+        className: `select-input ${q(D)} peer ${$}`,
+        children: r?.map((e) => /* @__PURE__ */ a("option", { value: e.id, children: e.value ?? e.name ?? e.id }, e.id))
+      }
+    ),
+    /* @__PURE__ */ a(
+      "label",
+      {
+        htmlFor: d,
+        className: `select-input-label ${_(D)} ${w}`,
+        children: N
+      }
+    ),
+    b,
+    y && /* @__PURE__ */ a(
+      "p",
+      {
+        className: `select-input-helper-text ${J(D)} ${A}`,
+        children: y
+      }
+    )
+  ] }) : /* @__PURE__ */ E(
+    "div",
+    {
+      ref: s,
+      className: `select-input-container ${x}`,
+      children: [
+        /* @__PURE__ */ a(
+          "select",
+          {
+            ...v,
+            ref: L,
+            name: T,
+            id: d,
+            value: m,
+            onChange: t,
+            className: "select-input-native-hidden",
+            tabIndex: -1,
+            "aria-hidden": !0,
+            children: r?.map((e) => /* @__PURE__ */ a("option", { value: e.id, children: e.value ?? e.name ?? e.id }, e.id))
+          }
+        ),
+        /* @__PURE__ */ a(
+          Q,
+          {
+            id: d,
+            name: T,
+            state: D,
+            value: String(P?.value ?? P?.name ?? ""),
+            readOnly: !0,
+            label: N,
+            helperText: y,
+            containerClassName: "select-input-text-container",
+            inputClassName: `select-input-text ${$}`,
+            labelClassName: w,
+            helperTextClassName: A,
+            placeholder: S,
+            disabled: f,
+            required: g,
+            autoFocus: C,
+            onClick: () => h((e) => !e),
+            onKeyDown: V,
+            onFocus: () => h(!0),
+            role: "combobox",
+            "aria-expanded": o,
+            "aria-haspopup": "listbox",
+            children: b
+          }
+        ),
+        o && /* @__PURE__ */ a("ul", { className: "select-input-options-container", role: "listbox", children: r.map((e, n) => {
+          const c = String(e.id) === String(m);
+          return /* @__PURE__ */ a(
+            "li",
+            {
+              role: "option",
+              "aria-selected": c,
+              className: `select-input-option-item ${n === O ? "highlighted" : ""}`,
+              onMouseEnter: () => I(n),
+              onClick: (X) => {
+                R(n), X.stopPropagation();
+              },
+              children: e.value ?? e.name ?? e.id
+            },
+            e.id
+          );
+        }) })
+      ]
+    }
+  );
+});
+export {
+  oe as A,
+  ce as C,
+  ue as S,
+  Q as T,
+  B as a,
+  J as h,
+  q as i,
+  _ as l
+};

package/dist/SelectInput-dYjrdopP.cjs

@@ -0,0 +1 @@
+var X=require("./SelectInput.css");const r=require("react/jsx-runtime"),l=require("react"),K=require("./Chip-D17UJHW6.cjs"),_=require("./IconButton-CVnmT2E9.cjs"),z=require("./Close-O9P7wJGf.cjs"),G=l.forwardRef(function(s,f){const{state:m,value:t,onChange:a,options:k=[],name:j="",id:v="",label:y="",containerClassName:S="",inputContainerClassName:N="",helperText:$="",placeholder:D="",multiple:h=!1,...A}=s,[o,g]=l.useState("");l.useEffect(()=>{if(!h&&t&&!Array.isArray(t)){g(String(t.value??t.name??""));return}g("")},[h,t]);const[x,C]=l.useState(!1),[w,b]=l.useState(-1),i=l.useMemo(()=>k.filter(e=>{const n=String(e.value??e.name).toLowerCase().includes(o?.toLowerCase());return Array.isArray(t)&&t.length?n&&!t.some(c=>c.id===e.id):t&&!Array.isArray(t)?n&&t.id!==e.id:n}),[k,t,o]);l.useEffect(()=>{if(!x||!i.length){b(-1);return}b(0)},[x,i]);const u=l.useRef(null),p=l.useRef(null),[T,I]=l.useState(!1),d=l.useRef(null);l.useEffect(()=>{const e=c=>{u.current&&!u.current.contains(c.target)&&C(!1)},n=c=>{c.key==="Escape"&&C(!1)};return document.addEventListener("mousedown",e),document.addEventListener("keydown",n),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("keydown",n)}},[]);const F=l.useCallback(e=>{g(e.target.value)},[]),E=l.useCallback(e=>{e?h?(g(""),Array.isArray(t)&&t.length?a([...t,e]):a([e])):(g(String(e.name??e.value??"")),a(e)):a(null),C(!1)},[h,a,t]),q=l.useCallback(e=>{if(!i.length){e.key==="Escape"&&C(!1);return}if(e.key==="ArrowDown"||e.key==="ArrowUp"){if(e.preventDefault(),!x){C(!0),b(0);return}b(n=>{const c=n>=0?n:0;return e.key==="ArrowDown"?(c+1+i.length)%i.length:(c-1+i.length)%i.length});return}if(e.key==="Enter"&&x){e.preventDefault();const n=w>=0?w:0;E(i[n]);return}e.key==="Escape"&&x&&(e.preventDefault(),C(!1))},[E,w,x,i]),R=l.useCallback(e=>{if(!Array.isArray(t)){a(null);return}const n=t.filter((c,H)=>H!==e);n.length?a(n):a(null)},[a,t]),B=l.useCallback(()=>{Array.isArray(t)&&a([t[0]])},[a,t]);return l.useLayoutEffect(()=>{const e=d.current?.offsetWidth??0,n=u.current?.offsetWidth??0;I(e>n*.4)},[t]),r.jsxs("div",{className:`autocomplete-input-container ${S}`,ref:u,children:[r.jsxs("div",{className:"autocomplete-value-input-container",children:[r.jsx(U,{state:m,name:j,id:v,value:o,onChange:F,placeholder:D,helperText:$,onFocus:()=>C(!0),onKeyDown:q,label:y,containerClassName:`autocomplete-text-input ${N}`,ref:f??p,...A,children:!h&&t&&!Array.isArray(t)&&(t.value||t.name)&&r.jsx(_.IconButton,{icon:r.jsx(z.Close,{}),className:"autocomplete-delete-button",onClick:e=>{E(),e.stopPropagation()}})}),h&&Array.isArray(t)&&t.length?r.jsx("ul",{ref:d,className:"autocomplete-value-container",children:T?r.jsxs(r.Fragment,{children:[r.jsx("li",{children:r.jsx(K.Chip,{text:t[0]?.value??t[0]?.name,onDelete:e=>{R(0),e.stopPropagation()}})}),t.length>1&&r.jsx("li",{children:r.jsx(K.Chip,{text:`+${t.length-1}`,onDelete:e=>{B(),e.stopPropagation()}})})]}):t.map((e,n)=>r.jsx("li",{children:r.jsx(K.Chip,{text:String(e.value??e.name),onDelete:c=>{R(n),c.stopPropagation()}})},e.id??e.value??e.name))}):null]}),x&&r.jsx("ul",{className:"autocomplete-suggestions-container",style:{width:u.current?.offsetWidth},children:i.map(e=>r.jsx("li",{className:`autocomplete-suggestion-item ${e.id===i[w]?.id?"highlighted":""}`,onMouseEnter:()=>b(i.findIndex(n=>n.id===e.id)),onClick:n=>{E(e),n.stopPropagation()},children:e.value??e.name},e.id??e.value??e.name))})]})});var L=(s=>(s.error="error",s.good="good",s.default="default",s))(L||{});const O=s=>{switch(s){case"error":return"input-error";case"good":return"input-good";default:return"input-normal"}},P=s=>{switch(s){case"error":return"input-label-error";case"good":return"input-label-good";default:return"input-label-normal"}},M=s=>{switch(s){case"error":return"input-helper-text-error";case"good":return"input-helper-text-good";default:return"input-helper-text-normal"}},J=l.forwardRef(function(s,f){const{checked:m,onChange:t,name:a="",id:k="",label:j="",state:v=L.default,containerClassName:y="",inputClassName:S="",labelClassName:N="",...$}=s;return r.jsxs("label",{className:`input-check-container ${y}`,children:[r.jsx("input",{id:k,ref:f,name:a,type:"checkbox",checked:m,onChange:t,className:`input-check ${O(v)} ${S}`,...$}),r.jsx("span",{className:`input-check-label ${P(v)} ${N}`,children:j})]})}),W=s=>s==null?!1:Array.isArray(s)?s.length>0:`${s}`.length>0,U=l.forwardRef(function(s,f){const{children:m,state:t=L.default,label:a="",containerClassName:k="",inputClassName:j="",labelClassName:v="",helperText:y="",helperTextClassName:S="",value:N,defaultValue:$,onChange:D,onFocus:h,onBlur:A,...o}=s,g=N!==void 0,[x,C]=l.useState(()=>W($)),w=g?W(N):x,b=o.type==="date",i=!!o.placeholder||b,u=p=>{g||C(p.currentTarget.value.length>0),D?.(p)};return r.jsxs("div",{className:`text-input-container ${k}`,children:[r.jsx("input",{ref:f,defaultValue:$,onChange:u,onFocus:h,onBlur:A,...g?{value:N}:{},className:`text-input ${O(t)} ${j} ${w?"has-value":""} ${o.placeholder?"has-placeholder":""} ${i?"keep-label-up":""}`,...o}),!!a&&r.jsxs("label",{htmlFor:o.id,className:`text-input-label ${P(t)} ${v}`,children:[a,o.required?" *":""]}),m,!!y&&r.jsx("p",{className:`text-input-helper-text ${M(t)} ${S}`,children:y})]})}),Q=l.forwardRef(function(s,f){const{value:m,onChange:t,options:a,containerClassName:k="",inputClassName:j="",labelClassName:v="",helperText:y="",helperTextClassName:S="",label:N="",placeholder:$="",name:D="",id:h="",state:A=L.default,native:o=!0,disabled:g,required:x,autoFocus:C,children:w,...b}=s,i=l.useRef(null),[u,p]=l.useState(!1),[T,I]=l.useState(-1),d=l.useMemo(()=>a.findIndex(e=>String(e.id)===String(m??a[0]?.id??"")),[a,m]),F=l.useMemo(()=>d>=0?a[d]:void 0,[a,d]);l.useEffect(()=>{if(!(o||!u)){if(!a.length){I(-1);return}I(d>=0?d:0)}},[o,a.length,d,u]),l.useEffect(()=>{if(o)return;const e=n=>{i.current&&!i.current.contains(n.target)&&p(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[o]);const E=l.useCallback(e=>{f&&(typeof f=="function"?f(e):f.current=e)},[f]),q=l.useCallback(e=>{if(!t)return;const n={target:{value:String(e)},currentTarget:{value:String(e)}};t(n)},[t]),R=l.useCallback(e=>{const n=a[e];n&&(q(n.id),p(!1))},[q,a]),B=l.useCallback(e=>{if(a.length){if(e.key==="ArrowDown"||e.key==="ArrowUp"){if(e.preventDefault(),!u){p(!0);const n=d>=0?d:0;I(n);return}I(n=>{const c=n>=0?n:d;return e.key==="ArrowDown"?(c+1+a.length)%a.length:(c-1+a.length)%a.length});return}if(e.key==="Enter"){if(!u){e.preventDefault(),p(!0),I(d>=0?d:0);return}e.preventDefault(),R(T>=0?T:0);return}e.key==="Escape"&&u&&(e.preventDefault(),p(!1))}},[T,a,R,d,u]);return o?r.jsxs("div",{className:`select-input-container ${k}`,children:[r.jsx("select",{...b,id:h,ref:E,name:D,value:m,onChange:t,className:`select-input ${O(A)} peer ${j}`,children:a?.map(e=>r.jsx("option",{value:e.id,children:e.value??e.name??e.id},e.id))}),r.jsx("label",{htmlFor:h,className:`select-input-label ${P(A)} ${v}`,children:N}),w,y&&r.jsx("p",{className:`select-input-helper-text ${M(A)} ${S}`,children:y})]}):r.jsxs("div",{ref:i,className:`select-input-container ${k}`,children:[r.jsx("select",{...b,ref:E,name:D,id:h,value:m,onChange:t,className:"select-input-native-hidden",tabIndex:-1,"aria-hidden":!0,children:a?.map(e=>r.jsx("option",{value:e.id,children:e.value??e.name??e.id},e.id))}),r.jsx(U,{id:h,name:D,state:A,value:String(F?.value??F?.name??""),readOnly:!0,label:N,helperText:y,containerClassName:"select-input-text-container",inputClassName:`select-input-text ${j}`,labelClassName:v,helperTextClassName:S,placeholder:$,disabled:g,required:x,autoFocus:C,onClick:()=>p(e=>!e),onKeyDown:B,onFocus:()=>p(!0),role:"combobox","aria-expanded":u,"aria-haspopup":"listbox",children:w}),u&&r.jsx("ul",{className:"select-input-options-container",role:"listbox",children:a.map((e,n)=>{const c=String(e.id)===String(m),H=n===T;return r.jsx("li",{role:"option","aria-selected":c,className:`select-input-option-item ${H?"highlighted":""}`,onMouseEnter:()=>I(n),onClick:V=>{R(n),V.stopPropagation()},children:e.value??e.name??e.id},e.id)})})]})});exports.AutocompleteInput=G;exports.CheckInput=J;exports.SelectInput=Q;exports.State=L;exports.TextInput=U;exports.helperTextStateClassName=M;exports.inputStateClassName=O;exports.labelStateClassName=P;