pixelize-design-library 2.1.71 → 2.1.73

package/dist/Components/Search/Search.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { SearchProps } from "./SearchProps";
-export default function Search({ placeholder, onSearch, onclose, shortcut, query, }: SearchProps): React.JSX.Element;
+export default function Search({ placeholder, onSearch, onclose, shortcut, query, error, errorMessage, helperText, label, id, isInformation, informationMessage, isRequired, }: SearchProps): React.JSX.Element;

package/dist/Components/Search/Search.js

@@ -1,8 +1,4 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -31,15 +27,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
-var styled_1 = __importDefault(require("@emotion/styled"));
+var react_2 = require("@chakra-ui/react");
 var lucide_react_1 = require("lucide-react");
-var Container = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  border-radius: 4px;\n  padding: 0.5rem 0.7rem 0.5rem 0.7rem;\n  width: 100%;\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n  border-radius: 20px;\n  background: #fff;\n  border: 1px solid #f1f1f1;\n"], ["\n  display: flex;\n  align-items: center;\n  border-radius: 4px;\n  padding: 0.5rem 0.7rem 0.5rem 0.7rem;\n  width: 100%;\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n  border-radius: 20px;\n  background: #fff;\n  border: 1px solid #f1f1f1;\n"])));
-var Input = styled_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n  border: none;\n  outline: none;\n  margin-left: 0.5rem;\n  background: transparent;\n"], ["\n  flex: 1;\n  border: none;\n  outline: none;\n  margin-left: 0.5rem;\n  background: transparent;\n"])));
-var SearchIcon = (0, styled_1.default)(lucide_react_1.Search)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: #888;\n"], ["\n  color: #888;\n"])));
-var CloseIcon = (0, styled_1.default)(lucide_react_1.X)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: #888;\n  font-size: 1.5rem;\n"], ["\n  color: #888;\n  font-size: 1.5rem;\n"])));
-var Shortcut = styled_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-left: auto;\n  padding-left: 0.5rem;\n  color: #888;\n  font-size: 0.9rem;\n"], ["\n  margin-left: auto;\n  padding-left: 0.5rem;\n  color: #888;\n  font-size: 0.9rem;\n"])));
+var FormLabel_1 = require("../Common/FormLabel");
+var HelperText_1 = __importDefault(require("../Common/HelperText"));
+var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
 function Search(_a) {
-    var _b = _a.placeholder, placeholder = _b === void 0 ? "Search..." : _b, onSearch = _a.onSearch, onclose = _a.onclose, _c = _a.shortcut, shortcut = _c === void 0 ? "Ctrl+K" : _c, query = _a.query;
+    var _b = _a.placeholder, placeholder = _b === void 0 ? "Search..." : _b, onSearch = _a.onSearch, onclose = _a.onclose, _c = _a.shortcut, shortcut = _c === void 0 ? "Ctrl+K" : _c, query = _a.query, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, label = _a.label, id = _a.id, isInformation = _a.isInformation, informationMessage = _a.informationMessage, isRequired = _a.isRequired;
     var inputRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(function () {
         var handleKeyDown = function (event) {
@@ -56,11 +50,17 @@ function Search(_a) {
             window.removeEventListener("keydown", handleKeyDown);
         };
     }, [shortcut]);
-    return (react_1.default.createElement(Container, null,
-        react_1.default.createElement(SearchIcon, null),
-        react_1.default.createElement(Input, { ref: inputRef, type: "text", value: query, onChange: onSearch, placeholder: placeholder }),
-        query && react_1.default.createElement(CloseIcon, { onClick: onclose }),
-        shortcut && react_1.default.createElement(Shortcut, null, shortcut)));
+    return (react_1.default.createElement(react_2.FormControl, { id: id, isInvalid: !!error },
+        label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })),
+        react_1.default.createElement(react_2.InputGroup, { w: "100%" },
+            react_1.default.createElement(react_2.InputLeftElement, { pointerEvents: "none" },
+                react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Search, color: "gray.500" })),
+            react_1.default.createElement(react_2.Input, { ref: inputRef, type: "text", value: query, onChange: onSearch, placeholder: placeholder, variant: "outline", isInvalid: error }),
+            react_1.default.createElement(react_2.InputRightElement, { w: "auto", pr: "3", display: "flex", alignItems: "center" // ✅ centers vertically
+                , gap: "2" },
+                query && (react_1.default.createElement(react_2.Icon, { as: lucide_react_1.X, color: "gray.500", boxSize: 5, cursor: "pointer", onClick: onclose })),
+                shortcut && (react_1.default.createElement(react_2.Text, { fontSize: "sm", color: "gray.500", px: "2", py: "0.5", borderRadius: "md", bg: "gray.100" }, shortcut)))),
+        error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
+        helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
 }
 exports.default = Search;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/Components/Search/SearchProps.d.ts

@@ -5,4 +5,12 @@ export type SearchProps = {
     shortcut?: "Ctrl+K";
     query?: string;
     onclose: () => void;
+    error?: boolean;
+    errorMessage?: string;
+    helperText?: string;
+    label?: string;
+    id?: string;
+    isInformation?: boolean;
+    informationMessage?: string;
+    isRequired?: boolean;
 };

