pixelize-design-library 2.1.62 → 2.1.64

package/dist/Components/SearchSelect/SearchSelect.js

@@ -225,7 +225,7 @@ var SearchSelect = function (_a) {
                 (isMultiple || inputValue || !selectedValues.length || !isMultiple) && (react_1.default.createElement(react_2.Input, { ref: inputRef, variant: "unstyled", flex: "1", minW: "5rem", value: inputValue, onChange: function (e) { return setInputValue(e.target.value); }, onFocus: function () {
                         setFocused(true);
                         setIsOpen(true);
-                    }, onBlur: function () { return setFocused(false); }, placeholder: placeholder })),
+                    }, onBlur: function () { return setFocused(false); }, placeholder: selectedValues.length ? "" : placeholder })),
                 react_1.default.createElement(react_2.Box, { ml: "auto", display: "flex", alignItems: "center", gap: 1 },
                     isRemoveAllIcon && selectedValues.length > 0 && (react_1.default.createElement(ToolTip_1.default, { placement: "top", label: "Remove All", hasArrow: true, bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" },
                         react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.X, { size: 12, color: theme.colors.black }), "aria-label": "Clear all", variant: "ghost", size: "sm", onClick: handleClearAll, sx: {

package/dist/Components/Table/TableSettings/ManageColumns.js

@@ -54,19 +54,19 @@ var lucide_react_1 = require("lucide-react");
 var ManageColumns = function (_a) {
     var columns = _a.columns, childInputMethodsRef = _a.childInputMethodsRef;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _b = (0, react_1.useState)(columns.map(function (o) { return (__assign(__assign({}, o), { isHidden: !o.isHidden })); })), items = _b[0], setItems = _b[1];
+    // ✅ keep isHidden as it is (true = hidden, false = visible)
+    var _b = (0, react_1.useState)(columns), items = _b[0], setItems = _b[1];
     var _c = (0, react_1.useState)(""), searchTerm = _c[0], setSearchTerm = _c[1];
     var _d = (0, react_1.useState)(null), draggedItemIndex = _d[0], setDraggedItemIndex = _d[1];
+    var _e = (0, react_1.useState)(null), error = _e[0], setError = _e[1];
     (0, react_1.useImperativeHandle)(childInputMethodsRef, function () {
         return {
             getManageColumnsData: function () {
-                return items.map(function (o) { return (__assign(__assign({}, o), { isHidden: !o.isHidden })); });
+                return items;
             },
         };
     }, [items]);
-    var handleDragStart = function (index) {
-        setDraggedItemIndex(index);
-    };
+    var handleDragStart = function (index) { return setDraggedItemIndex(index); };
     var handleDragOver = function (e, index) {
         e.preventDefault();
         if (draggedItemIndex === null || draggedItemIndex === index)
@@ -78,30 +78,44 @@ var ManageColumns = function (_a) {
         setDraggedItemIndex(index);
         setItems(newItems);
     };
-    var handleDragEnd = function () {
-        setDraggedItemIndex(null);
-    };
+    var handleDragEnd = function () { return setDraggedItemIndex(null); };
+    // ✅ Prevent unchecking last visible column
     var toggleCheckbox = function (index) {
         var newItems = __spreadArray([], items, true);
+        var visibleCount = newItems.filter(function (i) { return !i.isHidden; }).length; // count visible
+        if (!newItems[index].isHidden && visibleCount === 1) {
+            setError("At least one column must remain visible.");
+            return;
+        }
         newItems[index].isHidden = !newItems[index].isHidden;
         setItems(newItems);
+        setError(null);
     };
     var filteredItems = items.filter(function (item) {
         return item.label.toString().toLowerCase().includes(searchTerm.toLowerCase());
     });
+    // ✅ Select all logic
+    var allChecked = items.every(function (item) { return !item.isHidden; });
+    var someChecked = items.some(function (item) { return !item.isHidden; }) && !allChecked;
+    var handleSelectAll = function () {
+        if (allChecked) {
+            // if all visible → keep first visible, hide rest
+            setItems(items.map(function (item, i) { return (__assign(__assign({}, item), { isHidden: i === 0 ? false : true })); }));
+            setError("At least one column must remain visible.");
+        }
+        else {
+            // make all visible
+            setItems(items.map(function (item) { return (__assign(__assign({}, item), { isHidden: false })); }));
+            setError(null);
+        }
+    };
     return (react_1.default.createElement(react_2.Box, { mt: "5" },
         react_1.default.createElement(react_2.Input, { placeholder: "Search", mb: "4", value: searchTerm, onChange: function (e) { return setSearchTerm(e.target.value); } }),
         !searchTerm.length && (react_1.default.createElement(react_2.Flex, { align: "center", mb: "2" },
-            react_1.default.createElement(Checkbox_1.default, { label: "Select all", isChecked: items.every(function (item) { return item.isHidden; }), onChange: function () {
-                    var allChecked = items.every(function (item) { return item.isHidden; });
-                    setItems(items.map(function (item) { return (__assign(__assign({}, item), { isHidden: !allChecked })); }));
-                } }))),
-        react_1.default.createElement(react_2.List, { spacing: "2" }, filteredItems.length > 0 ? (filteredItems.map(function (item, index) { return (react_1.default.createElement(react_2.ListItem, { key: item.id, draggable: true, onDragStart: function () { return handleDragStart(index); }, onDragOver: function (e) { return handleDragOver(e, index); }, onDragEnd: handleDragEnd, bg: theme.colors.gray[50], display: "flex", alignItems: "center", 
-            // justifyContent="space-between"
-            borderRadius: "md", border: "1px solid", borderColor: "gray.200", cursor: "grab", position: "relative", fontSize: 14 },
+            react_1.default.createElement(Checkbox_1.default, { label: "Select all", isChecked: allChecked, isIndeterminate: someChecked, onChange: handleSelectAll }))),
+        react_1.default.createElement(react_2.List, { spacing: "2" }, filteredItems.length > 0 ? (filteredItems.map(function (item, index) { return (react_1.default.createElement(react_2.ListItem, { key: item.id, draggable: true, onDragStart: function () { return handleDragStart(index); }, onDragOver: function (e) { return handleDragOver(e, index); }, onDragEnd: handleDragEnd, bg: theme.colors.gray[50], display: "flex", alignItems: "center", borderRadius: "md", border: "1px solid", borderColor: "gray.200", cursor: "grab", position: "relative", fontSize: 14, px: "2", py: "1" },
             react_1.default.createElement(react_2.IconButton, { "aria-label": "Drag", icon: react_1.default.createElement(lucide_react_1.GripVertical, null), variant: "ghost", cursor: "grab", mr: "1" }),
-            react_1.default.createElement(Checkbox_1.default, { isChecked: item.isHidden, label: String(item.label), onChange: function () { return toggleCheckbox(index); }, sx: {
-                    marginRight: "4",
-                } }))); })) : (react_1.default.createElement(react_2.Text, { color: "gray.500", textAlign: "center" }, "No items found")))));
+            react_1.default.createElement(Checkbox_1.default, { isChecked: !item.isHidden, label: String(item.label), onChange: function () { return toggleCheckbox(index); }, sx: { marginRight: "4" } }))); })) : (react_1.default.createElement(react_2.Text, { color: "gray.500", textAlign: "center" }, "No items found"))),
+        error && (react_1.default.createElement(react_2.Text, { color: "red.500", mt: "3", fontSize: "sm" }, error))));
 };
 exports.default = ManageColumns;