se-design 0.0.120 → 0.0.122

package/dist/index36.js

@@ -1,41 +1,162 @@
-import e from "react";
+import s, { forwardRef as H, useState as d, useRef as y, useEffect as I, useImperativeHandle as S } from "react";
+import { Popover as $ } from "./index17.js";
+import { Icon as j } from "./index5.js";
 /* empty css         */
-function f({
-  value: n,
-  onChange: i,
-  disabled: r,
-  maxLength: t,
-  tag: m,
-  error: a,
-  errorMessage: o,
-  label: c,
-  placeholder: s,
-  style: l,
-  inputStyle: d
-}) {
-  const p = m || "input";
-  return /* @__PURE__ */ e.createElement("div", {
-    className: "main-container",
-    style: l
-  }, c && /* @__PURE__ */ e.createElement("div", {
-    className: "label-container"
-  }, c), /* @__PURE__ */ e.createElement(p, {
-    value: n,
-    onChange: (E) => i(E.target.value),
-    disabled: r,
-    className: `${a ? "input-container-error" : "input-container-default"} ${r ? "input-container-disabled" : ""}`,
-    maxlength: t || void 0,
-    placeholder: s,
-    style: d
-  }), /* @__PURE__ */ e.createElement("div", {
-    className: `${a ? "error-and-max-word" : "max-word-container"}`
-  }, a && /* @__PURE__ */ e.createElement("div", {
-    className: "error-message"
-  }, o), t && /* @__PURE__ */ e.createElement("div", {
-    className: "max-word"
-  }, t && (n == null ? void 0 : n.length) + "/" + t)));
-}
+const Q = /* @__PURE__ */ H(({
+  value: f = [],
+  onChange: n,
+  placeholder: D = "Type to search or add custom tags...",
+  className: P = "",
+  options: r = [],
+  renderOption: E,
+  onSearch: w,
+  label: g,
+  automationId: T = "",
+  noOptionsMessage: b = "No options found",
+  allowCustomTags: N = !0
+}, R) => {
+  const [o, c] = d(() => f.map((t) => {
+    const e = r.find((a) => a.value === t);
+    return e ? {
+      label: e.label,
+      value: e.value
+    } : {
+      label: t,
+      value: t
+    };
+  })), [l, p] = d(""), [m, k] = d(r), [u, i] = d(!1), O = y(null), h = y(null);
+  I(() => {
+    c(f.map((t) => {
+      const e = r.find((a) => a.value === t);
+      return e ? {
+        label: e.label,
+        value: e.value
+      } : {
+        label: t,
+        value: t
+      };
+    }));
+  }, [f, r]), I(() => {
+    if (!l.trim())
+      k(r);
+    else {
+      const t = r.filter((e) => e.label.toLowerCase().includes(l.toLowerCase()) || e.value.toLowerCase().includes(l.toLowerCase()));
+      k(t);
+    }
+    w && w(l);
+  }, [l, r, w]);
+  const v = (t) => {
+    const e = [...o];
+    e.some((a) => a.value === t.value) || (e.push({
+      label: t.label,
+      value: t.value
+    }), c(e), n == null || n(e.map((a) => a.value))), p(""), i(!1);
+  }, A = (t) => {
+    const e = o.filter((a, B) => B !== t);
+    c(e), n == null || n(e.map((a) => a.value));
+  }, L = (t) => {
+    if (t.key === "Enter" && l.trim()) {
+      if (t.preventDefault(), m.length > 0)
+        v(m[0]);
+      else if (N) {
+        const e = [...o];
+        e.some((a) => a.value === l.trim()) || (e.push({
+          label: l.trim(),
+          value: l.trim()
+        }), c(e), n == null || n(e.map((a) => a.value))), p("");
+      }
+      i(!1);
+    } else if (t.key === "Backspace" && l === "" && o.length > 0) {
+      const e = o.slice(0, -1);
+      c(e), n == null || n(e.map((a) => a.value));
+    } else t.key === "ArrowDown" ? (t.preventDefault(), u || i(!0)) : t.key === "Escape" && (i(!1), p(""));
+  }, x = (t) => {
+    const e = t.target.value;
+    p(e), e.trim() && !u && i(!0);
+  }, F = () => {
+    (l.trim() || r.length > 0) && i(!0);
+  }, V = (t) => {
+    var e;
+    t.stopPropagation(), (e = h.current) == null || e.focus(), !u && (l.trim() || r.length > 0) && i(!0);
+  }, W = (t) => {
+    t.target.closest(".input-with-tags-container") && t.stopPropagation();
+  }, _ = () => {
+    i(!u);
+  };
+  S(R, () => ({
+    toggleDropdown: _
+  }), []);
+  const K = (t, e) => /* @__PURE__ */ s.createElement("div", {
+    key: t.id,
+    className: "dropdown-with-input-tags-option",
+    onClick: () => e(t)
+  }, /* @__PURE__ */ s.createElement("span", {
+    className: "option-label"
+  }, t.label), t.value !== t.label && /* @__PURE__ */ s.createElement("span", {
+    className: "option-value"
+  }, t.value));
+  return /* @__PURE__ */ s.createElement("div", {
+    className: `dropdown-with-input-tags-wrapper ${P}`,
+    "data-automation-id": T
+  }, g && /* @__PURE__ */ s.createElement("label", {
+    className: "dropdown-with-input-tags-label"
+  }, g), /* @__PURE__ */ s.createElement("div", {
+    onClick: W
+  }, /* @__PURE__ */ s.createElement($, {
+    ref: O,
+    className: "dropdown-with-input-tags-popover",
+    contentWidth: "full",
+    position: "bottom-left",
+    isPopoverOpen: u,
+    onPopoverToggle: i,
+    renderPopoverContents: ({
+      closePopoverCb: t
+    }) => /* @__PURE__ */ s.createElement("div", {
+      className: "dropdown-with-input-tags-content"
+    }, m.length > 0 ? m.map((e) => E ? E(e, v) : K(e, v)) : /* @__PURE__ */ s.createElement("div", {
+      className: "dropdown-with-input-tags-no-options"
+    }, l.trim() ? N ? /* @__PURE__ */ s.createElement("div", {
+      className: "dropdown-with-input-tags-option dropdown-with-input-tags-custom-option",
+      onClick: () => {
+        const e = [...o];
+        e.some((a) => a.value === l.trim()) || (e.push({
+          label: l.trim(),
+          value: l.trim()
+        }), c(e), n == null || n(e.map((a) => a.value))), p(""), t();
+      }
+    }, 'Add "', l.trim(), '"') : /* @__PURE__ */ s.createElement("div", {
+      className: "dropdown-with-input-tags-no-options-text"
+    }, b) : /* @__PURE__ */ s.createElement("div", {
+      className: "dropdown-with-input-tags-no-options-text"
+    }, b))),
+    renderPopoverSrcElement: () => /* @__PURE__ */ s.createElement("div", {
+      className: "dropdown-with-input-tags-input-container"
+    }, /* @__PURE__ */ s.createElement("div", {
+      className: "input-with-tags-container",
+      onClick: V
+    }, o.map((t, e) => /* @__PURE__ */ s.createElement("span", {
+      key: e,
+      className: "tag-in-inputwithtags"
+    }, t.label, /* @__PURE__ */ s.createElement("span", {
+      className: "close-icon-in-inputwithtags",
+      onClick: (a) => {
+        a.stopPropagation(), A(e);
+      }
+    }, /* @__PURE__ */ s.createElement(j, {
+      name: "close"
+    })))), /* @__PURE__ */ s.createElement("input", {
+      ref: h,
+      type: "text",
+      value: l,
+      onChange: x,
+      onKeyDown: L,
+      onFocus: F,
+      placeholder: o.length === 0 ? D : "",
+      className: "input-with-tags-input"
+    })))
+  })));
+});
 export {
-  f as Input
+  Q as DropdownWithInputTags
 };
 //# sourceMappingURL=index36.js.map

