pixelize-design-library 1.0.55 → 1.0.57

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 (7) hide show
  1. package/dist/Components/Modal/Modal.js +16 -11
  2. package/dist/Components/Modal/ModalProps.d.ts +2 -3
  3. package/dist/Components/SelectSearch/SelectSearch.d.ts +1 -1
  4. package/dist/Components/SelectSearch/SelectSearch.js +52 -12
  5. package/dist/Components/SelectSearch/SelectSearchProps.d.ts +7 -0
  6. package/dist/Layout.js +3 -1
  7. package/package.json +1 -1
package/dist/Components/Modal/Modal.js CHANGED
@@ -9,15 +9,20 @@ function Modal(_a) {
9
9
  var size = _a.size, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, onClose = _a.onClose, _c = _a.overlaybg, overlaybg = _c === void 0 ? "blackAlpha.300" : _c, _d = _a.overlaybackdropFilter, overlaybackdropFilter = _d === void 0 ? "blur(10px) hue-rotate(90deg)" : _d, overlaybackdropInvert = _a.overlaybackdropInvert, overlaybackdropBlur = _a.overlaybackdropBlur, isCentered = _a.isCentered, finalFocusRef = _a.finalFocusRef, blockScrollOnMount = _a.blockScrollOnMount, initialFocusRef = _a.initialFocusRef, closeOnOverlayClick = _a.closeOnOverlayClick, motionPreset = _a.motionPreset, scrollBehavior = _a.scrollBehavior, children = _a.children, isLoading = _a.isLoading;
10
10
  if (!isOpen)
11
11
  return react_1.default.createElement(react_1.default.Fragment, null);
12
- var filterChildren = function (type) {
13
- return react_1.default.Children.map(children, function (child) {
14
- if (child.type === type)
15
- return child.props.children;
16
- }).filter(Boolean)[0]; // Get the first (and should be only) element's children
12
+ // const filterChildren = (type: string) => {
13
+ // return React.Children.map(children, (child) => {
14
+ // if (child.type === type) return child.props.children;
15
+ // }).filter(Boolean)[0]; // Get the first (and should be only) element's children
16
+ // };
17
+ // const headerContent = filterChildren("header");
18
+ // const bodyContent = filterChildren("body");
19
+ // const footerContent = filterChildren("footer");
20
+ var isReactElement = function (child) {
21
+ return child !== null && typeof child === "object" && "type" in child;
17
22
  };
18
- var headerContent = filterChildren("header");
19
- var bodyContent = filterChildren("body");
20
- var footerContent = filterChildren("footer");
23
+ var header = react_1.default.Children.toArray(children).find(function (child) { return isReactElement(child) && child.type === "header"; });
24
+ var body = react_1.default.Children.toArray(children).find(function (child) { return isReactElement(child) && child.type === "body"; });
25
+ var footer = react_1.default.Children.toArray(children).find(function (child) { return isReactElement(child) && child.type === "footer"; });
21
26
  return (react_1.default.createElement(react_2.Modal, { isOpen: true, onClose: onClose, size: size, isCentered: isCentered, finalFocusRef: finalFocusRef, blockScrollOnMount: blockScrollOnMount, initialFocusRef: initialFocusRef, closeOnOverlayClick: closeOnOverlayClick, motionPreset: motionPreset, scrollBehavior: scrollBehavior },
22
27
  react_1.default.createElement(react_2.ModalOverlay, { bg: overlaybg, backdropFilter: overlaybackdropFilter, backdropInvert: overlaybackdropInvert, backdropBlur: overlaybackdropBlur }),
23
28
  react_1.default.createElement(react_2.ModalContent, null, isLoading ? (react_1.default.createElement("div", { style: {
@@ -29,9 +34,9 @@ function Modal(_a) {
29
34
  padding: "25%",
30
35
  } },
31
36
  react_1.default.createElement(react_2.Spinner, { thickness: "4px", speed: "0.65s", emptyColor: "gray.200", color: "blue.500", size: "xl" }))) : (react_1.default.createElement(react_1.default.Fragment, null,
32
- headerContent && react_1.default.createElement(react_2.ModalHeader, null, headerContent),
37
+ header && react_1.default.createElement(react_2.ModalHeader, null, header),
33
38
  react_1.default.createElement(react_2.ModalCloseButton, null),
34
- react_1.default.createElement(react_2.ModalBody, null, bodyContent),
35
- footerContent && react_1.default.createElement(react_2.ModalFooter, null, footerContent))))));
39
+ react_1.default.createElement(react_2.ModalBody, null, body),
40
+ footer && react_1.default.createElement(react_2.ModalFooter, null, footer))))));
36
41
  }
