pixelize-design-library 1.0.84 → 1.0.85

package/dist/Components/Common/ErrorMessage.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+declare const ErrorMessage: ({ errorMessage }: {
+    errorMessage?: string | undefined;
+}) => React.JSX.Element;
+export default ErrorMessage;

package/dist/Components/Common/ErrorMessage.js

@@ -0,0 +1,12 @@
+"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 ErrorMessage = function (_a) {
+    var errorMessage = _a.errorMessage;
+    return (react_1.default.createElement(react_2.FormErrorMessage, { fontSize: 14 }, errorMessage !== null && errorMessage !== void 0 ? errorMessage : "Error"));
+};
+exports.default = ErrorMessage;

package/dist/Components/Common/FormLabel.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export declare const TextLabel: ({ label, id }: {
+    label: string;
+    id?: string | undefined;
+}) => React.JSX.Element;

package/dist/Components/Common/FormLabel.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextLabel = void 0;
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var TextLabel = function (_a) {
+    var label = _a.label, id = _a.id;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    return (react_1.default.createElement(react_2.FormLabel, { htmlFor: id !== null && id !== void 0 ? id : label, color: theme.colors.gray[600], mb: "0.1rem", fontWeight: 600, fontSize: 14 }, label));
+};
+exports.TextLabel = TextLabel;

package/dist/Components/Common/HelperText.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+declare const HelperText: ({ helperText }: {
+    helperText: string;
+}) => React.JSX.Element;
+export default HelperText;

package/dist/Components/Common/HelperText.js

@@ -0,0 +1,14 @@
+"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 useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var HelperText = function (_a) {
+    var helperText = _a.helperText;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    return (react_1.default.createElement(react_2.FormHelperText, { fontSize: 14, color: theme.colors.gray[600] }, helperText));
+};
+exports.default = HelperText;

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

@@ -1,5 +1,5 @@
-import { TextInputProps } from "./TextInputProps";
 import React from "react";
-declare function TextInput({ label, type, id, name, onChange, onBlur, onFocus, isDisabled, isReadOnly, isRequired, value, placeholder, width, error, errorMessage, helperText, onRightIconclick, inputRightIcon, inputGroupStyle, inputStyle, size }: TextInputProps): React.JSX.Element;
+import { TextInputProps } from "./TextInputProps";
+declare function TextInput({ label, type, id, name, onChange, onBlur, onFocus, isDisabled, isReadOnly, isRequired, value, placeholder, width, error, errorMessage, helperText, onRightIconclick, inputRightIcon, inputGroupStyle, inputStyle, size, }: TextInputProps): React.JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof TextInput>;
 export default _default;

package/dist/Components/Input/TextInput.js

@@ -14,18 +14,21 @@ 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 = __importDefault(require("react"));
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var FormLabel_1 = require("../Common/FormLabel");
+var HelperText_1 = __importDefault(require("../Common/HelperText"));
+var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
 function TextInput(_a) {
     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 ? "250px" : _g, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, onRightIconclick = _a.onRightIconclick, inputRightIcon = _a.inputRightIcon, inputGroupStyle = _a.inputGroupStyle, inputStyle = _a.inputStyle, _h = _a.size, size = _h === void 0 ? "sm" : _h;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    return (react_2.default.createElement(react_1.FormControl, { isRequired: isRequired, isInvalid: error },
-        label && react_2.default.createElement(react_1.FormLabel, { color: theme.colors.gray[600], mb: "0.1rem", fontWeight: 600, fontSize: 14 }, label),
-        react_2.default.createElement(react_1.InputGroup, { width: width, style: inputGroupStyle },
-            react_2.default.createElement(react_1.Input, { type: type, variant: "flushed", placeholder: placeholder, onChange: onChange, onBlur: onBlur, onFocus: onFocus, value: value, errorBorderColor: error ? "crimson" : "", isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, style: __assign(__assign({}, inputStyle), { backgroundColor: theme.colors.backgroundColor.main, fontWeight: 800, color: theme.colors.gray[700], padding: "0 0.5rem", fontSize: 15, letterSpacing: 0.7 }) }),
-            inputRightIcon && (react_2.default.createElement(react_1.InputRightElement, { onClick: onRightIconclick }, inputRightIcon))),
-        error && react_2.default.createElement(react_1.FormErrorMessage, { fontSize: 14 }, errorMessage),
-        helperText && !error && (react_2.default.createElement(react_1.FormHelperText, { fontSize: 14, color: theme.colors.gray[600] }, helperText))));
+    return (react_1.default.createElement(react_2.FormControl, { isRequired: isRequired, isInvalid: error },
+        label && react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id }),
+        react_1.default.createElement(react_2.InputGroup, { width: width, style: inputGroupStyle },
+            react_1.default.createElement(react_2.Input, { type: type, variant: "flushed", placeholder: placeholder, onChange: onChange, onBlur: onBlur, onFocus: onFocus, value: value, errorBorderColor: error ? "crimson" : "", isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, style: __assign(__assign({}, inputStyle), { backgroundColor: theme.colors.backgroundColor.main, fontWeight: 800, color: theme.colors.gray[700], padding: "0 0.5rem", fontSize: 15, letterSpacing: 0.7 }) }),
+            inputRightIcon && (react_1.default.createElement(react_2.InputRightElement, { onClick: onRightIconclick }, inputRightIcon))),
+        error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
+        helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
 }
