@comet/admin 9.0.0-beta.4 → 9.0.0-beta.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (67) hide show
  1. package/lib/common/ClearInputAdornment.d.ts.map +1 -1
  2. package/lib/common/ClearInputAdornment.js +6 -2
  3. package/lib/common/DeleteDialog.d.ts +1 -0
  4. package/lib/common/DeleteDialog.d.ts.map +1 -1
  5. package/lib/common/DeleteDialog.js +8 -1
  6. package/lib/common/buttons/clearinput/ClearInputButton.js +1 -1
  7. package/lib/dataGrid/excelExport/generateExcelFile.d.ts.map +1 -1
  8. package/lib/dataGrid/excelExport/generateExcelFile.js +23 -1
  9. package/lib/dateTime/timePicker/TimePicker.d.ts.map +1 -1
  10. package/lib/dateTime/timePicker/TimePicker.js +2 -17
  11. package/lib/dateTime/timeRangePicker/TimeRangePicker.d.ts +71 -0
  12. package/lib/dateTime/timeRangePicker/TimeRangePicker.d.ts.map +1 -0
  13. package/lib/dateTime/timeRangePicker/TimeRangePicker.js +191 -0
  14. package/lib/dateTime/timeRangePickerField/TimeRangePickerField.d.ts +13 -0
  15. package/lib/dateTime/timeRangePickerField/TimeRangePickerField.d.ts.map +1 -0
  16. package/lib/dateTime/timeRangePickerField/TimeRangePickerField.js +31 -0
  17. package/lib/dateTime/utils.d.ts +6 -0
  18. package/lib/dateTime/utils.d.ts.map +1 -1
  19. package/lib/dateTime/utils.js +19 -1
  20. package/lib/{EditDialog.d.ts → editDialog/EditDialog.d.ts} +1 -1
  21. package/lib/editDialog/EditDialog.d.ts.map +1 -0
  22. package/lib/{EditDialog.js → editDialog/EditDialog.js} +5 -5
  23. package/lib/editDialog/EditDialogApiContext.d.ts.map +1 -0
  24. package/lib/form/FinalFormNumberInput.d.ts.map +1 -1
  25. package/lib/form/FinalFormNumberInput.js +2 -3
  26. package/lib/helpers/useTopOffset.js +1 -1
  27. package/lib/index.d.ts +4 -2
  28. package/lib/index.d.ts.map +1 -1
  29. package/lib/index.js +4 -2
  30. package/lib/theme/componentsTheme/MuiDataGrid.js +1 -1
  31. package/package.json +26 -19
  32. package/lib/EditDialog.d.ts.map +0 -1
  33. package/lib/EditDialogApiContext.d.ts.map +0 -1
  34. package/lib/alert/__stories__/Alert.stories.js +0 -152
  35. package/lib/common/__stories__/Tooltip.stories.js +0 -404
  36. package/lib/common/buttons/__stories__/Button.stories.js +0 -445
  37. package/lib/common/buttons/delete/__stories__/DeleteButton.stories.js +0 -8
  38. package/lib/dateTime/datePicker/__stories__/DatePicker.stories.js +0 -214
  39. package/lib/dateTime/datePickerField/__stories__/DatePickerField.stories.js +0 -220
  40. package/lib/dateTime/dateRangePicker/__stories__/DateRangePicker.stories.js +0 -238
  41. package/lib/dateTime/dateRangePickerField/__stories__/DateRangePickerField.stories.js +0 -224
  42. package/lib/dateTime/dateTimePicker/__stories__/DateTimePicker.stories.js +0 -214
  43. package/lib/dateTime/dateTimePickerField/__stories__/DateTimePickerField.stories.js +0 -220
  44. package/lib/dateTime/dateTimeRangePicker/__stories__/DateTimeRangePicker.stories.js +0 -238
  45. package/lib/dateTime/dateTimeRangePickerField/__stories__/DateTimeRangePickerField.stories.js +0 -223
  46. package/lib/dateTime/timePicker/__stories__/TimePicker.stories.js +0 -219
  47. package/lib/dateTime/timePickerField/__stories__/TimePickerField.stories.js +0 -229
  48. package/lib/section/__stories__/SectionHeadline.stories.js +0 -71
  49. package/lib/stack/__stories__/RouterTabsNestedStack.stories.js +0 -51
  50. package/lib/stack/__stories__/Stack.stories.js +0 -14
  51. package/lib/stack/__stories__/StackBackButton.stories.js +0 -50
  52. package/lib/stack/__stories__/StackBreadcrumbs.stories.js +0 -139
  53. package/lib/stack/__stories__/StackBreadcrumbsTabs.stories.js +0 -47
  54. package/lib/stack/__stories__/StackCustomSeparator.stories.js +0 -47
  55. package/lib/stack/__stories__/StackLink.stories.js +0 -41
  56. package/lib/stack/__stories__/StackNested.stories.js +0 -58
  57. package/lib/stack/__stories__/StackNestedOnInitialPage.stories.js +0 -78
  58. package/lib/stack/__stories__/StackNestedOneStack.stories.js +0 -90
  59. package/lib/stack/__stories__/StackPageTitle.stories.js +0 -121
  60. package/lib/stack/__stories__/StackReactNodeTitle.stories.js +0 -54
  61. package/lib/stack/__stories__/StackRefApi.stories.js +0 -56
  62. package/lib/stack/__stories__/StackTableFormQueryAtStack.stories.js +0 -155
  63. package/lib/stack/__stories__/StackTableFormQueryInTable.stories.js +0 -160
  64. package/lib/stack/__stories__/StackUrl.stories.js +0 -66
  65. package/lib/translator/__stories__/ContentTranslation.stories.js +0 -104
  66. /package/lib/{EditDialogApiContext.d.ts → editDialog/EditDialogApiContext.d.ts} +0 -0
  67. /package/lib/{EditDialogApiContext.js → editDialog/EditDialogApiContext.js} +0 -0
