pixelize-design-library 2.3.1-beta.8 → 2.3.2

package/dist/Components/CustomModulesTable/CustomModulesTable.js

@@ -0,0 +1,182 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var Button_1 = __importDefault(require("../Button/Button"));
+var EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
+var EditModuleModal_1 = __importDefault(require("./EditModuleModal"));
+var DeleteModuleModal_1 = __importDefault(require("./DeleteModuleModal"));
+var DEFAULT_LABELS = {
+    title: "Custom Modules",
+    moduleName: "Module Name",
+    moduleOwner: "Module Owner",
+    action: "Action",
+    edit: "Edit",
+    delete: "Delete",
+    noModules: "No custom modules found",
+    loading: "Loading...",
+    editModuleTitle: "Edit Module Name",
+    moduleNamePlaceholder: "Enter module name",
+    cancel: "Cancel",
+    update: "Update",
+    confirmDeletion: "Confirm Deletion",
+    deleteConfirmPrefix: "Are you sure you want to delete",
+};
+var CustomModulesTable = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    var modules = _a.modules, _p = _a.isLoading, isLoading = _p === void 0 ? false : _p, _q = _a.isUpdating, isUpdating = _q === void 0 ? false : _q, _r = _a.isDeleting, isDeleting = _r === void 0 ? false : _r, onUpdateModule = _a.onUpdateModule, onDeleteModule = _a.onDeleteModule, labelOverrides = _a.labels;
+    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    var labels = (0, react_1.useMemo)(function () { return (__assign(__assign({}, DEFAULT_LABELS), labelOverrides)); }, [labelOverrides]);
+    var _s = (0, react_1.useState)(null), editTarget = _s[0], setEditTarget = _s[1];
+    var _t = (0, react_1.useState)(null), deleteTarget = _t[0], setDeleteTarget = _t[1];
+    var border = (_e = (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[200]) !== null && _e !== void 0 ? _e : "#E2E8F0";
+    var surface = (_f = colors === null || colors === void 0 ? void 0 : colors.white) !== null && _f !== void 0 ? _f : "#FFFFFF";
+    var muted = (_h = (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[500]) !== null && _h !== void 0 ? _h : "#64748B";
+    var heading = (_k = (_j = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _j === void 0 ? void 0 : _j[800]) !== null && _k !== void 0 ? _k : "#1E293B";
+    var headBg = (_m = (_l = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _l === void 0 ? void 0 : _l[50]) !== null && _m !== void 0 ? _m : "#F8FAFC";
+    var thStyle = {
+        fontSize: "0.7rem",
+        textTransform: "uppercase",
+        letterSpacing: "0.04em",
+        color: muted,
+        borderColor: border,
+        py: 3,
+    };
+    return (react_1.default.createElement(react_2.Box, { backgroundColor: surface, borderRadius: "xl", border: "1px solid", borderColor: border, boxShadow: "0 1px 2px rgba(16,24,40,0.05)", overflow: "hidden" },
+        react_1.default.createElement(react_2.Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: border, alignItems: "center" },
+            react_1.default.createElement(react_2.Heading, { size: "sm", fontWeight: 600, color: heading }, labels.title)),
+        react_1.default.createElement(react_2.Box, { overflowX: "auto" }, isLoading ? (react_1.default.createElement(react_2.VStack, { spacing: 3, p: 4, align: "stretch" }, Array.from({ length: 4 }).map(function (_, idx) { return (react_1.default.createElement(react_2.Skeleton, { key: idx, height: "18px", borderRadius: "md" })); }))) : modules.length === 0 ? (react_1.default.createElement(EmptyState_1.default, { icon: lucide_react_1.Boxes, title: labels.noModules, size: "sm", minH: "180px" })) : (react_1.default.createElement(react_2.Table, { variant: "simple", size: "sm" },
+            react_1.default.createElement(react_2.Thead, { bg: headBg },
+                react_1.default.createElement(react_2.Tr, null,
+                    react_1.default.createElement(react_2.Th, __assign({}, thStyle), labels.moduleName),
+                    react_1.default.createElement(react_2.Th, __assign({}, thStyle), labels.moduleOwner),
+                    react_1.default.createElement(react_2.Th, __assign({}, thStyle, { textAlign: "right" }), labels.action))),
+            react_1.default.createElement(react_2.Tbody, null, modules.map(function (item) { return (react_1.default.createElement(react_2.Tr, { key: item.module_id, _hover: { bg: headBg }, transition: "background 0.15s ease" },
+                react_1.default.createElement(react_2.Td, { borderColor: border, fontSize: "sm", fontWeight: 500, color: heading, maxW: "220px" },
+                    react_1.default.createElement(react_2.Tooltip, { label: item.moduleName, hasArrow: true, openDelay: 400 },
+                        react_1.default.createElement(react_2.Text, { noOfLines: 1 }, item.moduleName))),
+                react_1.default.createElement(react_2.Td, { borderColor: border, fontSize: "sm", color: muted }, item.ownerLabel || "—"),
+                react_1.default.createElement(react_2.Td, { borderColor: border },
+                    react_1.default.createElement(react_2.HStack, { spacing: 2, justifyContent: "flex-end" },
+                        react_1.default.createElement(Button_1.default, { size: "xs", variant: "outline", colorScheme: "primary", leftIcon: react_1.default.createElement(lucide_react_1.Pencil, { size: 13 }), label: labels.edit, onClick: function () { return setEditTarget(item); } }),
+                        react_1.default.createElement(Button_1.default, { size: "xs", variant: "outline", colorScheme: "red", leftIcon: react_1.default.createElement(lucide_react_1.Trash2, { size: 13 }), label: labels.delete, onClick: function () { return setDeleteTarget(item); } }))))); }))))),
+        react_1.default.createElement(EditModuleModal_1.default, { isOpen: editTarget !== null, onClose: function () { return setEditTarget(null); }, initialName: (_o = editTarget === null || editTarget === void 0 ? void 0 : editTarget.moduleName) !== null && _o !== void 0 ? _o : "", isLoading: isUpdating, onSubmit: function (name) { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!editTarget) return [3 /*break*/, 2];
+                            return [4 /*yield*/, (onUpdateModule === null || onUpdateModule === void 0 ? void 0 : onUpdateModule({
+                                    moduleId: editTarget.module_id,
+                                    moduleName: name,
+                                }))];
+                        case 1:
+                            _a.sent();
+                            _a.label = 2;
+                        case 2:
+                            setEditTarget(null);
+                            return [2 /*return*/];
+                    }
+                });
+            }); }, labels: labels }),
+        react_1.default.createElement(DeleteModuleModal_1.default, { isOpen: deleteTarget !== null, onClose: function () { return setDeleteTarget(null); }, moduleName: deleteTarget === null || deleteTarget === void 0 ? void 0 : deleteTarget.moduleName, isLoading: isDeleting, onConfirm: function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!deleteTarget) return [3 /*break*/, 2];
+                            return [4 /*yield*/, (onDeleteModule === null || onDeleteModule === void 0 ? void 0 : onDeleteModule(deleteTarget.module_id))];
+                        case 1:
+                            _a.sent();
+                            _a.label = 2;
+                        case 2:
+                            setDeleteTarget(null);
+                            return [2 /*return*/];
+                    }
+                });
+            }); }, labels: labels })));
+};
+exports.default = CustomModulesTable;

