hplx-feature-library 1.0.170 → 1.0.172

package/dist/CustomDropdown/index.js

@@ -1,256 +0,0 @@
-import { j as l, b as ye, N as Ce, O as $e } from "../index-sG1tIMJ6.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
-};