@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,214 +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 { DateTimePicker } from "../DateTimePicker";
17
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
18
- var config = {
19
- component: DateTimePicker,
20
- title: "components/dateTime/DateTimePicker"
21
- };
22
- export default config;
23
-
24
- /**
25
- * The basic DateTimePicker component allows users to select both a date and time from a calendar and time picker interface.
26
- *
27
- * Use this for date time input fields where users need to pick a specific date and time.
28
- */
29
- export var Default = {
30
- render: function render(args) {
31
- var _useState = useState(new Date(2024, 0, 15, 14, 30)),
32
- _useState2 = _slicedToArray(_useState, 2),
33
- value = _useState2[0],
34
- setValue = _useState2[1];
35
- return /*#__PURE__*/_jsx(DateTimePicker, _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(new Date(2024, 0, 15, 14, 30)),
44
- _useState4 = _slicedToArray(_useState3, 2),
45
- value = _useState4[0],
46
- setValue = _useState4[1];
47
- return /*#__PURE__*/_jsx(DateTimePicker, _objectSpread(_objectSpread({}, args), {}, {
48
- fullWidth: true,
49
- value: value,
50
- onChange: setValue
51
- }));
52
- }
53
- };
54
-
55
- /**
56
- * DateTimePicker in a required state.
57
- *
58
- * Use this when:
59
- * - The date and time selection is mandatory
60
- * - Form validation requires a date time value
61
- * - Users must select a date and 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(new Date(2024, 0, 15, 14, 30)),
68
- _useState6 = _slicedToArray(_useState5, 2),
69
- value = _useState6[0],
70
- setValue = _useState6[1];
71
- return /*#__PURE__*/_jsx(DateTimePicker, _objectSpread(_objectSpread({}, args), {}, {
72
- required: true,
73
- value: value,
74
- onChange: setValue
75
- }));
76
- }
77
- };
78
-
79
- /**
80
- * DateTimePicker in a disabled state.
81
- *
82
- * Use this when:
83
- * - The date and time cannot be changed due to permissions or state
84
- * - You want to show a date 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(new Date(2024, 0, 15, 14, 30)),
90
- _useState8 = _slicedToArray(_useState7, 2),
91
- value = _useState8[0],
92
- setValue = _useState8[1];
93
- return /*#__PURE__*/_jsx(DateTimePicker, _objectSpread(_objectSpread({}, args), {}, {
94
- disabled: true,
95
- value: value,
96
- onChange: setValue
97
- }));
98
- }
99
- };
100
-
101
- /**
102
- * DateTimePicker in a read-only state.
103
- *
104
- * Use this when:
105
- * - The date and time should be visible but not editable
106
- * - You want to display a date 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(new Date(2024, 0, 15, 14, 30)),
112
- _useState0 = _slicedToArray(_useState9, 2),
113
- value = _useState0[0],
114
- setValue = _useState0[1];
115
- return /*#__PURE__*/_jsx(DateTimePicker, _objectSpread(_objectSpread({}, args), {}, {
116
- readOnly: true,
117
- value: value,
118
- onChange: setValue
119
- }));
120
- }
121
- };
122
-
123
- /**
124
- * DateTimePicker with a custom icon.
125
- *
126
- * Use this when:
127
- * - You want to match your brand's icon style
128
- * - The default calendar icon doesn't fit your design
129
- * - You need to indicate a specific type of date time selection
130
- */
131
- export var WithCustomIcon = {
132
- render: function render(args) {
133
- var _useState1 = useState(new Date(2024, 0, 15, 14, 30)),
134
- _useState10 = _slicedToArray(_useState1, 2),
135
- value = _useState10[0],
136
- setValue = _useState10[1];
137
- return /*#__PURE__*/_jsx(DateTimePicker, _objectSpread(_objectSpread({}, args), {}, {
138
- value: value,
139
- onChange: setValue,
140
- iconMapping: {
141
- openPicker: /*#__PURE__*/_jsx(Edit, {})
142
- }
143
- }));
144
- }
145
- };
146
-
147
- /**
148
- * DateTimePicker with date restrictions.
149
- *
150
- * Use this when:
151
- * - Only certain dates should be selectable
152
- * - You need to limit selection to future or past dates
153
- * - Business rules require date time range restrictions
154
- */
155
- export var WithDateRestrictions = {
156
- args: {
157
- minDate: new Date()
158
- },
159
- argTypes: {
160
- minDate: {
161
- control: "date"
162
- }
163
- },
164
- render: function render(args) {
165
- var _useState11 = useState(),
166
- _useState12 = _slicedToArray(_useState11, 2),
167
- value = _useState12[0],
168
- setValue = _useState12[1];
169
- return /*#__PURE__*/_jsx(DateTimePicker, _objectSpread(_objectSpread({}, args), {}, {
170
- label: "Future Date Time Only",
171
- minDate: args.minDate,
172
- value: value,
173
- onChange: setValue
174
- }));
175
- }
176
- };
177
-
178
- /**
179
- * Multiple DateTimePicker instances demonstrating different configurations.
180
- *
181
- * This example shows how DateTimePickers can be combined in forms or interfaces
182
- * to collect multiple date time values with different requirements and states.
183
- */
184
- export var MultiplePickers = {
185
- render: function render(args) {
186
- var _useState13 = useState(new Date(2024, 0, 15, 9, 0)),
187
- _useState14 = _slicedToArray(_useState13, 2),
188
- startDateTime = _useState14[0],
189
- setStartDateTime = _useState14[1];
190
- var _useState15 = useState(new Date(2024, 0, 15, 17, 0)),
191
- _useState16 = _slicedToArray(_useState15, 2),
192
- endDateTime = _useState16[0],
193
- setEndDateTime = _useState16[1];
194
- return /*#__PURE__*/_jsxs(Box, {
195
- display: "flex",
196
- flexDirection: "column",
197
- gap: 4,
198
- children: [/*#__PURE__*/_jsx(Typography, {
199
- variant: "h5",
200
- children: "Date Time Range Selection"
201
- }), /*#__PURE__*/_jsx(DateTimePicker, _objectSpread(_objectSpread({}, args), {}, {
202
- label: "Start Date Time",
203
- fullWidth: true,
204
- value: startDateTime,
205
- onChange: setStartDateTime
206
- })), /*#__PURE__*/_jsx(DateTimePicker, _objectSpread(_objectSpread({}, args), {}, {
207
- label: "End Date Time",
208
- fullWidth: true,
209
- value: endDateTime,
210
- onChange: setEndDateTime
211
- }))]
212
- });
213
- }
214
- };
@@ -1,220 +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 { DateTimePickerField } from "../DateTimePickerField";
8
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
9
- var config = {
10
- component: DateTimePickerField,
11
- title: "components/dateTime/DateTimePickerField"
12
- };
13
- export default config;
14
-
15
- /**
16
- * The basic DateTimePickerField component allows users to select both a date and time.
17
- *
18
- * Use this when you need:
19
- * - A date and time input in a form
20
- * - Users to select a specific date and time from a calendar and time picker interface
21
- * - DateTime values to be stored as Date objects
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(DateTimePickerField, {
37
- name: "value",
38
- label: "Date Time Picker",
39
- fullWidth: true,
40
- variant: "horizontal"
41
- }), /*#__PURE__*/_jsx(FinalFormDebug, {})]
42
- });
43
- }
44
- });
45
- }
46
- };
47
-
48
- /**
49
- * DateTimePickerField 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(DateTimePickerField, {
82
- name: "value",
83
- label: "Date Time 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
- * DateTimePickerField with clearable functionality allows users to reset the selected date and time.
97
- *
98
- * Use this when:
99
- * - The date time 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(DateTimePickerField, {
117
- clearable: true,
118
- name: "value",
119
- label: "Clearable Date Time Picker",
120
- fullWidth: true,
121
- variant: "horizontal"
122
- }), /*#__PURE__*/_jsx(FinalFormDebug, {})]
123
- });
124
- }
125
- });
126
- }
127
- };
128
-
129
- /**
130
- * DateTimePickerField can be disabled to prevent user interaction.
131
- *
132
- * Use this when:
133
- * - The date and time should be displayed but not editable
134
- * - Form logic requires certain conditions before editing
135
- * - You want to show read-only date and time 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: new Date(2026, 0, 15, 14, 30)
146
- },
147
- subscription: {
148
- values: true
149
- },
150
- children: function children(_ref4) {
151
- var values = _ref4.values;
152
- return /*#__PURE__*/_jsxs(_Fragment, {
153
- children: [/*#__PURE__*/_jsx(DateTimePickerField, {
154
- disabled: true,
155
- name: "value",
156
- label: "Disabled Date Time Picker",
157
- fullWidth: true,
158
- variant: "horizontal"
159
- }), /*#__PURE__*/_jsx(FinalFormDebug, {})]
160
- });
161
- }
162
- });
163
- }
164
- };
165
-
166
- /**
167
- * Before implementing custom validation, try to disable certain values using the props provided by MUI's DateTimePicker, such as `shouldDisableDate`, `shouldDisableTime`, `disableFuture`, `disablePast`.
168
- *
169
- * Use this when:
170
- * - You need to validate the date against a custom rule, which cannot be achieved using the props provided by MUI's DateTimePicker
171
- * - You want to provide a custom error message
172
- * - You want to validate the date asynchronously
173
- */
174
- export var CustomValidation = {
175
- render: function render() {
176
- var validateIsWeekday = /*#__PURE__*/function () {
177
- var _ref5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(value) {
178
- var day, isWeekday;
179
- return _regenerator().w(function (_context) {
180
- while (1) switch (_context.n) {
181
- case 0:
182
- if (value) {
183
- _context.n = 1;
184
- break;
185
- }
186
- return _context.a(2, undefined);
187
- case 1:
188
- day = value.getDay();
189
- isWeekday = day !== 0 && day !== 6;
190
- return _context.a(2, isWeekday ? undefined : "Please select a weekday");
191
- }
192
- }, _callee);
193
- }));
194
- return function validateIsWeekday(_x) {
195
- return _ref5.apply(this, arguments);
196
- };
197
- }();
198
- return /*#__PURE__*/_jsx(FinalForm, {
199
- mode: "edit",
200
- onSubmit: function onSubmit() {
201
- // not handled
202
- },
203
- subscription: {
204
- values: true
205
- },
206
- children: function children() {
207
- return /*#__PURE__*/_jsxs(_Fragment, {
208
- children: [/*#__PURE__*/_jsx(DateTimePickerField, {
209
- name: "value",
210
- label: "Date Time Picker",
211
- helperText: "Only weekdays are valid",
212
- fullWidth: true,
213
- variant: "horizontal",
214
- validate: validateIsWeekday
215
- }), /*#__PURE__*/_jsx(FinalFormDebug, {})]
216
- });
217
- }
218
- });
219
- }
220
- };
@@ -1,238 +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 { DateTimeRangePicker } from "../DateTimeRangePicker";
17
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
18
- var config = {
19
- component: DateTimeRangePicker,
20
- title: "components/dateTime/DateTimeRangePicker"
21
- };
22
- export default config;
23
-
24
- /**
25
- * The basic DateTimeRangePicker component allows users to select a date time range from calendar and time picker interfaces.
26
- *
27
- * Use this for date time range input fields where users need to pick a start and end date with time.
28
- */
29
- export var Default = {
30
- render: function render(args) {
31
- var _useState = useState({
32
- start: new Date(2024, 0, 15, 9, 0),
33
- end: new Date(2024, 0, 15, 17, 0)
34
- }),
35
- _useState2 = _slicedToArray(_useState, 2),
36
- value = _useState2[0],
37
- setValue = _useState2[1];
38
- return /*#__PURE__*/_jsx(DateTimeRangePicker, _objectSpread(_objectSpread({}, args), {}, {
39
- value: value,
40
- onChange: setValue
41
- }));
42
- }
43
- };
44
- export var FullWidth = {
45
- render: function render(args) {
46
- var _useState3 = useState({
47
- start: new Date(2024, 0, 15, 9, 0),
48
- end: new Date(2024, 0, 15, 17, 0)
49
- }),
50
- _useState4 = _slicedToArray(_useState3, 2),
51
- value = _useState4[0],
52
- setValue = _useState4[1];
53
- return /*#__PURE__*/_jsx(DateTimeRangePicker, _objectSpread(_objectSpread({}, args), {}, {
54
- fullWidth: true,
55
- value: value,
56
- onChange: setValue
57
- }));
58
- }
59
- };
60
-
61
- /**
62
- * DateTimeRangePicker in a required state.
63
- *
64
- * Use this when:
65
- * - The date time range selection is mandatory
66
- * - Form validation requires date time range values
67
- * - Users must select a date time range to proceed
68
- *
69
- * Note: The clear button is automatically hidden when the field is required.
70
- */
71
- export var Required = {
72
- render: function render(args) {
73
- var _useState5 = useState({
74
- start: new Date(2024, 0, 15, 9, 0),
75
- end: new Date(2024, 0, 15, 17, 0)
76
- }),
77
- _useState6 = _slicedToArray(_useState5, 2),
78
- value = _useState6[0],
79
- setValue = _useState6[1];
80
- return /*#__PURE__*/_jsx(DateTimeRangePicker, _objectSpread(_objectSpread({}, args), {}, {
81
- required: true,
82
- value: value,
83
- onChange: setValue
84
- }));
85
- }
86
- };
87
-
88
- /**
89
- * DateTimeRangePicker in a disabled state.
90
- *
91
- * Use this when:
92
- * - The date time range cannot be changed due to permissions or state
93
- * - You want to show date time range values but prevent interaction
94
- * - Form logic requires the field to be temporarily disabled
95
- */
96
- export var Disabled = {
97
- render: function render(args) {
98
- var _useState7 = useState({
99
- start: new Date(2024, 0, 15, 9, 0),
100
- end: new Date(2024, 0, 15, 17, 0)
101
- }),
102
- _useState8 = _slicedToArray(_useState7, 2),
103
- value = _useState8[0],
104
- setValue = _useState8[1];
105
- return /*#__PURE__*/_jsx(DateTimeRangePicker, _objectSpread(_objectSpread({}, args), {}, {
106
- disabled: true,
107
- value: value,
108
- onChange: setValue
109
- }));
110
- }
111
- };
112
-
113
- /**
114
- * DateTimeRangePicker in a read-only state.
115
- *
116
- * Use this when:
117
- * - The date time range should be visible but not editable
118
- * - You want to display date time range values that cannot be modified
119
- * - The field is used for reference only
120
- */
121
- export var ReadOnly = {
122
- render: function render(args) {
123
- var _useState9 = useState({
124
- start: new Date(2024, 0, 15, 9, 0),
125
- end: new Date(2024, 0, 15, 17, 0)
126
- }),
127
- _useState0 = _slicedToArray(_useState9, 2),
128
- value = _useState0[0],
129
- setValue = _useState0[1];
130
- return /*#__PURE__*/_jsx(DateTimeRangePicker, _objectSpread(_objectSpread({}, args), {}, {
131
- readOnly: true,
132
- value: value,
133
- onChange: setValue
134
- }));
135
- }
136
- };
137
-
138
- /**
139
- * DateTimeRangePicker with a custom icon.
140
- *
141
- * Use this when:
142
- * - You want to match your brand's icon style
143
- * - The default calendar icon doesn't fit your design
144
- * - You need to indicate a specific type of date time range selection
145
- */
146
- export var WithCustomIcon = {
147
- render: function render(args) {
148
- var _useState1 = useState({
149
- start: new Date(2024, 0, 15, 9, 0),
150
- end: new Date(2024, 0, 15, 17, 0)
151
- }),
152
- _useState10 = _slicedToArray(_useState1, 2),
153
- value = _useState10[0],
154
- setValue = _useState10[1];
155
- return /*#__PURE__*/_jsx(DateTimeRangePicker, _objectSpread(_objectSpread({}, args), {}, {
156
- value: value,
157
- onChange: setValue,
158
- iconMapping: {
159
- openPicker: /*#__PURE__*/_jsx(Edit, {})
160
- }
161
- }));
162
- }
163
- };
164
-
165
- /**
166
- * DateTimeRangePicker with date restrictions.
167
- *
168
- * Use this when:
169
- * - Only certain dates should be selectable
170
- * - You need to limit selection to future or past dates
171
- * - Business rules require date time range restrictions
172
- */
173
- export var WithDateRestrictions = {
174
- args: {
175
- minDate: new Date()
176
- },
177
- argTypes: {
178
- minDate: {
179
- control: "date"
180
- }
181
- },
182
- render: function render(args) {
183
- var _useState11 = useState(),
184
- _useState12 = _slicedToArray(_useState11, 2),
185
- value = _useState12[0],
186
- setValue = _useState12[1];
187
- return /*#__PURE__*/_jsx(DateTimeRangePicker, _objectSpread(_objectSpread({}, args), {}, {
188
- label: "Future Date Time Range Only",
189
- minDate: args.minDate,
190
- value: value,
191
- onChange: setValue
192
- }));
193
- }
194
- };
195
-
196
- /**
197
- * Multiple DateTimeRangePicker instances demonstrating different configurations.
198
- *
199
- * This example shows how DateTimeRangePickers can be combined in forms or interfaces
200
- * to collect multiple date time range values with different requirements and states.
201
- */
202
- export var MultiplePickers = {
203
- render: function render(args) {
204
- var _useState13 = useState({
205
- start: new Date(2024, 0, 15, 8, 0),
206
- end: new Date(2024, 0, 15, 16, 0)
207
- }),
208
- _useState14 = _slicedToArray(_useState13, 2),
209
- shift1 = _useState14[0],
210
- setShift1 = _useState14[1];
211
- var _useState15 = useState({
212
- start: new Date(2024, 0, 15, 16, 0),
213
- end: new Date(2024, 0, 16, 0, 0)
214
- }),
215
- _useState16 = _slicedToArray(_useState15, 2),
216
- shift2 = _useState16[0],
217
- setShift2 = _useState16[1];
218
- return /*#__PURE__*/_jsxs(Box, {
219
- display: "flex",
220
- flexDirection: "column",
221
- gap: 4,
222
- children: [/*#__PURE__*/_jsx(Typography, {
223
- variant: "h5",
224
- children: "Shift Schedule"
225
- }), /*#__PURE__*/_jsx(DateTimeRangePicker, _objectSpread(_objectSpread({}, args), {}, {
226
- label: "Morning Shift",
227
- fullWidth: true,
228
- value: shift1,
229
- onChange: setShift1
230
- })), /*#__PURE__*/_jsx(DateTimeRangePicker, _objectSpread(_objectSpread({}, args), {}, {
231
- label: "Evening Shift",
232
- fullWidth: true,
233
- value: shift2,
234
- onChange: setShift2
235
- }))]
236
- });
237
- }
238
- };