package/dist/Components/CustomModulesTable/CustomModulesTable.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/Components/CustomModulesTable/CustomModulesTable.test.js

@@ -0,0 +1,84 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var react_3 = require("@chakra-ui/react");
+var CustomModulesTable_1 = __importDefault(require("./CustomModulesTable"));
+jest.mock("../../Theme/useCustomTheme", function () { return ({
+    useCustomTheme: function () { return ({
+        colors: {
+            white: "#ffffff",
+            gray: {
+                50: "#f8fafc",
+                100: "#f0f0f0",
+                200: "#e2e8f0",
+                500: "#64748b",
+                600: "#475569",
+                800: "#1e293b",
+            },
+            primary: { 50: "#eef2ff", 500: "#6366f1", 600: "#4f46e5" },
+            boxborder: { 200: "#e2e8f0" },
+            red: { 50: "#fef2f2", 500: "#ef4444" },
+            semantic: { error: { 50: "#fef2f2", 500: "#ef4444" } },
+        },
+    }); },
+}); });
+beforeAll(function () {
+    Object.defineProperty(window, "matchMedia", {
+        writable: true,
+        configurable: true,
+        value: jest.fn().mockImplementation(function (query) { return ({
+            matches: false,
+            media: query,
+            onchange: null,
+            addListener: jest.fn(),
+            removeListener: jest.fn(),
+            addEventListener: jest.fn(),
+            removeEventListener: jest.fn(),
+            dispatchEvent: jest.fn(),
+        }); }),
+    });
+});
+var modules = [
+    { module_id: 1, moduleName: "Projects", ownerLabel: "Aisha Khan" },
+    { module_id: 2, moduleName: "Invoices", ownerLabel: "Marcus Reed" },
+];
+var renderWithChakra = function (ui) {
+    return (0, react_2.render)(react_1.default.createElement(react_3.ChakraProvider, null, ui));
+};
+describe("CustomModulesTable", function () {
+    it("renders the module rows", function () {
+        renderWithChakra(react_1.default.createElement(CustomModulesTable_1.default, { modules: modules }));
+        expect(react_2.screen.getByText("Custom Modules")).toBeInTheDocument();
+        expect(react_2.screen.getByText("Projects")).toBeInTheDocument();
+        expect(react_2.screen.getByText("Invoices")).toBeInTheDocument();
+    });
+    it("shows an empty state when there are no modules", function () {
+        renderWithChakra(react_1.default.createElement(CustomModulesTable_1.default, { modules: [] }));
+        expect(react_2.screen.getByText("No custom modules found")).toBeInTheDocument();
+    });
+    it("opens the edit modal and submits the new name", function () {
+        var onUpdateModule = jest.fn();
+        renderWithChakra(react_1.default.createElement(CustomModulesTable_1.default, { modules: modules, onUpdateModule: onUpdateModule }));
+        react_2.fireEvent.click(react_2.screen.getAllByText("Edit")[0]);
+        expect(react_2.screen.getByText("Edit Module Name")).toBeInTheDocument();
+        react_2.fireEvent.click(react_2.screen.getByText("Update"));
+        expect(onUpdateModule).toHaveBeenCalledWith({
+            moduleId: 1,
+            moduleName: "Projects",
+        });
+    });
+    it("opens the delete modal and confirms", function () {
+        var onDeleteModule = jest.fn();
+        renderWithChakra(react_1.default.createElement(CustomModulesTable_1.default, { modules: modules, onDeleteModule: onDeleteModule }));
+        react_2.fireEvent.click(react_2.screen.getAllByText("Delete")[0]);
+        expect(react_2.screen.getByText("Confirm Deletion")).toBeInTheDocument();
+        var dialog = react_2.screen.getByRole("dialog");
+        react_2.fireEvent.click((0, react_2.within)(dialog).getByText("Delete"));
+        expect(onDeleteModule).toHaveBeenCalledWith(1);
+    });
+});