37
42
  exports.default = Modal;
package/dist/Components/Modal/ModalProps.d.ts CHANGED
@@ -1,12 +1,11 @@
1
+ /// <reference types="react" />
1
2
  import { ModalProps } from "@chakra-ui/react";
2
3
  export type ChakraModelProps = Pick<ModalProps, "isOpen" | "onClose" | "finalFocusRef" | "blockScrollOnMount" | "initialFocusRef" | "closeOnOverlayClick" | "isCentered" | "motionPreset" | "scrollBehavior"> & {
3
- header?: any;
4
- footer?: any;
5
4
  overlaybg?: string;
6
5
  overlaybackdropFilter?: string;
7
6
  overlaybackdropInvert?: string;
8
7
  overlaybackdropBlur?: string;
9
8
  size: "xs" | "sm" | "md" | "lg" | "xl" | "full";
10
- children?: any;
9
+ children?: React.ReactNode;
11
10
  isLoading?: boolean;
12
11
  };
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, }: SelectSearchProps): React.JSX.Element;
3
+ export default function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnchange, id, name, label, inputStyle, dropdownStyle, }: SelectSearchProps): React.JSX.Element;
package/dist/Components/SelectSearch/SelectSearch.js CHANGED
@@ -33,23 +33,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
33
33
  var react_1 = __importStar(require("react"));
34
34
  var styled_1 = __importDefault(require("@emotion/styled"));
35
35
  var Container = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n position: relative;\n"], ["\n display: flex;\n flex-direction: column;\n position: relative;\n"])));
