se-design 0.0.124 → 0.0.126

package/dist/index35.js

@@ -1,51 +1,60 @@
-import c, { useState as p, useRef as E } from "react";
+import a, { useState as o, useRef as d } from "react";
 /* empty css         */
 import { Icon as T } from "./index5.js";
-function R({
-  value: m,
+function _({
+  value: f,
   onChange: e,
-  placeholder: o,
-  className: f
+  placeholder: w,
+  className: E,
+  error: n,
+  errorMessage: v,
+  label: r
 }) {
-  const [a, l] = p([...m]), [i, r] = p(""), u = E(null), w = (t) => {
-    if (t.key === "Enter" && i.trim()) {
+  const [i, l] = o([...f]), [c, m] = o(""), u = d(null), N = (t) => {
+    if (t.key === "Enter" && c.trim()) {
       t.preventDefault();
-      const s = [...a, i.trim()];
-      l(s), r(""), e == null || e(s);
-    } else if (t.key === "Backspace" && i === "" && a.length > 0) {
-      const s = a.slice(0, -1);
+      const s = [...i, c.trim()];
+      l(s), m(""), e == null || e(s);
+    } else if (t.key === "Backspace" && c === "" && i.length > 0) {
+      const s = i.slice(0, -1);
       l(s), e == null || e(s);
     }
   };
-  return /* @__PURE__ */ c.createElement("div", {
-    className: `input-with-tags-container ${f}`,
+  return /* @__PURE__ */ a.createElement("div", {
+    className: "input-with-tags-main-container"
+  }, r && /* @__PURE__ */ a.createElement("div", {
+    className: "label-container"
+  }, r), /* @__PURE__ */ a.createElement("div", {
+    className: `input-with-tags-container ${n ? "input-with-tags-error" : ""} ${E}`,
     onClick: () => {
       var t;
       return (t = u.current) == null ? void 0 : t.focus();
     }
-  }, a.map((t, s) => /* @__PURE__ */ c.createElement("span", {
+  }, i.map((t, s) => /* @__PURE__ */ a.createElement("span", {
     key: s,
     className: "tag-in-inputwithtags"
-  }, t, /* @__PURE__ */ c.createElement("span", {
+  }, t, /* @__PURE__ */ a.createElement("span", {
     className: "close-icon-in-inputwithtags",
     onClick: (k) => {
       k.stopPropagation();
-      const n = a.filter((v, y) => y !== s);
-      l(n), e == null || e(n);
+      const p = i.filter((g, y) => y !== s);
+      l(p), e == null || e(p);
     }
-  }, /* @__PURE__ */ c.createElement(T, {
+  }, /* @__PURE__ */ a.createElement(T, {
     name: "close"
-  })))), /* @__PURE__ */ c.createElement("input", {
+  })))), /* @__PURE__ */ a.createElement("input", {
     className: "input-with-tags-input",
     ref: u,
     type: "text",
-    value: i,
-    onChange: (t) => r(t.target.value),
-    onKeyDown: w,
-    placeholder: o
-  }));
+    value: c,
+    onChange: (t) => m(t.target.value),
+    onKeyDown: N,
+    placeholder: w
+  })), n && /* @__PURE__ */ a.createElement("div", {
+    className: "error-message"
+  }, v));
 }
 export {
-  R as InputWithTags
+  _ as InputWithTags
 };
 //# sourceMappingURL=index35.js.map

package/dist/index35.js.map

@@ -1 +1 @@
-{"version":3,"file":"index35.js","sources":["../src/components/InputWithTags/index.tsx"],"sourcesContent":["import React, { useState, KeyboardEvent, useRef } from \"react\";\nimport './styles.scss';\nimport { Icon } from '../Icon';\nexport interface InputWithTagsProps {\n    value: string[];\n    onChange?: (tags: string[]) => void;\n    placeholder?: string;\n    className?: string;\n}\n\nexport function InputWithTags({ value, onChange, placeholder, className }: InputWithTagsProps) {\n    const [tags, setTags] = useState<string[]>([...value]);\n    const [inputValue, setInputValue] = useState('');\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Enter' && inputValue.trim()) {\n            e.preventDefault();\n            const newTags = [...tags, inputValue.trim()];\n            setTags(newTags);\n            setInputValue(\"\");\n            onChange?.(newTags);\n        } else if (e.key === 'Backspace' && inputValue === \"\" && tags.length > 0) {\n            // Remove the last tag when backspace is pressed on empty input\n            const newTags = tags.slice(0, -1);\n            setTags(newTags);\n            onChange?.(newTags);\n        }\n    };\n\n    return (\n        <div className={`input-with-tags-container ${className}`} onClick={() => inputRef.current?.focus()} >\n            {tags.map((tag, index) => (\n                <span key={index} className=\"tag-in-inputwithtags\">\n                    {tag} \n                    <span\n                    className=\"close-icon-in-inputwithtags\"\n                    onClick={(e) => {\n                        e.stopPropagation();\n                        const newTags = tags.filter((_, i) => i !== index);\n                        setTags(newTags);\n                        onChange?.(newTags);\n                    }}\n                    >\n                        <Icon name=\"close\" />\n                    </span>\n                </span>\n            ))}\n            <input\n                className=\"input-with-tags-input\"\n                ref={inputRef}\n                type=\"text\"\n                value={inputValue}\n                onChange={(e) => setInputValue(e.target.value)}\n                onKeyDown={handleKeyDown}\n                placeholder={placeholder}\n            />\n        </div>\n    );\n}"],"names":["React__default","useState","useRef","Icon","InputWithTags","value","onChange","placeholder","className","tags","setTags","inputValue","setInputValue","inputRef","handleKeyDown","e","key","trim","preventDefault","newTags","length","slice","React","createElement","onClick","_a","current","focus","map","tag","index","stopPropagation","filter","_","i","name","ref","type","target","onKeyDown"],"mappings":"AAUO,OAAAA,KAAA,YAAAC,GAAA,UAAAC,SAAA;AAAA,OAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAASC,EAAc;AAAA,EAAEC,OAAAA;AAAAA,EAAOC,UAAAA;AAAAA,EAAUC,aAAAA;AAAAA,EAAaC,WAAAA;AAA8B,GAAG;AACrF,QAAA,CAACC,GAAMC,CAAO,IAAIT,EAAmB,CAAC,GAAGI,CAAK,CAAC,GAC/C,CAACM,GAAYC,CAAa,IAAIX,EAAS,EAAE,GACzCY,IAAWX,EAAyB,IAAI,GAExCY,IAAgBA,CAACC,MAAuC;AAC1D,QAAIA,EAAEC,QAAQ,WAAWL,EAAWM,QAAQ;AACxCF,MAAAA,EAAEG,eAAe;AACjB,YAAMC,IAAU,CAAC,GAAGV,GAAME,EAAWM,MAAM;AAC3CP,MAAAA,EAAQS,CAAO,GACfP,EAAc,EAAE,GAChBN,KAAAA,QAAAA,EAAWa;AAAAA,IAAO,WACXJ,EAAEC,QAAQ,eAAeL,MAAe,MAAMF,EAAKW,SAAS,GAAG;AAEtE,YAAMD,IAAUV,EAAKY,MAAM,GAAG,EAAE;AAChCX,MAAAA,EAAQS,CAAO,GACfb,KAAAA,QAAAA,EAAWa;AAAAA,IAAO;AAAA,EAE1B;AAGIG,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKf,WAAW,6BAA6BA,CAAS;AAAA,IAAIgB,SAASA,MAAAA;AArBpE,UAAAC;AAqB0EZ,cAAAA,IAAAA,EAASa,YAATb,gBAAAA,EAAkBc;AAAAA;AAAAA,EAAM,GAC5FlB,EAAKmB,IAAI,CAACC,GAAKC,MACZR,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMP,KAAKc;AAAAA,IAAOtB,WAAU;AAAA,EACvBqB,GAAAA,GACDN,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IACAf,WAAU;AAAA,IACVgB,SAAUT,CAAMA,MAAA;AACZA,MAAAA,EAAEgB,gBAAgB;AAClB,YAAMZ,IAAUV,EAAKuB,OAAO,CAACC,GAAGC,MAAMA,MAAMJ,CAAK;AACjDpB,MAAAA,EAAQS,CAAO,GACfb,KAAAA,QAAAA,EAAWa;AAAAA,IAAO;AAAA,EACtB,GAEII,gBAAAA,EAAAA,cAACpB,GAAI;AAAA,IAACgC,MAAK;AAAA,EAAS,CAAA,CAClB,CACJ,CACT,GACDb,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACIf,WAAU;AAAA,IACV4B,KAAKvB;AAAAA,IACLwB,MAAK;AAAA,IACLhC,OAAOM;AAAAA,IACPL,UAAWS,CAAAA,MAAMH,EAAcG,EAAEuB,OAAOjC,KAAK;AAAA,IAC7CkC,WAAWzB;AAAAA,IACXP,aAAAA;AAAAA,EAAAA,CACH,CACA;AAEb;"}
+{"version":3,"file":"index35.js","sources":["../src/components/InputWithTags/index.tsx"],"sourcesContent":["import React, { useState, KeyboardEvent, useRef } from \"react\";\nimport './styles.scss';\nimport { Icon } from '../Icon';\n\nexport interface InputWithTagsProps {\n    value: string[];\n    onChange?: (tags: string[]) => void;\n    placeholder?: string;\n    className?: string;\n    error?: boolean;\n    errorMessage?: string;\n    label?: string;\n}\n\nexport function InputWithTags({ \n    value, \n    onChange, \n    placeholder, \n    className, \n    error, \n    errorMessage, \n    label \n}: InputWithTagsProps) {\n    const [tags, setTags] = useState<string[]>([...value]);\n    const [inputValue, setInputValue] = useState('');\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Enter' && inputValue.trim()) {\n            e.preventDefault();\n            const newTags = [...tags, inputValue.trim()];\n            setTags(newTags);\n            setInputValue(\"\");\n            onChange?.(newTags);\n        } else if (e.key === 'Backspace' && inputValue === \"\" && tags.length > 0) {\n            // Remove the last tag when backspace is pressed on empty input\n            const newTags = tags.slice(0, -1);\n            setTags(newTags);\n            onChange?.(newTags);\n        }\n    };\n\n    return (\n        <div className=\"input-with-tags-main-container\">\n            {label && <div className=\"label-container\">{label}</div>}\n            <div \n                className={`input-with-tags-container ${error ? 'input-with-tags-error' : ''} ${className}`} \n                onClick={() => inputRef.current?.focus()}\n            >\n                {tags.map((tag, index) => (\n                    <span key={index} className=\"tag-in-inputwithtags\">\n                        {tag} \n                        <span\n                        className=\"close-icon-in-inputwithtags\"\n                        onClick={(e) => {\n                            e.stopPropagation();\n                            const newTags = tags.filter((_, i) => i !== index);\n                            setTags(newTags);\n                            onChange?.(newTags);\n                        }}\n                        >\n                            <Icon name=\"close\" />\n                        </span>\n                    </span>\n                ))}\n                <input\n                    className=\"input-with-tags-input\"\n                    ref={inputRef}\n                    type=\"text\"\n                    value={inputValue}\n                    onChange={(e) => setInputValue(e.target.value)}\n                    onKeyDown={handleKeyDown}\n                    placeholder={placeholder}\n                />\n            </div>\n            {error && <div className=\"error-message\">{errorMessage}</div>}\n        </div>\n    );\n}"],"names":["React__default","useState","useRef","Icon","InputWithTags","value","onChange","placeholder","className","error","errorMessage","label","tags","setTags","inputValue","setInputValue","inputRef","handleKeyDown","e","key","trim","preventDefault","newTags","length","slice","React","createElement","onClick","_a","current","focus","map","tag","index","stopPropagation","filter","_","i","name","ref","type","target","onKeyDown"],"mappings":"AAcO,OAAAA,KAAA,YAAAC,GAAA,UAAAC,SAAA;AAAA,OAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAASC,EAAc;AAAA,EAC1BC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AACgB,GAAG;AACb,QAAA,CAACC,GAAMC,CAAO,IAAIZ,EAAmB,CAAC,GAAGI,CAAK,CAAC,GAC/C,CAACS,GAAYC,CAAa,IAAId,EAAS,EAAE,GACzCe,IAAWd,EAAyB,IAAI,GAExCe,IAAgBA,CAACC,MAAuC;AAC1D,QAAIA,EAAEC,QAAQ,WAAWL,EAAWM,QAAQ;AACxCF,MAAAA,EAAEG,eAAe;AACjB,YAAMC,IAAU,CAAC,GAAGV,GAAME,EAAWM,MAAM;AAC3CP,MAAAA,EAAQS,CAAO,GACfP,EAAc,EAAE,GAChBT,KAAAA,QAAAA,EAAWgB;AAAAA,IAAO,WACXJ,EAAEC,QAAQ,eAAeL,MAAe,MAAMF,EAAKW,SAAS,GAAG;AAEtE,YAAMD,IAAUV,EAAKY,MAAM,GAAG,EAAE;AAChCX,MAAAA,EAAQS,CAAO,GACfhB,KAAAA,QAAAA,EAAWgB;AAAAA,IAAO;AAAA,EAE1B;AAGIG,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKlB,WAAU;AAAA,EACVG,GAAAA,KAASe,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKlB,WAAU;AAAA,EAAmBG,GAAAA,CAAW,GACvDc,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACIlB,WAAW,6BAA6BC,IAAQ,0BAA0B,EAAE,IAAID,CAAS;AAAA,IACzFmB,SAASA,MAAAA;AAjClB,UAAAC;AAiCwBZ,cAAAA,IAAAA,EAASa,YAATb,gBAAAA,EAAkBc;AAAAA;AAAAA,EAAM,GAEtClB,EAAKmB,IAAI,CAACC,GAAKC,MACZR,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMP,KAAKc;AAAAA,IAAOzB,WAAU;AAAA,EACvBwB,GAAAA,GACDN,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IACAlB,WAAU;AAAA,IACVmB,SAAUT,CAAMA,MAAA;AACZA,MAAAA,EAAEgB,gBAAgB;AAClB,YAAMZ,IAAUV,EAAKuB,OAAO,CAACC,GAAGC,MAAMA,MAAMJ,CAAK;AACjDpB,MAAAA,EAAQS,CAAO,GACfhB,KAAAA,QAAAA,EAAWgB;AAAAA,IAAO;AAAA,EACtB,GAEII,gBAAAA,EAAAA,cAACvB,GAAI;AAAA,IAACmC,MAAK;AAAA,EAAS,CAAA,CAClB,CACJ,CACT,GACDb,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACIlB,WAAU;AAAA,IACV+B,KAAKvB;AAAAA,IACLwB,MAAK;AAAA,IACLnC,OAAOS;AAAAA,IACPR,UAAWY,CAAAA,MAAMH,EAAcG,EAAEuB,OAAOpC,KAAK;AAAA,IAC7CqC,WAAWzB;AAAAA,IACXV,aAAAA;AAAAA,EACH,CAAA,CACA,GACJE,KAASgB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKlB,WAAU;AAAA,EAAe,GAAEE,CAAkB,CAC3D;AAEb;"}

package/dist/index38.js

@@ -1,87 +1,87 @@
-import n, { useState as h, useRef as $, useEffect as s, useMemo as z } from "react";
-import { Icon as g } from "./index5.js";
+import n, { useState as b, useRef as $, useEffect as s, useMemo as z } from "react";
+import { Icon as N } from "./index5.js";
 import { LabelChip as D } from "./index9.js";
-import { debounce as F } from "./index140.js";
+import { debounce as F } from "./index141.js";
 /* empty css         */
-function q(r) {
+function q(o) {
   const {
-    disabled: v = !1,
-    placeholder: N = "Search",
-    debounceDuration: f = 500,
-    onInputChange: l = () => {
+    disabled: S = !1,
+    placeholder: p = "Search",
+    debounceDuration: E = 500,
+    onInputChange: c = () => {
     },
-    onSearchClear: S = () => {
+    onSearchClear: I = () => {
     },
-    onChipRemove: I = () => {
+    onChipRemove: k = () => {
     },
-    updateSearchString: i = "",
-    collapsible: p = !1,
-    width: k = "200px",
-    chips: m = [],
-    showSearchIcon: w = !0,
-    renderFilterComponent: b = null
-  } = r, [t, d] = h(""), [o, E] = h(!(r != null && r.collapsible)), [a, x] = h(m || []), c = $(null);
+    updateSearchString: m = "",
+    collapsible: h = !1,
+    width: w = "200px",
+    chips: i = [],
+    showSearchIcon: y = !0,
+    renderFilterComponent: v = null
+  } = o, [t, u] = b(""), [l, x] = b(!(o != null && o.collapsible)), [a, C] = b(i || []), r = $(null);
   s(() => {
-    o && c.current && setTimeout(() => {
+    l && r.current && setTimeout(() => {
       var e;
-      return (e = c == null ? void 0 : c.current) == null ? void 0 : e.focus();
+      return (e = r == null ? void 0 : r.current) == null ? void 0 : e.focus();
     }, 0);
-  }, [o]), s(() => {
-    i !== t && d(i);
-  }, [i]), s(() => {
-    x(m);
-  }, [m]);
-  const u = z(() => F(l, f), [l, f]);
+  }, [l]), s(() => {
+    m !== t && u(m);
+  }, [m]), s(() => {
+    C(i);
+  }, [i]);
+  const d = z(() => F(c, E), [c, E]);
   s(() => () => {
-    u.cancel();
-  }, [u]);
-  const y = (e) => {
-    d(e), u(e);
-  }, B = () => {
-    d(""), l(""), S();
+    d.cancel();
+  }, [d]);
+  const B = (e) => {
+    u(e), d(e);
   }, H = () => {
-    p && (t == null ? void 0 : t.trimEnd()) === "" && E(!1);
-  }, _ = (e) => {
-    x(a.filter((R) => R !== e)), I(e);
-  }, C = (a == null ? void 0 : a.length) > 0;
+    u(""), c(""), I();
+  }, _ = () => {
+    h && (t == null ? void 0 : t.trimEnd()) === "" && x(!1);
+  }, R = (e) => {
+    C(a.filter((f) => (f == null ? void 0 : f.value) !== (e == null ? void 0 : e.value))), k(e);
+  }, g = (a == null ? void 0 : a.length) > 0;
   return /* @__PURE__ */ n.createElement("div", {
-    className: `se-search-box ${o ? "expand-box" : "shrink-box"}`,
+    className: `se-search-box ${l ? "expand-box" : "shrink-box"}`,
     style: {
-      width: k
+      width: w
     }
-  }, o && /* @__PURE__ */ n.createElement("div", {
+  }, l && /* @__PURE__ */ n.createElement("div", {
     className: "search-box-container"
   }, /* @__PURE__ */ n.createElement("div", {
-    className: `chips-and-search-box-container${C ? " has-chips" : ""}`
-  }, C && (a == null ? void 0 : a.map((e) => /* @__PURE__ */ n.createElement(D, {
-    key: e,
-    label: e,
+    className: `chips-and-search-box-container${g ? " has-chips" : ""}`
+  }, g && (a == null ? void 0 : a.map((e) => /* @__PURE__ */ n.createElement(D, {
+    key: e == null ? void 0 : e.value,
+    label: e == null ? void 0 : e.label,
     icon: "close",
-    onIconClick: () => _(e),
+    onIconClick: () => R(e),
     size: "lg"
   }))), /* @__PURE__ */ n.createElement("div", {
     className: "search-input-container"
-  }, w && /* @__PURE__ */ n.createElement(g, {
+  }, y && /* @__PURE__ */ n.createElement(N, {
     name: "search",
     className: "search-icon img-wrap",
-    onClick: () => p && E((e) => !e)
+    onClick: () => h && x((e) => !e)
   }), /* @__PURE__ */ n.createElement("input", {
-    ref: c,
+    ref: r,
     className: "search-input border-transparent focus:border-transparent active:border-transparent focus:ring-0",
     id: "search_bar",
     type: "text",
-    placeholder: N,
-    onChange: (e) => y(e.target.value),
+    placeholder: p,
+    onChange: (e) => B(e.target.value),
     value: t,
-    disabled: v,
-    onBlur: H
-  }), !!t && /* @__PURE__ */ n.createElement(g, {
+    disabled: S,
+    onBlur: _
+  }), !!t && /* @__PURE__ */ n.createElement(N, {
     name: "close",
     className: "cross-icon img-wrap",
-    onClick: B
-  }))), b && /* @__PURE__ */ n.createElement("div", {
+    onClick: H
+  }))), v && /* @__PURE__ */ n.createElement("div", {
     className: "filter-component-container"
-  }, b())));
+  }, v())));
 }
 export {
   q as SearchBox

package/dist/index38.js.map

@@ -1 +1 @@
-{"version":3,"file":"index38.js","sources":["../src/components/SearchBox/index.tsx"],"sourcesContent":["import React, { useState, useMemo, useEffect, useRef } from 'react';\n\nimport { Icon } from 'components/Icon';\nimport { LabelChip } from 'components/LabelChip';\nimport { debounce } from 'utils/debounce';\n\nimport './style.scss';\n\nexport interface SearchBoxProps {\n  disabled?: boolean;\n  placeholder?: string;\n  debounceDuration?: number;\n  onInputChange?: (value: string) => void;\n  onSearchClear?: () => void;\n  onChipRemove?: (chip: string) => void;\n  updateSearchString?: string;\n  collapsible?: boolean;\n  width?: string;\n  chips?: string[];\n  showSearchIcon?: boolean;\n  renderFilterComponent?: () => React.ReactNode;\n}\n\nexport function SearchBox(props: SearchBoxProps) {\n  const {\n    disabled = false,\n    placeholder = 'Search',\n    debounceDuration = 500,\n    onInputChange = () => {},\n    onSearchClear = () => {},\n    onChipRemove = () => {},\n    updateSearchString = '',\n    collapsible = false,\n    width = '200px',\n    chips = [],\n    showSearchIcon = true,\n    renderFilterComponent = null\n  } = props;\n  const [inputValue, setInputValue] = useState('');\n  const [isExpanded, setIsExpanded] = useState(!props?.collapsible);\n  const [searchChips, setSearchChips] = useState<string[]>(chips || []);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (isExpanded && inputRef.current) {\n      setTimeout(() => inputRef?.current?.focus(), 0);\n    }\n  }, [isExpanded]);\n\n  // Manually update the searchbox text\n  useEffect(() => {\n    if (updateSearchString !== inputValue) {\n      setInputValue(updateSearchString);\n    }\n  }, [updateSearchString]);\n\n  useEffect(() => {\n    setSearchChips(chips);\n  }, [chips]);\n\n  const debouncedOnInputChange = useMemo(\n    () => debounce(onInputChange, debounceDuration),\n    [onInputChange, debounceDuration]\n  );\n\n  useEffect(() => {\n    return () => {\n      debouncedOnInputChange.cancel();\n    };\n  }, [debouncedOnInputChange]);\n\n  const onChangeHandler = (value: string) => {\n    setInputValue(value);\n    debouncedOnInputChange(value);\n  };\n\n  const iconClickHandler = () => {\n    setInputValue('');\n    onInputChange('');\n    onSearchClear();\n  };\n\n  const onBlurHandler = () => {\n    if (collapsible && inputValue?.trimEnd() === '') {\n      setIsExpanded(false);\n    }\n  };\n\n  const removeChip = (chip: string) => {\n    setSearchChips(searchChips.filter((c) => c !== chip));\n    onChipRemove(chip);\n  };\n\n  const hasChips = searchChips?.length > 0;\n\n  return (\n    <div className={`se-search-box ${isExpanded ? 'expand-box' : 'shrink-box'}`} style={{ width: width }}>\n      {/* <Icon name=\"search\" className=\"search-icon img-wrap\" onClick={() => collapsible && setIsExpanded((prev) => !prev)} /> */}\n      {isExpanded && (\n        <div className=\"search-box-container\">\n          <div className={`chips-and-search-box-container${hasChips ? ' has-chips' : ''}`}>\n            {hasChips &&\n              searchChips?.map((chip) => (\n                <LabelChip key={chip} label={chip} icon=\"close\" onIconClick={() => removeChip(chip)} size=\"lg\" />\n              ))}\n            <div className=\"search-input-container\">\n              {showSearchIcon && (\n                <Icon\n                  name=\"search\"\n                  className=\"search-icon img-wrap\"\n                  onClick={() => collapsible && setIsExpanded((prev) => !prev)}\n                />\n              )}\n              <input\n                ref={inputRef}\n                className={`search-input border-transparent focus:border-transparent active:border-transparent focus:ring-0`}\n                id=\"search_bar\"\n                type=\"text\"\n                placeholder={placeholder}\n                onChange={(e) => onChangeHandler(e.target.value)}\n                value={inputValue}\n                disabled={disabled}\n                onBlur={onBlurHandler}\n              />\n              {!!inputValue && <Icon name=\"close\" className=\"cross-icon img-wrap\" onClick={iconClickHandler} />}\n            </div>\n          </div>\n          {renderFilterComponent && <div className=\"filter-component-container\">{renderFilterComponent()}</div>}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["SearchBox","props","disabled","placeholder","debounceDuration","onInputChange","onSearchClear","onChipRemove","updateSearchString","collapsible","width","chips","showSearchIcon","renderFilterComponent","inputValue","setInputValue","useState","isExpanded","setIsExpanded","searchChips","setSearchChips","inputRef","useRef","useEffect","current","setTimeout","focus","debouncedOnInputChange","useMemo","debounce","cancel","onChangeHandler","value","iconClickHandler","onBlurHandler","trimEnd","removeChip","chip","filter","c","hasChips","length","React","createElement","className","style","map","LabelChip","key","label","icon","onIconClick","size","Icon","name","onClick","prev","ref","id","type","onChange","e","target","onBlur"],"mappings":";;;;;AAuBO,SAASA,EAAUC,GAAuB;AACzC,QAAA;AAAA,IACJC,UAAAA,IAAW;AAAA,IACXC,aAAAA,IAAc;AAAA,IACdC,kBAAAA,IAAmB;AAAA,IACnBC,eAAAA,IAAgBA,MAAM;AAAA,IAAC;AAAA,IACvBC,eAAAA,IAAgBA,MAAM;AAAA,IAAC;AAAA,IACvBC,cAAAA,IAAeA,MAAM;AAAA,IAAC;AAAA,IACtBC,oBAAAA,IAAqB;AAAA,IACrBC,aAAAA,IAAc;AAAA,IACdC,OAAAA,IAAQ;AAAA,IACRC,OAAAA,IAAQ,CAAE;AAAA,IACVC,gBAAAA,IAAiB;AAAA,IACjBC,uBAAAA,IAAwB;AAAA,EAAA,IACtBZ,GACE,CAACa,GAAYC,CAAa,IAAIC,EAAS,EAAE,GACzC,CAACC,GAAYC,CAAa,IAAIF,EAAS,EAACf,KAAAA,QAAAA,EAAOQ,YAAW,GAC1D,CAACU,GAAaC,CAAc,IAAIJ,EAAmBL,KAAS,CAAA,CAAE,GAC9DU,IAAWC,EAAyB,IAAI;AAE9CC,EAAAA,EAAU,MAAM;AACVN,IAAAA,KAAcI,EAASG,WACzBC,WAAW,MAAA;;AAAMJ,cAAAA,IAAAA,KAAAA,gBAAAA,EAAUG,YAAVH,gBAAAA,EAAmBK;AAAAA,OAAS,CAAC;AAAA,EAChD,GACC,CAACT,CAAU,CAAC,GAGfM,EAAU,MAAM;AACd,IAAIf,MAAuBM,KACzBC,EAAcP,CAAkB;AAAA,EAClC,GACC,CAACA,CAAkB,CAAC,GAEvBe,EAAU,MAAM;AACdH,IAAAA,EAAeT,CAAK;AAAA,EAAA,GACnB,CAACA,CAAK,CAAC;AAEJgB,QAAAA,IAAyBC,EAC7B,MAAMC,EAASxB,GAAeD,CAAgB,GAC9C,CAACC,GAAeD,CAAgB,CAClC;AAEAmB,EAAAA,EAAU,MACD,MAAM;AACXI,IAAAA,EAAuBG,OAAO;AAAA,EAChC,GACC,CAACH,CAAsB,CAAC;AAErBI,QAAAA,IAAkBA,CAACC,MAAkB;AACzCjB,IAAAA,EAAciB,CAAK,GACnBL,EAAuBK,CAAK;AAAA,EAC9B,GAEMC,IAAmBA,MAAM;AAC7BlB,IAAAA,EAAc,EAAE,GAChBV,EAAc,EAAE,GACFC,EAAA;AAAA,EAChB,GAEM4B,IAAgBA,MAAM;AAC1B,IAAIzB,MAAeK,KAAAA,gBAAAA,EAAYqB,eAAc,MAC3CjB,EAAc,EAAK;AAAA,EAEvB,GAEMkB,IAAaA,CAACC,MAAiB;AACnCjB,IAAAA,EAAeD,EAAYmB,OAAQC,CAAMA,MAAAA,MAAMF,CAAI,CAAC,GACpD9B,EAAa8B,CAAI;AAAA,EACnB,GAEMG,KAAWrB,KAAAA,gBAAAA,EAAasB,UAAS;AAGrCC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAW,iBAAiB3B,IAAa,eAAe,YAAY;AAAA,IAAI4B,OAAO;AAAA,MAAEnC,OAAAA;AAAAA,IAAAA;AAAAA,EAEnFO,GAAAA,KACC0B,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GACbD,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAW,iCAAiCJ,IAAW,eAAe,EAAE;AAAA,EAAA,GAC1EA,MACCrB,KAAAA,gBAAAA,EAAa2B,IAAKT,CAChBK,MAAAA,gBAAAA,EAAAC,cAACI,GAAS;AAAA,IAACC,KAAKX;AAAAA,IAAMY,OAAOZ;AAAAA,IAAMa,MAAK;AAAA,IAAQC,aAAaA,MAAMf,EAAWC,CAAI;AAAA,IAAGe,MAAK;AAAA,EAAM,CAAA,KAEpGV,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EACZhC,GAAAA,KACC+B,gBAAAA,EAAAA,cAACU,GAAI;AAAA,IACHC,MAAK;AAAA,IACLV,WAAU;AAAA,IACVW,SAASA,MAAM9C,KAAeS,EAAesC,CAAAA,MAAS,CAACA,CAAI;AAAA,EAAA,CAC5D,GAEHb,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACEc,KAAKpC;AAAAA,IACLuB,WAAW;AAAA,IACXc,IAAG;AAAA,IACHC,MAAK;AAAA,IACLxD,aAAAA;AAAAA,IACAyD,UAAWC,CAAAA,MAAM9B,EAAgB8B,EAAEC,OAAO9B,KAAK;AAAA,IAC/CA,OAAOlB;AAAAA,IACPZ,UAAAA;AAAAA,IACA6D,QAAQ7B;AAAAA,EACT,CAAA,GACA,CAAC,CAACpB,KAAc4B,gBAAAA,EAAAC,cAACU,GAAI;AAAA,IAACC,MAAK;AAAA,IAAQV,WAAU;AAAA,IAAsBW,SAAStB;AAAAA,EAAmB,CAAA,CAC7F,CACF,GACJpB,KAAyB6B,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GAA8B/B,EAA6B,CAAA,CACjG,CAEJ;AAET;"}
+{"version":3,"file":"index38.js","sources":["../src/components/SearchBox/index.tsx"],"sourcesContent":["import React, { useState, useMemo, useEffect, useRef } from 'react';\n\nimport { Icon } from 'components/Icon';\nimport { LabelChip } from 'components/LabelChip';\nimport { debounce } from 'utils/debounce';\n\nimport './style.scss';\ninterface ChipType {\n  label: string;\n  value: string;\n}\n\nexport interface SearchBoxProps {\n  disabled?: boolean;\n  placeholder?: string;\n  debounceDuration?: number;\n  onInputChange?: (value: string) => void;\n  onSearchClear?: () => void;\n  onChipRemove?: (chip: ChipType) => void;\n  updateSearchString?: string;\n  collapsible?: boolean;\n  width?: string;\n  chips?: ChipType[];\n  showSearchIcon?: boolean;\n  renderFilterComponent?: () => React.ReactNode;\n}\n\nexport function SearchBox(props: SearchBoxProps) {\n  const {\n    disabled = false,\n    placeholder = 'Search',\n    debounceDuration = 500,\n    onInputChange = () => {},\n    onSearchClear = () => {},\n    onChipRemove = () => {},\n    updateSearchString = '',\n    collapsible = false,\n    width = '200px',\n    chips = [],\n    showSearchIcon = true,\n    renderFilterComponent = null\n  } = props;\n  const [inputValue, setInputValue] = useState('');\n  const [isExpanded, setIsExpanded] = useState(!props?.collapsible);\n  const [searchChips, setSearchChips] = useState<ChipType[]>(chips || []);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (isExpanded && inputRef.current) {\n      setTimeout(() => inputRef?.current?.focus(), 0);\n    }\n  }, [isExpanded]);\n\n  // Manually update the searchbox text\n  useEffect(() => {\n    if (updateSearchString !== inputValue) {\n      setInputValue(updateSearchString);\n    }\n  }, [updateSearchString]);\n\n  useEffect(() => {\n    setSearchChips(chips);\n  }, [chips]);\n\n  const debouncedOnInputChange = useMemo(\n    () => debounce(onInputChange, debounceDuration),\n    [onInputChange, debounceDuration]\n  );\n\n  useEffect(() => {\n    return () => {\n      debouncedOnInputChange.cancel();\n    };\n  }, [debouncedOnInputChange]);\n\n  const onChangeHandler = (value: string) => {\n    setInputValue(value);\n    debouncedOnInputChange(value);\n  };\n\n  const iconClickHandler = () => {\n    setInputValue('');\n    onInputChange('');\n    onSearchClear();\n  };\n\n  const onBlurHandler = () => {\n    if (collapsible && inputValue?.trimEnd() === '') {\n      setIsExpanded(false);\n    }\n  };\n\n  const removeChip = (chip: ChipType) => {\n    setSearchChips(searchChips.filter((c) => c?.value !== chip?.value));\n    onChipRemove(chip);\n  };\n\n  const hasChips = searchChips?.length > 0;\n\n  return (\n    <div className={`se-search-box ${isExpanded ? 'expand-box' : 'shrink-box'}`} style={{ width: width }}>\n      {/* <Icon name=\"search\" className=\"search-icon img-wrap\" onClick={() => collapsible && setIsExpanded((prev) => !prev)} /> */}\n      {isExpanded && (\n        <div className=\"search-box-container\">\n          <div className={`chips-and-search-box-container${hasChips ? ' has-chips' : ''}`}>\n            {hasChips &&\n              searchChips?.map((chip) => (\n                <LabelChip\n                  key={chip?.value}\n                  label={chip?.label}\n                  icon=\"close\"\n                  onIconClick={() => removeChip(chip)}\n                  size=\"lg\"\n                />\n              ))}\n            <div className=\"search-input-container\">\n              {showSearchIcon && (\n                <Icon\n                  name=\"search\"\n                  className=\"search-icon img-wrap\"\n                  onClick={() => collapsible && setIsExpanded((prev) => !prev)}\n                />\n              )}\n              <input\n                ref={inputRef}\n                className={`search-input border-transparent focus:border-transparent active:border-transparent focus:ring-0`}\n                id=\"search_bar\"\n                type=\"text\"\n                placeholder={placeholder}\n                onChange={(e) => onChangeHandler(e.target.value)}\n                value={inputValue}\n                disabled={disabled}\n                onBlur={onBlurHandler}\n              />\n              {!!inputValue && <Icon name=\"close\" className=\"cross-icon img-wrap\" onClick={iconClickHandler} />}\n            </div>\n          </div>\n          {renderFilterComponent && <div className=\"filter-component-container\">{renderFilterComponent()}</div>}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["SearchBox","props","disabled","placeholder","debounceDuration","onInputChange","onSearchClear","onChipRemove","updateSearchString","collapsible","width","chips","showSearchIcon","renderFilterComponent","inputValue","setInputValue","useState","isExpanded","setIsExpanded","searchChips","setSearchChips","inputRef","useRef","useEffect","current","setTimeout","focus","debouncedOnInputChange","useMemo","debounce","cancel","onChangeHandler","value","iconClickHandler","onBlurHandler","trimEnd","removeChip","chip","filter","c","hasChips","length","React","createElement","className","style","map","LabelChip","key","label","icon","onIconClick","size","Icon","name","onClick","prev","ref","id","type","onChange","e","target","onBlur"],"mappings":"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"}

package/dist/index43.js

@@ -1,41 +1,41 @@
-var q = Object.defineProperty;
-var m = Object.getOwnPropertySymbols;
-var $ = Object.prototype.hasOwnProperty, b = Object.prototype.propertyIsEnumerable;
-var I = (e, t, a) => t in e ? q(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a, x = (e, t) => {
+var D = Object.defineProperty;
+var d = Object.getOwnPropertySymbols;
+var $ = Object.prototype.hasOwnProperty, x = Object.prototype.propertyIsEnumerable;
+var I = (e, t, a) => t in e ? D(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a, S = (e, t) => {
   for (var a in t || (t = {}))
     $.call(t, a) && I(e, a, t[a]);
-  if (m)
-    for (var a of m(t))
-      b.call(t, a) && I(e, a, t[a]);
+  if (d)
+    for (var a of d(t))
+      x.call(t, a) && I(e, a, t[a]);
   return e;
 };
-var S = (e, t) => {
+var y = (e, t) => {
   var a = {};
   for (var l in e)
     $.call(e, l) && t.indexOf(l) < 0 && (a[l] = e[l]);
-  if (e != null && m)
-    for (var l of m(e))
-      t.indexOf(l) < 0 && b.call(e, l) && (a[l] = e[l]);
+  if (e != null && d)
+    for (var l of d(e))
+      t.indexOf(l) < 0 && x.call(e, l) && (a[l] = e[l]);
   return a;
 };
-import n, { useRef as D, useEffect as y } from "react";
+import n, { useRef as G, useEffect as B } from "react";
 /* empty css         */
-import { Icon as B } from "./index5.js";
-const P = /* @__PURE__ */ n.memo((G) => {
-  var h = G, {
+import { Icon as L } from "./index5.js";
+const Q = /* @__PURE__ */ n.memo((H) => {
+  var w = H, {
     value: e,
     onChange: t,
     disabled: a = !1,
     maxLength: l,
-    tag: L = "input",
-    error: d = !1,
-    errorMessage: _,
-    label: E,
+    tag: _ = "input",
+    error: f = !1,
+    errorMessage: j,
+    label: N,
     placeholder: z,
     suggestions: i = [],
-    customRenderSuggestions: s,
-    onSuggestionClick: N
-  } = h, A = S(h, [
+    customRenderSuggestions: m,
+    onSuggestionClick: v
+  } = w, A = y(w, [
     "value",
     "onChange",
     "disabled",
@@ -49,77 +49,79 @@ const P = /* @__PURE__ */ n.memo((G) => {
     "customRenderSuggestions",
     "onSuggestionClick"
   ]);
-  const [o, f] = n.useState([...i]), [w, p] = n.useState(!1), u = D(null), F = n.useCallback((r) => {
+  const [o, p] = n.useState([...i]), [h, E] = n.useState(!1), u = G(null), F = n.useCallback((r) => {
     const c = r.target.value;
-    if (s)
+    if (m)
       t(c, !1);
     else if (t(c), c === "")
-      f([...i]);
+      p([...i]);
     else if (c) {
-      const j = i == null ? void 0 : i.filter((C) => {
-        var k;
-        return typeof C == "string" && C.toLowerCase().includes((k = c == null ? void 0 : c.toLowerCase()) != null ? k : "");
+      const q = i == null ? void 0 : i.filter((s) => {
+        var k, b;
+        return typeof s == "object" && ((b = s == null ? void 0 : s.label) == null ? void 0 : b.toLowerCase().includes((k = c == null ? void 0 : c.toLowerCase()) != null ? k : ""));
       });
-      f([...j]);
+      p([...q]);
     }
-  }, [t, i, s]);
-  y(() => {
-    f([...i]);
-  }, [i]), y(() => {
+  }, [t, i, m]);
+  B(() => {
+    p([...i]);
+  }, [i]), B(() => {
     const r = (c) => {
-      u.current && !u.current.contains(c.target) && p(!1);
+      u.current && !u.current.contains(c.target) && E(!1);
     };
     return document.addEventListener("mousedown", r), () => {
       document.removeEventListener("mousedown", r);
     };
   }, []);
   const O = () => {
-    p(!0);
-  }, v = (r) => {
-    t(r, !0), p(!1), N && N(r);
+    E(!0);
+  }, C = (r) => {
+    t(r, !0), E(!1), v && v(r);
   }, V = () => {
     t("", !1);
   };
   return /* @__PURE__ */ n.createElement("div", {
     className: "main-container-autocomplete-se-design",
     ref: u
-  }, E && /* @__PURE__ */ n.createElement("label", {
+  }, N && /* @__PURE__ */ n.createElement("span", {
     className: "label-container"
-  }, E), /* @__PURE__ */ n.createElement("div", {
+  }, N), /* @__PURE__ */ n.createElement("div", {
+    className: "input-container-wrapper"
+  }, /* @__PURE__ */ n.createElement("div", {
     className: "input-wrapper"
-  }, /* @__PURE__ */ n.createElement(L, x({
+  }, /* @__PURE__ */ n.createElement(_, S({
     value: e,
     onChange: F,
     onClick: O,
     disabled: a,
-    className: `${d ? "input-container-error" : "input-container-default"} ${a ? "input-container-disabled" : ""} ${o.length > 0 || e ? "with-icon" : ""} ${o.length > 0 && e ? "with-icons" : ""}`,
+    className: `${f ? "input-container-error" : "input-container-default"} ${a ? "input-container-disabled" : ""} ${o.length > 0 || e ? "with-icon" : ""} ${o.length > 0 && e ? "with-icons" : ""}`,
     maxLength: l,
     placeholder: z
-  }, A)), e && /* @__PURE__ */ n.createElement(B, {
+  }, A)), e && /* @__PURE__ */ n.createElement(L, {
     name: "close",
     className: "input-icon-close",
     size: 15,
     onClick: V
-  }), o.length > 0 && /* @__PURE__ */ n.createElement(B, {
+  }), o.length > 0 && /* @__PURE__ */ n.createElement(L, {
     name: "chevron",
-    rotation: w ? "180" : "0",
+    rotation: h ? "180" : "0",
     className: "input-icon-chevron"
-  })), w && o.length > 0 && /* @__PURE__ */ n.createElement("div", {
+  })), h && o.length > 0 && /* @__PURE__ */ n.createElement("div", {
     className: "suggestions-list"
-  }, s ? s(o, v) : o.map((r, c) => /* @__PURE__ */ n.createElement("div", {
+  }, m ? m(o, C) : o.map((r, c) => /* @__PURE__ */ n.createElement("div", {
     key: c,
     className: "suggestion-item",
-    onClick: () => v(r)
-  }, r))), /* @__PURE__ */ n.createElement("div", {
-    className: `${d ? "error-and-max-word" : "max-word-container"}`
-  }, d && /* @__PURE__ */ n.createElement("div", {
+    onClick: () => C(r.value)
+  }, r.label)))), /* @__PURE__ */ n.createElement("div", {
+    className: `${f ? "error-and-max-word" : "max-word-container"}`
+  }, f && /* @__PURE__ */ n.createElement("div", {
     id: "error-message",
     className: "error-message"
-  }, _), l && /* @__PURE__ */ n.createElement("div", {
+  }, j), l && /* @__PURE__ */ n.createElement("div", {
     className: "max-word"
   }, e.length, "/", l)));
 });
 export {
-  P as AutoCompleteInput
+  Q as AutoCompleteInput
 };
 //# sourceMappingURL=index43.js.map

package/dist/index43.js.map

@@ -1 +1 @@
-{"version":3,"file":"index43.js","sources":["../src/components/AutoCompleteInput/index.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport './style.scss';\nimport { Icon } from '../Icon';\n\nexport interface AutoCompleteInputProps {\n  value: string;\n  disabled?: boolean;\n  maxLength?: number;\n  onChange: (value: string, fromSuggestion?: boolean) => void;\n  tag?: string;\n  error?: boolean;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n  suggestions?: string[];\n  customRenderSuggestions?: (suggestions: any, handleSuggestionClick: (suggestion: string) => void) => any;\n  onSuggestionClick?: (suggestion: string) => void;\n}\n\nexport const AutoCompleteInput: React.FC<AutoCompleteInputProps> = React.memo(\n  ({\n    value,\n    onChange,\n    disabled = false,\n    maxLength,\n    tag = 'input',\n    error = false,\n    errorMessage,\n    label,\n    placeholder,\n    suggestions = [],\n    customRenderSuggestions,\n    onSuggestionClick,\n    ...props\n  }) => {\n    const [filteredSuggestions, setFilteredSuggestions] = React.useState<string[]>([...suggestions]);\n    const [isSuggestionBoxVisible, setSuggestionBoxVisible] = React.useState<boolean>(false);\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    const handleInputChange = React.useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const inputValue = e.target.value;\n\n        if (customRenderSuggestions) {\n          onChange(inputValue, false);\n        } else {\n          onChange(inputValue);\n          if (inputValue === '') {\n            setFilteredSuggestions([...suggestions]);\n          } else if (inputValue) {\n            const filtered = suggestions?.filter(\n              (suggestion) =>\n                typeof suggestion === 'string' && suggestion.toLowerCase().includes(inputValue?.toLowerCase() ?? '')\n            );\n            setFilteredSuggestions([...filtered]);\n          }\n        }\n      },\n      [onChange, suggestions, customRenderSuggestions]\n    );\n\n    useEffect(() => {\n      // if (customRenderSuggestions) {\n      setFilteredSuggestions([...suggestions]);\n      // }\n    }, [suggestions]);\n\n    useEffect(() => {\n      const handleClickOutside = (event: MouseEvent) => {\n        if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n          setSuggestionBoxVisible(false);\n        }\n      };\n\n      document.addEventListener('mousedown', handleClickOutside);\n      return () => {\n        document.removeEventListener('mousedown', handleClickOutside);\n      };\n    }, []);\n\n    const handleInputClick = () => {\n      setSuggestionBoxVisible(true);\n    };\n\n    const handleSuggestionClick = (suggestion: string) => {\n      onChange(suggestion, true);\n      setSuggestionBoxVisible(false);\n      onSuggestionClick && onSuggestionClick(suggestion);\n    };\n\n    const handleClearInput = () => {\n      onChange('', false);\n    };\n\n    return (\n      <div className=\"main-container-autocomplete-se-design\" ref={containerRef}>\n        {label && <label className=\"label-container\">{label}</label>}\n        <div className=\"input-wrapper\">\n          {React.createElement(tag, {\n            value: value,\n            onChange: handleInputChange,\n            onClick: handleInputClick,\n            disabled,\n            className: `${error ? 'input-container-error' : 'input-container-default'} ${disabled ? 'input-container-disabled' : ''} ${filteredSuggestions.length > 0 || value ? 'with-icon' : ''} ${filteredSuggestions.length > 0 && value ? 'with-icons' : ''}`,\n            maxLength,\n            placeholder,\n            ...props\n          })}\n          {value && <Icon name=\"close\" className=\"input-icon-close\" size={15} onClick={handleClearInput} />}\n          {filteredSuggestions.length > 0 && (\n            <Icon name=\"chevron\" rotation={isSuggestionBoxVisible ? '180' : '0'} className=\"input-icon-chevron\" />\n          )}\n        </div>\n        {isSuggestionBoxVisible && filteredSuggestions.length > 0 && (\n          <div className=\"suggestions-list\">\n            {customRenderSuggestions\n              ? customRenderSuggestions(filteredSuggestions, handleSuggestionClick)\n              : filteredSuggestions.map((suggestion, index) => (\n                  <div key={index} className=\"suggestion-item\" onClick={() => handleSuggestionClick(suggestion)}>\n                    {suggestion}\n                  </div>\n                ))}\n          </div>\n        )}\n        <div className={`${error ? 'error-and-max-word' : 'max-word-container'}`}>\n          {error && (\n            <div id=\"error-message\" className=\"error-message\">\n              {errorMessage}\n            </div>\n          )}\n          {maxLength && (\n            <div className=\"max-word\">\n              {value.length}/{maxLength}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n"],"names":["AutoCompleteInput","memo","_a","_b","value","onChange","disabled","maxLength","tag","error","errorMessage","label","placeholder","suggestions","customRenderSuggestions","onSuggestionClick","props","filteredSuggestions","setFilteredSuggestions","React","useState","isSuggestionBoxVisible","setSuggestionBoxVisible","containerRef","useRef","handleInputChange","useCallback","e","inputValue","target","filtered","filter","suggestion","toLowerCase","includes","useEffect","handleClickOutside","event","current","contains","addEventListener","removeEventListener","handleInputClick","handleSuggestionClick","handleClearInput","createElement","className","ref","__spreadValues","onClick","length","Icon","name","size","rotation","map","index","key","id"],"mappings":"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"}
+{"version":3,"file":"index43.js","sources":["../src/components/AutoCompleteInput/index.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport './style.scss';\nimport { Icon } from '../Icon';\n\nexport interface AutoCompleteInputProps {\n  value: string;\n  disabled?: boolean;\n  maxLength?: number;\n  onChange: (value: string, fromSuggestion?: boolean) => void;\n  tag?: string;\n  error?: boolean;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n  suggestions?: { label: string; value: string }[];\n  customRenderSuggestions?: (suggestions: any, handleSuggestionClick: (suggestion: string) => void) => any;\n  onSuggestionClick?: (suggestion: string) => void;\n}\n\nexport const AutoCompleteInput: React.FC<AutoCompleteInputProps> = React.memo(\n  ({\n    value,\n    onChange,\n    disabled = false,\n    maxLength,\n    tag = 'input',\n    error = false,\n    errorMessage,\n    label,\n    placeholder,\n    suggestions = [],\n    customRenderSuggestions,\n    onSuggestionClick,\n    ...props\n  }) => {\n    const [filteredSuggestions, setFilteredSuggestions] = React.useState<{ label: string; value: string }[]>([\n      ...suggestions\n    ]);\n    const [isSuggestionBoxVisible, setSuggestionBoxVisible] = React.useState<boolean>(false);\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    const handleInputChange = React.useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const inputValue = e.target.value;\n\n        if (customRenderSuggestions) {\n          onChange(inputValue, false);\n        } else {\n          onChange(inputValue);\n          if (inputValue === '') {\n            setFilteredSuggestions([...suggestions]);\n          } else if (inputValue) {\n            const filtered = suggestions?.filter(\n              (suggestion) =>\n                typeof suggestion === 'object' &&\n                suggestion?.label?.toLowerCase().includes(inputValue?.toLowerCase() ?? '')\n            );\n            setFilteredSuggestions([...filtered]);\n          }\n        }\n      },\n      [onChange, suggestions, customRenderSuggestions]\n    );\n\n    useEffect(() => {\n      // if (customRenderSuggestions) {\n      setFilteredSuggestions([...suggestions]);\n      // }\n    }, [suggestions]);\n\n    useEffect(() => {\n      const handleClickOutside = (event: MouseEvent) => {\n        if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n          setSuggestionBoxVisible(false);\n        }\n      };\n\n      document.addEventListener('mousedown', handleClickOutside);\n      return () => {\n        document.removeEventListener('mousedown', handleClickOutside);\n      };\n    }, []);\n\n    const handleInputClick = () => {\n      setSuggestionBoxVisible(true);\n    };\n\n    const handleSuggestionClick = (suggestion: string) => {\n      onChange(suggestion, true);\n      setSuggestionBoxVisible(false);\n      onSuggestionClick && onSuggestionClick(suggestion);\n    };\n\n    const handleClearInput = () => {\n      onChange('', false);\n    };\n\n    return (\n      <div className=\"main-container-autocomplete-se-design\" ref={containerRef}>\n        {label && <span className=\"label-container\">{label}</span>}\n        <div className=\"input-container-wrapper\">\n          <div className=\"input-wrapper\">\n            {React.createElement(tag, {\n              value: value,\n              onChange: handleInputChange,\n              onClick: handleInputClick,\n              disabled,\n              className: `${error ? 'input-container-error' : 'input-container-default'} ${disabled ? 'input-container-disabled' : ''} ${filteredSuggestions.length > 0 || value ? 'with-icon' : ''} ${filteredSuggestions.length > 0 && value ? 'with-icons' : ''}`,\n              maxLength,\n              placeholder,\n              ...props\n            })}\n            {value && <Icon name=\"close\" className=\"input-icon-close\" size={15} onClick={handleClearInput} />}\n            {filteredSuggestions.length > 0 && (\n              <Icon name=\"chevron\" rotation={isSuggestionBoxVisible ? '180' : '0'} className=\"input-icon-chevron\" />\n            )}\n          </div>\n          {isSuggestionBoxVisible && filteredSuggestions.length > 0 && (\n            <div className=\"suggestions-list\">\n              {customRenderSuggestions\n                ? customRenderSuggestions(filteredSuggestions, handleSuggestionClick)\n                : filteredSuggestions.map((suggestion, index) => (\n                    <div\n                      key={index}\n                      className=\"suggestion-item\"\n                      onClick={() => handleSuggestionClick(suggestion.value)}\n                    >\n                      {suggestion.label}\n                    </div>\n                  ))}\n            </div>\n          )}\n        </div>\n        <div className={`${error ? 'error-and-max-word' : 'max-word-container'}`}>\n          {error && (\n            <div id=\"error-message\" className=\"error-message\">\n              {errorMessage}\n            </div>\n          )}\n          {maxLength && (\n            <div className=\"max-word\">\n              {value.length}/{maxLength}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n"],"names":["AutoCompleteInput","memo","_a","_b","value","onChange","disabled","maxLength","tag","error","errorMessage","label","placeholder","suggestions","customRenderSuggestions","onSuggestionClick","props","filteredSuggestions","setFilteredSuggestions","React","useState","isSuggestionBoxVisible","setSuggestionBoxVisible","containerRef","useRef","handleInputChange","useCallback","e","inputValue","target","filtered","filter","suggestion","toLowerCase","includes","useEffect","handleClickOutside","event","current","contains","addEventListener","removeEventListener","handleInputClick","handleSuggestionClick","handleClearInput","createElement","className","ref","__spreadValues","onClick","length","Icon","name","size","rotation","map","index","key","id"],"mappings":"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"}

package/dist/index44.js

@@ -1,6 +1,6 @@
 import t, { useState as o, useRef as R, useEffect as C } from "react";
 /* empty css         */
-import c from "./index148.js";
+import c from "./index149.js";
 import { Icon as g } from "./index5.js";
 const O = ({
   onCountrycodeChange: E,

package/dist/index48.js

@@ -1,11 +1,11 @@
-import a, { useState as x } from "react";
+import a, { useState as r } from "react";
 import { Icon as f } from "./index5.js";
-const w = ({
+const h = ({
   crumbs: t,
   onCrumbClick: l,
   className: g
 }) => {
-  const [o, i] = x(!1), s = (t == null ? void 0 : t.length) > 3, n = s ? t == null ? void 0 : t.slice(-2) : t, d = s ? t == null ? void 0 : t.slice(0, -2) : [];
+  const [o, i] = r(!1), s = (t == null ? void 0 : t.length) > 3, n = s ? t == null ? void 0 : t.slice(-2) : t, d = s ? t == null ? void 0 : t.slice(0, -2) : [];
   return /* @__PURE__ */ a.createElement("div", {
     className: `se-design-breadcrumbs flex items-center ${g}`,
     "aria-label": "Breadcrumb"
@@ -23,7 +23,7 @@ const w = ({
     onClick: () => {
       l == null || l(e), i(!1);
     },
-    className: "w-full text-left px-4 py-2 text-xl text-gray-500 cursor-pointer  hover:bg-gray-100"
+    className: "se-design-breadcrumbs-dropdown-label w-full text-left px-4 py-2 text-xl text-gray-500 cursor-pointer  hover:bg-gray-100"
   }, e == null ? void 0 : e.label)))), /* @__PURE__ */ a.createElement("div", {
     className: "se-design-breadcrumbs-list inline-flex items-center"
   }, n == null ? void 0 : n.map((e, p) => /* @__PURE__ */ a.createElement("div", {
@@ -41,6 +41,6 @@ const w = ({
   }, e == null ? void 0 : e.label)))));
 };
 export {
-  w as BreadCrumbs
+  h as BreadCrumbs
 };
 //# sourceMappingURL=index48.js.map

package/dist/index48.js.map

@@ -1 +1 @@
-{"version":3,"file":"index48.js","sources":["../src/components/BreadCrumbs/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Icon } from '../Icon';\n\ninterface Crumb {\n  id: string | number;\n  label: string;\n}\n\ninterface BreadCrumbsProps {\n  crumbs: Crumb[];\n  onCrumbClick?: (crumb: Crumb) => void;\n  className?: any;\n}\n\nexport const BreadCrumbs: React.FC<BreadCrumbsProps> = ({ crumbs, onCrumbClick, className }) => {\n  const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\n  const shouldShowDropdown = crumbs?.length > 3;\n  const visibleCrumbs = shouldShowDropdown ? crumbs?.slice(-2) : crumbs;\n  const dropdownCrumbs = shouldShowDropdown ? crumbs?.slice(0, -2) : [];\n\n  return (\n    <div className={`se-design-breadcrumbs flex items-center ${className}`} aria-label=\"Breadcrumb\">\n      {shouldShowDropdown && (\n        <div className=\"relative\">\n          <div onClick={() => setIsDropdownOpen(!isDropdownOpen)} className=\"p-1 hover:bg-gray-100 rounded-full\">\n            <Icon name=\"kebab-menu\" />\n          </div>\n\n          {isDropdownOpen && (\n            <div className=\"se-design-breadcrumbs-dropdown absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-md py-1 z-10\">\n              {dropdownCrumbs?.map((crumb) => (\n                <p\n                  key={crumb?.id}\n                  onClick={() => {\n                    onCrumbClick?.(crumb);\n                    setIsDropdownOpen(false);\n                  }}\n                  className=\"w-full text-left px-4 py-2 text-xl text-gray-500 cursor-pointer  hover:bg-gray-100\"\n                >\n                  {crumb?.label}\n                </p>\n              ))}\n            </div>\n          )}\n        </div>\n      )}\n\n      <div className=\"se-design-breadcrumbs-list inline-flex items-center\">\n        {visibleCrumbs?.map((crumb, index) => (\n          <div key={crumb?.id} className=\"se-design-breadcrumbs-item inline-flex items-center w-fit\">\n            {(index > 0 || shouldShowDropdown) && <Icon name=\"chevron\" rotation={'270'} />}\n            <p\n              onClick={() => onCrumbClick?.(crumb)}\n              className={`\n                se-design-breadcrumbs-item-label inline-flex items-center w-fit text-xl\n                ${\n                  index === visibleCrumbs?.length - 1\n                    ? 'text-black font-medium cursor-default'\n                    : 'text-gray-500 hover:text-gray-700 cursor-pointer'\n                }\n              `}\n            >\n              {crumb?.label}\n            </p>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"names":["BreadCrumbs","crumbs","onCrumbClick","className","isDropdownOpen","setIsDropdownOpen","useState","shouldShowDropdown","length","visibleCrumbs","slice","dropdownCrumbs","React","createElement","onClick","Icon","name","map","crumb","key","id","label","index","rotation"],"mappings":";;AAcO,MAAMA,IAA0CA,CAAC;AAAA,EAAEC,QAAAA;AAAAA,EAAQC,cAAAA;AAAAA,EAAcC,WAAAA;AAAU,MAAM;AAC9F,QAAM,CAACC,GAAgBC,CAAiB,IAAIC,EAAS,EAAK,GAEpDC,KAAqBN,KAAAA,gBAAAA,EAAQO,UAAS,GACtCC,IAAgBF,IAAqBN,KAAAA,gBAAAA,EAAQS,MAAM,MAAMT,GACzDU,IAAiBJ,IAAqBN,KAAAA,gBAAAA,EAAQS,MAAM,GAAG,MAAM,CAAE;AAGnEE,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKV,WAAW,2CAA2CA,CAAS;AAAA,IAAI,cAAW;AAAA,EAChFI,GAAAA,KACCM,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKV,WAAU;AAAA,EAAA,GACbU,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,SAASA,MAAMT,EAAkB,CAACD,CAAc;AAAA,IAAGD,WAAU;AAAA,EAAA,GAChEU,gBAAAA,EAAAA,cAACE,GAAI;AAAA,IAACC,MAAK;AAAA,EAAc,CAAA,CACtB,GAEJZ,KACCQ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKV,WAAU;AAAA,EAAA,GACZQ,KAAAA,gBAAAA,EAAgBM,IAAKC,CACpBN,MAAAA,gBAAAA,EAAAC,cAAA,KAAA;AAAA,IACEM,KAAKD,KAAAA,gBAAAA,EAAOE;AAAAA,IACZN,SAASA,MAAM;AACbZ,MAAAA,KAAAA,QAAAA,EAAegB,IACfb,EAAkB,EAAK;AAAA,IACzB;AAAA,IACAF,WAAU;AAAA,EAAA,GAETe,KAAAA,gBAAAA,EAAOG,KACP,EAEF,CAEJ,GAGPR,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKV,WAAU;AAAA,EAAA,GACZM,KAAAA,gBAAAA,EAAeQ,IAAI,CAACC,GAAOI,MAC1BV,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKM,KAAKD,KAAAA,gBAAAA,EAAOE;AAAAA,IAAIjB,WAAU;AAAA,EAAA,IAC3BmB,IAAQ,KAAKf,MAAuBK,gBAAAA,EAAAC,cAACE,GAAI;AAAA,IAACC,MAAK;AAAA,IAAUO,UAAU;AAAA,EAAA,CAAQ,GAC7EV,gBAAAA,EAAAA,cAAA,KAAA;AAAA,IACEC,SAASA,MAAMZ,KAAAA,gBAAAA,EAAegB;AAAAA,IAC9Bf,WAAW;AAAA;AAAA,kBAGPmB,OAAUb,KAAAA,gBAAAA,EAAeD,UAAS,IAC9B,0CACA,kDAAkD;AAAA;AAAA,KAIzDU,KAAAA,gBAAAA,EAAOG,KACP,CACA,EAEJ,CACF;AAET;"}
+{"version":3,"file":"index48.js","sources":["../src/components/BreadCrumbs/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Icon } from '../Icon';\n\ninterface Crumb {\n  id: string | number;\n  label: string;\n}\n\ninterface BreadCrumbsProps {\n  crumbs: Crumb[];\n  onCrumbClick?: (crumb: Crumb) => void;\n  className?: any;\n}\n\nexport const BreadCrumbs: React.FC<BreadCrumbsProps> = ({ crumbs, onCrumbClick, className }) => {\n  const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\n  const shouldShowDropdown = crumbs?.length > 3;\n  const visibleCrumbs = shouldShowDropdown ? crumbs?.slice(-2) : crumbs;\n  const dropdownCrumbs = shouldShowDropdown ? crumbs?.slice(0, -2) : [];\n\n  return (\n    <div className={`se-design-breadcrumbs flex items-center ${className}`} aria-label=\"Breadcrumb\">\n      {shouldShowDropdown && (\n        <div className=\"relative\">\n          <div onClick={() => setIsDropdownOpen(!isDropdownOpen)} className=\"p-1 hover:bg-gray-100 rounded-full\">\n            <Icon name=\"kebab-menu\" />\n          </div>\n\n          {isDropdownOpen && (\n            <div className=\"se-design-breadcrumbs-dropdown absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-md py-1 z-10\">\n              {dropdownCrumbs?.map((crumb) => (\n                <p\n                  key={crumb?.id}\n                  onClick={() => {\n                    onCrumbClick?.(crumb);\n                    setIsDropdownOpen(false);\n                  }}\n                  className=\"se-design-breadcrumbs-dropdown-label w-full text-left px-4 py-2 text-xl text-gray-500 cursor-pointer  hover:bg-gray-100\"\n                >\n                  {crumb?.label}\n                </p>\n              ))}\n            </div>\n          )}\n        </div>\n      )}\n\n      <div className=\"se-design-breadcrumbs-list inline-flex items-center\">\n        {visibleCrumbs?.map((crumb, index) => (\n          <div key={crumb?.id} className=\"se-design-breadcrumbs-item inline-flex items-center w-fit\">\n            {(index > 0 || shouldShowDropdown) && <Icon name=\"chevron\" rotation={'270'} />}\n            <p\n              onClick={() => onCrumbClick?.(crumb)}\n              className={`\n                se-design-breadcrumbs-item-label inline-flex items-center w-fit text-xl\n                ${\n                  index === visibleCrumbs?.length - 1\n                    ? 'text-black font-medium cursor-default'\n                    : 'text-gray-500 hover:text-gray-700 cursor-pointer'\n                }\n              `}\n            >\n              {crumb?.label}\n            </p>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"names":["BreadCrumbs","crumbs","onCrumbClick","className","isDropdownOpen","setIsDropdownOpen","useState","shouldShowDropdown","length","visibleCrumbs","slice","dropdownCrumbs","React","createElement","onClick","Icon","name","map","crumb","key","id","label","index","rotation"],"mappings":";;AAcO,MAAMA,IAA0CA,CAAC;AAAA,EAAEC,QAAAA;AAAAA,EAAQC,cAAAA;AAAAA,EAAcC,WAAAA;AAAU,MAAM;AAC9F,QAAM,CAACC,GAAgBC,CAAiB,IAAIC,EAAS,EAAK,GAEpDC,KAAqBN,KAAAA,gBAAAA,EAAQO,UAAS,GACtCC,IAAgBF,IAAqBN,KAAAA,gBAAAA,EAAQS,MAAM,MAAMT,GACzDU,IAAiBJ,IAAqBN,KAAAA,gBAAAA,EAAQS,MAAM,GAAG,MAAM,CAAE;AAGnEE,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKV,WAAW,2CAA2CA,CAAS;AAAA,IAAI,cAAW;AAAA,EAChFI,GAAAA,KACCM,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKV,WAAU;AAAA,EAAA,GACbU,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,SAASA,MAAMT,EAAkB,CAACD,CAAc;AAAA,IAAGD,WAAU;AAAA,EAAA,GAChEU,gBAAAA,EAAAA,cAACE,GAAI;AAAA,IAACC,MAAK;AAAA,EAAc,CAAA,CACtB,GAEJZ,KACCQ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKV,WAAU;AAAA,EAAA,GACZQ,KAAAA,gBAAAA,EAAgBM,IAAKC,CACpBN,MAAAA,gBAAAA,EAAAC,cAAA,KAAA;AAAA,IACEM,KAAKD,KAAAA,gBAAAA,EAAOE;AAAAA,IACZN,SAASA,MAAM;AACbZ,MAAAA,KAAAA,QAAAA,EAAegB,IACfb,EAAkB,EAAK;AAAA,IACzB;AAAA,IACAF,WAAU;AAAA,EAAA,GAETe,KAAAA,gBAAAA,EAAOG,KACP,EAEF,CAEJ,GAGPR,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKV,WAAU;AAAA,EAAA,GACZM,KAAAA,gBAAAA,EAAeQ,IAAI,CAACC,GAAOI,MAC1BV,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKM,KAAKD,KAAAA,gBAAAA,EAAOE;AAAAA,IAAIjB,WAAU;AAAA,EAAA,IAC3BmB,IAAQ,KAAKf,MAAuBK,gBAAAA,EAAAC,cAACE,GAAI;AAAA,IAACC,MAAK;AAAA,IAAUO,UAAU;AAAA,EAAA,CAAQ,GAC7EV,gBAAAA,EAAAA,cAAA,KAAA;AAAA,IACEC,SAASA,MAAMZ,KAAAA,gBAAAA,EAAegB;AAAAA,IAC9Bf,WAAW;AAAA;AAAA,kBAGPmB,OAAUb,KAAAA,gBAAAA,EAAeD,UAAS,IAC9B,0CACA,kDAAkD;AAAA;AAAA,KAIzDU,KAAAA,gBAAAA,EAAOG,KACP,CACA,EAEJ,CACF;AAET;"}