1mpacto-react-ui 2.0.20 → 2.0.22

package/dist/components/SelectDropdownContainer/SelectDropdownContainer.mjs

@@ -1,150 +1,146 @@
-import { jsxs as ee, jsx as S } from "react/jsx-runtime";
-import t from "react";
-import te from "react-select";
-import oe from "../Popover/Popover.mjs";
-import ne from "./SelectDropdownContainer.module.scss.mjs";
-import { useDeepCompareEffect as re, useDeepCompareMemoize as ae } from "../../hooks/useDeepCompareEffect.mjs";
-import { configSelectDropdownContainer as p } from "./SelectDropdownContainer.config.mjs";
-const se = t.forwardRef(
-  (C, R) => {
+import { jsxs as _, jsx as w } from "react/jsx-runtime";
+import e from "react";
+import ee from "react-select";
+import te from "../Popover/Popover.mjs";
+import oe from "./SelectDropdownContainer.module.scss.mjs";
+import { useDeepCompareEffect as ne, useDeepCompareMemoize as re } from "../../hooks/useDeepCompareEffect.mjs";
+import { configSelectDropdownContainer as f } from "./SelectDropdownContainer.config.mjs";
+const ae = e.forwardRef(
+  (S, O) => {
     const {
-      width: d,
-      children: g,
-      components: I,
-      classNameContainer: E = "",
-      classNameContainerShowSelect: $ = "",
-      classNameContainerSelect: D = "",
-      classNameLabelError: x = "",
-      error: z,
-      onChange: v,
+      width: p,
+      children: R,
+      components: g,
+      classNameContainer: I = "",
+      classNameContainerShowSelect: E = "",
+      classNameContainerSelect: $ = "",
+      classNameLabelError: D = "",
+      error: x,
+      onChange: C,
       externalValue: l = !1,
-      defaultValueButtonDropdown: r = {},
-      autoClose: L = !0,
-      onMenuOpen: M = () => {
+      defaultValueButtonDropdown: n = {},
+      autoClose: z = !0,
+      onMenuOpen: L = () => {
       },
-      autoCloseOutside: b = !0,
-      styleInnerPopper: W = {},
-      onMenuClose: j = () => {
+      autoCloseOutside: M = !0,
+      styleInnerPopper: b = {},
+      onMenuClose: W = () => {
       },
-      zIndexPopper: k = 0,
-      id: F = "select-dropdown-container",
-      idPopover: T = "select-dropdown-container-popover",
-      useAutoPlacement: A,
-      flipOptions: B,
-      autoPlacementOptions: H,
-      withSearch: q = !1,
-      floatingOptions: G = {},
-      offsetPopover: J = 5,
-      selectProps: K = {},
-      errorLabel: Q = "payhere",
-      controlType: h = "payhere",
-      actionValueChange: U = () => {
+      zIndexPopper: j = 0,
+      id: k = "select-dropdown-container",
+      idPopover: F = "select-dropdown-container-popover",
+      useAutoPlacement: T,
+      flipOptions: A,
+      autoPlacementOptions: B,
+      withSearch: H = !1,
+      floatingOptions: q = {},
+      offsetPopover: G = 5,
+      selectProps: J = {},
+      errorLabel: K = "payhere",
+      controlType: d = "payhere",
+      actionValueChange: Q = () => {
       },
-      ...X
-    } = C, a = t.useRef(null), s = t.useRef(null), [Y, P] = t.useState(""), [n, m] = t.useState(!1), [i, c] = t.useState({}), [V, y] = t.useState(0), w = (e) => {
-      var o;
-      (o = s.current) == null || o.setShow(e), m(e);
-    }, Z = () => {
+      ...U
+    } = S, r = e.useRef(null), a = e.useRef(null), [X, v] = e.useState(""), [o, h] = e.useState(!1), [i, c] = e.useState({}), [P, V] = e.useState(0), m = (t) => {
+      a.current?.setShow(t), h(t);
+    }, Y = () => {
       if (l)
-        return C.isMulti ? r : [r];
-    }, N = (e) => {
-      var o;
-      (o = s.current) == null || o.handlerShow(e), y(a.current.offsetWidth), m((f) => !f);
-    }, O = () => {
-      var e;
-      b && ((e = s.current) == null || e.setShow(!1));
-    }, _ = (e, o) => {
-      var f;
-      L && (m(!1), (f = s.current) == null || f.setShow(!1)), typeof v == "function" && v(e, o), l || c(e);
+        return S.isMulti ? n : [n];
+    }, y = (t) => {
+      a.current?.handlerShow(t), V(r.current.offsetWidth), h((s) => !s);
+    }, N = () => {
+      M && a.current?.setShow(!1);
+    }, Z = (t, s) => {
+      z && (h(!1), a.current?.setShow(!1)), typeof C == "function" && C(t, s), l || c(t);
     }, u = () => {
-      a.current && y(a.current.offsetWidth);
+      r.current && V(r.current.offsetWidth);
     };
-    return re(() => {
-      l && c(r), U(r);
-    }, [l, r]), t.useEffect(() => {
-      n ? M() : n || (j(), P(""));
-    }, [n]), t.useImperativeHandle(
-      R,
+    return ne(() => {
+      l && c(n), Q(n);
+    }, [l, n]), e.useEffect(() => {
+      o ? L() : o || (W(), v(""));
+    }, [o]), e.useImperativeHandle(
+      O,
       () => ({
         selectValue: i,
         setSelectValue: c,
-        handlerClose: O,
-        handlerShow: N,
-        show: n,
-        setShow: w
+        handlerClose: N,
+        handlerShow: y,
+        show: o,
+        setShow: m
       }),
-      [n, ae(i)]
-    ), t.useEffect(() => (window.addEventListener("resize", u), window.addEventListener("load", u), () => {
+      [o, re(i)]
+    ), e.useEffect(() => (window.addEventListener("resize", u), window.addEventListener("load", u), () => {
       window.removeEventListener("resize", u), window.removeEventListener("load", u);
-    }), [a]), /* @__PURE__ */ ee(
+    }), [r]), /* @__PURE__ */ _(
       "div",
       {
-        id: F,
-        className: `${ne.container} ${E} ${n ? `${$} open-popover` : null}`,
-        ref: a,
+        id: k,
+        className: `${oe.container} ${I} ${o ? `${E} open-popover` : null}`,
+        ref: r,
         children: [
-          g({
+          R({
             selectValue: i,
             setSelectValue: c,
-            handlerClose: O,
-            handlerShow: N,
-            show: n,
-            setShow: w
+            handlerClose: N,
+            handlerShow: y,
+            show: o,
+            setShow: m
           }),
-          /* @__PURE__ */ S(
-            oe,
+          /* @__PURE__ */ w(
+            te,
             {
-              ref: s,
-              offset: J,
-              useAutoPlacement: A,
-              flipOptions: B,
-              autoPlacementOptions: H,
-              zIndex: k,
-              styleInnerPopover: W,
-              id: T,
-              width: typeof d == "function" ? d(V, i) : d || V,
-              className: `${D} ${p.classNamePopover[h]}`,
-              floatingOptions: G,
-              children: /* @__PURE__ */ S(
-                te,
+              ref: a,
+              offset: G,
+              useAutoPlacement: T,
+              flipOptions: A,
+              autoPlacementOptions: B,
+              zIndex: j,
+              styleInnerPopover: b,
+              id: F,
+              width: typeof p == "function" ? p(P, i) : p || P,
+              className: `${$} ${f.classNamePopover[d]}`,
+              floatingOptions: q,
+              children: /* @__PURE__ */ w(
+                ee,
                 {
                   className: "iru-w-full",
-                  defaultValue: Z(),
-                  inputValue: Y,
-                  onInputChange: (e, { action: o }) => {
-                    o === "input-change" && P(e);
+                  defaultValue: Y(),
+                  inputValue: X,
+                  onInputChange: (t, { action: s }) => {
+                    s === "input-change" && v(t);
                   },
                   openMenuOnFocus: !0,
                   autoFocus: !1,
                   backspaceRemovesValue: !1,
                   components: {
                     IndicatorSeparator: null,
-                    ...I
+                    ...g
                   },
                   controlShouldRenderValue: !1,
                   hideSelectedOptions: !1,
                   isClearable: !1,
                   menuIsOpen: !0,
                   tabSelectsValue: !1,
-                  styles: q ? p.variant[h] : p.noSearchVariant[h],
+                  styles: H ? f.variant[d] : f.noSearchVariant[d],
                   noOptionsMessage: () => "Tidak ada data.",
-                  onChange: _,
+                  onChange: Z,
                   selectProps: {
-                    ...K,
-                    setShowDropdown: w
+                    ...J,
+                    setShowDropdown: m
                   },
-                  ...X
+                  ...U
                 }
               )
             }
           ),
-          /* @__PURE__ */ S("div", { className: `${p.error[Q]} ${x}`, children: z })
+          /* @__PURE__ */ w("div", { className: `${f.error[K]} ${D}`, children: x })
         ]
       }
     );
   }
 );
-se.displayName = "SelectDropdownContainer";
+ae.displayName = "SelectDropdownContainer";
 export {
-  se as default
+  ae as default
 };

package/dist/components/Sidebar/ItemSidebar.cjs

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),o=require("react"),s=require("./itemSidebar.module.scss.cjs"),r=require("./ItemSidebar.config.cjs"),H=({as:I,show:h,open:t,patch:j,iconSubs:d,variant:c="payhere-brand-base-white",setShow:f,onClickItems:x,propsLink:g,...e})=>{var p,E,M,O,A,V,q,F;let b=i.jsx(i.Fragment,{});const N=I??"div",[y,a]=o.useState(!1),l=j===e.slug,$=h.split("/"),n=$.includes(e.name),S=()=>{if(e.subs.length>0)if(n){const m=$.splice(0,$.indexOf(e.name));m.length>0?f(`${m.join("/")}/`):f("")}else f(`${h}${e.name}/`);else typeof x=="function"&&x(e)};return e.isShow?([1,3,5,6,7,8].includes(e.parent)&&(b=i.jsxs(i.Fragment,{children:[i.jsxs(N,{id:e.name,className:`${s.default["item-sidebar-1"]}
-          ${(p=r.configItemSidebar.variant)==null?void 0:p[c]} ${(E=r.configItemSidebar.parent)==null?void 0:E[e.parent.toString()]} 
-          ${l||e.subs.length>0&&n?s.default.active:""} ${typeof t=="boolean"&&t?s.default["item-sidebar-open"]:""} ${typeof t=="boolean"&&!t?s.default["item-sidebar-close"]:""}
-        `,onClick:S,onMouseOver:()=>a(!0),onMouseOut:()=>a(!1),...g?g(e.slug,e):{},children:[i.jsxs("div",{className:"iru-flex iru-items-center iru-gap-3 iru-relative",children:[o.isValidElement(e.svgIcon)&&i.jsx("div",{className:s.default["item-icon"],children:l||e.subs.length>0&&n?e==null?void 0:e.svgIconActive:y?(e==null?void 0:e.svgIconHover)||(e==null?void 0:e.svgIconActive):e==null?void 0:e.svgIcon}),i.jsx("div",{className:s.default["item-label"],children:e.label})]}),o.isValidElement(e.endIcon)&&i.jsx("div",{className:s.default["end-icon"],children:e==null?void 0:e.endIcon}),e.subs.length>0&&t&&i.jsxs("div",{className:`${s.default["item-icon-subs"]} ${n?s.default["item-icon-subs-active"]:""}`,id:`item-sidebar-subs-${e.name}-icon`,children:[o.isValidElement(d)&&d,typeof d=="function"&&d()]})]}),e.parent===3&&!e.subs.length&&i.jsx("div",{className:(M=r.configItemSidebar.divider)==null?void 0:M[c]})]})),(e.parent===2||e.parent===4)&&(b=i.jsxs(i.Fragment,{children:[i.jsxs(N,{id:e.name,className:`${s.default["item-sidebar-2"]}
-          ${(O=r.configItemSidebar.variant)==null?void 0:O[c]} ${(A=r.configItemSidebar.parent)==null?void 0:A[e.parent.toString()]} 
-          ${l||e.subs.length>0&&n?s.default.active:""} ${typeof t=="boolean"&&t?s.default["item-sidebar-open"]:""} ${typeof t=="boolean"&&!t?s.default["item-sidebar-close"]:""}
-        `,onClick:S,onMouseOver:()=>a(!0),onMouseOut:()=>a(!1),...g?g(e.slug,e):{},children:[o.isValidElement(e.svgIcon)&&i.jsx("div",{className:s.default["item-icon"],children:l||e.subs.length>0&&n?e==null?void 0:e.svgIconActive:y?(e==null?void 0:e.svgIconHover)||(e==null?void 0:e.svgIconActive):e==null?void 0:e.svgIcon}),i.jsx("div",{className:s.default["item-label"],children:e.label}),e.subs.length>0&&t&&i.jsxs("div",{className:`${s.default["item-icon-subs"]} ${n?s.default["item-icon-subs-active"]:""}`,id:`item-sidebar-subs-${e.name}-icon`,children:[o.isValidElement(d)&&d,typeof d=="function"&&d()]})]}),e.parent===4&&!e.subs.length&&i.jsx("div",{className:(V=r.configItemSidebar.divider)==null?void 0:V[c]})]})),e.subs.length>0?i.jsxs("div",{className:`${t||n?"":"-mt-2"}`,children:[b,i.jsx("div",{id:`item-sidebar-subs-${e.name}-${t&&n?"open":"close"}`,className:`${s.default["item-subs-sidebar"]} 
-          ${(q=r.configItemSidebar.variant)==null?void 0:q[c]} ${!t||!n?s.default.hidden:""}`,children:e.subs.map(m=>o.createElement(H,{...m,as:m.manualRoute?"div":m.subs.length>0?I:e.linkComponent,key:m.name,patch:j,iconSubs:d,show:h,open:t,variant:c,setShow:f}))}),[3,4].includes(e.parent)&&i.jsx("div",{className:(F=r.configItemSidebar.divider)==null?void 0:F[c]})]}):b):i.jsx(i.Fragment,{})};exports.default=H;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),m=require("react"),s=require("./itemSidebar.module.scss.cjs"),r=require("./ItemSidebar.config.cjs"),S=({as:I,show:h,open:t,patch:j,iconSubs:d,variant:c="payhere-brand-base-white",setShow:l,onClickItems:x,propsLink:o,...e})=>{let f=i.jsx(i.Fragment,{});const u=I??"div",[N,g]=m.useState(!1),b=j===e.slug,$=h.split("/"),n=$.includes(e.name),y=()=>{if(e.subs.length>0)if(n){const a=$.splice(0,$.indexOf(e.name));a.length>0?l(`${a.join("/")}/`):l("")}else l(`${h}${e.name}/`);else typeof x=="function"&&x(e)};return e.isShow?([1,3,5,6,7,8].includes(e.parent)&&(f=i.jsxs(i.Fragment,{children:[i.jsxs(u,{id:e.name,className:`${s.default["item-sidebar-1"]}
+          ${r.configItemSidebar.variant?.[c]} ${r.configItemSidebar.parent?.[e.parent.toString()]} 
+          ${b||e.subs.length>0&&n?s.default.active:""} ${typeof t=="boolean"&&t?s.default["item-sidebar-open"]:""} ${typeof t=="boolean"&&!t?s.default["item-sidebar-close"]:""}
+        `,onClick:y,onMouseOver:()=>g(!0),onMouseOut:()=>g(!1),...o?o(e.slug,e):{},children:[i.jsxs("div",{className:"iru-flex iru-items-center iru-gap-3 iru-relative",children:[m.isValidElement(e.svgIcon)&&i.jsx("div",{className:s.default["item-icon"],children:b||e.subs.length>0&&n?e?.svgIconActive:N?e?.svgIconHover||e?.svgIconActive:e?.svgIcon}),i.jsx("div",{className:s.default["item-label"],children:e.label})]}),m.isValidElement(e.endIcon)&&i.jsx("div",{className:s.default["end-icon"],children:e?.endIcon}),e.subs.length>0&&t&&i.jsxs("div",{className:`${s.default["item-icon-subs"]} ${n?s.default["item-icon-subs-active"]:""}`,id:`item-sidebar-subs-${e.name}-icon`,children:[m.isValidElement(d)&&d,typeof d=="function"&&d()]})]}),e.parent===3&&!e.subs.length&&i.jsx("div",{className:r.configItemSidebar.divider?.[c]})]})),(e.parent===2||e.parent===4)&&(f=i.jsxs(i.Fragment,{children:[i.jsxs(u,{id:e.name,className:`${s.default["item-sidebar-2"]}
+          ${r.configItemSidebar.variant?.[c]} ${r.configItemSidebar.parent?.[e.parent.toString()]} 
+          ${b||e.subs.length>0&&n?s.default.active:""} ${typeof t=="boolean"&&t?s.default["item-sidebar-open"]:""} ${typeof t=="boolean"&&!t?s.default["item-sidebar-close"]:""}
+        `,onClick:y,onMouseOver:()=>g(!0),onMouseOut:()=>g(!1),...o?o(e.slug,e):{},children:[m.isValidElement(e.svgIcon)&&i.jsx("div",{className:s.default["item-icon"],children:b||e.subs.length>0&&n?e?.svgIconActive:N?e?.svgIconHover||e?.svgIconActive:e?.svgIcon}),i.jsx("div",{className:s.default["item-label"],children:e.label}),e.subs.length>0&&t&&i.jsxs("div",{className:`${s.default["item-icon-subs"]} ${n?s.default["item-icon-subs-active"]:""}`,id:`item-sidebar-subs-${e.name}-icon`,children:[m.isValidElement(d)&&d,typeof d=="function"&&d()]})]}),e.parent===4&&!e.subs.length&&i.jsx("div",{className:r.configItemSidebar.divider?.[c]})]})),e.subs.length>0?i.jsxs("div",{className:`${t||n?"":"-mt-2"}`,children:[f,i.jsx("div",{id:`item-sidebar-subs-${e.name}-${t&&n?"open":"close"}`,className:`${s.default["item-subs-sidebar"]} 
+          ${r.configItemSidebar.variant?.[c]} ${!t||!n?s.default.hidden:""}`,children:e.subs.map(a=>m.createElement(S,{...a,as:a.manualRoute?"div":a.subs.length>0?I:e.linkComponent,key:a.name,patch:j,iconSubs:d,show:h,open:t,variant:c,setShow:l}))}),[3,4].includes(e.parent)&&i.jsx("div",{className:r.configItemSidebar.divider?.[c]})]}):f):i.jsx(i.Fragment,{})};exports.default=S;

package/dist/components/Sidebar/ItemSidebar.mjs

@@ -1,56 +1,55 @@
-import { jsx as n, Fragment as N, jsxs as c } from "react/jsx-runtime";
-import { useState as l, isValidElement as b, createElement as q } from "react";
-import s from "./itemSidebar.module.scss.mjs";
+import { jsx as t, Fragment as $, jsxs as c } from "react/jsx-runtime";
+import { useState as M, isValidElement as a, createElement as j } from "react";
+import i from "./itemSidebar.module.scss.mjs";
 import { configItemSidebar as d } from "./ItemSidebar.config.mjs";
-const w = ({
-  as: x,
-  show: p,
-  open: t,
-  patch: A,
+const C = ({
+  as: p,
+  show: I,
+  open: s,
+  patch: y,
   iconSubs: r,
   variant: m = "payhere-brand-base-white",
-  setShow: g,
-  onClickItems: O,
-  propsLink: f,
-  ...i
+  setShow: l,
+  onClickItems: x,
+  propsLink: b,
+  ...e
 }) => {
-  var C, a, E, k, F, R, T, V;
-  let h = /* @__PURE__ */ n(N, {});
-  const H = x ?? "div", [M, $] = l(!1), I = A === i.slug, y = p.split("/"), e = y.includes(i.name), j = () => {
-    if (i.subs.length > 0)
-      if (e) {
-        const o = y.splice(0, y.indexOf(i.name));
-        o.length > 0 ? g(`${o.join("/")}/`) : g("");
+  let g = /* @__PURE__ */ t($, {});
+  const A = p ?? "div", [O, f] = M(!1), h = y === e.slug, N = I.split("/"), n = N.includes(e.name), H = () => {
+    if (e.subs.length > 0)
+      if (n) {
+        const o = N.splice(0, N.indexOf(e.name));
+        o.length > 0 ? l(`${o.join("/")}/`) : l("");
       } else
-        g(`${p}${i.name}/`);
-    else typeof O == "function" && O(i);
+        l(`${I}${e.name}/`);
+    else typeof x == "function" && x(e);
   };
-  return i.isShow ? ([1, 3, 5, 6, 7, 8].includes(i.parent) && (h = /* @__PURE__ */ c(N, { children: [
+  return e.isShow ? ([1, 3, 5, 6, 7, 8].includes(e.parent) && (g = /* @__PURE__ */ c($, { children: [
     /* @__PURE__ */ c(
-      H,
+      A,
       {
-        id: i.name,
-        className: `${s["item-sidebar-1"]}
-          ${(C = d.variant) == null ? void 0 : C[m]} ${(a = d.parent) == null ? void 0 : a[i.parent.toString()]} 
-          ${I || i.subs.length > 0 && e ? s.active : ""} ${typeof t == "boolean" && t ? s["item-sidebar-open"] : ""} ${typeof t == "boolean" && !t ? s["item-sidebar-close"] : ""}
+        id: e.name,
+        className: `${i["item-sidebar-1"]}
+          ${d.variant?.[m]} ${d.parent?.[e.parent.toString()]} 
+          ${h || e.subs.length > 0 && n ? i.active : ""} ${typeof s == "boolean" && s ? i["item-sidebar-open"] : ""} ${typeof s == "boolean" && !s ? i["item-sidebar-close"] : ""}
         `,
-        onClick: j,
-        onMouseOver: () => $(!0),
-        onMouseOut: () => $(!1),
-        ...f ? f(i.slug, i) : {},
+        onClick: H,
+        onMouseOver: () => f(!0),
+        onMouseOut: () => f(!1),
+        ...b ? b(e.slug, e) : {},
         children: [
           /* @__PURE__ */ c("div", { className: "iru-flex iru-items-center iru-gap-3 iru-relative", children: [
-            b(i.svgIcon) && /* @__PURE__ */ n("div", { className: s["item-icon"], children: I || i.subs.length > 0 && e ? i == null ? void 0 : i.svgIconActive : M ? (i == null ? void 0 : i.svgIconHover) || (i == null ? void 0 : i.svgIconActive) : i == null ? void 0 : i.svgIcon }),
-            /* @__PURE__ */ n("div", { className: s["item-label"], children: i.label })
+            a(e.svgIcon) && /* @__PURE__ */ t("div", { className: i["item-icon"], children: h || e.subs.length > 0 && n ? e?.svgIconActive : O ? e?.svgIconHover || e?.svgIconActive : e?.svgIcon }),
+            /* @__PURE__ */ t("div", { className: i["item-label"], children: e.label })
           ] }),
-          b(i.endIcon) && /* @__PURE__ */ n("div", { className: s["end-icon"], children: i == null ? void 0 : i.endIcon }),
-          i.subs.length > 0 && t && /* @__PURE__ */ c(
+          a(e.endIcon) && /* @__PURE__ */ t("div", { className: i["end-icon"], children: e?.endIcon }),
+          e.subs.length > 0 && s && /* @__PURE__ */ c(
             "div",
             {
-              className: `${s["item-icon-subs"]} ${e ? s["item-icon-subs-active"] : ""}`,
-              id: `item-sidebar-subs-${i.name}-icon`,
+              className: `${i["item-icon-subs"]} ${n ? i["item-icon-subs-active"] : ""}`,
+              id: `item-sidebar-subs-${e.name}-icon`,
               children: [
-                b(r) && r,
+                a(r) && r,
                 typeof r == "function" && r()
               ]
             }
@@ -58,30 +57,30 @@ const w = ({
         ]
       }
     ),
-    i.parent === 3 && !i.subs.length && /* @__PURE__ */ n("div", { className: (E = d.divider) == null ? void 0 : E[m] })
-  ] })), (i.parent === 2 || i.parent === 4) && (h = /* @__PURE__ */ c(N, { children: [
+    e.parent === 3 && !e.subs.length && /* @__PURE__ */ t("div", { className: d.divider?.[m] })
+  ] })), (e.parent === 2 || e.parent === 4) && (g = /* @__PURE__ */ c($, { children: [
     /* @__PURE__ */ c(
-      H,
+      A,
       {
-        id: i.name,
-        className: `${s["item-sidebar-2"]}
-          ${(k = d.variant) == null ? void 0 : k[m]} ${(F = d.parent) == null ? void 0 : F[i.parent.toString()]} 
-          ${I || i.subs.length > 0 && e ? s.active : ""} ${typeof t == "boolean" && t ? s["item-sidebar-open"] : ""} ${typeof t == "boolean" && !t ? s["item-sidebar-close"] : ""}
+        id: e.name,
+        className: `${i["item-sidebar-2"]}
+          ${d.variant?.[m]} ${d.parent?.[e.parent.toString()]} 
+          ${h || e.subs.length > 0 && n ? i.active : ""} ${typeof s == "boolean" && s ? i["item-sidebar-open"] : ""} ${typeof s == "boolean" && !s ? i["item-sidebar-close"] : ""}
         `,
-        onClick: j,
-        onMouseOver: () => $(!0),
-        onMouseOut: () => $(!1),
-        ...f ? f(i.slug, i) : {},
+        onClick: H,
+        onMouseOver: () => f(!0),
+        onMouseOut: () => f(!1),
+        ...b ? b(e.slug, e) : {},
         children: [
-          b(i.svgIcon) && /* @__PURE__ */ n("div", { className: s["item-icon"], children: I || i.subs.length > 0 && e ? i == null ? void 0 : i.svgIconActive : M ? (i == null ? void 0 : i.svgIconHover) || (i == null ? void 0 : i.svgIconActive) : i == null ? void 0 : i.svgIcon }),
-          /* @__PURE__ */ n("div", { className: s["item-label"], children: i.label }),
-          i.subs.length > 0 && t && /* @__PURE__ */ c(
+          a(e.svgIcon) && /* @__PURE__ */ t("div", { className: i["item-icon"], children: h || e.subs.length > 0 && n ? e?.svgIconActive : O ? e?.svgIconHover || e?.svgIconActive : e?.svgIcon }),
+          /* @__PURE__ */ t("div", { className: i["item-label"], children: e.label }),
+          e.subs.length > 0 && s && /* @__PURE__ */ c(
             "div",
             {
-              className: `${s["item-icon-subs"]} ${e ? s["item-icon-subs-active"] : ""}`,
-              id: `item-sidebar-subs-${i.name}-icon`,
+              className: `${i["item-icon-subs"]} ${n ? i["item-icon-subs-active"] : ""}`,
+              id: `item-sidebar-subs-${e.name}-icon`,
               children: [
-                b(r) && r,
+                a(r) && r,
                 typeof r == "function" && r()
               ]
             }
@@ -89,34 +88,34 @@ const w = ({
         ]
       }
     ),
-    i.parent === 4 && !i.subs.length && /* @__PURE__ */ n("div", { className: (R = d.divider) == null ? void 0 : R[m] })
-  ] })), i.subs.length > 0 ? /* @__PURE__ */ c("div", { className: `${t || e ? "" : "-mt-2"}`, children: [
-    h,
-    /* @__PURE__ */ n(
+    e.parent === 4 && !e.subs.length && /* @__PURE__ */ t("div", { className: d.divider?.[m] })
+  ] })), e.subs.length > 0 ? /* @__PURE__ */ c("div", { className: `${s || n ? "" : "-mt-2"}`, children: [
+    g,
+    /* @__PURE__ */ t(
       "div",
       {
-        id: `item-sidebar-subs-${i.name}-${t && e ? "open" : "close"}`,
-        className: `${s["item-subs-sidebar"]} 
-          ${(T = d.variant) == null ? void 0 : T[m]} ${!t || !e ? s.hidden : ""}`,
-        children: i.subs.map((o) => /* @__PURE__ */ q(
-          w,
+        id: `item-sidebar-subs-${e.name}-${s && n ? "open" : "close"}`,
+        className: `${i["item-subs-sidebar"]} 
+          ${d.variant?.[m]} ${!s || !n ? i.hidden : ""}`,
+        children: e.subs.map((o) => /* @__PURE__ */ j(
+          C,
           {
             ...o,
-            as: o.manualRoute ? "div" : o.subs.length > 0 ? x : i.linkComponent,
+            as: o.manualRoute ? "div" : o.subs.length > 0 ? p : e.linkComponent,
             key: o.name,
-            patch: A,
+            patch: y,
             iconSubs: r,
-            show: p,
-            open: t,
+            show: I,
+            open: s,
             variant: m,
-            setShow: g
+            setShow: l
           }
         ))
       }
     ),
-    [3, 4].includes(i.parent) && /* @__PURE__ */ n("div", { className: (V = d.divider) == null ? void 0 : V[m] })
-  ] }) : h) : /* @__PURE__ */ n(N, {});
+    [3, 4].includes(e.parent) && /* @__PURE__ */ t("div", { className: d.divider?.[m] })
+  ] }) : g) : /* @__PURE__ */ t($, {});
 };
 export {
-  w as default
+  C as default
 };

package/dist/components/Sidebar/Sidebar.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),e=require("react"),a=require("./Sidebar.module.scss.cjs"),A=require("./ItemSidebar.cjs"),W=require("../../config/tailwind/nativeScreen.cjs"),v=require("./Sidebar.config.cjs"),k=e.forwardRef((q,O)=>{var I;const{as:w,children:C,patch:d="/",iconCompany:r,iconSubs:$,iconCollapse:m,iconCollapseClose:g,modules:V,toleranceWidthIconCompany:L=25,onClickItems:M,variant:c="payhere-brand-base-white",footer:o,withInheritance:j,id:p="1ru-sidebar",styleSidebar:_,styleContent:z,...F}=q,T=e.useRef(null),[i,l]=e.useState(null),[s,f]=e.useState(null),[B,x]=e.useState(""),[E,h]=e.useState(),[N,P]=e.useState(0),b=()=>{var R;let n=0;const S=document.getElementById("icon-company-sidebar");(R=S==null?void 0:S.childNodes)==null||R.forEach(H=>{n+=H.getBoundingClientRect().width??0}),h(n+L+"px")},y=()=>{P(window.innerWidth)},u=()=>{l(!s),s?h("auto"):setTimeout(()=>{b()},100)};return e.useEffect(()=>{N>=(v.configSidebar.mobileSupport.includes(c)?W.default.lg:W.default.md)?(l(!0),setTimeout(()=>{b()},100)):(l(!1),h("auto"))},[N]),e.useEffect(()=>{typeof i=="boolean"&&f(i)},[i]),e.useImperativeHandle(O,()=>({openSidebar:i,setOpenSidebar:l,handlerClickCollapse:u}),[i,s]),e.useEffect(()=>(d&&d.split("/").length>1&&x(d+"/"),b(),y(),window.addEventListener("resize",y),()=>window.removeEventListener("resize",y)),[]),t.jsxs("div",{className:v.configSidebar.variants[c],...F,ref:T,children:[t.jsxs("div",{id:p,className:`${a.default.sidebar} ${typeof s=="boolean"&&s?a.default["sidebar-open"]:""} ${typeof s=="boolean"&&!s?a.default["sidebar-close"]:""}`,style:_||{},children:[e.isValidElement(m)&&t.jsxs("div",{className:a.default["button-collaps-sidebar"],id:`${p}-${i?"close-collapse":"open-collapse"}`,onClick:u,children:[i&&m,i?"":e.isValidElement(g)?g:m]}),t.jsx("div",{className:a.default["container-icon-company-sidebar"],children:t.jsxs("div",{id:"icon-company-sidebar",className:a.default["icon-company-sidebar"],style:{width:E&&v.configSidebar.withCuctomWidthIconCompany.includes(c)?E:"100%"},children:[e.isValidElement(r)&&r,typeof r=="function"&&r({openSidebar:s,setOpenSidebar:l})]})}),t.jsx("div",{className:a.default["menu-sidebar"],onMouseOver:()=>{i||f(!0)},onMouseOut:()=>{i||f(!1)},children:V.map(n=>e.createElement(A.default,{...n,as:n.manualRoute||n.subs.length>0?"div":w,linkComponent:w,key:n.name,show:B,open:s,patch:d,iconSubs:$,variant:c,setShow:x,onClickItems:M}))}),o&&t.jsxs("div",{className:s?"iru-opacity-[1]":"iru-opacity-0",children:[e.isValidElement(o)&&t.jsx("div",{children:o}),typeof o=="function"&&t.jsx("div",{children:o()})]})]}),i&&t.jsx("div",{id:`${p}-splace-screen`,className:a.default["splace-screen"],onClick:u}),t.jsxs("div",{className:a.default["content-sidebar"],style:z||{},children:[j&&((I=e.Children)==null?void 0:I.map(C,n=>t.jsx(t.Fragment,{children:e.isValidElement(n)&&t.jsx(t.Fragment,{children:e.cloneElement(n,{openSidebar:i,handlerClickCollapse:u})})}))),!j&&t.jsx(t.Fragment,{children:C})]})]})});k.displayName="Sidebar";exports.default=k;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),e=require("react"),a=require("./Sidebar.module.scss.cjs"),B=require("./ItemSidebar.cjs"),N=require("../../config/tailwind/nativeScreen.cjs"),S=require("./Sidebar.config.cjs"),I=e.forwardRef((R,W)=>{const{as:C,children:v,patch:d="/",iconCompany:c,iconSubs:k,iconCollapse:m,iconCollapseClose:w,modules:q,toleranceWidthIconCompany:O=25,onClickItems:$,variant:r="payhere-brand-base-white",footer:o,withInheritance:g,id:p="1ru-sidebar",styleSidebar:V,styleContent:L,...M}=R,_=e.useRef(null),[n,l]=e.useState(null),[i,f]=e.useState(null),[z,j]=e.useState(""),[x,h]=e.useState(),[E,F]=e.useState(0),b=()=>{let s=0;document.getElementById("icon-company-sidebar")?.childNodes?.forEach(T=>{s+=T.getBoundingClientRect().width??0}),h(s+O+"px")},y=()=>{F(window.innerWidth)},u=()=>{l(!i),i?h("auto"):setTimeout(()=>{b()},100)};return e.useEffect(()=>{E>=(S.configSidebar.mobileSupport.includes(r)?N.default.lg:N.default.md)?(l(!0),setTimeout(()=>{b()},100)):(l(!1),h("auto"))},[E]),e.useEffect(()=>{typeof n=="boolean"&&f(n)},[n]),e.useImperativeHandle(W,()=>({openSidebar:n,setOpenSidebar:l,handlerClickCollapse:u}),[n,i]),e.useEffect(()=>(d&&d.split("/").length>1&&j(d+"/"),b(),y(),window.addEventListener("resize",y),()=>window.removeEventListener("resize",y)),[]),t.jsxs("div",{className:S.configSidebar.variants[r],...M,ref:_,children:[t.jsxs("div",{id:p,className:`${a.default.sidebar} ${typeof i=="boolean"&&i?a.default["sidebar-open"]:""} ${typeof i=="boolean"&&!i?a.default["sidebar-close"]:""}`,style:V||{},children:[e.isValidElement(m)&&t.jsxs("div",{className:a.default["button-collaps-sidebar"],id:`${p}-${n?"close-collapse":"open-collapse"}`,onClick:u,children:[n&&m,n?"":e.isValidElement(w)?w:m]}),t.jsx("div",{className:a.default["container-icon-company-sidebar"],children:t.jsxs("div",{id:"icon-company-sidebar",className:a.default["icon-company-sidebar"],style:{width:x&&S.configSidebar.withCuctomWidthIconCompany.includes(r)?x:"100%"},children:[e.isValidElement(c)&&c,typeof c=="function"&&c({openSidebar:i,setOpenSidebar:l})]})}),t.jsx("div",{className:a.default["menu-sidebar"],onMouseOver:()=>{n||f(!0)},onMouseOut:()=>{n||f(!1)},children:q.map(s=>e.createElement(B.default,{...s,as:s.manualRoute||s.subs.length>0?"div":C,linkComponent:C,key:s.name,show:z,open:i,patch:d,iconSubs:k,variant:r,setShow:j,onClickItems:$}))}),o&&t.jsxs("div",{className:i?"iru-opacity-[1]":"iru-opacity-0",children:[e.isValidElement(o)&&t.jsx("div",{children:o}),typeof o=="function"&&t.jsx("div",{children:o()})]})]}),n&&t.jsx("div",{id:`${p}-splace-screen`,className:a.default["splace-screen"],onClick:u}),t.jsxs("div",{className:a.default["content-sidebar"],style:L||{},children:[g&&e.Children?.map(v,s=>t.jsx(t.Fragment,{children:e.isValidElement(s)&&t.jsx(t.Fragment,{children:e.cloneElement(s,{openSidebar:n,handlerClickCollapse:u})})})),!g&&t.jsx(t.Fragment,{children:v})]})]})});I.displayName="Sidebar";exports.default=I;