se-design 1.0.87 → 1.0.88-dev
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/InputWithTags/index.d.ts +1 -2
- package/dist/components/SidebarOverlay/index.d.ts +41 -0
- package/dist/index203.js.map +1 -1
- package/dist/index208.js +3 -3
- package/dist/index208.js.map +1 -1
- package/dist/index28.js +149 -88
- package/dist/index28.js.map +1 -1
- package/dist/index32.js +10 -11
- package/dist/index37.js +25 -30
- package/dist/index37.js.map +1 -1
- package/dist/index42.js +7 -8
- package/dist/index43.js +1 -2
- package/dist/index55.js +16 -17
- package/dist/index65.js +1 -2
- package/dist/index7.js +7 -8
- package/package.json +1 -1
package/dist/index37.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index37.js","sources":["../src/components/InputWithTags/index.tsx"],"sourcesContent":["import React, { useState, KeyboardEvent, useRef } from \"react\";\nimport './styles.scss';\nimport { Icon } from '../Icon';\n\nexport interface InputWithTagsProps {\n value: string[];\n onChange?: (tags: string[]) => void;\n placeholder?: string;\n className?: string;\n error?: boolean;\n errorMessage?: string;\n label?: string;\n automationId?: string;\n
|
|
1
|
+
{"version":3,"file":"index37.js","sources":["../src/components/InputWithTags/index.tsx"],"sourcesContent":["import React, { useState, KeyboardEvent, useRef } from \"react\";\nimport './styles.scss';\nimport { Icon } from '../Icon';\n\nexport interface InputWithTagsProps {\n value: string[];\n onChange?: (tags: string[]) => void;\n placeholder?: string;\n className?: string;\n error?: boolean;\n errorMessage?: string;\n label?: string;\n automationId?: string;\n}\n\nexport function InputWithTags({ \n value, \n onChange, \n placeholder, \n className, \n error, \n errorMessage, \n label,\n automationId = ''\n}: InputWithTagsProps) {\n const [tags, setTags] = useState<string[]>([...value]);\n const [inputValue, setInputValue] = useState('');\n const inputRef = useRef<HTMLInputElement>(null);\n\n const removeTag = (indexToRemove: number) => {\n const newTags = tags.filter((_, i) => i !== indexToRemove);\n setTags(newTags);\n onChange?.(newTags);\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter' && inputValue.trim()) {\n e.preventDefault();\n const newTags = [...tags, inputValue.trim()];\n setTags(newTags);\n setInputValue(\"\");\n onChange?.(newTags);\n } else if (e.key === 'Backspace' && inputValue === \"\" && tags.length > 0) {\n removeTag(tags.length - 1);\n }\n };\n\n return (\n <div className=\"input-with-tags-main-container\" data-automation-id={automationId}>\n {label && <div className=\"label-container\">{label}</div>}\n <div \n className={`input-with-tags-container ${error ? 'input-with-tags-error' : ''} ${className}`} \n onClick={() => inputRef.current?.focus()}\n >\n {tags.map((tag, index) => (\n <span key={index} className=\"tag-in-inputwithtags\" data-automation-id={`input-tag-${index}`}>\n {tag} \n <Icon\n name=\"close\"\n className=\"close-icon-in-inputwithtags\"\n ariaLabel={`Remove tag ${tag}`}\n onClick={() => removeTag(index)}\n shouldStopPropagation\n />\n </span>\n ))}\n <input\n className=\"input-with-tags-input\"\n ref={inputRef}\n type=\"text\"\n value={inputValue}\n onChange={(e) => setInputValue(e.target.value)}\n onKeyDown={handleKeyDown}\n placeholder={placeholder}\n data-automation-id=\"input-with-tags-input-field\"\n />\n </div>\n {error && <div className=\"error-message\">{errorMessage}</div>}\n </div>\n );\n}"],"names":["React__default","useState","useRef","Icon","InputWithTags","value","onChange","placeholder","className","error","errorMessage","label","automationId","tags","setTags","inputValue","setInputValue","inputRef","removeTag","indexToRemove","newTags","filter","_","i","handleKeyDown","e","key","trim","preventDefault","length","React","createElement","onClick","current","focus","map","tag","index","name","ariaLabel","shouldStopPropagation","ref","type","target","onKeyDown"],"mappings":"AAeO,OAAAA,KAAA,YAAAC,GAAA,UAAAC,SAAA;AAAA,OAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAASC,EAAc;AAAA,EAC1BC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA,IAAe;AACC,GAAG;AACnB,QAAM,CAACC,GAAMC,CAAO,IAAIb,EAAmB,CAAC,GAAGI,CAAK,CAAC,GAC/C,CAACU,GAAYC,CAAa,IAAIf,EAAS,EAAE,GACzCgB,IAAWf,EAAyB,IAAI,GAExCgB,IAAYA,CAACC,MAA0B;AACzC,UAAMC,IAAUP,EAAKQ,OAAO,CAACC,GAAGC,MAAMA,MAAMJ,CAAa;AACzDL,IAAAA,EAAQM,CAAO,GACfd,IAAWc,CAAO;AAAA,EACtB,GAEMI,IAAgBA,CAACC,MAAuC;AAC1D,QAAIA,EAAEC,QAAQ,WAAWX,EAAWY,QAAQ;AACxCF,MAAAA,EAAEG,eAAAA;AACF,YAAMR,IAAU,CAAC,GAAGP,GAAME,EAAWY,MAAM;AAC3Cb,MAAAA,EAAQM,CAAO,GACfJ,EAAc,EAAE,GAChBV,IAAWc,CAAO;AAAA,IACtB,MAAA,CAAWK,EAAEC,QAAQ,eAAeX,MAAe,MAAMF,EAAKgB,SAAS,KACnEX,EAAUL,EAAKgB,SAAS,CAAC;AAAA,EAEjC;AAEA,SACIC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKvB,WAAU;AAAA,IAAiC,sBAAoBI;AAAAA,EAAAA,GAC/DD,KAASmB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKvB,WAAU;AAAA,EAAA,GAAmBG,CAAW,GACvDmB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACIvB,WAAW,6BAA6BC,IAAQ,0BAA0B,EAAE,IAAID,CAAS;AAAA,IACzFwB,SAASA,MAAMf,EAASgB,SAASC,MAAAA;AAAAA,EAAM,GAEtCrB,EAAKsB,IAAI,CAACC,GAAKC,MACZP,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAML,KAAKW;AAAAA,IAAO7B,WAAU;AAAA,IAAuB,sBAAoB,aAAa6B,CAAK;AAAA,EAAA,GACpFD,GACDN,gBAAAA,EAAAC,cAAC5B,GAAI;AAAA,IACDmC,MAAK;AAAA,IACL9B,WAAU;AAAA,IACV+B,WAAW,cAAcH,CAAG;AAAA,IAC5BJ,SAASA,MAAMd,EAAUmB,CAAK;AAAA,IAC9BG,uBAAqB;AAAA,EAAA,CACxB,CACC,CACT,GACDV,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACIvB,WAAU;AAAA,IACViC,KAAKxB;AAAAA,IACLyB,MAAK;AAAA,IACLrC,OAAOU;AAAAA,IACPT,UAAWmB,CAAAA,MAAMT,EAAcS,EAAEkB,OAAOtC,KAAK;AAAA,IAC7CuC,WAAWpB;AAAAA,IACXjB,aAAAA;AAAAA,IACA,sBAAmB;AAAA,EAAA,CACtB,CACA,GACJE,KAASqB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKvB,WAAU;AAAA,EAAA,GAAiBE,CAAkB,CAC3D;AAEb;"}
|
package/dist/index42.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import e, { useState as g, useRef as p } from "react";
|
|
2
2
|
import { Icon as c } from "./index6.js";
|
|
3
|
-
import { ProgressBar as
|
|
3
|
+
import { ProgressBar as x } from "./index41.js";
|
|
4
4
|
/* empty css */
|
|
5
5
|
const r = {
|
|
6
6
|
gettingStartedWidgetCtn: "border border-[var(--color-gray-200)] rounded-[12px] w-[385px] p-4",
|
|
@@ -14,7 +14,7 @@ const r = {
|
|
|
14
14
|
}) => {
|
|
15
15
|
const [n, l] = g(!1), o = p(null), i = () => {
|
|
16
16
|
l(!n);
|
|
17
|
-
},
|
|
17
|
+
}, m = (t) => t ? "var(--color-green-500)" : "var(--color-gray-200)";
|
|
18
18
|
return /* @__PURE__ */ e.createElement("div", {
|
|
19
19
|
className: `${r.gettingStartedWidgetCtn} ${s} getting-started-widget-ctn`
|
|
20
20
|
}, /* @__PURE__ */ e.createElement("div", {
|
|
@@ -27,7 +27,7 @@ const r = {
|
|
|
27
27
|
onClick: i
|
|
28
28
|
})), /* @__PURE__ */ e.createElement("div", {
|
|
29
29
|
className: "mt-[12px]"
|
|
30
|
-
}, /* @__PURE__ */ e.createElement(
|
|
30
|
+
}, /* @__PURE__ */ e.createElement(x, {
|
|
31
31
|
totalTasks: a.length,
|
|
32
32
|
completedTasks: a.filter((t) => t.isComplete).length,
|
|
33
33
|
progressBarCtnClassName: "get-started-progress-bar-ctn"
|
|
@@ -37,19 +37,18 @@ const r = {
|
|
|
37
37
|
style: {
|
|
38
38
|
maxHeight: n ? `${o.current?.scrollHeight}px` : "0px"
|
|
39
39
|
}
|
|
40
|
-
}, a.map((t,
|
|
41
|
-
key:
|
|
40
|
+
}, a.map((t, d) => /* @__PURE__ */ e.createElement("div", {
|
|
41
|
+
key: d,
|
|
42
42
|
className: r.actionItemCtn
|
|
43
43
|
}, /* @__PURE__ */ e.createElement(c, {
|
|
44
44
|
name: "checked-circle",
|
|
45
|
-
stroke:
|
|
45
|
+
stroke: m(t.isComplete)
|
|
46
46
|
}), /* @__PURE__ */ e.createElement("span", {
|
|
47
47
|
className: t.isComplete ? "text-[var(--color-gray-500)]" : "text-[var(--color-gray-900)] cursor-pointer",
|
|
48
48
|
onClick: t?.handleActionItemClick
|
|
49
49
|
}, t.label)))));
|
|
50
50
|
};
|
|
51
51
|
export {
|
|
52
|
-
E as GetStartedWidget
|
|
53
|
-
E as default
|
|
52
|
+
E as GetStartedWidget
|
|
54
53
|
};
|
|
55
54
|
//# sourceMappingURL=index42.js.map
|
package/dist/index43.js
CHANGED
package/dist/index55.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import a from "react";
|
|
2
2
|
/* empty css */
|
|
3
3
|
const n = ({
|
|
4
4
|
element: e,
|
|
@@ -15,12 +15,12 @@ const n = ({
|
|
|
15
15
|
"--shimmer-base-color": s,
|
|
16
16
|
"--shimmer-highlight-color": m
|
|
17
17
|
}, r = `se-design-shimmer-element se-design-shimmer-${e.type}`;
|
|
18
|
-
return /* @__PURE__ */
|
|
18
|
+
return /* @__PURE__ */ a.createElement("div", {
|
|
19
19
|
className: r,
|
|
20
20
|
style: i
|
|
21
|
-
}, e.children && e.children.map((
|
|
21
|
+
}, e.children && e.children.map((t, p) => /* @__PURE__ */ a.createElement(n, {
|
|
22
22
|
key: p,
|
|
23
|
-
element:
|
|
23
|
+
element: t,
|
|
24
24
|
animationDuration: d,
|
|
25
25
|
baseColor: s,
|
|
26
26
|
highlightColor: m
|
|
@@ -40,48 +40,48 @@ const n = ({
|
|
|
40
40
|
alignItems: e.alignItems,
|
|
41
41
|
flex: e.flex
|
|
42
42
|
};
|
|
43
|
-
return /* @__PURE__ */
|
|
43
|
+
return /* @__PURE__ */ a.createElement("div", {
|
|
44
44
|
className: `se-design-shimmer-container ${e.className || ""}`,
|
|
45
45
|
style: i
|
|
46
|
-
}, e.children.map((r,
|
|
47
|
-
key:
|
|
46
|
+
}, e.children.map((r, t) => r.type === "container" ? /* @__PURE__ */ a.createElement(y, {
|
|
47
|
+
key: t,
|
|
48
48
|
container: r,
|
|
49
49
|
animationDuration: d,
|
|
50
50
|
baseColor: s,
|
|
51
51
|
highlightColor: m
|
|
52
|
-
}) : /* @__PURE__ */
|
|
53
|
-
key:
|
|
52
|
+
}) : /* @__PURE__ */ a.createElement(n, {
|
|
53
|
+
key: t,
|
|
54
54
|
element: r,
|
|
55
55
|
animationDuration: d,
|
|
56
56
|
baseColor: s,
|
|
57
57
|
highlightColor: m
|
|
58
58
|
})));
|
|
59
|
-
},
|
|
59
|
+
}, g = ({
|
|
60
60
|
structure: e,
|
|
61
61
|
className: d = "",
|
|
62
62
|
animationDuration: s = 3,
|
|
63
63
|
baseColor: m = "var(--color-gray-700)",
|
|
64
64
|
highlightColor: i = "var(--color-gray-600)",
|
|
65
65
|
width: r,
|
|
66
|
-
height:
|
|
66
|
+
height: t
|
|
67
67
|
}) => {
|
|
68
68
|
const p = {
|
|
69
69
|
width: r ? typeof r == "number" ? `${r}px` : r : "100%",
|
|
70
|
-
height:
|
|
70
|
+
height: t ? typeof t == "number" ? `${t}px` : t : "auto",
|
|
71
71
|
"--shimmer-duration": `${s}s`,
|
|
72
72
|
"--shimmer-base-color": m,
|
|
73
73
|
"--shimmer-highlight-color": i
|
|
74
74
|
};
|
|
75
|
-
return /* @__PURE__ */
|
|
75
|
+
return /* @__PURE__ */ a.createElement("div", {
|
|
76
76
|
className: `se-design-shimmer-loader ${d}`,
|
|
77
77
|
style: p
|
|
78
|
-
}, e.map((c, o) => c.type === "container" ? /* @__PURE__ */
|
|
78
|
+
}, e.map((c, o) => c.type === "container" ? /* @__PURE__ */ a.createElement(y, {
|
|
79
79
|
key: o,
|
|
80
80
|
container: c,
|
|
81
81
|
animationDuration: s,
|
|
82
82
|
baseColor: m,
|
|
83
83
|
highlightColor: i
|
|
84
|
-
}) : /* @__PURE__ */
|
|
84
|
+
}) : /* @__PURE__ */ a.createElement(n, {
|
|
85
85
|
key: o,
|
|
86
86
|
element: c,
|
|
87
87
|
animationDuration: s,
|
|
@@ -90,7 +90,6 @@ const n = ({
|
|
|
90
90
|
})));
|
|
91
91
|
};
|
|
92
92
|
export {
|
|
93
|
-
|
|
94
|
-
l as default
|
|
93
|
+
g as ShimmerLoader
|
|
95
94
|
};
|
|
96
95
|
//# sourceMappingURL=index55.js.map
|
package/dist/index65.js
CHANGED
package/dist/index7.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import
|
|
1
|
+
import c, { useState as h, useCallback as i } from "react";
|
|
2
2
|
import "./index72.js";
|
|
3
3
|
import { isElementVisible as p } from "./index204.js";
|
|
4
4
|
const x = ({
|
|
5
5
|
skipLinks: n,
|
|
6
|
-
className:
|
|
6
|
+
className: r = ""
|
|
7
7
|
}) => {
|
|
8
|
-
const [
|
|
8
|
+
const [s, u] = h(n), l = i(() => {
|
|
9
9
|
const t = n.filter((e) => {
|
|
10
10
|
const o = document.getElementById(e.id);
|
|
11
11
|
return p(o);
|
|
@@ -30,10 +30,10 @@ const x = ({
|
|
|
30
30
|
});
|
|
31
31
|
}
|
|
32
32
|
}, []);
|
|
33
|
-
return n.length === 0 ? null : /* @__PURE__ */
|
|
34
|
-
className: `se-design-skip-links-bar relative w-full h-0 overflow-hidden p-0 flex items-center justify-center bg-[var(--color-blue-50)] transition-[height] duration-300 ease-out focus-within:h-auto focus-within:py-1 focus-within:px-2 ${
|
|
33
|
+
return n.length === 0 ? null : /* @__PURE__ */ c.createElement("div", {
|
|
34
|
+
className: `se-design-skip-links-bar relative w-full h-0 overflow-hidden p-0 flex items-center justify-center bg-[var(--color-blue-50)] transition-[height] duration-300 ease-out focus-within:h-auto focus-within:py-1 focus-within:px-2 ${r}`,
|
|
35
35
|
onFocus: a
|
|
36
|
-
},
|
|
36
|
+
}, s.map((t) => /* @__PURE__ */ c.createElement("a", {
|
|
37
37
|
key: t.id,
|
|
38
38
|
href: `#${t.id}`,
|
|
39
39
|
className: "absolute -left-[9999px] [clip:rect(0,0,0,0)] no-underline text-[var(--color-blue-500)] text-md py-1 px-2.5 rounded capitalize focus:static focus:left-auto focus:[clip:auto] focus:outline-none focus-visible:!outline-none hover:text-[var(--color-blue-600)] hover:bg-[var(--color-blue-200)]",
|
|
@@ -43,7 +43,6 @@ const x = ({
|
|
|
43
43
|
}, t.label)));
|
|
44
44
|
};
|
|
45
45
|
export {
|
|
46
|
-
x as SkipLinksBar
|
|
47
|
-
x as default
|
|
46
|
+
x as SkipLinksBar
|
|
48
47
|
};
|
|
49
48
|
//# sourceMappingURL=index7.js.map
|