pixelize-design-library 2.3.1-beta.17 → 2.3.1-beta.18
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.
|
@@ -39,7 +39,9 @@
|
|
|
39
39
|
"Bash(./node_modules/.bin/tsc --noEmit --skipLibCheck)",
|
|
40
40
|
"Bash(./node_modules/.bin/tsc --noEmit)",
|
|
41
41
|
"Bash(echo \"tsc exit: $?\")",
|
|
42
|
-
"Bash(echo \"local tsc exit: $?\")"
|
|
42
|
+
"Bash(echo \"local tsc exit: $?\")",
|
|
43
|
+
"Bash(ls -la src/pages/Tasks/TaskComponent/)",
|
|
44
|
+
"Bash(wc -l src/pages/Tasks/TaskComponent/*.tsx)"
|
|
43
45
|
],
|
|
44
46
|
"additionalDirectories": [
|
|
45
47
|
"/private/tmp",
|
|
@@ -50,58 +50,110 @@ var framer_motion_1 = require("framer-motion");
|
|
|
50
50
|
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
51
51
|
var lucide_react_1 = require("lucide-react");
|
|
52
52
|
var MotionBox = (0, framer_motion_1.motion)((0, react_1.forwardRef)(function (props, ref) { return (react_1.default.createElement(react_2.Box, __assign({ ref: ref }, props))); }));
|
|
53
|
+
// Size scale (mirrors the Button sizes). `btn` is the Chakra Button size.
|
|
54
|
+
var SIZE_MAP = {
|
|
55
|
+
xs: { btn: "xs", fontSize: "0.75rem", py: 1, px: 2.5, img: "1rem", chevron: 13, minW: "8rem", gap: 1.5 },
|
|
56
|
+
sm: { btn: "sm", fontSize: "0.8125rem", py: 1.5, px: 3, img: "1.05rem", chevron: 14, minW: "9rem", gap: 2 },
|
|
57
|
+
md: { btn: "md", fontSize: "0.875rem", py: 2, px: 3, img: "1.15rem", chevron: 16, minW: "11rem", gap: 2 },
|
|
58
|
+
lg: { btn: "lg", fontSize: "0.9375rem", py: 2.5, px: 3.5, img: "1.25rem", chevron: 18, minW: "12rem", gap: 2.5 },
|
|
59
|
+
xl: { btn: "lg", fontSize: "1.0625rem", py: 3, px: 4, img: "1.4rem", chevron: 20, minW: "13rem", gap: 3 },
|
|
60
|
+
};
|
|
53
61
|
var Dropdown = (0, react_1.forwardRef)(function (_a, ref) {
|
|
54
|
-
var
|
|
62
|
+
var _b, _c;
|
|
63
|
+
var dropDownButtonStyle = _a.dropDownButtonStyle, ButtonText = _a.ButtonText, options = _a.options, handleOptionSelect = _a.handleOptionSelect, _d = _a.dropdownType, dropdownType = _d === void 0 ? "button" : _d, text = _a.text, DropdownIcon = _a.DropdownIcon, _e = _a.isVisibleIconShow, isVisibleIconShow = _e === void 0 ? true : _e, buttonProps = _a.buttonProps, headStyle = _a.headStyle, ListStyle = _a.ListStyle, ItemStyle = _a.ItemStyle, LabelStyle = _a.LabelStyle, ImageStyle = _a.ImageStyle, size = _a.size, optionsSize = _a.optionsSize, _f = _a.divider, divider = _f === void 0 ? false : _f;
|
|
55
64
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
56
|
-
var
|
|
65
|
+
var _g = (0, react_2.useDisclosure)(), isOpen = _g.isOpen, onToggle = _g.onToggle, onClose = _g.onClose;
|
|
57
66
|
var dropdownRef = (0, react_1.useRef)(null);
|
|
67
|
+
var menuRef = (0, react_1.useRef)(null);
|
|
68
|
+
var _h = (0, react_1.useState)({ top: 0, left: 0, width: 0 }), menuPos = _h[0], setMenuPos = _h[1];
|
|
69
|
+
var s = (_c = SIZE_MAP[(_b = size !== null && size !== void 0 ? size : optionsSize) !== null && _b !== void 0 ? _b : "md"]) !== null && _c !== void 0 ? _c : SIZE_MAP.md;
|
|
58
70
|
var handleListItemClick = function (optionId, optionLabel) {
|
|
59
71
|
onClose();
|
|
60
72
|
handleOptionSelect(optionId, optionLabel);
|
|
61
73
|
};
|
|
74
|
+
// The menu is portaled to <body> (so it sits above everything). Anchor it to
|
|
75
|
+
// the trigger and keep it anchored while the page/ancestors scroll or resize.
|
|
76
|
+
var updateMenuPos = (0, react_1.useCallback)(function () {
|
|
77
|
+
if (!dropdownRef.current)
|
|
78
|
+
return;
|
|
79
|
+
var r = dropdownRef.current.getBoundingClientRect();
|
|
80
|
+
setMenuPos({ top: r.bottom, left: r.left, width: r.width });
|
|
81
|
+
}, []);
|
|
82
|
+
(0, react_1.useEffect)(function () {
|
|
83
|
+
if (!isOpen)
|
|
84
|
+
return;
|
|
85
|
+
updateMenuPos();
|
|
86
|
+
window.addEventListener("scroll", updateMenuPos, true);
|
|
87
|
+
window.addEventListener("resize", updateMenuPos);
|
|
88
|
+
return function () {
|
|
89
|
+
window.removeEventListener("scroll", updateMenuPos, true);
|
|
90
|
+
window.removeEventListener("resize", updateMenuPos);
|
|
91
|
+
};
|
|
92
|
+
}, [isOpen, updateMenuPos]);
|
|
62
93
|
(0, react_1.useEffect)(function () {
|
|
63
94
|
var handleClickOutside = function (event) {
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
95
|
+
var _a, _b;
|
|
96
|
+
var target = event.target;
|
|
97
|
+
// Ignore clicks on the trigger or inside the (portaled) menu.
|
|
98
|
+
if ((_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(target))
|
|
99
|
+
return;
|
|
100
|
+
if ((_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.contains(target))
|
|
101
|
+
return;
|
|
102
|
+
onClose();
|
|
68
103
|
};
|
|
69
104
|
document.addEventListener("mousedown", handleClickOutside);
|
|
70
105
|
return function () {
|
|
71
106
|
document.removeEventListener("mousedown", handleClickOutside);
|
|
72
107
|
};
|
|
73
|
-
}, [
|
|
108
|
+
}, [onClose]);
|
|
109
|
+
var setMenuRef = function (node) {
|
|
110
|
+
menuRef.current = node;
|
|
111
|
+
if (typeof ref === "function")
|
|
112
|
+
ref(node);
|
|
113
|
+
else if (ref)
|
|
114
|
+
ref.current = node;
|
|
115
|
+
};
|
|
116
|
+
var Chevron = isVisibleIconShow ? (react_1.default.createElement(react_2.Box, { as: "span", display: "inline-flex", transition: "transform 0.2s ease", transform: isOpen ? "rotate(180deg)" : "rotate(0deg)" },
|
|
117
|
+
react_1.default.createElement(lucide_react_1.ChevronDown, { size: s.chevron }))) : undefined;
|
|
74
118
|
var dropDownToggleOption = function () {
|
|
75
|
-
var
|
|
76
|
-
|
|
77
|
-
"
|
|
78
|
-
|
|
79
|
-
|
|
119
|
+
var _a, _b, _c, _d;
|
|
120
|
+
var ButtonToggle = (react_1.default.createElement(react_2.Button, __assign({ onClick: onToggle, size: s.btn, colorScheme: "primary", borderRadius: "0.5rem", fontWeight: 600, "aria-haspopup": "menu", "aria-expanded": isOpen, rightIcon: Chevron, sx: __assign({ transition: "all 0.15s ease" }, dropDownButtonStyle) }, buttonProps),
|
|
121
|
+
react_1.default.createElement(react_2.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: DropdownIcon && ButtonText ? s.gap : 0 },
|
|
122
|
+
DropdownIcon,
|
|
123
|
+
ButtonText)));
|
|
124
|
+
var TextToggle = (react_1.default.createElement(react_2.Flex, { onClick: onToggle, align: "center", gap: 1.5, cursor: "pointer", fontSize: s.fontSize, fontWeight: 500, color: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b[700], transition: "color 0.15s ease", _hover: { color: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.primary) === null || _d === void 0 ? void 0 : _d[600] }, style: dropDownButtonStyle, role: "button", "aria-haspopup": "menu", "aria-expanded": isOpen },
|
|
80
125
|
DropdownIcon,
|
|
81
|
-
" ",
|
|
82
126
|
text,
|
|
83
|
-
|
|
127
|
+
Chevron));
|
|
84
128
|
return dropdownType === "button" ? ButtonToggle : TextToggle;
|
|
85
129
|
};
|
|
86
130
|
var DropdownContentRender = function () {
|
|
87
|
-
var _a, _b, _c;
|
|
88
|
-
return (react_1.default.createElement(react_2.List, { bg: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
"
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
131
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
132
|
+
return (react_1.default.createElement(react_2.List, { bg: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.white) !== null && _b !== void 0 ? _b : "#fff", border: "0.063rem solid ".concat((_e = (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.boxborder) === null || _d === void 0 ? void 0 : _d[200]) !== null && _e !== void 0 ? _e : (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.gray[200]), borderRadius: "0.625rem", boxShadow: (_g = theme.shadows) === null || _g === void 0 ? void 0 : _g.lg, py: 1.5, mt: "0.375rem", minWidth: s.minW, maxH: "18rem", overflowY: "auto", overflowX: "hidden", sx: {
|
|
133
|
+
scrollbarWidth: "thin",
|
|
134
|
+
scrollbarColor: "".concat((_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.gray) === null || _j === void 0 ? void 0 : _j[300], " transparent"),
|
|
135
|
+
"&::-webkit-scrollbar": { width: "6px" },
|
|
136
|
+
"&::-webkit-scrollbar-thumb": {
|
|
137
|
+
background: (_l = (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.gray) === null || _l === void 0 ? void 0 : _l[300],
|
|
138
|
+
borderRadius: "3px",
|
|
139
|
+
},
|
|
140
|
+
"&::-webkit-scrollbar-thumb:hover": { background: (_o = (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.gray) === null || _o === void 0 ? void 0 : _o[400] },
|
|
141
|
+
}, style: ListStyle }, options.map(function (option) {
|
|
142
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
|
|
143
|
+
return (react_1.default.createElement(react_2.ListItem, { key: option.id, onClick: function () { return handleListItemClick(option.id, option.label); }, mx: 1.5, px: s.px, py: s.py, borderRadius: "0.375rem", display: "flex", alignItems: "center", gap: 2, cursor: "pointer", color: (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b[700]) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray) === null || _e === void 0 ? void 0 : _e[700], transition: "background 0.12s ease, color 0.12s ease", _hover: {
|
|
144
|
+
bg: (_j = (_h = (_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.primary) === null || _g === void 0 ? void 0 : _g.opacity) === null || _h === void 0 ? void 0 : _h[8]) !== null && _j !== void 0 ? _j : (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.gray[100],
|
|
145
|
+
color: (_o = (_m = (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.primary) === null || _m === void 0 ? void 0 : _m[700]) !== null && _o !== void 0 ? _o : (_q = (_p = theme.colors) === null || _p === void 0 ? void 0 : _p.primary) === null || _q === void 0 ? void 0 : _q[600],
|
|
146
|
+
}, borderBottom: divider
|
|
147
|
+
? "0.063rem solid ".concat((_t = (_s = (_r = theme.colors) === null || _r === void 0 ? void 0 : _r.boxborder) === null || _s === void 0 ? void 0 : _s[100]) !== null && _t !== void 0 ? _t : (_u = theme.colors) === null || _u === void 0 ? void 0 : _u.gray[200])
|
|
148
|
+
: undefined, sx: { "&:last-child": { borderBottom: "none" } }, style: ItemStyle },
|
|
149
|
+
(option === null || option === void 0 ? void 0 : option.image) && (react_1.default.createElement(react_2.Box, { as: option.image, boxSize: s.img, flexShrink: 0, color: (_w = (_v = theme.colors) === null || _v === void 0 ? void 0 : _v.gray) === null || _w === void 0 ? void 0 : _w[500], style: ImageStyle })),
|
|
150
|
+
react_1.default.createElement(react_2.Box, { as: "span", fontSize: s.fontSize, isTruncated: true, style: LabelStyle }, option.label)));
|
|
100
151
|
})));
|
|
101
152
|
};
|
|
102
153
|
return (react_1.default.createElement(react_2.Box, { ref: dropdownRef, position: "relative", display: "inline-block" },
|
|
103
154
|
dropDownToggleOption(),
|
|
104
|
-
isOpen && (react_1.default.createElement(
|
|
155
|
+
isOpen && (react_1.default.createElement(react_2.Portal, null,
|
|
156
|
+
react_1.default.createElement(MotionBox, { ref: setMenuRef, position: "fixed", top: "".concat(menuPos.top, "px"), left: "".concat(menuPos.left, "px"), minW: "".concat(menuPos.width, "px"), zIndex: 1500, initial: { opacity: 0, y: -6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, style: headStyle }, DropdownContentRender())))));
|
|
105
157
|
});
|
|
106
158
|
Dropdown.displayName = "Dropdown";
|
|
107
159
|
exports.default = Dropdown;
|
|
@@ -14,7 +14,10 @@ export type DropdownProps = {
|
|
|
14
14
|
ItemStyle?: React.CSSProperties;
|
|
15
15
|
LabelStyle?: React.CSSProperties;
|
|
16
16
|
ImageStyle?: React.CSSProperties;
|
|
17
|
-
|
|
17
|
+
/** Overall size of the trigger + options (like Button sizes). */
|
|
18
|
+
size?: "xs" | "sm" | "md" | "lg" | "xl";
|
|
19
|
+
/** @deprecated Use `size` instead. Kept for backward compatibility. */
|
|
20
|
+
optionsSize?: "sm" | "md" | "lg";
|
|
18
21
|
divider?: boolean;
|
|
19
22
|
};
|
|
20
23
|
type Option = {
|
|
@@ -112,9 +112,9 @@ var CreateOrgModal = function (_a) {
|
|
|
112
112
|
react_1.default.createElement(react_2.ModalCloseButton, null),
|
|
113
113
|
react_1.default.createElement(react_2.ModalBody, { py: 6 },
|
|
114
114
|
react_1.default.createElement(react_2.VStack, { spacing: 4, align: "stretch" },
|
|
115
|
-
react_1.default.createElement(TextInput_1.default, { label: labels.companyName, value: values.company_name, onChange: function (e) { return setField("company_name", e.target.value); }, isRequired: true, width: "100%", error: !!errors.company_name, errorMessage: errors.company_name }),
|
|
116
|
-
react_1.default.createElement(TextInput_1.default, { label: labels.companyAddress, value: values.company_address, onChange: function (e) { return setField("company_address", e.target.value); }, isRequired: true, width: "100%", error: !!errors.company_address, errorMessage: errors.company_address }),
|
|
117
|
-
react_1.default.createElement(TextInput_1.default, { label: labels.phone, value: values.phone, onChange: function (e) { return setField("phone", e.target.value); }, isRequired: true, width: "100%", error: !!errors.phone, errorMessage: errors.phone })),
|
|
115
|
+
react_1.default.createElement(TextInput_1.default, { label: labels.companyName, value: values.company_name, onChange: function (e) { return setField("company_name", e.target.value); }, isRequired: true, width: "100%", placeholder: "Enter Company Name", error: !!errors.company_name, errorMessage: errors.company_name }),
|
|
116
|
+
react_1.default.createElement(TextInput_1.default, { label: labels.companyAddress, value: values.company_address, onChange: function (e) { return setField("company_address", e.target.value); }, isRequired: true, width: "100%", placeholder: "Enter Company Address", error: !!errors.company_address, errorMessage: errors.company_address }),
|
|
117
|
+
react_1.default.createElement(TextInput_1.default, { label: labels.phone, value: values.phone, onChange: function (e) { return setField("phone", e.target.value); }, isRequired: true, width: "100%", placeholder: "Enter Phone Number", error: !!errors.phone, errorMessage: errors.phone })),
|
|
118
118
|
react_1.default.createElement(react_2.HStack, { justifyContent: "center", spacing: 4, mt: 6 },
|
|
119
119
|
react_1.default.createElement(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm" }),
|
|
120
120
|
react_1.default.createElement(Button_1.default, { label: labels.submit, onClick: handleSubmit, colorScheme: "primary", size: "sm", isLoading: isLoading }))))));
|