@konstructio/ui 0.1.2-alpha.70 → 0.1.2-alpha.71

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

@@ -1,90 +1,142 @@
-import { jsxs as m, jsx as a } from "react/jsx-runtime";
-import { d as R } from "../../../../debounce-DJveWHr_.js";
-import { useRef as v, useCallback as u, useMemo as p } from "react";
-import { Button as y } from "../../../Button/Button.js";
-import { Filter as l } from "../../../Filter/Filter.js";
-import { Input as B } from "../../../Input/Input.js";
-import { cn as N } from "../../../../utils/index.js";
-import { useTableContext as T } from "../../contexts/table.hook.js";
-const E = ({
-  actions: f,
-  multiSelectFilter: h,
-  placeholder: d,
-  showFilterInput: g = !0,
-  showResetButton: C = !0,
-  resetButtonClassName: S
+import { jsxs as D, jsx as n } from "react/jsx-runtime";
+import { d as N } from "../../../../debounce-DJveWHr_.js";
+import { useRef as P, useMemo as m, useCallback as S } from "react";
+import { Button as I } from "../../../Button/Button.js";
+import { Filter as r } from "../../../Filter/Filter.js";
+import { Input as $ } from "../../../Input/Input.js";
+import { cn as q } from "../../../../utils/index.js";
+import { useTableContext as z } from "../../contexts/table.hook.js";
+const U = ({
+  actions: b,
+  filters: u,
+  multiSelectFilter: p,
+  placeholder: x,
+  showFilterInput: w = !0,
+  showResetButton: M = !0,
+  resetButtonClassName: v
 }) => {
-  const o = v(null), {
-    termOfSearch: s,
-    multiselectSelected: c,
-    onChangeTermOfSearch: n,
-    onSelectMultiselect: i
-  } = T(), x = u(
-    (e, t) => i(
+  const c = P(null), {
+    termOfSearch: d,
+    multiselectSelected: i,
+    dateFilters: h,
+    dateRangeFilters: y,
+    onChangeTermOfSearch: s,
+    onSelectMultiselect: F,
+    onSelectDateFilter: j,
+    onSelectDateRangeFilter: O
+  } = z(), T = m(
+    () => u ?? p?.map((e) => ({
+      ...e,
+      type: "badgeMultiSelect"
+    })) ?? [],
+    [u, p]
+  ), R = S(
+    (e, t) => F(
       e,
-      t.map((r) => r.id)
+      t.map((a) => a.id)
     ),
-    [i]
-  ), F = u(() => {
-    n(""), o.current && (o.current.value = "");
-  }, [n]), M = p(
-    () => R((e) => {
-      n(e.target.value);
+    [F]
+  ), g = S(() => {
+    s(""), c.current && (c.current.value = "");
+  }, [s]), B = m(
+    () => N((e) => {
+      s(e.target.value);
     }, 500),
-    [n]
-  ), b = p(
-    () => !!s || Object.entries(c ?? {}).map(([, e]) => e).flat().length > 0,
-    [s, c]
-  );
-  return /* @__PURE__ */ m("div", { className: "w-full flex items-center justify-end pb-6", children: [
-    g && /* @__PURE__ */ a(
-      B,
+    [s]
+  ), A = m(
+    () => !!d || Object.values(i ?? {}).flat().length > 0 || Object.values(h ?? {}).some(Boolean) || Object.values(y ?? {}).some(Boolean),
+    [d, i, h, y]
+  ), k = (e) => {
+    const { key: t, label: a, position: l = "right" } = e;
+    return e.type === "textMultiSelect" ? /* @__PURE__ */ n(
+      r.TextMultiSelect,
       {
-        ref: o,
-        placeholder: d,
+        label: a,
+        position: l,
+        options: e.options,
+        onApply: (o) => {
+          R(t, o);
+        }
+      },
+      t
+    ) : e.type === "date" ? /* @__PURE__ */ n(
+      r.DateFilterDropdown,
+      {
+        label: a,
+        position: l,
+        countryCode: e.countryCode,
+        onApply: (o) => {
+          j(t, o);
+        }
+      },
+      t
+    ) : e.type === "dateRange" ? /* @__PURE__ */ n(
+      r.DateRangeFilterDropdown,
+      {
+        label: a,
+        position: l,
+        showTime: e.showTime,
+        timeFormat: e.timeFormat,
+        showPresets: e.showPresets,
+        defaultRange: e.defaultRange,
+        minDate: e.minDate,
+        maxDate: e.maxDate,
+        countryCode: e.countryCode,
+        onApply: (o) => {
+          O(t, o);
+        },
+        onRangeChange: e.onRangeChange
+      },
+      t
+    ) : /* @__PURE__ */ n(
+      r.BadgeMultiSelect,
+      {
+        label: a,
+        position: l,
+        options: e.options,
+        onApply: (o) => {
+          R(t, o);
+        }
+      },
+      t
+    );
+  };
+  return /* @__PURE__ */ D("div", { className: "w-full flex items-center justify-end pb-6", children: [
+    w && /* @__PURE__ */ n(
+      $,
+      {
+        ref: c,
+        placeholder: x,
         isSearch: !0,
         autoComplete: "false",
         className: "w-72",
         inputMode: "search",
-        onChange: M
+        onChange: B
       }
     ),
-    /* @__PURE__ */ m(l, { children: [
-      h?.map(
-        ({ key: e, label: t, position: r = "right", options: j }) => /* @__PURE__ */ a(
-          l.BadgeMultiSelect,
-          {
-            label: t,
-            position: r,
-            options: j,
-            onApply: (O) => {
-              x(e, O);
-            }
-          },
-          t
-        )
-      ),
-      f?.map(({ label: e, onClick: t, variant: r = "secondary" }) => /* @__PURE__ */ a(
-        y,
+    /* @__PURE__ */ D(r, { children: [
+      T.map(k),
+      b?.map(({ label: e, onClick: t, variant: a = "secondary" }) => /* @__PURE__ */ n(
+        I,
         {
-          variant: r,
+          variant: a,
           appearance: "compact",
           onClick: t,
           children: e
         },
         e
       )),
-      C && /* @__PURE__ */ a(
-        l.ResetButton,
+      M && /* @__PURE__ */ n(
+        r.ResetButton,
         {
-          className: N("select-none", S),
-          disabled: !b,
-          onClick: F
+          className: q("select-none", v),
+          disabled: !A,
+          onClick: g
         }
       )
     ] })
   ] });
 };
 export {
-  E as Filter
+  U as Filter
 };

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

@@ -1,5 +1,5 @@
 import { ButtonProps } from '../../../Button/Button.types';
-import { MultiSelectFilter } from '../../VirtualizedTable.types';
+import { FilterConfig, MultiSelectFilter } from '../../VirtualizedTable.types';
 export type { Option } from '../../../Filter/Filter.types';
 export type FilterAction = {
     label: string;
@@ -8,6 +8,8 @@ export type FilterAction = {
 };
 export type Props = {
     actions?: FilterAction[];
+    filters?: FilterConfig[];
+    /** @deprecated Use `filters` instead */
     multiSelectFilter?: MultiSelectFilter[];
     placeholder: string;
     showFilterInput?: boolean;

package/dist/components/VirtualizedTable/contexts/table.context.d.ts

@@ -11,6 +11,11 @@ export type ContextType<TData extends RowData = RowData> = {
     termOfSearch?: string;
     page: number;
     multiselectSelected?: Record<string, string[]>;
+    dateFilters?: Record<string, string | undefined>;
+    dateRangeFilters?: Record<string, {
+        from?: string;
+        to?: string;
+    } | undefined>;
     totalPages: number;
     isFirstLoad: boolean;
     enableExpandedRow?: boolean;
@@ -28,5 +33,10 @@ export type ContextType<TData extends RowData = RowData> = {
     onSorting: Dispatch<SetStateAction<SortingState>>;
     onChangeTermOfSearch: (term: string) => void;
     onSelectMultiselect: (key: string, selectedValues: string[]) => void;
+    onSelectDateFilter: (key: string, date?: Date) => void;
+    onSelectDateRangeFilter: (key: string, range?: {
+        from?: Date;
+        to?: Date;
+    }) => void;
 };
 export declare const TableContext: import('react').Context<ContextType<unknown>>;

package/dist/components/VirtualizedTable/contexts/table.context.js

@@ -20,6 +20,12 @@ const r = e({
   onSelectMultiselect() {
     throw new Error("onSelectMultiselect function is not implemented");
   },
+  onSelectDateFilter() {
+    throw new Error("onSelectDateFilter function is not implemented");
+  },
+  onSelectDateRangeFilter() {
+    throw new Error("onSelectDateRangeFilter function is not implemented");
+  },
   handlePage() {
     throw new Error("handlePage function is not implemented");
   },