package/dist/Components/SearchSelect/SearchSelect.js

@@ -239,7 +239,7 @@ var SearchSelect = function (_a) {
                             e.stopPropagation();
                             setIsOpen(function (prev) { return !prev; });
                         }, "aria-label": "toggle-dropdown", display: "flex", alignItems: "center" }, isOpen ? react_1.default.createElement(lucide_react_1.ChevronUp, { size: 16 }) : react_1.default.createElement(lucide_react_1.ChevronDown, { size: 16 })))))),
-        isOpen && (react_1.default.createElement(react_2.Box, { position: "absolute", zIndex: 10, width: "100%", maxH: "20rem", borderWidth: 1, borderRadius: "sm", bg: "white", boxShadow: "md", display: "flex", flexDirection: "column" },
+        isOpen && (react_1.default.createElement(react_2.Box, { position: "absolute", zIndex: 10, width: "100%", maxH: "20rem", borderWidth: 1, borderRadius: "sm", bg: theme.colors.white, boxShadow: "md", display: "flex", flexDirection: "column" },
             isMultiple && isSelectAll && (react_1.default.createElement(react_2.Box, { p: 2, px: 3, cursor: "pointer", onClick: handleSelectAll, display: "flex", alignItems: "center", gap: 2, borderBottom: "0.063rem solid ".concat(theme.colors.gray[100]) },
                 react_1.default.createElement(react_2.Checkbox, { isChecked: allFilteredSelected, pointerEvents: "none" }),
                 react_1.default.createElement(react_2.Text, { fontSize: "sm" }, allFilteredSelected ? 'Unselect All' : 'Select All'))),
@@ -248,7 +248,7 @@ var SearchSelect = function (_a) {
                 react_1.default.createElement(react_2.Text, { fontSize: "sm" }, loadingText))) : filteredOptions.length === 0 ? (react_1.default.createElement(react_2.Text, { p: 3, fontSize: "sm", color: theme.colors.gray[500] }, "No results found")) : (filteredOptions.map(function (option) { return (react_1.default.createElement(react_2.Box, { key: option.id, p: 2, px: 3, cursor: "pointer", bg: isSelected(option.id) ? theme.colors.gray[100] : 'transparent', _hover: { bg: theme.colors.gray[50] }, onClick: function () { return handleSelect(option); }, display: "flex", alignItems: "center", gap: 2, borderBottom: "0.063rem solid ".concat(theme.colors.gray[100]) },
                 isMultiple && (react_1.default.createElement(react_2.Checkbox, { isChecked: isSelected(option.id), pointerEvents: "none", colorScheme: "blue" })),
                 option.view ? react_1.default.createElement(react_1.default.Fragment, null, option.view) : react_1.default.createElement(react_2.Text, { fontSize: "sm" }, option.label))); }))),
-            (addNew === null || addNew === void 0 ? void 0 : addNew.enabled) && (react_1.default.createElement(react_2.Box, { p: 2, borderTop: "0.063rem solid", borderColor: theme.colors.gray[200], bg: "white", display: "flex", alignItems: "center", gap: 2, cursor: "pointer", onClick: addNew.onClick, _hover: { bg: theme.colors.gray[50] } },
+            (addNew === null || addNew === void 0 ? void 0 : addNew.enabled) && (react_1.default.createElement(react_2.Box, { p: 2, borderTop: "0.063rem solid", borderColor: theme.colors.gray[200], bg: theme.colors.white, display: "flex", alignItems: "center", gap: 2, cursor: "pointer", onClick: addNew.onClick, _hover: { bg: theme.colors.gray[50] } },
                 addNew.icon || react_1.default.createElement(lucide_react_1.Plus, { size: 16 }),
                 react_1.default.createElement(react_2.Text, { fontSize: "sm" }, addNew.text || 'Add New'))))),
         helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText }),

package/dist/Components/Table/Components/TableActions.d.ts

@@ -1,3 +1,11 @@
 import React from "react";
-declare const TableActions: ({ row }: any) => React.JSX.Element;
+type TableRowActions = {
+    onLink?: (row: any) => void;
+    onEdit?: (row: any) => void;
+    onDelete?: (row: any) => void;
+    [key: string]: any;
+};
+declare const TableActions: ({ row }: {
+    row?: TableRowActions | undefined;
+}) => React.JSX.Element | null;
 export default TableActions;

package/dist/Components/Table/Components/TableActions.js

@@ -44,40 +44,50 @@ var TableActions = function (_a) {
             }
         };
         if (isOpen) {
-            document.addEventListener("mousedown", handleClickOutside);
+            // ✅ Use click instead of mousedown
+            document.addEventListener("click", handleClickOutside);
         }
-        return function () { return document.removeEventListener("mousedown", handleClickOutside); };
+        return function () {
+            document.removeEventListener("click", handleClickOutside);
+        };
     }, [isOpen]);
     var handleOpen = function () {
         window.dispatchEvent(new Event("close-all-popovers")); // close others
         setIsOpen(true);
     };
     var handleClose = function () { return setIsOpen(false); };
