pixelize-design-library 2.0.15 → 2.0.16
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.
- package/dist/Components/Input/TextInput.js +2 -2
- package/dist/Components/Input/TextInput.styles.js +10 -1
- package/dist/Components/Input/TextInputProps.d.ts +2 -0
- package/dist/Components/SearchSelect/SearchSelect.js +33 -17
- package/dist/Components/SearchSelect/SearchSelectProps.d.ts +1 -0
- package/dist/Components/SearchSelect/SelectTruncatedLabel.d.ts +6 -0
- package/dist/Components/SearchSelect/SelectTruncatedLabel.js +45 -0
- package/dist/Pages/input.js +4 -2
- package/dist/Pages/searchSelect.js +7 -2
- package/package.json +1 -1
|
@@ -54,8 +54,8 @@ var FormLabel_1 = require("../Common/FormLabel");
|
|
|
54
54
|
var HelperText_1 = __importDefault(require("../Common/HelperText"));
|
|
55
55
|
var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
|
|
56
56
|
var TextInput = (0, react_1.forwardRef)(function (_a, ref) {
|
|
57
|
-
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 ? "
|
|
58
|
-
return (react_1.default.createElement(react_2.FormControl, { w: width },
|
|
57
|
+
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 ? "100%" : _g, _h = _a.height, height = _h === void 0 ? "2.75rem" : _h, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, onRightIconclick = _a.onRightIconclick, inputRightIcon = _a.inputRightIcon, inputLeftIcon = _a.inputLeftIcon, onLeftIconClick = _a.onLeftIconClick, inputGroupStyle = _a.inputGroupStyle, inputStyle = _a.inputStyle, _j = _a.size, size = _j === void 0 ? "md" : _j, _k = _a.isInformation, isInformation = _k === void 0 ? false : _k, informationMessage = _a.informationMessage, leftElementStyle = _a.leftElementStyle, rightElementStyle = _a.rightElementStyle, autoComplete = _a.autoComplete, minW = _a.minW, maxW = _a.maxW, props = __rest(_a, ["label", "type", "id", "name", "onChange", "onBlur", "onFocus", "isDisabled", "isReadOnly", "isRequired", "value", "placeholder", "width", "height", "error", "errorMessage", "helperText", "onRightIconclick", "inputRightIcon", "inputLeftIcon", "onLeftIconClick", "inputGroupStyle", "inputStyle", "size", "isInformation", "informationMessage", "leftElementStyle", "rightElementStyle", "autoComplete", "minW", "maxW"]);
|
|
58
|
+
return (react_1.default.createElement(react_2.FormControl, { w: width, minW: minW, maxW: maxW },
|
|
59
59
|
label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })),
|
|
60
60
|
react_1.default.createElement(react_2.InputGroup, { style: inputGroupStyle, height: height },
|
|
61
61
|
inputLeftIcon && (react_1.default.createElement(react_2.InputLeftElement, __assign({ onClick: onLeftIconClick, pointerEvents: onLeftIconClick ? "auto" : "none" }, leftElementStyle), inputLeftIcon)),
|
|
@@ -25,7 +25,7 @@ exports.Input = {
|
|
|
25
25
|
},
|
|
26
26
|
variants: {
|
|
27
27
|
outline: function (props) {
|
|
28
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
28
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
|
29
29
|
var theme = props.theme;
|
|
30
30
|
var errorColor = (_c = (_b = (_a = theme.colors.semantic) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b[500]) !== null && _c !== void 0 ? _c : "red.500";
|
|
31
31
|
var borderColor = (_e = (_d = theme.colors.boxborder) === null || _d === void 0 ? void 0 : _d[500]) !== null && _e !== void 0 ? _e : "gray.300";
|
|
@@ -64,6 +64,15 @@ exports.Input = {
|
|
|
64
64
|
_readOnly: {
|
|
65
65
|
boxShadow: 'inherit',
|
|
66
66
|
},
|
|
67
|
+
_disabled: {
|
|
68
|
+
bg: (_q = (_p = theme.colors.gray) === null || _p === void 0 ? void 0 : _p[100]) !== null && _q !== void 0 ? _q : "gray.100",
|
|
69
|
+
opacity: 1,
|
|
70
|
+
cursor: "not-allowed",
|
|
71
|
+
_hover: {
|
|
72
|
+
border: "0.063rem solid",
|
|
73
|
+
borderColor: borderColor,
|
|
74
|
+
},
|
|
75
|
+
},
|
|
67
76
|
},
|
|
68
77
|
};
|
|
69
78
|
},
|
|
@@ -44,18 +44,20 @@ var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
|
44
44
|
var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
|
|
45
45
|
var HelperText_1 = __importDefault(require("../Common/HelperText"));
|
|
46
46
|
var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
|
|
47
|
+
var SelectTruncatedLabel_1 = __importDefault(require("./SelectTruncatedLabel"));
|
|
47
48
|
var SearchSelect = function (_a) {
|
|
48
|
-
var _b, _c, _d, _e;
|
|
49
|
-
var id = _a.id, label = _a.label, options = _a.options, onSelect = _a.onSelect, onSearch = _a.onSearch,
|
|
50
|
-
var
|
|
51
|
-
var
|
|
52
|
-
var
|
|
49
|
+
var _b, _c, _d, _e, _f;
|
|
50
|
+
var id = _a.id, label = _a.label, options = _a.options, onSelect = _a.onSelect, onSearch = _a.onSearch, _g = _a.isOptionLoading, isOptionLoading = _g === void 0 ? false : _g, _h = _a.isLoading, isLoading = _h === void 0 ? false : _h, _j = _a.loadingText, loadingText = _j === void 0 ? 'Loading...' : _j, _k = _a.placeholder, placeholder = _k === void 0 ? 'Select' : _k, value = _a.value, _l = _a.searchQuery, searchQuery = _l === void 0 ? '' : _l, _m = _a.isMultiple, isMultiple = _m === void 0 ? false : _m, _o = _a.isRequired, isRequired = _o === void 0 ? false : _o, _p = _a.error, error = _p === void 0 ? false : _p, errorMessage = _a.errorMessage, helperText = _a.helperText, _q = _a.width, width = _q === void 0 ? '100%' : _q, _r = _a.size, size = _r === void 0 ? 'md' : _r, chip = _a.chip, information = _a.information, rightIcon = _a.rightIcon, addNew = _a.addNew, _s = _a.isSelectAll, isSelectAll = _s === void 0 ? false : _s, pagination = _a.pagination, insideSelect = _a.insideSelect;
|
|
51
|
+
var _t = (0, react_1.useState)(searchQuery), inputValue = _t[0], setInputValue = _t[1];
|
|
52
|
+
var _u = (0, react_1.useState)(false), isOpen = _u[0], setIsOpen = _u[1];
|
|
53
|
+
var _v = (0, react_1.useState)(true), hasMore = _v[0], setHasMore = _v[1];
|
|
53
54
|
var inputRef = (0, react_1.useRef)(null);
|
|
54
55
|
var containerRef = (0, react_1.useRef)(null);
|
|
55
56
|
var scrollTimeoutRef = (0, react_1.useRef)(null);
|
|
56
|
-
var
|
|
57
|
-
var
|
|
57
|
+
var _w = (0, react_1.useState)(false), focused = _w[0], setFocused = _w[1];
|
|
58
|
+
var _x = (0, react_1.useState)(false), customSelectOpen = _x[0], setCustomSelectOpen = _x[1];
|
|
58
59
|
var customSelectRef = (0, react_1.useRef)(null);
|
|
60
|
+
var _y = (0, react_1.useState)({ top: 0, left: 0, width: 0 }), customSelectPos = _y[0], setCustomSelectPos = _y[1];
|
|
59
61
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
60
62
|
(0, react_2.useOutsideClick)({
|
|
61
63
|
ref: containerRef,
|
|
@@ -143,25 +145,39 @@ var SearchSelect = function (_a) {
|
|
|
143
145
|
}, 200);
|
|
144
146
|
}
|
|
145
147
|
}, [pagination, options.length, inputValue, hasMore]);
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
});
|
|
150
|
-
var handleCustomSelect =
|
|
151
|
-
setCustomSelectOpen(false);
|
|
148
|
+
// useOutsideClick({
|
|
149
|
+
// ref: customSelectRef,
|
|
150
|
+
// handler: () => setCustomSelectOpen(false),
|
|
151
|
+
// });
|
|
152
|
+
var handleCustomSelect = function (item) {
|
|
152
153
|
if (typeof (insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.onSelect) === 'function') {
|
|
153
154
|
insideSelect.onSelect(item);
|
|
154
155
|
}
|
|
155
|
-
|
|
156
|
+
setCustomSelectOpen(false);
|
|
157
|
+
};
|
|
158
|
+
(0, react_1.useEffect)(function () {
|
|
159
|
+
if (customSelectOpen && customSelectRef.current) {
|
|
160
|
+
var rect = customSelectRef.current.getBoundingClientRect();
|
|
161
|
+
setCustomSelectPos({
|
|
162
|
+
top: rect.bottom + window.scrollY,
|
|
163
|
+
left: rect.left + window.scrollX,
|
|
164
|
+
width: rect.width + 30,
|
|
165
|
+
});
|
|
166
|
+
}
|
|
167
|
+
}, [customSelectOpen]);
|
|
156
168
|
return (react_1.default.createElement(react_2.Box, { ref: containerRef, width: width, position: "relative" },
|
|
157
169
|
label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: information === null || information === void 0 ? void 0 : information.isInformation, informationMessage: information === null || information === void 0 ? void 0 : information.informationMessage })),
|
|
158
170
|
react_1.default.createElement(react_2.InputGroup, { size: size },
|
|
159
171
|
react_1.default.createElement(react_2.Box, { as: "div", w: "100%", minH: "2.375rem", px: 3, display: "flex", alignItems: "center", flexWrap: "wrap", gap: "0.375rem", border: "0.063rem solid", borderColor: error ? theme.colors.semantic.error[500] : theme.colors.primary[500], borderRadius: "0.25rem", bg: "white", boxShadow: focused ? error ? "0 0 0 0.125rem ".concat((_b = theme.colors.boxShadow) === null || _b === void 0 ? void 0 : _b.error) : "0 0 0 0.125rem ".concat((_c = theme.colors.boxShadow) === null || _c === void 0 ? void 0 : _c.primary) : 'none', transition: "box-shadow 0.2s, border-color 0.2s" },
|
|
160
172
|
insideSelect && (react_1.default.createElement(react_2.Box, { position: "relative", px: 2, py: 2.5, ref: customSelectRef, backgroundColor: theme.colors.gray[200], ml: "-12px", h: "-webkit-fill-available", borderRadius: "0.25rem 0 0 0.25rem", onClick: function () { return setCustomSelectOpen(function (prev) { return !prev; }); } },
|
|
161
|
-
react_1.default.createElement(react_2.Box, { minW: "
|
|
162
|
-
react_1.default.createElement(
|
|
173
|
+
react_1.default.createElement(react_2.Box, { minW: "5rem", fontSize: "sm", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", width: insideSelect.width },
|
|
174
|
+
react_1.default.createElement(SelectTruncatedLabel_1.default, { label: (_e = (_d = insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.value) === null || _d === void 0 ? void 0 : _d.label) !== null && _e !== void 0 ? _e : "", maxWidth: (insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.width) || "6rem" }),
|
|
163
175
|
customSelectOpen ? react_1.default.createElement(lucide_react_1.ChevronUp, { size: 16 }) : react_1.default.createElement(lucide_react_1.ChevronDown, { size: 16 })),
|
|
164
|
-
customSelectOpen && (react_1.default.createElement(react_2.
|
|
176
|
+
customSelectOpen && (react_1.default.createElement(react_2.Portal, null,
|
|
177
|
+
react_1.default.createElement(react_2.Box, { position: "absolute", top: "".concat(customSelectPos.top, "px"), left: "".concat(customSelectPos.left, "px"), zIndex: 20, bg: "white", border: "1px solid", borderColor: "gray.300", borderRadius: "md", boxShadow: "md", minW: "10rem", maxWidth: "38rem" }, (_f = insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.option) === null || _f === void 0 ? void 0 : _f.map(function (item) { return (react_1.default.createElement(react_2.Box, { key: item.id, px: 3, py: 2, fontSize: "sm", _hover: { bg: 'gray.100' }, cursor: "pointer", onClick: function (e) {
|
|
178
|
+
e.stopPropagation(); // 👈 Prevent outside click from triggering
|
|
179
|
+
handleCustomSelect(item);
|
|
180
|
+
} }, item.label)); })))))),
|
|
165
181
|
isMultiple
|
|
166
182
|
? selectedValues.slice(0, (chip === null || chip === void 0 ? void 0 : chip.maxChips) || selectedValues.length).map(function (item) { return (react_1.default.createElement(Tag_1.default, { key: item.id, label: (chip === null || chip === void 0 ? void 0 : chip.maxText) && item.label.length > chip.maxText
|
|
167
183
|
? item.label.slice(0, chip.maxText) + '…'
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
|
+
};
|
|
28
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
+
var react_1 = require("@chakra-ui/react");
|
|
30
|
+
var react_2 = __importStar(require("react"));
|
|
31
|
+
var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
|
|
32
|
+
var SelectTruncatedLabel = function (_a) {
|
|
33
|
+
var label = _a.label, _b = _a.maxWidth, maxWidth = _b === void 0 ? "6rem" : _b;
|
|
34
|
+
var textRef = (0, react_2.useRef)(null);
|
|
35
|
+
var _c = (0, react_2.useState)(false), isOverflowing = _c[0], setIsOverflowing = _c[1];
|
|
36
|
+
(0, react_2.useEffect)(function () {
|
|
37
|
+
var el = textRef.current;
|
|
38
|
+
if (el) {
|
|
39
|
+
setIsOverflowing(el.scrollWidth > el.clientWidth);
|
|
40
|
+
}
|
|
41
|
+
}, [label, maxWidth]);
|
|
42
|
+
var textElement = (react_2.default.createElement(react_1.Text, { ref: textRef, maxW: maxWidth, isTruncated: true, whiteSpace: "nowrap" }, label));
|
|
43
|
+
return isOverflowing ? react_2.default.createElement(ToolTip_1.default, { label: label, placement: "top" }, textElement) : textElement;
|
|
44
|
+
};
|
|
45
|
+
exports.default = SelectTruncatedLabel;
|
package/dist/Pages/input.js
CHANGED
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
var react_1 = __importDefault(require("react"));
|
|
7
7
|
var TextInput_1 = __importDefault(require("../Components/Input/TextInput"));
|
|
8
8
|
var InputPage = function () {
|
|
9
|
-
return (react_1.default.createElement("div",
|
|
9
|
+
return (react_1.default.createElement("div", { style: { width: "500px" } },
|
|
10
10
|
react_1.default.createElement(TextInput_1.default, { label: "My Label", id: "input1", name: "hello",
|
|
11
11
|
//helperText="Hello"
|
|
12
12
|
//errorMessage="Required"
|
|
@@ -35,6 +35,8 @@ var InputPage = function () {
|
|
|
35
35
|
console.log("blur");
|
|
36
36
|
},
|
|
37
37
|
// helperText="sometibg"
|
|
38
|
-
isRequired: true, informationMessage: "This is information", isInformation: true
|
|
38
|
+
isRequired: true, informationMessage: "This is information", isInformation: true,
|
|
39
|
+
// isDisabled
|
|
40
|
+
minW: "200px", maxW: "300px" })));
|
|
39
41
|
};
|
|
40
42
|
exports.default = InputPage;
|
|
@@ -89,10 +89,14 @@ var SearchSelect = function () {
|
|
|
89
89
|
var _d = (0, react_1.useState)(false), paginationLoading = _d[0], setpaginationLoading = _d[1];
|
|
90
90
|
var _e = (0, react_1.useState)({ id: "3", label: "Hariharan J" }), customSelectValue = _e[0], setCustomSelectValue = _e[1];
|
|
91
91
|
return (react_1.default.createElement("div", null,
|
|
92
|
-
react_1.default.createElement(SearchSelect_1.default
|
|
92
|
+
react_1.default.createElement(SearchSelect_1.default
|
|
93
|
+
// width={"200px"}
|
|
94
|
+
, {
|
|
95
|
+
// width={"200px"}
|
|
96
|
+
label: "Users", id: "user-select", options: soptions, value: selectedOptions, isMultiple: true, onSelect: function (val) {
|
|
93
97
|
console.log("val", val);
|
|
94
98
|
setselectedOptions(val);
|
|
95
|
-
}, onSearch: function (query) { return setSearch(query); }, isOptionLoading: false, placeholder: "Search users...",
|
|
99
|
+
}, onSearch: function (query) { return setSearch(query); }, searchQuery: search, isOptionLoading: false, placeholder: "Search users...", chip: {
|
|
96
100
|
maxChips: 3,
|
|
97
101
|
onClick: function () { return console.log("chip removed"); },
|
|
98
102
|
}, isSelectAll: true, pagination: {
|
|
@@ -137,6 +141,7 @@ var SearchSelect = function () {
|
|
|
137
141
|
// error={true}
|
|
138
142
|
// errorMessage="hello"
|
|
139
143
|
virtualization: true, insideSelect: {
|
|
144
|
+
width: "50px",
|
|
140
145
|
onSelect: function (val) { return setCustomSelectValue(val); },
|
|
141
146
|
value: customSelectValue,
|
|
142
147
|
option: [
|