@amateescu/portal-ui-components 0.0.47 → 0.0.49

package/dist/components/PassportDatesFilter/PassportDatesFilter.js

@@ -1,17 +1,15 @@
-import { jsx as o, jsxs as m, Fragment as R } from "react/jsx-runtime";
+import { jsxs as p, Fragment as R, jsx as t } from "react/jsx-runtime";
 import { PassportDateRangeWrapper as v } from "../PassportDateRangeWrapper/PassportDateRangeWrapper.js";
-import { c as S } from "../../createSvgIcon-D5xeIEZ_.js";
-import { styled as B, ToggleButton as D, ButtonGroup as F, Popover as W, IconButton as k } from "@mui/material";
+import { C as B } from "../../Close-IqnCWZPM.js";
+import { styled as D, ToggleButton as S, ButtonGroup as F, Popover as W, IconButton as k } from "@mui/material";
 import { useState as s, useCallback as n } from "react";
-import '../../assets/PassportDatesFilter.css';const I = S(/* @__PURE__ */ o("path", {
-  d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-}), "Close"), M = B(D)(({ selected: t }) => ({
-  ...t && {
+import '../../assets/PassportDatesFilter.css';const I = D(S)(({ selected: o }) => ({
+  ...o && {
     color: "var(--color-text)",
     backgroundColor: "var(--color-highlight) !important"
   }
-})), g = /* @__PURE__ */ new Date(), w = ({
-  setSelectedDates: t,
+})), g = /* @__PURE__ */ new Date(), q = ({
+  setSelectedDates: o,
   options: i,
   closeIcon: h,
   dateRangeWrapperProps: b
@@ -24,19 +22,19 @@ import '../../assets/PassportDatesFilter.css';const I = S(/* @__PURE__ */ o("pat
       e.isCustom && (l(e), c(r.currentTarget));
     },
     []
-  ), x = !!u, p = n(() => {
-    c(null), t(a);
-  }, [t, a]), T = n(
+  ), x = !!u, m = n(() => {
+    c(null), o(a);
+  }, [o, a]), T = n(
     (r) => {
-      r.isCustom || (l(r), t(r.range));
+      r.isCustom || (l(r), o(r.range));
     },
-    [t]
+    [o]
   );
-  return /* @__PURE__ */ m(R, { children: [
-    /* @__PURE__ */ o(F, { children: i.map((r) => {
+  return /* @__PURE__ */ p(R, { children: [
+    /* @__PURE__ */ t(F, { children: i.map((r) => {
       const e = d.range.businessDayFrom.getTime() === r.range.businessDayFrom.getTime(), y = d.range.businessDayTo.getTime() === r.range.businessDayTo.getTime();
-      return /* @__PURE__ */ o(
-        M,
+      return /* @__PURE__ */ t(
+        I,
         {
           value: r,
           selected: e && y,
@@ -74,27 +72,27 @@ import '../../assets/PassportDatesFilter.css';const I = S(/* @__PURE__ */ o("pat
         r.name
       );
     }) }),
-    /* @__PURE__ */ o(
+    /* @__PURE__ */ t(
       W,
       {
         open: x,
         anchorEl: u,
-        onClose: p,
+        onClose: m,
         anchorOrigin: { vertical: "bottom", horizontal: "left" },
         sx: {
           ".MuiPopover-paper": { borderRadius: "16px", padding: "1px" }
         },
-        children: /* @__PURE__ */ m("div", { className: "passport-daterangewrapper-container", children: [
-          /* @__PURE__ */ o(
+        children: /* @__PURE__ */ p("div", { className: "passport-daterangewrapper-container", children: [
+          /* @__PURE__ */ t(
             k,
             {
               className: "passport-daterangewrapper-close",
-              onClick: p,
+              onClick: m,
               size: "small",
-              children: h ?? /* @__PURE__ */ o(I, { fontSize: "small" })
+              children: h ?? /* @__PURE__ */ t(B, { fontSize: "small" })
             }
           ),
-          /* @__PURE__ */ o(
+          /* @__PURE__ */ t(
             v,
             {
               value: a,
@@ -108,5 +106,5 @@ import '../../assets/PassportDatesFilter.css';const I = S(/* @__PURE__ */ o("pat
   ] });
 };
 export {
-  w as PassportDatesFilter
+  q as PassportDatesFilter
 };

package/dist/components/PassportFilter/PassportFilter.d.ts

@@ -0,0 +1,5 @@
+import { PassportFilterProps } from './PassportFilter.types';
+import { default as React } from 'react';
+export declare const PassportFilter: React.FC<PassportFilterProps>;
+export default PassportFilter;
+//# sourceMappingURL=PassportFilter.d.ts.map

package/dist/components/PassportFilter/PassportFilter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PassportFilter.d.ts","sourceRoot":"","sources":["../../../src/components/PassportFilter/PassportFilter.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,mBAAmB,EAAuB,MAAM,wBAAwB,CAAC;AAM9F,OAAO,KAA+D,MAAM,OAAO,CAAC;AAqDpF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA6IvD,CAAC;AAEH,eAAe,cAAc,CAAC"}

package/dist/components/PassportFilter/PassportFilter.js

@@ -0,0 +1,154 @@
+import { jsx as n, jsxs as y } from "react/jsx-runtime";
+import D from "./PassportFilterDrawer/PassportFilterDrawer.js";
+import N from "./PassportFilterFreeTextFilter/PassportFilterFreeTextFilter.js";
+import { PassportButton as j } from "../PassportButton/PassportButton.js";
+import { c as w } from "../../createSvgIcon-Crk7qT6j.js";
+import { C as z } from "../../Clear-B32X2R1T.js";
+import { S as H } from "../../Search-DnJ3yLMg.js";
+import { TextField as M, InputAdornment as b } from "@mui/material";
+import { forwardRef as U, useRef as V, useEffect as I, useState as f, useCallback as a } from "react";
+import '../../assets/PassportFilter.css';const W = w(/* @__PURE__ */ n("path", {
+  d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z"
+}), "Add"), Y = "_filterContainer_1m4k6_1", q = "_filterCategories_1m4k6_13", T = {
+  filterContainer: Y,
+  filterCategories: q
+};
+function G() {
+  const [m, d] = f([]), [u, l] = f([]), k = a((t) => {
+    d((r) => [...r, t]);
+  }, []), s = a((t) => {
+    d((r) => r.filter((e) => e.field !== t));
+  }, []), i = a((t, r) => {
+    d(
+      (e) => e.map((c) => c.field === t ? { ...c, value: r } : c)
+    );
+  }, []), h = a((t, r) => {
+    l(
+      (e) => e.map((c) => c.field === t ? { ...c, value: r } : c)
+    );
+  }, []), v = a((t) => {
+    l(
+      (r) => r.map((e) => e.field === t ? { ...e, checked: !0 } : e)
+    );
+  }, []), S = a((t) => {
+    l(
+      (r) => r.map((e) => e.field === t ? { ...e, checked: !1 } : e)
+    );
+  }, []);
+  return {
+    freeTextFilters: m,
+    addFreeTextFilter: k,
+    removeFreeTextFilter: s,
+    updateFreeTextFilter: i,
+    relevantFreeSearch: u,
+    setRelevantFreeSearch: l,
+    updateRelevantFreeSearch: h,
+    checkRelevantFreeSearch: v,
+    uncheckRelevantFreeSearch: S
+  };
+}
+const re = U(({
+  hasSearchInput: m,
+  onSearchTrigger: d,
+  clearSearchValue: u,
+  hasFilters: l = !1,
+  isRtl: k = !1,
+  filterFreeSearch: s,
+  filterCategories: i,
+  setFilterCategories: h,
+  setFilterFreeSearch: v,
+  searchPlaceholder: S = "Search",
+  addFilterLabel: t = "Add Filter",
+  filterDrawerProps: r,
+  freeTextFilterProps: e
+}, c) => {
+  const o = G(), F = V(null), A = 500;
+  I(() => {
+    R({
+      filterCategories: i,
+      filterFreeSearch: s
+    });
+  }, [i, s]), I(() => () => {
+    F.current && clearTimeout(F.current);
+  }, []);
+  const [_, R] = f({}), [L, x] = f(!1), g = a((p) => {
+    p && (h(p.filterCategories ?? []), v(p.filterFreeSearch ?? []), R(p)), x(!1);
+  }, [h, v]), C = a(() => {
+    d && d();
+  }, [d]), B = a(() => {
+    F.current && clearTimeout(F.current), F.current = setTimeout(() => {
+      C();
+    }, A);
+  }, [C]), E = a(() => {
+    u && u();
+  }, [u]), O = a(() => {
+    x(!0);
+  }, []);
+  return /* @__PURE__ */ y("div", { className: T.filterContainer, children: [
+    m && /* @__PURE__ */ n(
+      M,
+      {
+        size: "small",
+        fullWidth: !0,
+        variant: "outlined",
+        inputRef: c,
+        onChange: B,
+        placeholder: S,
+        sx: {
+          width: "30%",
+          borderRadius: "8px",
+          border: "1px solid var(--color-gray)",
+          bgcolor: "var(--color-background)",
+          "& fieldset": { border: "none" },
+          marginRight: k ? "10px" : "0px"
+        },
+        slotProps: {
+          input: {
+            startAdornment: /* @__PURE__ */ n(b, { position: "start", children: /* @__PURE__ */ n(H, {}) }),
+            endAdornment: /* @__PURE__ */ n(
+              b,
+              {
+                sx: { cursor: "pointer" },
+                position: "end",
+                onClick: E,
+                children: /* @__PURE__ */ n(z, {})
+              }
+            )
+          }
+        }
+      }
+    ),
+    l && /* @__PURE__ */ n(D, { isOpen: L, onClose: g, reportFilterOptions: _, ...r }),
+    l && s ? /* @__PURE__ */ n(
+      N,
+      {
+        freeTextFilters: e?.freeTextFilters ?? o.freeTextFilters,
+        addFreeTextFilter: e?.addFreeTextFilter ?? o.addFreeTextFilter,
+        removeFreeTextFilter: e?.removeFreeTextFilter ?? o.removeFreeTextFilter,
+        updateFreeTextFilter: e?.updateFreeTextFilter ?? o.updateFreeTextFilter,
+        relevantFreeSearch: e?.relevantFreeSearch ?? o.relevantFreeSearch,
+        setRelevantFreeSearch: e?.setRelevantFreeSearch ?? o.setRelevantFreeSearch,
+        updateRelevantFreeSearch: e?.updateRelevantFreeSearch ?? o.updateRelevantFreeSearch,
+        checkRelevantFreeSearch: e?.checkRelevantFreeSearch ?? o.checkRelevantFreeSearch,
+        uncheckRelevantFreeSearch: e?.uncheckRelevantFreeSearch ?? o.uncheckRelevantFreeSearch,
+        filterFreeSearch: s,
+        setFilterFreeSearch: v,
+        dropdownValues: e?.dropdownValues,
+        searchPlaceholder: e?.searchPlaceholder,
+        cancelLabel: e?.cancelLabel,
+        applyLabel: e?.applyLabel,
+        checkedIcon: e?.checkedIcon,
+        uncheckedIcon: e?.uncheckedIcon,
+        freeTextButtonsProps: e?.freeTextButtonsProps ?? {
+          filterCategories: i,
+          setFilterCategories: h
+        }
+      }
+    ) : null,
+    l && i && /* @__PURE__ */ n("div", { className: T.filterCategories, children: /* @__PURE__ */ n(j, { content: t, onClick: O, startIcon: /* @__PURE__ */ n(W, {}) }) })
+  ] });
+});
+export {
+  re as PassportFilter,
+  re as default
+};

package/dist/components/PassportFilter/PassportFilter.stories.d.ts

@@ -0,0 +1,13 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const WithSearchInput: Story;
+export declare const WithFiltersAndFreeText: Story;
+//# sourceMappingURL=PassportFilter.stories.d.ts.map

package/dist/components/PassportFilter/PassportFilter.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PassportFilter.stories.d.ts","sourceRoot":"","sources":["../../../src/components/PassportFilter/PassportFilter.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAuGvD,QAAA,MAAM,IAAI;;;;;;CAMM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,eAAe,EAAE,KAE7B,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAEpC,CAAC"}

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

@@ -0,0 +1,61 @@
+import { PassportFilterDrawerProps } from './PassportFilterDrawer/PassportFilterDrawer.types';
+import { PassportFilterFreeTextFilterProps } from './PassportFilterFreeTextFilter/PassportFilterFreeTextFilter.types';
+export interface ReportFilterOptions {
+    filterCategories?: SelectionCategory[];
+    filterFreeSearch?: FreeSearch[];
+}
+export interface SelectionCategory {
+    categoryName: string;
+    singleSelection?: boolean;
+    options: SelectionOption[];
+}
+export interface SelectionOption {
+    text: string;
+    value: string;
+    selected: boolean;
+    translatable: boolean;
+}
+export interface FreeSearch {
+    field: string;
+    value: string;
+    inputType: SearchInputType;
+    selectionType: SelectionType;
+    minLength: number;
+    maxLength: number;
+    checked?: boolean;
+}
+export declare enum SearchInputType {
+    all = "all",
+    numeric = "numeric",
+    string = "string"
+}
+export declare enum SelectionType {
+    dropdown = "dropdown",
+    input = "input"
+}
+export interface PassportFilterProps {
+    hasSearchInput: boolean;
+    onSearchTrigger?: () => void;
+    clearSearchValue?: () => void;
+    hasFilters?: boolean;
+    ref?: React.Ref<HTMLInputElement>;
+    /** Whether text direction is right-to-left */
+    isRtl?: boolean;
+    /** Current filter free search items */
+    filterFreeSearch: FreeSearch[];
+    /** Current filter categories */
+    filterCategories: SelectionCategory[];
+    /** Callback to update filter categories */
+    setFilterCategories: (value: SelectionCategory[]) => void;
+    /** Callback to update filter free search */
+    setFilterFreeSearch: (value: FreeSearch[]) => void;
+    /** Search placeholder text */
+    searchPlaceholder?: string;
+    /** Add filter button label */
+    addFilterLabel?: string;
+    /** Props forwarded to PassportFilterDrawer */
+    filterDrawerProps?: Partial<PassportFilterDrawerProps>;
+    /** Props forwarded to PassportFilterFreeTextFilter (state + callbacks for free text filter management) */
+    freeTextFilterProps?: Partial<Omit<PassportFilterFreeTextFilterProps, 'filterFreeSearch' | 'setFilterFreeSearch'>>;
+}
+//# sourceMappingURL=PassportFilter.types.d.ts.map

package/dist/components/PassportFilter/PassportFilter.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PassportFilter.types.d.ts","sourceRoot":"","sources":["../../../src/components/PassportFilter/PassportFilter.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mDAAmD,CAAC;AACnG,OAAO,KAAK,EAAE,iCAAiC,EAAE,MAAM,mEAAmE,CAAC;AAE3H,MAAM,WAAW,mBAAmB;IAClC,gBAAgB,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACvC,gBAAgB,CAAC,EAAE,UAAU,EAAE,CAAC;CACjC;AAED,MAAM,WAAW,iBAAiB;IAChC,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,EAAE,eAAe,EAAE,CAAC;CAC5B;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,eAAe,CAAC;IAC3B,aAAa,EAAE,aAAa,CAAC;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,oBAAY,eAAe;IACzB,GAAG,QAAQ;IACX,OAAO,YAAY;IACnB,MAAM,WAAW;CAClB;AAED,oBAAY,aAAa;IACvB,QAAQ,aAAa;IACrB,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,mBAAmB;IAClC,cAAc,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC,8CAA8C;IAC9C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,uCAAuC;IACvC,gBAAgB,EAAE,UAAU,EAAE,CAAC;IAC/B,gCAAgC;IAChC,gBAAgB,EAAE,iBAAiB,EAAE,CAAC;IACtC,2CAA2C;IAC3C,mBAAmB,EAAE,CAAC,KAAK,EAAE,iBAAiB,EAAE,KAAK,IAAI,CAAC;IAC1D,4CAA4C;IAC5C,mBAAmB,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IACnD,8BAA8B;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,8BAA8B;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8CAA8C;IAC9C,iBAAiB,CAAC,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAC;IACvD,0GAA0G;IAC1G,mBAAmB,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,iCAAiC,EAAE,kBAAkB,GAAG,qBAAqB,CAAC,CAAC,CAAC;CACpH"}

package/dist/components/PassportFilter/PassportFilter.types.js

@@ -0,0 +1,5 @@
+var n = /* @__PURE__ */ ((r) => (r.all = "all", r.numeric = "numeric", r.string = "string", r))(n || {}), i = /* @__PURE__ */ ((r) => (r.dropdown = "dropdown", r.input = "input", r))(i || {});
+export {
+  n as SearchInputType,
+  i as SelectionType
+};

package/dist/components/PassportFilter/PassportFilterDrawer/PassportFilterDrawer.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { PassportFilterDrawerProps } from './PassportFilterDrawer.types';
+declare const PassportFilterDrawer: React.FC<PassportFilterDrawerProps>;
+export default PassportFilterDrawer;
+//# sourceMappingURL=PassportFilterDrawer.d.ts.map

package/dist/components/PassportFilter/PassportFilterDrawer/PassportFilterDrawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PassportFilterDrawer.d.ts","sourceRoot":"","sources":["../../../../src/components/PassportFilter/PassportFilterDrawer/PassportFilterDrawer.tsx"],"names":[],"mappings":"AASA,OAAO,KAAoF,MAAM,OAAO,CAAC;AAEzG,OAAO,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AAqEzE,QAAA,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAsF7D,CAAC;AAEF,eAAe,oBAAoB,CAAC"}