-exports.default = react_2.default.memo(TextInput);
+exports.default = react_1.default.memo(TextInput);

package/dist/Components/Select/Select.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { chakraSelectProps } from "./SelectProps";
-export default function Select({ placeholder, size, variant, icon, bg, borderColor, color, onChange, onBlur, onFocus, errorBorderColor, isDisabled, isReadOnly, isRequired, value, colorScheme, label, error, errorMessage, helperText, options, width, formControlStyle }: chakraSelectProps): React.JSX.Element;
+export default function Select({ placeholder, size, variant, icon, bg, borderColor, color, onChange, onBlur, onFocus, errorBorderColor, isDisabled, isReadOnly, isRequired, value, colorScheme, label, error, errorMessage, helperText, options, width, formControlStyle, }: chakraSelectProps): React.JSX.Element;

package/dist/Components/Select/Select.js

@@ -1,14 +1,39 @@
 "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 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
-var react_3 = require("react");
+var FormLabel_1 = require("../Common/FormLabel");
+var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
+var HelperText_1 = __importDefault(require("../Common/HelperText"));
 function Select(_a) {
     var _b = _a.placeholder, placeholder = _b === void 0 ? "Select Option" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.variant, variant = _d === void 0 ? "outline" : _d, icon = _a.icon, bg = _a.bg, borderColor = _a.borderColor, color = _a.color, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, errorBorderColor = _a.errorBorderColor, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, isRequired = _a.isRequired, _e = _a.value, value = _e === void 0 ? "" : _e, colorScheme = _a.colorScheme, label = _a.label, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, _f = _a.options, options = _f === void 0 ? [] : _f, _g = _a.width, width = _g === void 0 ? 500 : _g, formControlStyle = _a.formControlStyle;
-    var getOptionsList = (0, react_3.useCallback)(function () {
+    var getOptionsList = (0, react_1.useCallback)(function () {
         if (!options.length)
             return react_1.default.createElement("option", { value: "" }, "No Options");
         return options.map(function (option) { return (react_1.default.createElement("option", { key: option.id, value: option.id }, option.label)); });
@@ -21,9 +46,9 @@ function Select(_a) {
         }
     };
     return (react_1.default.createElement(react_2.FormControl, { isRequired: isRequired, isInvalid: error, style: formControlStyle, width: width },
-        label && react_1.default.createElement(react_2.FormLabel, { mb: "0.25rem" }, label),
-        react_1.default.createElement(react_2.Select, { placeholder: placeholder, size: size, variant: variant, icon: icon, bg: bg, borderColor: borderColor, color: color, isInvalid: error, value: value, onChange: handleOnChange, width: width, onBlur: onBlur, onFocus: onFocus, isDisabled: isDisabled, isReadOnly: isReadOnly, colorScheme: colorScheme, errorBorderColor: errorBorderColor }, getOptionsList()),
-        error && react_1.default.createElement(react_2.FormErrorMessage, { pl: 4 }, errorMessage),
-        helperText && !error && (react_1.default.createElement(react_2.FormHelperText, { pl: 4 }, helperText))));
+        label && react_1.default.createElement(FormLabel_1.TextLabel, { label: label }),
+        react_1.default.createElement(react_2.Select, { placeholder: placeholder, size: size, variant: "flushed", icon: icon, bg: bg, borderColor: borderColor, color: color, isInvalid: error, value: value, onChange: handleOnChange, width: width, onBlur: onBlur, onFocus: onFocus, isDisabled: isDisabled, isReadOnly: isReadOnly, colorScheme: colorScheme, errorBorderColor: errorBorderColor }, getOptionsList()),
+        error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
+        helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
 }
 exports.default = Select;

package/dist/Components/SelectSearch/SelectSearch.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { SelectSearchProps } from "./SelectSearchProps";
-export default function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnchange, id, name, label, inputStyle, dropdownStyle, isOptionLoading, loadingText, boxStyle, placeholder, }: SelectSearchProps): React.JSX.Element;
+export default function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnchange, id, name, label, inputStyle, dropdownStyle, isOptionLoading, loadingText, boxStyle, placeholder, }: Readonly<SelectSearchProps>): React.JSX.Element;

package/dist/Components/SelectSearch/SelectSearch.js

@@ -1,4 +1,15 @@
 "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);
