tenjin-ui-kit 0.3.73 → 0.3.74
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/README.md +13 -13
- package/common/hooks/apiHooks.js +199 -91
- package/common/hooks/newApiHook.js +258 -127
- package/common/utils/security/index.js +2 -2
- package/common/utils/security/securityConfig.js +2 -1
- package/components/Canvas.js +101 -172
- package/components/DragBox/index.js +31 -21
- package/components/InputWithChip/index.js +83 -178
- package/components/RightContext/index.css +20 -20
- package/components/RightContext/index.js +41 -17
- package/components/WorkFlow.js +29 -19
- package/components/WorkFlowBuilder.js +56 -32
- package/components/alert/Style.js +14 -11
- package/components/alert/index.js +14 -8
- package/components/attachment/index.js +31 -26
- package/components/authenticationProvider/AuthError.js +4 -3
- package/components/authenticationProvider/AuthLoader.js +4 -3
- package/components/authenticationProvider/index.js +130 -58
- package/components/avatar/index.js +23 -24
- package/components/avatar/styles.js +77 -76
- package/components/breadCrumbs/index.js +89 -64
- package/components/breadCrumbs/style.js +4 -1
- package/components/browsingTestCaseLayout/DetailsViewLayout/DetailsViewContent/index.js +6 -7
- package/components/browsingTestCaseLayout/DetailsViewLayout/DetailsViewContent/style.js +8 -5
- package/components/browsingTestCaseLayout/DetailsViewLayout/DetailsViewHeader/index.js +6 -7
- package/components/browsingTestCaseLayout/TreeViewLayout/TreeViewContent/Index.js +7 -8
- package/components/browsingTestCaseLayout/TreeViewLayout/TreeViewHeader/Index.js +7 -8
- package/components/browsingTestCaseLayout/TreeViewLayout/TreeViewHeader/style.js +19 -16
- package/components/browsingTestCaseLayout/index.js +46 -30
- package/components/browsingTestCaseLayout/style.css +82 -82
- package/components/button/index.js +58 -47
- package/components/chatBotModal/index.js +61 -40
- package/components/checkBox/index.js +10 -8
- package/components/combobox/index.js +216 -182
- package/components/divider/index.js +18 -9
- package/components/editableField/index.js +46 -19
- package/components/error/index.js +12 -6
- package/components/errorBoundary/index.js +98 -74
- package/components/fileUploader/index.js +58 -46
- package/components/fileUploader/style.js +49 -46
- package/components/filter/ValueSelector.js +243 -148
- package/components/filter/index.js +66 -43
- package/components/iconButton/index.js +4 -3
- package/components/input/index.js +74 -60
- package/components/layout/index.js +49 -36
- package/components/layout/main/index.js +14 -13
- package/components/layout/main/style.js +14 -11
- package/components/layout/pageContent/index.js +7 -8
- package/components/layout/sidebar/FlatMenu.js +47 -51
- package/components/layout/sidebar/GroupedIconMenu.js +194 -169
- package/components/layout/sidebar/GroupedMenu.js +50 -45
- package/components/layout/sidebar/ProjectMenu.js +185 -165
- package/components/layout/sidebar/index.js +26 -27
- package/components/layout/sidebar/style.js +143 -138
- package/components/layout/topBar/ProjectTopbar.js +119 -86
- package/components/layout/topBar/UserAvatar.js +65 -51
- package/components/layout/topBar/index.js +41 -23
- package/components/loader/index.js +12 -9
- package/components/menu/index.js +42 -23
- package/components/modal/Modal.js +6 -5
- package/components/modal/index.js +20 -16
- package/components/modal/style.js +56 -53
- package/components/optionMenu/index.js +72 -57
- package/components/pagination/index.js +43 -23
- package/components/pagination/style.js +28 -25
- package/components/paginationUpdated/index.js +26 -19
- package/components/paper/index.js +22 -20
- package/components/paper/style.js +27 -24
- package/components/reactSelect/index.js +97 -64
- package/components/reactSelect/style.js +151 -131
- package/components/richTextEditor/index.js +48 -24
- package/components/select/GroupedSelect.js +100 -56
- package/components/select/SimpleSelect.js +99 -59
- package/components/select/index.js +69 -56
- package/components/simpleSelect/index.js +22 -18
- package/components/sort/index.js +36 -23
- package/components/switch/index.js +15 -14
- package/components/switch/style.js +32 -29
- package/components/switch/switch.js +47 -30
- package/components/table/ReactTable.js +83 -59
- package/components/table/SimpleTable.js +91 -67
- package/components/table/index.js +206 -300
- package/components/text/index.js +30 -22
- package/components/timeStamp/index.js +6 -4
- package/components/timeStamp/style.js +15 -12
- package/components/topBar/index.js +102 -86
- package/components/tree/index.js +58 -30
- package/components/tree/style.js +23 -20
- package/components/valuePicker/ValueSelector.js +160 -78
- package/components/valuePicker/index.js +50 -30
- package/components/wrapperLayout/layout/index.js +7 -8
- package/components/wrapperLayout/main/index.js +7 -8
- package/components/wrapperLayout/main/pageContainer/index.js +5 -6
- package/components/wrapperLayout/main/sideBar/index.js +175 -171
- package/components/wrapperLayout/main/sideBar/style.js +183 -177
- package/components/wrapperLayout/topBar/UserAvatar.js +5 -6
- package/components/wrapperLayout/topBar/avatar.js +18 -15
- package/components/wrapperLayout/topBar/index.js +107 -115
- package/components/wrapperLayout/topBar/menuIcon.js +5 -6
- package/components/wrapperLayout/topBar/style.js +64 -63
- package/http/index.js +188 -92
- package/index.js +55 -53
- package/package.json +124 -125
- package/templates/listPage/index.js +196 -168
- package/themes/default.js +7 -5
- package/themes/defaultSmall.js +3 -2
- package/themes/responsiveTheme.js +8 -6
|
@@ -9,18 +9,31 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
9
9
|
var _material = require("@mui/material");
|
|
10
10
|
var _styles = require("@mui/material/styles");
|
|
11
11
|
var _KeyboardArrowDown = _interopRequireDefault(require("@mui/icons-material/KeyboardArrowDown"));
|
|
12
|
-
function _interopRequireDefault(
|
|
13
|
-
function
|
|
14
|
-
function
|
|
12
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
14
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
15
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
16
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
17
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
18
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
19
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
20
|
+
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
21
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
22
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
23
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
24
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
25
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
26
|
+
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
27
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
15
28
|
// Styled components to match the Tailwind design
|
|
16
|
-
|
|
17
|
-
shouldForwardProp:
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
29
|
+
var StyledTextField = (0, _styles.styled)(_material.TextField, {
|
|
30
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
31
|
+
return prop !== "error" && prop !== "loading";
|
|
32
|
+
}
|
|
33
|
+
})(function (_ref) {
|
|
34
|
+
var theme = _ref.theme,
|
|
35
|
+
error = _ref.error,
|
|
36
|
+
loading = _ref.loading;
|
|
24
37
|
return {
|
|
25
38
|
"& .MuiOutlinedInput-root": {
|
|
26
39
|
backgroundColor: loading ? "#f9fafb" : "#ffffff",
|
|
@@ -38,7 +51,7 @@ const StyledTextField = (0, _styles.styled)(_material.TextField, {
|
|
|
38
51
|
borderWidth: "1px"
|
|
39
52
|
},
|
|
40
53
|
"&.Mui-focused": {
|
|
41
|
-
boxShadow: error ?
|
|
54
|
+
boxShadow: error ? "0 0 0 1px ".concat(theme.palette.error.main) : "0 0 0 1px ".concat(theme.palette.primary.main)
|
|
42
55
|
}
|
|
43
56
|
},
|
|
44
57
|
"& .MuiOutlinedInput-input": {
|
|
@@ -57,10 +70,8 @@ const StyledTextField = (0, _styles.styled)(_material.TextField, {
|
|
|
57
70
|
}
|
|
58
71
|
};
|
|
59
72
|
});
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
theme
|
|
63
|
-
} = _ref2;
|
|
73
|
+
var StyledPaper = (0, _styles.styled)(_material.Paper)(function (_ref2) {
|
|
74
|
+
var theme = _ref2.theme;
|
|
64
75
|
return {
|
|
65
76
|
marginTop: "4px",
|
|
66
77
|
maxHeight: "240px",
|
|
@@ -94,12 +105,12 @@ const StyledPaper = (0, _styles.styled)(_material.Paper)(_ref2 => {
|
|
|
94
105
|
}
|
|
95
106
|
};
|
|
96
107
|
});
|
|
97
|
-
|
|
98
|
-
shouldForwardProp:
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
108
|
+
var Label = (0, _styles.styled)(_material.Typography, {
|
|
109
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
110
|
+
return prop !== "isRequired";
|
|
111
|
+
}
|
|
112
|
+
})(function (_ref3) {
|
|
113
|
+
var isRequired = _ref3.isRequired;
|
|
103
114
|
return {
|
|
104
115
|
display: "block",
|
|
105
116
|
fontSize: "0.875rem",
|
|
@@ -114,12 +125,12 @@ const Label = (0, _styles.styled)(_material.Typography, {
|
|
|
114
125
|
} : {}
|
|
115
126
|
};
|
|
116
127
|
});
|
|
117
|
-
|
|
118
|
-
shouldForwardProp:
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
128
|
+
var HelperText = (0, _styles.styled)(_material.Typography, {
|
|
129
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
130
|
+
return prop !== "error";
|
|
131
|
+
}
|
|
132
|
+
})(function (_ref4) {
|
|
133
|
+
var error = _ref4.error;
|
|
123
134
|
return {
|
|
124
135
|
marginTop: "8px",
|
|
125
136
|
fontSize: "0.875rem",
|
|
@@ -127,35 +138,48 @@ const HelperText = (0, _styles.styled)(_material.Typography, {
|
|
|
127
138
|
color: error ? "#dc2626" : "#4b5563"
|
|
128
139
|
};
|
|
129
140
|
});
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
options = [],
|
|
133
|
-
selected,
|
|
134
|
-
defaultValue,
|
|
135
|
-
label,
|
|
136
|
-
id,
|
|
137
|
-
isRequired,
|
|
138
|
-
onChange,
|
|
139
|
-
error,
|
|
140
|
-
helperText,
|
|
141
|
-
loading =
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
141
|
+
var Combobox = function Combobox(_ref5) {
|
|
142
|
+
var _ref5$options = _ref5.options,
|
|
143
|
+
options = _ref5$options === void 0 ? [] : _ref5$options,
|
|
144
|
+
selected = _ref5.selected,
|
|
145
|
+
defaultValue = _ref5.defaultValue,
|
|
146
|
+
label = _ref5.label,
|
|
147
|
+
id = _ref5.id,
|
|
148
|
+
isRequired = _ref5.isRequired,
|
|
149
|
+
onChange = _ref5.onChange,
|
|
150
|
+
error = _ref5.error,
|
|
151
|
+
helperText = _ref5.helperText,
|
|
152
|
+
_ref5$loading = _ref5.loading,
|
|
153
|
+
loading = _ref5$loading === void 0 ? false : _ref5$loading,
|
|
154
|
+
_ref5$by = _ref5.by,
|
|
155
|
+
by = _ref5$by === void 0 ? "id" : _ref5$by,
|
|
156
|
+
_ref5$labelKey = _ref5.labelKey,
|
|
157
|
+
labelKey = _ref5$labelKey === void 0 ? "label" : _ref5$labelKey;
|
|
158
|
+
var _useState = (0, _react.useState)(null),
|
|
159
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
160
|
+
internalSelected = _useState2[0],
|
|
161
|
+
setInternalSelected = _useState2[1];
|
|
162
|
+
var _useState3 = (0, _react.useState)(false),
|
|
163
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
164
|
+
hasSetDefault = _useState4[0],
|
|
165
|
+
setHasSetDefault = _useState4[1];
|
|
166
|
+
var _useState5 = (0, _react.useState)(false),
|
|
167
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
168
|
+
open = _useState6[0],
|
|
169
|
+
setOpen = _useState6[1];
|
|
148
170
|
|
|
149
171
|
// Handle defaultValue - accepts both object and primitive (ID)
|
|
150
|
-
(0, _react.useEffect)(()
|
|
172
|
+
(0, _react.useEffect)(function () {
|
|
151
173
|
if (defaultValue && options.length > 0 && !hasSetDefault) {
|
|
152
|
-
|
|
153
|
-
if (
|
|
174
|
+
var defaultOption;
|
|
175
|
+
if (_typeof(defaultValue) === "object" && defaultValue !== null) {
|
|
154
176
|
// defaultValue is already a full object
|
|
155
177
|
defaultOption = defaultValue;
|
|
156
178
|
} else {
|
|
157
179
|
// defaultValue is a primitive (ID), find the matching option
|
|
158
|
-
defaultOption = options.find(
|
|
180
|
+
defaultOption = options.find(function (opt) {
|
|
181
|
+
return opt[by] === defaultValue;
|
|
182
|
+
});
|
|
159
183
|
}
|
|
160
184
|
if (defaultOption) {
|
|
161
185
|
setInternalSelected(defaultOption);
|
|
@@ -165,8 +189,8 @@ const Combobox = _ref5 => {
|
|
|
165
189
|
}, [defaultValue, options, by, hasSetDefault]);
|
|
166
190
|
|
|
167
191
|
// Use selected prop if provided, otherwise use internal state
|
|
168
|
-
|
|
169
|
-
|
|
192
|
+
var currentValue = selected || internalSelected;
|
|
193
|
+
var handleChange = function handleChange(event, value) {
|
|
170
194
|
setInternalSelected(value);
|
|
171
195
|
if (onChange) {
|
|
172
196
|
// Pass the full object to onChange (industry standard)
|
|
@@ -185,13 +209,21 @@ const Combobox = _ref5 => {
|
|
|
185
209
|
value: currentValue,
|
|
186
210
|
onChange: handleChange,
|
|
187
211
|
options: options,
|
|
188
|
-
getOptionLabel:
|
|
189
|
-
|
|
212
|
+
getOptionLabel: function getOptionLabel(option) {
|
|
213
|
+
return (option === null || option === void 0 ? void 0 : option[labelKey]) || "";
|
|
214
|
+
},
|
|
215
|
+
isOptionEqualToValue: function isOptionEqualToValue(option, value) {
|
|
216
|
+
return (option === null || option === void 0 ? void 0 : option[by]) === (value === null || value === void 0 ? void 0 : value[by]);
|
|
217
|
+
},
|
|
190
218
|
loading: loading,
|
|
191
219
|
disabled: loading,
|
|
192
220
|
open: open && !loading,
|
|
193
|
-
onOpen: ()
|
|
194
|
-
|
|
221
|
+
onOpen: function onOpen() {
|
|
222
|
+
return setOpen(true);
|
|
223
|
+
},
|
|
224
|
+
onClose: function onClose() {
|
|
225
|
+
return setOpen(false);
|
|
226
|
+
},
|
|
195
227
|
disableClearable: false,
|
|
196
228
|
PaperComponent: StyledPaper,
|
|
197
229
|
popupIcon: loading ? /*#__PURE__*/_react.default.createElement(_material.CircularProgress, {
|
|
@@ -205,158 +237,159 @@ const Combobox = _ref5 => {
|
|
|
205
237
|
}
|
|
206
238
|
}),
|
|
207
239
|
noOptionsText: "No results found",
|
|
208
|
-
renderInput:
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
240
|
+
renderInput: function renderInput(params) {
|
|
241
|
+
return /*#__PURE__*/_react.default.createElement(StyledTextField, _extends({}, params, {
|
|
242
|
+
error: error,
|
|
243
|
+
loading: loading,
|
|
244
|
+
placeholder: loading ? "Loading..." : "",
|
|
245
|
+
InputProps: _objectSpread(_objectSpread({}, params.InputProps), {}, {
|
|
246
|
+
endAdornment: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, params.InputProps.endAdornment)
|
|
247
|
+
})
|
|
248
|
+
}));
|
|
249
|
+
}
|
|
217
250
|
}), helperText && /*#__PURE__*/_react.default.createElement(HelperText, {
|
|
218
251
|
error: error
|
|
219
252
|
}, helperText));
|
|
220
253
|
};
|
|
221
254
|
Combobox.propTypes = {
|
|
222
|
-
/**
|
|
223
|
-
* Array of option objects to display in the dropdown.
|
|
224
|
-
* Each option should be an object containing at minimum the key specified by `by` prop
|
|
225
|
-
* and the key specified by `labelKey` prop.
|
|
226
|
-
*
|
|
227
|
-
* @example
|
|
228
|
-
* options={[
|
|
229
|
-
* { id: 1, label: "Option 1", value: "opt1" },
|
|
230
|
-
* { id: 2, label: "Option 2", value: "opt2" }
|
|
231
|
-
* ]}
|
|
255
|
+
/**
|
|
256
|
+
* Array of option objects to display in the dropdown.
|
|
257
|
+
* Each option should be an object containing at minimum the key specified by `by` prop
|
|
258
|
+
* and the key specified by `labelKey` prop.
|
|
259
|
+
*
|
|
260
|
+
* @example
|
|
261
|
+
* options={[
|
|
262
|
+
* { id: 1, label: "Option 1", value: "opt1" },
|
|
263
|
+
* { id: 2, label: "Option 2", value: "opt2" }
|
|
264
|
+
* ]}
|
|
232
265
|
*/
|
|
233
266
|
options: _propTypes.default.arrayOf(_propTypes.default.object),
|
|
234
|
-
/**
|
|
235
|
-
* Controlled selected value. When provided, the component operates in controlled mode.
|
|
236
|
-
* Should be one of the objects from the `options` array.
|
|
237
|
-
* The component will match this object to options using the `by` prop.
|
|
238
|
-
*
|
|
239
|
-
* @example
|
|
240
|
-
* selected={{ id: 1, label: "Option 1" }}
|
|
267
|
+
/**
|
|
268
|
+
* Controlled selected value. When provided, the component operates in controlled mode.
|
|
269
|
+
* Should be one of the objects from the `options` array.
|
|
270
|
+
* The component will match this object to options using the `by` prop.
|
|
271
|
+
*
|
|
272
|
+
* @example
|
|
273
|
+
* selected={{ id: 1, label: "Option 1" }}
|
|
241
274
|
*/
|
|
242
275
|
selected: _propTypes.default.object,
|
|
243
|
-
/**
|
|
244
|
-
* Default value for uncontrolled mode. Can be either:
|
|
245
|
-
* - A complete option object from the options array
|
|
246
|
-
* - A primitive value (string/number) matching the `by` key of an option
|
|
247
|
-
*
|
|
248
|
-
* The component will automatically find and select the matching option from the options array.
|
|
249
|
-
* This prop is only used for initial render and is ignored if `selected` prop is provided.
|
|
250
|
-
*
|
|
251
|
-
* @example
|
|
252
|
-
* // Using a primitive ID
|
|
253
|
-
* defaultValue={1}
|
|
254
|
-
*
|
|
255
|
-
* // Using a complete object
|
|
256
|
-
* defaultValue={{ id: 1, label: "Option 1" }}
|
|
276
|
+
/**
|
|
277
|
+
* Default value for uncontrolled mode. Can be either:
|
|
278
|
+
* - A complete option object from the options array
|
|
279
|
+
* - A primitive value (string/number) matching the `by` key of an option
|
|
280
|
+
*
|
|
281
|
+
* The component will automatically find and select the matching option from the options array.
|
|
282
|
+
* This prop is only used for initial render and is ignored if `selected` prop is provided.
|
|
283
|
+
*
|
|
284
|
+
* @example
|
|
285
|
+
* // Using a primitive ID
|
|
286
|
+
* defaultValue={1}
|
|
287
|
+
*
|
|
288
|
+
* // Using a complete object
|
|
289
|
+
* defaultValue={{ id: 1, label: "Option 1" }}
|
|
257
290
|
*/
|
|
258
291
|
defaultValue: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string, _propTypes.default.number]),
|
|
259
|
-
/**
|
|
260
|
-
* Label text to display above the combobox input field.
|
|
261
|
-
* If not provided, no label will be rendered.
|
|
262
|
-
*
|
|
263
|
-
* @example
|
|
264
|
-
* label="Select a category"
|
|
292
|
+
/**
|
|
293
|
+
* Label text to display above the combobox input field.
|
|
294
|
+
* If not provided, no label will be rendered.
|
|
295
|
+
*
|
|
296
|
+
* @example
|
|
297
|
+
* label="Select a category"
|
|
265
298
|
*/
|
|
266
299
|
label: _propTypes.default.string,
|
|
267
|
-
/**
|
|
268
|
-
* HTML id attribute for the input element.
|
|
269
|
-
* Useful for accessibility (connecting labels) and form handling.
|
|
270
|
-
*
|
|
271
|
-
* @example
|
|
272
|
-
* id="category-select"
|
|
300
|
+
/**
|
|
301
|
+
* HTML id attribute for the input element.
|
|
302
|
+
* Useful for accessibility (connecting labels) and form handling.
|
|
303
|
+
*
|
|
304
|
+
* @example
|
|
305
|
+
* id="category-select"
|
|
273
306
|
*/
|
|
274
307
|
id: _propTypes.default.string,
|
|
275
|
-
/**
|
|
276
|
-
* Indicates if the field is required.
|
|
277
|
-
* When true, displays a red asterisk (*) next to the label.
|
|
278
|
-
* Note: This is only visual - you must handle validation separately.
|
|
279
|
-
*
|
|
280
|
-
* @example
|
|
281
|
-
* isRequired={true}
|
|
308
|
+
/**
|
|
309
|
+
* Indicates if the field is required.
|
|
310
|
+
* When true, displays a red asterisk (*) next to the label.
|
|
311
|
+
* Note: This is only visual - you must handle validation separately.
|
|
312
|
+
*
|
|
313
|
+
* @example
|
|
314
|
+
* isRequired={true}
|
|
282
315
|
*/
|
|
283
316
|
isRequired: _propTypes.default.bool,
|
|
284
|
-
/**
|
|
285
|
-
* Callback function invoked when the selected value changes.
|
|
286
|
-
* Receives the complete selected option object as its argument (not just the ID).
|
|
287
|
-
* Called with `null` when selection is cleared.
|
|
288
|
-
*
|
|
289
|
-
* @param {Object|null} selectedOption - The complete selected option object or null
|
|
290
|
-
*
|
|
291
|
-
* @example
|
|
292
|
-
* onChange={(option) => {
|
|
293
|
-
* console.log("Selected:", option);
|
|
294
|
-
* // option will be like: { id: 1, label: "Option 1", value: "opt1" }
|
|
295
|
-
* }}
|
|
317
|
+
/**
|
|
318
|
+
* Callback function invoked when the selected value changes.
|
|
319
|
+
* Receives the complete selected option object as its argument (not just the ID).
|
|
320
|
+
* Called with `null` when selection is cleared.
|
|
321
|
+
*
|
|
322
|
+
* @param {Object|null} selectedOption - The complete selected option object or null
|
|
323
|
+
*
|
|
324
|
+
* @example
|
|
325
|
+
* onChange={(option) => {
|
|
326
|
+
* console.log("Selected:", option);
|
|
327
|
+
* // option will be like: { id: 1, label: "Option 1", value: "opt1" }
|
|
328
|
+
* }}
|
|
296
329
|
*/
|
|
297
330
|
onChange: _propTypes.default.func,
|
|
298
|
-
/**
|
|
299
|
-
* Error state flag. When true:
|
|
300
|
-
* - Input border becomes red
|
|
301
|
-
* - Helper text (if provided) becomes red
|
|
302
|
-
* - Dropdown icon becomes red
|
|
303
|
-
* Use this to indicate validation errors.
|
|
304
|
-
*
|
|
305
|
-
* @example
|
|
306
|
-
* error={formErrors.category !== undefined}
|
|
331
|
+
/**
|
|
332
|
+
* Error state flag. When true:
|
|
333
|
+
* - Input border becomes red
|
|
334
|
+
* - Helper text (if provided) becomes red
|
|
335
|
+
* - Dropdown icon becomes red
|
|
336
|
+
* Use this to indicate validation errors.
|
|
337
|
+
*
|
|
338
|
+
* @example
|
|
339
|
+
* error={formErrors.category !== undefined}
|
|
307
340
|
*/
|
|
308
341
|
error: _propTypes.default.bool,
|
|
309
|
-
/**
|
|
310
|
-
* Helper text displayed below the input field.
|
|
311
|
-
* Can be used for:
|
|
312
|
-
* - Field descriptions/instructions (when error is false)
|
|
313
|
-
* - Error messages (when error is true)
|
|
314
|
-
* Color automatically adjusts based on error state.
|
|
315
|
-
*
|
|
316
|
-
* @example
|
|
317
|
-
* helperText={error ? "Please select a category" : "Choose your preferred category"}
|
|
342
|
+
/**
|
|
343
|
+
* Helper text displayed below the input field.
|
|
344
|
+
* Can be used for:
|
|
345
|
+
* - Field descriptions/instructions (when error is false)
|
|
346
|
+
* - Error messages (when error is true)
|
|
347
|
+
* Color automatically adjusts based on error state.
|
|
348
|
+
*
|
|
349
|
+
* @example
|
|
350
|
+
* helperText={error ? "Please select a category" : "Choose your preferred category"}
|
|
318
351
|
*/
|
|
319
352
|
helperText: _propTypes.default.string,
|
|
320
|
-
/**
|
|
321
|
-
* Loading state flag. When true:
|
|
322
|
-
* - Displays a loading spinner instead of dropdown arrow
|
|
323
|
-
* - Shows "Loading..." placeholder text
|
|
324
|
-
* - Disables the input (prevents user interaction)
|
|
325
|
-
* - Prevents dropdown from opening
|
|
326
|
-
* - Input background becomes gray
|
|
327
|
-
*
|
|
328
|
-
* Use this when fetching options from an API or performing async operations.
|
|
329
|
-
*
|
|
330
|
-
* @example
|
|
331
|
-
* loading={isLoadingOptions}
|
|
353
|
+
/**
|
|
354
|
+
* Loading state flag. When true:
|
|
355
|
+
* - Displays a loading spinner instead of dropdown arrow
|
|
356
|
+
* - Shows "Loading..." placeholder text
|
|
357
|
+
* - Disables the input (prevents user interaction)
|
|
358
|
+
* - Prevents dropdown from opening
|
|
359
|
+
* - Input background becomes gray
|
|
360
|
+
*
|
|
361
|
+
* Use this when fetching options from an API or performing async operations.
|
|
362
|
+
*
|
|
363
|
+
* @example
|
|
364
|
+
* loading={isLoadingOptions}
|
|
332
365
|
*/
|
|
333
366
|
loading: _propTypes.default.bool,
|
|
334
|
-
/**
|
|
335
|
-
* Property name to use as the unique identifier for options.
|
|
336
|
-
* Used for:
|
|
337
|
-
* - Comparing options for equality (isOptionEqualToValue)
|
|
338
|
-
* - Matching defaultValue when it's a primitive
|
|
339
|
-
* - React keys in the options list
|
|
340
|
-
*
|
|
341
|
-
* Each option object must have this property and it should be unique.
|
|
342
|
-
*
|
|
343
|
-
* @default "id"
|
|
344
|
-
* @example
|
|
345
|
-
* by="userId"
|
|
346
|
-
* // Then options would be: [{ userId: 1, name: "John" }, ...]
|
|
367
|
+
/**
|
|
368
|
+
* Property name to use as the unique identifier for options.
|
|
369
|
+
* Used for:
|
|
370
|
+
* - Comparing options for equality (isOptionEqualToValue)
|
|
371
|
+
* - Matching defaultValue when it's a primitive
|
|
372
|
+
* - React keys in the options list
|
|
373
|
+
*
|
|
374
|
+
* Each option object must have this property and it should be unique.
|
|
375
|
+
*
|
|
376
|
+
* @default "id"
|
|
377
|
+
* @example
|
|
378
|
+
* by="userId"
|
|
379
|
+
* // Then options would be: [{ userId: 1, name: "John" }, ...]
|
|
347
380
|
*/
|
|
348
381
|
by: _propTypes.default.string,
|
|
349
|
-
/**
|
|
350
|
-
* Property name to use for displaying option text.
|
|
351
|
-
* This value is shown in:
|
|
352
|
-
* - The dropdown options list
|
|
353
|
-
* - The input field when an option is selected
|
|
354
|
-
* - The filtered search results
|
|
355
|
-
*
|
|
356
|
-
* @default "label"
|
|
357
|
-
* @example
|
|
358
|
-
* labelKey="name"
|
|
359
|
-
* // Then options would be: [{ id: 1, name: "Option 1" }, ...]
|
|
382
|
+
/**
|
|
383
|
+
* Property name to use for displaying option text.
|
|
384
|
+
* This value is shown in:
|
|
385
|
+
* - The dropdown options list
|
|
386
|
+
* - The input field when an option is selected
|
|
387
|
+
* - The filtered search results
|
|
388
|
+
*
|
|
389
|
+
* @default "label"
|
|
390
|
+
* @example
|
|
391
|
+
* labelKey="name"
|
|
392
|
+
* // Then options would be: [{ id: 1, name: "Option 1" }, ...]
|
|
360
393
|
*/
|
|
361
394
|
labelKey: _propTypes.default.string
|
|
362
395
|
};
|
|
@@ -374,4 +407,5 @@ Combobox.defaultProps = {
|
|
|
374
407
|
by: "id",
|
|
375
408
|
labelKey: "label"
|
|
376
409
|
};
|
|
377
|
-
var _default =
|
|
410
|
+
var _default = Combobox;
|
|
411
|
+
exports.default = _default;
|
|
@@ -10,15 +10,24 @@ var _material = require("@mui/material");
|
|
|
10
10
|
var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
|
|
11
11
|
var _text = _interopRequireDefault(require("../text"));
|
|
12
12
|
var _responsiveTheme = _interopRequireDefault(require("../../themes/responsiveTheme"));
|
|
13
|
-
function _interopRequireDefault(
|
|
14
|
-
function
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
}));
|
|
13
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
15
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
16
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
17
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
18
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
19
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
20
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
21
|
+
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
22
|
+
var Root = (0, _styles.styled)("div")(function () {
|
|
23
|
+
return _objectSpread(_objectSpread({
|
|
24
|
+
width: "100%"
|
|
25
|
+
}, _responsiveTheme.default.typography.body2), {}, {
|
|
26
|
+
"& > :not(style) + :not(style)": {
|
|
27
|
+
marginTop: _responsiveTheme.default.spacing(2)
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
});
|
|
22
31
|
function Divider(props) {
|
|
23
32
|
return /*#__PURE__*/React.createElement(Root, null, props.type && props.type === "Chip" ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_material.Divider, {
|
|
24
33
|
textAlign: props.textAlign && props.textAlign
|