karsten-design-system 1.2.71 → 1.2.72
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/index.js
CHANGED
|
@@ -4527,7 +4527,7 @@ function Select(props) {
|
|
|
4527
4527
|
: 'pi pi-angle-down', 'text-light-700 px-2 flex items-center cursor-pointer', isInputDisabled && 'text-disabled', error && 'text-redError'), onClick: toggleDropdown })] })] }), isOpen && (jsx("div", { className: clsx('absolute w-full bg-light-500 border shadow-md z-40 rounded-md p-2 -bottom-1 translate-y-full dark:bg-dark-100', error ? 'border-redError' : 'border-light-700'), children: isLoadingOptions ? (jsxs("div", { className: "p-4 text-center text-light-700 flex items-center justify-center gap-2", children: [lang.loadingMessage, jsx("i", { className: "pi pi-spinner pi-spin" })] })) : props.onInputChange && searchText.length === 0 && !props.value ? (jsx("div", { className: "p-4 text-center text-light-700", children: lang.typeToSearchMessage })) : 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-light-300 hover:font-bold dark:bg-dark-100 dark:text-light-500 dark:hover:bg-dark-400', index === highlightedIndex && 'bg-light-300 font-bold'), children: [jsx("span", { className: "break-words 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-light-500 ring-light-700 checked:bg-primary cursor-pointer dark:bg-dark-100 dark:checked:bg-light-500 dark:checked:border-light-500 dark:ring-offset-dark-100 dark:ring-offset-2') })] }, option.value))) })) : (jsx("div", { className: "p-4 text-center text-light-700", children: lang.noResultsFoundMessage })) })), hasError && jsx("span", { className: "text-redError text-xs px-2", children: error })] }));
|
|
4528
4528
|
}
|
|
4529
4529
|
|
|
4530
|
-
function SelectButton({ options, placeholder = 'Pesquisar por', onChange, disabled = false, variant = 'primary', loading = false, }) {
|
|
4530
|
+
function SelectButton({ options, placeholder = 'Pesquisar por', onChange, disabled = false, variant = 'primary', loading = false, width = '', }) {
|
|
4531
4531
|
const [open, setOpen] = useState(false);
|
|
4532
4532
|
const ref = useRef(null);
|
|
4533
4533
|
useEffect(() => {
|
|
@@ -4541,7 +4541,7 @@ function SelectButton({ options, placeholder = 'Pesquisar por', onChange, disabl
|
|
|
4541
4541
|
return () => document.removeEventListener('mousedown', handleClickOutside);
|
|
4542
4542
|
}
|
|
4543
4543
|
}, [open]);
|
|
4544
|
-
return (jsxs("div", { ref: ref, className: "relative inline-block", children: [jsx(Button, { onClick: () => setOpen((prev) => !prev), label: placeholder, variant: variant, rightIcon: "pi pi-chevron-down", disabled: disabled, loading: loading }), open && (jsx("div", { className: "absolute w-100 z-20 p-2 -bottom-1 translate-y-full shadow-container rounded-md bg-light-500 dark:text-light-500 dark:bg-dark-100 dark:border dark:border-dark-500 dark:shadow-dark-400", children: jsx("ul", { className: "max-h-60 overflow-y-auto", children: jsx("ul", { children: options.map(({ label, value }) => (jsx("li", { className: clsx('p-2 cursor-pointer rounded hover:bg-light-300 hover:font-bold dark:bg-dark-100 dark:text-light-500 dark:hover:bg-dark-400 mt-1'), children: jsx("a", { onClick: () => {
|
|
4544
|
+
return (jsxs("div", { ref: ref, className: "relative inline-block", children: [jsx(Button, { onClick: () => setOpen((prev) => !prev), label: placeholder, variant: variant, rightIcon: "pi pi-chevron-down", disabled: disabled, loading: loading, className: clsx(width) }), open && (jsx("div", { className: "absolute w-100 z-20 p-2 -bottom-1 translate-y-full shadow-container rounded-md bg-light-500 dark:text-light-500 dark:bg-dark-100 dark:border dark:border-dark-500 dark:shadow-dark-400", children: jsx("ul", { className: "max-h-60 overflow-y-auto", children: jsx("ul", { children: options.map(({ label, value }) => (jsx("li", { className: clsx('p-2 cursor-pointer rounded hover:bg-light-300 hover:font-bold dark:bg-dark-100 dark:text-light-500 dark:hover:bg-dark-400 mt-1'), children: jsx("a", { onClick: () => {
|
|
4545
4545
|
onChange({ label, value });
|
|
4546
4546
|
setOpen(false);
|
|
4547
4547
|
}, onKeyDown: (e) => {
|
|
@@ -4550,7 +4550,7 @@ function SelectButton({ options, placeholder = 'Pesquisar por', onChange, disabl
|
|
|
4550
4550
|
onChange({ label, value });
|
|
4551
4551
|
setOpen(false);
|
|
4552
4552
|
}
|
|
4553
|
-
}, className: "block w-full font-base font-roboto text-light-900 cursor-pointer hover:font-bold dark:text-light-500", "aria-label": "Op\u00E7\u00F5es
|
|
4553
|
+
}, className: "block w-full font-base font-roboto text-light-900 cursor-pointer hover:font-bold dark:text-light-500", "aria-label": "Op\u00E7\u00F5es do select", children: jsx("span", { className: "break-words max-w-[calc(100%-20px)]", children: label }) }) }, value))) }) }) }))] }));
|
|
4554
4554
|
}
|
|
4555
4555
|
|
|
4556
4556
|
function Skeleton({ shape = 'rectangle', width = '100%', height = '1rem', borderRadius, animation = 'wave', size, className, }) {
|