hplx-feature-library 1.0.71 → 1.0.72

package/dist/CustomDropdown/index.js

@@ -0,0 +1,265 @@
+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 { 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) {
+  const {
+    label: u,
+    labelClassName: a,
+    hideDropdownIcon: N,
+    showClearOption: H,
+    isRequiredField: U,
+    btnClassName: X,
+    placeholder: M,
+    options: h,
+    selectedOption: g,
+    onChangeHandler: T,
+    inputValue: s,
+    inputChangeHandler: f,
+    onInputFocusOutEvent: _,
+    inputClassName: ee,
+    isSearchable: le,
+    inputType: te,
+    showInput: k,
+    inputSuffix: G,
+    selectedLabel: R,
+    suffixPadding: ne,
+    disableInputAutoSize: oe,
+    selectedOptions: L,
+    isMulti: c,
+    dropDownItemClickHandler: z,
+    showToggle: se,
+    toggleChangeHandler: re,
+    selectedToggleOption: ie,
+    toggleOptionsList: ae,
+    border: w,
+    height: b,
+    disabled: d,
+    fieldColor: v,
+    errorMsg: E,
+    showErrorMsg: he,
+    placeholderStyle: n,
+    onInputKeyDown: W,
+    showEmptyDropdownPopup: fe = !0,
+    isDropdownFixed: y = !1,
+    dropdownClassName: ce = "",
+    wrapperClass: V = "",
+    maxInputLength: K,
+    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(
+    (e) => {
+      e.stopPropagation(), d || p((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;
+      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`;
+      }
+    }
+  }, [y, r, k]);
+  F(() => {
+    if (y)
+      return r ? (x(), window.addEventListener("scroll", x, !0)) : window.removeEventListener("scroll", x, !0), () => {
+        window.removeEventListener("scroll", x, !0);
+      };
+  }, [y, x, r]), Ne(C, () => {
+    ge && _ && _();
+  });
+  const J = (e) => {
+    if (c && z) {
+      const t = L?.some((o) => o.value === e.value);
+      z(!!t, e);
+    }
+  }, be = j(
+    async (e) => {
+      e.stopPropagation(), r || p(!0), O && await O();
+    },
+    [O, 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}` }),
+      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: [
+      /* @__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,
+          children: [
+            L?.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",
+                children: [
+                  /* @__PURE__ */ l.jsx("span", { className: "hfl-pointer-events-none", children: e.label }),
+                  /* @__PURE__ */ l.jsx(
+                    "span",
+                    {
+                      onClick: (o) => {
+                        o.stopPropagation(), J(e);
+                      },
+                      className: "hx_close hfl-text-Gray-500 hfl-my-0 hfl-text-[14px] hfl-ml-[1px] hfl-cursor-pointer"
+                    }
+                  )
+                ]
+              },
+              `${e.label}-${t}`
+            )),
+            Object.keys(n || {}).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};
+                  }
+                ` }),
+            /* @__PURE__ */ l.jsx(
+              "input",
+              {
+                ref: S,
+                style: oe ? {} : { width: `${Number(s?.length) > 4 ? (s?.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 || ""}`,
+                onChange: (e) => {
+                  f && f(e.target.value), D(!0);
+                },
+                onClick: be,
+                onKeyDown: (e) => W && W(e, p, S),
+                maxLength: K ?? K,
+                ...i.inputProps || {}
+              }
+            ),
+            !N && !H && /* @__PURE__ */ l.jsx("i", { className: "hx_down hfl-mx-2" }),
+            H && /* @__PURE__ */ l.jsx(
+              "i",
+              {
+                className: `${s ? "hx_close hfl-cursor-pointer" : "hx_down"} hfl-mx-2`,
+                onClick: () => {
+                  (g?.value || s) && (f && f(""), D(!0));
+                }
+              }
+            ),
+            G ? /* @__PURE__ */ l.jsx(
+              "span",
+              {
+                style: { left: `${Z < 2 ? "3" : Z}ch` },
+                className: "hfl-absolute hfl-top-1/2 hfl--translate-y-1/2 hfl-pointer-events-none",
+                children: G
+              }
+            ) : null
+          ]
+        }
+      ),
+      he && /* @__PURE__ */ l.jsx("span", { className: "hfl-text-0 hfl-text-Error-600", children: E })
+    ] }) : /* @__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
+        } : {},
+        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" })
+        ]
+      }
+    ),
+    h && h?.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}`,
+        role: "menu",
+        "aria-orientation": "vertical",
+        "aria-labelledby": "options-menu",
+        children: [
+          se ? /* @__PURE__ */ l.jsx(
+            ke,
+            {
+              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;
+            return e ? /* @__PURE__ */ l.jsx(
+              "li",
+              {
+                onClick: () => {
+                  c ? J(e) : (T && T(e), p(!1), D(!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" : ""}`,
+                role: "menuitem",
+                "aria-selected": Q,
+                tabIndex: ve ? 0 : -1,
+                ref: (B) => {
+                  I.current[t] = B;
+                },
+                children: c ? /* @__PURE__ */ l.jsx(
+                  $e,
+                  {
+                    size: "sm",
+                    disabled: !1,
+                    text: /* @__PURE__ */ l.jsx("span", { children: e.label }),
+                    secondaryText: "",
+                    id: `${e.label}-${t}`,
+                    isMarked: o
+                  }
+                ) : e.label
+              },
+              `${e.label}-${t}`
+            ) : null;
+          }),
+          h?.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",
+              children: "No items found, please change the search criteria"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+export {
+  Be as default
+};