+    // ✅ if row itself is missing, render nothing
+    if (!row)
+        return null;
     return (react_1.default.createElement(react_2.Popover, { placement: "bottom-start", isOpen: isOpen, onClose: handleClose, closeOnBlur: false },
         react_1.default.createElement("div", { ref: ref },
             react_1.default.createElement(react_2.PopoverTrigger, null,
-                react_1.default.createElement(react_2.IconButton, { "aria-label": "Link", color: "black", icon: react_1.default.createElement(lucide_react_1.EllipsisVertical, { size: 17 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" }, onClick: function () { return (isOpen ? handleClose() : handleOpen()); } })),
+                react_1.default.createElement(react_2.IconButton, { "aria-label": "Actions", color: "black", icon: react_1.default.createElement(lucide_react_1.EllipsisVertical, { size: 17 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" }, onClick: function () { return (isOpen ? handleClose() : handleOpen()); } })),
             react_1.default.createElement(react_2.Portal, null,
                 react_1.default.createElement(react_2.PopoverContent, { w: "auto", minW: "150px", boxShadow: "lg", p: 0, zIndex: 999 },
                     react_1.default.createElement(react_2.PopoverBody, null,
                         react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 1 },
                             row.onLink && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, onClick: function () {
-                                    row.onLink(row);
-                                    handleClose();
+                                    var _a;
+                                    (_a = row.onLink) === null || _a === void 0 ? void 0 : _a.call(row, row);
+                                    // handleClose();
                                 } },
                                 react_1.default.createElement(lucide_react_1.ExternalLink, { size: 17 }),
                                 " View")),
                             row.onEdit && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, onClick: function () {
-                                    row.onEdit(row);
-                                    handleClose();
+                                    var _a;
+                                    (_a = row.onEdit) === null || _a === void 0 ? void 0 : _a.call(row, row);
+                                    // handleClose();
                                 } },
                                 react_1.default.createElement(lucide_react_1.Pencil, { size: 17 }),
                                 " Edit")),
                             row.onDelete && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", colorScheme: "red", gap: 2, onClick: function () {
-                                    row.onDelete(row);
-                                    handleClose();
+                                    var _a;
+                                    (_a = row.onDelete) === null || _a === void 0 ? void 0 : _a.call(row, row);
+                                    // handleClose();
                                 } },
                                 react_1.default.createElement(lucide_react_1.Trash2, { size: 17 }),
-                                " Delete")))))))));
+                                " Delete")),
+                            !row.onLink && !row.onEdit && !row.onDelete && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", isDisabled: true, justifyContent: "center" }, "No actions")))))))));
 };
 exports.default = TableActions;

package/dist/Layout.js

@@ -65,7 +65,7 @@ var Tag_1 = __importDefault(require("./Components/Tag/Tag"));
 var lucide_react_1 = require("lucide-react");
 var Header_1 = __importDefault(require("./Components/Header/Header"));
 var fileUpload_1 = require("./Pages/fileUpload");
-var selectSearch_1 = __importDefault(require("./Pages/selectSearch"));
+// import SelectSelect from "./Pages/selectSearch";
 var Slider_1 = __importDefault(require("./Components/Slider/Slider"));
 var contactForm_1 = __importDefault(require("./Pages/contactForm"));
 var productDetailCard_1 = __importDefault(require("./Pages/productDetailCard"));
@@ -95,8 +95,6 @@ var Layout = function () {
                 return react_2.default.createElement(accordion_1.default, null);
             case "/searchSelect":
                 return react_2.default.createElement(searchSelect_1.default, null);
-            case "/selectSearch":
-                return react_2.default.createElement(selectSearch_1.default, null);
             case "/timeline":
                 return react_2.default.createElement(timeline_1.default, null);
             case "/search":
@@ -234,7 +232,6 @@ var Layout = function () {
                 react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/alertdialog"); }, variant: "outline", size: "xs" }, "AlertDialog"),
                 react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/accordion"); }, variant: "outline", size: "xs" }, "Accordion"),
                 react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/searchSelect"); }, variant: "outline", size: "xs" }, "searchSelect"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/selectSearch"); }, variant: "outline", size: "xs" }, "selectSearch"),
                 react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/timeline"); }, variant: "outline", size: "xs" }, "Timeline"),
                 react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/search"); }, variant: "outline", size: "xs" }, "Search"),
                 react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/datepicker"); }, variant: "outline", size: "xs" }, "Datepicker"),

package/dist/Pages/search.js

@@ -39,6 +39,6 @@ var SearchPage = function () {
         setSearchQuery("");
     };
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement(Search_1.default, { onSearch: handleSearch, onclose: handleRemoveSearch, query: searchQuery })));
+        react_1.default.createElement(Search_1.default, { onSearch: handleSearch, onclose: handleRemoveSearch, query: searchQuery, label: "Search", placeholder: "Search...", isRequired: true, error: false, errorMessage: "Error message", helperText: "Helper text", isInformation: true, informationMessage: "Information message", shortcut: "Ctrl+K" })));
 };
 exports.default = SearchPage;