karsten-design-system 1.1.24 → 1.1.26
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/components/floating-label/index.js +2 -2
- package/dist/components/floating-label/index.js.map +1 -1
- package/dist/stories/components/multiselect.js +34 -2
- package/dist/stories/components/multiselect.js.map +1 -1
- package/dist/stories/components/select.js +34 -9
- package/dist/stories/components/select.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { j as jsxRuntimeExports } from '../../_virtual/jsx-runtime.js';
|
|
2
|
-
import { useState, useEffect } from 'react';
|
|
3
2
|
import clsx from 'clsx';
|
|
3
|
+
import { useState, useEffect } from 'react';
|
|
4
4
|
|
|
5
5
|
const FloatingLabel = ({ value, label, disabled, error, }) => {
|
|
6
6
|
const [isFloating, setIsFloating] = useState(!!value);
|
|
7
7
|
useEffect(() => {
|
|
8
8
|
setIsFloating(!!value);
|
|
9
9
|
}, [value]);
|
|
10
|
-
return (jsxRuntimeExports.jsx("label", { className: clsx('absolute left-4 text-gray transition-all bg-background px-1 z-20 font-roboto text-sm', isFloating ? '-top-3 text-primary' : 'top-[9px]', disabled ? 'text-
|
|
10
|
+
return (jsxRuntimeExports.jsx("label", { className: clsx('absolute left-4 text-gray transition-all bg-background px-1 z-20 font-roboto text-sm', isFloating ? '-top-3 text-primary' : 'top-[9px]', disabled ? 'text-stoneDark' : error ? 'text-redError' : 'text-gray'), children: isFloating ? label : value }));
|
|
11
11
|
};
|
|
12
12
|
|
|
13
13
|
export { FloatingLabel as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/floating-label/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAUA,MAAM,aAAa,GAAiC,CAAC,EACnD,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAK,GACN,KAAI;AACH,IAAA,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;IAErD,SAAS,CAAC,MAAK;AACb,QAAA,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC;AACxB,KAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IAEX,QACEA,iCACE,SAAS,EAAE,IAAI,CACb,sFAAsF,EACtF,UAAU,GAAG,qBAAqB,GAAG,WAAW,EAChD,QAAQ,GAAG,
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/floating-label/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAUA,MAAM,aAAa,GAAiC,CAAC,EACnD,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAK,GACN,KAAI;AACH,IAAA,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;IAErD,SAAS,CAAC,MAAK;AACb,QAAA,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC;AACxB,KAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IAEX,QACEA,iCACE,SAAS,EAAE,IAAI,CACb,sFAAsF,EACtF,UAAU,GAAG,qBAAqB,GAAG,WAAW,EAChD,QAAQ,GAAG,gBAAgB,GAAG,KAAK,GAAG,eAAe,GAAG,WAAW,CACpE,EAAA,QAAA,EAEA,UAAU,GAAG,KAAK,GAAG,KAAK,EACrB,CAAA;AAEZ;;;;"}
|
|
@@ -9,9 +9,10 @@ import FloatingLabel from '../../components/floating-label/index.js';
|
|
|
9
9
|
function MultiSelect(props) {
|
|
10
10
|
const { options, placeholder = 'Selecione uma opção', label = 'Opção', disabled = false, error, isLoading = false, isReadOnly = true, ariaLabel = 'Selecione uma ou mais opções', } = props;
|
|
11
11
|
const [isOpen, setIsOpen] = useState(false);
|
|
12
|
-
const containerRef = useRef(null);
|
|
13
12
|
const [visibleText, setVisibleText] = useState('');
|
|
14
13
|
const [searchText, setSearchText] = useState('');
|
|
14
|
+
const [highlightedIndex, setHighlightedIndex] = useState(-1);
|
|
15
|
+
const containerRef = useRef(null);
|
|
15
16
|
const normalize = (str) => str
|
|
16
17
|
.normalize('NFD')
|
|
17
18
|
.replace(/[\u0300-\u036f]/g, '')
|
|
@@ -23,6 +24,7 @@ function MultiSelect(props) {
|
|
|
23
24
|
setIsOpen(newState);
|
|
24
25
|
if (!newState) {
|
|
25
26
|
setSearchText('');
|
|
27
|
+
setHighlightedIndex(-1);
|
|
26
28
|
}
|
|
27
29
|
}
|
|
28
30
|
};
|
|
@@ -34,6 +36,9 @@ function MultiSelect(props) {
|
|
|
34
36
|
: [...currentValues, option];
|
|
35
37
|
props.onChange(newValues.length > 0 ? newValues : null);
|
|
36
38
|
setSearchText('');
|
|
39
|
+
const newFiltered = options.filter((opt) => normalize(opt.label).includes(normalize('')));
|
|
40
|
+
const newIndex = newFiltered.findIndex((o) => o.value === option.value);
|
|
41
|
+
setHighlightedIndex(newIndex);
|
|
37
42
|
};
|
|
38
43
|
const hasError = !!error && !disabled;
|
|
39
44
|
const isInputDisabled = disabled || isLoading;
|
|
@@ -43,6 +48,7 @@ function MultiSelect(props) {
|
|
|
43
48
|
!containerRef.current.contains(event.target)) {
|
|
44
49
|
setIsOpen(false);
|
|
45
50
|
setSearchText('');
|
|
51
|
+
setHighlightedIndex(-1);
|
|
46
52
|
}
|
|
47
53
|
};
|
|
48
54
|
document.addEventListener('mousedown', handleClickOutside);
|
|
@@ -79,13 +85,39 @@ function MultiSelect(props) {
|
|
|
79
85
|
setSearchText(e.target.value);
|
|
80
86
|
if (!isOpen)
|
|
81
87
|
setIsOpen(true);
|
|
88
|
+
setHighlightedIndex(-1);
|
|
89
|
+
}, onKeyDown: (e) => {
|
|
90
|
+
if (!isOpen)
|
|
91
|
+
return;
|
|
92
|
+
if (e.key === 'ArrowDown') {
|
|
93
|
+
e.preventDefault();
|
|
94
|
+
setHighlightedIndex((prev) => prev < filteredOptions.length - 1 ? prev + 1 : 0);
|
|
95
|
+
}
|
|
96
|
+
if (e.key === 'ArrowUp') {
|
|
97
|
+
e.preventDefault();
|
|
98
|
+
setHighlightedIndex((prev) => prev > 0 ? prev - 1 : filteredOptions.length - 1);
|
|
99
|
+
}
|
|
100
|
+
if (e.key === 'Enter') {
|
|
101
|
+
e.preventDefault();
|
|
102
|
+
if (highlightedIndex >= 0 &&
|
|
103
|
+
highlightedIndex < filteredOptions.length) {
|
|
104
|
+
handleSelect(filteredOptions[highlightedIndex]);
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
if (e.key === 'Escape') {
|
|
108
|
+
e.preventDefault();
|
|
109
|
+
setIsOpen(false);
|
|
110
|
+
setSearchText('');
|
|
111
|
+
setHighlightedIndex(-1);
|
|
112
|
+
}
|
|
82
113
|
}, onClick: toggleDropdown, className: clsx('focus:shadow-none text-base w-100 font-roboto border !p-2 rounded-md', hasError
|
|
83
114
|
? 'border-redError placeholder:text-redError'
|
|
84
115
|
: 'border-gray focus:border-primary', isInputDisabled && 'border-stoneDark text-disabled', error && 'border-redError text-redError', !error && 'border-gray placeholder:text-gray', isLoading && 'text-gray', 'truncate'), invalid: hasError, readOnly: !isOpen || isReadOnly, style: { height: '42px', fontSize: '16px' }, disabled: isInputDisabled, "aria-label": ariaLabel }), jsxRuntimeExports.jsx(InputIcon, { className: clsx(isLoading
|
|
85
116
|
? 'pi pi-spinner pi-spin'
|
|
86
117
|
: isOpen
|
|
87
118
|
? 'pi pi-angle-up'
|
|
88
|
-
: 'pi pi-angle-down', 'text-gray px-2 flex items-center cursor-pointer', isInputDisabled && 'text-disabled', error && 'text-redError'), onClick: toggleDropdown })] })] }), isOpen && !isLoading && (jsxRuntimeExports.jsx("div", { className: clsx('absolute w-full bg-background border shadow-md z-40 rounded-md -bottom-1 translate-y-full', error ? 'border-redError' : 'border-gray'), children: jsxRuntimeExports.jsx("div", { children: jsxRuntimeExports.jsx("ul", { className: "max-h-60 overflow-y-auto", children: filteredOptions.map((option) => (jsxRuntimeExports.jsxs("li", { onClick: () => handleSelect(option), className:
|
|
119
|
+
: 'pi pi-angle-down', 'text-gray px-2 flex items-center cursor-pointer', isInputDisabled && 'text-disabled', error && 'text-redError'), onClick: toggleDropdown })] })] }), isOpen && !isLoading && (jsxRuntimeExports.jsx("div", { className: clsx('absolute w-full bg-background border shadow-md z-40 rounded-md -bottom-1 translate-y-full', error ? 'border-redError' : 'border-gray'), children: jsxRuntimeExports.jsx("div", { children: jsxRuntimeExports.jsx("ul", { className: "max-h-60 overflow-y-auto", children: filteredOptions.map((option, index) => (jsxRuntimeExports.jsxs("li", { onClick: () => handleSelect(option), className: clsx('p-2 flex justify-between items-center cursor-pointer', 'hover:bg-stoneBackground hover:font-bold', index === highlightedIndex &&
|
|
120
|
+
'bg-stoneBackground font-bold'), title: option.label, children: [jsxRuntimeExports.jsx("span", { className: "truncate max-w-[calc(100%-20px)]", children: option.label }), jsxRuntimeExports.jsx("input", { type: 'checkbox', checked: Array.isArray(props.value) &&
|
|
89
121
|
props.value.some((v) => v.value === option.value), onChange: () => handleSelect(option), className: clsx('appearance-none w-2 h-2 ring-1 ring-offset-2 ring-offset-background ring-gray checked:bg-primary cursor-pointer rounded-md') })] }, option.value))) }) }) })), hasError && (jsxRuntimeExports.jsx("span", { className: "text-redError text-xs px-2", children: error }))] }) }));
|
|
90
122
|
}
|
|
91
123
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"multiselect.js","sources":["../../../../src/stories/components/multiselect.tsx"],"sourcesContent":[null],"names":["_jsx","_Fragment","_jsxs"],"mappings":";;;;;;;;AAqBM,SAAU,WAAW,CAAC,KAAuB,EAAA;AACjD,IAAA,MAAM,EACJ,OAAO,EACP,WAAW,GAAG,qBAAqB,EACnC,KAAK,GAAG,OAAO,EACf,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,IAAI,EACjB,SAAS,GAAG,8BAA8B,GAC3C,GAAG,KAAK;IAET,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"multiselect.js","sources":["../../../../src/stories/components/multiselect.tsx"],"sourcesContent":[null],"names":["_jsx","_Fragment","_jsxs"],"mappings":"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"}
|
|
@@ -9,8 +9,9 @@ import FloatingLabel from '../../components/floating-label/index.js';
|
|
|
9
9
|
function Select(props) {
|
|
10
10
|
const { options, placeholder = 'Selecione uma opção', label = 'Opção', disabled = false, error, isLoading = false, isReadOnly = true, ariaLabel = 'Selecione uma opção', } = props;
|
|
11
11
|
const [isOpen, setIsOpen] = useState(false);
|
|
12
|
-
const containerRef = useRef(null);
|
|
13
12
|
const [searchText, setSearchText] = useState('');
|
|
13
|
+
const [highlightedIndex, setHighlightedIndex] = useState(-1);
|
|
14
|
+
const containerRef = useRef(null);
|
|
14
15
|
const normalize = (str) => str
|
|
15
16
|
.normalize('NFD')
|
|
16
17
|
.replace(/[\u0300-\u036f]/g, '')
|
|
@@ -20,12 +21,8 @@ function Select(props) {
|
|
|
20
21
|
if (!disabled && !isLoading) {
|
|
21
22
|
const newState = !isOpen;
|
|
22
23
|
setIsOpen(newState);
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
}
|
|
26
|
-
else {
|
|
27
|
-
setSearchText('');
|
|
28
|
-
}
|
|
24
|
+
setSearchText('');
|
|
25
|
+
setHighlightedIndex(-1);
|
|
29
26
|
}
|
|
30
27
|
};
|
|
31
28
|
const handleSelect = (option) => {
|
|
@@ -37,6 +34,7 @@ function Select(props) {
|
|
|
37
34
|
}
|
|
38
35
|
setSearchText('');
|
|
39
36
|
setIsOpen(false);
|
|
37
|
+
setHighlightedIndex(-1);
|
|
40
38
|
};
|
|
41
39
|
const hasError = !!error && !disabled;
|
|
42
40
|
const isInputDisabled = disabled || isLoading;
|
|
@@ -46,6 +44,7 @@ function Select(props) {
|
|
|
46
44
|
!containerRef.current.contains(event.target)) {
|
|
47
45
|
setIsOpen(false);
|
|
48
46
|
setSearchText('');
|
|
47
|
+
setHighlightedIndex(-1);
|
|
49
48
|
}
|
|
50
49
|
};
|
|
51
50
|
document.addEventListener('mousedown', handleClickOutside);
|
|
@@ -58,15 +57,41 @@ function Select(props) {
|
|
|
58
57
|
: isOpen
|
|
59
58
|
? searchText
|
|
60
59
|
: (props.value?.label ?? ''), onClick: toggleDropdown, onChange: (e) => {
|
|
61
|
-
if (isOpen)
|
|
60
|
+
if (isOpen) {
|
|
62
61
|
setSearchText(e.target.value);
|
|
62
|
+
setHighlightedIndex(0);
|
|
63
|
+
}
|
|
64
|
+
}, onKeyDown: (e) => {
|
|
65
|
+
if (!isOpen)
|
|
66
|
+
return;
|
|
67
|
+
if (e.key === 'ArrowDown') {
|
|
68
|
+
e.preventDefault();
|
|
69
|
+
setHighlightedIndex((prev) => prev < filteredOptions.length - 1 ? prev + 1 : 0);
|
|
70
|
+
}
|
|
71
|
+
if (e.key === 'ArrowUp') {
|
|
72
|
+
e.preventDefault();
|
|
73
|
+
setHighlightedIndex((prev) => prev > 0 ? prev - 1 : filteredOptions.length - 1);
|
|
74
|
+
}
|
|
75
|
+
if (e.key === 'Enter') {
|
|
76
|
+
e.preventDefault();
|
|
77
|
+
if (highlightedIndex >= 0 &&
|
|
78
|
+
highlightedIndex < filteredOptions.length) {
|
|
79
|
+
handleSelect(filteredOptions[highlightedIndex]);
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
if (e.key === 'Escape') {
|
|
83
|
+
e.preventDefault();
|
|
84
|
+
setIsOpen(false);
|
|
85
|
+
setSearchText('');
|
|
86
|
+
setHighlightedIndex(-1);
|
|
87
|
+
}
|
|
63
88
|
}, className: clsx('focus:shadow-none text-base w-100 font-roboto border !p-2 rounded-md', hasError
|
|
64
89
|
? 'border-redError placeholder:text-redError'
|
|
65
90
|
: 'border-gray focus:border-primary', isInputDisabled && 'border-stoneDark text-disabled', error && 'border-redError text-redError', !error && 'border-gray placeholder:text-gray', isLoading && 'text-gray', 'truncate'), invalid: hasError, readOnly: !isOpen || isReadOnly, style: { height: '42px', fontSize: '16px' }, disabled: isInputDisabled, "aria-label": ariaLabel }), jsxRuntimeExports.jsx(InputIcon, { className: clsx(isLoading
|
|
66
91
|
? 'pi pi-spinner pi-spin'
|
|
67
92
|
: isOpen
|
|
68
93
|
? 'pi pi-angle-up'
|
|
69
|
-
: 'pi pi-angle-down', 'text-gray px-2 flex items-center cursor-pointer', isInputDisabled && 'text-disabled', error && 'text-redError'), onClick: toggleDropdown })] })] }), isOpen && !isLoading && (jsxRuntimeExports.jsx("div", { className: clsx('absolute w-full bg-background border shadow-md z-40 rounded-md p-2 -bottom-1 translate-y-full', error ? 'border-redError' : 'border-gray'), children: jsxRuntimeExports.jsx("ul", { className: "max-h-60 overflow-y-auto", children: filteredOptions.map((option) => (jsxRuntimeExports.jsxs("li", { onClick: () => handleSelect(option), className:
|
|
94
|
+
: 'pi pi-angle-down', 'text-gray px-2 flex items-center cursor-pointer', isInputDisabled && 'text-disabled', error && 'text-redError'), onClick: toggleDropdown })] })] }), isOpen && !isLoading && (jsxRuntimeExports.jsx("div", { className: clsx('absolute w-full bg-background border shadow-md z-40 rounded-md p-2 -bottom-1 translate-y-full', error ? 'border-redError' : 'border-gray'), children: jsxRuntimeExports.jsx("ul", { className: "max-h-60 overflow-y-auto", children: filteredOptions.map((option, index) => (jsxRuntimeExports.jsxs("li", { onClick: () => handleSelect(option), className: clsx('p-2 flex justify-between items-center cursor-pointer', 'hover:bg-stoneBackground hover:font-bold', index === highlightedIndex && 'bg-stoneBackground font-bold'), children: [jsxRuntimeExports.jsx("span", { className: "truncate max-w-[calc(100%-20px)]", children: option.label }), jsxRuntimeExports.jsx("input", { type: 'radio', checked: props.value?.value === option.value, onChange: () => handleSelect(option), className: clsx('appearance-none w-2 h-2 rounded-full ring-1 ring-offset-2 ring-offset-background ring-gray checked:bg-primary cursor-pointer') })] }, option.value))) }) })), hasError && jsxRuntimeExports.jsx("span", { className: "text-redError text-xs px-2", children: error })] }));
|
|
70
95
|
}
|
|
71
96
|
|
|
72
97
|
export { Select };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.js","sources":["../../../../src/stories/components/select.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAqBM,SAAU,MAAM,CAAC,KAAwB,EAAA;AAC7C,IAAA,MAAM,EACJ,OAAO,EACP,WAAW,GAAG,qBAAqB,EACnC,KAAK,GAAG,OAAO,EACf,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,IAAI,EACjB,SAAS,GAAG,qBAAqB,GAClC,GAAG,KAAK;IAET,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"select.js","sources":["../../../../src/stories/components/select.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
|