package/dist/index36.js.map

@@ -1 +1 @@
-{"version":3,"file":"index36.js","sources":["../src/components/Input/index.tsx"],"sourcesContent":["import React from 'react';\nimport './style.scss';\n\nexport interface InputProps {\n  value: string;\n  disabled?: boolean;\n  maxLength?: number | undefined;\n  onChange: (value: string) => void;\n  tag?: string;\n  error?: boolean;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n  style?: React.CSSProperties;\n  inputStyle?: React.CSSProperties;\n}\n\nexport function Input({\n  value,\n  onChange,\n  disabled,\n  maxLength,\n  tag,\n  error,\n  errorMessage,\n  label,\n  placeholder,\n  style,\n  inputStyle\n}: InputProps) {\n  const Element = tag || 'input';\n\n  return (\n    <div className=\"main-container\" style={style}>\n      {label && <div className=\"label-container\">{label}</div>}\n      {React.createElement(Element, {\n        value,\n        onChange: (e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value),\n        disabled,\n        className: `${error ? 'input-container-error' : 'input-container-default'} ${disabled ? 'input-container-disabled' : ''}`,\n        maxlength: maxLength ? maxLength : undefined,\n        placeholder: placeholder,\n        style: inputStyle\n      })}\n      <div className={`${error ? 'error-and-max-word' : 'max-word-container'}`}>\n        {error && <div className=\"error-message\">{errorMessage}</div>}\n        {maxLength && <div className=\"max-word\">{maxLength && value?.length + '/' + maxLength}</div>}\n      </div>\n    </div>\n  );\n}\n"],"names":["React__default","Input","value","onChange","disabled","maxLength","tag","error","errorMessage","label","placeholder","style","inputStyle","Element","React","createElement","className","e","target","maxlength","undefined","length"],"mappings":"AAiBO,OAAAA,OAAA;AAAA,OAAA;AAAA,SAASC,EAAM;AAAA,EACpBC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,YAAAA;AACU,GAAG;AACb,QAAMC,IAAUP,KAAO;AAGrBQ,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,IAAiBL,OAAAA;AAAAA,EAC7BF,GAAAA,KAASM,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAmBP,GAAAA,CAAW,GACtDK,gBAAAA,EAAMC,cAAcF,GAAS;AAAA,IAC5BX,OAAAA;AAAAA,IACAC,UAAUA,CAACc,MAA2Cd,EAASc,EAAEC,OAAOhB,KAAK;AAAA,IAC7EE,UAAAA;AAAAA,IACAY,WAAW,GAAGT,IAAQ,0BAA0B,yBAAyB,IAAIH,IAAW,6BAA6B,EAAE;AAAA,IACvHe,WAAWd,KAAwBe;AAAAA,IACnCV,aAAAA;AAAAA,IACAC,OAAOC;AAAAA,EAAAA,CACR,GACDG,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAW,GAAGT,IAAQ,uBAAuB,oBAAoB;AAAA,EACnEA,GAAAA,KAASQ,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,KAAiBR,CAAkB,GAC3DH,KAAaS,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GAAYX,MAAaH,KAAAA,gBAAAA,EAAOmB,UAAS,MAAMhB,CAAe,CACxF,CACF;AAET;"}
+{"version":3,"file":"index36.js","sources":["../src/components/DropdownWithInputTags/index.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, forwardRef, ForwardedRef, useImperativeHandle, KeyboardEvent } from 'react';\nimport { Popover, PopoverHandle } from '../Popover';\nimport { Icon } from '../Icon';\nimport './styles.scss';\n\nexport interface DropdownOption {\n  id: string | number;\n  label: string;\n  value: string;\n  [key: string]: any; // Allow additional properties\n}\n\nexport interface DropdownWithInputTagsHandle {\n  toggleDropdown: () => void;\n}\n\nexport interface DropdownWithInputTagsProps {\n  value: string[];\n  onChange?: (tags: string[]) => void;\n  placeholder?: string;\n  className?: string;\n  options?: DropdownOption[];\n  renderOption?: (option: DropdownOption, onSelect: (option: DropdownOption) => void) => React.ReactNode;\n  onSearch?: (searchTerm: string) => void;\n  label?: string;\n  automationId?: string;\n  noOptionsMessage?: string;\n  allowCustomTags?: boolean;\n}\n\nexport const DropdownWithInputTags = forwardRef<DropdownWithInputTagsHandle, DropdownWithInputTagsProps>(\n  (\n    {\n      value = [],\n      onChange,\n      placeholder = \"Type to search or add custom tags...\",\n      className = '',\n      options = [],\n      renderOption,\n      onSearch,\n      label,\n      automationId = '',\n      noOptionsMessage = \"No options found\",\n      allowCustomTags = true,\n    },\n    ref: ForwardedRef<DropdownWithInputTagsHandle>\n  ) => {\n    const [tags, setTags] = useState<{ label: string; value: string }[]>(() => {\n      return value.map(val => {\n        const found = options.find(opt => opt.value === val);\n        return found ? { label: found.label, value: found.value } : { label: val, value: val };\n      });\n    });\n    const [inputValue, setInputValue] = useState('');\n    const [filteredOptions, setFilteredOptions] = useState<DropdownOption[]>(options);\n    const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n    const popoverRef = useRef<PopoverHandle>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n      setTags(\n        value.map(val => {\n          const found = options.find(opt => opt.value === val);\n          return found ? { label: found.label, value: found.value } : { label: val, value: val };\n        })\n      );\n    }, [value, options]);\n\n    useEffect(() => {\n      if (!inputValue.trim()) {\n        setFilteredOptions(options);\n      } else {\n        const filtered = options.filter(option =>\n          option.label.toLowerCase().includes(inputValue.toLowerCase()) ||\n          option.value.toLowerCase().includes(inputValue.toLowerCase())\n        );\n        setFilteredOptions(filtered);\n      }\n      \n      if (onSearch) {\n        onSearch(inputValue);\n      }\n    }, [inputValue, options, onSearch]);\n\n    const handleSelectOption = (option: DropdownOption) => {\n      const newTags = [...tags];\n      if (!newTags.some(tag => tag.value === option.value)) {\n        newTags.push({ label: option.label, value: option.value });\n        setTags(newTags);\n        onChange?.(newTags.map(tag => tag.value));\n      }\n      setInputValue('');\n      setIsDropdownOpen(false);\n    };\n\n    const handleRemoveTag = (indexToRemove: number) => {\n      const newTags = tags.filter((_, index) => index !== indexToRemove);\n      setTags(newTags);\n      onChange?.(newTags.map(tag => tag.value));\n    };\n\n    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Enter' && inputValue.trim()) {\n        e.preventDefault();\n        \n        if (filteredOptions.length > 0) {\n          handleSelectOption(filteredOptions[0]);\n        } else if (allowCustomTags) {\n          const newTags = [...tags];\n          if (!newTags.some(tag => tag.value === inputValue.trim())) {\n            newTags.push({ label: inputValue.trim(), value: inputValue.trim() });\n            setTags(newTags);\n            onChange?.(newTags.map(tag => tag.value));\n          }\n          setInputValue('');\n        }\n        setIsDropdownOpen(false);\n      } else if (e.key === 'Backspace' && inputValue === \"\" && tags.length > 0) {\n        const newTags = tags.slice(0, -1);\n        setTags(newTags);\n        onChange?.(newTags.map(tag => tag.value));\n      } else if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        if (!isDropdownOpen) {\n          setIsDropdownOpen(true);\n        }\n      } else if (e.key === 'Escape') {\n        setIsDropdownOpen(false);\n        setInputValue('');\n      }\n    };\n\n    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      const newValue = e.target.value;\n      setInputValue(newValue);\n      \n      if (newValue.trim() && !isDropdownOpen) {\n        setIsDropdownOpen(true);\n      }\n    };\n\n    const handleInputFocus = () => {\n      if (inputValue.trim() || options.length > 0) {\n        setIsDropdownOpen(true);\n      }\n    };\n\n    const handleInputContainerClick = (e: React.MouseEvent) => {\n      e.stopPropagation();\n      inputRef.current?.focus();\n      if (!isDropdownOpen && (inputValue.trim() || options.length > 0)) {\n        setIsDropdownOpen(true);\n      }\n    };\n\n    const handlePopoverWrapperClick = (e: React.MouseEvent) => {\n      const target = e.target as HTMLElement;\n      const isInputArea = target.closest('.input-with-tags-container');\n      if (isInputArea) {\n        e.stopPropagation();\n      }\n    };\n\n    const toggleDropdown = () => {\n      setIsDropdownOpen(!isDropdownOpen);\n    };\n\n    useImperativeHandle(ref, () => ({ toggleDropdown }), []);\n\n    const defaultRenderOption = (option: DropdownOption, onSelect: (option: DropdownOption) => void) => (\n      <div\n        key={option.id}\n        className=\"dropdown-with-input-tags-option\"\n        onClick={() => onSelect(option)}\n      >\n        <span className=\"option-label\">{option.label}</span>\n        {option.value !== option.label && (\n          <span className=\"option-value\">{option.value}</span>\n        )}\n      </div>\n    );\n\n    return (\n      <div className={`dropdown-with-input-tags-wrapper ${className}`} data-automation-id={automationId}>\n        {label && <label className=\"dropdown-with-input-tags-label\">{label}</label>}\n        \n        <div onClick={handlePopoverWrapperClick}>\n          <Popover\n            ref={popoverRef}\n            className=\"dropdown-with-input-tags-popover\"\n            contentWidth=\"full\"\n            position=\"bottom-left\"\n            isPopoverOpen={isDropdownOpen}\n            onPopoverToggle={setIsDropdownOpen}\n            renderPopoverContents={({ closePopoverCb }) => (\n              <div className=\"dropdown-with-input-tags-content\">\n                {filteredOptions.length > 0 ? (\n                  filteredOptions.map((option) =>\n                    renderOption\n                      ? renderOption(option, handleSelectOption)\n                      : defaultRenderOption(option, handleSelectOption)\n                  )\n                ) : (\n                  <div className=\"dropdown-with-input-tags-no-options\">\n                    {inputValue.trim() ? (\n                      allowCustomTags ? (\n                        <div\n                          className=\"dropdown-with-input-tags-option dropdown-with-input-tags-custom-option\"\n                          onClick={() => {\n                            const newTags = [...tags];\n                            if (!newTags.some(tag => tag.value === inputValue.trim())) {\n                              newTags.push({ label: inputValue.trim(), value: inputValue.trim() });\n                              setTags(newTags);\n                              onChange?.(newTags.map(tag => tag.value));\n                            }\n                            setInputValue('');\n                            closePopoverCb();\n                          }}\n                        >\n                          Add \"{inputValue.trim()}\"\n                        </div>\n                      ) : (\n                        <div className=\"dropdown-with-input-tags-no-options-text\">\n                          {noOptionsMessage}\n                        </div>\n                      )\n                    ) : (\n                      <div className=\"dropdown-with-input-tags-no-options-text\">\n                        {noOptionsMessage}\n                      </div>\n                    )}\n                  </div>\n                )}\n              </div>\n            )}\n            renderPopoverSrcElement={() => (\n              <div className=\"dropdown-with-input-tags-input-container\">\n                <div \n                  className=\"input-with-tags-container\" \n                  onClick={handleInputContainerClick}\n                >\n                  {tags.map((tag, index) => (\n                    <span key={index} className=\"tag-in-inputwithtags\">\n                      {tag.label}\n                      <span\n                        className=\"close-icon-in-inputwithtags\"\n                        onClick={(e) => {\n                          e.stopPropagation();\n                          handleRemoveTag(index);\n                        }}\n                      >\n                        <Icon name=\"close\" />\n                      </span>\n                    </span>\n                  ))}\n                  <input\n                    ref={inputRef}\n                    type=\"text\"\n                    value={inputValue}\n                    onChange={handleInputChange}\n                    onKeyDown={handleKeyDown}\n                    onFocus={handleInputFocus}\n                    placeholder={tags.length === 0 ? placeholder : ''}\n                    className=\"input-with-tags-input\"\n                  />\n                </div>\n              </div>\n            )}\n          />\n        </div>\n      </div>\n    );\n  }\n); "],"names":["DropdownWithInputTags","value","onChange","placeholder","className","options","renderOption","onSearch","label","automationId","noOptionsMessage","allowCustomTags","ref","tags","setTags","useState","map","val","found","find","opt","inputValue","setInputValue","filteredOptions","setFilteredOptions","isDropdownOpen","setIsDropdownOpen","popoverRef","useRef","inputRef","useEffect","trim","filtered","filter","option","toLowerCase","includes","handleSelectOption","newTags","some","tag","push","handleRemoveTag","indexToRemove","_","index","handleKeyDown","e","key","preventDefault","length","slice","handleInputChange","newValue","target","handleInputFocus","handleInputContainerClick","stopPropagation","current","focus","handlePopoverWrapperClick","closest","toggleDropdown","useImperativeHandle","defaultRenderOption","onSelect","React","createElement","id","onClick","Popover","contentWidth","position","isPopoverOpen","onPopoverToggle","renderPopoverContents","closePopoverCb","renderPopoverSrcElement","Icon","name","type","onKeyDown","onFocus"],"mappings":"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"}

