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/assets/style.css +1 -1
- package/dist/components/AutoCompleteInput/index.d.ts +4 -1
- package/dist/components/Dropdown/index.d.ts +1 -1
- package/dist/components/DropdownWithInputTags/index.d.ts +1 -0
- package/dist/components/Icon/index.d.ts +1 -0
- package/dist/components/SearchBox/index.d.ts +7 -2
- package/dist/index12.js +1 -1
- package/dist/index12.js.map +1 -1
- package/dist/index17.js +19 -17
- package/dist/index17.js.map +1 -1
- package/dist/index23.js +53 -53
- package/dist/index23.js.map +1 -1
- package/dist/index36.js +113 -101
- package/dist/index36.js.map +1 -1
- package/dist/index37.js +7 -7
- package/dist/index37.js.map +1 -1
- package/dist/index38.js +53 -53
- package/dist/index38.js.map +1 -1
- package/dist/index43.js +59 -56
- package/dist/index43.js.map +1 -1
- package/dist/index48.js +5 -5
- package/dist/index48.js.map +1 -1
- package/dist/index5.js +155 -152
- package/dist/index5.js.map +1 -1
- package/dist/index9.js +11 -10
- package/dist/index9.js.map +1 -1
- package/package.json +1 -1
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:
|
|
14
|
-
inputStyle:
|
|
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:
|
|
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: (
|
|
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
|
-
|
|
27
|
+
maxLength: t || void 0,
|
|
28
28
|
placeholder: s,
|
|
29
|
-
style:
|
|
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", {
|
package/dist/index37.js.map
CHANGED
|
@@ -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
|
|
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
|
|
2
|
-
import { Icon as
|
|
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(
|
|
6
|
+
function q(o) {
|
|
7
7
|
const {
|
|
8
|
-
disabled:
|
|
9
|
-
placeholder:
|
|
10
|
-
debounceDuration:
|
|
11
|
-
onInputChange:
|
|
8
|
+
disabled: S = !1,
|
|
9
|
+
placeholder: p = "Search",
|
|
10
|
+
debounceDuration: E = 500,
|
|
11
|
+
onInputChange: c = () => {
|
|
12
12
|
},
|
|
13
|
-
onSearchClear:
|
|
13
|
+
onSearchClear: I = () => {
|
|
14
14
|
},
|
|
15
|
-
onChipRemove:
|
|
15
|
+
onChipRemove: k = () => {
|
|
16
16
|
},
|
|
17
|
-
updateSearchString:
|
|
18
|
-
collapsible:
|
|
19
|
-
width:
|
|
20
|
-
chips:
|
|
21
|
-
showSearchIcon:
|
|
22
|
-
renderFilterComponent:
|
|
23
|
-
} =
|
|
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
|
-
|
|
25
|
+
l && r.current && setTimeout(() => {
|
|
26
26
|
var e;
|
|
27
|
-
return (e =
|
|
27
|
+
return (e = r == null ? void 0 : r.current) == null ? void 0 : e.focus();
|
|
28
28
|
}, 0);
|
|
29
|
-
}, [
|
|
30
|
-
|
|
31
|
-
}, [
|
|
32
|
-
|
|
33
|
-
}, [
|
|
34
|
-
const
|
|
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
|
-
|
|
37
|
-
}, [
|
|
38
|
-
const
|
|
39
|
-
|
|
40
|
-
}, B = () => {
|
|
41
|
-
d(""), l(""), S();
|
|
36
|
+
d.cancel();
|
|
37
|
+
}, [d]);
|
|
38
|
+
const B = (e) => {
|
|
39
|
+
u(e), d(e);
|
|
42
40
|
}, H = () => {
|
|
43
|
-
|
|
44
|
-
}, _ = (
|
|
45
|
-
|
|
46
|
-
},
|
|
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 ${
|
|
48
|
+
className: `se-search-box ${l ? "expand-box" : "shrink-box"}`,
|
|
49
49
|
style: {
|
|
50
|
-
width:
|
|
50
|
+
width: w
|
|
51
51
|
}
|
|
52
|
-
},
|
|
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${
|
|
56
|
-
},
|
|
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: () =>
|
|
60
|
+
onIconClick: () => R(e),
|
|
61
61
|
size: "lg"
|
|
62
62
|
}))), /* @__PURE__ */ n.createElement("div", {
|
|
63
63
|
className: "search-input-container"
|
|
64
|
-
},
|
|
64
|
+
}, y && /* @__PURE__ */ n.createElement(N, {
|
|
65
65
|
name: "search",
|
|
66
66
|
className: "search-icon img-wrap",
|
|
67
|
-
onClick: () =>
|
|
67
|
+
onClick: () => h && x((e) => !e)
|
|
68
68
|
}), /* @__PURE__ */ n.createElement("input", {
|
|
69
|
-
ref:
|
|
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:
|
|
74
|
-
onChange: (e) =>
|
|
73
|
+
placeholder: p,
|
|
74
|
+
onChange: (e) => B(e.target.value),
|
|
75
75
|
value: t,
|
|
76
|
-
disabled:
|
|
77
|
-
onBlur:
|
|
78
|
-
}), !!t && /* @__PURE__ */ n.createElement(
|
|
76
|
+
disabled: S,
|
|
77
|
+
onBlur: _
|
|
78
|
+
}), !!t && /* @__PURE__ */ n.createElement(N, {
|
|
79
79
|
name: "close",
|
|
80
80
|
className: "cross-icon img-wrap",
|
|
81
|
-
onClick:
|
|
82
|
-
}))),
|
|
81
|
+
onClick: H
|
|
82
|
+
}))), v && /* @__PURE__ */ n.createElement("div", {
|
|
83
83
|
className: "filter-component-container"
|
|
84
|
-
},
|
|
84
|
+
}, v())));
|
|
85
85
|
}
|
|
86
86
|
export {
|
|
87
87
|
q as SearchBox
|
package/dist/index38.js.map
CHANGED
|
@@ -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:
|
|
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
|
|
2
|
-
var
|
|
3
|
-
var $ = Object.prototype.hasOwnProperty,
|
|
4
|
-
var I = (e, t, a) => t in e ?
|
|
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 (
|
|
8
|
-
for (var a of
|
|
9
|
-
|
|
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
|
|
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 &&
|
|
17
|
-
for (var l of
|
|
18
|
-
t.indexOf(l) < 0 &&
|
|
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
|
|
21
|
+
import n, { useRef as G, useEffect as B } from "react";
|
|
22
22
|
/* empty css */
|
|
23
|
-
import { Icon as
|
|
24
|
-
const
|
|
25
|
-
var
|
|
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:
|
|
31
|
-
error:
|
|
32
|
-
errorMessage:
|
|
33
|
-
label:
|
|
34
|
-
placeholder:
|
|
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:
|
|
38
|
-
} =
|
|
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,
|
|
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
|
-
|
|
57
|
+
p([...i]);
|
|
58
58
|
else if (c) {
|
|
59
|
-
const q = i == null ? void 0 : i.filter((
|
|
60
|
-
var k;
|
|
61
|
-
return typeof
|
|
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
|
-
|
|
63
|
+
p([...q]);
|
|
64
64
|
}
|
|
65
65
|
}, [t, i, m]);
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
}, [i]),
|
|
66
|
+
B(() => {
|
|
67
|
+
p([...i]);
|
|
68
|
+
}, [i]), B(() => {
|
|
69
69
|
const r = (c) => {
|
|
70
|
-
u.current && !u.current.contains(c.target) &&
|
|
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
|
|
77
|
-
|
|
78
|
-
},
|
|
79
|
-
t(r, !0),
|
|
80
|
-
},
|
|
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
|
-
},
|
|
86
|
+
}, N && /* @__PURE__ */ n.createElement("span", {
|
|
87
87
|
className: "label-container"
|
|
88
|
-
},
|
|
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(
|
|
92
|
+
}, /* @__PURE__ */ n.createElement(_, S({
|
|
91
93
|
value: e,
|
|
92
|
-
onChange:
|
|
93
|
-
onClick:
|
|
94
|
+
onChange: F,
|
|
95
|
+
onClick: O,
|
|
94
96
|
disabled: a,
|
|
95
|
-
className: `${
|
|
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:
|
|
98
|
-
},
|
|
99
|
+
placeholder: z
|
|
100
|
+
}, A)), e && /* @__PURE__ */ n.createElement(L, {
|
|
99
101
|
name: "close",
|
|
100
102
|
className: "input-icon-close",
|
|
101
|
-
|
|
102
|
-
|
|
103
|
+
size: 15,
|
|
104
|
+
onClick: V
|
|
105
|
+
}), o.length > 0 && /* @__PURE__ */ n.createElement(L, {
|
|
103
106
|
name: "chevron",
|
|
104
|
-
rotation:
|
|
107
|
+
rotation: h ? "180" : "0",
|
|
105
108
|
className: "input-icon-chevron"
|
|
106
|
-
})),
|
|
109
|
+
})), h && o.length > 0 && /* @__PURE__ */ n.createElement("div", {
|
|
107
110
|
className: "suggestions-list"
|
|
108
|
-
}, m ? m(o,
|
|
111
|
+
}, m ? m(o, C) : o.map((r, c) => /* @__PURE__ */ n.createElement("div", {
|
|
109
112
|
key: c,
|
|
110
113
|
className: "suggestion-item",
|
|
111
|
-
onClick: () =>
|
|
112
|
-
}, r))), /* @__PURE__ */ n.createElement("div", {
|
|
113
|
-
className: `${
|
|
114
|
-
},
|
|
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
|
-
},
|
|
120
|
+
}, j), l && /* @__PURE__ */ n.createElement("div", {
|
|
118
121
|
className: "max-word"
|
|
119
122
|
}, e.length, "/", l)));
|
|
120
123
|
});
|
|
121
124
|
export {
|
|
122
|
-
|
|
125
|
+
Q as AutoCompleteInput
|
|
123
126
|
};
|
|
124
127
|
//# sourceMappingURL=index43.js.map
|
package/dist/index43.js.map
CHANGED
|
@@ -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 === '
|
|
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
|
|
1
|
+
import a, { useState as r } from "react";
|
|
2
2
|
import { Icon as f } from "./index5.js";
|
|
3
|
-
const
|
|
3
|
+
const h = ({
|
|
4
4
|
crumbs: t,
|
|
5
5
|
onCrumbClick: l,
|
|
6
6
|
className: g
|
|
7
7
|
}) => {
|
|
8
|
-
const [o, i] =
|
|
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
|
-
|
|
44
|
+
h as BreadCrumbs
|
|
45
45
|
};
|
|
46
46
|
//# sourceMappingURL=index48.js.map
|
package/dist/index48.js.map
CHANGED
|
@@ -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;"}
|