package/dist/Components/CustomModulesTable/CustomModulesTableProps.d.ts

@@ -0,0 +1,54 @@
+export type ModuleItem = {
+    module_id: number;
+    moduleName: string;
+    ownerLabel?: string;
+};
+export type UpdateModulePayload = {
+    moduleId: number;
+    moduleName: string;
+};
+/**
+ * All user-facing strings. Provide translated values from the host app; every
+ * key has a sensible English default so the component works standalone.
+ */
+export type CustomModulesTableLabels = {
+    title?: string;
+    moduleName?: string;
+    moduleOwner?: string;
+    action?: string;
+    edit?: string;
+    delete?: string;
+    noModules?: string;
+    loading?: string;
+    editModuleTitle?: string;
+    moduleNamePlaceholder?: string;
+    cancel?: string;
+    update?: string;
+    confirmDeletion?: string;
+    deleteConfirmPrefix?: string;
+};
+export interface CustomModulesTableProps {
+    modules: ModuleItem[];
+    isLoading?: boolean;
+    isUpdating?: boolean;
+    isDeleting?: boolean;
+    onUpdateModule?: (payload: UpdateModulePayload) => void | Promise<void>;
+    onDeleteModule?: (moduleId: number) => void | Promise<void>;
+    labels?: CustomModulesTableLabels;
+}
+export interface EditModuleModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    initialName: string;
+    isLoading?: boolean;
+    onSubmit: (name: string) => void | Promise<void>;
+    labels: Required<Pick<CustomModulesTableLabels, "editModuleTitle" | "moduleNamePlaceholder" | "cancel" | "update">>;
+}
+export interface DeleteModuleModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    moduleName?: string;
+    isLoading?: boolean;
+    onConfirm: () => void;
+    labels: Required<Pick<CustomModulesTableLabels, "confirmDeletion" | "deleteConfirmPrefix" | "cancel" | "delete">>;
+}