package/dist/index37.js

@@ -1,89 +1,41 @@
-import n, { useState as h, useRef as $, useEffect as s, useMemo as z } from "react";
-import { Icon as g } from "./index5.js";
-import { LabelChip as D } from "./index9.js";
-import { debounce as F } from "./index136.js";
+import e from "react";
 /* empty css         */
-function q(r) {
-  const {
-    disabled: v = !1,
-    placeholder: N = "Search",
-    debounceDuration: f = 500,
-    onInputChange: l = () => {
-    },
-    onSearchClear: S = () => {
-    },
-    onChipRemove: I = () => {
-    },
-    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);
-  s(() => {
-    o && c.current && setTimeout(() => {
-      var e;
-      return (e = c == null ? void 0 : c.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]);
-  s(() => () => {
-    u.cancel();
-  }, [u]);
-  const y = (e) => {
-    d(e), u(e);
-  }, B = () => {
-    d(""), l(""), S();
-  }, 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;
-  return /* @__PURE__ */ n.createElement("div", {
-    className: `se-search-box ${o ? "expand-box" : "shrink-box"}`,
-    style: {
-      width: k
-    }
-  }, o && /* @__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,
-    icon: "close",
-    onIconClick: () => _(e),
-    size: "lg"
-  }))), /* @__PURE__ */ n.createElement("div", {
-    className: "search-input-container"
-  }, w && /* @__PURE__ */ n.createElement(g, {
-    name: "search",
-    className: "search-icon img-wrap",
-    onClick: () => p && E((e) => !e)
-  }), /* @__PURE__ */ n.createElement("input", {
-    ref: c,
-    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),
-    value: t,
-    disabled: v,
-    onBlur: H
-  }), !!t && /* @__PURE__ */ n.createElement(g, {
-    name: "close",
-    className: "cross-icon img-wrap",
-    onClick: B
-  }))), b && /* @__PURE__ */ n.createElement("div", {
-    className: "filter-component-container"
-  }, b())));
+function f({
+  value: n,
+  onChange: i,
+  disabled: r,
+  maxLength: t,
+  tag: m,
+  error: a,
+  errorMessage: o,
+  label: c,
+  placeholder: s,
+  style: l,
+  inputStyle: d
+}) {
+  const p = m || "input";
+  return /* @__PURE__ */ e.createElement("div", {
+    className: "main-container",
+    style: l
+  }, c && /* @__PURE__ */ e.createElement("div", {
+    className: "label-container"
+  }, c), /* @__PURE__ */ e.createElement(p, {
+    value: n,
+    onChange: (E) => i(E.target.value),
+    disabled: r,
+    className: `${a ? "input-container-error" : "input-container-default"} ${r ? "input-container-disabled" : ""}`,
+    maxlength: t || void 0,
+    placeholder: s,
+    style: d
+  }), /* @__PURE__ */ e.createElement("div", {
+    className: `${a ? "error-and-max-word" : "max-word-container"}`
+  }, a && /* @__PURE__ */ e.createElement("div", {
+    className: "error-message"
+  }, o), t && /* @__PURE__ */ e.createElement("div", {
+    className: "max-word"
+  }, t && (n == null ? void 0 : n.length) + "/" + t)));
 }
 export {
-  q as SearchBox
+  f as Input
 };
 //# sourceMappingURL=index37.js.map

package/dist/index37.js.map

@@ -1 +1 @@
-{"version":3,"file":"index37.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":"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"}
+{"version":3,"file":"index37.js","sources":["../src/components/Input/index.tsx"],"sourcesContent":["import React from 'react';\nimport './style.scss';\n\nexport interface InputProps {\n  value: string;\n  disabled?: boolean;\n  maxLength?: number | undefined;\n  onChange: (value: string) => void;\n  tag?: string;\n  error?: boolean;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n  style?: React.CSSProperties;\n  inputStyle?: React.CSSProperties;\n}\n\nexport function Input({\n  value,\n  onChange,\n  disabled,\n  maxLength,\n  tag,\n  error,\n  errorMessage,\n  label,\n  placeholder,\n  style,\n  inputStyle\n}: InputProps) {\n  const Element = tag || 'input';\n\n  return (\n    <div className=\"main-container\" style={style}>\n      {label && <div className=\"label-container\">{label}</div>}\n      {React.createElement(Element, {\n        value,\n        onChange: (e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value),\n        disabled,\n        className: `${error ? 'input-container-error' : 'input-container-default'} ${disabled ? 'input-container-disabled' : ''}`,\n        maxlength: maxLength ? maxLength : undefined,\n        placeholder: placeholder,\n        style: inputStyle\n      })}\n      <div className={`${error ? 'error-and-max-word' : 'max-word-container'}`}>\n        {error && <div className=\"error-message\">{errorMessage}</div>}\n        {maxLength && <div className=\"max-word\">{maxLength && value?.length + '/' + maxLength}</div>}\n      </div>\n    </div>\n  );\n}\n"],"names":["React__default","Input","value","onChange","disabled","maxLength","tag","error","errorMessage","label","placeholder","style","inputStyle","Element","React","createElement","className","e","target","maxlength","undefined","length"],"mappings":"AAiBO,OAAAA,OAAA;AAAA,OAAA;AAAA,SAASC,EAAM;AAAA,EACpBC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,YAAAA;AACU,GAAG;AACb,QAAMC,IAAUP,KAAO;AAGrBQ,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,IAAiBL,OAAAA;AAAAA,EAC7BF,GAAAA,KAASM,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAmBP,GAAAA,CAAW,GACtDK,gBAAAA,EAAMC,cAAcF,GAAS;AAAA,IAC5BX,OAAAA;AAAAA,IACAC,UAAUA,CAACc,MAA2Cd,EAASc,EAAEC,OAAOhB,KAAK;AAAA,IAC7EE,UAAAA;AAAAA,IACAY,WAAW,GAAGT,IAAQ,0BAA0B,yBAAyB,IAAIH,IAAW,6BAA6B,EAAE;AAAA,IACvHe,WAAWd,KAAwBe;AAAAA,IACnCV,aAAAA;AAAAA,IACAC,OAAOC;AAAAA,EAAAA,CACR,GACDG,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAW,GAAGT,IAAQ,uBAAuB,oBAAoB;AAAA,EACnEA,GAAAA,KAASQ,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,KAAiBR,CAAkB,GAC3DH,KAAaS,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GAAYX,MAAaH,KAAAA,gBAAAA,EAAOmB,UAAS,MAAMhB,CAAe,CACxF,CACF;AAET;"}

package/dist/index38.js

@@ -1,37 +1,89 @@
-import e from "react";
+import n, { useState as h, useRef as $, useEffect as s, useMemo as z } from "react";
+import { Icon as g } from "./index5.js";
+import { LabelChip as D } from "./index9.js";
+import { debounce as F } from "./index140.js";
 /* empty css         */
-const r = {
-  progressBarCtn: "flex items-center gap-2",
-  progressBar: "flex-1 w-[70%] bg-[var(--color-gray-200)] h-[6px] rounded-[12px] overflow-hidden",
-  progressBarProgress: "h-full rounded-[12px]",
-  stepsCount: "steps-count"
-}, d = ({
-  totalTasks: t = 0,
-  completedTasks: o = 0,
-  progressBarCtnClassName: n = "",
-  needPercentageCompleted: c = !0,
-  progressBarColor: s
-}) => {
-  const a = t > 0 ? o / t * 100 : 0;
-  return /* @__PURE__ */ e.createElement("div", {
-    className: `${r.progressBarCtn} ${n} progress-bar-ctn`,
+function q(r) {
+  const {
+    disabled: v = !1,
+    placeholder: N = "Search",
+    debounceDuration: f = 500,
+    onInputChange: l = () => {
+    },
+    onSearchClear: S = () => {
+    },
+    onChipRemove: I = () => {
+    },
+    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);
+  s(() => {
+    o && c.current && setTimeout(() => {
+      var e;
+      return (e = c == null ? void 0 : c.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]);
+  s(() => () => {
+    u.cancel();
+  }, [u]);
+  const y = (e) => {
+    d(e), u(e);
+  }, B = () => {
+    d(""), l(""), S();
+  }, 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;
+  return /* @__PURE__ */ n.createElement("div", {
+    className: `se-search-box ${o ? "expand-box" : "shrink-box"}`,
     style: {
-      width: "100%"
+      width: k
     }
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: r.progressBar
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: r.progressBarProgress,
-    style: {
-      width: `${a}%`,
-      background: `${s || "linear-gradient(to right, var(--color-green-500), var(--color-green-400))"}`,
-      transition: "width 0.4s ease-in-out"
-    }
-  })), c && /* @__PURE__ */ e.createElement("div", {
-    className: r.stepsCount
-  }, `${Math.round(a)}% completed`));
-};
+  }, o && /* @__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,
+    icon: "close",
+    onIconClick: () => _(e),
+    size: "lg"
+  }))), /* @__PURE__ */ n.createElement("div", {
+    className: "search-input-container"
+  }, w && /* @__PURE__ */ n.createElement(g, {
+    name: "search",
+    className: "search-icon img-wrap",
+    onClick: () => p && E((e) => !e)
+  }), /* @__PURE__ */ n.createElement("input", {
+    ref: c,
+    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),
+    value: t,
+    disabled: v,
+    onBlur: H
+  }), !!t && /* @__PURE__ */ n.createElement(g, {
+    name: "close",
+    className: "cross-icon img-wrap",
+    onClick: B
+  }))), b && /* @__PURE__ */ n.createElement("div", {
+    className: "filter-component-container"
+  }, b())));
+}
 export {
-  d as ProgressBar
+  q as SearchBox
 };
 //# sourceMappingURL=index38.js.map

