tw-react-components 0.0.158 → 0.0.159

package/index.esm.js

@@ -1241,8 +1241,11 @@ const DropdownMenu = Object.assign(DropdownMenuPrimitive.Root, {
     RadioGroup: DropdownMenuRadioGroup,
 });
 
+const defaultRenderItem = (item, selected) => item.label;
+const defaultSearchPredicate = (item, searchValue) => item.label.toLowerCase().includes(searchValue.toLowerCase());
+const defaultSelectPredicate = (a, b) => a === b;
 const SelectInput = forwardRef((_a, ref) => {
-    var { className, items, renderItem = (item) => item.label, value, multiple, clearable, allowAddition, onNewItemAdded, search, searchPredicate = (item, searchValue) => item.label.toLowerCase().includes(searchValue.toLowerCase()), selectPredicate = (a, b) => a === b, onChange, readOnly, parentRef } = _a, props = __rest(_a, ["className", "items", "renderItem", "value", "multiple", "clearable", "allowAddition", "onNewItemAdded", "search", "searchPredicate", "selectPredicate", "onChange", "readOnly", "parentRef"]);
+    var { className, items, renderItem = defaultRenderItem, value, multiple, clearable, allowAddition, onNewItemAdded, search, searchPredicate = defaultSearchPredicate, selectPredicate = defaultSelectPredicate, onChange, readOnly, parentRef } = _a, props = __rest(_a, ["className", "items", "renderItem", "value", "multiple", "clearable", "allowAddition", "onNewItemAdded", "search", "searchPredicate", "selectPredicate", "onChange", "readOnly", "parentRef"]);
     const [open, setOpen] = useState(false);
     const [searchValue, setSearchValue] = useState('');
     const pureItems = useMemo(() => items.flatMap((item) => (item.group ? item.items : [item])), [items]);
@@ -1260,14 +1263,14 @@ const SelectInput = forwardRef((_a, ref) => {
     const filteredItems = useMemo(() => !search || !searchValue
         ? items
         : items.flatMap((item) => item.group
-            ? item.items.some((subItem) => subItem.label.toLowerCase().includes(searchValue.toLowerCase()))
+            ? item.items.some((subItem) => searchPredicate(subItem, searchValue))
                 ? [
-                    Object.assign(Object.assign({}, item), { items: item.items.filter((subItem) => subItem.label.toLowerCase().includes(searchValue.toLowerCase())) }),
+                    Object.assign(Object.assign({}, item), { items: item.items.filter((subItem) => searchPredicate(subItem, searchValue)) }),
                 ]
                 : []
-            : item.label.toLowerCase().includes(searchValue.toLowerCase())
+            : searchPredicate(item, searchValue)
                 ? [item]
-                : []), [items, search, searchValue]);
+                : []), [items, search, searchPredicate, searchValue]);
     const text = useMemo(() => selectedItems.length
         ? !multiple
             ? selectedItems[0].label
@@ -1297,7 +1300,10 @@ const SelectInput = forwardRef((_a, ref) => {
             }
         }
     }, [clearable, multiple, onChange, pureItems, selectedItems, selectedMap]);
-    const handleOnSearchValueChange = (event) => setSearchValue(event.target.value);
+    const handleOnSearchValueChange = (event) => {
+        event.stopPropagation();
+        setSearchValue(event.target.value);
+    };
     const clearSearchValue = () => setSearchValue('');
     const handleOnClear = () => {
         if (readOnly)
@@ -1318,7 +1324,7 @@ const SelectInput = forwardRef((_a, ref) => {
                 handleOnSelect(option.id);
             }, children: jsx("span", { children: renderItem(option, isNotNullOrUndefined(selectedMap[option.id])) }) }));
     }, [ItemComponent, handleOnSelect, multiple, renderItem, selectedMap]);
