tenjin-ui-kit 0.3.72 → 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 +182 -114
- package/common/hooks/newApiHook.js +225 -143
- package/common/utils/security/index.js +2 -2
- package/common/utils/security/securityConfig.js +2 -1
- package/components/Canvas.js +88 -164
- package/components/DragBox/index.js +26 -21
- package/components/InputWithChip/index.js +57 -164
- package/components/RightContext/index.css +20 -20
- package/components/RightContext/index.js +28 -19
- package/components/WorkFlow.js +23 -18
- package/components/WorkFlowBuilder.js +48 -33
- package/components/alert/Style.js +14 -11
- package/components/alert/index.js +12 -10
- package/components/attachment/index.js +28 -21
- package/components/authenticationProvider/AuthError.js +4 -3
- package/components/authenticationProvider/AuthLoader.js +4 -3
- package/components/authenticationProvider/index.js +116 -60
- package/components/avatar/index.js +14 -13
- package/components/avatar/styles.js +77 -74
- package/components/breadCrumbs/index.js +53 -42
- package/components/breadCrumbs/style.js +4 -1
- package/components/browsingTestCaseLayout/DetailsViewLayout/DetailsViewContent/index.js +6 -5
- package/components/browsingTestCaseLayout/DetailsViewLayout/DetailsViewContent/style.js +8 -5
- package/components/browsingTestCaseLayout/DetailsViewLayout/DetailsViewHeader/index.js +5 -4
- package/components/browsingTestCaseLayout/TreeViewLayout/TreeViewContent/Index.js +5 -4
- package/components/browsingTestCaseLayout/TreeViewLayout/TreeViewHeader/Index.js +6 -5
- package/components/browsingTestCaseLayout/TreeViewLayout/TreeViewHeader/style.js +19 -16
- package/components/browsingTestCaseLayout/index.js +30 -25
- package/components/browsingTestCaseLayout/style.css +82 -82
- package/components/button/index.js +43 -36
- package/components/chatBotModal/index.js +45 -36
- package/components/checkBox/index.js +9 -8
- package/components/combobox/index.js +188 -167
- package/components/divider/index.js +18 -14
- package/components/editableField/index.js +28 -19
- package/components/error/index.js +12 -6
- package/components/errorBoundary/index.js +94 -74
- package/components/fileUploader/index.js +35 -30
- package/components/fileUploader/style.js +49 -46
- package/components/filter/ValueSelector.js +207 -135
- package/components/filter/index.js +33 -26
- package/components/iconButton/index.js +4 -3
- package/components/input/index.js +38 -31
- package/components/layout/index.js +31 -27
- package/components/layout/main/index.js +13 -10
- package/components/layout/main/style.js +14 -11
- package/components/layout/pageContent/index.js +7 -6
- package/components/layout/sidebar/FlatMenu.js +43 -43
- package/components/layout/sidebar/GroupedIconMenu.js +108 -95
- package/components/layout/sidebar/GroupedMenu.js +48 -38
- package/components/layout/sidebar/ProjectMenu.js +116 -109
- package/components/layout/sidebar/index.js +18 -15
- package/components/layout/sidebar/style.js +143 -138
- package/components/layout/topBar/ProjectTopbar.js +98 -81
- package/components/layout/topBar/UserAvatar.js +55 -48
- package/components/layout/topBar/index.js +33 -22
- package/components/loader/index.js +12 -9
- package/components/menu/index.js +35 -26
- package/components/modal/Modal.js +6 -5
- package/components/modal/index.js +13 -10
- package/components/modal/style.js +56 -53
- package/components/optionMenu/index.js +66 -59
- package/components/pagination/index.js +39 -24
- package/components/pagination/style.js +28 -25
- package/components/paginationUpdated/index.js +18 -15
- package/components/paper/index.js +16 -15
- package/components/paper/style.js +27 -24
- package/components/reactSelect/index.js +63 -46
- package/components/reactSelect/style.js +150 -117
- package/components/richTextEditor/index.js +44 -25
- package/components/select/GroupedSelect.js +121 -64
- package/components/select/SimpleSelect.js +78 -50
- package/components/select/index.js +54 -38
- package/components/simpleSelect/index.js +15 -12
- package/components/sort/index.js +22 -19
- package/components/switch/index.js +11 -10
- package/components/switch/style.js +32 -29
- package/components/switch/switch.js +23 -17
- package/components/table/ReactTable.js +71 -54
- package/components/table/SimpleTable.js +78 -59
- package/components/table/index.js +186 -311
- package/components/text/index.js +17 -15
- package/components/timeStamp/index.js +6 -4
- package/components/timeStamp/style.js +15 -12
- package/components/topBar/index.js +92 -85
- package/components/tree/index.js +47 -29
- package/components/tree/style.js +23 -20
- package/components/valuePicker/ValueSelector.js +138 -70
- package/components/valuePicker/index.js +26 -19
- package/components/wrapperLayout/layout/index.js +5 -4
- package/components/wrapperLayout/main/index.js +5 -4
- package/components/wrapperLayout/main/pageContainer/index.js +5 -4
- package/components/wrapperLayout/main/sideBar/index.js +110 -120
- package/components/wrapperLayout/main/sideBar/style.js +183 -177
- package/components/wrapperLayout/topBar/UserAvatar.js +5 -4
- package/components/wrapperLayout/topBar/avatar.js +12 -10
- package/components/wrapperLayout/topBar/index.js +97 -111
- package/components/wrapperLayout/topBar/menuIcon.js +5 -4
- package/components/wrapperLayout/topBar/style.js +64 -61
- package/http/index.js +183 -90
- package/index.js +55 -53
- package/package.json +124 -124
- package/templates/listPage/index.js +57 -36
- package/themes/default.js +7 -5
- package/themes/defaultSmall.js +3 -2
- package/themes/responsiveTheme.js +8 -6
|
@@ -9,25 +9,29 @@ 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
|
|
15
|
-
function
|
|
16
|
-
function
|
|
17
|
-
function
|
|
18
|
-
function
|
|
19
|
-
function
|
|
20
|
-
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(); }
|
|
21
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."); }
|
|
22
|
-
function _unsupportedIterableToArray(
|
|
23
|
-
function _arrayLikeToArray(
|
|
24
|
-
function _iterableToArrayLimit(
|
|
25
|
-
function _arrayWithHoles(
|
|
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; }
|
|
26
28
|
// Styled components to match the Tailwind design
|
|
27
|
-
|
|
28
|
-
shouldForwardProp:
|
|
29
|
-
|
|
30
|
-
|
|
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,
|
|
31
35
|
error = _ref.error,
|
|
32
36
|
loading = _ref.loading;
|
|
33
37
|
return {
|
|
@@ -66,8 +70,8 @@ const StyledTextField = (0, _styles.styled)(_material.TextField, {
|
|
|
66
70
|
}
|
|
67
71
|
};
|
|
68
72
|
});
|
|
69
|
-
|
|
70
|
-
|
|
73
|
+
var StyledPaper = (0, _styles.styled)(_material.Paper)(function (_ref2) {
|
|
74
|
+
var theme = _ref2.theme;
|
|
71
75
|
return {
|
|
72
76
|
marginTop: "4px",
|
|
73
77
|
maxHeight: "240px",
|
|
@@ -101,10 +105,12 @@ const StyledPaper = (0, _styles.styled)(_material.Paper)(_ref2 => {
|
|
|
101
105
|
}
|
|
102
106
|
};
|
|
103
107
|
});
|
|
104
|
-
|
|
105
|
-
shouldForwardProp:
|
|
106
|
-
|
|
107
|
-
|
|
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;
|
|
108
114
|
return {
|
|
109
115
|
display: "block",
|
|
110
116
|
fontSize: "0.875rem",
|
|
@@ -119,10 +125,12 @@ const Label = (0, _styles.styled)(_material.Typography, {
|
|
|
119
125
|
} : {}
|
|
120
126
|
};
|
|
121
127
|
});
|
|
122
|
-
|
|
123
|
-
shouldForwardProp:
|
|
124
|
-
|
|
125
|
-
|
|
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;
|
|
126
134
|
return {
|
|
127
135
|
marginTop: "8px",
|
|
128
136
|
fontSize: "0.875rem",
|
|
@@ -130,8 +138,8 @@ const HelperText = (0, _styles.styled)(_material.Typography, {
|
|
|
130
138
|
color: error ? "#dc2626" : "#4b5563"
|
|
131
139
|
};
|
|
132
140
|
});
|
|
133
|
-
|
|
134
|
-
|
|
141
|
+
var Combobox = function Combobox(_ref5) {
|
|
142
|
+
var _ref5$options = _ref5.options,
|
|
135
143
|
options = _ref5$options === void 0 ? [] : _ref5$options,
|
|
136
144
|
selected = _ref5.selected,
|
|
137
145
|
defaultValue = _ref5.defaultValue,
|
|
@@ -147,29 +155,31 @@ const Combobox = _ref5 => {
|
|
|
147
155
|
by = _ref5$by === void 0 ? "id" : _ref5$by,
|
|
148
156
|
_ref5$labelKey = _ref5.labelKey,
|
|
149
157
|
labelKey = _ref5$labelKey === void 0 ? "label" : _ref5$labelKey;
|
|
150
|
-
|
|
158
|
+
var _useState = (0, _react.useState)(null),
|
|
151
159
|
_useState2 = _slicedToArray(_useState, 2),
|
|
152
160
|
internalSelected = _useState2[0],
|
|
153
161
|
setInternalSelected = _useState2[1];
|
|
154
|
-
|
|
162
|
+
var _useState3 = (0, _react.useState)(false),
|
|
155
163
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
156
164
|
hasSetDefault = _useState4[0],
|
|
157
165
|
setHasSetDefault = _useState4[1];
|
|
158
|
-
|
|
166
|
+
var _useState5 = (0, _react.useState)(false),
|
|
159
167
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
160
168
|
open = _useState6[0],
|
|
161
169
|
setOpen = _useState6[1];
|
|
162
170
|
|
|
163
171
|
// Handle defaultValue - accepts both object and primitive (ID)
|
|
164
|
-
(0, _react.useEffect)(()
|
|
172
|
+
(0, _react.useEffect)(function () {
|
|
165
173
|
if (defaultValue && options.length > 0 && !hasSetDefault) {
|
|
166
|
-
|
|
167
|
-
if (
|
|
174
|
+
var defaultOption;
|
|
175
|
+
if (_typeof(defaultValue) === "object" && defaultValue !== null) {
|
|
168
176
|
// defaultValue is already a full object
|
|
169
177
|
defaultOption = defaultValue;
|
|
170
178
|
} else {
|
|
171
179
|
// defaultValue is a primitive (ID), find the matching option
|
|
172
|
-
defaultOption = options.find(
|
|
180
|
+
defaultOption = options.find(function (opt) {
|
|
181
|
+
return opt[by] === defaultValue;
|
|
182
|
+
});
|
|
173
183
|
}
|
|
174
184
|
if (defaultOption) {
|
|
175
185
|
setInternalSelected(defaultOption);
|
|
@@ -179,8 +189,8 @@ const Combobox = _ref5 => {
|
|
|
179
189
|
}, [defaultValue, options, by, hasSetDefault]);
|
|
180
190
|
|
|
181
191
|
// Use selected prop if provided, otherwise use internal state
|
|
182
|
-
|
|
183
|
-
|
|
192
|
+
var currentValue = selected || internalSelected;
|
|
193
|
+
var handleChange = function handleChange(event, value) {
|
|
184
194
|
setInternalSelected(value);
|
|
185
195
|
if (onChange) {
|
|
186
196
|
// Pass the full object to onChange (industry standard)
|
|
@@ -199,13 +209,21 @@ const Combobox = _ref5 => {
|
|
|
199
209
|
value: currentValue,
|
|
200
210
|
onChange: handleChange,
|
|
201
211
|
options: options,
|
|
202
|
-
getOptionLabel:
|
|
203
|
-
|
|
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
|
+
},
|
|
204
218
|
loading: loading,
|
|
205
219
|
disabled: loading,
|
|
206
220
|
open: open && !loading,
|
|
207
|
-
onOpen: ()
|
|
208
|
-
|
|
221
|
+
onOpen: function onOpen() {
|
|
222
|
+
return setOpen(true);
|
|
223
|
+
},
|
|
224
|
+
onClose: function onClose() {
|
|
225
|
+
return setOpen(false);
|
|
226
|
+
},
|
|
209
227
|
disableClearable: false,
|
|
210
228
|
PaperComponent: StyledPaper,
|
|
211
229
|
popupIcon: loading ? /*#__PURE__*/_react.default.createElement(_material.CircularProgress, {
|
|
@@ -219,157 +237,159 @@ const Combobox = _ref5 => {
|
|
|
219
237
|
}
|
|
220
238
|
}),
|
|
221
239
|
noOptionsText: "No results found",
|
|
222
|
-
renderInput:
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
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
|
+
}
|
|
230
250
|
}), helperText && /*#__PURE__*/_react.default.createElement(HelperText, {
|
|
231
251
|
error: error
|
|
232
252
|
}, helperText));
|
|
233
253
|
};
|
|
234
254
|
Combobox.propTypes = {
|
|
235
|
-
/**
|
|
236
|
-
* Array of option objects to display in the dropdown.
|
|
237
|
-
* Each option should be an object containing at minimum the key specified by `by` prop
|
|
238
|
-
* and the key specified by `labelKey` prop.
|
|
239
|
-
*
|
|
240
|
-
* @example
|
|
241
|
-
* options={[
|
|
242
|
-
* { id: 1, label: "Option 1", value: "opt1" },
|
|
243
|
-
* { id: 2, label: "Option 2", value: "opt2" }
|
|
244
|
-
* ]}
|
|
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
|
+
* ]}
|
|
245
265
|
*/
|
|
246
266
|
options: _propTypes.default.arrayOf(_propTypes.default.object),
|
|
247
|
-
/**
|
|
248
|
-
* Controlled selected value. When provided, the component operates in controlled mode.
|
|
249
|
-
* Should be one of the objects from the `options` array.
|
|
250
|
-
* The component will match this object to options using the `by` prop.
|
|
251
|
-
*
|
|
252
|
-
* @example
|
|
253
|
-
* 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" }}
|
|
254
274
|
*/
|
|
255
275
|
selected: _propTypes.default.object,
|
|
256
|
-
/**
|
|
257
|
-
* Default value for uncontrolled mode. Can be either:
|
|
258
|
-
* - A complete option object from the options array
|
|
259
|
-
* - A primitive value (string/number) matching the `by` key of an option
|
|
260
|
-
*
|
|
261
|
-
* The component will automatically find and select the matching option from the options array.
|
|
262
|
-
* This prop is only used for initial render and is ignored if `selected` prop is provided.
|
|
263
|
-
*
|
|
264
|
-
* @example
|
|
265
|
-
* // Using a primitive ID
|
|
266
|
-
* defaultValue={1}
|
|
267
|
-
*
|
|
268
|
-
* // Using a complete object
|
|
269
|
-
* 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" }}
|
|
270
290
|
*/
|
|
271
291
|
defaultValue: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string, _propTypes.default.number]),
|
|
272
|
-
/**
|
|
273
|
-
* Label text to display above the combobox input field.
|
|
274
|
-
* If not provided, no label will be rendered.
|
|
275
|
-
*
|
|
276
|
-
* @example
|
|
277
|
-
* 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"
|
|
278
298
|
*/
|
|
279
299
|
label: _propTypes.default.string,
|
|
280
|
-
/**
|
|
281
|
-
* HTML id attribute for the input element.
|
|
282
|
-
* Useful for accessibility (connecting labels) and form handling.
|
|
283
|
-
*
|
|
284
|
-
* @example
|
|
285
|
-
* 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"
|
|
286
306
|
*/
|
|
287
307
|
id: _propTypes.default.string,
|
|
288
|
-
/**
|
|
289
|
-
* Indicates if the field is required.
|
|
290
|
-
* When true, displays a red asterisk (*) next to the label.
|
|
291
|
-
* Note: This is only visual - you must handle validation separately.
|
|
292
|
-
*
|
|
293
|
-
* @example
|
|
294
|
-
* 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}
|
|
295
315
|
*/
|
|
296
316
|
isRequired: _propTypes.default.bool,
|
|
297
|
-
/**
|
|
298
|
-
* Callback function invoked when the selected value changes.
|
|
299
|
-
* Receives the complete selected option object as its argument (not just the ID).
|
|
300
|
-
* Called with `null` when selection is cleared.
|
|
301
|
-
*
|
|
302
|
-
* @param {Object|null} selectedOption - The complete selected option object or null
|
|
303
|
-
*
|
|
304
|
-
* @example
|
|
305
|
-
* onChange={(option) => {
|
|
306
|
-
* console.log("Selected:", option);
|
|
307
|
-
* // option will be like: { id: 1, label: "Option 1", value: "opt1" }
|
|
308
|
-
* }}
|
|
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
|
+
* }}
|
|
309
329
|
*/
|
|
310
330
|
onChange: _propTypes.default.func,
|
|
311
|
-
/**
|
|
312
|
-
* Error state flag. When true:
|
|
313
|
-
* - Input border becomes red
|
|
314
|
-
* - Helper text (if provided) becomes red
|
|
315
|
-
* - Dropdown icon becomes red
|
|
316
|
-
* Use this to indicate validation errors.
|
|
317
|
-
*
|
|
318
|
-
* @example
|
|
319
|
-
* 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}
|
|
320
340
|
*/
|
|
321
341
|
error: _propTypes.default.bool,
|
|
322
|
-
/**
|
|
323
|
-
* Helper text displayed below the input field.
|
|
324
|
-
* Can be used for:
|
|
325
|
-
* - Field descriptions/instructions (when error is false)
|
|
326
|
-
* - Error messages (when error is true)
|
|
327
|
-
* Color automatically adjusts based on error state.
|
|
328
|
-
*
|
|
329
|
-
* @example
|
|
330
|
-
* 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"}
|
|
331
351
|
*/
|
|
332
352
|
helperText: _propTypes.default.string,
|
|
333
|
-
/**
|
|
334
|
-
* Loading state flag. When true:
|
|
335
|
-
* - Displays a loading spinner instead of dropdown arrow
|
|
336
|
-
* - Shows "Loading..." placeholder text
|
|
337
|
-
* - Disables the input (prevents user interaction)
|
|
338
|
-
* - Prevents dropdown from opening
|
|
339
|
-
* - Input background becomes gray
|
|
340
|
-
*
|
|
341
|
-
* Use this when fetching options from an API or performing async operations.
|
|
342
|
-
*
|
|
343
|
-
* @example
|
|
344
|
-
* 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}
|
|
345
365
|
*/
|
|
346
366
|
loading: _propTypes.default.bool,
|
|
347
|
-
/**
|
|
348
|
-
* Property name to use as the unique identifier for options.
|
|
349
|
-
* Used for:
|
|
350
|
-
* - Comparing options for equality (isOptionEqualToValue)
|
|
351
|
-
* - Matching defaultValue when it's a primitive
|
|
352
|
-
* - React keys in the options list
|
|
353
|
-
*
|
|
354
|
-
* Each option object must have this property and it should be unique.
|
|
355
|
-
*
|
|
356
|
-
* @default "id"
|
|
357
|
-
* @example
|
|
358
|
-
* by="userId"
|
|
359
|
-
* // 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" }, ...]
|
|
360
380
|
*/
|
|
361
381
|
by: _propTypes.default.string,
|
|
362
|
-
/**
|
|
363
|
-
* Property name to use for displaying option text.
|
|
364
|
-
* This value is shown in:
|
|
365
|
-
* - The dropdown options list
|
|
366
|
-
* - The input field when an option is selected
|
|
367
|
-
* - The filtered search results
|
|
368
|
-
*
|
|
369
|
-
* @default "label"
|
|
370
|
-
* @example
|
|
371
|
-
* labelKey="name"
|
|
372
|
-
* // 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" }, ...]
|
|
373
393
|
*/
|
|
374
394
|
labelKey: _propTypes.default.string
|
|
375
395
|
};
|
|
@@ -387,4 +407,5 @@ Combobox.defaultProps = {
|
|
|
387
407
|
by: "id",
|
|
388
408
|
labelKey: "label"
|
|
389
409
|
};
|
|
390
|
-
var _default =
|
|
410
|
+
var _default = Combobox;
|
|
411
|
+
exports.default = _default;
|
|
@@ -10,20 +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
|
-
function
|
|
16
|
-
function
|
|
17
|
-
function
|
|
18
|
-
function
|
|
19
|
-
function
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
}
|
|
26
|
-
|
|
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
|
+
});
|
|
27
31
|
function Divider(props) {
|
|
28
32
|
return /*#__PURE__*/React.createElement(Root, null, props.type && props.type === "Chip" ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_material.Divider, {
|
|
29
33
|
textAlign: props.textAlign && props.textAlign
|