tw-react-components 0.0.147 → 0.0.148

package/index.cjs.js

@@ -1275,7 +1275,7 @@ const SelectInput = react.forwardRef((_a, ref) => {
     const [open, setOpen] = react.useState(false);
     const [searchValue, setSearchValue] = react.useState('');
     const pureItems = react.useMemo(() => items.flatMap((item) => (item.group ? item.items : [item])), [items]);
-    const selectedItems = react.useMemo(() => value
+    const selectedItems = react.useMemo(() => isNotNullOrUndefined(value)
         ? !multiple
             ? pureItems.find((item) => selectPredicate(item.value, value))
                 ? [pureItems.find((item) => selectPredicate(item.value, value))]
@@ -1315,7 +1315,7 @@ const SelectInput = react.forwardRef((_a, ref) => {
             }
         }
         else if (multiple) {
-            if (selectedMap[id]) {
+            if (isNotNullOrUndefined(selectedMap[id])) {
                 onChange === null || onChange === void 0 ? void 0 : onChange(selectedItems.filter((item) => item.id !== id).map((item) => item.value));
             }
             else {
@@ -1341,15 +1341,18 @@ const SelectInput = react.forwardRef((_a, ref) => {
     const ItemComponent = multiple ? DropdownMenu.CheckboxItem : DropdownMenu.RadioItem;
     const RenderOption = react.useCallback((option) => {
         return (jsxRuntime.jsx(ItemComponent, { className: cn('w-full cursor-pointer hover:bg-slate-200 dark:hover:bg-slate-700', {
-                'bg-slate-200 dark:bg-slate-700': selectedMap[option.id],
-            }), value: String(option.id), checked: !!selectedMap[option.id], onSelect: (event) => {
+                'bg-slate-200 dark:bg-slate-700': isNotNullOrUndefined(selectedMap[option.id]),
+            }), value: String(option.id), checked: isNotNullOrUndefined(selectedMap[option.id]), onSelect: (event) => {
                 multiple && event.preventDefault();
                 handleOnSelect(option.id);
-            }, children: jsxRuntime.jsx("span", { children: renderItem(option, !!selectedMap[option.id]) }) }));
+            }, children: jsxRuntime.jsx("span", { children: renderItem(option, isNotNullOrUndefined(selectedMap[option.id])) }) }));
     }, [ItemComponent, handleOnSelect, multiple, renderItem, selectedMap]);
     return (jsxRuntime.jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, children: [jsxRuntime.jsx(DropdownMenu.Trigger, { className: cn('w-full', className), children: jsxRuntime.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: lucideReact.ChevronDownIcon, onSuffixIconClick: () => setOpen((open) => !open), ref: ref, readOnly: true })) }), jsxRuntime.jsxs(DropdownMenu.Content, { className: "flex max-h-80 w-[calc(var(--radix-popper-anchor-width))] flex-col overflow-hidden", children: [search && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TextInput, { value: searchValue, placeholder: "Search...", size: props.size, onChange: handleOnSearchValueChange, clearable: !!searchValue.length, onClear: clearSearchValue }), jsxRuntime.jsx(DropdownMenu.Separator, { className: "w-full" })] })), filteredItems.length === 0 &&
                         (allowAddition && searchValue ? (jsxRuntime.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, "'"] })) : (jsxRuntime.jsx("div", { className: "py-1.5 text-center text-slate-500", children: "No items." }))), jsxRuntime.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 ? (jsxRuntime.jsxs(Flex, { className: "gap-1", direction: "column", fullWidth: true, children: [jsxRuntime.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) => (jsxRuntime.jsx(RenderOption, Object.assign({}, subItem), subItem.id))), index < filteredItems.length - 1 && (jsxRuntime.jsx("div", { className: "mb-1 h-px w-full bg-slate-200 dark:bg-slate-700" }))] }, item.id)) : (jsxRuntime.jsx(RenderOption, Object.assign({}, item), item.id))) })] })] }));
 });
+function isNotNullOrUndefined(value) {
+    return value !== null && value !== undefined;
+}
 
 const FileInput = react.forwardRef((_a, ref) => {
     var { className, value, onChange, onFileChange, accept } = _a, props = __rest(_a, ["className", "value", "onChange", "onFileChange", "accept"]);

package/index.esm.js

@@ -1247,7 +1247,7 @@ const SelectInput = forwardRef((_a, ref) => {
     const [open, setOpen] = useState(false);
     const [searchValue, setSearchValue] = useState('');
     const pureItems = useMemo(() => items.flatMap((item) => (item.group ? item.items : [item])), [items]);
-    const selectedItems = useMemo(() => value
+    const selectedItems = useMemo(() => isNotNullOrUndefined(value)
         ? !multiple
             ? pureItems.find((item) => selectPredicate(item.value, value))
                 ? [pureItems.find((item) => selectPredicate(item.value, value))]
@@ -1287,7 +1287,7 @@ const SelectInput = forwardRef((_a, ref) => {
             }
         }
         else if (multiple) {
-            if (selectedMap[id]) {
+            if (isNotNullOrUndefined(selectedMap[id])) {
                 onChange === null || onChange === void 0 ? void 0 : onChange(selectedItems.filter((item) => item.id !== id).map((item) => item.value));
             }
             else {
@@ -1313,15 +1313,18 @@ const SelectInput = forwardRef((_a, ref) => {
     const ItemComponent = multiple ? DropdownMenu.CheckboxItem : DropdownMenu.RadioItem;
     const RenderOption = useCallback((option) => {
         return (jsx(ItemComponent, { className: cn('w-full cursor-pointer hover:bg-slate-200 dark:hover:bg-slate-700', {
-                'bg-slate-200 dark:bg-slate-700': selectedMap[option.id],
-            }), value: String(option.id), checked: !!selectedMap[option.id], onSelect: (event) => {
+                'bg-slate-200 dark:bg-slate-700': isNotNullOrUndefined(selectedMap[option.id]),
+            }), value: String(option.id), checked: isNotNullOrUndefined(selectedMap[option.id]), onSelect: (event) => {
                 multiple && event.preventDefault();
                 handleOnSelect(option.id);
-            }, children: jsx("span", { children: renderItem(option, !!selectedMap[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 &&
                         (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) {
+    return value !== null && value !== undefined;
+}
 
 const FileInput = forwardRef((_a, ref) => {
     var { className, value, onChange, onFileChange, accept } = _a, props = __rest(_a, ["className", "value", "onChange", "onFileChange", "accept"]);

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.147",
+  "version": "0.0.148",
   "license": "MIT",
   "homepage": "https://bacali95.github.io/tw-react-components",
   "author": {