package/dist/Components/CustomModulesTable/CustomModulesTableProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/CustomModulesTable/DeleteModuleModal.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { DeleteModuleModalProps } from "./CustomModulesTableProps";
+declare const DeleteModuleModal: React.FC<DeleteModuleModalProps>;
+export default DeleteModuleModal;

package/dist/Components/CustomModulesTable/DeleteModuleModal.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var Button_1 = __importDefault(require("../Button/Button"));
+var DeleteModuleModal = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    var isOpen = _a.isOpen, onClose = _a.onClose, moduleName = _a.moduleName, isLoading = _a.isLoading, onConfirm = _a.onConfirm, labels = _a.labels;
+    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    return (react_1.default.createElement(react_2.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true },
+        react_1.default.createElement(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }),
+        react_1.default.createElement(react_2.ModalContent, { borderRadius: "2xl", overflow: "hidden" },
+            react_1.default.createElement(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[200], display: "flex", alignItems: "center", gap: 3 },
+                react_1.default.createElement(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: (_j = (_g = (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.semantic) === null || _e === void 0 ? void 0 : _e.error) === null || _f === void 0 ? void 0 : _f[50]) !== null && _g !== void 0 ? _g : (_h = colors === null || colors === void 0 ? void 0 : colors.red) === null || _h === void 0 ? void 0 : _h[50]) !== null && _j !== void 0 ? _j : "#FEF2F2", color: (_p = (_m = (_l = (_k = colors === null || colors === void 0 ? void 0 : colors.semantic) === null || _k === void 0 ? void 0 : _k.error) === null || _l === void 0 ? void 0 : _l[500]) !== null && _m !== void 0 ? _m : (_o = colors === null || colors === void 0 ? void 0 : colors.red) === null || _o === void 0 ? void 0 : _o[500]) !== null && _p !== void 0 ? _p : "#EF4444" },
+                    react_1.default.createElement(lucide_react_1.AlertTriangle, { size: 18 })),
+                react_1.default.createElement(react_2.Text, { fontSize: "1.05rem", fontWeight: 600 }, labels.confirmDeletion)),
+            react_1.default.createElement(react_2.ModalCloseButton, null),
+            react_1.default.createElement(react_2.ModalBody, { py: 6 },
+                react_1.default.createElement(react_2.Text, { color: (_q = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _q === void 0 ? void 0 : _q[600], fontSize: "sm", mb: 5 },
+                    labels.deleteConfirmPrefix,
+                    " ",
+                    react_1.default.createElement(react_2.Text, { as: "span", fontWeight: 600, color: (_r = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _r === void 0 ? void 0 : _r[800] }, moduleName),
+                    "?"),
+                react_1.default.createElement(react_2.HStack, { justifyContent: "flex-end", spacing: 3 },
+                    react_1.default.createElement(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }),
+                    react_1.default.createElement(Button_1.default, { label: labels.delete, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: react_1.default.createElement(lucide_react_1.Trash2, { size: 15 }) }))))));
+};
+exports.default = DeleteModuleModal;

package/dist/Components/CustomModulesTable/EditModuleModal.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { EditModuleModalProps } from "./CustomModulesTableProps";
+declare const EditModuleModal: React.FC<EditModuleModalProps>;
+export default EditModuleModal;

package/dist/Components/CustomModulesTable/EditModuleModal.js

