tw-react-components 0.0.147 → 0.0.149

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"]);
@@ -1594,7 +1597,7 @@ function DataTable({ className, columns, rows, sorting, pagination, actions = []
                                     : undefined, children: [column.header, sorting &&
                                         !column.noSorting &&
                                         (((_b = sorting.sorting) === null || _b === void 0 ? void 0 : _b.field) !== column.field ? (jsxRuntime.jsx(lucideReact.ArrowUpDownIcon, { className: "absolute top-1/2 float-right ml-1 hidden h-4 w-4 -translate-y-1/2 group-hover:inline-block" })) : ((_c = sorting.sorting) === null || _c === void 0 ? void 0 : _c.direction) === 'asc' ? (jsxRuntime.jsx(lucideReact.SortAscIcon, { className: "absolute top-1/2 float-right ml-1 inline-block h-4 w-4 -translate-y-1/2" })) : (jsxRuntime.jsx(lucideReact.SortDescIcon, { className: "absolute top-1/2 float-right ml-1 inline-block h-4 w-4 -translate-y-1/2" })))] }, columnIndex));
-                        }), actions.filter((action) => !action.hide).length > 0 && (jsxRuntime.jsx(Table.HeadCell, { align: "center", children: "Actions" }))] }) }), jsxRuntime.jsxs(Table.Body, { className: "relative", children: [isLoading && (jsxRuntime.jsx(Table.Row, { children: jsxRuntime.jsx(Table.Cell, { className: cn('z-10 h-full w-full p-0', {
+                        }), actions.filter((action) => rows.some((item) => { var _a; return typeof action.hide === 'boolean' ? !action.hide : !((_a = action.hide) === null || _a === void 0 ? void 0 : _a.call(action, item)); })).length > 0 && jsxRuntime.jsx(Table.HeadCell, { align: "center", children: "Actions" })] }) }), jsxRuntime.jsxs(Table.Body, { className: "relative", children: [isLoading && (jsxRuntime.jsx(Table.Row, { children: jsxRuntime.jsx(Table.Cell, { className: cn('z-10 h-full w-full p-0', {
                                 absolute: rows.length,
                             }), colSpan: columnsLength, children: jsxRuntime.jsx(Spinner, { className: "bg-white/50 py-4 dark:bg-slate-700/50" }) }) })), !isLoading && !rows.length && (jsxRuntime.jsx(Table.Row, { children: jsxRuntime.jsx(Table.Cell, { colSpan: columnsLength, children: jsxRuntime.jsx(Flex, { className: "text-slate-500", justify: "center", children: noDataMessage !== null && noDataMessage !== void 0 ? noDataMessage : 'No data' }) }) })), rows.map((item, rowIndex) => [
                         jsxRuntime.jsxs(Table.Row, { className: cn({
@@ -1602,7 +1605,7 @@ function DataTable({ className, columns, rows, sorting, pagination, actions = []
                             }, rowClassName === null || rowClassName === void 0 ? void 0 : rowClassName(item, rowIndex)), onClick: handleRowClicked(item, rowIndex), children: [rowExtraContent && (jsxRuntime.jsx(Table.Cell, { className: "w-min", align: "center", children: jsxRuntime.jsx(ExpandButton, { folded: !expandedRows[rowExtraContent.idGetter(item)], foldComponent: lucideReact.MinusIcon, unfoldComponent: lucideReact.PlusIcon, onClick: handleExpandRow(rowExtraContent.idGetter(item)) }) })), _columns.map((column, columnIndex) => {
                                     var _a, _b, _c;
                                     return (jsxRuntime.jsx(Table.Cell, { className: column.className, align: (_a = column.align) !== null && _a !== void 0 ? _a : 'left', children: (_c = (_b = column.render) === null || _b === void 0 ? void 0 : _b.call(column, item, rowIndex)) !== null && _c !== void 0 ? _c : defaultRender(item, column.field) }, columnIndex));
-                                }), actions.filter((action) => !action.hide).length > 0 && (jsxRuntime.jsx(Table.Cell, { className: "py-3", children: jsxRuntime.jsx(Flex, { align: "center", justify: "center", children: actions
+                                }), actions.filter((action) => { var _a; return typeof action.hide === 'boolean' ? !action.hide : !((_a = action.hide) === null || _a === void 0 ? void 0 : _a.call(action, item)); }).length > 0 && (jsxRuntime.jsx(Table.Cell, { className: "py-3", children: jsxRuntime.jsx(Flex, { align: "center", justify: "center", children: actions
                                             .filter((action) => { var _a; return typeof action.hide === 'boolean' ? !action.hide : !((_a = action.hide) === null || _a === void 0 ? void 0 : _a.call(action, item)); })
                                             .map((action, actionIndex) => {
                                             var _a;

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"]);
@@ -1566,7 +1569,7 @@ function DataTable({ className, columns, rows, sorting, pagination, actions = []
                                     : undefined, children: [column.header, sorting &&
                                         !column.noSorting &&
                                         (((_b = sorting.sorting) === null || _b === void 0 ? void 0 : _b.field) !== column.field ? (jsx(ArrowUpDownIcon, { className: "absolute top-1/2 float-right ml-1 hidden h-4 w-4 -translate-y-1/2 group-hover:inline-block" })) : ((_c = sorting.sorting) === null || _c === void 0 ? void 0 : _c.direction) === 'asc' ? (jsx(SortAscIcon, { className: "absolute top-1/2 float-right ml-1 inline-block h-4 w-4 -translate-y-1/2" })) : (jsx(SortDescIcon, { className: "absolute top-1/2 float-right ml-1 inline-block h-4 w-4 -translate-y-1/2" })))] }, columnIndex));
-                        }), actions.filter((action) => !action.hide).length > 0 && (jsx(Table.HeadCell, { align: "center", children: "Actions" }))] }) }), jsxs(Table.Body, { className: "relative", children: [isLoading && (jsx(Table.Row, { children: jsx(Table.Cell, { className: cn('z-10 h-full w-full p-0', {
+                        }), actions.filter((action) => rows.some((item) => { var _a; return typeof action.hide === 'boolean' ? !action.hide : !((_a = action.hide) === null || _a === void 0 ? void 0 : _a.call(action, item)); })).length > 0 && jsx(Table.HeadCell, { align: "center", children: "Actions" })] }) }), jsxs(Table.Body, { className: "relative", children: [isLoading && (jsx(Table.Row, { children: jsx(Table.Cell, { className: cn('z-10 h-full w-full p-0', {
                                 absolute: rows.length,
                             }), colSpan: columnsLength, children: jsx(Spinner, { className: "bg-white/50 py-4 dark:bg-slate-700/50" }) }) })), !isLoading && !rows.length && (jsx(Table.Row, { children: jsx(Table.Cell, { colSpan: columnsLength, children: jsx(Flex, { className: "text-slate-500", justify: "center", children: noDataMessage !== null && noDataMessage !== void 0 ? noDataMessage : 'No data' }) }) })), rows.map((item, rowIndex) => [
                         jsxs(Table.Row, { className: cn({
@@ -1574,7 +1577,7 @@ function DataTable({ className, columns, rows, sorting, pagination, actions = []
                             }, rowClassName === null || rowClassName === void 0 ? void 0 : rowClassName(item, rowIndex)), onClick: handleRowClicked(item, rowIndex), children: [rowExtraContent && (jsx(Table.Cell, { className: "w-min", align: "center", children: jsx(ExpandButton, { folded: !expandedRows[rowExtraContent.idGetter(item)], foldComponent: MinusIcon, unfoldComponent: PlusIcon, onClick: handleExpandRow(rowExtraContent.idGetter(item)) }) })), _columns.map((column, columnIndex) => {
                                     var _a, _b, _c;
                                     return (jsx(Table.Cell, { className: column.className, align: (_a = column.align) !== null && _a !== void 0 ? _a : 'left', children: (_c = (_b = column.render) === null || _b === void 0 ? void 0 : _b.call(column, item, rowIndex)) !== null && _c !== void 0 ? _c : defaultRender(item, column.field) }, columnIndex));
-                                }), actions.filter((action) => !action.hide).length > 0 && (jsx(Table.Cell, { className: "py-3", children: jsx(Flex, { align: "center", justify: "center", children: actions
+                                }), actions.filter((action) => { var _a; return typeof action.hide === 'boolean' ? !action.hide : !((_a = action.hide) === null || _a === void 0 ? void 0 : _a.call(action, item)); }).length > 0 && (jsx(Table.Cell, { className: "py-3", children: jsx(Flex, { align: "center", justify: "center", children: actions
                                             .filter((action) => { var _a; return typeof action.hide === 'boolean' ? !action.hide : !((_a = action.hide) === null || _a === void 0 ? void 0 : _a.call(action, item)); })
                                             .map((action, actionIndex) => {
                                             var _a;

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