-    return (jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, children: [jsx(DropdownMenu.Trigger, { className: cn('w-full', className), children: jsx(TextInput, Object.assign({ className: "[&>div>*]:cursor-pointer", inputClassName: "text-left" }, props, { value: text !== null && text !== void 0 ? text : '', clearable: clearable && !!selectedItems.length, onClear: handleOnClear, suffixIcon: ChevronDownIcon, onSuffixIconClick: () => setOpen((open) => !open), ref: ref, readOnly: true })) }), jsxs(DropdownMenu.Content, { className: "flex max-h-80 w-[calc(var(--radix-popper-anchor-width))] flex-col overflow-hidden", children: [search && (jsxs(Fragment, { children: [jsx(TextInput, { value: searchValue, placeholder: "Search...", size: props.size, onChange: handleOnSearchValueChange, clearable: !!searchValue.length, onClear: clearSearchValue }), jsx(DropdownMenu.Separator, { className: "w-full" })] })), filteredItems.length === 0 &&
+    return (jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, children: [jsx(DropdownMenu.Trigger, { className: cn('w-full', className), children: jsx(TextInput, Object.assign({ className: "[&>div>*]:cursor-pointer", inputClassName: "text-left" }, props, { value: text !== null && text !== void 0 ? text : '', clearable: clearable && !!selectedItems.length, onClear: handleOnClear, suffixIcon: ChevronDownIcon, onSuffixIconClick: () => setOpen((open) => !open), ref: ref, readOnly: true })) }), jsxs(DropdownMenu.Content, { className: "flex max-h-80 w-[calc(var(--radix-popper-anchor-width))] flex-col overflow-hidden", children: [search && (jsxs(Fragment, { children: [jsx(TextInput, { value: searchValue, placeholder: "Search...", size: props.size, onChange: handleOnSearchValueChange, onKeyUp: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), clearable: !!searchValue.length, onClear: clearSearchValue }), jsx(DropdownMenu.Separator, { className: "w-full" })] })), filteredItems.length === 0 &&
                         (allowAddition && searchValue ? (jsxs("button", { className: "rounded bg-slate-100 py-1.5 text-center hover:bg-slate-200 dark:bg-slate-900/30 dark:hover:bg-slate-700/30", onClick: handleOnAddItemClicked, children: ["Add '", searchValue, "'"] })) : (jsx("div", { className: "py-1.5 text-center text-slate-500", children: "No items." }))), jsx(GroupComponent, { className: "flex flex-col gap-1 overflow-auto", value: !multiple && selectedItems.length ? String(selectedItems[0].id) : undefined, children: filteredItems.map((item, index) => item.group ? (jsxs(Flex, { className: "gap-1", direction: "column", fullWidth: true, children: [jsx(DropdownMenu.Label, { className: "sticky top-0 z-[51] w-full rounded-md border bg-white py-1 dark:bg-slate-900", children: item.label }), item.items.map((subItem) => (jsx(RenderOption, Object.assign({}, subItem), subItem.id))), index < filteredItems.length - 1 && (jsx("div", { className: "mb-1 h-px w-full bg-slate-200 dark:bg-slate-700" }))] }, item.id)) : (jsx(RenderOption, Object.assign({}, item), item.id))) })] })] }));
 });
 function isNotNullOrUndefined(value) {
@@ -2007,8 +2013,8 @@ const SidebarMenuSubItem = forwardRef((_a, ref) => {
 SidebarMenuSubItem.displayName = 'SidebarMenuSubItem';
 const SidebarMenuSubButton = forwardRef((_a, ref) => {
     var { asChild = false, size = 'md', isActive, className } = _a, props = __rest(_a, ["asChild", "size", "isActive", "className"]);
-    const Comp = asChild ? Slot : 'a';
-    return (jsx(Comp, Object.assign({ ref: ref, "data-sidebar": "menu-sub-button", "data-size": size, "data-active": isActive, className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', 'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground', size === 'sm' && 'text-xs', size === 'md' && 'text-sm', 'group-data-[collapsible=icon]:hidden', className) }, props)));
+    const Comp = asChild ? Slot : 'button';
+    return (jsx(Comp, Object.assign({ ref: ref, "data-sidebar": "menu-sub-button", "data-size": size, "data-active": isActive, className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 w-full min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', 'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground', size === 'sm' && 'text-xs', size === 'md' && 'text-sm', 'group-data-[collapsible=icon]:hidden', className) }, props)));
 });
 SidebarMenuSubButton.displayName = 'SidebarMenuSubButton';
 const Sidebar = Object.assign($Sidebar, {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tw-react-components",
   "description": "A set of React components build with TailwindCSS to make a nice dashboard.",
-  "version": "0.0.158",
+  "version": "0.0.159",
   "license": "MIT",
   "homepage": "https://bacali95.github.io/tw-react-components",
   "type": "module",

package/src/components/Sidebar/index.d.ts

@@ -72,11 +72,11 @@ export declare const Sidebar: import("react").ForwardRefExoticComponent<Omit<imp
         showIcon?: boolean;
     }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     MenuSub: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("react").RefAttributes<HTMLUListElement>>;
-    MenuSubButton: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLAnchorElement> & import("react").AnchorHTMLAttributes<HTMLAnchorElement> & {
+    MenuSubButton: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
         asChild?: boolean;
         size?: "sm" | "md";
         isActive?: boolean;
-    }, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
+    }, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
     MenuSubItem: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
     Rail: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
     Separator: import("react").ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-separator").SeparatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;