hplx-feature-library 1.0.159 → 1.0.160

package/dist/CustomDropdown/index.js

@@ -0,0 +1,256 @@
+import { j as l, b as ye, N as Ce, O as $e } from "../index-4whwJbrk.js";
+import { useState as S, useRef as v, useMemo as je, useCallback as I, useEffect as J } from "react";
+import { u as Ne } from "../useClickOutside-BjJyGTec.js";
+import { u as ke } from "../useOutsideClick-C4Q0aGuf.js";
+import Le from "../ToggleButtons/index.js";
+const Oe = "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 Fe(D) {
+  const {
+    label: E,
+    labelClassName: B,
+    hideDropdownIcon: Q,
+    showClearOption: F,
+    isRequiredField: U,
+    btnClassName: X,
+    placeholder: H,
+    options: i,
+    selectedOption: p,
+    onChangeHandler: P,
+    inputValue: n,
+    inputChangeHandler: a,
+    onInputFocusOutEvent: T,
+    inputClassName: ee,
+    isSearchable: le,
+    inputType: te,
+    showInput: y,
+    inputSuffix: _,
+    selectedLabel: G,
+    suffixPadding: se,
+    disableInputAutoSize: oe,
+    selectedOptions: C,
+    isMulti: h,
+    dropDownItemClickHandler: M,
+    showToggle: ne,
+    toggleChangeHandler: re,
+    selectedToggleOption: ie,
+    toggleOptionsList: ae,
+    border: m,
+    height: x,
+    disabled: f,
+    fieldColor: g,
+    errorMsg: $,
+    showErrorMsg: he,
+    placeholderStyle: s,
+    onInputKeyDown: R,
+    showEmptyDropdownPopup: fe = !0,
+    isDropdownFixed: b = !1,
+    dropdownClassName: ce = "",
+    wrapperClass: z = "",
+    maxInputLength: W,
+    alternateListBgStyle: de,
+    showLabelTooltip: ue = !1,
+    labelToolTipContent: pe = "",
+    inputContainerClasses: V = "",
+    onInputFocus: j
+  } = D, [r, c] = S(!1), [d, me] = S(null), w = 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] = S(!1), be = () => {
+    c(!1), h && a && a(""), me(null);
+  }, Y = I(
+    (e) => {
+      e.stopPropagation(), f || c((t) => !t);
+    },
+    [f]
+  ), q = (n?.length || 0) + 2 + Number(se || 0);
+  ke(w, be), J(() => {
+    d !== null && k.current[d] && k.current[d].scrollIntoView({ block: "nearest" });
+  }, [d]);
+  const u = I(() => {
+    if (b && r) {
+      const e = y ? N.current : K.current, t = w.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`;
+      }
+    }
+  }, [b, r, y]);
+  J(() => {
+    if (b)
+      return r ? (u(), window.addEventListener("scroll", u, !0)) : window.removeEventListener("scroll", u, !0), () => {
+        window.removeEventListener("scroll", u, !0);
+      };
+  }, [b, u, r]), Ne(w, () => {
+    ge && T && T();
+  });
+  const A = (e) => {
+    if (h && M) {
+      const t = C?.some((o) => o.value === e.value);
+      M(!!t, e);
+    }
+  }, we = I(
+    async (e) => {
+      e.stopPropagation(), r || c(!0), j && await j();
+    },
+    [j, r]
+  );
+  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" }) })
+    ] }),
+    y ? /* @__PURE__ */ l.jsxs(l.Fragment, { children: [
+      /* @__PURE__ */ l.jsxs(
+        "div",
+        {
+          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: [
+            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",
+                children: [
+                  /* @__PURE__ */ l.jsx("span", { className: "hfl-pointer-events-none", children: e.label }),
+                  /* @__PURE__ */ l.jsx(
+                    "span",
+                    {
+                      onClick: (o) => {
+                        o.stopPropagation(), A(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(s || {}).length > 0 && /* @__PURE__ */ l.jsx("style", { children: `
+                  input.input-placeholder::placeholder {
+                  font-family: ${s?.fontFamily};
+                  font-weight: ${s?.fontWeight};
+                  line-height: ${s?.lineHeight};
+                  font-size: ${s?.fontSize};
+                  color: ${s?.color};
+                  }
+                ` }),
+            /* @__PURE__ */ l.jsx(
+              "input",
+              {
+                ref: N,
+                style: oe ? {} : { width: `${Number(n?.length) > 4 ? (n?.length || 0) + 5 : 12}ch` },
+                type: te,
+                placeholder: H,
+                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) => {
+                  a && a(e.target.value), L(!0);
+                },
+                onClick: we,
+                onKeyDown: (e) => R && R(e, c, N),
+                maxLength: W ?? W,
+                ...D.inputProps || {}
+              }
+            ),
+            !Q && !F && /* @__PURE__ */ l.jsx("i", { className: "hx_down hfl-mx-2" }),
+            F && /* @__PURE__ */ l.jsx(
+              "i",
+              {
+                className: `${n ? "hx_close hfl-cursor-pointer" : "hx_down"} hfl-mx-2`,
+                onClick: () => {
+                  (p?.value || n) && (a && a(""), L(!0));
+                }
+              }
+            ),
+            _ ? /* @__PURE__ */ l.jsx(
+              "span",
+              {
+                style: { left: `${q < 2 ? "3" : q}ch` },
+                className: "hfl-absolute hfl-top-1/2 hfl--translate-y-1/2 hfl-pointer-events-none",
+                children: _
+              }
+            ) : null
+          ]
+        }
+      ),
+      he && /* @__PURE__ */ l.jsx("span", { className: "hfl-text-0 hfl-text-Error-600", children: $ })
+    ] }) : /* @__PURE__ */ l.jsxs(
+      "button",
+      {
+        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: G || p?.label ? {} : s ? {
+          fontFamily: s?.fontFamily,
+          fontSize: s?.fontSize,
+          fontWeight: s?.fontWeight,
+          lineHeight: s?.lineHeight,
+          color: s?.color
+        } : {},
+        children: [
+          /* @__PURE__ */ l.jsx("span", { className: "hfl-pr-4", children: G || p?.label || H || "Select an option" }),
+          /* @__PURE__ */ l.jsx("img", { src: Oe, alt: "down arrow" })
+        ]
+      }
+    ),
+    i && i?.length >= 0 && /* @__PURE__ */ l.jsxs(
+      "ul",
+      {
+        ref: w,
+        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: [
+          ne ? /* @__PURE__ */ l.jsx(
+            Le,
+            {
+              onChangeHandler: re,
+              selectedOption: ie,
+              options: ae
+            }
+          ) : !1,
+          (le ? xe : i)?.map((e, t) => {
+            const o = h ? !!C?.some((O) => O.value === e?.value) : !1, Z = p?.value === e?.value, ve = d === t;
+            return e ? /* @__PURE__ */ l.jsx(
+              "li",
+              {
+                onClick: () => {
+                  h ? A(e) : (P && P(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" : ""}  ${Z ? "hfl-bg-Blue-50 hfl-text-Blue-500" : ""}`,
+                role: "menuitem",
+                "aria-selected": Z,
+                tabIndex: ve ? 0 : -1,
+                ref: (O) => {
+                  k.current[t] = O;
+                },
+                children: h ? /* @__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;
+          }),
+          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",
+              children: "No items found, please change the search criteria"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+export {
+  Fe as default
+};