pixelize-design-library 1.1.78 → 1.1.80

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/Components/SelectSearch/SelectSearch.d.ts +1 -1
  2. package/dist/Components/SelectSearch/SelectSearch.js +9 -4
  3. package/dist/Components/SelectSearch/SelectSearchProps.d.ts +1 -0
  4. package/package.json +1 -1
package/dist/Components/SelectSearch/SelectSearch.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import React from "react";
2
2
  import { SelectSearchProps } from "./SelectSearchProps";
3
- 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, isProfile, isBottomIcon, BottomIcon, BottomText, handleBottomClick, BottomTextColor, }: Readonly<SelectSearchProps>): React.JSX.Element;
3
+ 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, isProfile, isBottomIcon, errorMessage, BottomIcon, BottomText, handleBottomClick, BottomTextColor, }: Readonly<SelectSearchProps>): React.JSX.Element;
package/dist/Components/SelectSearch/SelectSearch.js CHANGED
@@ -42,12 +42,16 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
42
42
  }
43
43
  return to.concat(ar || Array.prototype.slice.call(from));
44
44
  };
45
+ var __importDefault = (this && this.__importDefault) || function (mod) {
46
+ return (mod && mod.__esModule) ? mod : { "default": mod };
47
+ };
45
48
  Object.defineProperty(exports, "__esModule", { value: true });
46
49
  var react_1 = __importStar(require("react"));
47
50
  var react_2 = require("@chakra-ui/react");
48
51
  var FormLabel_1 = require("../Common/FormLabel");
49
52
  var useCustomTheme_1 = require("../../Theme/useCustomTheme");
50
53
  var lucide_react_1 = require("lucide-react");
54
+ var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
51
55
  var RenderOptions = function (_a) {
52
56
  var isOptionLoading = _a.isOptionLoading, filteredOptions = _a.filteredOptions, loadingText = _a.loadingText, handleOptionClick = _a.handleOptionClick, isProfile = _a.isProfile;
53
57
  if (isOptionLoading) {
@@ -66,7 +70,7 @@ var RenderOptions = function (_a) {
66
70
  return (react_1.default.createElement(react_2.Text, { px: 4, py: 2, color: "gray.500" }, "No options found"));
67
71
  };
68
72
  function SelectSearch(_a) {
69
- 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, _j = _a.isProfile, isProfile = _j === void 0 ? false : _j, _k = _a.isBottomIcon, isBottomIcon = _k === void 0 ? false : _k,
73
+ 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, _j = _a.isProfile, isProfile = _j === void 0 ? false : _j, _k = _a.isBottomIcon, isBottomIcon = _k === void 0 ? false : _k, errorMessage = _a.errorMessage,
70
74
  // BottomIconStyle,
71
75
  _l = _a.BottomIcon,
72
76
  // BottomIconStyle,
@@ -218,12 +222,13 @@ function SelectSearch(_a) {
218
222
  react_1.default.createElement(react_2.TagLabel, { width: "50px" }, option.label),
219
223
  react_1.default.createElement(react_2.TagCloseButton, { onClick: function () { return handleRemoveOption(option); } }))); }))),
220
224
  react_1.default.createElement(react_2.InputGroup, null,
221
- react_1.default.createElement(react_2.Input, { ref: inputRef, border: error ? "2px solid #DC143C" : "1px solid #e2e8f0", variant: "flushed", value: inputValue ? inputValue : "", onClick: function () { return setIsOpen(true); }, onFocus: 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: 600, color: theme.colors.gray[700], padding: "0 0.5rem", fontSize: 15, letterSpacing: 0.7, border: error ? "1px solid #DC143C" : "1px solid #e2e8f0" }) }),
225
+ react_1.default.createElement(react_2.Input, { ref: inputRef, border: error ? "2px solid #DC143C" : "1px solid #e2e8f0", variant: "flushed", value: inputValue ? inputValue : "", onClick: function () { return setIsOpen(true); }, onFocus: 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: 600, color: theme.colors.gray[700], padding: "0 0.5rem", fontSize: 15, letterSpacing: 0.7, border: error ? "2px solid #DC143C" : "1px solid #e2e8f0" }) }),
222
226
  rightIcon && (react_1.default.createElement(react_2.InputRightElement, { pointerEvents: "none", children: rightIcon, style: __assign({}, rightElementStyle) }))),
223
- 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 },
227
+ error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
228
+ isOpen && (react_1.default.createElement(react_2.Box, { ref: dropdownRef, marginTop: "5px", 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 },
224
229
  react_1.default.createElement(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick, isProfile: isProfile }),
225
230
  react_1.default.createElement("hr", null),
226
- isBottomIcon && (react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", ml: "1rem", cursor: "pointer", onClick: handleBottomClick },
231
+ isBottomIcon && (react_1.default.createElement(react_2.Box, { position: "sticky", bottom: 0, background: "white", display: "flex", alignItems: "center", pl: "1rem", cursor: "pointer", onClick: handleBottomClick, borderColor: "gray.300", zIndex: 1, borderTop: "1px solid lightgray" },
227
232
  react_1.default.createElement(react_2.Box, null, BottomIcon ? BottomIcon : react_1.default.createElement(lucide_react_1.PlusIcon, { size: "1rem" })),
228
233
  react_1.default.createElement(react_2.Box, { fontSize: "0.875rem", color: BottomTextColor
229
234
  ? BottomTextColor
package/dist/Components/SelectSearch/SelectSearchProps.d.ts CHANGED
@@ -24,6 +24,7 @@ export type SelectSearchProps = {
24
24
  isRequired?: boolean | undefined;
25
25
  error?: boolean | undefined;
26
26
  isProfile?: boolean | undefined;
27
+ errorMessage?: string | undefined;
27
28
  isBottomIcon?: boolean | undefined;
28
29
  BottomIcon?: boolean | undefined | JSX.Element;
29
30
  BottomIconStyle?: React.CSSProperties;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "1.1.78",
3
+ "version": "1.1.80",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",