@konstructio/ui 0.1.2-alpha.66 → 0.1.2-alpha.68

package/dist/components/Select/components/Wrapper.js

@@ -1,98 +1,99 @@
 import { jsxs as o, jsx as r } from "react/jsx-runtime";
-import { forwardRef as te, useId as ae, useRef as w, useMemo as re, useImperativeHandle as ne, useEffect as le } from "react";
-import { Typography as se } from "../../Typography/Typography.js";
+import { forwardRef as ae, useId as re, useRef as w, useMemo as ne, useImperativeHandle as le, useEffect as se } from "react";
+import { Typography as oe } from "../../Typography/Typography.js";
 import { cn as n } from "../../../utils/index.js";
-import { labelVariants as oe, inputVariants as ce, selectVariants as ie } from "../Select.variants.js";
-import { useSelect as me } from "../hooks/useSelect.js";
-import { List as pe } from "./List/List.js";
-import { c as ue } from "../../../createLucideIcon-CP-mMPfa.js";
-import { LoaderIcon as fe } from "../../../assets/icons/components/Loader.js";
-import { C as de } from "../../../chevron-up-IlDPxR7j.js";
-import { useSelectContext as xe } from "../contexts/select.hook.js";
-const he = [
+import { labelVariants as ce, inputVariants as ie, selectVariants as me } from "../Select.variants.js";
+import { useSelect as pe } from "../hooks/useSelect.js";
+import { List as ue } from "./List/List.js";
+import { c as fe } from "../../../createLucideIcon-CP-mMPfa.js";
+import { LoaderIcon as de } from "../../../assets/icons/components/Loader.js";
+import { C as xe } from "../../../chevron-up-IlDPxR7j.js";
+import { useSelectContext as he } from "../contexts/select.hook.js";
+const ve = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
-], ve = ue("search", he), ze = te(
+], Ne = fe("search", ve), Oe = ae(
   ({
     additionalOptions: z,
     className: O,
     defaultValue: x,
     disabled: t = !1,
     error: f,
-    iconClassName: R,
-    inputClassName: F,
-    isInfiniteScrollEnabled: S = !1,
+    groupedOptions: R,
+    iconClassName: F,
+    inputClassName: S,
+    isInfiniteScrollEnabled: T = !1,
     isLoading: g,
     isRequired: h,
     label: v,
-    labelAction: T,
-    labelClassName: E,
-    labelWrapperClassName: M,
-    listClassName: W,
-    listItemClassName: _,
-    listItemSecondRowClassName: $,
+    labelAction: E,
+    labelClassName: M,
+    labelWrapperClassName: W,
+    listClassName: _,
+    listItemClassName: $,
+    listItemSecondRowClassName: H,
     name: d,
-    noOptionsText: H,
+    noOptionsText: P,
     placeholder: N,
     searchable: k = !1,
     showSearchIcon: C,
-    theme: P,
-    wrapperClassName: U,
-    onFetchMoreOptions: q,
-    onBlur: A,
-    onSearchChange: B,
+    theme: U,
+    wrapperClassName: q,
+    onFetchMoreOptions: A,
+    onBlur: B,
+    onSearchChange: D,
     ...y
-  }, D) => {
-    const I = ae(), c = w(null), j = w(null), G = w(0), {
+  }, G) => {
+    const I = re(), c = w(null), j = w(null), J = w(0), {
       isOpen: i,
       options: l,
-      searchTerm: J,
+      searchTerm: K,
       value: s,
-      setCanFilter: K,
-      setSearchTerm: Q,
+      setCanFilter: Q,
+      setSearchTerm: X,
       setValue: m,
-      toggleOpen: X
-    } = xe(), e = re(() => l.find(({ value: a }) => a === s), [l, s]), { wrapperRef: Y, wrapperInputRef: L, handleOpen: V } = me({
+      toggleOpen: Y
+    } = he(), e = ne(() => l.find(({ value: a }) => a === s), [l, s]), { wrapperRef: Z, wrapperInputRef: L, handleOpen: V } = pe({
       ulRef: j,
       inputRef: c,
       disabled: t,
       internalValue: e,
-      onBlur: A
+      onBlur: B
     }), p = d ? `${I}-${d}` : I;
-    ne(D, () => c.current, [c]), le(() => {
+    le(G, () => c.current, [c]), se(() => {
       if (x && !s) {
         const a = l && l.find((u) => u.value === x);
         a && m(a.value);
       }
     }, [x, l, m, s]);
-    const Z = (a) => {
+    const ee = (a) => {
       const u = a.target.value;
-      K(!0), m(""), Q(u ?? ""), B?.(u);
+      Q(!0), m(""), X(u ?? ""), D?.(u);
       const b = l.find(
-        (ee) => ee.value.toLocaleLowerCase() === u.toLocaleLowerCase()
+        (te) => te.value.toLocaleLowerCase() === u.toLocaleLowerCase()
       );
       m(b ? b.value : e?.value ?? "");
     };
     return /* @__PURE__ */ o(
       "div",
       {
-        ref: Y,
-        className: n("flex flex-col gap-2 w-full relative", U),
-        "data-theme": P,
+        ref: Z,
+        className: n("flex flex-col gap-2 w-full relative", q),
+        "data-theme": U,
         children: [
           v ? /* @__PURE__ */ o(
             "div",
             {
               className: n(
                 "flex items-center justify-between",
-                M
+                W
               ),
               children: [
                 /* @__PURE__ */ o(
                   "label",
                   {
                     id: p,
-                    className: n(oe({ className: E })),
+                    className: n(ce({ className: M })),
                     htmlFor: p,
                     onClick: () => !t && V(),
                     children: [
@@ -101,7 +102,7 @@ const he = [
                     ]
                   }
                 ),
-                T
+                E
               ]
             }
           ) : null,
@@ -111,18 +112,18 @@ const he = [
               ref: L,
               id: p,
               className: n(
-                ie({ className: O, hasError: !!f, disabled: t })
+                me({ className: O, hasError: !!f, disabled: t })
               ),
               role: "combobox",
-              onClick: () => !t && X(!i),
+              onClick: () => !t && Y(!i),
               "aria-expanded": i,
-              tabIndex: G.current,
+              tabIndex: J.current,
               "aria-labelledby": p,
               children: [
                 /* @__PURE__ */ o("div", { className: "flex gap-2.5 items-center flex-1", children: [
                   e?.leftIcon && !C && /* @__PURE__ */ r("span", { className: "w-4 h-4 flex justify-center items-center dark:text-metal-50", children: e.leftIcon }),
                   C && /* @__PURE__ */ r(
-                    ve,
+                    Ne,
                     {
                       className: n(
                         "w-4",
@@ -140,10 +141,10 @@ const he = [
                     "input",
                     {
                       type: "text",
-                      value: i ? J : e?.label ?? s ?? "",
-                      onChange: Z,
+                      value: i ? K : e?.label ?? s ?? "",
+                      onChange: ee,
                       placeholder: N,
-                      className: n(ce({ className: F }), {
+                      className: n(ie({ className: S }), {
                         "text-red-700 placeholder:text-red-700": !!f
                       }),
                       onClick: (a) => {
@@ -159,7 +160,7 @@ const he = [
                       ...y
                     }
                   ) : /* @__PURE__ */ o(
-                    se,
+                    oe,
                     {
                       variant: "body2",
                       className: n(
@@ -181,18 +182,18 @@ const he = [
                   )
                 ] }),
                 g ? /* @__PURE__ */ r(
-                  fe,
+                  de,
                   {
                     size: 16,
                     className: "text-metal-400 animate-spin select-none"
                   }
                 ) : !C && /* @__PURE__ */ r(
-                  de,
+                  xe,
                   {
                     "data-state": i ? "open" : "closed",
                     className: n(
                       "w-4 h-4 text-zinc-500 transition-all duration-100 data-[state=open]:rotate-0 data-[state=closed]:rotate-180 select-none dark:group-focus-within:text-metal-50",
-                      R,
+                      F,
                       {
                         "text-red-700": !!f,
                         "text-metal-400/50 dark:group-focus-within:text-zinc-500": t
@@ -218,22 +219,23 @@ const he = [
             }
           ),
           i && /* @__PURE__ */ r(
-            pe,
+            ue,
             {
               ref: j,
               additionalOptions: z,
-              className: W,
-              itemClassName: _,
+              className: _,
+              groupedOptions: R,
+              itemClassName: $,
               name: d,
               wrapperInputRef: L,
               inputRef: c,
               options: l,
               isLoading: !!g,
               searchable: k,
-              listItemSecondRowClassName: $,
-              isInfiniteScrollEnabled: S,
-              onFetchMoreOptions: q,
-              noOptionsText: H
+              listItemSecondRowClassName: H,
+              isInfiniteScrollEnabled: T,
+              onFetchMoreOptions: A,
+              noOptionsText: P
             }
           )
         ]
@@ -242,5 +244,5 @@ const he = [
   }
 );
 export {
-  ze as Wrapper
+  Oe as Wrapper
 };

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

@@ -1,3 +1,4 @@
+export * from './AdditionalOptions/AdditionalOptions';
 export * from './EmptyList';
 export * from './List/List';
 export * from './Wrapper';

package/dist/components/Select/components/index.js

@@ -1,8 +1,10 @@
-import { EmptyList as p } from "./EmptyList.js";
-import { List as e } from "./List/List.js";
-import { Wrapper as f } from "./Wrapper.js";
+import { A as t } from "../../../AdditionalOptions-C2FDVZhu.js";
+import { EmptyList as e } from "./EmptyList.js";
+import { List as m } from "./List/List.js";
+import { Wrapper as s } from "./Wrapper.js";
 export {
-  p as EmptyList,
-  e as List,
-  f as Wrapper
+  t as AdditionalOptions,
+  e as EmptyList,
+  m as List,
+  s as Wrapper
 };

package/dist/components/VirtualizedTable/VirtualizedTable.d.ts

@@ -5,6 +5,11 @@ import { Props as ActionProps } from './components/Actions/Actions.types';
 type VirtualizedTableCompound = (<TData extends RowData>(props: Props<TData>) => JSX.Element) & {
     TruncateText: typeof TruncateText;
     Actions: <TData extends RowData>(props: ActionProps<TData>) => JSX.Element | null;
+    Events: {
+        sendExpandRowEvent: (tableId: string, rowId: string) => void;
+        sendCollapseRowEvent: (tableId: string, rowId: string) => void;
+        sendToggleRowEvent: (tableId: string, rowId: string) => void;
+    };
     displayName?: string;
 };
 declare const VirtualizedTable: VirtualizedTableCompound;

package/dist/components/VirtualizedTable/VirtualizedTable.js

@@ -1,63 +1,64 @@
-import { jsx as r, jsxs as s } from "react/jsx-runtime";
+import { jsx as r, jsxs as n } from "react/jsx-runtime";
 import { useMemo as U } from "react";
-import { cn as c } from "../../utils/index.js";
-import { TableProvider as X } from "./contexts/table.provider.js";
-import { Filter as Y } from "./components/Filter/Filter.js";
-import { WrapperBody as Z } from "./components/WrapperBody/WrapperBody.js";
-import { Header as _ } from "./components/Header/Header.js";
-import { Body as $ } from "./components/Body/Body.js";
-import { Pagination as D } from "./components/Pagination/Pagination.js";
-import { TruncateText as L } from "./components/TruncateText/TruncateText.js";
-import { Actions as rr } from "./components/Actions/Actions.js";
-const er = ({
-  id: n,
+import { cn as s } from "../../utils/index.js";
+import { sendToggleRowEvent as X, sendCollapseRowEvent as Y, sendExpandRowEvent as Z } from "./events/index.js";
+import { TableProvider as _ } from "./contexts/table.provider.js";
+import { Filter as $ } from "./components/Filter/Filter.js";
+import { WrapperBody as D } from "./components/WrapperBody/WrapperBody.js";
+import { Header as L } from "./components/Header/Header.js";
+import { Body as rr } from "./components/Body/Body.js";
+import { Pagination as er } from "./components/Pagination/Pagination.js";
+import { TruncateText as or } from "./components/TruncateText/TruncateText.js";
+import { Actions as ar } from "./components/Actions/Actions.js";
+const tr = ({
+  id: c,
   ariaLabel: p,
   columns: d,
   data: f,
   totalItems: u = -1 / 0,
   className: b,
   classNameHeaderActiveArrows: T,
-  classNameHeaderArrows: N,
+  classNameHeaderArrows: v,
   classNameHeaderTable: x,
-  classNameTable: A,
-  classNameWrapperTable: y,
+  classNameTable: E,
+  classNameWrapperTable: N,
   isLoading: a,
-  getRowId: h,
-  fetchData: z,
-  queryOptions: B,
+  getRowId: w,
+  fetchData: A,
+  queryOptions: y,
   // Pagination
-  showPagination: V,
+  showPagination: h,
   showTotalItems: t,
   showDropdownPagination: i,
   showDotPagination: l,
   showFormPagination: m,
-  pageSizes: j,
+  pageSizes: z,
   // Filter
-  showFilter: k = !1,
-  showFilterInput: v,
-  filterSearchPlaceholder: w = "",
-  multiSelectFilter: P,
-  filterActions: E,
-  showResetButton: H = !0,
-  resetButtonClassName: I,
+  showFilter: B = !1,
+  showFilterInput: R,
+  filterSearchPlaceholder: V = "",
+  multiSelectFilter: g,
+  filterActions: j,
+  showResetButton: k = !0,
+  resetButtonClassName: P,
   // Hover row
-  enableHoverRow: K,
-  classNameHoverRow: M,
+  enableHoverRow: C,
+  classNameHoverRow: H,
   // Expandable rows
-  enableExpandedRow: W,
-  expandedState: g,
-  defaultExpanded: q,
-  classNameExpandedRow: C,
-  classNameExpandedCell: F,
-  classNameExpandedContent: G,
-  classNameExpandedHeader: J,
-  classNameActiveExpandedRow: O,
-  onExpandedChange: Q,
-  renderExpandedRow: R,
+  enableExpandedRow: I,
+  expandedState: K,
+  defaultExpanded: M,
+  classNameExpandedRow: W,
+  classNameExpandedCell: q,
+  classNameExpandedContent: F,
+  classNameExpandedHeader: G,
+  classNameActiveExpandedRow: J,
+  onExpandedChange: O,
+  renderExpandedRow: Q,
   keepExpandColumnVisible: S
 }) => {
   const e = U(
-    () => V || [
+    () => h || [
       t,
       i,
       l,
@@ -66,90 +67,95 @@ const er = ({
     []
   );
   return /* @__PURE__ */ r(
-    X,
+    _,
     {
-      id: n,
+      id: c,
       columns: d,
       data: f,
-      getRowId: h,
-      fetchData: z,
+      getRowId: w,
+      fetchData: A,
       totalItems: u,
-      queryOptions: B,
+      queryOptions: y,
       isPaginationEnabled: e,
-      enableExpandedRow: W,
-      expandedState: g,
-      onExpandedChange: Q,
-      defaultExpanded: q,
-      classNameExpandedRow: C,
-      classNameExpandedCell: F,
-      classNameExpandedContent: G,
-      classNameExpandedHeader: J,
-      classNameActiveExpandedRow: O,
-      enableHoverRow: K,
-      classNameHoverRow: M,
-      renderExpandedRow: R,
+      enableExpandedRow: I,
+      expandedState: K,
+      onExpandedChange: O,
+      defaultExpanded: M,
+      classNameExpandedRow: W,
+      classNameExpandedCell: q,
+      classNameExpandedContent: F,
+      classNameExpandedHeader: G,
+      classNameActiveExpandedRow: J,
+      enableHoverRow: C,
+      classNameHoverRow: H,
+      renderExpandedRow: Q,
       keepExpandColumnVisible: S,
-      children: /* @__PURE__ */ s("section", { className: c("w-full min-w-fit", b), children: [
-        k && /* @__PURE__ */ r(
-          Y,
+      children: /* @__PURE__ */ n("section", { className: s("w-full min-w-fit", b), children: [
+        B && /* @__PURE__ */ r(
+          $,
           {
-            actions: E,
-            multiSelectFilter: P,
-            placeholder: w,
-            showFilterInput: v,
-            showResetButton: H,
-            resetButtonClassName: I
+            actions: j,
+            multiSelectFilter: g,
+            placeholder: V,
+            showFilterInput: R,
+            showResetButton: k,
+            resetButtonClassName: P
           }
         ),
         /* @__PURE__ */ r(
-          Z,
+          D,
           {
             showPagination: e,
-            classNameWrapperTable: y,
+            classNameWrapperTable: N,
             isLoading: a,
-            children: /* @__PURE__ */ s(
+            children: /* @__PURE__ */ n(
               "table",
               {
-                className: c(
+                className: s(
                   "w-full border-collapse table-auto",
                   "dark:border-separate dark:border-spacing-0",
-                  A
+                  E
                 ),
                 "aria-label": p,
                 children: [
                   /* @__PURE__ */ r(
-                    _,
+                    L,
                     {
                       className: x,
-                      classNameArrows: N,
+                      classNameArrows: v,
                       classNameActiveArrows: T
                     }
                   ),
-                  /* @__PURE__ */ r($, { isLoading: a, showPagination: e })
+                  /* @__PURE__ */ r(rr, { isLoading: a, showPagination: e })
                 ]
               }
             )
           }
         ),
         e && /* @__PURE__ */ r(
-          D,
+          er,
           {
             showTotalItems: t,
             showDropdownPagination: i,
             showDotPagination: l,
             showFormPagination: m,
-            pageSizes: j,
+            pageSizes: z,
             isLoading: a
           }
         )
       ] })
     }
   );
-}, o = er;
+}, o = tr;
 o.displayName = "KonstructVirtualizedTable";
-o.TruncateText = L;
-o.Actions = rr;
+o.TruncateText = or;
+o.Actions = ar;
+o.Events = {
+  sendExpandRowEvent: Z,
+  sendCollapseRowEvent: Y,
+  sendToggleRowEvent: X
+};
 export {
-  L as TruncateText,
+  or as TruncateText,
   o as VirtualizedTable
 };