@@ -25,8 +36,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
+var FormLabel_1 = require("../Common/FormLabel");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 function SelectSearch(_a) {
     var options = _a.options, _b = _a.initialSelectedOption, initialSelectedOption = _b === void 0 ? null : _b, onOptionSelect = _a.onOptionSelect, inputOnchange = _a.inputOnchange, id = _a.id, name = _a.name, label = _a.label, inputStyle = _a.inputStyle, dropdownStyle = _a.dropdownStyle, isOptionLoading = _a.isOptionLoading, _c = _a.loadingText, loadingText = _c === void 0 ? "loading" : _c, boxStyle = _a.boxStyle, _d = _a.placeholder, placeholder = _d === void 0 ? "Select Option" : _d;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
     var _e = (0, react_1.useState)(initialSelectedOption ? initialSelectedOption.label : ""), inputValue = _e[0], setInputValue = _e[1];
     var _f = (0, react_1.useState)(false), isOpen = _f[0], setIsOpen = _f[1];
     var _g = (0, react_1.useState)("below"), position = _g[0], setPosition = _g[1];
@@ -35,11 +49,11 @@ function SelectSearch(_a) {
     var filteredOptions = options === null || options === void 0 ? void 0 : options.filter(function (option) {
         return option.label.toLowerCase().includes(inputValue.toLowerCase());
     });
-    var handleOptionClick = function (option) {
+    var handleOptionClick = (0, react_1.useCallback)(function (option) {
         setInputValue(option.label);
         setIsOpen(false);
         onOptionSelect(option);
-    };
+    }, [onOptionSelect]);
     var handleInputChange = function (e) {
         setInputValue(e.target.value);
         setIsOpen(true);
@@ -102,11 +116,22 @@ function SelectSearch(_a) {
             window.removeEventListener("resize", handleResize);
         };
     }, [isOpen]);
+    var RenderOptions = (0, react_1.useCallback)(function () {
+        if (isOptionLoading) {
+            return (react_1.default.createElement(react_2.VStack, { py: 2 },
+                react_1.default.createElement(react_2.Spinner, { size: "sm", color: "blue.500" }),
+                react_1.default.createElement(react_2.Text, { color: "blue.500" }, loadingText)));
+        }
+        if (filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.length) {
+            return filteredOptions.map(function (option) { return (react_1.default.createElement(react_2.Box, { key: option.id, px: 4, py: 2, cursor: "pointer", _hover: { backgroundColor: "blue.50" }, onClick: function () { return handleOptionClick(option); } }, option.label)); });
+        }
+        return (react_1.default.createElement(react_2.Text, { px: 4, py: 2, color: "gray.500" }, "No options found"));
+    }, [filteredOptions, isOptionLoading, loadingText, handleOptionClick]);
     return (react_1.default.createElement(react_2.Box, { display: "flex", flexDirection: "column", position: "relative", sx: boxStyle },
-        react_1.default.createElement(react_2.FormLabel, { htmlFor: id, mb: 2, fontWeight: "bold" }, label),
-        react_1.default.createElement(react_2.Input, { ref: inputRef, value: inputValue, onClick: function () { return setIsOpen(true); }, onChange: handleInputChange, placeholder: placeholder, onKeyDown: handleKeyDown, id: id, name: name, cursor: "pointer", borderColor: "gray.300", _hover: { borderColor: "blue.500" }, _focus: { borderColor: "blue.500" } }),
-        isOpen && (react_1.default.createElement(react_2.Box, { ref: dropdownRef, position: "absolute", top: position === "below" ? "100%" : "auto", bottom: position === "above" ? "100%" : "auto", left: 0, right: 0, border: "1px solid", borderColor: "gray.300", borderRadius: "md", bg: "white", maxHeight: "150px", overflowY: "auto", zIndex: 10 }, isOptionLoading ? (react_1.default.createElement(react_2.VStack, { py: 2 },
-            react_1.default.createElement(react_2.Spinner, { size: "sm", color: "blue.500" }),
-            react_1.default.createElement(react_2.Text, { color: "blue.500" }, loadingText))) : (filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.length) > 0 ? (filteredOptions.map(function (option) { return (react_1.default.createElement(react_2.Box, { key: option.id, px: 4, py: 2, cursor: "pointer", _hover: { backgroundColor: "blue.50" }, onClick: function () { return handleOptionClick(option); } }, option.label)); })) : (react_1.default.createElement(react_2.Text, { px: 4, py: 2, color: "gray.500" }, "No options found"))))));
+        label && react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id }),
+        react_1.default.createElement(react_2.Input, { ref: inputRef, variant: "flushed", value: inputValue, onClick: function () { return setIsOpen(true); }, onChange: handleInputChange, placeholder: placeholder, onKeyDown: handleKeyDown, id: id, name: name, cursor: "pointer", borderColor: "gray.300", _hover: { borderColor: "blue.500" }, _focus: { borderColor: "blue.500" }, 
+            // {...inputStyle}
+            style: __assign(__assign({}, inputStyle), { backgroundColor: theme.colors.backgroundColor.main, fontWeight: 800, color: theme.colors.gray[700], padding: "0 0.5rem", fontSize: 15, letterSpacing: 0.7 }) }),
+        isOpen && (react_1.default.createElement(react_2.Box, { ref: dropdownRef, position: "absolute", top: position === "below" ? "100%" : "auto", bottom: position === "above" ? "100%" : "auto", left: 0, right: 0, border: "1px solid", borderColor: "gray.300", borderRadius: "md", bg: "white", maxHeight: "150px", overflowY: "auto", zIndex: 10 }, RenderOptions()))));
 }
 exports.default = SelectSearch;

package/package.json

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