@@ -0,0 +1,63 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var Button_1 = __importDefault(require("../Button/Button"));
+var EditModuleModal = function (_a) {
+    var _b, _c, _d, _e, _f, _g;
+    var isOpen = _a.isOpen, onClose = _a.onClose, initialName = _a.initialName, isLoading = _a.isLoading, onSubmit = _a.onSubmit, labels = _a.labels;
+    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    var _h = (0, react_1.useState)(initialName), name = _h[0], setName = _h[1];
+    (0, react_1.useEffect)(function () {
+        if (isOpen)
+            setName(initialName);
+    }, [isOpen, initialName]);
+    return (react_1.default.createElement(react_2.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true },
+        react_1.default.createElement(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }),
+        react_1.default.createElement(react_2.ModalContent, { borderRadius: "2xl", overflow: "hidden" },
+            react_1.default.createElement(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[200], fontSize: "1.05rem", fontWeight: 600 }, labels.editModuleTitle),
+            react_1.default.createElement(react_2.ModalCloseButton, null),
+            react_1.default.createElement(react_2.ModalBody, { py: 6 },
+                react_1.default.createElement(react_2.Input, { value: name, onChange: function (e) { return setName(e.target.value); }, placeholder: labels.moduleNamePlaceholder, borderColor: (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _e === void 0 ? void 0 : _e[200]) !== null && _f !== void 0 ? _f : (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[200], mb: 5 }),
+                react_1.default.createElement(react_2.HStack, { justifyContent: "flex-end", spacing: 3 },
+                    react_1.default.createElement(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }),
+                    react_1.default.createElement(Button_1.default, { label: labels.update, onClick: function () { return onSubmit(name.trim()); }, colorScheme: "primary", size: "sm", isLoading: isLoading, isDisabled: !name.trim() }))))));
+};
+exports.default = EditModuleModal;

package/dist/Components/Dropdown/DropDown.js

@@ -50,58 +50,140 @@ var framer_motion_1 = require("framer-motion");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var lucide_react_1 = require("lucide-react");
 var MotionBox = (0, framer_motion_1.motion)((0, react_1.forwardRef)(function (props, ref) { return (react_1.default.createElement(react_2.Box, __assign({ ref: ref }, props))); }));
