pixelize-design-library 2.0.14 → 2.0.16

package/dist/Components/Input/TextInput.js

@@ -54,8 +54,8 @@ var FormLabel_1 = require("../Common/FormLabel");
 var HelperText_1 = __importDefault(require("../Common/HelperText"));
 var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
 var TextInput = (0, react_1.forwardRef)(function (_a, ref) {
-    var label = _a.label, _b = _a.type, type = _b === void 0 ? "text" : _b, id = _a.id, name = _a.name, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, value = _a.value, _f = _a.placeholder, placeholder = _f === void 0 ? "Placeholder" : _f, _g = _a.width, width = _g === void 0 ? "22.5rem" : _g, _h = _a.height, height = _h === void 0 ? "2.75rem" : _h, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, onRightIconclick = _a.onRightIconclick, inputRightIcon = _a.inputRightIcon, inputLeftIcon = _a.inputLeftIcon, onLeftIconClick = _a.onLeftIconClick, inputGroupStyle = _a.inputGroupStyle, inputStyle = _a.inputStyle, _j = _a.size, size = _j === void 0 ? "md" : _j, _k = _a.isInformation, isInformation = _k === void 0 ? false : _k, informationMessage = _a.informationMessage, leftElementStyle = _a.leftElementStyle, rightElementStyle = _a.rightElementStyle, autoComplete = _a.autoComplete, props = __rest(_a, ["label", "type", "id", "name", "onChange", "onBlur", "onFocus", "isDisabled", "isReadOnly", "isRequired", "value", "placeholder", "width", "height", "error", "errorMessage", "helperText", "onRightIconclick", "inputRightIcon", "inputLeftIcon", "onLeftIconClick", "inputGroupStyle", "inputStyle", "size", "isInformation", "informationMessage", "leftElementStyle", "rightElementStyle", "autoComplete"]);
-    return (react_1.default.createElement(react_2.FormControl, { w: width },
+    var label = _a.label, _b = _a.type, type = _b === void 0 ? "text" : _b, id = _a.id, name = _a.name, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, value = _a.value, _f = _a.placeholder, placeholder = _f === void 0 ? "Placeholder" : _f, _g = _a.width, width = _g === void 0 ? "100%" : _g, _h = _a.height, height = _h === void 0 ? "2.75rem" : _h, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, onRightIconclick = _a.onRightIconclick, inputRightIcon = _a.inputRightIcon, inputLeftIcon = _a.inputLeftIcon, onLeftIconClick = _a.onLeftIconClick, inputGroupStyle = _a.inputGroupStyle, inputStyle = _a.inputStyle, _j = _a.size, size = _j === void 0 ? "md" : _j, _k = _a.isInformation, isInformation = _k === void 0 ? false : _k, informationMessage = _a.informationMessage, leftElementStyle = _a.leftElementStyle, rightElementStyle = _a.rightElementStyle, autoComplete = _a.autoComplete, minW = _a.minW, maxW = _a.maxW, props = __rest(_a, ["label", "type", "id", "name", "onChange", "onBlur", "onFocus", "isDisabled", "isReadOnly", "isRequired", "value", "placeholder", "width", "height", "error", "errorMessage", "helperText", "onRightIconclick", "inputRightIcon", "inputLeftIcon", "onLeftIconClick", "inputGroupStyle", "inputStyle", "size", "isInformation", "informationMessage", "leftElementStyle", "rightElementStyle", "autoComplete", "minW", "maxW"]);
+    return (react_1.default.createElement(react_2.FormControl, { w: width, minW: minW, maxW: maxW },
         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, { style: inputGroupStyle, height: height },
             inputLeftIcon && (react_1.default.createElement(react_2.InputLeftElement, __assign({ onClick: onLeftIconClick, pointerEvents: onLeftIconClick ? "auto" : "none" }, leftElementStyle), inputLeftIcon)),

package/dist/Components/Input/TextInput.styles.js

@@ -25,7 +25,7 @@ exports.Input = {
     },
     variants: {
         outline: function (props) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
             var theme = props.theme;
             var errorColor = (_c = (_b = (_a = theme.colors.semantic) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b[500]) !== null && _c !== void 0 ? _c : "red.500";
             var borderColor = (_e = (_d = theme.colors.boxborder) === null || _d === void 0 ? void 0 : _d[500]) !== null && _e !== void 0 ? _e : "gray.300";
@@ -64,6 +64,15 @@ exports.Input = {
                     _readOnly: {
                         boxShadow: 'inherit',
                     },
+                    _disabled: {
+                        bg: (_q = (_p = theme.colors.gray) === null || _p === void 0 ? void 0 : _p[100]) !== null && _q !== void 0 ? _q : "gray.100",
+                        opacity: 1,
+                        cursor: "not-allowed",
+                        _hover: {
+                            border: "0.063rem solid",
+                            borderColor: borderColor,
+                        },
+                    },
                 },
             };
         },

package/dist/Components/Input/TextInputProps.d.ts

@@ -19,4 +19,6 @@ export type TextInputProps = Pick<InputProps, "value" | "type" | "onChange" | "p
     rightElementStyle?: {};
     ref?: React.Ref<HTMLInputElement>;
     autoComplete?: string;
+    minW?: string;
+    maxW?: string;
 };

package/dist/Components/SearchSelect/SearchSelect.js

@@ -44,19 +44,20 @@ var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
 var HelperText_1 = __importDefault(require("../Common/HelperText"));
 var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+var SelectTruncatedLabel_1 = __importDefault(require("./SelectTruncatedLabel"));
 var SearchSelect = function (_a) {
-    var _b, _c, _d;
-    var id = _a.id, label = _a.label, options = _a.options, onSelect = _a.onSelect, onSearch = _a.onSearch, _e = _a.isOptionLoading, isOptionLoading = _e === void 0 ? false : _e, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, _g = _a.loadingText, loadingText = _g === void 0 ? 'Loading...' : _g, _h = _a.placeholder, placeholder = _h === void 0 ? 'Select' : _h, value = _a.value, _j = _a.searchQuery, searchQuery = _j === void 0 ? '' : _j, _k = _a.isMultiple, isMultiple = _k === void 0 ? false : _k, _l = _a.isRequired, isRequired = _l === void 0 ? false : _l, _m = _a.error, error = _m === void 0 ? false : _m, errorMessage = _a.errorMessage, helperText = _a.helperText, _o = _a.width, width = _o === void 0 ? '100%' : _o, _p = _a.size, size = _p === void 0 ? 'md' : _p, chip = _a.chip, information = _a.information, rightIcon = _a.rightIcon, addNew = _a.addNew, _q = _a.isSelectAll, isSelectAll = _q === void 0 ? false : _q, pagination = _a.pagination, insideSelect = _a.insideSelect;
-    var _r = (0, react_1.useState)(searchQuery), inputValue = _r[0], setInputValue = _r[1];
-    var _s = (0, react_1.useState)(false), isOpen = _s[0], setIsOpen = _s[1];
-    var _t = (0, react_1.useState)(true), hasMore = _t[0], setHasMore = _t[1];
+    var _b, _c, _d, _e, _f;
+    var id = _a.id, label = _a.label, options = _a.options, onSelect = _a.onSelect, onSearch = _a.onSearch, _g = _a.isOptionLoading, isOptionLoading = _g === void 0 ? false : _g, _h = _a.isLoading, isLoading = _h === void 0 ? false : _h, _j = _a.loadingText, loadingText = _j === void 0 ? 'Loading...' : _j, _k = _a.placeholder, placeholder = _k === void 0 ? 'Select' : _k, value = _a.value, _l = _a.searchQuery, searchQuery = _l === void 0 ? '' : _l, _m = _a.isMultiple, isMultiple = _m === void 0 ? false : _m, _o = _a.isRequired, isRequired = _o === void 0 ? false : _o, _p = _a.error, error = _p === void 0 ? false : _p, errorMessage = _a.errorMessage, helperText = _a.helperText, _q = _a.width, width = _q === void 0 ? '100%' : _q, _r = _a.size, size = _r === void 0 ? 'md' : _r, chip = _a.chip, information = _a.information, rightIcon = _a.rightIcon, addNew = _a.addNew, _s = _a.isSelectAll, isSelectAll = _s === void 0 ? false : _s, pagination = _a.pagination, insideSelect = _a.insideSelect;
+    var _t = (0, react_1.useState)(searchQuery), inputValue = _t[0], setInputValue = _t[1];
+    var _u = (0, react_1.useState)(false), isOpen = _u[0], setIsOpen = _u[1];
+    var _v = (0, react_1.useState)(true), hasMore = _v[0], setHasMore = _v[1];
     var inputRef = (0, react_1.useRef)(null);
     var containerRef = (0, react_1.useRef)(null);
     var scrollTimeoutRef = (0, react_1.useRef)(null);
-    var _u = (0, react_1.useState)(false), focused = _u[0], setFocused = _u[1];
-    var _v = (0, react_1.useState)(false), customSelectOpen = _v[0], setCustomSelectOpen = _v[1];
-    // const [customSelectValue, setCustomSelectValue] = useState<string>('Select');
+    var _w = (0, react_1.useState)(false), focused = _w[0], setFocused = _w[1];
+    var _x = (0, react_1.useState)(false), customSelectOpen = _x[0], setCustomSelectOpen = _x[1];
     var customSelectRef = (0, react_1.useRef)(null);
+    var _y = (0, react_1.useState)({ top: 0, left: 0, width: 0 }), customSelectPos = _y[0], setCustomSelectPos = _y[1];
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     (0, react_2.useOutsideClick)({
         ref: containerRef,
@@ -144,25 +145,39 @@ var SearchSelect = function (_a) {
             }, 200);
         }
     }, [pagination, options.length, inputValue, hasMore]);
-    (0, react_2.useOutsideClick)({
-        ref: customSelectRef,
-        handler: function () { return setCustomSelectOpen(false); },
-    });
-    var handleCustomSelect = (0, react_1.useCallback)(function (item) {
-        setCustomSelectOpen(false);
+    // useOutsideClick({
+    //   ref: customSelectRef,
+    //   handler: () => setCustomSelectOpen(false),
+    // });
+    var handleCustomSelect = function (item) {
         if (typeof (insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.onSelect) === 'function') {
             insideSelect.onSelect(item);
         }
-    }, [insideSelect]);
+        setCustomSelectOpen(false);
+    };
+    (0, react_1.useEffect)(function () {
+        if (customSelectOpen && customSelectRef.current) {
+            var rect = customSelectRef.current.getBoundingClientRect();
+            setCustomSelectPos({
+                top: rect.bottom + window.scrollY,
+                left: rect.left + window.scrollX,
+                width: rect.width + 30,
+            });
+        }
+    }, [customSelectOpen]);
     return (react_1.default.createElement(react_2.Box, { ref: containerRef, width: width, position: "relative" },
         label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: information === null || information === void 0 ? void 0 : information.isInformation, informationMessage: information === null || information === void 0 ? void 0 : information.informationMessage })),
         react_1.default.createElement(react_2.InputGroup, { size: size },
             react_1.default.createElement(react_2.Box, { as: "div", w: "100%", minH: "2.375rem", px: 3, display: "flex", alignItems: "center", flexWrap: "wrap", gap: "0.375rem", border: "0.063rem solid", borderColor: error ? theme.colors.semantic.error[500] : theme.colors.primary[500], borderRadius: "0.25rem", bg: "white", boxShadow: focused ? error ? "0 0 0 0.125rem ".concat((_b = theme.colors.boxShadow) === null || _b === void 0 ? void 0 : _b.error) : "0 0 0 0.125rem ".concat((_c = theme.colors.boxShadow) === null || _c === void 0 ? void 0 : _c.primary) : 'none', transition: "box-shadow 0.2s, border-color 0.2s" },
                 insideSelect && (react_1.default.createElement(react_2.Box, { position: "relative", px: 2, py: 2.5, ref: customSelectRef, backgroundColor: theme.colors.gray[200], ml: "-12px", h: "-webkit-fill-available", borderRadius: "0.25rem 0 0 0.25rem", onClick: function () { return setCustomSelectOpen(function (prev) { return !prev; }); } },
-                    react_1.default.createElement(react_2.Box, { minW: "8rem", fontSize: "sm", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", maxW: 100 },
-                        react_1.default.createElement(react_2.Text, { maxW: "6rem", isTruncated: true, whiteSpace: "nowrap" }, insideSelect.value),
+                    react_1.default.createElement(react_2.Box, { minW: "5rem", fontSize: "sm", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", width: insideSelect.width },
+                        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.Box, { position: "absolute", top: "100%", mt: "0.25rem", zIndex: 20, bg: "white", border: "1px solid", borderColor: "gray.300", borderRadius: "md", boxShadow: "md", width: "100%" }, (_d = insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.option) === null || _d === void 0 ? void 0 : _d.map(function (item) { return (react_1.default.createElement(react_2.Box, { key: item.id, px: 3, py: 2, fontSize: "sm", _hover: { bg: 'gray.100' }, cursor: "pointer", onClick: function () { return handleCustomSelect(item); } }, item.label)); }))))),
+                    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: "white", border: "1px solid", borderColor: "gray.300", borderRadius: "md", boxShadow: "md", minW: "10rem", maxWidth: "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, px: 3, py: 2, fontSize: "sm", _hover: { bg: 'gray.100' }, cursor: "pointer", onClick: function (e) {
+                                e.stopPropagation(); // 👈 Prevent outside click from triggering
+                                handleCustomSelect(item);
+                            } }, item.label)); })))))),
                 isMultiple
                     ? selectedValues.slice(0, (chip === null || chip === void 0 ? void 0 : chip.maxChips) || selectedValues.length).map(function (item) { return (react_1.default.createElement(Tag_1.default, { key: item.id, label: (chip === null || chip === void 0 ? void 0 : chip.maxText) && item.label.length > chip.maxText
                             ? item.label.slice(0, chip.maxText) + '…'

package/dist/Components/SearchSelect/SearchSelectProps.d.ts

@@ -47,8 +47,9 @@ export type SearchSelectProps = {
     virtualization?: boolean;
     insideSelect?: {
         onSelect?: (options: Options) => void;
-        value?: string;
+        value?: Options;
         option?: Options[];
+        width?: string;
     };
 };
 export type Options = {

package/dist/Components/SearchSelect/SelectTruncatedLabel.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const SelectTruncatedLabel: ({ label, maxWidth, }: {
+    label: string;
+    maxWidth?: string | undefined;
+}) => React.JSX.Element;
+export default SelectTruncatedLabel;

package/dist/Components/SearchSelect/SelectTruncatedLabel.js

@@ -0,0 +1,45 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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 = require("@chakra-ui/react");
+var react_2 = __importStar(require("react"));
+var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+var SelectTruncatedLabel = function (_a) {
+    var label = _a.label, _b = _a.maxWidth, maxWidth = _b === void 0 ? "6rem" : _b;
+    var textRef = (0, react_2.useRef)(null);
+    var _c = (0, react_2.useState)(false), isOverflowing = _c[0], setIsOverflowing = _c[1];
+    (0, react_2.useEffect)(function () {
+        var el = textRef.current;
+        if (el) {
+            setIsOverflowing(el.scrollWidth > el.clientWidth);
+        }
+    }, [label, maxWidth]);
+    var textElement = (react_2.default.createElement(react_1.Text, { ref: textRef, maxW: maxWidth, isTruncated: true, whiteSpace: "nowrap" }, label));
+    return isOverflowing ? react_2.default.createElement(ToolTip_1.default, { label: label, placement: "top" }, textElement) : textElement;
+};
+exports.default = SelectTruncatedLabel;

package/dist/Pages/input.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var TextInput_1 = __importDefault(require("../Components/Input/TextInput"));
 var InputPage = function () {
-    return (react_1.default.createElement("div", null,
+    return (react_1.default.createElement("div", { style: { width: "500px" } },
         react_1.default.createElement(TextInput_1.default, { label: "My Label", id: "input1", name: "hello", 
             //helperText="Hello"
             //errorMessage="Required"
@@ -35,6 +35,8 @@ var InputPage = function () {
                 console.log("blur");
             }, 
             // helperText="sometibg"
-            isRequired: true, informationMessage: "This is information", isInformation: true })));
+            isRequired: true, informationMessage: "This is information", isInformation: true, 
+            // isDisabled
+            minW: "200px", maxW: "300px" })));
 };
 exports.default = InputPage;

package/dist/Pages/searchSelect.js

@@ -87,12 +87,16 @@ var SearchSelect = function () {
     var _b = (0, react_1.useState)(rrr(1, 50)), soptions = _b[0], setSoptions = _b[1]; // initial 50
     var _c = (0, react_1.useState)(""), search = _c[0], setSearch = _c[1];
     var _d = (0, react_1.useState)(false), paginationLoading = _d[0], setpaginationLoading = _d[1];
-    var _e = (0, react_1.useState)('Select'), customSelectValue = _e[0], setCustomSelectValue = _e[1];
+    var _e = (0, react_1.useState)({ id: "3", label: "Hariharan J" }), customSelectValue = _e[0], setCustomSelectValue = _e[1];
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement(SearchSelect_1.default, { label: "Users", id: "user-select", options: soptions, value: selectedOptions, isMultiple: true, onSelect: function (val) {
+        react_1.default.createElement(SearchSelect_1.default
+        // width={"200px"}
+        , { 
+            // width={"200px"}
+            label: "Users", id: "user-select", options: soptions, value: selectedOptions, isMultiple: true, onSelect: function (val) {
                 console.log("val", val);
                 setselectedOptions(val);
-            }, onSearch: function (query) { return setSearch(query); }, isOptionLoading: false, placeholder: "Search users...", searchQuery: search, chip: {
+            }, onSearch: function (query) { return setSearch(query); }, searchQuery: search, isOptionLoading: false, placeholder: "Search users...", chip: {
                 maxChips: 3,
                 onClick: function () { return console.log("chip removed"); },
             }, isSelectAll: true, pagination: {
@@ -137,7 +141,8 @@ var SearchSelect = function () {
             // error={true}
             // errorMessage="hello"
             virtualization: true, insideSelect: {
-                onSelect: function (val) { return setCustomSelectValue(val.label); },
+                width: "50px",
+                onSelect: function (val) { return setCustomSelectValue(val); },
                 value: customSelectValue,
                 option: [
                     {

package/package.json

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