pixelize-design-library 2.3.1-beta.9 → 2.3.3

package/dist/Components/SearchSelect/SearchSelect.dropdownPosition.test.js

@@ -0,0 +1,195 @@
+"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 __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 = __importDefault(require("react"));
+var react_2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var react_3 = require("@chakra-ui/react");
+var SearchSelect_1 = __importDefault(require("./SearchSelect"));
+jest.mock("../../Theme/useCustomTheme", function () { return ({
+    useCustomTheme: function () { return ({
+        colors: {
+            white: "#ffffff",
+            black: "#000000",
+            gray: {
+                50: "#f9fafb",
+                100: "#f3f4f6",
+                200: "#e5e7eb",
+                300: "#d1d5db",
+                500: "#6b7280",
+                600: "#4b5563",
+                800: "#1f2937",
+            },
+            primary: {
+                500: "#6366f1",
+                600: "#4f46e5",
+                700: "#4338ca",
+                opacity: { 8: "rgba(99,102,241,0.08)" },
+            },
+            placeholder: { 500: "#9ca3af" },
+            semantic: { error: { 500: "#ef4444" } },
+            boxborder: { 200: "#e5e7eb", 500: "#d1d5db" },
+            background: { 50: "#ffffff" },
+            text: { 700: "#374151" },
+            boxShadow: { primary: "rgba(99,102,241,0.2)", error: "rgba(239,68,68,0.2)" },
+        },
+        shadows: { md: "0 4px 6px rgba(0,0,0,0.1)" },
+    }); },
+}); });
+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(),
+        }); }),
+    });
+    Object.defineProperty(window, "innerWidth", { writable: true, configurable: true, value: 1000 });
+    Object.defineProperty(window, "innerHeight", { writable: true, configurable: true, value: 800 });
+});
+var options = [
+    { id: "1", label: "User One" },
+    { id: "2", label: "User Two" },
+];
+var renderWithChakra = function (ui) {
+    return (0, react_2.render)(react_1.default.createElement(react_3.ChakraProvider, null, ui));
+};
+var openMainDropdown = function () {
+    react_2.fireEvent.focus(react_2.screen.getByPlaceholderText("Select"));
+};
+var mockControlRect = function (rect) {
+    var control = react_2.screen.getByPlaceholderText("Select").parentElement;
+    jest.spyOn(control, "getBoundingClientRect").mockReturnValue(__assign({ top: 100, bottom: 140, left: 100, right: 400, width: 300, height: 40, x: 100, y: 100, toJSON: function () { return ({}); } }, rect));
+};
+var setPortalDimensions = function (height, width) {
+    if (width === void 0) { width = 300; }
+    var portal = document.getElementById("searchselect-dropdown-portal");
+    expect(portal).toBeTruthy();
+    Object.defineProperty(portal, "offsetHeight", { configurable: true, value: height });
+    Object.defineProperty(portal, "offsetWidth", { configurable: true, value: width });
+    react_2.fireEvent.scroll(window);
+};
+describe("SearchSelect dropdown positioning", function () {
+    afterEach(function () {
+        jest.restoreAllMocks();
+    });
+    it("anchors the options menu with position fixed below the control by default", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var portal;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    renderWithChakra(react_1.default.createElement(SearchSelect_1.default, { options: options, onSelect: jest.fn() }));
+                    mockControlRect({ top: 100, bottom: 140, left: 100, right: 400, width: 300 });
+                    openMainDropdown();
+                    return [4 /*yield*/, (0, react_2.waitFor)(function () {
+                            expect(document.getElementById("searchselect-dropdown-portal")).toBeInTheDocument();
+                        })];
+                case 1:
+                    _a.sent();
+                    portal = document.getElementById("searchselect-dropdown-portal");
+                    expect(portal).toHaveStyle({ position: "fixed" });
+                    setPortalDimensions(120);
+                    expect(getComputedStyle(portal).top).toBe("140px");
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("flips the menu above the control when there is more space above than below", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var portal;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    renderWithChakra(react_1.default.createElement(SearchSelect_1.default, { options: options, onSelect: jest.fn() }));
+                    mockControlRect({ top: 700, bottom: 740, left: 100, right: 400, width: 300 });
+                    openMainDropdown();
+                    return [4 /*yield*/, (0, react_2.waitFor)(function () {
+                            expect(document.getElementById("searchselect-dropdown-portal")).toBeInTheDocument();
+                        })];
+                case 1:
+                    _a.sent();
+                    portal = document.getElementById("searchselect-dropdown-portal");
+                    setPortalDimensions(200);
+                    expect(getComputedStyle(portal).top).toBe("500px");
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("clamps the menu horizontally when the control is near the right edge", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var portal, left;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    renderWithChakra(react_1.default.createElement(SearchSelect_1.default, { options: options, onSelect: jest.fn() }));
+                    mockControlRect({ top: 100, bottom: 140, left: 960, right: 1000, width: 40 });
+                    openMainDropdown();
+                    return [4 /*yield*/, (0, react_2.waitFor)(function () {
+                            expect(document.getElementById("searchselect-dropdown-portal")).toBeInTheDocument();
+                        })];
+                case 1:
+                    _a.sent();
+                    portal = document.getElementById("searchselect-dropdown-portal");
+                    setPortalDimensions(120, 300);
+                    left = parseFloat(getComputedStyle(portal).left);
+                    expect(left).toBeLessThan(960);
+                    expect(left).toBeGreaterThanOrEqual(8);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});

package/dist/Components/SearchSelect/SearchSelect.insideSelect.test.d.ts

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

package/dist/Components/SearchSelect/SearchSelect.insideSelect.test.js

@@ -0,0 +1,274 @@
+"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 __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 = __importDefault(require("react"));
+var react_2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var react_3 = require("@chakra-ui/react");
+var SearchSelect_1 = __importDefault(require("./SearchSelect"));
+jest.mock("../../Theme/useCustomTheme", function () { return ({
+    useCustomTheme: function () { return ({
+        colors: {
+            white: "#ffffff",
+            black: "#000000",
+            gray: {
+                50: "#f9fafb",
+                100: "#f3f4f6",
+                200: "#e5e7eb",
+                300: "#d1d5db",
+                500: "#6b7280",
+                600: "#4b5563",
+                800: "#1f2937",
+            },
+            primary: {
+                500: "#6366f1",
+                600: "#4f46e5",
+                700: "#4338ca",
+                opacity: { 8: "rgba(99,102,241,0.08)" },
+            },
+            placeholder: { 500: "#9ca3af" },
+            semantic: { error: { 500: "#ef4444" } },
+            boxborder: { 200: "#e5e7eb", 500: "#d1d5db" },
+            background: { 50: "#ffffff" },
+            text: { 700: "#374151" },
+            boxShadow: { primary: "rgba(99,102,241,0.2)", error: "rgba(239,68,68,0.2)" },
+        },
+        shadows: { md: "0 4px 6px rgba(0,0,0,0.1)" },
+    }); },
+}); });
+beforeAll(function () {
+    Object.defineProperty(window, "innerWidth", { writable: true, configurable: true, value: 1000 });
+    Object.defineProperty(window, "innerHeight", { writable: true, configurable: true, value: 800 });
+    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 options = [
+    { id: "1", label: "User One" },
+    { id: "2", label: "User Two" },
+];
+var renderWithChakra = function (ui) {
+    return (0, react_2.render)(react_1.default.createElement(react_3.ChakraProvider, null, ui));
+};
+var clickInsideTrigger = function () {
+    var _a;
+    var input = react_2.screen.getByPlaceholderText("Select");
+    var prefix = (_a = input.parentElement) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+    expect(prefix).toBeTruthy();
+    react_2.fireEvent.click(prefix);
+};
+var mockInsideTriggerRect = function (rect) {
+    var _a;
+    var input = react_2.screen.getByPlaceholderText("Select");
+    var prefix = (_a = input.parentElement) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+    jest.spyOn(prefix, "getBoundingClientRect").mockReturnValue(__assign({ top: 100, bottom: 140, left: 100, right: 180, width: 80, height: 40, x: 100, y: 100, toJSON: function () { return ({}); } }, rect));
+};
+var setInsidePortalDimensions = function (height, width) {
+    if (width === void 0) { width = 128; }
+    var portal = document.getElementById("custom-select-portal");
+    expect(portal).toBeTruthy();
+    Object.defineProperty(portal, "offsetHeight", { configurable: true, value: height });
+    Object.defineProperty(portal, "offsetWidth", { configurable: true, value: width });
+    react_2.fireEvent.scroll(window);
+};
+describe("SearchSelect insideSelect", function () {
+    afterEach(function () {
+        jest.restoreAllMocks();
+    });
+    it("opens only the insideSelect dropdown when its trigger is clicked", function () {
+        renderWithChakra(react_1.default.createElement(SearchSelect_1.default, { label: "Users", options: options, isMultiple: true, insideSelect: {
+                width: "80px",
+                option: [
+                    { id: 1, label: "Option 1" },
+                    { id: 2, label: "Option 2" },
+                ],
+                onSelect: jest.fn(),
+            } }));
+        clickInsideTrigger();
+        expect(document.getElementById("custom-select-portal")).toBeInTheDocument();
+        expect(document.getElementById("searchselect-dropdown-portal")).not.toBeInTheDocument();
+    });
+    it("shows insideSelect placeholder when no value is selected", function () {
+        renderWithChakra(react_1.default.createElement(SearchSelect_1.default, { options: options, isMultiple: true, insideSelect: {
+                width: "80px",
+                placeholder: "Filter type",
+                option: [{ id: 1, label: "Option 1" }],
+                onSelect: jest.fn(),
+            } }));
+        expect(react_2.screen.getByText("Filter type")).toBeInTheDocument();
+    });
+    it("anchors insideSelect portal with position fixed", function () {
+        renderWithChakra(react_1.default.createElement(SearchSelect_1.default, { options: options, isMultiple: true, insideSelect: {
+                width: "80px",
+                option: [{ id: 1, label: "Option 1" }],
+                onSelect: jest.fn(),
+            } }));
+        clickInsideTrigger();
+        var portal = document.getElementById("custom-select-portal");
+        expect(portal).toHaveStyle({ position: "fixed" });
+    });
+    it("opens insideSelect below the trigger by default", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var portal;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    renderWithChakra(react_1.default.createElement(SearchSelect_1.default, { options: options, isMultiple: true, insideSelect: {
+                            width: "80px",
+                            option: [{ id: 1, label: "Option 1" }],
+                            onSelect: jest.fn(),
+                        } }));
+                    mockInsideTriggerRect({ top: 100, bottom: 140, left: 100, right: 180, width: 80 });
+                    clickInsideTrigger();
+                    return [4 /*yield*/, (0, react_2.waitFor)(function () {
+                            expect(document.getElementById("custom-select-portal")).toBeInTheDocument();
+                        })];
+                case 1:
+                    _a.sent();
+                    portal = document.getElementById("custom-select-portal");
+                    setInsidePortalDimensions(80);
+                    expect(getComputedStyle(portal).top).toBe("140px");
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("flips insideSelect above the trigger when near the bottom of the viewport", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var portal;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    renderWithChakra(react_1.default.createElement(SearchSelect_1.default, { options: options, isMultiple: true, insideSelect: {
+                            width: "80px",
+                            option: [
+                                { id: 1, label: "Option 1" },
+                                { id: 2, label: "Option 2" },
+                            ],
+                            onSelect: jest.fn(),
+                        } }));
+                    mockInsideTriggerRect({ top: 700, bottom: 740, left: 100, right: 180, width: 80 });
+                    clickInsideTrigger();
+                    return [4 /*yield*/, (0, react_2.waitFor)(function () {
+                            expect(document.getElementById("custom-select-portal")).toBeInTheDocument();
+                        })];
+                case 1:
+                    _a.sent();
+                    portal = document.getElementById("custom-select-portal");
+                    setInsidePortalDimensions(120);
+                    expect(getComputedStyle(portal).top).toBe("580px");
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("repositions insideSelect portal on scroll while open", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var input, prefix, rectSpy;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    renderWithChakra(react_1.default.createElement(SearchSelect_1.default, { options: options, isMultiple: true, insideSelect: {
+                            width: "80px",
+                            option: [{ id: 1, label: "Option 1" }],
+                            onSelect: jest.fn(),
+                        } }));
+                    input = react_2.screen.getByPlaceholderText("Select");
+                    prefix = (_a = input.parentElement) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+                    rectSpy = jest.spyOn(prefix, "getBoundingClientRect").mockReturnValue({
+                        top: 20,
+                        bottom: 60,
+                        left: 10,
+                        right: 90,
+                        width: 80,
+                        height: 40,
+                        x: 10,
+                        y: 20,
+                        toJSON: function () { return ({}); },
+                    });
+                    clickInsideTrigger();
+                    return [4 /*yield*/, (0, react_2.waitFor)(function () {
+                            var portal = document.getElementById("custom-select-portal");
+                            expect(getComputedStyle(portal).top).toBe("60px");
+                        })];
+                case 1:
+                    _b.sent();
+                    rectSpy.mockReturnValue({
+                        top: 120,
+                        bottom: 160,
+                        left: 40,
+                        right: 120,
+                        width: 80,
+                        height: 40,
+                        x: 40,
+                        y: 120,
+                        toJSON: function () { return ({}); },
+                    });
+                    react_2.fireEvent.scroll(window);
+                    return [4 /*yield*/, (0, react_2.waitFor)(function () {
+                            var portal = document.getElementById("custom-select-portal");
+                            expect(getComputedStyle(portal).top).toBe("160px");
+                        })];
+                case 2:
+                    _b.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});