hplx-feature-library 1.0.77 → 1.0.79

package/dist/CustomDropdown/index.js

@@ -1,120 +1,111 @@
 import { j as l, P as ye, a as Ce, M as $e } from "../index-6-2iV0ns.js";
-import { useCallback as j, useEffect as F, useState as P, useRef as $, useMemo as je } from "react";
+import { useState as I, useRef as v, useMemo as je, useCallback as O, useEffect as J } from "react";
 import { u as Ne } from "../useClickOutside-BjJyGTec.js";
-import ke from "../ToggleButtons/index.js";
-const Le = (i, u) => {
-  const a = j(
-    (N) => {
-      i.current && !i.current.contains(N.target) && u();
-    },
-    [i, u]
-  );
-  F(() => (document.addEventListener("mouseup", a), () => {
-    document.removeEventListener("mouseup", a);
-  }), [a]);
-}, Ee = "data:image/svg+xml,%3csvg%20width='10'%20height='6'%20viewBox='0%200%2010%206'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M0.480062%200.819173C0.650418%200.648817%200.92662%200.648817%201.09698%200.819173L4.71454%204.43674L8.3321%200.819173C8.50246%200.648817%208.77866%200.648817%208.94902%200.819173C9.11937%200.98953%209.11937%201.26573%208.94902%201.43609L5.023%205.36211C4.85264%205.53246%204.57644%205.53246%204.40608%205.36211L0.480062%201.43609C0.309706%201.26573%200.309706%200.98953%200.480062%200.819173Z'%20fill='%23667085'/%3e%3c/svg%3e";
-function Be(i) {
+import { u as ke } from "../useOutsideClick-C4Q0aGuf.js";
+import Le from "../ToggleButtons/index.js";
+const Se = "data:image/svg+xml,%3csvg%20width='10'%20height='6'%20viewBox='0%200%2010%206'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M0.480062%200.819173C0.650418%200.648817%200.92662%200.648817%201.09698%200.819173L4.71454%204.43674L8.3321%200.819173C8.50246%200.648817%208.77866%200.648817%208.94902%200.819173C9.11937%200.98953%209.11937%201.26573%208.94902%201.43609L5.023%205.36211C4.85264%205.53246%204.57644%205.53246%204.40608%205.36211L0.480062%201.43609C0.309706%201.26573%200.309706%200.98953%200.480062%200.819173Z'%20fill='%23667085'/%3e%3c/svg%3e";
+function Pe(D) {
   const {
-    label: u,
-    labelClassName: a,
-    hideDropdownIcon: N,
-    showClearOption: H,
+    label: E,
+    labelClassName: B,
+    hideDropdownIcon: Q,
+    showClearOption: P,
     isRequiredField: U,
     btnClassName: X,
-    placeholder: M,
-    options: h,
-    selectedOption: g,
-    onChangeHandler: T,
-    inputValue: s,
-    inputChangeHandler: f,
-    onInputFocusOutEvent: _,
+    placeholder: F,
+    options: i,
+    selectedOption: p,
+    onChangeHandler: H,
+    inputValue: n,
+    inputChangeHandler: a,
+    onInputFocusOutEvent: M,
     inputClassName: ee,
     isSearchable: le,
     inputType: te,
-    showInput: k,
-    inputSuffix: G,
-    selectedLabel: R,
-    suffixPadding: ne,
-    disableInputAutoSize: oe,
-    selectedOptions: L,
-    isMulti: c,
-    dropDownItemClickHandler: z,
-    showToggle: se,
+    showInput: y,
+    inputSuffix: T,
+    selectedLabel: _,
+    suffixPadding: oe,
+    disableInputAutoSize: se,
+    selectedOptions: C,
+    isMulti: h,
+    dropDownItemClickHandler: G,
+    showToggle: ne,
     toggleChangeHandler: re,
     selectedToggleOption: ie,
     toggleOptionsList: ae,
-    border: w,
-    height: b,
-    disabled: d,
-    fieldColor: v,
-    errorMsg: E,
+    border: m,
+    height: x,
+    disabled: f,
+    fieldColor: g,
+    errorMsg: $,
     showErrorMsg: he,
-    placeholderStyle: n,
-    onInputKeyDown: W,
+    placeholderStyle: o,
+    onInputKeyDown: R,
     showEmptyDropdownPopup: fe = !0,
-    isDropdownFixed: y = !1,
+    isDropdownFixed: w = !1,
     dropdownClassName: ce = "",
-    wrapperClass: V = "",
-    maxInputLength: K,
+    wrapperClass: z = "",
+    maxInputLength: W,
     alternateListBgStyle: de,
     showLabelTooltip: ue = !1,
     labelToolTipContent: pe = "",
-    inputContainerClasses: Y = "",
-    onInputFocus: O
-  } = i, [r, p] = P(!1), [m, me] = P(null), C = $(null), S = $(null), q = $(null), I = $([]), xe = je(() => h?.filter((e) => e ? e.label.toLowerCase().includes((s ?? "").toLowerCase()) : void 0), [s, h]), [ge, D] = P(!1), we = () => {
-    p(!1), c && f && f(""), me(null);
-  }, A = j(
+    inputContainerClasses: V = "",
+    onInputFocus: j
+  } = D, [r, c] = I(!1), [d, me] = I(null), b = v(null), N = v(null), K = v(null), k = v([]), xe = je(() => i?.filter((e) => e ? e.label.toLowerCase().includes((n ?? "").toLowerCase()) : void 0), [n, i]), [ge, L] = I(!1), we = () => {
+    c(!1), h && a && a(""), me(null);
+  }, Y = O(
     (e) => {
-      e.stopPropagation(), d || p((t) => !t);
+      e.stopPropagation(), f || c((t) => !t);
     },
-    [d]
-  ), Z = (s?.length || 0) + 2 + Number(ne || 0);
-  Le(C, we), F(() => {
-    m !== null && I.current[m] && I.current[m].scrollIntoView({ block: "nearest" });
-  }, [m]);
-  const x = j(() => {
-    if (y && r) {
-      const e = k ? S.current : q.current, t = C.current;
+    [f]
+  ), q = (n?.length || 0) + 2 + Number(oe || 0);
+  ke(b, we), J(() => {
+    d !== null && k.current[d] && k.current[d].scrollIntoView({ block: "nearest" });
+  }, [d]);
+  const u = O(() => {
+    if (w && r) {
+      const e = y ? N.current : K.current, t = b.current;
       if (e && t) {
-        const o = e.getBoundingClientRect();
-        t.style.position = "fixed", t.style.top = `${window.scrollY ? o.bottom + window.scrollY : o.bottom}px`, t.style.left = `${o.left}px`, t.style.width = `${o.width}px`;
+        const s = e.getBoundingClientRect();
+        t.style.position = "fixed", t.style.top = `${window.scrollY ? s.bottom + window.scrollY : s.bottom}px`, t.style.left = `${s.left}px`, t.style.width = `${s.width}px`;
       }
     }
-  }, [y, r, k]);
-  F(() => {
-    if (y)
-      return r ? (x(), window.addEventListener("scroll", x, !0)) : window.removeEventListener("scroll", x, !0), () => {
-        window.removeEventListener("scroll", x, !0);
+  }, [w, r, y]);
+  J(() => {
+    if (w)
+      return r ? (u(), window.addEventListener("scroll", u, !0)) : window.removeEventListener("scroll", u, !0), () => {
+        window.removeEventListener("scroll", u, !0);
       };
-  }, [y, x, r]), Ne(C, () => {
-    ge && _ && _();
+  }, [w, u, r]), Ne(b, () => {
+    ge && M && M();
   });
-  const J = (e) => {
-    if (c && z) {
-      const t = L?.some((o) => o.value === e.value);
-      z(!!t, e);
+  const A = (e) => {
+    if (h && G) {
+      const t = C?.some((s) => s.value === e.value);
+      G(!!t, e);
     }
-  }, be = j(
+  }, be = O(
     async (e) => {
-      e.stopPropagation(), r || p(!0), O && await O();
+      e.stopPropagation(), r || c(!0), j && await j();
     },
-    [O, r]
+    [j, r]
   );
-  return /* @__PURE__ */ l.jsxs("div", { className: `hfl-relative hfl-inline-block hfl-text-left ${V || ""}`, children: [
-    !!u && /* @__PURE__ */ l.jsxs("div", { className: "hfl-text-Gray-700 hfl-mb-1 hfl-flex", children: [
-      /* @__PURE__ */ l.jsx(ye, { type: "Text sm", variant: "Medium", className: a || "", children: `${u}` }),
+  return /* @__PURE__ */ l.jsxs("div", { className: `hfl-relative hfl-inline-block hfl-text-left ${z || ""}`, children: [
+    !!E && /* @__PURE__ */ l.jsxs("div", { className: "hfl-text-Gray-700 hfl-mb-1 hfl-flex", children: [
+      /* @__PURE__ */ l.jsx(ye, { type: "Text sm", variant: "Medium", className: B || "", children: `${E}` }),
       U && /* @__PURE__ */ l.jsx("span", { className: "hfl-ml-1 hfl-text-Error-600", children: "*" }),
       ue && /* @__PURE__ */ l.jsx(Ce, { variant: "Right", text: pe, theme: "dark", children: /* @__PURE__ */ l.jsx("i", { className: "hx_info-filled" }) })
     ] }),
-    k ? /* @__PURE__ */ l.jsxs(l.Fragment, { children: [
+    y ? /* @__PURE__ */ l.jsxs(l.Fragment, { children: [
       /* @__PURE__ */ l.jsxs(
         "div",
         {
-          className: `hfl-flex hfl-items-center hfl-shadow-xs hfl-px-2 ${Y || ""} ${w || "hfl-border-1"} hfl-rounded-lg hfl-overflow-x-auto  ${E ? "hfl-border-Error-300" : "hfl-border-Gray-300"} ${b || "hfl-h-10"} ${d ? "!hfl-bg-Gray-50 !hfl-pointer-events-none" : v || "hfl-bg-White"} hover:hfl-border-Primary-300 hover:hfl-shadow-xs-primary`,
-          onClick: d ? () => {
-          } : A,
+          className: `hfl-flex hfl-items-center hfl-shadow-xs hfl-px-2 ${V || ""} ${m || "hfl-border-1"} hfl-rounded-lg hfl-overflow-x-auto  ${$ ? "hfl-border-Error-300" : "hfl-border-Gray-300"} ${x || "hfl-h-10"} ${f ? "!hfl-bg-Gray-50 !hfl-pointer-events-none" : g || "hfl-bg-White"} hover:hfl-border-Primary-300 hover:hfl-shadow-xs-primary`,
+          onClick: f ? () => {
+          } : Y,
           children: [
-            L?.map((e, t) => /* @__PURE__ */ l.jsxs(
+            C?.map((e, t) => /* @__PURE__ */ l.jsxs(
               "div",
               {
                 className: "hfl-flex hfl-items-center hfl-bg-Blue-100 hfl-mr-2 hfl-py-1 hfl-px-2 hfl-rounded-sm hfl-font-inter-0 hfl-text-nowrap",
@@ -123,8 +114,8 @@ function Be(i) {
                   /* @__PURE__ */ l.jsx(
                     "span",
                     {
-                      onClick: (o) => {
-                        o.stopPropagation(), J(e);
+                      onClick: (s) => {
+                        s.stopPropagation(), A(e);
                       },
                       className: "hx_close hfl-text-Gray-500 hfl-my-0 hfl-text-[14px] hfl-ml-[1px] hfl-cursor-pointer"
                     }
@@ -133,107 +124,107 @@ function Be(i) {
               },
               `${e.label}-${t}`
             )),
-            Object.keys(n || {}).length > 0 && /* @__PURE__ */ l.jsx("style", { children: `
+            Object.keys(o || {}).length > 0 && /* @__PURE__ */ l.jsx("style", { children: `
                   input.input-placeholder::placeholder {
-                  font-family: ${n?.fontFamily};
-                  font-weight: ${n?.fontWeight};
-                  line-height: ${n?.lineHeight};
-                  font-size: ${n?.fontSize};
-                  color: ${n?.color};
+                  font-family: ${o?.fontFamily};
+                  font-weight: ${o?.fontWeight};
+                  line-height: ${o?.lineHeight};
+                  font-size: ${o?.fontSize};
+                  color: ${o?.color};
                   }
                 ` }),
             /* @__PURE__ */ l.jsx(
               "input",
               {
-                ref: S,
-                style: oe ? {} : { width: `${Number(s?.length) > 4 ? (s?.length || 0) + 5 : 12}ch` },
+                ref: N,
+                style: se ? {} : { width: `${Number(n?.length) > 4 ? (n?.length || 0) + 5 : 12}ch` },
                 type: te,
-                placeholder: M,
-                value: s,
-                className: `input-placeholder hfl-flex-1 hfl-pl-2 hfl-placeholder hfl-py-1 focus-visible:hfl-outline-0 focus-visible:hfl-outline-none hfl-border-0 focus:hfl-border-0 ${d ? "!hfl-bg-Gray-50 !hfl-cursor-not-allowed" : v || "hfl-bg-White"} ${ee || ""}`,
+                placeholder: F,
+                value: n,
+                className: `input-placeholder hfl-flex-1 hfl-pl-2 hfl-placeholder hfl-py-1 focus-visible:hfl-outline-0 focus-visible:hfl-outline-none hfl-border-0 focus:hfl-border-0 ${f ? "!hfl-bg-Gray-50 !hfl-cursor-not-allowed" : g || "hfl-bg-White"} ${ee || ""}`,
                 onChange: (e) => {
-                  f && f(e.target.value), D(!0);
+                  a && a(e.target.value), L(!0);
                 },
                 onClick: be,
-                onKeyDown: (e) => W && W(e, p, S),
-                maxLength: K ?? K,
-                ...i.inputProps || {}
+                onKeyDown: (e) => R && R(e, c, N),
+                maxLength: W ?? W,
+                ...D.inputProps || {}
               }
             ),
-            !N && !H && /* @__PURE__ */ l.jsx("i", { className: "hx_down hfl-mx-2" }),
-            H && /* @__PURE__ */ l.jsx(
+            !Q && !P && /* @__PURE__ */ l.jsx("i", { className: "hx_down hfl-mx-2" }),
+            P && /* @__PURE__ */ l.jsx(
               "i",
               {
-                className: `${s ? "hx_close hfl-cursor-pointer" : "hx_down"} hfl-mx-2`,
+                className: `${n ? "hx_close hfl-cursor-pointer" : "hx_down"} hfl-mx-2`,
                 onClick: () => {
-                  (g?.value || s) && (f && f(""), D(!0));
+                  (p?.value || n) && (a && a(""), L(!0));
                 }
               }
             ),
-            G ? /* @__PURE__ */ l.jsx(
+            T ? /* @__PURE__ */ l.jsx(
               "span",
               {
-                style: { left: `${Z < 2 ? "3" : Z}ch` },
+                style: { left: `${q < 2 ? "3" : q}ch` },
                 className: "hfl-absolute hfl-top-1/2 hfl--translate-y-1/2 hfl-pointer-events-none",
-                children: G
+                children: T
               }
             ) : null
           ]
         }
       ),
-      he && /* @__PURE__ */ l.jsx("span", { className: "hfl-text-0 hfl-text-Error-600", children: E })
+      he && /* @__PURE__ */ l.jsx("span", { className: "hfl-text-0 hfl-text-Error-600", children: $ })
     ] }) : /* @__PURE__ */ l.jsxs(
       "button",
       {
-        ref: q,
-        onClick: A,
-        className: `hfl-w-full hfl-bg-White hfl-py-[6px] hfl-px-4 hfl-rounded-lg hfl-inline-flex hfl-justify-between hfl-items-center ${X || ""} ${w || "hfl-border-1"} ${E ? "hfl-border-Error-300" : "hfl-border-Gray-300"} ${b || "hfl-h-[40px]"} ${d ? "!hfl-bg-Gray-50 !hfl-cursor-not-allowed" : ""}`,
-        style: R || g?.label ? {} : n ? {
-          fontFamily: n?.fontFamily,
-          fontSize: n?.fontSize,
-          fontWeight: n?.fontWeight,
-          lineHeight: n?.lineHeight,
-          color: n?.color
+        ref: K,
+        onClick: Y,
+        className: `hfl-w-full hfl-bg-White hfl-py-[6px] hfl-px-4 hfl-rounded-lg hfl-inline-flex hfl-justify-between hfl-items-center ${X || ""} ${m || "hfl-border-1"} ${$ ? "hfl-border-Error-300" : "hfl-border-Gray-300"} ${x || "hfl-h-[40px]"} ${f ? "!hfl-bg-Gray-50 !hfl-cursor-not-allowed" : ""}`,
+        style: _ || p?.label ? {} : o ? {
+          fontFamily: o?.fontFamily,
+          fontSize: o?.fontSize,
+          fontWeight: o?.fontWeight,
+          lineHeight: o?.lineHeight,
+          color: o?.color
         } : {},
         children: [
-          /* @__PURE__ */ l.jsx("span", { className: "hfl-pr-4", children: R || g?.label || M || "Select an option" }),
-          /* @__PURE__ */ l.jsx("img", { src: Ee, alt: "down arrow" })
+          /* @__PURE__ */ l.jsx("span", { className: "hfl-pr-4", children: _ || p?.label || F || "Select an option" }),
+          /* @__PURE__ */ l.jsx("img", { src: Se, alt: "down arrow" })
         ]
       }
     ),
-    h && h?.length >= 0 && /* @__PURE__ */ l.jsxs(
+    i && i?.length >= 0 && /* @__PURE__ */ l.jsxs(
       "ul",
       {
-        ref: C,
-        className: `custom-dropdown-menu ${r ? "hfl-visible" : "hfl-invisible"} hfl-absolute hfl-z-50 hfl-grid hfl-gap-1 hfl-mt-3 hfl-w-full hfl-rounded-lg hfl-shadow-lg hfl-bg-White hfl-font-inter-0 hfl-p-1 hfl-px-2 ${c ? "hfl-min-w-[20em]" : "hfl-min-w-[16em]"} hfl-max-h-[330px] hfl-overflow-y-scroll ${ce}`,
+        ref: b,
+        className: `custom-dropdown-menu ${r ? "hfl-visible" : "hfl-invisible"} hfl-absolute hfl-z-50 hfl-grid hfl-gap-1 hfl-mt-3 hfl-w-full hfl-rounded-lg hfl-shadow-lg hfl-bg-White hfl-font-inter-0 hfl-p-1 hfl-px-2 ${h ? "hfl-min-w-[20em]" : "hfl-min-w-[16em]"} hfl-max-h-[330px] hfl-overflow-y-scroll ${ce}`,
         role: "menu",
         "aria-orientation": "vertical",
         "aria-labelledby": "options-menu",
         children: [
-          se ? /* @__PURE__ */ l.jsx(
-            ke,
+          ne ? /* @__PURE__ */ l.jsx(
+            Le,
             {
               onChangeHandler: re,
               selectedOption: ie,
               options: ae
             }
           ) : !1,
-          (le ? xe : h)?.map((e, t) => {
-            const o = c ? !!L?.some((B) => B.value === e?.value) : !1, Q = g?.value === e?.value, ve = m === t;
+          (le ? xe : i)?.map((e, t) => {
+            const s = h ? !!C?.some((S) => S.value === e?.value) : !1, Z = p?.value === e?.value, ve = d === t;
             return e ? /* @__PURE__ */ l.jsx(
               "li",
               {
                 onClick: () => {
-                  c ? J(e) : (T && T(e), p(!1), D(!1));
+                  h ? A(e) : (H && H(e), c(!1), L(!1));
                 },
-                className: `hfl-text-1 hfl-block hfl-px-4 hfl-py-2 hfl-rounded-md hover:hfl-bg-Blue-50 hfl-cursor-pointer custom_dropdown_item ${de ? "odd:hfl-bg-Gray-100" : ""}  ${Q ? "hfl-bg-Blue-50 hfl-text-Blue-500" : ""}`,
+                className: `hfl-text-1 hfl-block hfl-px-4 hfl-py-2 hfl-rounded-md hover:hfl-bg-Blue-50 hfl-cursor-pointer custom_dropdown_item ${de ? "odd:hfl-bg-Gray-100" : ""}  ${Z ? "hfl-bg-Blue-50 hfl-text-Blue-500" : ""}`,
                 role: "menuitem",
-                "aria-selected": Q,
+                "aria-selected": Z,
                 tabIndex: ve ? 0 : -1,
-                ref: (B) => {
-                  I.current[t] = B;
+                ref: (S) => {
+                  k.current[t] = S;
                 },
-                children: c ? /* @__PURE__ */ l.jsx(
+                children: h ? /* @__PURE__ */ l.jsx(
                   $e,
                   {
                     size: "sm",
@@ -241,14 +232,14 @@ function Be(i) {
                     text: /* @__PURE__ */ l.jsx("span", { children: e.label }),
                     secondaryText: "",
                     id: `${e.label}-${t}`,
-                    isMarked: o
+                    isMarked: s
                   }
                 ) : e.label
               },
               `${e.label}-${t}`
             ) : null;
           }),
-          h?.length === 0 && fe && /* @__PURE__ */ l.jsx(
+          i?.length === 0 && fe && /* @__PURE__ */ l.jsx(
             "li",
             {
               className: "hfl-block hfl-px-4 hfl-py-2 hfl-rounded-md hover:hfl-bg-Blue-50 hfl-cursor-pointer custom_dropdown_item",
@@ -261,5 +252,5 @@ function Be(i) {
   ] });
 }
 export {
-  Be as default
+  Pe as default
 };

package/dist/useOutsideClick-C4Q0aGuf.js

@@ -0,0 +1,15 @@
+import { useCallback as s, useEffect as o } from "react";
+const c = (e, u) => {
+  const t = s(
+    (n) => {
+      e.current && !e.current.contains(n.target) && u();
+    },
+    [e, u]
+  );
+  o(() => (document.addEventListener("mouseup", t), () => {
+    document.removeEventListener("mouseup", t);
+  }), [t]);
+};
+export {
+  c as u
+};

package/dist/useOutsideClick-CicUjzPP.cjs

@@ -0,0 +1 @@
+"use strict";const s=require("react"),c=(e,u)=>{const t=s.useCallback(n=>{e.current&&!e.current.contains(n.target)&&u()},[e,u]);s.useEffect(()=>(document.addEventListener("mouseup",t),()=>{document.removeEventListener("mouseup",t)}),[t])};exports.useOutsideClick=c;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hplx-feature-library",
   "private": false,
-  "version": "1.0.77",
+  "version": "1.0.79",
   "type": "module",
   "scripts": {
     "dev": "npm i hplx-react-elements-dev@qa && vite",