pixelize-design-library 1.1.32 → 1.1.33

package/dist/Components/DatePicker/DatePicker.js

@@ -32,7 +32,7 @@ function DatePicker(_a) {
                     ? dateTimeFormat
                         ? dateTimeFormat
                         : "MM/dd/yyyy h:mm aa"
-                    : dateFormat, showTimeSelect: showTimeSelect, timeFormat: timeFormat, timeIntervals: timeIntervals, timeCaption: timeCaption, id: id, name: name, customInput: react_1.default.createElement(react_2.Input, { size: "sm", bg: theme.colors.backgroundColor.light }) })),
+                    : dateFormat, showTimeSelect: showTimeSelect, timeFormat: timeFormat, timeIntervals: timeIntervals, timeCaption: timeCaption, id: id, name: name, customInput: react_1.default.createElement(react_2.Input, { size: "sm", bg: theme.colors.backgroundColor.light, style: { border: error ? "1px solid #DC143C" : "" } }) })),
         error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
         helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
 }

package/dist/Components/MultiSelect/MultiSelect.js

@@ -104,7 +104,7 @@ function MultiSelect(_a) {
         setOptions(updatedOptions);
         onValueChange(updatedOptions);
     };
-    return (react_1.default.createElement(react_2.Box, { width: width, borderRadius: "md", padding: "2", backgroundColor: "white" },
+    return (react_1.default.createElement(react_2.Box, { width: width, borderRadius: "md", backgroundColor: "white" },
         label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })),
         react_1.default.createElement(react_2.Flex, { wrap: "wrap", gap: 2 }, options.map(function (option) { return (react_1.default.createElement(react_2.Tag, { key: option.id, size: "md", variant: "solid", colorScheme: "gray" },
             react_1.default.createElement(react_2.TagLabel, null, option.label),

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, dropdownStyle, inputStyle, isOptionLoading, loadingText, boxStyle, placeholder, searchQuery, isInformation, informationMessage, rightIcon, rightElementStyle, isMultipleSelect, isRequired, onOptionMultiSelect, }: Readonly<SelectSearchProps>): React.JSX.Element;
+export default function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnchange, id, name, label, dropdownStyle, inputStyle, isOptionLoading, loadingText, boxStyle, placeholder, searchQuery, isInformation, informationMessage, rightIcon, rightElementStyle, isMultipleSelect, isRequired, onOptionMultiSelect, error, }: Readonly<SelectSearchProps>): React.JSX.Element;

package/dist/Components/SelectSearch/SelectSearch.js

@@ -313,12 +313,12 @@ var RenderOptions = function (_a) {
     return (react_1.default.createElement(react_2.Text, { px: 4, py: 2, color: "gray.500" }, "No options found"));
 };
 function SelectSearch(_a) {
-    var options = _a.options, initialSelectedOption = _a.initialSelectedOption, onOptionSelect = _a.onOptionSelect, inputOnchange = _a.inputOnchange, id = _a.id, name = _a.name, label = _a.label, dropdownStyle = _a.dropdownStyle, inputStyle = _a.inputStyle, isOptionLoading = _a.isOptionLoading, _b = _a.loadingText, loadingText = _b === void 0 ? "loading" : _b, boxStyle = _a.boxStyle, _c = _a.placeholder, placeholder = _c === void 0 ? "Select Option" : _c, _d = _a.searchQuery, searchQuery = _d === void 0 ? null : _d, _e = _a.isInformation, isInformation = _e === void 0 ? false : _e, informationMessage = _a.informationMessage, rightIcon = _a.rightIcon, rightElementStyle = _a.rightElementStyle, _f = _a.isMultipleSelect, isMultipleSelect = _f === void 0 ? false : _f, _g = _a.isRequired, isRequired = _g === void 0 ? false : _g, onOptionMultiSelect = _a.onOptionMultiSelect;
+    var options = _a.options, initialSelectedOption = _a.initialSelectedOption, onOptionSelect = _a.onOptionSelect, inputOnchange = _a.inputOnchange, id = _a.id, name = _a.name, label = _a.label, dropdownStyle = _a.dropdownStyle, inputStyle = _a.inputStyle, isOptionLoading = _a.isOptionLoading, _b = _a.loadingText, loadingText = _b === void 0 ? "loading" : _b, boxStyle = _a.boxStyle, _c = _a.placeholder, placeholder = _c === void 0 ? "Select Option" : _c, _d = _a.searchQuery, searchQuery = _d === void 0 ? null : _d, _e = _a.isInformation, isInformation = _e === void 0 ? false : _e, informationMessage = _a.informationMessage, rightIcon = _a.rightIcon, rightElementStyle = _a.rightElementStyle, _f = _a.isMultipleSelect, isMultipleSelect = _f === void 0 ? false : _f, _g = _a.isRequired, isRequired = _g === void 0 ? false : _g, onOptionMultiSelect = _a.onOptionMultiSelect, _h = _a.error, error = _h === void 0 ? false : _h;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _h = (0, react_1.useState)(initialSelectedOption ? [initialSelectedOption] : []), selectedOptions = _h[0], setSelectedOptions = _h[1];
-    var _j = (0, react_1.useState)(searchQuery), inputValue = _j[0], setInputValue = _j[1];
-    var _k = (0, react_1.useState)(false), isOpen = _k[0], setIsOpen = _k[1];
-    var _l = (0, react_1.useState)("below"), position = _l[0], setPosition = _l[1];
+    var _j = (0, react_1.useState)(initialSelectedOption ? [initialSelectedOption] : []), selectedOptions = _j[0], setSelectedOptions = _j[1];
+    var _k = (0, react_1.useState)(searchQuery), inputValue = _k[0], setInputValue = _k[1];
+    var _l = (0, react_1.useState)(false), isOpen = _l[0], setIsOpen = _l[1];
+    var _m = (0, react_1.useState)("below"), position = _m[0], setPosition = _m[1];
     var inputRef = (0, react_1.useRef)(null);
     var dropdownRef = (0, react_1.useRef)(null);
     var filteredOptions = (0, react_1.useMemo)(function () {
@@ -439,7 +439,7 @@ function SelectSearch(_a) {
             react_1.default.createElement(react_2.TagLabel, { width: "50px" }, option.label),
             react_1.default.createElement(react_2.TagCloseButton, { onClick: function () { return handleRemoveOption(option); } }))); }))),
         react_1.default.createElement(react_2.InputGroup, null,
-            react_1.default.createElement(react_2.Input, { ref: inputRef, variant: "flushed", value: inputValue ? inputValue : "", onClick: function () { return setIsOpen(true); }, onChange: function (e) { return handleInputChange(e.target.value); }, placeholder: placeholder, onKeyDown: handleKeyDown, id: id, name: name, cursor: "pointer", borderColor: "gray.300", _hover: { borderColor: "blue.500" }, _focus: { borderColor: "blue.500" }, 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 }) }),
+            react_1.default.createElement(react_2.Input, { ref: inputRef, border: error ? "1px solid #DC143C" : "1px solid #e2e8f0", variant: "flushed", value: inputValue ? inputValue : "", onClick: function () { return setIsOpen(true); }, onChange: function (e) { return handleInputChange(e.target.value); }, placeholder: placeholder, onKeyDown: handleKeyDown, id: id, name: name, cursor: "pointer", borderColor: "gray.300", _hover: { borderColor: "blue.500" }, _focus: { borderColor: "blue.500" }, 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, border: error ? "1px solid #DC143C" : "1px solid #e2e8f0" }) }),
             rightIcon && (react_1.default.createElement(react_2.InputRightElement, { pointerEvents: "none", children: rightIcon, style: __assign({}, rightElementStyle) }))),
         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 },
             react_1.default.createElement(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick })))));

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

@@ -22,6 +22,7 @@ export type SelectSearchProps = {
     rightElementStyle?: {};
     isMultipleSelect?: boolean;
     isRequired?: boolean | undefined;
+    error?: boolean | undefined;
 };
 export type selectOptions = {
     id: string;

package/package.json

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