se-design 0.0.123 → 0.0.125

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index37.js CHANGED
@@ -10,23 +10,23 @@ function f({
10
10
  errorMessage: o,
11
11
  label: c,
12
12
  placeholder: s,
13
- style: l,
14
- inputStyle: d
13
+ style: d,
14
+ inputStyle: l
15
15
  }) {
16
16
  const p = m || "input";
17
17
  return /* @__PURE__ */ e.createElement("div", {
18
- className: "main-container",
19
- style: l
18
+ className: "input-main-container",
19
+ style: d
20
20
  }, c && /* @__PURE__ */ e.createElement("div", {
21
21
  className: "label-container"
22
22
  }, c), /* @__PURE__ */ e.createElement(p, {
23
23
  value: n,
24
- onChange: (E) => i(E.target.value),
24
+ onChange: (u) => i(u.target.value),
25
25
  disabled: r,
26
26
  className: `${a ? "input-container-error" : "input-container-default"} ${r ? "input-container-disabled" : ""}`,
27
- maxlength: t || void 0,
27
+ maxLength: t || void 0,
28
28
  placeholder: s,
29
- style: d
29
+ style: l
30
30
  }), /* @__PURE__ */ e.createElement("div", {
31
31
  className: `${a ? "error-and-max-word" : "max-word-container"}`
32
32
  }, a && /* @__PURE__ */ e.createElement("div", {
@@ -1 +1 @@
1
- {"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;"}
1
+ {"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=\"input-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","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,IAAuBL,OAAAA;AAAAA,EACnCF,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,IACvHC,WAAWA,KAAwBc;AAAAA,IACnCT,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,EAAOkB,UAAS,MAAMf,CAAe,CACxF,CACF;AAET;"}
package/dist/index38.js CHANGED
@@ -1,87 +1,87 @@
1
- import n, { useState as h, useRef as $, useEffect as s, useMemo as z } from "react";
2
- import { Icon as g } from "./index5.js";
1
+ import n, { useState as b, useRef as $, useEffect as s, useMemo as z } from "react";
2
+ import { Icon as N } from "./index5.js";
3
3
  import { LabelChip as D } from "./index9.js";
4
4
  import { debounce as F } from "./index140.js";
5
5
  /* empty css */
6
- function q(r) {
6
+ function q(o) {
7
7
  const {
8
- disabled: v = !1,
9
- placeholder: N = "Search",
10
- debounceDuration: f = 500,
11
- onInputChange: l = () => {
8
+ disabled: S = !1,
9
+ placeholder: p = "Search",
10
+ debounceDuration: E = 500,
11
+ onInputChange: c = () => {
12
12
  },
13
- onSearchClear: S = () => {
13
+ onSearchClear: I = () => {
14
14
  },
15
- onChipRemove: I = () => {
15
+ onChipRemove: k = () => {
16
16
  },
17
- updateSearchString: i = "",
18
- collapsible: p = !1,
19
- width: k = "200px",
20
- chips: m = [],
21
- showSearchIcon: w = !0,
22
- renderFilterComponent: b = null
23
- } = r, [t, d] = h(""), [o, E] = h(!(r != null && r.collapsible)), [a, x] = h(m || []), c = $(null);
17
+ updateSearchString: m = "",
18
+ collapsible: h = !1,
19
+ width: w = "200px",
20
+ chips: i = [],
21
+ showSearchIcon: y = !0,
22
+ renderFilterComponent: v = null
23
+ } = o, [t, u] = b(""), [l, x] = b(!(o != null && o.collapsible)), [a, C] = b(i || []), r = $(null);
24
24
  s(() => {
25
- o && c.current && setTimeout(() => {
25
+ l && r.current && setTimeout(() => {
26
26
  var e;
27
- return (e = c == null ? void 0 : c.current) == null ? void 0 : e.focus();
27
+ return (e = r == null ? void 0 : r.current) == null ? void 0 : e.focus();
28
28
  }, 0);
29
- }, [o]), s(() => {
30
- i !== t && d(i);
31
- }, [i]), s(() => {
32
- x(m);
33
- }, [m]);
34
- const u = z(() => F(l, f), [l, f]);
29
+ }, [l]), s(() => {
30
+ m !== t && u(m);
31
+ }, [m]), s(() => {
32
+ C(i);
33
+ }, [i]);
34
+ const d = z(() => F(c, E), [c, E]);
35
35
  s(() => () => {
36
- u.cancel();
37
- }, [u]);
38
- const y = (e) => {
39
- d(e), u(e);
40
- }, B = () => {
41
- d(""), l(""), S();
36
+ d.cancel();
37
+ }, [d]);
38
+ const B = (e) => {
39
+ u(e), d(e);
42
40
  }, H = () => {
43
- p && (t == null ? void 0 : t.trimEnd()) === "" && E(!1);
44
- }, _ = (e) => {
45
- x(a.filter((R) => R !== e)), I(e);
46
- }, C = (a == null ? void 0 : a.length) > 0;
41
+ u(""), c(""), I();
42
+ }, _ = () => {
43
+ h && (t == null ? void 0 : t.trimEnd()) === "" && x(!1);
44
+ }, R = (e) => {
45
+ C(a.filter((f) => (f == null ? void 0 : f.value) !== (e == null ? void 0 : e.value))), k(e);
46
+ }, g = (a == null ? void 0 : a.length) > 0;
47
47
  return /* @__PURE__ */ n.createElement("div", {
48
- className: `se-search-box ${o ? "expand-box" : "shrink-box"}`,
48
+ className: `se-search-box ${l ? "expand-box" : "shrink-box"}`,
49
49
  style: {
50
- width: k
50
+ width: w
51
51
  }
52
- }, o && /* @__PURE__ */ n.createElement("div", {
52
+ }, l && /* @__PURE__ */ n.createElement("div", {
53
53
  className: "search-box-container"
54
54
  }, /* @__PURE__ */ n.createElement("div", {
55
- className: `chips-and-search-box-container${C ? " has-chips" : ""}`
56
- }, C && (a == null ? void 0 : a.map((e) => /* @__PURE__ */ n.createElement(D, {
57
- key: e,
58
- label: e,
55
+ className: `chips-and-search-box-container${g ? " has-chips" : ""}`
56
+ }, g && (a == null ? void 0 : a.map((e) => /* @__PURE__ */ n.createElement(D, {
57
+ key: e == null ? void 0 : e.value,
58
+ label: e == null ? void 0 : e.label,
59
59
  icon: "close",
60
- onIconClick: () => _(e),
60
+ onIconClick: () => R(e),
61
61
  size: "lg"
62
62
  }))), /* @__PURE__ */ n.createElement("div", {
63
63
  className: "search-input-container"
64
- }, w && /* @__PURE__ */ n.createElement(g, {
64
+ }, y && /* @__PURE__ */ n.createElement(N, {
65
65
  name: "search",
66
66
  className: "search-icon img-wrap",
67
- onClick: () => p && E((e) => !e)
67
+ onClick: () => h && x((e) => !e)
68
68
  }), /* @__PURE__ */ n.createElement("input", {
69
- ref: c,
69
+ ref: r,
70
70
  className: "search-input border-transparent focus:border-transparent active:border-transparent focus:ring-0",
71
71
  id: "search_bar",
72
72
  type: "text",
73
- placeholder: N,
74
- onChange: (e) => y(e.target.value),
73
+ placeholder: p,
74
+ onChange: (e) => B(e.target.value),
75
75
  value: t,
76
- disabled: v,
77
- onBlur: H
78
- }), !!t && /* @__PURE__ */ n.createElement(g, {
76
+ disabled: S,
77
+ onBlur: _
78
+ }), !!t && /* @__PURE__ */ n.createElement(N, {
79
79
  name: "close",
80
80
  className: "cross-icon img-wrap",
81
- onClick: B
82
- }))), b && /* @__PURE__ */ n.createElement("div", {
81
+ onClick: H
82
+ }))), v && /* @__PURE__ */ n.createElement("div", {
83
83
  className: "filter-component-container"
84
- }, b())));
84
+ }, v())));
85
85
  }
86
86
  export {
87
87
  q as SearchBox
@@ -1 +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":"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"}
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';\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 CHANGED
@@ -1,41 +1,41 @@
1
- var z = Object.defineProperty;
2
- var s = Object.getOwnPropertySymbols;
3
- var $ = Object.prototype.hasOwnProperty, b = Object.prototype.propertyIsEnumerable;
4
- var I = (e, t, a) => t in e ? z(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a, x = (e, t) => {
1
+ var D = Object.defineProperty;
2
+ var d = Object.getOwnPropertySymbols;
3
+ var $ = Object.prototype.hasOwnProperty, x = Object.prototype.propertyIsEnumerable;
4
+ 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) => {
5
5
  for (var a in t || (t = {}))
6
6
  $.call(t, a) && I(e, a, t[a]);
7
- if (s)
8
- for (var a of s(t))
9
- b.call(t, a) && I(e, a, t[a]);
7
+ if (d)
8
+ for (var a of d(t))
9
+ x.call(t, a) && I(e, a, t[a]);
10
10
  return e;
11
11
  };
12
- var S = (e, t) => {
12
+ var y = (e, t) => {
13
13
  var a = {};
14
14
  for (var l in e)
15
15
  $.call(e, l) && t.indexOf(l) < 0 && (a[l] = e[l]);
16
- if (e != null && s)
17
- for (var l of s(e))
18
- t.indexOf(l) < 0 && b.call(e, l) && (a[l] = e[l]);
16
+ if (e != null && d)
17
+ for (var l of d(e))
18
+ t.indexOf(l) < 0 && x.call(e, l) && (a[l] = e[l]);
19
19
  return a;
20
20
  };
21
- import n, { useRef as D, useEffect as y } from "react";
21
+ import n, { useRef as G, useEffect as B } from "react";
22
22
  /* empty css */
23
- import { Icon as B } from "./index5.js";
24
- const P = /* @__PURE__ */ n.memo((G) => {
25
- var h = G, {
23
+ import { Icon as L } from "./index5.js";
24
+ const Q = /* @__PURE__ */ n.memo((H) => {
25
+ var w = H, {
26
26
  value: e,
27
27
  onChange: t,
28
28
  disabled: a = !1,
29
29
  maxLength: l,
30
- tag: L = "input",
31
- error: d = !1,
32
- errorMessage: _,
33
- label: E,
34
- placeholder: A,
30
+ tag: _ = "input",
31
+ error: f = !1,
32
+ errorMessage: j,
33
+ label: N,
34
+ placeholder: z,
35
35
  suggestions: i = [],
36
36
  customRenderSuggestions: m,
37
- onSuggestionClick: N
38
- } = h, F = S(h, [
37
+ onSuggestionClick: v
38
+ } = w, A = y(w, [
39
39
  "value",
40
40
  "onChange",
41
41
  "disabled",
@@ -49,76 +49,79 @@ const P = /* @__PURE__ */ n.memo((G) => {
49
49
  "customRenderSuggestions",
50
50
  "onSuggestionClick"
51
51
  ]);
52
- const [o, f] = n.useState([...i]), [w, p] = n.useState(!1), u = D(null), O = n.useCallback((r) => {
52
+ const [o, p] = n.useState([...i]), [h, E] = n.useState(!1), u = G(null), F = n.useCallback((r) => {
53
53
  const c = r.target.value;
54
54
  if (m)
55
55
  t(c, !1);
56
56
  else if (t(c), c === "")
57
- f([...i]);
57
+ p([...i]);
58
58
  else if (c) {
59
- const q = i == null ? void 0 : i.filter((C) => {
60
- var k;
61
- return typeof C == "string" && C.toLowerCase().includes((k = c == null ? void 0 : c.toLowerCase()) != null ? k : "");
59
+ const q = i == null ? void 0 : i.filter((s) => {
60
+ var k, b;
61
+ 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 : ""));
62
62
  });
63
- f([...q]);
63
+ p([...q]);
64
64
  }
65
65
  }, [t, i, m]);
66
- y(() => {
67
- f([...i]);
68
- }, [i]), y(() => {
66
+ B(() => {
67
+ p([...i]);
68
+ }, [i]), B(() => {
69
69
  const r = (c) => {
70
- u.current && !u.current.contains(c.target) && p(!1);
70
+ u.current && !u.current.contains(c.target) && E(!1);
71
71
  };
72
72
  return document.addEventListener("mousedown", r), () => {
73
73
  document.removeEventListener("mousedown", r);
74
74
  };
75
75
  }, []);
76
- const V = () => {
77
- p(!0);
78
- }, v = (r) => {
79
- t(r, !0), p(!1), N && N(r);
80
- }, j = () => {
76
+ const O = () => {
77
+ E(!0);
78
+ }, C = (r) => {
79
+ t(r, !0), E(!1), v && v(r);
80
+ }, V = () => {
81
81
  t("", !1);
82
82
  };
83
83
  return /* @__PURE__ */ n.createElement("div", {
84
84
  className: "main-container-autocomplete-se-design",
85
85
  ref: u
86
- }, E && /* @__PURE__ */ n.createElement("label", {
86
+ }, N && /* @__PURE__ */ n.createElement("span", {
87
87
  className: "label-container"
88
- }, E), /* @__PURE__ */ n.createElement("div", {
88
+ }, N), /* @__PURE__ */ n.createElement("div", {
89
+ className: "input-container-wrapper"
90
+ }, /* @__PURE__ */ n.createElement("div", {
89
91
  className: "input-wrapper"
90
- }, /* @__PURE__ */ n.createElement(L, x({
92
+ }, /* @__PURE__ */ n.createElement(_, S({
91
93
  value: e,
92
- onChange: O,
93
- onClick: V,
94
+ onChange: F,
95
+ onClick: O,
94
96
  disabled: a,
95
- className: `${d ? "input-container-error" : "input-container-default"} ${a ? "input-container-disabled" : ""} ${o.length > 0 || e ? "with-icon" : ""} ${o.length > 0 && e ? "with-icons" : ""}`,
97
+ className: `${f ? "input-container-error" : "input-container-default"} ${a ? "input-container-disabled" : ""} ${o.length > 0 || e ? "with-icon" : ""} ${o.length > 0 && e ? "with-icons" : ""}`,
96
98
  maxLength: l,
97
- placeholder: A
98
- }, F)), e && /* @__PURE__ */ n.createElement(B, {
99
+ placeholder: z
100
+ }, A)), e && /* @__PURE__ */ n.createElement(L, {
99
101
  name: "close",
100
102
  className: "input-icon-close",
101
- onClick: j
102
- }), o.length > 0 && /* @__PURE__ */ n.createElement(B, {
103
+ size: 15,
104
+ onClick: V
105
+ }), o.length > 0 && /* @__PURE__ */ n.createElement(L, {
103
106
  name: "chevron",
104
- rotation: w ? "180" : "0",
107
+ rotation: h ? "180" : "0",
105
108
  className: "input-icon-chevron"
106
- })), w && o.length > 0 && /* @__PURE__ */ n.createElement("div", {
109
+ })), h && o.length > 0 && /* @__PURE__ */ n.createElement("div", {
107
110
  className: "suggestions-list"
108
- }, m ? m(o, v) : o.map((r, c) => /* @__PURE__ */ n.createElement("div", {
111
+ }, m ? m(o, C) : o.map((r, c) => /* @__PURE__ */ n.createElement("div", {
109
112
  key: c,
110
113
  className: "suggestion-item",
111
- onClick: () => v(r)
112
- }, r))), /* @__PURE__ */ n.createElement("div", {
113
- className: `${d ? "error-and-max-word" : "max-word-container"}`
114
- }, d && /* @__PURE__ */ n.createElement("div", {
114
+ onClick: () => C(r.value)
115
+ }, r.label)))), /* @__PURE__ */ n.createElement("div", {
116
+ className: `${f ? "error-and-max-word" : "max-word-container"}`
117
+ }, f && /* @__PURE__ */ n.createElement("div", {
115
118
  id: "error-message",
116
119
  className: "error-message"
117
- }, _), l && /* @__PURE__ */ n.createElement("div", {
120
+ }, j), l && /* @__PURE__ */ n.createElement("div", {
118
121
  className: "max-word"
119
122
  }, e.length, "/", l)));
120
123
  });
121
124
  export {
122
- P as AutoCompleteInput
125
+ Q as AutoCompleteInput
123
126
  };
124
127
  //# sourceMappingURL=index43.js.map
@@ -1 +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\" 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","rotation","map","index","key","id"],"mappings":"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"}
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?: { 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/index48.js CHANGED
@@ -1,11 +1,11 @@
1
- import a, { useState as x } from "react";
1
+ import a, { useState as r } from "react";
2
2
  import { Icon as f } from "./index5.js";
3
- const w = ({
3
+ const h = ({
4
4
  crumbs: t,
5
5
  onCrumbClick: l,
6
6
  className: g
7
7
  }) => {
8
- 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) : [];
8
+ 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) : [];
9
9
  return /* @__PURE__ */ a.createElement("div", {
10
10
  className: `se-design-breadcrumbs flex items-center ${g}`,
11
11
  "aria-label": "Breadcrumb"
@@ -23,7 +23,7 @@ const w = ({
23
23
  onClick: () => {
24
24
  l == null || l(e), i(!1);
25
25
  },
26
- className: "w-full text-left px-4 py-2 text-xl text-gray-500 cursor-pointer hover:bg-gray-100"
26
+ 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"
27
27
  }, e == null ? void 0 : e.label)))), /* @__PURE__ */ a.createElement("div", {
28
28
  className: "se-design-breadcrumbs-list inline-flex items-center"
29
29
  }, n == null ? void 0 : n.map((e, p) => /* @__PURE__ */ a.createElement("div", {
@@ -41,6 +41,6 @@ const w = ({
41
41
  }, e == null ? void 0 : e.label)))));
42
42
  };
43
43
  export {
44
- w as BreadCrumbs
44
+ h as BreadCrumbs
45
45
  };
46
46
  //# sourceMappingURL=index48.js.map
@@ -1 +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;"}
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=\"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;"}