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

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

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

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

@@ -1,14 +1,13 @@
-import { ButtonProps } from '../../../Button/Button.types';
-import { MultiSelectFilter } from '../../VirtualizedTable.types';
+import { ActionFilterConfig, FilterConfig, MultiSelectFilter } from '../../VirtualizedTable.types';
 export type { Option } from '../../../Filter/Filter.types';
-export type FilterAction = {
-    label: string;
-    onClick: () => void;
-    variant?: ButtonProps['variant'];
-};
+/** @deprecated Use `ActionFilterConfig` with `type: 'action'` in the `filters` array instead */
+export type FilterAction = ActionFilterConfig;
 export type Props = {
-    actions?: FilterAction[];
+    filters?: FilterConfig[];
+    /** @deprecated Use `filters` instead */
     multiSelectFilter?: MultiSelectFilter[];
+    /** @deprecated Use `ActionFilterConfig` items in `filters` instead */
+    actions?: FilterAction[];
     placeholder: string;
     showFilterInput?: boolean;
     showResetButton?: boolean;

package/dist/components/VirtualizedTable/components/TruncateText/TruncateText.js

@@ -1,5 +1,5 @@
 import { jsx as r, jsxs as d } from "react/jsx-runtime";
-import { P as u, R as b, T as m, C as p } from "../../../../index-DPcwqB8q.js";
+import { P as u, R as b, T as m, C as p } from "../../../../index-B7-5g1Sm.js";
 import { d as h } from "../../../../debounce-DJveWHr_.js";
 import { useRef as x, useState as w, useCallback as g, useEffect as s } from "react";
 const v = ({ getValue: l, value: i }) => {

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

@@ -11,6 +11,12 @@ 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>;
+    timeFilters?: Record<string, string | undefined>;
     totalPages: number;
     isFirstLoad: boolean;
     enableExpandedRow?: boolean;
@@ -28,5 +34,11 @@ 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;
+    onSelectTimeFilter: (key: string, time?: Date) => void;
 };
 export declare const TableContext: import('react').Context<ContextType<unknown>>;

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

@@ -20,6 +20,15 @@ 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");
+  },
+  onSelectTimeFilter() {
+    throw new Error("onSelectTimeFilter function is not implemented");
+  },
   handlePage() {
     throw new Error("handlePage function is not implemented");
   },