package/dist/index38.js.map

@@ -1 +1 @@
-{"version":3,"file":"index38.js","sources":["../src/components/ProgressBar/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Map } from '../../utils/common.types';\nimport './style.scss';\n\nexport interface ProgressBarProps {\n  totalTasks: number;\n  completedTasks: number;\n  progressBarCtnClassName?: string;\n  needPercentageCompleted?: boolean;\n  progressBarColor?: string;\n}\n\nconst className: Map = {\n  progressBarCtn: 'flex items-center gap-2',\n  progressBar: 'flex-1 w-[70%] bg-[var(--color-gray-200)] h-[6px] rounded-[12px] overflow-hidden',\n  progressBarProgress: 'h-full rounded-[12px]',\n  stepsCount: 'steps-count'\n};\n\nexport const ProgressBar: FC<ProgressBarProps> = ({\n  totalTasks = 0,\n  completedTasks = 0,\n  progressBarCtnClassName = '',\n  needPercentageCompleted = true,\n  progressBarColor\n}) => {\n  const percentageComplete = totalTasks > 0 ? (completedTasks / totalTasks) * 100 : 0;\n  return (\n    <div\n      className={`${className.progressBarCtn} ${progressBarCtnClassName} progress-bar-ctn`}\n      style={{ width: '100%' }}\n    >\n      <div className={className.progressBar}>\n        <div\n          className={className.progressBarProgress}\n          style={{\n            width: `${percentageComplete}%`,\n            background: `${progressBarColor ? progressBarColor : 'linear-gradient(to right, var(--color-green-500), var(--color-green-400))'}`,\n            transition: 'width 0.4s ease-in-out'\n          }}\n        ></div>\n      </div>\n      {needPercentageCompleted && (\n        <div className={className.stepsCount}>{`${Math.round(percentageComplete)}% completed`}</div>\n      )}\n    </div>\n  );\n};\n"],"names":["React__default","className","progressBarCtn","progressBar","progressBarProgress","stepsCount","ProgressBar","totalTasks","completedTasks","progressBarCtnClassName","needPercentageCompleted","progressBarColor","percentageComplete","React","createElement","style","width","background","transition","Math","round"],"mappings":"AAYA,OAAAA,OAAA;AAAA,OAAA;AAAA,MAAMC,IAAiB;AAAA,EACrBC,gBAAgB;AAAA,EAChBC,aAAa;AAAA,EACbC,qBAAqB;AAAA,EACrBC,YAAY;AACd,GAEaC,IAAoCA,CAAC;AAAA,EAChDC,YAAAA,IAAa;AAAA,EACbC,gBAAAA,IAAiB;AAAA,EACjBC,yBAAAA,IAA0B;AAAA,EAC1BC,yBAAAA,IAA0B;AAAA,EAC1BC,kBAAAA;AACF,MAAM;AACJ,QAAMC,IAAqBL,IAAa,IAAKC,IAAiBD,IAAc,MAAM;AAEhFM,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEb,WAAW,GAAGA,EAAUC,cAAc,IAAIO,CAAuB;AAAA,IACjEM,OAAO;AAAA,MAAEC,OAAO;AAAA,IAAA;AAAA,EAAO,GAEvBF,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKb,WAAWA,EAAUE;AAAAA,EAAAA,GACxBW,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IACEb,WAAWA,EAAUG;AAAAA,IACrBW,OAAO;AAAA,MACLC,OAAO,GAAGJ,CAAkB;AAAA,MAC5BK,YAAY,GAAGN,KAAsC,2EAA2E;AAAA,MAChIO,YAAY;AAAA,IAAA;AAAA,EAEV,CAAA,CACH,GACJR,KACCG,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKb,WAAWA,EAAUI;AAAAA,EAAAA,GAAa,GAAGc,KAAKC,MAAMR,CAAkB,CAAC,aAAmB,CAE1F;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';\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":"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"}