karsten-design-system 1.2.70 → 1.2.71

package/dist/index.d.ts

@@ -30,6 +30,7 @@ export * from './stories/components/paginator';
 export * from './stories/components/radioButton';
 export * from './stories/components/rightSidebar';
 export * from './stories/components/select';
+export * from './stories/components/selectButton';
 export * from './stories/components/sidebar';
 export * from './stories/components/skeleton';
 export * from './stories/components/spinner';

package/dist/index.js

@@ -4527,6 +4527,32 @@ function Select(props) {
                                         : '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 })] }));
 }
 
+function SelectButton({ options, placeholder = 'Pesquisar por', onChange, disabled = false, variant = 'primary', loading = false, }) {
+    const [open, setOpen] = useState(false);
+    const ref = useRef(null);
+    useEffect(() => {
+        function handleClickOutside(event) {
+            if (ref.current && !ref.current.contains(event.target)) {
+                setOpen(false);
+            }
+        }
+        if (open) {
+            document.addEventListener('mousedown', handleClickOutside);
+            return () => document.removeEventListener('mousedown', handleClickOutside);
+        }
+    }, [open]);
+    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: () => {
+                                    onChange({ label, value });
+                                    setOpen(false);
+                                }, onKeyDown: (e) => {
+                                    if (e.key === 'Enter' || e.key === ' ') {
+                                        e.preventDefault();
+                                        onChange({ label, value });
+                                        setOpen(false);
+                                    }
+                                }, 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 de configura\u00E7\u00F5es do usu\u00E1rio", children: jsx("span", { className: "break-words max-w-[calc(100%-20px)]", children: label }) }) }, value))) }) }) }))] }));
+}
+
 function Skeleton({ shape = 'rectangle', width = '100%', height = '1rem', borderRadius, animation = 'wave', size, className, }) {
     return (jsx("div", { className: className, children: jsx(Skeleton$1, { shape: shape, width: width, height: height, borderRadius: borderRadius, animation: animation, size: size, "aria-label": "skeleton", className: "bg-[##e8ecf9] dark:bg-dark-400" }) }));
 }
@@ -5129,5 +5155,5 @@ function TransferList({ allItems, associated, onChange, className, titleAvailabl
                                                 }, className: clsx('appearance-none w-3 h-3 shrink-0 align-middle ring-1 ring-offset-2 ring-offset-light-500 ring-light-700 checked:bg-primary cursor-pointer rounded-md dark:bg-dark-100 dark:checked:bg-light-500 dark:checked:border-light-500 dark:ring-offset-dark-100 dark:ring-offset-2'), disabled: isDisabled }), jsx("span", { className: clsx('font-roboto text-primary dark:text-light-500 break-words min-w-0', isDisabled && 'text-light-700 dark:text-dark-400'), style: { wordBreak: 'break-word', minWidth: 0 }, children: item.label })] }) }, item.key)))] })] })] }));
 }
 
-export { Accordion, BasicHeader, Breadcrumb, Button, CalendarInput, Card, CardButton, CardIconsButton, Charts, Divider, EmptyContent, ExpandablePanel, FileUpload, Header, IconButton, InfoCard, Input, InputSwitch, InputTextArea, InternalMenu, LanguageDropdown, Link, MegaMenu, Modal, ModalForm, MultiSelect, NotificationsSidebar, Paginator, RadioButton, RightSidebar, Select, Sidebar, Skeleton, Spinner, Table, Tabs, TagStatus, TextColor, Toast, Tooltip, TransferList };
+export { Accordion, BasicHeader, Breadcrumb, Button, CalendarInput, Card, CardButton, CardIconsButton, Charts, Divider, EmptyContent, ExpandablePanel, FileUpload, Header, IconButton, InfoCard, Input, InputSwitch, InputTextArea, InternalMenu, LanguageDropdown, Link, MegaMenu, Modal, ModalForm, MultiSelect, NotificationsSidebar, Paginator, RadioButton, RightSidebar, Select, SelectButton, Sidebar, Skeleton, Spinner, Table, Tabs, TagStatus, TextColor, Toast, Tooltip, TransferList };
 //# sourceMappingURL=index.js.map