+// Size scale (mirrors the Button sizes). `btn` is the Chakra Button size.
+var SIZE_MAP = {
+    xs: { btn: "xs", fontSize: "0.75rem", py: 1, px: 2.5, img: "1rem", chevron: 13, minW: "8rem", gap: 1.5 },
+    sm: { btn: "sm", fontSize: "0.8125rem", py: 1.5, px: 3, img: "1.05rem", chevron: 14, minW: "9rem", gap: 2 },
+    md: { btn: "md", fontSize: "0.875rem", py: 2, px: 3, img: "1.15rem", chevron: 16, minW: "11rem", gap: 2 },
+    lg: { btn: "lg", fontSize: "0.9375rem", py: 2.5, px: 3.5, img: "1.25rem", chevron: 18, minW: "12rem", gap: 2.5 },
+    xl: { btn: "lg", fontSize: "1.0625rem", py: 3, px: 4, img: "1.4rem", chevron: 20, minW: "13rem", gap: 3 },
+};
 var Dropdown = (0, react_1.forwardRef)(function (_a, ref) {
-    var dropDownButtonStyle = _a.dropDownButtonStyle, ButtonText = _a.ButtonText, options = _a.options, handleOptionSelect = _a.handleOptionSelect, _b = _a.dropdownType, dropdownType = _b === void 0 ? "button" : _b, text = _a.text, DropdownIcon = _a.DropdownIcon, _c = _a.isVisibleIconShow, isVisibleIconShow = _c === void 0 ? true : _c, buttonProps = _a.buttonProps, headStyle = _a.headStyle, ListStyle = _a.ListStyle, ItemStyle = _a.ItemStyle, LabelStyle = _a.LabelStyle, ImageStyle = _a.ImageStyle, _d = _a.optionsSize, optionsSize = _d === void 0 ? "lg" : _d, _e = _a.divider, divider = _e === void 0 ? false : _e;
+    var _b, _c;
+    var dropDownButtonStyle = _a.dropDownButtonStyle, ButtonText = _a.ButtonText, options = _a.options, handleOptionSelect = _a.handleOptionSelect, _d = _a.dropdownType, dropdownType = _d === void 0 ? "button" : _d, text = _a.text, DropdownIcon = _a.DropdownIcon, _e = _a.isVisibleIconShow, isVisibleIconShow = _e === void 0 ? true : _e, buttonProps = _a.buttonProps, headStyle = _a.headStyle, ListStyle = _a.ListStyle, ItemStyle = _a.ItemStyle, LabelStyle = _a.LabelStyle, ImageStyle = _a.ImageStyle, size = _a.size, optionsSize = _a.optionsSize, _f = _a.divider, divider = _f === void 0 ? false : _f;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _f = (0, react_2.useDisclosure)(), isOpen = _f.isOpen, onToggle = _f.onToggle, onClose = _f.onClose;
+    var _g = (0, react_2.useDisclosure)(), isOpen = _g.isOpen, onToggle = _g.onToggle, onClose = _g.onClose;
     var dropdownRef = (0, react_1.useRef)(null);
+    var menuRef = (0, react_1.useRef)(null);
+    var _h = (0, react_1.useState)({ top: 0, left: 0, width: 0 }), menuPos = _h[0], setMenuPos = _h[1];
+    var s = (_c = SIZE_MAP[(_b = size !== null && size !== void 0 ? size : optionsSize) !== null && _b !== void 0 ? _b : "md"]) !== null && _c !== void 0 ? _c : SIZE_MAP.md;
     var handleListItemClick = function (optionId, optionLabel) {
         onClose();
         handleOptionSelect(optionId, optionLabel);
     };
+    // The menu is portaled to <body> (so it sits above everything). Anchor it to
+    // the trigger, then clamp to the viewport so it never overflows off-screen
+    // (e.g. when the trigger sits near the right or bottom edge).
+    var updateMenuPos = (0, react_1.useCallback)(function () {
+        var _a, _b;
+        if (!dropdownRef.current)
+            return;
+        var r = dropdownRef.current.getBoundingClientRect();
+        var gutter = 8;
+        var vw = window.innerWidth;
+        var vh = window.innerHeight;
+        // Use the rendered menu size when available; fall back to trigger width.
+        var menuW = ((_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || r.width;
+        var menuH = ((_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0;
+        // Horizontal: prefer left-aligned to trigger; if it overflows the right
+        // edge, right-align to the trigger, then clamp within [gutter, vw-gutter].
+        var left = r.left;
+        if (left + menuW > vw - gutter)
+            left = r.right - menuW;
+        left = Math.min(Math.max(left, gutter), Math.max(gutter, vw - menuW - gutter));
+        // Vertical: prefer below the trigger; flip above when it would overflow the
+        // bottom and there is more room above. Clamp within the viewport.
+        var top = r.bottom;
+        var spaceBelow = vh - r.bottom;
+        var spaceAbove = r.top;
+        if (menuH && top + menuH > vh - gutter && spaceAbove > spaceBelow) {
+            top = r.top - menuH;
+        }
+        top = Math.min(Math.max(top, gutter), Math.max(gutter, vh - menuH - gutter));
+        setMenuPos({ top: top, left: left, width: r.width });
+    }, []);
+    (0, react_1.useEffect)(function () {
+        if (!isOpen)
+            return;
+        updateMenuPos();
+        window.addEventListener("scroll", updateMenuPos, true);
+        window.addEventListener("resize", updateMenuPos);
+        return function () {
+            window.removeEventListener("scroll", updateMenuPos, true);
+            window.removeEventListener("resize", updateMenuPos);
+        };
+    }, [isOpen, updateMenuPos]);
     (0, react_1.useEffect)(function () {
         var handleClickOutside = function (event) {
-            if (dropdownRef.current &&
-                !dropdownRef.current.contains(event.target)) {
-                onClose();
-            }
+            var _a, _b;
+            var target = event.target;
+            // Ignore clicks on the trigger or inside the (portaled) menu.
+            if ((_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(target))
+                return;
+            if ((_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.contains(target))
+                return;
+            onClose();
         };
         document.addEventListener("mousedown", handleClickOutside);
         return function () {
             document.removeEventListener("mousedown", handleClickOutside);
         };
-    }, [dropdownRef, onClose]);
+    }, [onClose]);
+    var setMenuRef = function (node) {
+        menuRef.current = node;
+        if (typeof ref === "function")
+            ref(node);
+        else if (ref)
+            ref.current = node;
+        // Recompute once the menu has mounted so clamping uses its real size.
+        if (node)
+            updateMenuPos();
+    };
+    var Chevron = isVisibleIconShow ? (react_1.default.createElement(react_2.Box, { as: "span", display: "inline-flex", transition: "transform 0.2s ease", transform: isOpen ? "rotate(180deg)" : "rotate(0deg)" },
+        react_1.default.createElement(lucide_react_1.ChevronDown, { size: s.chevron }))) : undefined;
     var dropDownToggleOption = function () {
-        var ButtonToggle = (react_1.default.createElement(react_2.Button, __assign({ onClick: onToggle, style: __assign({ backgroundColor: theme.colors.primary[500] }, dropDownButtonStyle), rightIcon: isVisibleIconShow ? (react_1.default.createElement(react_2.Icon, { as: lucide_react_1.ChevronDown, transform: isOpen ? "rotate(180deg)" : "rotate(0deg)" })) : undefined }, buttonProps),
-            DropdownIcon,
-            " \u00A0 ",
-            ButtonText));
-        var TextToggle = (react_1.default.createElement(react_2.Flex, { onClick: onToggle, align: "center", style: dropDownButtonStyle, cursor: "pointer" },
+        var _a, _b, _c, _d;
+        var ButtonToggle = (react_1.default.createElement(react_2.Button, __assign({ onClick: onToggle, size: s.btn, colorScheme: "primary", borderRadius: "0.5rem", fontWeight: 600, "aria-haspopup": "menu", "aria-expanded": isOpen, rightIcon: Chevron, sx: __assign({ transition: "all 0.15s ease" }, dropDownButtonStyle) }, buttonProps),
+            react_1.default.createElement(react_2.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: DropdownIcon && ButtonText ? s.gap : 0 },
+                DropdownIcon,
+                ButtonText)));
+        var TextToggle = (react_1.default.createElement(react_2.Flex, { onClick: onToggle, align: "center", gap: 1.5, cursor: "pointer", fontSize: s.fontSize, fontWeight: 500, color: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b[700], transition: "color 0.15s ease", _hover: { color: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.primary) === null || _d === void 0 ? void 0 : _d[600] }, style: dropDownButtonStyle, role: "button", "aria-haspopup": "menu", "aria-expanded": isOpen },
             DropdownIcon,
-            " ",
             text,
-            isVisibleIconShow && react_1.default.createElement(react_2.Icon, { as: lucide_react_1.ChevronDown })));
+            Chevron));
         return dropdownType === "button" ? ButtonToggle : TextToggle;
     };
     var DropdownContentRender = function () {
-        var _a, _b, _c;
-        return (react_1.default.createElement(react_2.List, { bg: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.light, border: "1px solid ".concat((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[300]), borderRadius: theme.radii.md, shadow: theme.shadows.lg, py: 2, mt: "0.2rem", minWidth: "200px", style: ListStyle }, options.map(function (option) {
-            var _a;
-            return (react_1.default.createElement(react_2.ListItem, { key: option.id, onClick: function () { return handleListItemClick(option.id, option.label); }, p: optionsSize === "sm" ? 1 : 2, px: 2, _hover: {
-                    bg: theme.colors.gray[100],
-                    color: theme.colors.primary[500],
-                }, display: "flex", alignItems: "center", cursor: "pointer", style: ItemStyle, borderBottom: divider ? "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[300]) : undefined, sx: {
-                    "&:last-child": {
-                        borderBottom: "none",
-                    },
-                } },
-                (option === null || option === void 0 ? void 0 : option.image) && (react_1.default.createElement(react_2.Icon, { as: option.image, boxSize: optionsSize === "sm" ? "1.1rem" : "1.5rem", mr: 2, style: ImageStyle })),
-                react_1.default.createElement(react_2.Box, { as: "span", fontSize: optionsSize === "sm" ? "14px" : "16px", isTruncated: true, style: LabelStyle }, option.label)));
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        return (react_1.default.createElement(react_2.List, { bg: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.white) !== null && _b !== void 0 ? _b : "#fff", border: "0.063rem solid ".concat((_e = (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.boxborder) === null || _d === void 0 ? void 0 : _d[200]) !== null && _e !== void 0 ? _e : (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.gray[200]), borderRadius: "0.625rem", boxShadow: (_g = theme.shadows) === null || _g === void 0 ? void 0 : _g.lg, py: 1.5, mt: "0.375rem", minWidth: s.minW, maxH: "18rem", overflowY: "auto", overflowX: "hidden", sx: {
+                scrollbarWidth: "thin",
+                scrollbarColor: "".concat((_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.gray) === null || _j === void 0 ? void 0 : _j[300], " transparent"),
+                "&::-webkit-scrollbar": { width: "6px" },
+                "&::-webkit-scrollbar-thumb": {
+                    background: (_l = (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.gray) === null || _l === void 0 ? void 0 : _l[300],
+                    borderRadius: "3px",
+                },
+                "&::-webkit-scrollbar-thumb:hover": {
+                    background: (_o = (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.gray) === null || _o === void 0 ? void 0 : _o[400],
+                },
+            }, style: ListStyle }, options.map(function (option) {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+            return (react_1.default.createElement(react_2.ListItem, { key: option.id, onClick: function () { return handleListItemClick(option.id, option.label); }, mx: 1.5, px: s.px, py: s.py, borderRadius: "0.375rem", display: "flex", alignItems: "center", gap: 2, cursor: "pointer", color: (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b[700]) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray) === null || _e === void 0 ? void 0 : _e[700], transition: "background 0.12s ease, color 0.12s ease", _hover: {
+                    bg: (_j = (_h = (_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.primary) === null || _g === void 0 ? void 0 : _g.opacity) === null || _h === void 0 ? void 0 : _h[8]) !== null && _j !== void 0 ? _j : (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.gray[100],
+                    color: (_o = (_m = (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.primary) === null || _m === void 0 ? void 0 : _m[700]) !== null && _o !== void 0 ? _o : (_q = (_p = theme.colors) === null || _p === void 0 ? void 0 : _p.primary) === null || _q === void 0 ? void 0 : _q[600],
+                }, borderBottom: divider
+                    ? "0.063rem solid ".concat((_t = (_s = (_r = theme.colors) === null || _r === void 0 ? void 0 : _r.boxborder) === null || _s === void 0 ? void 0 : _s[100]) !== null && _t !== void 0 ? _t : (_u = theme.colors) === null || _u === void 0 ? void 0 : _u.gray[200])
+                    : undefined, sx: { "&:last-child": { borderBottom: "none" } }, style: ItemStyle, fontWeight: 500 },
+                (option === null || option === void 0 ? void 0 : option.image) && (react_1.default.createElement(react_2.Box, { as: option.image, boxSize: s.img, flexShrink: 0, color: (_w = (_v = theme.colors) === null || _v === void 0 ? void 0 : _v.gray) === null || _w === void 0 ? void 0 : _w[500], style: ImageStyle })),
+                react_1.default.createElement(react_2.Box, { as: "span", fontSize: s.fontSize, isTruncated: true, 
+                    // fontWeight={400}
+                    style: LabelStyle }, option.label)));
         })));
     };
     return (react_1.default.createElement(react_2.Box, { ref: dropdownRef, position: "relative", display: "inline-block" },
         dropDownToggleOption(),
-        isOpen && (react_1.default.createElement(MotionBox, { ref: ref, position: "absolute", zIndex: 5, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, style: headStyle }, DropdownContentRender()))));
+        isOpen && (react_1.default.createElement(react_2.Portal, null,
+            react_1.default.createElement(MotionBox, { ref: setMenuRef, position: "fixed", top: "".concat(menuPos.top, "px"), left: "".concat(menuPos.left, "px"), minW: "".concat(menuPos.width, "px"), zIndex: 1500, initial: { opacity: 0, y: -6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, style: headStyle }, DropdownContentRender())))));
 });
 Dropdown.displayName = "Dropdown";
 exports.default = Dropdown;

package/dist/Components/Dropdown/Dropdown.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";