pixelize-design-library 2.0.17 → 2.0.18

package/dist/Components/SearchSelect/SearchSelect.js

@@ -61,7 +61,9 @@ var SearchSelect = function (_a) {
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     (0, react_2.useOutsideClick)({
         ref: containerRef,
-        handler: function () { setIsOpen(false); setCustomSelectOpen(false); },
+        handler: function () {
+            setIsOpen(false);
+        },
     });
     var selectedValues = isMultiple
         ? Array.isArray(value)
@@ -149,6 +151,15 @@ var SearchSelect = function (_a) {
     //   ref: customSelectRef,
     //   handler: () => setCustomSelectOpen(false),
     // });
+    (0, react_2.useOutsideClick)({
+        ref: customSelectRef,
+        handler: function (e) {
+            var dropdown = document.getElementById('custom-select-portal');
+            if (dropdown && dropdown.contains(e.target))
+                return;
+            setCustomSelectOpen(false);
+        },
+    });
     var handleCustomSelect = function (item) {
         if (typeof (insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.onSelect) === 'function') {
             insideSelect.onSelect(item);
@@ -174,7 +185,7 @@ var SearchSelect = function (_a) {
                         react_1.default.createElement(SelectTruncatedLabel_1.default, { label: (_e = (_d = insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.value) === null || _d === void 0 ? void 0 : _d.label) !== null && _e !== void 0 ? _e : "", maxWidth: (insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.width) || "6rem" }),
                         customSelectOpen ? react_1.default.createElement(lucide_react_1.ChevronUp, { size: 16 }) : react_1.default.createElement(lucide_react_1.ChevronDown, { size: 16 })),
                     customSelectOpen && (react_1.default.createElement(react_2.Portal, null,
-                        react_1.default.createElement(react_2.Box, { position: "absolute", top: "".concat(customSelectPos.top, "px"), left: "".concat(customSelectPos.left, "px"), zIndex: 20, bg: theme.colors.white, border: "0.063rem solid", borderColor: theme.colors.gray[300], borderRadius: "md", boxShadow: "md", minW: "10rem", maxW: "38rem" }, (_f = insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.option) === null || _f === void 0 ? void 0 : _f.map(function (item) { return (react_1.default.createElement(react_2.Box, { key: item.id, display: "flex", alignItems: "center", height: "2.5rem" // height instead of vertical padding
+                        react_1.default.createElement(react_2.Box, { id: "custom-select-portal", position: "absolute", top: "".concat(customSelectPos.top, "px"), left: "".concat(customSelectPos.left, "px"), zIndex: 20, bg: theme.colors.white, border: "0.063rem solid", borderColor: theme.colors.gray[300], borderRadius: "md", boxShadow: "md", minW: "10rem", maxW: "38rem" }, (_f = insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.option) === null || _f === void 0 ? void 0 : _f.map(function (item) { return (react_1.default.createElement(react_2.Box, { key: item.id, display: "flex", alignItems: "center", height: "2.5rem" // height instead of vertical padding
                             , px: "0.75rem" // light internal spacing
                             , fontSize: "sm", _hover: { bg: theme.colors.gray[100] }, cursor: "pointer", onClick: function (e) {
                                 e.stopPropagation();

package/dist/Pages/searchSelect.js

@@ -158,15 +158,15 @@ var SearchSelect = function () {
                         "label": "Hariharan  Jeganathan",
                     },
                     {
-                        "id": 1,
+                        "id": 5,
                         "label": "Karuppusamy S",
                     },
                     {
-                        "id": 2,
+                        "id": 6,
                         "label": "SasiKumar M",
                     },
                     {
-                        "id": 4,
+                        "id": 7,
                         "label": "Hariharan  Jeganathan",
                     }
                 ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.0.17",
+  "version": "2.0.18",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",