@konstructio/ui 0.1.2-alpha.73 → 0.1.2-alpha.75

package/dist/components/Toast/Toast.variants.js

@@ -1,5 +1,5 @@
 import { c as a } from "../../index-D29mdTf5.js";
-const e = a(
+const t = a(
   [
     "rounded-md",
     "p-4",
@@ -30,7 +30,7 @@ const e = a(
       variant: "success"
     }
   }
-), i = a([
+), s = a([
   "fixed",
   "bottom-0",
   "right-0",
@@ -43,15 +43,9 @@ const e = a(
   "m-0",
   "z-50",
   "outline-none"
-]), s = a([
-  "top-2",
-  "right-2",
-  "w-4",
-  "h-4",
-  "text-white"
-]);
+]), i = a(["w-4", "h-4", "text-white"]);
 export {
-  s as closeToastVariants,
-  e as toastVariants,
-  i as viewportToastVariants
+  i as closeToastVariants,
+  t as toastVariants,
+  s as viewportToastVariants
 };

package/dist/components/VirtualizedTable/VirtualizedTable.js

@@ -1,16 +1,16 @@
 import { jsx as r, jsxs as n } from "react/jsx-runtime";
-import { useMemo as X } from "react";
+import { useMemo as Y } from "react";
 import { cn as s } from "../../utils/index.js";
-import { sendToggleRowEvent as Y, sendCollapseRowEvent as Z, sendExpandRowEvent as _ } from "./events/index.js";
-import { TableProvider as $ } from "./contexts/table.provider.js";
-import { Filter as D } from "./components/Filter/Filter.js";
-import { WrapperBody as L } from "./components/WrapperBody/WrapperBody.js";
-import { Header as rr } from "./components/Header/Header.js";
-import { Body as er } from "./components/Body/Body.js";
-import { Pagination as or } from "./components/Pagination/Pagination.js";
+import { sendToggleRowEvent as Z, sendCollapseRowEvent as _, sendExpandRowEvent as $ } from "./events/index.js";
+import { TableProvider as D } from "./contexts/table.provider.js";
+import { Filter as L } from "./components/Filter/Filter.js";
+import { WrapperBody as rr } from "./components/WrapperBody/WrapperBody.js";
+import { Header as er } from "./components/Header/Header.js";
+import { Body as or } from "./components/Body/Body.js";
+import { Pagination as tr } from "./components/Pagination/Pagination.js";
 import { TruncateText as ar } from "./components/TruncateText/TruncateText.js";
-import { Actions as tr } from "./components/Actions/Actions.js";
-const ir = ({
+import { Actions as ir } from "./components/Actions/Actions.js";
+const lr = ({
   id: c,
   ariaLabel: p,
   columns: d,
@@ -22,13 +22,13 @@ const ir = ({
   classNameHeaderTable: x,
   classNameTable: E,
   classNameWrapperTable: N,
-  isLoading: a,
+  isLoading: t,
   getRowId: w,
   fetchData: A,
   queryOptions: y,
   // Pagination
   showPagination: h,
-  showTotalItems: t,
+  showTotalItems: a,
   showDropdownPagination: i,
   showDotPagination: l,
   showFormPagination: m,
@@ -42,25 +42,26 @@ const ir = ({
   filterActions: k,
   showResetButton: P = !0,
   resetButtonClassName: C,
+  closeOnApply: H = !0,
   // Hover row
-  enableHoverRow: H,
-  classNameHoverRow: I,
+  enableHoverRow: I,
+  classNameHoverRow: K,
   // Expandable rows
-  enableExpandedRow: K,
-  expandedState: M,
-  defaultExpanded: W,
-  classNameExpandedRow: q,
-  classNameExpandedCell: F,
-  classNameExpandedContent: G,
-  classNameExpandedHeader: J,
-  classNameActiveExpandedRow: O,
-  onExpandedChange: Q,
-  renderExpandedRow: S,
-  keepExpandColumnVisible: U
+  enableExpandedRow: M,
+  expandedState: W,
+  defaultExpanded: q,
+  classNameExpandedRow: F,
+  classNameExpandedCell: G,
+  classNameExpandedContent: J,
+  classNameExpandedHeader: O,
+  classNameActiveExpandedRow: Q,
+  onExpandedChange: S,
+  renderExpandedRow: U,
+  keepExpandColumnVisible: X
 }) => {
-  const e = X(
+  const e = Y(
     () => h || [
-      t,
+      a,
       i,
       l,
       m
@@ -68,7 +69,7 @@ const ir = ({
     []
   );
   return /* @__PURE__ */ r(
-    $,
+    D,
     {
       id: c,
       columns: d,
@@ -78,22 +79,22 @@ const ir = ({
       totalItems: u,
       queryOptions: y,
       isPaginationEnabled: e,
-      enableExpandedRow: K,
-      expandedState: M,
-      onExpandedChange: Q,
-      defaultExpanded: W,
-      classNameExpandedRow: q,
-      classNameExpandedCell: F,
-      classNameExpandedContent: G,
-      classNameExpandedHeader: J,
-      classNameActiveExpandedRow: O,
-      enableHoverRow: H,
-      classNameHoverRow: I,
-      renderExpandedRow: S,
-      keepExpandColumnVisible: U,
+      enableExpandedRow: M,
+      expandedState: W,
+      onExpandedChange: S,
+      defaultExpanded: q,
+      classNameExpandedRow: F,
+      classNameExpandedCell: G,
+      classNameExpandedContent: J,
+      classNameExpandedHeader: O,
+      classNameActiveExpandedRow: Q,
+      enableHoverRow: I,
+      classNameHoverRow: K,
+      renderExpandedRow: U,
+      keepExpandColumnVisible: X,
       children: /* @__PURE__ */ n("section", { className: s("w-full min-w-fit", b), children: [
         B && /* @__PURE__ */ r(
-          D,
+          L,
           {
             actions: k,
             filters: g,
@@ -101,15 +102,16 @@ const ir = ({
             placeholder: V,
             showFilterInput: R,
             showResetButton: P,
-            resetButtonClassName: C
+            resetButtonClassName: C,
+            closeOnApply: H
           }
         ),
         /* @__PURE__ */ r(
-          L,
+          rr,
           {
             showPagination: e,
             classNameWrapperTable: N,
-            isLoading: a,
+            isLoading: t,
             children: /* @__PURE__ */ n(
               "table",
               {
@@ -121,41 +123,41 @@ const ir = ({
                 "aria-label": p,
                 children: [
                   /* @__PURE__ */ r(
-                    rr,
+                    er,
                     {
                       className: x,
                       classNameArrows: v,
                       classNameActiveArrows: T
                     }
                   ),
-                  /* @__PURE__ */ r(er, { isLoading: a, showPagination: e })
+                  /* @__PURE__ */ r(or, { isLoading: t, showPagination: e })
                 ]
               }
             )
           }
         ),
         e && /* @__PURE__ */ r(
-          or,
+          tr,
           {
-            showTotalItems: t,
+            showTotalItems: a,
             showDropdownPagination: i,
             showDotPagination: l,
             showFormPagination: m,
             pageSizes: z,
-            isLoading: a
+            isLoading: t
           }
         )
       ] })
     }
   );
-}, o = ir;
+}, o = lr;
 o.displayName = "KonstructVirtualizedTable";
 o.TruncateText = ar;
-o.Actions = tr;
+o.Actions = ir;
 o.Events = {
-  sendExpandRowEvent: _,
-  sendCollapseRowEvent: Z,
-  sendToggleRowEvent: Y
+  sendExpandRowEvent: $,
+  sendCollapseRowEvent: _,
+  sendToggleRowEvent: Z
 };
 export {
   ar as TruncateText,

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

@@ -187,6 +187,7 @@ export type Props<TData extends RowDataPrimitive> = VariantProps<typeof virtuali
     filterActions?: ActionFilterConfig[];
     showResetButton?: boolean;
     resetButtonClassName?: string;
+    closeOnApply?: boolean;
 } | {
     filterSearchPlaceholder?: never;
     /** @deprecated Use `filters` instead */
@@ -198,6 +199,7 @@ export type Props<TData extends RowDataPrimitive> = VariantProps<typeof virtuali
     filterActions?: ActionFilterConfig[];
     showResetButton?: never;
     resetButtonClassName?: never;
+    closeOnApply?: never;
 }) & ({
     enableExpandedRow: true;
     expandedState?: ExpandedState;

package/dist/components/VirtualizedTable/components/Filter/Filter.js

@@ -1,21 +1,22 @@
 import { jsxs as m, jsx as n } from "react/jsx-runtime";
-import { d as E } from "../../../../debounce-DJveWHr_.js";
-import { useRef as G, useMemo as p, useCallback as w } from "react";
-import { Button as H } from "../../../Button/Button.js";
-import { Filter as s } from "../../../Filter/Filter.js";
-import { Input as J } from "../../../Input/Input.js";
-import { cn as K } from "../../../../utils/index.js";
-import { useTableContext as L } from "../../contexts/table.hook.js";
-const ee = ({
+import { d as G } from "../../../../debounce-DJveWHr_.js";
+import { useRef as H, useMemo as p, useCallback as w } from "react";
+import { Button as J } from "../../../Button/Button.js";
+import { Filter as r } from "../../../Filter/Filter.js";
+import { Input as K } from "../../../Input/Input.js";
+import { cn as L } from "../../../../utils/index.js";
+import { useTableContext as Q } from "../../contexts/table.hook.js";
+const te = ({
   actions: u,
   filters: d,
   multiSelectFilter: i,
   placeholder: T,
   showFilterInput: v = !0,
   showResetButton: x = !0,
-  resetButtonClassName: M
+  resetButtonClassName: M,
+  closeOnApply: j = !0
 }) => {
-  const l = G(null), {
+  const l = H(null), {
     termOfSearch: h,
     multiselectSelected: y,
     dateFilters: F,
@@ -23,10 +24,10 @@ const ee = ({
     timeFilters: D,
     onChangeTermOfSearch: c,
     onSelectMultiselect: R,
-    onSelectDateFilter: j,
-    onSelectDateRangeFilter: O,
-    onSelectTimeFilter: A
-  } = L(), B = p(() => {
+    onSelectDateFilter: O,
+    onSelectDateRangeFilter: A,
+    onSelectTimeFilter: B
+  } = Q(), k = p(() => {
     const e = d ?? i?.map((o) => ({
       ...o,
       type: "badgeMultiSelect"
@@ -38,14 +39,14 @@ const ee = ({
       t.map((o) => o.id)
     ),
     [R]
-  ), k = w(() => {
+  ), P = w(() => {
     c(""), l.current && (l.current.value = "");
-  }, [c]), P = p(
-    () => E((e) => {
+  }, [c]), I = p(
+    () => G((e) => {
       c(e.target.value);
     }, 500),
     [c]
-  ), I = p(
+  ), N = p(
     () => !!h || Object.values(y ?? {}).flat().length > 0 || Object.values(F ?? {}).some(Boolean) || Object.values(b ?? {}).some(Boolean) || Object.values(D ?? {}).some(Boolean),
     [
       h,
@@ -54,38 +55,38 @@ const ee = ({
       b,
       D
     ]
-  ), N = (e) => {
+  ), g = (e) => {
     if (e.type === "action") {
       const {
         label: a,
-        appearance: g = "compact",
-        variant: _ = "secondary",
-        leftIcon: $,
-        rightIcon: q,
-        type: Q,
-        ...z
+        appearance: _ = "compact",
+        variant: $ = "secondary",
+        leftIcon: q,
+        rightIcon: z,
+        type: U,
+        ...E
       } = e;
       return /* @__PURE__ */ m(
-        H,
+        J,
         {
-          appearance: g,
-          variant: _,
-          ...z,
+          appearance: _,
+          variant: $,
+          ...E,
           children: [
-            $,
+            q,
             a,
-            q
+            z
           ]
         },
         a
       );
     }
-    const { key: t, label: o, position: r = "right" } = e;
+    const { key: t, label: o, position: s = "right" } = e;
     return e.type === "textMultiSelect" ? /* @__PURE__ */ n(
-      s.TextMultiSelect,
+      r.TextMultiSelect,
       {
         label: o,
-        position: r,
+        position: s,
         options: e.options,
         onApply: (a) => {
           S(t, a);
@@ -93,21 +94,21 @@ const ee = ({
       },
       t
     ) : e.type === "date" ? /* @__PURE__ */ n(
-      s.DateFilterDropdown,
+      r.DateFilterDropdown,
       {
         label: o,
-        position: r,
+        position: s,
         countryCode: e.countryCode,
         onApply: (a) => {
-          j(t, a);
+          O(t, a);
         }
       },
       t
     ) : e.type === "dateRange" ? /* @__PURE__ */ n(
-      s.DateRangeFilterDropdown,
+      r.DateRangeFilterDropdown,
       {
         label: o,
-        position: r,
+        position: s,
         showTime: e.showTime,
         timeFormat: e.timeFormat,
         showPresets: e.showPresets,
@@ -116,29 +117,29 @@ const ee = ({
         maxDate: e.maxDate,
         countryCode: e.countryCode,
         onApply: (a) => {
-          O(t, a);
+          A(t, a);
         },
         onRangeChange: e.onRangeChange
       },
       t
     ) : e.type === "time" ? /* @__PURE__ */ n(
-      s.TimeFilterDropdown,
+      r.TimeFilterDropdown,
       {
         label: o,
-        position: r,
+        position: s,
         format: e.format,
         presets: e.presets,
         showTimePicker: e.showTimePicker,
         onApply: (a) => {
-          A(t, a);
+          B(t, a);
         }
       },
       t
     ) : /* @__PURE__ */ n(
-      s.BadgeMultiSelect,
+      r.BadgeMultiSelect,
       {
         label: o,
-        position: r,
+        position: s,
         options: e.options,
         onApply: (a) => {
           S(t, a);
@@ -149,7 +150,7 @@ const ee = ({
   };
   return /* @__PURE__ */ m("div", { className: "w-full flex items-center justify-end pb-6", children: [
     v && /* @__PURE__ */ n(
-      J,
+      K,
       {
         ref: l,
         placeholder: T,
@@ -157,22 +158,22 @@ const ee = ({
         autoComplete: "false",
         className: "w-72",
         inputMode: "search",
-        onChange: P
+        onChange: I
       }
     ),
-    /* @__PURE__ */ m(s, { children: [
-      B.map(N),
+    /* @__PURE__ */ m(r, { closeOnApply: j, children: [
+      k.map(g),
       x && /* @__PURE__ */ n(
-        s.ResetButton,
+        r.ResetButton,
         {
-          className: K("select-none", M),
-          disabled: !I,
-          onClick: k
+          className: L("select-none", M),
+          disabled: !N,
+          onClick: P
         }
       )
     ] })
   ] });
 };
 export {
-  ee as Filter
+  te as Filter
 };

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

@@ -12,4 +12,5 @@ export type Props = {
     showFilterInput?: boolean;
     showResetButton?: boolean;
     resetButtonClassName?: string;
+    closeOnApply?: boolean;
 };

package/dist/components/index.js

@@ -18,7 +18,7 @@ import { ImageUpload as k } from "./ImageUpload/ImageUpload.js";
 import { Input as G } from "./Input/Input.js";
 import { LineChart as y } from "./LineChart/LineChart.js";
 import { Loading as U } from "./Loading/Loading.js";
-import { M as j } from "../Modal-CXRo8f-h.js";
+import { M as j } from "../Modal-BTOXCb0Y.js";
 import { MultiSelectDropdown as H } from "./MultiSelectDropdown/MultiSelectDropdown.js";
 import { PhoneNumberInput as K } from "./PhoneNumberInput/PhoneNumberInput.js";
 import { PieChart as X } from "./PieChart/PieChart.js";

package/dist/icons.d.ts

@@ -1,2 +1,2 @@
-export { AccountsIcon, AddChartIcon, AlertOutlineIcon, AppRepoIcon, AppsIcon, ArchivesIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, BarChartIcon, BookOpenIcon, CalendarMonthIcon, CheckboxMarkedCircleOutlineIcon, CheckCircleFilledIcon, CheckCircleOutlineIcon, CheckIcon, ClockAlertIcon, ClockOutlineIcon, CloseIcon, CloudIcon, CloudLockOutlineIcon, ClustersIcon, CogOutlineIcon, CopyIcon, CpuIcon, CubeIcon, DatacenterIcon, DeleteIcon, DollarSignIcon, DownloadIcon, EditIcon, EllipsesIcon, EnvironmentsIcon, ErrorIcon, ErrorOutlineIcon, ExclamationIcon, GitIcon, GitOpsCatalogIcon, GridViewIcon, HelpIcon, HideOutlineIcon, HomeIcon, IdIcon, InfoCircleIcon, InformationOutlineIcon, InvoiceListIcon, KeyIcon, LoaderIcon, LightBulbIcon, NetworkIcon, PagesStackIcon, PageviewIcon, PeopleIcon, PhotoLibraryIcon, PipelineIcon, PlusIcon, PowerSettingsIcon, PreviewIcon, ReceiptLongIcon, RefreshIcon, ScatterPlotIcon, SearchIcon, ServerIcon, StartIcon, TabNewIcon, TeamsIcon, WarningIcon, WarningTriangleIcon, XIcon, } from './assets/icons/components';
+export { AccountsIcon, AddChartIcon, AlertOutlineIcon, AppRepoIcon, AppsIcon, ArchivesIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, BarChartIcon, BookOpenIcon, CalendarMonthIcon, CheckboxMarkedCircleOutlineIcon, CheckCircleFilledIcon, CheckCircleOutlineIcon, CheckIcon, ClockAlertIcon, ClockOutlineIcon, CloseIcon, CloudIcon, CloudLockOutlineIcon, ClustersIcon, CogOutlineIcon, CopyIcon, CpuIcon, CubeIcon, DatacenterIcon, DeleteIcon, DollarSignIcon, DownloadIcon, EditIcon, EllipsesIcon, EnvironmentsIcon, ErrorIcon, ErrorOutlineIcon, ExclamationIcon, GitIcon, GitOpsCatalogIcon, GridViewIcon, HelpIcon, HideOutlineIcon, Home2Icon, HomeIcon, IdIcon, InfoCircleIcon, InformationOutlineIcon, InvoiceListIcon, KeyIcon, LoaderIcon, LightBulbIcon, NetworkIcon, PagesStackIcon, PageviewIcon, PeopleIcon, PhotoLibraryIcon, PipelineIcon, PlusIcon, PowerSettingsIcon, PreviewIcon, ReceiptLongIcon, RefreshIcon, ScatterPlotIcon, SearchIcon, ServerIcon, StartIcon, TabNewIcon, TeamsIcon, UploadIcon, WarningIcon, WarningTriangleIcon, XIcon, } from './assets/icons/components';
 export type { IconProps, IconComponent } from './assets/icons/components';