karsten-design-system 1.1.73 → 1.1.74

package/dist/index.js

@@ -704,12 +704,13 @@ function Modal({ title, size = 'md', onClose, onConfirm, labelCloseButton = 'Fec
 }
 
 function MultiSelect(props) {
-    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;
+    const { options, placeholder = 'Selecione uma opção', label = 'Opção', disabled = false, error, isLoading = false, isReadOnly = true, ariaLabel = 'Selecione uma ou mais opções', isLoadingOptions = false, } = props;
     const [isOpen, setIsOpen] = useState(false);
     const [visibleText, setVisibleText] = useState('');
     const [searchText, setSearchText] = useState('');
     const [highlightedIndex, setHighlightedIndex] = useState(-1);
     const containerRef = useRef(null);
+    const inputRef = useRef(null);
     const normalize = (str) => str
         .normalize('NFD')
         .replace(/[\u0300-\u036f]/g, '')
@@ -723,6 +724,11 @@ function MultiSelect(props) {
                 setSearchText('');
                 setHighlightedIndex(-1);
             }
+            else {
+                setTimeout(() => {
+                    inputRef.current?.focus();
+                }, 0);
+            }
         }
     };
     const handleSelect = (option) => {
@@ -733,12 +739,17 @@ function MultiSelect(props) {
             : [...currentValues, option];
         props.onChange(newValues.length > 0 ? newValues : null);
         setSearchText('');
-        const newFiltered = options.filter((opt) => normalize(opt.label).includes(normalize('')));
+        const newFiltered = options.filter((opt) => normalize(opt.label).includes(''));
         const newIndex = newFiltered.findIndex((o) => o.value === option.value);
         setHighlightedIndex(newIndex);
     };
     const hasError = !!error && !disabled;
     const isInputDisabled = disabled || isLoading;
+    useEffect(() => {
+        if (isOpen) {
+            inputRef.current?.focus();
+        }
+    }, [isOpen, options]);
     useEffect(() => {
         const handleClickOutside = (event) => {
             if (containerRef.current &&
@@ -774,7 +785,7 @@ function MultiSelect(props) {
             setVisibleText(`${count} itens selecionados`);
         }
     }, [props.value]);
-    return (jsxs("div", { ref: containerRef, className: "relative flex flex-col w-100", children: [jsxs("div", { className: "relative w-full cursor-pointer", onClick: toggleDropdown, children: [jsx(FloatingLabel, { value: selectedText(), label: label, disabled: isInputDisabled, error: error }), jsxs(IconField, { className: "w-full", children: [jsx(InputText, { placeholder: placeholder, type: "text", value: isLoading
+    return (jsxs("div", { ref: containerRef, className: "relative flex flex-col w-100", children: [jsxs("div", { className: "relative w-full cursor-pointer", onClick: toggleDropdown, children: [jsx(FloatingLabel, { value: selectedText(), label: label, disabled: isInputDisabled, error: error }), jsxs(IconField, { className: "w-full", children: [jsx(InputText, { ref: inputRef, placeholder: placeholder, type: "text", value: isLoading
                                     ? 'Carregando...'
                                     : isOpen && !isReadOnly
                                         ? searchText
@@ -814,9 +825,8 @@ function MultiSelect(props) {
                                     ? 'pi pi-spinner pi-spin'
                                     : isOpen
                                         ? 'pi pi-angle-up'
-                                        : 'pi pi-angle-down', 'text-gray px-2 flex items-center cursor-pointer', isInputDisabled && 'text-disabled', error && 'text-redError'), onClick: toggleDropdown })] })] }), isOpen && !isLoading && (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: props.onInputChange && searchText.length === 0 ? (jsx("div", { className: "p-4 text-center text-gray", children: "Digite para pesquisar" })) : (jsx("ul", { className: "max-h-60 overflow-y-auto", children: filteredOptions.length > 0 ? (filteredOptions.map((option, index) => (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'), title: option.label, children: [jsx("span", { className: "truncate max-w-[calc(100%-20px)]", children: option.label }), jsx("input", { type: 'checkbox', checked: Array.isArray(props.value) &&
-                                    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)))) : (jsx("div", { className: "p-4 text-center text-gray", children: "Nenhum resultado encontrado" })) })) })), hasError && jsx("span", { className: "text-redError text-xs px-2", children: error })] }));
+                                        : 'pi pi-angle-down', 'text-gray px-2 flex items-center cursor-pointer', isInputDisabled && 'text-disabled', error && 'text-redError'), onClick: toggleDropdown })] })] }), isOpen && (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: isLoadingOptions ? (jsxs("div", { className: "p-4 text-center text-gray flex items-center justify-center gap-2", children: ["Carregando", jsx("i", { className: "pi pi-spinner pi-spin" })] })) : props.onInputChange && searchText.length === 0 ? (jsx("div", { className: "p-4 text-center text-gray", children: "Digite para pesquisar" })) : filteredOptions.length > 0 ? (jsx("ul", { className: "max-h-60 overflow-y-auto", children: filteredOptions.map((option, index) => (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'), title: option.label, children: [jsx("span", { className: "truncate max-w-[calc(100%-20px)]", children: option.label }), jsx("input", { type: 'checkbox', checked: Array.isArray(props.value) &&
+                                    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))) })) : (jsx("div", { className: "p-4 text-center text-gray", children: "Nenhum resultado encontrado" })) })), hasError && jsx("span", { className: "text-redError text-xs px-2", children: error })] }));
 }
 
 function FilterIcon({ color }) {
@@ -4144,11 +4154,12 @@ function RadioButton({ label, value, checked, onChange, disabled = false, error
 }
 
 function Select(props) {
-    const { options, placeholder = 'Selecione uma opção', label = 'Opção', disabled = false, error, isLoading = false, isReadOnly = true, ariaLabel = 'Selecione uma opção', } = props;
+    const { options, placeholder = 'Selecione uma opção', label = 'Opção', disabled = false, error, isLoading = false, isReadOnly = true, ariaLabel = 'Selecione uma opção', isLoadingOptions = false, } = props;
     const [isOpen, setIsOpen] = useState(false);
     const [searchText, setSearchText] = useState('');
     const [highlightedIndex, setHighlightedIndex] = useState(-1);
     const containerRef = useRef(null);
+    const inputRef = useRef(null);
     const normalize = (str) => str
         .normalize('NFD')
         .replace(/[\u0300-\u036f]/g, '')
@@ -4160,6 +4171,11 @@ function Select(props) {
             setIsOpen(newState);
             setSearchText('');
             setHighlightedIndex(-1);
+            if (newState) {
+                setTimeout(() => {
+                    inputRef.current?.focus();
+                }, 0);
+            }
         }
     };
     const handleSelect = (option) => {
@@ -4175,6 +4191,11 @@ function Select(props) {
     };
     const hasError = !!error && !disabled;
     const isInputDisabled = disabled || isLoading;
+    useEffect(() => {
+        if (isOpen) {
+            inputRef.current?.focus();
+        }
+    }, [options, isOpen]);
     useEffect(() => {
         const handleClickOutside = (event) => {
             if (containerRef.current &&
@@ -4189,7 +4210,7 @@ function Select(props) {
             document.removeEventListener('mousedown', handleClickOutside);
         };
     }, []);
-    return (jsxs("div", { ref: containerRef, className: "relative flex flex-col w-100", children: [jsxs("div", { className: "relative w-full cursor-pointer", onClick: toggleDropdown, children: [jsx(FloatingLabel, { value: props.value ? props.value.label : '', label: label, disabled: isInputDisabled, error: error }), jsxs(IconField, { className: "w-full", children: [jsx(InputText, { placeholder: placeholder, type: "text", value: isLoading
+    return (jsxs("div", { ref: containerRef, className: "relative flex flex-col w-100", children: [jsxs("div", { className: "relative w-full cursor-pointer", onClick: toggleDropdown, children: [jsx(FloatingLabel, { value: props.value ? props.value.label : '', label: label, disabled: isInputDisabled, error: error }), jsxs(IconField, { className: "w-full", children: [jsx(InputText, { ref: inputRef, placeholder: placeholder, type: "text", value: isLoading
                                     ? 'Carregando...'
                                     : isOpen
                                         ? searchText
@@ -4229,8 +4250,7 @@ function Select(props) {
                                     ? 'pi pi-spinner pi-spin'
                                     : isOpen
                                         ? 'pi pi-angle-up'
-                                        : 'pi pi-angle-down', 'text-gray px-2 flex items-center cursor-pointer', isInputDisabled && 'text-disabled', error && 'text-redError'), onClick: toggleDropdown })] })] }), isOpen && !isLoading && (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: props.onInputChange && searchText.length === 0 ? (jsx("div", { className: "p-4 text-center text-gray", children: "Digite para pesquisar" })) : (jsx("ul", { className: "max-h-60 overflow-y-auto", children: filteredOptions.length > 0 ? (filteredOptions.map((option, index) => (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: [jsx("span", { className: "truncate max-w-[calc(100%-20px)]", children: option.label }), 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)))) : (jsx("div", { className: "p-4 text-center text-gray", children: "Nenhum resultado encontrado" })) })) })), hasError && jsx("span", { className: "text-redError text-xs px-2", children: error })] }));
+                                        : 'pi pi-angle-down', 'text-gray px-2 flex items-center cursor-pointer', isInputDisabled && 'text-disabled', error && 'text-redError'), onClick: toggleDropdown })] })] }), isOpen && (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: isLoadingOptions ? (jsxs("div", { className: "p-4 text-center text-gray flex items-center justify-center gap-2", children: ["Carregando", jsx("i", { className: "pi pi-spinner pi-spin" })] })) : props.onInputChange && searchText.length === 0 ? (jsx("div", { className: "p-4 text-center text-gray", children: "Digite para pesquisar" })) : filteredOptions.length > 0 ? (jsx("ul", { className: "max-h-60 overflow-y-auto", children: filteredOptions.map((option, index) => (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: [jsx("span", { className: "truncate max-w-[calc(100%-20px)]", children: option.label }), 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))) })) : (jsx("div", { className: "p-4 text-center text-gray", children: "Nenhum resultado encontrado" })) })), hasError && jsx("span", { className: "text-redError text-xs px-2", children: error })] }));
 }
 
 function Skeleton({ shape = 'rectangle', width = '100%', height = '1rem', borderRadius, animation = 'wave', size, className, }) {