@@ -1,223 +0,0 @@
1
- function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
2
- function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
3
- function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
4
- function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
5
- import { FinalForm } from "../../../FinalForm";
6
- import { FinalFormDebug } from "../../../form/FinalFormDebug";
7
- import { DateTimeRangePickerField } from "../DateTimeRangePickerField";
8
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
9
- var config = {
10
- component: DateTimeRangePickerField,
11
- title: "components/dateTime/DateTimeRangePickerField"
12
- };
13
- export default config;
14
-
15
- /**
16
- * The basic DateTimeRangePickerField component allows users to select a date and time range.
17
- *
18
- * Use this when you need:
19
- * - A date time range input in a form
20
- * - Users to select a start and end date with time from calendar and time picker interfaces
21
- * - DateTime range values to be stored as objects with start and end Date properties
22
- */
23
- export var Default = {
24
- render: function render() {
25
- return /*#__PURE__*/_jsx(FinalForm, {
26
- mode: "edit",
27
- onSubmit: function onSubmit() {
28
- // not handled
29
- },
30
- subscription: {
31
- values: true
32
- },
33
- children: function children(_ref) {
34
- var values = _ref.values;
35
- return /*#__PURE__*/_jsxs(_Fragment, {
36
- children: [/*#__PURE__*/_jsx(DateTimeRangePickerField, {
37
- name: "value",
38
- label: "Date Time Range Picker",
39
- fullWidth: true,
40
- variant: "horizontal"
41
- }), /*#__PURE__*/_jsx(FinalFormDebug, {})]
42
- });
43
- }
44
- });
45
- }
46
- };
47
-
48
- /**
49
- * DateTimeRangePickerField can be configured with minimum and maximum date constraints.
50
- *
51
- * Use this when:
52
- * - You need to restrict selectable dates to a specific range
53
- * - Business rules require date boundaries
54
- * - You want to prevent invalid date and time selections
55
- */
56
- export var MinMaxDate = {
57
- args: {
58
- minDate: new Date(2025, 0, 1),
59
- maxDate: new Date(2025, 11, 31)
60
- },
61
- argTypes: {
62
- minDate: {
63
- control: "date"
64
- },
65
- maxDate: {
66
- control: "date"
67
- }
68
- },
69
- render: function render(args) {
70
- return /*#__PURE__*/_jsx(FinalForm, {
71
- mode: "edit",
72
- onSubmit: function onSubmit() {
73
- // not handled
74
- },
75
- subscription: {
76
- values: true
77
- },
78
- children: function children(_ref2) {
79
- var values = _ref2.values;
80
- return /*#__PURE__*/_jsxs(_Fragment, {
81
- children: [/*#__PURE__*/_jsx(DateTimeRangePickerField, {
82
- name: "value",
83
- label: "Date Time Range Picker with Min/Max Date",
84
- fullWidth: true,
85
- variant: "horizontal",
86
- minDate: args.minDate,
87
- maxDate: args.maxDate
88
- }), /*#__PURE__*/_jsx(FinalFormDebug, {})]
89
- });
90
- }
91
- });
92
- }
93
- };
94
-
95
- /**
96
- * DateTimeRangePickerField with clearable functionality allows users to reset the selected date time range.
97
- *
98
- * Use this when:
99
- * - The date time range field is optional
100
- * - Users should be able to clear their selection
101
- * - You want to provide an easy way to reset the field
102
- */
103
- export var Clearable = {
104
- render: function render() {
105
- return /*#__PURE__*/_jsx(FinalForm, {
106
- mode: "edit",
107
- onSubmit: function onSubmit() {
108
- // not handled
109
- },
110
- subscription: {
111
- values: true
112
- },
113
- children: function children(_ref3) {
114
- var values = _ref3.values;
115
- return /*#__PURE__*/_jsxs(_Fragment, {
116
- children: [/*#__PURE__*/_jsx(DateTimeRangePickerField, {
117
- clearable: true,
118
- name: "value",
119
- label: "Clearable Date Time Range Picker",
120
- fullWidth: true,
121
- variant: "horizontal"
122
- }), /*#__PURE__*/_jsx(FinalFormDebug, {})]
123
- });
124
- }
125
- });
126
- }
127
- };
128
-
129
- /**
130
- * DateTimeRangePickerField can be disabled to prevent user interaction.
131
- *
132
- * Use this when:
133
- * - The date time range should be displayed but not editable
134
- * - Form logic requires certain conditions before editing
135
- * - You want to show read-only date time range information
136
- */
137
- export var Disabled = {
138
- render: function render() {
139
- return /*#__PURE__*/_jsx(FinalForm, {
140
- mode: "edit",
141
- onSubmit: function onSubmit() {
142
- // not handled
143
- },
144
- initialValues: {
145
- value: {
146
- start: new Date(2026, 0, 15, 10, 0),
147
- end: new Date(2026, 0, 20, 18, 0)
148
- }
149
- },
150
- subscription: {
151
- values: true
152
- },
153
- children: function children(_ref4) {
154
- var values = _ref4.values;
155
- return /*#__PURE__*/_jsxs(_Fragment, {
156
- children: [/*#__PURE__*/_jsx(DateTimeRangePickerField, {
157
- disabled: true,
158
- name: "value",
159
- label: "Disabled Date Time Range Picker",
160
- fullWidth: true,
161
- variant: "horizontal"
162
- }), /*#__PURE__*/_jsx(FinalFormDebug, {})]
163
- });
164
- }
165
- });
166
- }
167
- };
168
-
169
- /**
170
- * Before implementing custom validation, try to disable certain values using the props provided by MUI's DateTimeRangePicker, such as `shouldDisableDate`, `shouldDisableTime`, `disableFuture`, `disablePast`.
171
- *
172
- * Use this when:
173
- * - You need to validate the date time range against a custom rule, which cannot be achieved using the props provided by MUI's DateTimeRangePicker
174
- * - You want to provide a custom error message
175
- * - You want to validate the date time range asynchronously
176
- */
177
- export var CustomValidation = {
178
- render: function render() {
179
- var validateMaxThirtyDayRange = /*#__PURE__*/function () {
180
- var _ref5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(value) {
181
- var millisecondsDifference, daysDifference;
182
- return _regenerator().w(function (_context) {
183
- while (1) switch (_context.n) {
184
- case 0:
185
- if (!(!(value !== null && value !== void 0 && value.start) || !(value !== null && value !== void 0 && value.end))) {
186
- _context.n = 1;
187
- break;
188
- }
189
- return _context.a(2, undefined);
190
- case 1:
191
- millisecondsDifference = value.end.getTime() - value.start.getTime();
192
- daysDifference = millisecondsDifference / (1000 * 60 * 60 * 24);
193
- return _context.a(2, daysDifference <= 30 ? undefined : "Please select a range no longer than 30 days");
194
- }
195
- }, _callee);
196
- }));
197
- return function validateMaxThirtyDayRange(_x) {
198
- return _ref5.apply(this, arguments);
199
- };
200
- }();
201
- return /*#__PURE__*/_jsx(FinalForm, {
202
- mode: "edit",
203
- onSubmit: function onSubmit() {
204
- // not handled
205
- },
206
- subscription: {
207
- values: true
208
- },
209
- children: function children() {
210
- return /*#__PURE__*/_jsxs(_Fragment, {
211
- children: [/*#__PURE__*/_jsx(DateTimeRangePickerField, {
212
- name: "value",
213
- label: "Date Time Range Picker",
214
- helperText: "The selected range must not exceed 30 days",
215
- fullWidth: true,
216
- variant: "horizontal",
217
- validate: validateMaxThirtyDayRange
218
- }), /*#__PURE__*/_jsx(FinalFormDebug, {})]
219
- });
220
- }
221
- });
222
- }
223
- };
@@ -1,219 +0,0 @@
1
- function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
2
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
3
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
4
- function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
5
- function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
6
- function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
7
- function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
8
- 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."); }
9
- function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
10
- function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
11
- function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
12
- function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
13
- import { Edit } from "@comet/admin-icons";
14
- import { Box, Typography } from "@mui/material";
15
- import { useState } from "react";
16
- import { TimePicker } from "../TimePicker";
17
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
18
- var config = {
19
- component: TimePicker,
20
- title: "components/dateTime/TimePicker"
21
- };
22
- export default config;
23
-
24
- /**
25
- * The basic TimePicker component allows users to select a time from a time picker interface.
26
- *
27
- * Use this for time input fields where users need to pick a specific time.
28
- */
29
- export var Default = {
30
- render: function render(args) {
31
- var _useState = useState("14:30"),
32
- _useState2 = _slicedToArray(_useState, 2),
33
- value = _useState2[0],
34
- setValue = _useState2[1];
35
- return /*#__PURE__*/_jsx(TimePicker, _objectSpread(_objectSpread({}, args), {}, {
36
- value: value,
37
- onChange: setValue
38
- }));
39
- }
40
- };
41
- export var FullWidth = {
42
- render: function render(args) {
43
- var _useState3 = useState("14:30"),
44
- _useState4 = _slicedToArray(_useState3, 2),
45
- value = _useState4[0],
46
- setValue = _useState4[1];
47
- return /*#__PURE__*/_jsx(TimePicker, _objectSpread(_objectSpread({}, args), {}, {
48
- fullWidth: true,
49
- value: value,
50
- onChange: setValue
51
- }));
52
- }
53
- };
54
-
55
- /**
56
- * TimePicker in a required state.
57
- *
58
- * Use this when:
59
- * - The time selection is mandatory
60
- * - Form validation requires a time value
61
- * - Users must select a time to proceed
62
- *
63
- * Note: The clear button is automatically hidden when the field is required.
64
- */
65
- export var Required = {
66
- render: function render(args) {
67
- var _useState5 = useState("14:30"),
68
- _useState6 = _slicedToArray(_useState5, 2),
69
- value = _useState6[0],
70
- setValue = _useState6[1];
71
- return /*#__PURE__*/_jsx(TimePicker, _objectSpread(_objectSpread({}, args), {}, {
72
- required: true,
73
- value: value,
74
- onChange: setValue
75
- }));
76
- }
77
- };
78
-
79
- /**
80
- * TimePicker in a disabled state.
81
- *
82
- * Use this when:
83
- * - The time cannot be changed due to permissions or state
84
- * - You want to show a time value but prevent interaction
85
- * - Form logic requires the field to be temporarily disabled
86
- */
87
- export var Disabled = {
88
- render: function render(args) {
89
- var _useState7 = useState("14:30"),
90
- _useState8 = _slicedToArray(_useState7, 2),
91
- value = _useState8[0],
92
- setValue = _useState8[1];
93
- return /*#__PURE__*/_jsx(TimePicker, _objectSpread(_objectSpread({}, args), {}, {
94
- disabled: true,
95
- value: value,
96
- onChange: setValue
97
- }));
98
- }
99
- };
100
-
101
- /**
102
- * TimePicker in a read-only state.
103
- *
104
- * Use this when:
105
- * - The time should be visible but not editable
106
- * - You want to display a time value that cannot be modified
107
- * - The field is used for reference only
108
- */
109
- export var ReadOnly = {
110
- render: function render(args) {
111
- var _useState9 = useState("14:30"),
112
- _useState0 = _slicedToArray(_useState9, 2),
113
- value = _useState0[0],
114
- setValue = _useState0[1];
115
- return /*#__PURE__*/_jsx(TimePicker, _objectSpread(_objectSpread({}, args), {}, {
116
- readOnly: true,
117
- value: value,
118
- onChange: setValue
119
- }));
120
- }
121
- };
122
-
123
- /**
124
- * TimePicker with a custom icon.
125
- *
126
- * Use this when:
127
- * - You want to match your brand's icon style
128
- * - The default time icon doesn't fit your design
129
- * - You need to indicate a specific type of time selection
130
- */
131
- export var WithCustomIcon = {
132
- render: function render(args) {
133
- var _useState1 = useState("14:30"),
134
- _useState10 = _slicedToArray(_useState1, 2),
135
- value = _useState10[0],
136
- setValue = _useState10[1];
137
- return /*#__PURE__*/_jsx(TimePicker, _objectSpread(_objectSpread({}, args), {}, {
138
- value: value,
139
- onChange: setValue,
140
- iconMapping: {
141
- openPicker: /*#__PURE__*/_jsx(Edit, {})
142
- }
143
- }));
144
- }
145
- };
146
-
147
- /**
148
- * TimePicker with time restrictions.
149
- *
150
- * Use this when:
151
- * - Only certain times should be selectable
152
- * - You need to limit selection to business hours
153
- * - Business rules require time range restrictions
154
- */
155
- export var WithTimeRestrictions = {
156
- args: {
157
- minTime: new Date(2000, 0, 1, 9, 0),
158
- maxTime: new Date(2000, 0, 1, 17, 0)
159
- },
160
- argTypes: {
161
- minTime: {
162
- control: "date"
163
- },
164
- maxTime: {
165
- control: "date"
166
- }
167
- },
168
- render: function render(args) {
169
- var _useState11 = useState(),
170
- _useState12 = _slicedToArray(_useState11, 2),
171
- value = _useState12[0],
172
- setValue = _useState12[1];
173
- return /*#__PURE__*/_jsx(TimePicker, _objectSpread(_objectSpread({}, args), {}, {
174
- label: "Business Hours Only",
175
- minTime: args.minTime,
176
- maxTime: args.maxTime,
177
- value: value,
178
- onChange: setValue
179
- }));
180
- }
181
- };
182
-
183
- /**
184
- * Multiple TimePicker instances demonstrating different configurations.
185
- *
186
- * This example shows how TimePickers can be combined in forms or interfaces
187
- * to collect multiple time values with different requirements and states.
188
- */
189
- export var MultiplePickers = {
190
- render: function render(args) {
191
- var _useState13 = useState("09:00"),
192
- _useState14 = _slicedToArray(_useState13, 2),
193
- startTime = _useState14[0],
194
- setStartTime = _useState14[1];
195
- var _useState15 = useState("17:00"),
196
- _useState16 = _slicedToArray(_useState15, 2),
197
- endTime = _useState16[0],
198
- setEndTime = _useState16[1];
199
- return /*#__PURE__*/_jsxs(Box, {
200
- display: "flex",
201
- flexDirection: "column",
202
- gap: 4,
203
- children: [/*#__PURE__*/_jsx(Typography, {
204
- variant: "h5",
205
- children: "Work Hours"
206
- }), /*#__PURE__*/_jsx(TimePicker, _objectSpread(_objectSpread({}, args), {}, {
207
- label: "Start Time",
208
- fullWidth: true,
209
- value: startTime,
210
- onChange: setStartTime
211
- })), /*#__PURE__*/_jsx(TimePicker, _objectSpread(_objectSpread({}, args), {}, {
212
- label: "End Time",
213
- fullWidth: true,
214
- value: endTime,
215
- onChange: setEndTime
216
- }))]
217
- });
218
- }
219
- };
@@ -1,229 +0,0 @@
1
- function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
2
- function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
3
- function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
4
- 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."); }
5
- function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
6
- function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
7
- function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
8
- function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
9
- function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
10
- function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
11
- import { FinalForm } from "../../../FinalForm";
12
- import { FinalFormDebug } from "../../../form/FinalFormDebug";
13
- import { TimePickerField } from "../TimePickerField";
14
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
15
- var config = {
16
- component: TimePickerField,
17
- title: "components/dateTime/TimePickerField"
18
- };
19
- export default config;
20
-
21
- /**
22
- * The basic TimePickerField component allows users to select a time.
23
- *
24
- * Use this when you need:
25
- * - A time input in a form
26
- * - Users to select a specific time from a time picker interface
27
- * - Time values to be stored as strings
28
- */
29
- export var Default = {
30
- render: function render() {
31
- return /*#__PURE__*/_jsx(FinalForm, {
32
- mode: "edit",
33
- onSubmit: function onSubmit() {
34
- // not handled
35
- },
36
- subscription: {
37
- values: true
38
- },
39
- children: function children(_ref) {
40
- var values = _ref.values;
41
- return /*#__PURE__*/_jsxs(_Fragment, {
42
- children: [/*#__PURE__*/_jsx(TimePickerField, {
43
- name: "value",
44
- label: "Time Picker",
45
- fullWidth: true,
46
- variant: "horizontal"
47
- }), /*#__PURE__*/_jsx(FinalFormDebug, {})]
48
- });
49
- }
50
- });
51
- }
52
- };
53
-
54
- /**
55
- * TimePickerField can be configured with minimum and maximum time constraints.
56
- *
57
- * Use this when:
58
- * - You need to restrict selectable times to a specific range
59
- * - Business rules require time boundaries (e.g., business hours)
60
- * - You want to prevent invalid time selections
61
- */
62
- export var MinMaxTime = {
63
- args: {
64
- minTime: new Date(2000, 0, 1, 9, 0),
65
- maxTime: new Date(2000, 0, 1, 17, 0)
66
- },
67
- argTypes: {
68
- minTime: {
69
- control: "date"
70
- },
71
- maxTime: {
72
- control: "date"
73
- }
74
- },
75
- render: function render(args) {
76
- return /*#__PURE__*/_jsx(FinalForm, {
77
- mode: "edit",
78
- onSubmit: function onSubmit() {
79
- // not handled
80
- },
81
- subscription: {
82
- values: true
83
- },
84
- children: function children(_ref2) {
85
- var values = _ref2.values;
86
- return /*#__PURE__*/_jsxs(_Fragment, {
87
- children: [/*#__PURE__*/_jsx(TimePickerField, {
88
- name: "value",
89
- label: "Time Picker with Min/Max Time",
90
- fullWidth: true,
91
- variant: "horizontal",
92
- minTime: args.minTime,
93
- maxTime: args.maxTime
94
- }), /*#__PURE__*/_jsx(FinalFormDebug, {})]
95
- });
96
- }
97
- });
98
- }
99
- };
100
-
101
- /**
102
- * TimePickerField with clearable functionality allows users to reset the selected time.
103
- *
104
- * Use this when:
105
- * - The time field is optional
106
- * - Users should be able to clear their selection
107
- * - You want to provide an easy way to reset the field
108
- */
109
- export var Clearable = {
110
- render: function render() {
111
- return /*#__PURE__*/_jsx(FinalForm, {
112
- mode: "edit",
113
- onSubmit: function onSubmit() {
114
- // not handled
115
- },
116
- subscription: {
117
- values: true
118
- },
119
- children: function children(_ref3) {
120
- var values = _ref3.values;
121
- return /*#__PURE__*/_jsxs(_Fragment, {
122
- children: [/*#__PURE__*/_jsx(TimePickerField, {
123
- clearable: true,
124
- name: "value",
125
- label: "Clearable Time Picker",
126
- fullWidth: true,
127
- variant: "horizontal"
128
- }), /*#__PURE__*/_jsx(FinalFormDebug, {})]
129
- });
130
- }
131
- });
132
- }
133
- };
134
-
135
- /**
136
- * TimePickerField can be disabled to prevent user interaction.
137
- *
138
- * Use this when:
139
- * - The time should be displayed but not editable
140
- * - Form logic requires certain conditions before editing
141
- * - You want to show read-only time information
142
- */
143
- export var Disabled = {
144
- render: function render() {
145
- return /*#__PURE__*/_jsx(FinalForm, {
146
- mode: "edit",
147
- onSubmit: function onSubmit() {
148
- // not handled
149
- },
150
- initialValues: {
151
- value: "14:30"
152
- },
153
- subscription: {
154
- values: true
155
- },
156
- children: function children(_ref4) {
157
- var values = _ref4.values;
158
- return /*#__PURE__*/_jsxs(_Fragment, {
159
- children: [/*#__PURE__*/_jsx(TimePickerField, {
160
- disabled: true,
161
- name: "value",
162
- label: "Disabled Time Picker",
163
- fullWidth: true,
164
- variant: "horizontal"
165
- }), /*#__PURE__*/_jsx(FinalFormDebug, {})]
166
- });
167
- }
168
- });
169
- }
170
- };
171
-
172
- /**
173
- * Before implementing custom validation, try to disable certain values using the props provided by MUI's TimePicker, such as `shouldDisableTime`, `minTime`, `maxTime`.
174
- *
175
- * Use this when:
176
- * - You need to validate the time against a custom rule, which cannot be achieved using the props provided by MUI's TimePicker
177
- * - You want to provide a custom error message
178
- * - You want to validate the time asynchronously
179
- */
180
- export var CustomValidation = {
181
- render: function render() {
182
- var validateIsNotLunchBreak = /*#__PURE__*/function () {
183
- var _ref5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(value) {
184
- var _value$split$map, _value$split$map2, hours, minutes, totalMinutes, lunchStartMinutes, lunchEndMinutes, isDuringLunchBreak;
185
- return _regenerator().w(function (_context) {
186
- while (1) switch (_context.n) {
187
- case 0:
188
- if (value) {
189
- _context.n = 1;
190
- break;
191
- }
192
- return _context.a(2, undefined);
193
- case 1:
194
- _value$split$map = value.split(":").map(Number), _value$split$map2 = _slicedToArray(_value$split$map, 2), hours = _value$split$map2[0], minutes = _value$split$map2[1];
195
- totalMinutes = hours * 60 + minutes;
196
- lunchStartMinutes = 12 * 60;
197
- lunchEndMinutes = 13 * 60;
198
- isDuringLunchBreak = totalMinutes >= lunchStartMinutes && totalMinutes < lunchEndMinutes;
199
- return _context.a(2, isDuringLunchBreak ? "Please select a time outside of lunch break (12:00-13:00)" : undefined);
200
- }
201
- }, _callee);
202
- }));
203
- return function validateIsNotLunchBreak(_x) {
204
- return _ref5.apply(this, arguments);
205
- };
206
- }();
207
- return /*#__PURE__*/_jsx(FinalForm, {
208
- mode: "edit",
209
- onSubmit: function onSubmit() {
210
- // not handled
211
- },
212
- subscription: {
213
- values: true
214
- },
215
- children: function children() {
216
- return /*#__PURE__*/_jsxs(_Fragment, {
217
- children: [/*#__PURE__*/_jsx(TimePickerField, {
218
- name: "value",
219
- label: "Time Picker",
220
- helperText: "Lunch break (12:00-13:00) is not allowed",
221
- fullWidth: true,
222
- variant: "horizontal",
223
- validate: validateIsNotLunchBreak
224
- }), /*#__PURE__*/_jsx(FinalFormDebug, {})]
225
- });
226
- }
227
- });
228
- }
229
- };