36
- var Input = styled_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding: 8px;\n border: 1px solid #ccc;\n border-radius: 4px;\n cursor: pointer;\n &:hover {\n border-color: #3182ce;\n }\n &:focus-visible,\n &:focus {\n border-color: #3182ce;\n // box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);\n outline: none;\n }\n"], ["\n padding: 8px;\n border: 1px solid #ccc;\n border-radius: 4px;\n cursor: pointer;\n &:hover {\n border-color: #3182ce;\n }\n &:focus-visible,\n &:focus {\n border-color: #3182ce;\n // box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);\n outline: none;\n }\n"])));
37
- var Dropdown = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n border: 1px solid #ccc;\n border-radius: 4px;\n background: white;\n max-height: 150px;\n overflow-y: auto;\n z-index: 1000;\n max-width: 50%;\n"], ["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n border: 1px solid #ccc;\n border-radius: 4px;\n background: white;\n max-height: 150px;\n overflow-y: auto;\n z-index: 1000;\n max-width: 50%;\n"])));
38
- var Option = styled_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding: 8px;\n cursor: pointer;\n &:hover {\n background: #3182ce24;\n }\n"], ["\n padding: 8px;\n cursor: pointer;\n &:hover {\n background: #3182ce24;\n }\n"])));
39
- var NoOptions = styled_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding: 8px;\n color: #999;\n"], ["\n padding: 8px;\n color: #999;\n"])));
36
+ var Label = styled_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n margin-bottom: 5px;\n font-weight: bold;\n"], ["\n display: block;\n margin-bottom: 5px;\n font-weight: bold;\n"])));
37
+ var Input = styled_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: 8px;\n border: 1px solid #ccc;\n border-radius: 4px;\n cursor: pointer;\n &:hover {\n border-color: #3182ce;\n }\n &:focus-visible,\n &:focus {\n border-color: #3182ce;\n outline: none;\n }\n"], ["\n padding: 8px;\n border: 1px solid #ccc;\n border-radius: 4px;\n cursor: pointer;\n &:hover {\n border-color: #3182ce;\n }\n &:focus-visible,\n &:focus {\n border-color: #3182ce;\n outline: none;\n }\n"])));
38
+ var Dropdown = styled_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: absolute;\n top: ", ";\n bottom: ", ";\n left: 0;\n right: 0;\n border: 1px solid #ccc;\n border-radius: 4px;\n background: white;\n max-height: 150px;\n overflow-y: auto;\n z-index: 1000;\n max-width: 50%;\n"], ["\n position: absolute;\n top: ", ";\n bottom: ", ";\n left: 0;\n right: 0;\n border: 1px solid #ccc;\n border-radius: 4px;\n background: white;\n max-height: 150px;\n overflow-y: auto;\n z-index: 1000;\n max-width: 50%;\n"])), function (props) { return (props.position === "below" ? "100%" : "auto"); }, function (props) { return (props.position === "above" ? "100%" : "auto"); });
39
+ var Option = styled_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding: 8px;\n cursor: pointer;\n &:hover {\n background: #3182ce24;\n }\n"], ["\n padding: 8px;\n cursor: pointer;\n &:hover {\n background: #3182ce24;\n }\n"])));
40
+ var NoOptions = styled_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n padding: 8px;\n color: #999;\n"], ["\n padding: 8px;\n color: #999;\n"])));
40
41
  function SelectSearch(_a) {
41
- var options = _a.options, _b = _a.initialSelectedOption, initialSelectedOption = _b === void 0 ? null : _b, onOptionSelect = _a.onOptionSelect;
42
+ 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;
42
43
  var _c = (0, react_1.useState)(initialSelectedOption ? initialSelectedOption.label : ""), inputValue = _c[0], setInputValue = _c[1];
43
44
  var _d = (0, react_1.useState)(false), isOpen = _d[0], setIsOpen = _d[1];
44
- // const [selectedOption, setSelectedOption] =
45
- // useState<MultiSelctOPtions | null>(initialSelectedOption);
45
+ var _e = (0, react_1.useState)("below"), position = _e[0], setPosition = _e[1];
46
+ // const [dropdownTop, setDropdownTop] = useState(0);
46
47
  var inputRef = (0, react_1.useRef)(null);
47
48
  var dropdownRef = (0, react_1.useRef)(null);
48
49
  var filteredOptions = options.filter(function (option) {
49
50
  return option.label.toLowerCase().includes(inputValue.toLowerCase());
50
51
  });
51
52
  var handleOptionClick = function (option) {
52
- // setSelectedOption(option);
53
53
  setInputValue(option.label);
54
54
  setIsOpen(false);
55
55
  onOptionSelect(option);
@@ -57,6 +57,7 @@ function SelectSearch(_a) {
57
57
  var handleInputChange = function (e) {
58
58
  setInputValue(e.target.value);
59
59
  setIsOpen(true);
60
+ inputOnchange(e.target.value);
60
61
  };
61
62
  var handleKeyDown = function (e) {
62
63
  if (e.key === "Enter") {
@@ -66,7 +67,31 @@ function SelectSearch(_a) {
66
67
  }
67
68
  }
68
69
  };
70
+ var updateDropdownPosition = function () {
71
+ if (inputRef.current && dropdownRef.current) {
72
+ var inputRect = inputRef.current.getBoundingClientRect();
73
+ var dropdownRect = dropdownRef.current.getBoundingClientRect();
74
+ var viewportHeight = window.innerHeight;
75
+ var spaceBelow = viewportHeight - inputRect.bottom + window.scrollY;
76
+ var spaceAbove = inputRect.top + window.scrollY;
77
+ if (spaceBelow >= dropdownRect.height) {
78
+ setPosition("below");
79
+ console.log("below");
80
+ }
81
+ else if (spaceAbove >= dropdownRect.height) {
82
+ setPosition("above");
83
+ console.log("above");
84
+ }
85
+ else {
86
+ setPosition("below");
87
+ console.log("below");
88
+ }
89
+ }
90
+ };
69
91
  (0, react_1.useEffect)(function () {
92
+ if (isOpen) {
93
+ updateDropdownPosition();
94
+ }
70
95
  var handleClickOutside = function (event) {
71
96
  if (inputRef.current &&
72
97
  dropdownRef.current &&
@@ -75,14 +100,29 @@ function SelectSearch(_a) {
75
100
  setIsOpen(false);
76
101
  }
77
102
  };
103
+ var handleScroll = function () {
104
+ if (isOpen) {
105
+ updateDropdownPosition();
106
+ }
107
+ };
108
+ var handleResize = function () {
109
+ if (isOpen) {
110
+ updateDropdownPosition();
111
+ }
112
+ };
78
113
  document.addEventListener("mousedown", handleClickOutside);
114
+ window.addEventListener("scroll", handleScroll);
115
+ window.addEventListener("resize", handleResize);
79
116
  return function () {
80
117
  document.removeEventListener("mousedown", handleClickOutside);
118
+ window.removeEventListener("scroll", handleScroll);
119
+ window.removeEventListener("resize", handleResize);
81
120
  };
82
- }, []);
121
+ }, [isOpen]);
83
122
  return (react_1.default.createElement(Container, null,
84
- react_1.default.createElement(Input, { ref: inputRef, value: inputValue, onClick: function () { return setIsOpen(true); }, onChange: handleInputChange, placeholder: "Select option", onKeyDown: handleKeyDown, id: "select-search", type: "text" }),
85
- isOpen && (react_1.default.createElement(Dropdown, { ref: dropdownRef }, filteredOptions.length > 0 ? (filteredOptions.map(function (option) { return (react_1.default.createElement(Option, { key: option.id, onClick: function () { return handleOptionClick(option); } }, option.label)); })) : (react_1.default.createElement(NoOptions, null, "No options found"))))));
123
+ react_1.default.createElement(Label, null, label),
124
+ react_1.default.createElement(Input, { ref: inputRef, value: inputValue, onClick: function () { return setIsOpen(true); }, onChange: handleInputChange, placeholder: "Select option", onKeyDown: handleKeyDown, id: id, type: "text", name: name, style: inputStyle }),
125
+ isOpen && (react_1.default.createElement(Dropdown, { ref: dropdownRef, style: dropdownStyle, position: position }, filteredOptions.length > 0 ? (filteredOptions.map(function (option) { return (react_1.default.createElement(Option, { key: option.id, onClick: function () { return handleOptionClick(option); } }, option.label)); })) : (react_1.default.createElement(NoOptions, null, "No options found"))))));
86
126
  }
87
127
  exports.default = SelectSearch;
88
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
128
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
package/dist/Components/SelectSearch/SelectSearchProps.d.ts CHANGED
@@ -1,8 +1,15 @@
1
+ /// <reference types="react" />
1
2
  export type SelectSearchProps = {
2
3
  options: MultiSelectOptions[];
3
4
  isSearchEnabled?: boolean;
4
5
  initialSelectedOption?: MultiSelectOptions | null;
5
6
  onOptionSelect: (option: MultiSelectOptions) => void;
7
+ inputOnchange: (value: string | number) => void;
8
+ id?: string;
9
+ name?: string;
10
+ label?: string;
11
+ inputStyle?: React.CSSProperties;
12
+ dropdownStyle?: React.CSSProperties;
6
13
  };
7
14
  export type MultiSelectOptions = {
8
15
  id: string;
package/dist/Layout.js CHANGED
@@ -594,7 +594,9 @@ var Layout = function () {
594
594
  id: "3",
595
595
  label: "clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3",
596
596
  },
597
- ], initialSelectedOption: { id: "1", label: "Option 1" }, onOptionSelect: handleSelectClick }),
597
+ ], inputOnchange: function (value) {
598
+ console.log(value);
599
+ }, initialSelectedOption: { id: "1", label: "Option 1" }, onOptionSelect: handleSelectClick, name: "hai" }),
598
600
  react_2.default.createElement("br", null),
599
601
  react_2.default.createElement("br", null),
600
602
  react_2.default.createElement("br", null),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "1.0.55",
3
+ "version": "1.0.57",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",