@danske/sapphire-react-lab 0.76.0
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/LICENSE +7 -0
- package/README.md +15 -0
- package/build/cjs/index.js +2876 -0
- package/build/cjs/index.js.map +1 -0
- package/build/esm/Accordion/index.js +11 -0
- package/build/esm/Accordion/index.js.map +1 -0
- package/build/esm/Accordion/src/Accordion.js +72 -0
- package/build/esm/Accordion/src/Accordion.js.map +1 -0
- package/build/esm/Accordion/src/AccordionHeading.js +49 -0
- package/build/esm/Accordion/src/AccordionHeading.js.map +1 -0
- package/build/esm/Accordion/src/AccordionItem.js +68 -0
- package/build/esm/Accordion/src/AccordionItem.js.map +1 -0
- package/build/esm/Accordion/src/useTreeState.js +42 -0
- package/build/esm/Accordion/src/useTreeState.js.map +1 -0
- package/build/esm/Avatar/src/Avatar.js +63 -0
- package/build/esm/Avatar/src/Avatar.js.map +1 -0
- package/build/esm/Calendar/i18n/da-DK.js +9 -0
- package/build/esm/Calendar/i18n/da-DK.js.map +1 -0
- package/build/esm/Calendar/i18n/de-DE.js +9 -0
- package/build/esm/Calendar/i18n/de-DE.js.map +1 -0
- package/build/esm/Calendar/i18n/en-US.js +9 -0
- package/build/esm/Calendar/i18n/en-US.js.map +1 -0
- package/build/esm/Calendar/i18n/fi-FI.js +9 -0
- package/build/esm/Calendar/i18n/fi-FI.js.map +1 -0
- package/build/esm/Calendar/i18n/index.js +20 -0
- package/build/esm/Calendar/i18n/index.js.map +1 -0
- package/build/esm/Calendar/i18n/nb-NO.js +9 -0
- package/build/esm/Calendar/i18n/nb-NO.js.map +1 -0
- package/build/esm/Calendar/i18n/pl-PL.js +9 -0
- package/build/esm/Calendar/i18n/pl-PL.js.map +1 -0
- package/build/esm/Calendar/i18n/sv-SE.js +9 -0
- package/build/esm/Calendar/i18n/sv-SE.js.map +1 -0
- package/build/esm/Calendar/src/Calendar.js +122 -0
- package/build/esm/Calendar/src/Calendar.js.map +1 -0
- package/build/esm/Calendar/src/CalendarButtons.js +96 -0
- package/build/esm/Calendar/src/CalendarButtons.js.map +1 -0
- package/build/esm/Calendar/src/CalendarDaysGrid.js +169 -0
- package/build/esm/Calendar/src/CalendarDaysGrid.js.map +1 -0
- package/build/esm/Calendar/src/CalendarHeader.js +58 -0
- package/build/esm/Calendar/src/CalendarHeader.js.map +1 -0
- package/build/esm/Calendar/src/CalendarMonthOrYearCell.js +79 -0
- package/build/esm/Calendar/src/CalendarMonthOrYearCell.js.map +1 -0
- package/build/esm/Calendar/src/CalendarMonthsGrid.js +58 -0
- package/build/esm/Calendar/src/CalendarMonthsGrid.js.map +1 -0
- package/build/esm/Calendar/src/CalendarPageAnimation.js +67 -0
- package/build/esm/Calendar/src/CalendarPageAnimation.js.map +1 -0
- package/build/esm/Calendar/src/CalendarYearsGrid.js +52 -0
- package/build/esm/Calendar/src/CalendarYearsGrid.js.map +1 -0
- package/build/esm/Calendar/src/RangeCalendar.js +119 -0
- package/build/esm/Calendar/src/RangeCalendar.js.map +1 -0
- package/build/esm/Calendar/src/useCustomDurationCalendarGrid.js +57 -0
- package/build/esm/Calendar/src/useCustomDurationCalendarGrid.js.map +1 -0
- package/build/esm/Calendar/src/useRangeCalendarState.js +57 -0
- package/build/esm/Calendar/src/useRangeCalendarState.js.map +1 -0
- package/build/esm/Calendar/src/useSapphireCalendarState.js +86 -0
- package/build/esm/Calendar/src/useSapphireCalendarState.js.map +1 -0
- package/build/esm/Calendar/src/utils.js +12 -0
- package/build/esm/Calendar/src/utils.js.map +1 -0
- package/build/esm/DateField/i18n/da-DK.js +7 -0
- package/build/esm/DateField/i18n/da-DK.js.map +1 -0
- package/build/esm/DateField/i18n/de-DE.js +7 -0
- package/build/esm/DateField/i18n/de-DE.js.map +1 -0
- package/build/esm/DateField/i18n/en-US.js +7 -0
- package/build/esm/DateField/i18n/en-US.js.map +1 -0
- package/build/esm/DateField/i18n/fi-FI.js +7 -0
- package/build/esm/DateField/i18n/fi-FI.js.map +1 -0
- package/build/esm/DateField/i18n/index.js +20 -0
- package/build/esm/DateField/i18n/index.js.map +1 -0
- package/build/esm/DateField/i18n/nb-NO.js +7 -0
- package/build/esm/DateField/i18n/nb-NO.js.map +1 -0
- package/build/esm/DateField/i18n/pl-PL.js +7 -0
- package/build/esm/DateField/i18n/pl-PL.js.map +1 -0
- package/build/esm/DateField/i18n/sv-SE.js +7 -0
- package/build/esm/DateField/i18n/sv-SE.js.map +1 -0
- package/build/esm/DateField/src/DateField.js +126 -0
- package/build/esm/DateField/src/DateField.js.map +1 -0
- package/build/esm/DateField/src/DateFieldButton.js +44 -0
- package/build/esm/DateField/src/DateFieldButton.js.map +1 -0
- package/build/esm/DateField/src/DateInput.js +81 -0
- package/build/esm/DateField/src/DateInput.js.map +1 -0
- package/build/esm/DateField/src/DateRangeField.js +151 -0
- package/build/esm/DateField/src/DateRangeField.js.map +1 -0
- package/build/esm/DateField/src/DateRangeInput.js +90 -0
- package/build/esm/DateField/src/DateRangeInput.js.map +1 -0
- package/build/esm/DateField/src/DateSegment.js +52 -0
- package/build/esm/DateField/src/DateSegment.js.map +1 -0
- package/build/esm/DateField/src/helpers.js +14 -0
- package/build/esm/DateField/src/helpers.js.map +1 -0
- package/build/esm/DateField/src/useDateRangePickerState.js +57 -0
- package/build/esm/DateField/src/useDateRangePickerState.js.map +1 -0
- package/build/esm/DateField/src/utils/placeholders.js +91 -0
- package/build/esm/DateField/src/utils/placeholders.js.map +1 -0
- package/build/esm/DateField/src/utils/segments.js +46 -0
- package/build/esm/DateField/src/utils/segments.js.map +1 -0
- package/build/esm/FeedbackMessage/src/FeedbackMessage.js +55 -0
- package/build/esm/FeedbackMessage/src/FeedbackMessage.js.map +1 -0
- package/build/esm/Fieldset/src/Fieldset.js +77 -0
- package/build/esm/Fieldset/src/Fieldset.js.map +1 -0
- package/build/esm/Filtering/src/FilterDropdown.js +61 -0
- package/build/esm/Filtering/src/FilterDropdown.js.map +1 -0
- package/build/esm/NotificationBadge/src/NotificationBadge.js +72 -0
- package/build/esm/NotificationBadge/src/NotificationBadge.js.map +1 -0
- package/build/esm/SearchField/src/SearchField.js +115 -0
- package/build/esm/SearchField/src/SearchField.js.map +1 -0
- package/build/esm/SearchField/src/useComboBoxState.js +42 -0
- package/build/esm/SearchField/src/useComboBoxState.js.map +1 -0
- package/build/esm/Spinner/src/Spinner.js +46 -0
- package/build/esm/Spinner/src/Spinner.js.map +1 -0
- package/build/esm/Toast/src/Toast.js +66 -0
- package/build/esm/Toast/src/Toast.js.map +1 -0
- package/build/esm/Toast/src/ToastProvider.js +53 -0
- package/build/esm/Toast/src/ToastProvider.js.map +1 -0
- package/build/esm/Toast/src/ToastRegion.js +56 -0
- package/build/esm/Toast/src/ToastRegion.js.map +1 -0
- package/build/esm/Toast/src/context.js +10 -0
- package/build/esm/Toast/src/context.js.map +1 -0
- package/build/esm/Toast/src/useShowToast.js +15 -0
- package/build/esm/Toast/src/useShowToast.js.map +1 -0
- package/build/esm/ToggleButton/src/ToggleButton.js +85 -0
- package/build/esm/ToggleButton/src/ToggleButton.js.map +1 -0
- package/build/esm/Typography/index.js +14 -0
- package/build/esm/Typography/index.js.map +1 -0
- package/build/esm/Typography/src/Body.js +66 -0
- package/build/esm/Typography/src/Body.js.map +1 -0
- package/build/esm/Typography/src/Caption.js +59 -0
- package/build/esm/Typography/src/Caption.js.map +1 -0
- package/build/esm/Typography/src/Heading.js +55 -0
- package/build/esm/Typography/src/Heading.js.map +1 -0
- package/build/esm/Typography/src/Subheading.js +63 -0
- package/build/esm/Typography/src/Subheading.js.map +1 -0
- package/build/esm/index.js +21 -0
- package/build/esm/index.js.map +1 -0
- package/build/index.d.ts +746 -0
- package/package.json +65 -0
|
@@ -0,0 +1,2876 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var utils = require('@react-spectrum/utils');
|
|
7
|
+
var focus = require('@react-aria/focus');
|
|
8
|
+
var utils$1 = require('@react-aria/utils');
|
|
9
|
+
var button = require('@react-aria/button');
|
|
10
|
+
var interactions = require('@react-aria/interactions');
|
|
11
|
+
var toggle = require('@react-stately/toggle');
|
|
12
|
+
var clsx = require('clsx');
|
|
13
|
+
var styles = require('@danske/sapphire-css/components/button/button.module.css');
|
|
14
|
+
var sapphireReact = require('@danske/sapphire-react');
|
|
15
|
+
var date = require('@internationalized/date');
|
|
16
|
+
var calendar = require('@react-aria/calendar');
|
|
17
|
+
var styles$1 = require('@danske/sapphire-css/components/calendar/calendar.module.css');
|
|
18
|
+
var i18n = require('@react-aria/i18n');
|
|
19
|
+
var calendar$1 = require('@react-stately/calendar');
|
|
20
|
+
var utils$2 = require('@react-stately/utils');
|
|
21
|
+
var react = require('@danske/sapphire-icons/react');
|
|
22
|
+
var reactTransitionGroup = require('react-transition-group');
|
|
23
|
+
var styles$2 = require('@danske/sapphire-css/components/spinner/spinner.module.css');
|
|
24
|
+
var styles$3 = require('@danske/sapphire-css/components/notificationBadge/notificationBadge.module.css');
|
|
25
|
+
var visuallyHidden = require('@react-aria/visually-hidden');
|
|
26
|
+
var datepicker = require('@react-aria/datepicker');
|
|
27
|
+
var datepicker$1 = require('@react-stately/datepicker');
|
|
28
|
+
var styles$4 = require('@danske/sapphire-css/components/dateField/dateField.module.css');
|
|
29
|
+
var string = require('@internationalized/string');
|
|
30
|
+
var dialog = require('@react-aria/dialog');
|
|
31
|
+
var styles$5 = require('@danske/sapphire-css/components/feedbackMessage/feedbackMessage.module.css');
|
|
32
|
+
var searchfield$1 = require('@react-aria/searchfield');
|
|
33
|
+
var styles$6 = require('@danske/sapphire-css/components/searchField/searchField.module.css');
|
|
34
|
+
var searchfield = require('@react-stately/searchfield');
|
|
35
|
+
var combobox = require('@react-stately/combobox');
|
|
36
|
+
var combobox$1 = require('@react-aria/combobox');
|
|
37
|
+
var toast$1 = require('@react-stately/toast');
|
|
38
|
+
var toast = require('@react-aria/toast');
|
|
39
|
+
var styles$7 = require('@danske/sapphire-css/components/toast/toast.module.css');
|
|
40
|
+
var styles$8 = require('@danske/sapphire-css/components/accordion/accordion.module.css');
|
|
41
|
+
var accordion = require('@react-aria/accordion');
|
|
42
|
+
var tree = require('@react-stately/tree');
|
|
43
|
+
var collections = require('@react-stately/collections');
|
|
44
|
+
var styles$9 = require('@danske/sapphire-css/components/text/text.module.css');
|
|
45
|
+
var label = require('@react-aria/label');
|
|
46
|
+
var styles$a = require('@danske/sapphire-css/components/avatar/avatar.module.css');
|
|
47
|
+
|
|
48
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
49
|
+
|
|
50
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
51
|
+
var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
|
|
52
|
+
var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
|
|
53
|
+
var styles__default$1 = /*#__PURE__*/_interopDefaultLegacy(styles$1);
|
|
54
|
+
var styles__default$2 = /*#__PURE__*/_interopDefaultLegacy(styles$2);
|
|
55
|
+
var styles__default$3 = /*#__PURE__*/_interopDefaultLegacy(styles$3);
|
|
56
|
+
var styles__default$4 = /*#__PURE__*/_interopDefaultLegacy(styles$4);
|
|
57
|
+
var styles__default$5 = /*#__PURE__*/_interopDefaultLegacy(styles$5);
|
|
58
|
+
var styles__default$6 = /*#__PURE__*/_interopDefaultLegacy(styles$6);
|
|
59
|
+
var styles__default$7 = /*#__PURE__*/_interopDefaultLegacy(styles$7);
|
|
60
|
+
var styles__default$8 = /*#__PURE__*/_interopDefaultLegacy(styles$8);
|
|
61
|
+
var styles__default$9 = /*#__PURE__*/_interopDefaultLegacy(styles$9);
|
|
62
|
+
var styles__default$a = /*#__PURE__*/_interopDefaultLegacy(styles$a);
|
|
63
|
+
|
|
64
|
+
var __defProp$z = Object.defineProperty;
|
|
65
|
+
var __defProps$w = Object.defineProperties;
|
|
66
|
+
var __getOwnPropDescs$w = Object.getOwnPropertyDescriptors;
|
|
67
|
+
var __getOwnPropSymbols$B = Object.getOwnPropertySymbols;
|
|
68
|
+
var __hasOwnProp$B = Object.prototype.hasOwnProperty;
|
|
69
|
+
var __propIsEnum$B = Object.prototype.propertyIsEnumerable;
|
|
70
|
+
var __defNormalProp$z = (obj, key, value) => key in obj ? __defProp$z(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
71
|
+
var __spreadValues$z = (a, b) => {
|
|
72
|
+
for (var prop in b || (b = {}))
|
|
73
|
+
if (__hasOwnProp$B.call(b, prop))
|
|
74
|
+
__defNormalProp$z(a, prop, b[prop]);
|
|
75
|
+
if (__getOwnPropSymbols$B)
|
|
76
|
+
for (var prop of __getOwnPropSymbols$B(b)) {
|
|
77
|
+
if (__propIsEnum$B.call(b, prop))
|
|
78
|
+
__defNormalProp$z(a, prop, b[prop]);
|
|
79
|
+
}
|
|
80
|
+
return a;
|
|
81
|
+
};
|
|
82
|
+
var __spreadProps$w = (a, b) => __defProps$w(a, __getOwnPropDescs$w(b));
|
|
83
|
+
var __objRest$o = (source, exclude) => {
|
|
84
|
+
var target = {};
|
|
85
|
+
for (var prop in source)
|
|
86
|
+
if (__hasOwnProp$B.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
87
|
+
target[prop] = source[prop];
|
|
88
|
+
if (source != null && __getOwnPropSymbols$B)
|
|
89
|
+
for (var prop of __getOwnPropSymbols$B(source)) {
|
|
90
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum$B.call(source, prop))
|
|
91
|
+
target[prop] = source[prop];
|
|
92
|
+
}
|
|
93
|
+
return target;
|
|
94
|
+
};
|
|
95
|
+
const ToggleButton = React__default["default"].forwardRef(function Button(_a, ref) {
|
|
96
|
+
var _b = _a, {
|
|
97
|
+
iconAlign = "left",
|
|
98
|
+
icon,
|
|
99
|
+
size = "medium"
|
|
100
|
+
} = _b, otherProps = __objRest$o(_b, [
|
|
101
|
+
"iconAlign",
|
|
102
|
+
"icon",
|
|
103
|
+
"size"
|
|
104
|
+
]);
|
|
105
|
+
sapphireReact.useThemeCheck();
|
|
106
|
+
const { autoFocus, isDisabled } = otherProps;
|
|
107
|
+
const domRef = utils.useFocusableRef(ref);
|
|
108
|
+
const { hoverProps, isHovered } = interactions.useHover({ isDisabled });
|
|
109
|
+
const { styleProps } = sapphireReact.useSapphireStyleProps(otherProps);
|
|
110
|
+
const iconWrapper = icon && /* @__PURE__ */ React__default["default"].createElement("span", {
|
|
111
|
+
className: clsx__default["default"](styles__default["default"]["sapphire-button__icon"])
|
|
112
|
+
}, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, {
|
|
113
|
+
size: size === "small" ? "s" : size === "medium" ? "m" : "l"
|
|
114
|
+
}, icon));
|
|
115
|
+
const state = toggle.useToggleState(otherProps);
|
|
116
|
+
const { buttonProps, isPressed } = button.useToggleButton(otherProps, state, domRef);
|
|
117
|
+
sapphireReact.usePreventTouchEnd(domRef);
|
|
118
|
+
return /* @__PURE__ */ React__default["default"].createElement(focus.FocusRing, {
|
|
119
|
+
focusRingClass: clsx__default["default"](styles__default["default"]["is-focus"]),
|
|
120
|
+
autoFocus
|
|
121
|
+
}, /* @__PURE__ */ React__default["default"].createElement("button", __spreadProps$w(__spreadValues$z({}, utils$1.mergeProps(buttonProps, hoverProps)), {
|
|
122
|
+
ref: domRef,
|
|
123
|
+
style: __spreadValues$z({}, styleProps.style),
|
|
124
|
+
className: clsx__default["default"](styles__default["default"]["sapphire-button"], styles__default["default"]["js-focus"], styles__default["default"]["js-hover"], {
|
|
125
|
+
[styles__default["default"]["is-active"]]: isPressed,
|
|
126
|
+
[styles__default["default"]["is-hover"]]: isHovered,
|
|
127
|
+
[styles__default["default"]["is-disabled"]]: isDisabled,
|
|
128
|
+
[styles__default["default"]["sapphire-button--small"]]: size === "small",
|
|
129
|
+
[styles__default["default"]["sapphire-button--large"]]: size === "large",
|
|
130
|
+
[styles__default["default"]["sapphire-button--with-left-icon"]]: icon && iconAlign === "left",
|
|
131
|
+
[styles__default["default"]["sapphire-button--with-right-icon"]]: icon && iconAlign === "right"
|
|
132
|
+
}, state.isSelected ? styles__default["default"]["sapphire-button--selected"] : styles__default["default"]["sapphire-button--unselected"], styleProps.className)
|
|
133
|
+
}), iconAlign === "left" && iconWrapper, otherProps.children, iconAlign === "right" && iconWrapper));
|
|
134
|
+
});
|
|
135
|
+
|
|
136
|
+
var year$6 = "År";
|
|
137
|
+
var week$6 = "Uge {weekNumber}";
|
|
138
|
+
var da$1 = {
|
|
139
|
+
year: year$6,
|
|
140
|
+
week: week$6
|
|
141
|
+
};
|
|
142
|
+
|
|
143
|
+
var year$5 = "Year";
|
|
144
|
+
var week$5 = "Week {weekNumber}";
|
|
145
|
+
var en$1 = {
|
|
146
|
+
year: year$5,
|
|
147
|
+
week: week$5
|
|
148
|
+
};
|
|
149
|
+
|
|
150
|
+
var year$4 = "Jahr";
|
|
151
|
+
var week$4 = "Woche {weekNumber}";
|
|
152
|
+
var de$1 = {
|
|
153
|
+
year: year$4,
|
|
154
|
+
week: week$4
|
|
155
|
+
};
|
|
156
|
+
|
|
157
|
+
var year$3 = "Vuosi";
|
|
158
|
+
var week$3 = "Viikko {weekNumber}";
|
|
159
|
+
var fi$1 = {
|
|
160
|
+
year: year$3,
|
|
161
|
+
week: week$3
|
|
162
|
+
};
|
|
163
|
+
|
|
164
|
+
var year$2 = "År";
|
|
165
|
+
var week$2 = "Uke {weekNumber}";
|
|
166
|
+
var no$1 = {
|
|
167
|
+
year: year$2,
|
|
168
|
+
week: week$2
|
|
169
|
+
};
|
|
170
|
+
|
|
171
|
+
var year$1 = "Rok";
|
|
172
|
+
var week$1 = "Tydzień {weekNumber}";
|
|
173
|
+
var pl$1 = {
|
|
174
|
+
year: year$1,
|
|
175
|
+
week: week$1
|
|
176
|
+
};
|
|
177
|
+
|
|
178
|
+
var year = "År";
|
|
179
|
+
var week = "Vecka {weekNumber}";
|
|
180
|
+
var se$1 = {
|
|
181
|
+
year: year,
|
|
182
|
+
week: week
|
|
183
|
+
};
|
|
184
|
+
|
|
185
|
+
var intlMessages$1 = {
|
|
186
|
+
"da-DK": da$1,
|
|
187
|
+
"en-US": en$1,
|
|
188
|
+
"de-DE": de$1,
|
|
189
|
+
"fi-FI": fi$1,
|
|
190
|
+
"no-NO": no$1,
|
|
191
|
+
"pl-PL": pl$1,
|
|
192
|
+
"sv-SE": se$1
|
|
193
|
+
};
|
|
194
|
+
|
|
195
|
+
var __defProp$y = Object.defineProperty;
|
|
196
|
+
var __defProps$v = Object.defineProperties;
|
|
197
|
+
var __getOwnPropDescs$v = Object.getOwnPropertyDescriptors;
|
|
198
|
+
var __getOwnPropSymbols$A = Object.getOwnPropertySymbols;
|
|
199
|
+
var __hasOwnProp$A = Object.prototype.hasOwnProperty;
|
|
200
|
+
var __propIsEnum$A = Object.prototype.propertyIsEnumerable;
|
|
201
|
+
var __defNormalProp$y = (obj, key, value) => key in obj ? __defProp$y(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
202
|
+
var __spreadValues$y = (a, b) => {
|
|
203
|
+
for (var prop in b || (b = {}))
|
|
204
|
+
if (__hasOwnProp$A.call(b, prop))
|
|
205
|
+
__defNormalProp$y(a, prop, b[prop]);
|
|
206
|
+
if (__getOwnPropSymbols$A)
|
|
207
|
+
for (var prop of __getOwnPropSymbols$A(b)) {
|
|
208
|
+
if (__propIsEnum$A.call(b, prop))
|
|
209
|
+
__defNormalProp$y(a, prop, b[prop]);
|
|
210
|
+
}
|
|
211
|
+
return a;
|
|
212
|
+
};
|
|
213
|
+
var __spreadProps$v = (a, b) => __defProps$v(a, __getOwnPropDescs$v(b));
|
|
214
|
+
var __objRest$n = (source, exclude) => {
|
|
215
|
+
var target = {};
|
|
216
|
+
for (var prop in source)
|
|
217
|
+
if (__hasOwnProp$A.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
218
|
+
target[prop] = source[prop];
|
|
219
|
+
if (source != null && __getOwnPropSymbols$A)
|
|
220
|
+
for (var prop of __getOwnPropSymbols$A(source)) {
|
|
221
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum$A.call(source, prop))
|
|
222
|
+
target[prop] = source[prop];
|
|
223
|
+
}
|
|
224
|
+
return target;
|
|
225
|
+
};
|
|
226
|
+
const CalendarButton = React__default["default"].forwardRef(function SapphireCalendarButton(_a, forwardedRef) {
|
|
227
|
+
var _b = _a, {
|
|
228
|
+
children,
|
|
229
|
+
className = "",
|
|
230
|
+
isSelected,
|
|
231
|
+
isDisabled,
|
|
232
|
+
isInGridCell,
|
|
233
|
+
hasCurrentIndicator
|
|
234
|
+
} = _b, otherProps = __objRest$n(_b, [
|
|
235
|
+
"children",
|
|
236
|
+
"className",
|
|
237
|
+
"isSelected",
|
|
238
|
+
"isDisabled",
|
|
239
|
+
"isInGridCell",
|
|
240
|
+
"hasCurrentIndicator"
|
|
241
|
+
]);
|
|
242
|
+
const { hoverProps, isHovered } = interactions.useHover({ isDisabled });
|
|
243
|
+
const ElementType = isInGridCell ? "span" : "button";
|
|
244
|
+
return /* @__PURE__ */ React__default["default"].createElement(focus.FocusRing, {
|
|
245
|
+
focusRingClass: styles__default$1["default"]["is-focus"]
|
|
246
|
+
}, /* @__PURE__ */ React__default["default"].createElement(ElementType, __spreadProps$v(__spreadValues$y(__spreadValues$y({
|
|
247
|
+
ref: forwardedRef,
|
|
248
|
+
role: "button"
|
|
249
|
+
}, ElementType === "button" ? { type: "button" } : {}), utils$1.mergeProps(otherProps, hoverProps)), {
|
|
250
|
+
className: clsx__default["default"](className, styles__default$1["default"]["js-focus"], styles__default$1["default"]["js-hover"], styles__default$1["default"]["sapphire-calendar__button"], {
|
|
251
|
+
[styles__default$1["default"][`sapphire-calendar__button--selected`]]: isSelected,
|
|
252
|
+
[styles__default$1["default"]["sapphire-calendar__button--current"]]: hasCurrentIndicator,
|
|
253
|
+
[styles__default$1["default"][`is-hover`]]: isHovered,
|
|
254
|
+
[styles__default$1["default"][`is-disabled`]]: isDisabled
|
|
255
|
+
})
|
|
256
|
+
}), /* @__PURE__ */ React__default["default"].createElement("span", {
|
|
257
|
+
className: styles__default$1["default"]["sapphire-calendar__button-text"]
|
|
258
|
+
}, children)));
|
|
259
|
+
});
|
|
260
|
+
const CalendarDayButton = React__default["default"].forwardRef(function SapphireCalendarDayButton(_c, forwardedRef) {
|
|
261
|
+
var _d = _c, {
|
|
262
|
+
isOutsideVisibleRange,
|
|
263
|
+
rangeHighlight
|
|
264
|
+
} = _d, props = __objRest$n(_d, [
|
|
265
|
+
"isOutsideVisibleRange",
|
|
266
|
+
"rangeHighlight"
|
|
267
|
+
]);
|
|
268
|
+
return /* @__PURE__ */ React__default["default"].createElement(CalendarButton, __spreadProps$v(__spreadValues$y({}, props), {
|
|
269
|
+
isInGridCell: true,
|
|
270
|
+
className: clsx__default["default"](styles__default$1["default"]["sapphire-calendar__button--day"], {
|
|
271
|
+
[styles__default$1["default"]["sapphire-calendar__button--range-selection"]]: rangeHighlight.highlighted,
|
|
272
|
+
[styles__default$1["default"]["sapphire-calendar__button--range-start"]]: rangeHighlight.highlighted && rangeHighlight.start,
|
|
273
|
+
[styles__default$1["default"]["sapphire-calendar__button--range-end"]]: rangeHighlight.highlighted && rangeHighlight.end,
|
|
274
|
+
[styles__default$1["default"]["sapphire-calendar__button--selection-start"]]: rangeHighlight.highlighted && rangeHighlight.start && props.isSelected,
|
|
275
|
+
[styles__default$1["default"]["sapphire-calendar__button--selection-end"]]: rangeHighlight.highlighted && rangeHighlight.end && props.isSelected,
|
|
276
|
+
[styles__default$1["default"]["sapphire-calendar__button--outside-month"]]: isOutsideVisibleRange
|
|
277
|
+
}),
|
|
278
|
+
ref: forwardedRef
|
|
279
|
+
}));
|
|
280
|
+
});
|
|
281
|
+
|
|
282
|
+
function range(start, end) {
|
|
283
|
+
return Array(end - start + 1).fill(null).map((_, index) => start + index);
|
|
284
|
+
}
|
|
285
|
+
function* chunks(array, chunkSize) {
|
|
286
|
+
for (let i = 0; i < array.length; i += chunkSize) {
|
|
287
|
+
yield array.slice(i, i + chunkSize);
|
|
288
|
+
}
|
|
289
|
+
}
|
|
290
|
+
const sentenceCase = (sentence) => sentence.slice(0, 1).toLocaleUpperCase() + sentence.slice(1);
|
|
291
|
+
|
|
292
|
+
var __defProp$x = Object.defineProperty;
|
|
293
|
+
var __defProps$u = Object.defineProperties;
|
|
294
|
+
var __getOwnPropDescs$u = Object.getOwnPropertyDescriptors;
|
|
295
|
+
var __getOwnPropSymbols$z = Object.getOwnPropertySymbols;
|
|
296
|
+
var __hasOwnProp$z = Object.prototype.hasOwnProperty;
|
|
297
|
+
var __propIsEnum$z = Object.prototype.propertyIsEnumerable;
|
|
298
|
+
var __defNormalProp$x = (obj, key, value) => key in obj ? __defProp$x(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
299
|
+
var __spreadValues$x = (a, b) => {
|
|
300
|
+
for (var prop in b || (b = {}))
|
|
301
|
+
if (__hasOwnProp$z.call(b, prop))
|
|
302
|
+
__defNormalProp$x(a, prop, b[prop]);
|
|
303
|
+
if (__getOwnPropSymbols$z)
|
|
304
|
+
for (var prop of __getOwnPropSymbols$z(b)) {
|
|
305
|
+
if (__propIsEnum$z.call(b, prop))
|
|
306
|
+
__defNormalProp$x(a, prop, b[prop]);
|
|
307
|
+
}
|
|
308
|
+
return a;
|
|
309
|
+
};
|
|
310
|
+
var __spreadProps$u = (a, b) => __defProps$u(a, __getOwnPropDescs$u(b));
|
|
311
|
+
var __objRest$m = (source, exclude) => {
|
|
312
|
+
var target = {};
|
|
313
|
+
for (var prop in source)
|
|
314
|
+
if (__hasOwnProp$z.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
315
|
+
target[prop] = source[prop];
|
|
316
|
+
if (source != null && __getOwnPropSymbols$z)
|
|
317
|
+
for (var prop of __getOwnPropSymbols$z(source)) {
|
|
318
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum$z.call(source, prop))
|
|
319
|
+
target[prop] = source[prop];
|
|
320
|
+
}
|
|
321
|
+
return target;
|
|
322
|
+
};
|
|
323
|
+
function CalendarDaysGrid(_a) {
|
|
324
|
+
var _b = _a, {
|
|
325
|
+
state,
|
|
326
|
+
startDate = state.visibleRange.start,
|
|
327
|
+
showWeekNumbers
|
|
328
|
+
} = _b, props = __objRest$m(_b, [
|
|
329
|
+
"state",
|
|
330
|
+
"startDate",
|
|
331
|
+
"showWeekNumbers"
|
|
332
|
+
]);
|
|
333
|
+
const { locale } = i18n.useLocale();
|
|
334
|
+
const { gridProps, headerProps } = calendar.useCalendarGrid(__spreadProps$u(__spreadValues$x({}, props), {
|
|
335
|
+
startDate,
|
|
336
|
+
endDate: date.endOfMonth(startDate)
|
|
337
|
+
}), state);
|
|
338
|
+
const weeksInMonth = date.getWeeksInMonth(startDate, locale);
|
|
339
|
+
const dayFormatter = i18n.useDateFormatter({
|
|
340
|
+
weekday: "short",
|
|
341
|
+
timeZone: state.timeZone
|
|
342
|
+
});
|
|
343
|
+
const weekDays = React.useMemo(() => {
|
|
344
|
+
const weekStart = date.startOfWeek(date.today(state.timeZone), locale);
|
|
345
|
+
return [...new Array(7).keys()].map((index) => {
|
|
346
|
+
const date = weekStart.add({ days: index });
|
|
347
|
+
const dateDay = date.toDate(state.timeZone);
|
|
348
|
+
return dayFormatter.format(dateDay);
|
|
349
|
+
});
|
|
350
|
+
}, [locale, state.timeZone, dayFormatter]);
|
|
351
|
+
return /* @__PURE__ */ React__default["default"].createElement("table", __spreadProps$u(__spreadValues$x({}, gridProps), {
|
|
352
|
+
className: clsx__default["default"](styles__default$1["default"]["sapphire-calendar__table"], {
|
|
353
|
+
[styles__default$1["default"]["sapphire-calendar__table--with-week-numbers"]]: showWeekNumbers
|
|
354
|
+
})
|
|
355
|
+
}), /* @__PURE__ */ React__default["default"].createElement("thead", __spreadValues$x({}, headerProps), /* @__PURE__ */ React__default["default"].createElement("tr", null, showWeekNumbers && /* @__PURE__ */ React__default["default"].createElement("th", {
|
|
356
|
+
className: styles__default$1["default"]["sapphire-calendar__table-head-cell"],
|
|
357
|
+
"aria-hidden": "true"
|
|
358
|
+
}, /* @__PURE__ */ React__default["default"].createElement("span", {
|
|
359
|
+
className: styles__default$1["default"]["sapphire-calendar__week-number"]
|
|
360
|
+
}, "#")), weekDays.map((day, index) => /* @__PURE__ */ React__default["default"].createElement("th", {
|
|
361
|
+
key: index,
|
|
362
|
+
className: styles__default$1["default"]["sapphire-calendar__table-head-cell"]
|
|
363
|
+
}, /* @__PURE__ */ React__default["default"].createElement("abbr", {
|
|
364
|
+
className: styles__default$1["default"]["sapphire-calendar__day-of-week"]
|
|
365
|
+
}, sentenceCase(day)))))), /* @__PURE__ */ React__default["default"].createElement("tbody", null, [...new Array(weeksInMonth).keys()].map((weekIndex) => {
|
|
366
|
+
return /* @__PURE__ */ React__default["default"].createElement("tr", {
|
|
367
|
+
className: styles__default$1["default"]["sapphire-calendar__table-body-row"],
|
|
368
|
+
key: weekIndex
|
|
369
|
+
}, showWeekNumbers && /* @__PURE__ */ React__default["default"].createElement(CalendarWeekNumberCell, {
|
|
370
|
+
date: startDate.add({ days: 7 * weekIndex })
|
|
371
|
+
}), state.getDatesInWeek(weekIndex, startDate).map((date, i) => date ? /* @__PURE__ */ React__default["default"].createElement(CalendarCell, {
|
|
372
|
+
currentMonth: startDate,
|
|
373
|
+
key: date.toString(),
|
|
374
|
+
state,
|
|
375
|
+
date
|
|
376
|
+
}) : /* @__PURE__ */ React__default["default"].createElement("td", {
|
|
377
|
+
key: i
|
|
378
|
+
})));
|
|
379
|
+
}), /* @__PURE__ */ React__default["default"].createElement("tr", null)));
|
|
380
|
+
}
|
|
381
|
+
function CalendarWeekNumberCell({ date }) {
|
|
382
|
+
const weekNumber = getWeekNumber(date);
|
|
383
|
+
const formatMessage = i18n.useMessageFormatter(intlMessages$1);
|
|
384
|
+
return /* @__PURE__ */ React__default["default"].createElement("th", {
|
|
385
|
+
className: styles__default$1["default"]["sapphire-calendar__table-body-cell"],
|
|
386
|
+
role: "rowheader",
|
|
387
|
+
"aria-label": formatMessage("week", { weekNumber })
|
|
388
|
+
}, /* @__PURE__ */ React__default["default"].createElement("span", {
|
|
389
|
+
className: styles__default$1["default"]["sapphire-calendar__week-number"]
|
|
390
|
+
}, weekNumber));
|
|
391
|
+
}
|
|
392
|
+
function CalendarCell({
|
|
393
|
+
state,
|
|
394
|
+
date: date$1,
|
|
395
|
+
currentMonth
|
|
396
|
+
}) {
|
|
397
|
+
const ref = React__default["default"].useRef(null);
|
|
398
|
+
const { locale } = i18n.useLocale();
|
|
399
|
+
const sameMonth = date.isSameMonth(date$1, currentMonth);
|
|
400
|
+
const {
|
|
401
|
+
cellProps,
|
|
402
|
+
buttonProps,
|
|
403
|
+
isSelected: isInSelection,
|
|
404
|
+
isDisabled,
|
|
405
|
+
formattedDate,
|
|
406
|
+
isUnavailable
|
|
407
|
+
} = calendar.useCalendarCell({ date: date$1, isDisabled: !sameMonth }, state, ref);
|
|
408
|
+
const highlightedRange = "highlightedRange" in state ? state.highlightedRange : null;
|
|
409
|
+
const isSelected = isInSelection && (!highlightedRange || date.isSameDay(highlightedRange.start, date$1) || date.isSameDay(highlightedRange.end, date$1));
|
|
410
|
+
return /* @__PURE__ */ React__default["default"].createElement("td", __spreadProps$u(__spreadValues$x({}, cellProps), {
|
|
411
|
+
className: styles__default$1["default"]["sapphire-calendar__table-body-cell"]
|
|
412
|
+
}), /* @__PURE__ */ React__default["default"].createElement(CalendarDayButton, __spreadProps$u(__spreadValues$x({}, buttonProps), {
|
|
413
|
+
ref,
|
|
414
|
+
isSelected,
|
|
415
|
+
isDisabled: isDisabled || isUnavailable,
|
|
416
|
+
hasCurrentIndicator: date.today(state.timeZone).compare(date$1) === 0,
|
|
417
|
+
isOutsideVisibleRange: !date.isSameMonth(currentMonth, date$1),
|
|
418
|
+
rangeHighlight: highlightedRange ? getRangeHighlight({ date: date$1, highlightedRange, locale }) : { highlighted: false }
|
|
419
|
+
}), formattedDate));
|
|
420
|
+
}
|
|
421
|
+
const getRangeHighlight = ({
|
|
422
|
+
date: date$1,
|
|
423
|
+
highlightedRange,
|
|
424
|
+
locale
|
|
425
|
+
}) => {
|
|
426
|
+
const isInSelection = highlightedRange.start.compare(date$1) <= 0 && highlightedRange.end.compare(date$1) >= 0;
|
|
427
|
+
const rangeIsNotASingleDay = highlightedRange && !date.isSameDay(highlightedRange.start, highlightedRange.end);
|
|
428
|
+
const isStartOfWeek = date.getDayOfWeek(date$1, locale) === 0;
|
|
429
|
+
const isEndOfWeek = date.getDayOfWeek(date$1, locale) === 6;
|
|
430
|
+
const isStartOfMonth = date.isSameDay(date$1, date.startOfMonth(date$1));
|
|
431
|
+
const isEndOfMonth = date.isSameDay(date$1, date.endOfMonth(date$1));
|
|
432
|
+
const isStartOfRange = highlightedRange && date.isSameDay(highlightedRange == null ? void 0 : highlightedRange.start, date$1);
|
|
433
|
+
const isEndOfRange = highlightedRange && date.isSameDay(highlightedRange == null ? void 0 : highlightedRange.end, date$1);
|
|
434
|
+
const highlighted = isInSelection && rangeIsNotASingleDay;
|
|
435
|
+
return {
|
|
436
|
+
highlighted,
|
|
437
|
+
start: highlighted && (isStartOfWeek || isStartOfMonth || isStartOfRange),
|
|
438
|
+
end: highlighted && (isEndOfWeek || isEndOfMonth || isEndOfRange)
|
|
439
|
+
};
|
|
440
|
+
};
|
|
441
|
+
const getWeekNumber = function(dateValue) {
|
|
442
|
+
const date$1 = new Date(dateValue.toDate(date.getLocalTimeZone()));
|
|
443
|
+
date$1.setHours(0, 0, 0, 0);
|
|
444
|
+
date$1.setDate(date$1.getDate() + 3 - (date$1.getDay() + 6) % 7);
|
|
445
|
+
const week1 = new Date(date$1.getFullYear(), 0, 4);
|
|
446
|
+
return 1 + Math.round(((date$1.getTime() - week1.getTime()) / 864e5 - 3 + (week1.getDay() + 6) % 7) / 7);
|
|
447
|
+
};
|
|
448
|
+
|
|
449
|
+
var __defProp$w = Object.defineProperty;
|
|
450
|
+
var __defProps$t = Object.defineProperties;
|
|
451
|
+
var __getOwnPropDescs$t = Object.getOwnPropertyDescriptors;
|
|
452
|
+
var __getOwnPropSymbols$y = Object.getOwnPropertySymbols;
|
|
453
|
+
var __hasOwnProp$y = Object.prototype.hasOwnProperty;
|
|
454
|
+
var __propIsEnum$y = Object.prototype.propertyIsEnumerable;
|
|
455
|
+
var __defNormalProp$w = (obj, key, value) => key in obj ? __defProp$w(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
456
|
+
var __spreadValues$w = (a, b) => {
|
|
457
|
+
for (var prop in b || (b = {}))
|
|
458
|
+
if (__hasOwnProp$y.call(b, prop))
|
|
459
|
+
__defNormalProp$w(a, prop, b[prop]);
|
|
460
|
+
if (__getOwnPropSymbols$y)
|
|
461
|
+
for (var prop of __getOwnPropSymbols$y(b)) {
|
|
462
|
+
if (__propIsEnum$y.call(b, prop))
|
|
463
|
+
__defNormalProp$w(a, prop, b[prop]);
|
|
464
|
+
}
|
|
465
|
+
return a;
|
|
466
|
+
};
|
|
467
|
+
var __spreadProps$t = (a, b) => __defProps$t(a, __getOwnPropDescs$t(b));
|
|
468
|
+
const isSame = { month: date.isSameMonth, year: date.isSameYear };
|
|
469
|
+
function CalendarMonthOrYearCell({
|
|
470
|
+
date: date$1,
|
|
471
|
+
state,
|
|
472
|
+
isDisabled,
|
|
473
|
+
field,
|
|
474
|
+
children
|
|
475
|
+
}) {
|
|
476
|
+
const ref = React__default["default"].useRef(null);
|
|
477
|
+
const isFocused = state.focusedDate[field] === date$1[field];
|
|
478
|
+
let tabIndex;
|
|
479
|
+
if (!isDisabled) {
|
|
480
|
+
tabIndex = isSame[field](date$1, state.focusedDate) ? 0 : -1;
|
|
481
|
+
}
|
|
482
|
+
React.useEffect(() => {
|
|
483
|
+
if (isFocused && ref.current) {
|
|
484
|
+
utils$1.focusWithoutScrolling(ref.current);
|
|
485
|
+
}
|
|
486
|
+
}, [isFocused, ref]);
|
|
487
|
+
const { pressProps } = interactions.usePress({
|
|
488
|
+
isDisabled: state.isDisabled || isDisabled,
|
|
489
|
+
onPress: () => {
|
|
490
|
+
state.setFocusedDate(date$1);
|
|
491
|
+
if (!state.isReadOnly) {
|
|
492
|
+
state.narrowView();
|
|
493
|
+
}
|
|
494
|
+
}
|
|
495
|
+
});
|
|
496
|
+
const buttonProps = utils$1.mergeProps(pressProps, {
|
|
497
|
+
onFocus() {
|
|
498
|
+
if (!isDisabled) {
|
|
499
|
+
state.setFocusedDate(date$1);
|
|
500
|
+
}
|
|
501
|
+
},
|
|
502
|
+
tabIndex,
|
|
503
|
+
role: "button",
|
|
504
|
+
"aria-disabled": isDisabled || void 0
|
|
505
|
+
});
|
|
506
|
+
return /* @__PURE__ */ React__default["default"].createElement("td", {
|
|
507
|
+
className: styles__default$1["default"]["sapphire-calendar__table-body-cell"],
|
|
508
|
+
role: "gridcell"
|
|
509
|
+
}, /* @__PURE__ */ React__default["default"].createElement(CalendarButton, __spreadProps$t(__spreadValues$w({
|
|
510
|
+
ref
|
|
511
|
+
}, buttonProps), {
|
|
512
|
+
isInGridCell: true,
|
|
513
|
+
isSelected: state.value && isSame[field](state.value, date$1),
|
|
514
|
+
isDisabled: state.isDisabled || isDisabled,
|
|
515
|
+
hasCurrentIndicator: isSame[field](date$1, date.today(state.timeZone))
|
|
516
|
+
}), children));
|
|
517
|
+
}
|
|
518
|
+
|
|
519
|
+
function useCustomDurationCalendarGrid({
|
|
520
|
+
cellsDuration,
|
|
521
|
+
perRow = 3
|
|
522
|
+
}, state) {
|
|
523
|
+
const { direction } = i18n.useLocale();
|
|
524
|
+
const onKeyDown = (e) => {
|
|
525
|
+
switch (e.key) {
|
|
526
|
+
case "Enter":
|
|
527
|
+
case " ":
|
|
528
|
+
e.preventDefault();
|
|
529
|
+
state.selectFocusedDate();
|
|
530
|
+
break;
|
|
531
|
+
case "ArrowLeft":
|
|
532
|
+
e.preventDefault();
|
|
533
|
+
e.stopPropagation();
|
|
534
|
+
if (direction === "rtl") {
|
|
535
|
+
state.setFocusedDate(state.focusedDate.add({ [cellsDuration]: 1 }));
|
|
536
|
+
} else {
|
|
537
|
+
state.setFocusedDate(state.focusedDate.add({ [cellsDuration]: -1 }));
|
|
538
|
+
}
|
|
539
|
+
break;
|
|
540
|
+
case "ArrowUp":
|
|
541
|
+
e.preventDefault();
|
|
542
|
+
e.stopPropagation();
|
|
543
|
+
state.setFocusedDate(state.focusedDate.add({ [cellsDuration]: -perRow }));
|
|
544
|
+
break;
|
|
545
|
+
case "ArrowRight":
|
|
546
|
+
e.preventDefault();
|
|
547
|
+
e.stopPropagation();
|
|
548
|
+
if (direction === "rtl") {
|
|
549
|
+
state.setFocusedDate(state.focusedDate.add({ [cellsDuration]: -1 }));
|
|
550
|
+
} else {
|
|
551
|
+
state.setFocusedDate(state.focusedDate.add({ [cellsDuration]: 1 }));
|
|
552
|
+
}
|
|
553
|
+
break;
|
|
554
|
+
case "ArrowDown":
|
|
555
|
+
e.preventDefault();
|
|
556
|
+
e.stopPropagation();
|
|
557
|
+
state.setFocusedDate(state.focusedDate.add({ [cellsDuration]: perRow }));
|
|
558
|
+
break;
|
|
559
|
+
}
|
|
560
|
+
};
|
|
561
|
+
const gridProps = {
|
|
562
|
+
role: "grid",
|
|
563
|
+
"aria-readonly": state.isReadOnly || void 0,
|
|
564
|
+
"aria-disabled": state.isDisabled || void 0,
|
|
565
|
+
onKeyDown,
|
|
566
|
+
onFocus: () => state.setFocused(true),
|
|
567
|
+
onBlur: () => state.setFocused(false)
|
|
568
|
+
};
|
|
569
|
+
return { gridProps };
|
|
570
|
+
}
|
|
571
|
+
|
|
572
|
+
var __defProp$v = Object.defineProperty;
|
|
573
|
+
var __getOwnPropSymbols$x = Object.getOwnPropertySymbols;
|
|
574
|
+
var __hasOwnProp$x = Object.prototype.hasOwnProperty;
|
|
575
|
+
var __propIsEnum$x = Object.prototype.propertyIsEnumerable;
|
|
576
|
+
var __defNormalProp$v = (obj, key, value) => key in obj ? __defProp$v(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
577
|
+
var __spreadValues$v = (a, b) => {
|
|
578
|
+
for (var prop in b || (b = {}))
|
|
579
|
+
if (__hasOwnProp$x.call(b, prop))
|
|
580
|
+
__defNormalProp$v(a, prop, b[prop]);
|
|
581
|
+
if (__getOwnPropSymbols$x)
|
|
582
|
+
for (var prop of __getOwnPropSymbols$x(b)) {
|
|
583
|
+
if (__propIsEnum$x.call(b, prop))
|
|
584
|
+
__defNormalProp$v(a, prop, b[prop]);
|
|
585
|
+
}
|
|
586
|
+
return a;
|
|
587
|
+
};
|
|
588
|
+
function CalendarMonthsGrid({
|
|
589
|
+
state
|
|
590
|
+
}) {
|
|
591
|
+
const formatter = i18n.useDateFormatter({
|
|
592
|
+
month: "long",
|
|
593
|
+
timeZone: state.timeZone
|
|
594
|
+
});
|
|
595
|
+
const numMonths = state.focusedDate.calendar.getMonthsInYear(state.focusedDate);
|
|
596
|
+
const months = range(1, numMonths).map((month) => formatter.format(state.focusedDate.set({ month }).toDate(state.timeZone)));
|
|
597
|
+
const monthRows = [...chunks(months, 3)];
|
|
598
|
+
const { gridProps } = useCustomDurationCalendarGrid({ cellsDuration: "months" }, state);
|
|
599
|
+
return /* @__PURE__ */ React__default["default"].createElement("table", __spreadValues$v({
|
|
600
|
+
className: clsx__default["default"](styles__default$1["default"]["sapphire-calendar__table"], styles__default$1["default"]["sapphire-calendar__table--month-year"])
|
|
601
|
+
}, gridProps), /* @__PURE__ */ React__default["default"].createElement("tbody", null, monthRows.map((currentRowMonths, rowIndex) => /* @__PURE__ */ React__default["default"].createElement("tr", {
|
|
602
|
+
key: rowIndex,
|
|
603
|
+
className: styles__default$1["default"]["sapphire-calendar__table-body-row"]
|
|
604
|
+
}, currentRowMonths.map((month, index) => {
|
|
605
|
+
const newFocusedDate = state.focusedDate.set({
|
|
606
|
+
month: months.indexOf(month) + 1
|
|
607
|
+
});
|
|
608
|
+
const isMonthDisabled = state.isInvalid(date.startOfMonth(newFocusedDate)) && state.isInvalid(date.endOfMonth(newFocusedDate));
|
|
609
|
+
return /* @__PURE__ */ React__default["default"].createElement(CalendarMonthOrYearCell, {
|
|
610
|
+
key: index,
|
|
611
|
+
date: newFocusedDate,
|
|
612
|
+
field: "month",
|
|
613
|
+
isDisabled: isMonthDisabled,
|
|
614
|
+
state
|
|
615
|
+
}, sentenceCase(month));
|
|
616
|
+
})))));
|
|
617
|
+
}
|
|
618
|
+
|
|
619
|
+
var __defProp$u = Object.defineProperty;
|
|
620
|
+
var __getOwnPropSymbols$w = Object.getOwnPropertySymbols;
|
|
621
|
+
var __hasOwnProp$w = Object.prototype.hasOwnProperty;
|
|
622
|
+
var __propIsEnum$w = Object.prototype.propertyIsEnumerable;
|
|
623
|
+
var __defNormalProp$u = (obj, key, value) => key in obj ? __defProp$u(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
624
|
+
var __spreadValues$u = (a, b) => {
|
|
625
|
+
for (var prop in b || (b = {}))
|
|
626
|
+
if (__hasOwnProp$w.call(b, prop))
|
|
627
|
+
__defNormalProp$u(a, prop, b[prop]);
|
|
628
|
+
if (__getOwnPropSymbols$w)
|
|
629
|
+
for (var prop of __getOwnPropSymbols$w(b)) {
|
|
630
|
+
if (__propIsEnum$w.call(b, prop))
|
|
631
|
+
__defNormalProp$u(a, prop, b[prop]);
|
|
632
|
+
}
|
|
633
|
+
return a;
|
|
634
|
+
};
|
|
635
|
+
function CalendarYearsGrid({
|
|
636
|
+
state
|
|
637
|
+
}) {
|
|
638
|
+
const years = range(state.visibleRange.start.year, state.visibleRange.end.year).slice(0, 12);
|
|
639
|
+
const yearRows = [...chunks(years, 3)];
|
|
640
|
+
const { gridProps } = useCustomDurationCalendarGrid({ cellsDuration: "years" }, state);
|
|
641
|
+
return /* @__PURE__ */ React__default["default"].createElement("table", __spreadValues$u({
|
|
642
|
+
className: clsx__default["default"](styles__default$1["default"]["sapphire-calendar__table"], styles__default$1["default"]["sapphire-calendar__table--month-year"])
|
|
643
|
+
}, gridProps), /* @__PURE__ */ React__default["default"].createElement("tbody", null, yearRows.map((currentRowYears, rowIndex) => /* @__PURE__ */ React__default["default"].createElement("tr", {
|
|
644
|
+
key: rowIndex,
|
|
645
|
+
className: styles__default$1["default"]["sapphire-calendar__table-body-row"]
|
|
646
|
+
}, currentRowYears.map((year, index) => {
|
|
647
|
+
const newFocusedDate = state.focusedDate.set({
|
|
648
|
+
year
|
|
649
|
+
});
|
|
650
|
+
const isYearDisabled = state.isInvalid(date.startOfYear(newFocusedDate)) && state.isInvalid(date.endOfYear(newFocusedDate));
|
|
651
|
+
return /* @__PURE__ */ React__default["default"].createElement(CalendarMonthOrYearCell, {
|
|
652
|
+
key: index,
|
|
653
|
+
date: newFocusedDate,
|
|
654
|
+
field: "year",
|
|
655
|
+
isDisabled: isYearDisabled,
|
|
656
|
+
state
|
|
657
|
+
}, year);
|
|
658
|
+
})))));
|
|
659
|
+
}
|
|
660
|
+
|
|
661
|
+
var __defProp$t = Object.defineProperty;
|
|
662
|
+
var __defProps$s = Object.defineProperties;
|
|
663
|
+
var __getOwnPropDescs$s = Object.getOwnPropertyDescriptors;
|
|
664
|
+
var __getOwnPropSymbols$v = Object.getOwnPropertySymbols;
|
|
665
|
+
var __hasOwnProp$v = Object.prototype.hasOwnProperty;
|
|
666
|
+
var __propIsEnum$v = Object.prototype.propertyIsEnumerable;
|
|
667
|
+
var __defNormalProp$t = (obj, key, value) => key in obj ? __defProp$t(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
668
|
+
var __spreadValues$t = (a, b) => {
|
|
669
|
+
for (var prop in b || (b = {}))
|
|
670
|
+
if (__hasOwnProp$v.call(b, prop))
|
|
671
|
+
__defNormalProp$t(a, prop, b[prop]);
|
|
672
|
+
if (__getOwnPropSymbols$v)
|
|
673
|
+
for (var prop of __getOwnPropSymbols$v(b)) {
|
|
674
|
+
if (__propIsEnum$v.call(b, prop))
|
|
675
|
+
__defNormalProp$t(a, prop, b[prop]);
|
|
676
|
+
}
|
|
677
|
+
return a;
|
|
678
|
+
};
|
|
679
|
+
var __spreadProps$s = (a, b) => __defProps$s(a, __getOwnPropDescs$s(b));
|
|
680
|
+
var __objRest$l = (source, exclude) => {
|
|
681
|
+
var target = {};
|
|
682
|
+
for (var prop in source)
|
|
683
|
+
if (__hasOwnProp$v.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
684
|
+
target[prop] = source[prop];
|
|
685
|
+
if (source != null && __getOwnPropSymbols$v)
|
|
686
|
+
for (var prop of __getOwnPropSymbols$v(source)) {
|
|
687
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum$v.call(source, prop))
|
|
688
|
+
target[prop] = source[prop];
|
|
689
|
+
}
|
|
690
|
+
return target;
|
|
691
|
+
};
|
|
692
|
+
const viewToVisibleDuration = {
|
|
693
|
+
days: {
|
|
694
|
+
months: 1
|
|
695
|
+
},
|
|
696
|
+
months: {
|
|
697
|
+
years: 1
|
|
698
|
+
},
|
|
699
|
+
years: {
|
|
700
|
+
years: 12
|
|
701
|
+
}
|
|
702
|
+
};
|
|
703
|
+
function useSapphireCalendarState(_a) {
|
|
704
|
+
var _b = _a, {
|
|
705
|
+
view: viewProp,
|
|
706
|
+
defaultView = "days",
|
|
707
|
+
onViewChange
|
|
708
|
+
} = _b, otherOptions = __objRest$l(_b, [
|
|
709
|
+
"view",
|
|
710
|
+
"defaultView",
|
|
711
|
+
"onViewChange"
|
|
712
|
+
]);
|
|
713
|
+
const [view, setView] = utils$2.useControlledState(viewProp, defaultView, onViewChange);
|
|
714
|
+
const state = calendar$1.useCalendarState(__spreadProps$s(__spreadValues$t({}, otherOptions), {
|
|
715
|
+
visibleDuration: viewToVisibleDuration[view]
|
|
716
|
+
}));
|
|
717
|
+
const broadenView = () => {
|
|
718
|
+
switch (view) {
|
|
719
|
+
case "days":
|
|
720
|
+
return setView("months");
|
|
721
|
+
case "months":
|
|
722
|
+
return setView("years");
|
|
723
|
+
}
|
|
724
|
+
};
|
|
725
|
+
const narrowView = () => {
|
|
726
|
+
switch (view) {
|
|
727
|
+
case "months":
|
|
728
|
+
return setView("days");
|
|
729
|
+
case "years":
|
|
730
|
+
return setView("months");
|
|
731
|
+
}
|
|
732
|
+
};
|
|
733
|
+
const canDrillUp = !state.isReadOnly && ["days", "months"].includes(view);
|
|
734
|
+
return __spreadProps$s(__spreadValues$t({}, state), {
|
|
735
|
+
view,
|
|
736
|
+
narrowView,
|
|
737
|
+
broadenView,
|
|
738
|
+
canBroadenView: canDrillUp
|
|
739
|
+
});
|
|
740
|
+
}
|
|
741
|
+
|
|
742
|
+
var __defProp$s = Object.defineProperty;
|
|
743
|
+
var __defProps$r = Object.defineProperties;
|
|
744
|
+
var __getOwnPropDescs$r = Object.getOwnPropertyDescriptors;
|
|
745
|
+
var __getOwnPropSymbols$u = Object.getOwnPropertySymbols;
|
|
746
|
+
var __hasOwnProp$u = Object.prototype.hasOwnProperty;
|
|
747
|
+
var __propIsEnum$u = Object.prototype.propertyIsEnumerable;
|
|
748
|
+
var __defNormalProp$s = (obj, key, value) => key in obj ? __defProp$s(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
749
|
+
var __spreadValues$s = (a, b) => {
|
|
750
|
+
for (var prop in b || (b = {}))
|
|
751
|
+
if (__hasOwnProp$u.call(b, prop))
|
|
752
|
+
__defNormalProp$s(a, prop, b[prop]);
|
|
753
|
+
if (__getOwnPropSymbols$u)
|
|
754
|
+
for (var prop of __getOwnPropSymbols$u(b)) {
|
|
755
|
+
if (__propIsEnum$u.call(b, prop))
|
|
756
|
+
__defNormalProp$s(a, prop, b[prop]);
|
|
757
|
+
}
|
|
758
|
+
return a;
|
|
759
|
+
};
|
|
760
|
+
var __spreadProps$r = (a, b) => __defProps$r(a, __getOwnPropDescs$r(b));
|
|
761
|
+
function CalendarHeader({
|
|
762
|
+
isLeft,
|
|
763
|
+
isRight,
|
|
764
|
+
children,
|
|
765
|
+
prevButtonProps,
|
|
766
|
+
nextButtonProps
|
|
767
|
+
}) {
|
|
768
|
+
return /* @__PURE__ */ React__default["default"].createElement("div", {
|
|
769
|
+
className: clsx__default["default"](styles__default$1["default"]["sapphire-calendar__header"], {
|
|
770
|
+
[styles__default$1["default"]["sapphire-calendar__header--left"]]: isLeft,
|
|
771
|
+
[styles__default$1["default"]["sapphire-calendar__header--right"]]: isRight
|
|
772
|
+
})
|
|
773
|
+
}, /* @__PURE__ */ React__default["default"].createElement("div", {
|
|
774
|
+
className: styles__default$1["default"]["sapphire-calendar__header-prev-month"]
|
|
775
|
+
}, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.IconButton, __spreadProps$r(__spreadValues$s({}, prevButtonProps), {
|
|
776
|
+
variant: "tertiary",
|
|
777
|
+
appearance: "ghost",
|
|
778
|
+
size: "large",
|
|
779
|
+
"aria-label": "Previous"
|
|
780
|
+
}), /* @__PURE__ */ React__default["default"].createElement(react.ChevronLeft, null))), /* @__PURE__ */ React__default["default"].createElement("div", {
|
|
781
|
+
className: styles__default$1["default"]["sapphire-calendar__header-title"]
|
|
782
|
+
}, children), /* @__PURE__ */ React__default["default"].createElement("div", {
|
|
783
|
+
className: styles__default$1["default"]["sapphire-calendar__header-next-month"]
|
|
784
|
+
}, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.IconButton, __spreadProps$r(__spreadValues$s({}, nextButtonProps), {
|
|
785
|
+
variant: "tertiary",
|
|
786
|
+
appearance: "ghost",
|
|
787
|
+
size: "large",
|
|
788
|
+
"aria-label": "Next"
|
|
789
|
+
}), /* @__PURE__ */ React__default["default"].createElement(react.ChevronRight, null))));
|
|
790
|
+
}
|
|
791
|
+
|
|
792
|
+
var __defProp$r = Object.defineProperty;
|
|
793
|
+
var __defProps$q = Object.defineProperties;
|
|
794
|
+
var __getOwnPropDescs$q = Object.getOwnPropertyDescriptors;
|
|
795
|
+
var __getOwnPropSymbols$t = Object.getOwnPropertySymbols;
|
|
796
|
+
var __hasOwnProp$t = Object.prototype.hasOwnProperty;
|
|
797
|
+
var __propIsEnum$t = Object.prototype.propertyIsEnumerable;
|
|
798
|
+
var __defNormalProp$r = (obj, key, value) => key in obj ? __defProp$r(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
799
|
+
var __spreadValues$r = (a, b) => {
|
|
800
|
+
for (var prop in b || (b = {}))
|
|
801
|
+
if (__hasOwnProp$t.call(b, prop))
|
|
802
|
+
__defNormalProp$r(a, prop, b[prop]);
|
|
803
|
+
if (__getOwnPropSymbols$t)
|
|
804
|
+
for (var prop of __getOwnPropSymbols$t(b)) {
|
|
805
|
+
if (__propIsEnum$t.call(b, prop))
|
|
806
|
+
__defNormalProp$r(a, prop, b[prop]);
|
|
807
|
+
}
|
|
808
|
+
return a;
|
|
809
|
+
};
|
|
810
|
+
var __spreadProps$q = (a, b) => __defProps$q(a, __getOwnPropDescs$q(b));
|
|
811
|
+
function CalendarPageAnimation({
|
|
812
|
+
children,
|
|
813
|
+
state: { direction, key }
|
|
814
|
+
}) {
|
|
815
|
+
return /* @__PURE__ */ React__default["default"].createElement(reactTransitionGroup.TransitionGroup, {
|
|
816
|
+
className: clsx__default["default"](styles__default$1["default"]["sapphire-calendar__grid-page-animation"], styles__default$1["default"][`sapphire-calendar__grid-page-animation--${direction}`])
|
|
817
|
+
}, /* @__PURE__ */ React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
|
|
818
|
+
key,
|
|
819
|
+
addEndListener: (node, done) => {
|
|
820
|
+
node.addEventListener("transitionend", done, false);
|
|
821
|
+
},
|
|
822
|
+
unmountOnExit: true,
|
|
823
|
+
classNames: {
|
|
824
|
+
enter: styles__default$1["default"]["enter"],
|
|
825
|
+
enterActive: styles__default$1["default"]["enter-active"],
|
|
826
|
+
exit: styles__default$1["default"]["exit"],
|
|
827
|
+
exitActive: styles__default$1["default"]["exit-active"]
|
|
828
|
+
}
|
|
829
|
+
}, children));
|
|
830
|
+
}
|
|
831
|
+
function useCalendarAnimationState(state) {
|
|
832
|
+
const [animationState, setAnimationState] = React.useState({ key: 0, direction: "next" });
|
|
833
|
+
return __spreadProps$q(__spreadValues$r({}, state), {
|
|
834
|
+
focusNextPage: () => {
|
|
835
|
+
setAnimationState(({ key }) => ({
|
|
836
|
+
key: key + 1,
|
|
837
|
+
direction: "next"
|
|
838
|
+
}));
|
|
839
|
+
state.focusNextPage();
|
|
840
|
+
},
|
|
841
|
+
focusPreviousPage: () => {
|
|
842
|
+
setAnimationState(({ key }) => ({
|
|
843
|
+
key: key - 1,
|
|
844
|
+
direction: "prev"
|
|
845
|
+
}));
|
|
846
|
+
state.focusPreviousPage();
|
|
847
|
+
},
|
|
848
|
+
animationState
|
|
849
|
+
});
|
|
850
|
+
}
|
|
851
|
+
|
|
852
|
+
var __defProp$q = Object.defineProperty;
|
|
853
|
+
var __defProps$p = Object.defineProperties;
|
|
854
|
+
var __getOwnPropDescs$p = Object.getOwnPropertyDescriptors;
|
|
855
|
+
var __getOwnPropSymbols$s = Object.getOwnPropertySymbols;
|
|
856
|
+
var __hasOwnProp$s = Object.prototype.hasOwnProperty;
|
|
857
|
+
var __propIsEnum$s = Object.prototype.propertyIsEnumerable;
|
|
858
|
+
var __defNormalProp$q = (obj, key, value) => key in obj ? __defProp$q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
859
|
+
var __spreadValues$q = (a, b) => {
|
|
860
|
+
for (var prop in b || (b = {}))
|
|
861
|
+
if (__hasOwnProp$s.call(b, prop))
|
|
862
|
+
__defNormalProp$q(a, prop, b[prop]);
|
|
863
|
+
if (__getOwnPropSymbols$s)
|
|
864
|
+
for (var prop of __getOwnPropSymbols$s(b)) {
|
|
865
|
+
if (__propIsEnum$s.call(b, prop))
|
|
866
|
+
__defNormalProp$q(a, prop, b[prop]);
|
|
867
|
+
}
|
|
868
|
+
return a;
|
|
869
|
+
};
|
|
870
|
+
var __spreadProps$p = (a, b) => __defProps$p(a, __getOwnPropDescs$p(b));
|
|
871
|
+
var __objRest$k = (source, exclude) => {
|
|
872
|
+
var target = {};
|
|
873
|
+
for (var prop in source)
|
|
874
|
+
if (__hasOwnProp$s.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
875
|
+
target[prop] = source[prop];
|
|
876
|
+
if (source != null && __getOwnPropSymbols$s)
|
|
877
|
+
for (var prop of __getOwnPropSymbols$s(source)) {
|
|
878
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum$s.call(source, prop))
|
|
879
|
+
target[prop] = source[prop];
|
|
880
|
+
}
|
|
881
|
+
return target;
|
|
882
|
+
};
|
|
883
|
+
const Calendar = (_a) => {
|
|
884
|
+
var _b = _a, {
|
|
885
|
+
showWeekNumbers
|
|
886
|
+
} = _b, props = __objRest$k(_b, [
|
|
887
|
+
"showWeekNumbers"
|
|
888
|
+
]);
|
|
889
|
+
sapphireReact.useThemeCheck();
|
|
890
|
+
const { locale } = i18n.useLocale();
|
|
891
|
+
const formatMessage = i18n.useMessageFormatter(intlMessages$1);
|
|
892
|
+
sapphireReact.useThemeCheck();
|
|
893
|
+
const { styleProps } = sapphireReact.useSapphireStyleProps(props);
|
|
894
|
+
const state = useCalendarAnimationState(useSapphireCalendarState(__spreadProps$p(__spreadValues$q({
|
|
895
|
+
selectionAlignment: "start"
|
|
896
|
+
}, props), {
|
|
897
|
+
locale,
|
|
898
|
+
createCalendar: date.createCalendar
|
|
899
|
+
})));
|
|
900
|
+
const monthDateFormatter = i18n.useDateFormatter({
|
|
901
|
+
month: "long",
|
|
902
|
+
year: "numeric",
|
|
903
|
+
era: state.visibleRange.start.calendar.identifier === "gregory" && state.visibleRange.start.era === "BC" ? "short" : void 0,
|
|
904
|
+
calendar: state.visibleRange.start.calendar.identifier,
|
|
905
|
+
timeZone: state.timeZone
|
|
906
|
+
});
|
|
907
|
+
const { calendarProps, prevButtonProps, nextButtonProps } = calendar.useCalendar(props, state);
|
|
908
|
+
const renderGrid = () => {
|
|
909
|
+
switch (state.view) {
|
|
910
|
+
case "years":
|
|
911
|
+
return /* @__PURE__ */ React__default["default"].createElement(CalendarYearsGrid, {
|
|
912
|
+
state
|
|
913
|
+
});
|
|
914
|
+
case "months":
|
|
915
|
+
return /* @__PURE__ */ React__default["default"].createElement(CalendarMonthsGrid, {
|
|
916
|
+
state
|
|
917
|
+
});
|
|
918
|
+
case "days":
|
|
919
|
+
default:
|
|
920
|
+
return /* @__PURE__ */ React__default["default"].createElement(CalendarDaysGrid, {
|
|
921
|
+
state,
|
|
922
|
+
showWeekNumbers
|
|
923
|
+
});
|
|
924
|
+
}
|
|
925
|
+
};
|
|
926
|
+
const renderTitle = () => {
|
|
927
|
+
switch (state.view) {
|
|
928
|
+
case "days":
|
|
929
|
+
return sentenceCase(monthDateFormatter.format(state.visibleRange.start.toDate(state.timeZone)));
|
|
930
|
+
case "months":
|
|
931
|
+
return state.focusedDate.year;
|
|
932
|
+
case "years":
|
|
933
|
+
return sentenceCase(formatMessage("year"));
|
|
934
|
+
}
|
|
935
|
+
};
|
|
936
|
+
return /* @__PURE__ */ React__default["default"].createElement("div", __spreadValues$q({
|
|
937
|
+
className: styles__default$1["default"]["sapphire-calendar"]
|
|
938
|
+
}, utils$1.mergeProps(calendarProps, utils$1.filterDOMProps(props))), /* @__PURE__ */ React__default["default"].createElement("div", {
|
|
939
|
+
className: clsx__default["default"](styles__default$1["default"]["sapphire-calendar__table-container"], styleProps.className),
|
|
940
|
+
style: styleProps.style
|
|
941
|
+
}, /* @__PURE__ */ React__default["default"].createElement(CalendarHeader, {
|
|
942
|
+
prevButtonProps,
|
|
943
|
+
nextButtonProps
|
|
944
|
+
}, state.canBroadenView ? /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Button, {
|
|
945
|
+
onPress: state.broadenView,
|
|
946
|
+
isDisabled: state.isDisabled,
|
|
947
|
+
variant: "tertiary",
|
|
948
|
+
appearance: "ghost",
|
|
949
|
+
size: "large"
|
|
950
|
+
}, renderTitle()) : renderTitle()), state.view === "days" ? /* @__PURE__ */ React__default["default"].createElement(CalendarPageAnimation, {
|
|
951
|
+
state: state.animationState
|
|
952
|
+
}, renderGrid()) : renderGrid()));
|
|
953
|
+
};
|
|
954
|
+
|
|
955
|
+
var __defProp$p = Object.defineProperty;
|
|
956
|
+
var __defProps$o = Object.defineProperties;
|
|
957
|
+
var __getOwnPropDescs$o = Object.getOwnPropertyDescriptors;
|
|
958
|
+
var __getOwnPropSymbols$r = Object.getOwnPropertySymbols;
|
|
959
|
+
var __hasOwnProp$r = Object.prototype.hasOwnProperty;
|
|
960
|
+
var __propIsEnum$r = Object.prototype.propertyIsEnumerable;
|
|
961
|
+
var __defNormalProp$p = (obj, key, value) => key in obj ? __defProp$p(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
962
|
+
var __spreadValues$p = (a, b) => {
|
|
963
|
+
for (var prop in b || (b = {}))
|
|
964
|
+
if (__hasOwnProp$r.call(b, prop))
|
|
965
|
+
__defNormalProp$p(a, prop, b[prop]);
|
|
966
|
+
if (__getOwnPropSymbols$r)
|
|
967
|
+
for (var prop of __getOwnPropSymbols$r(b)) {
|
|
968
|
+
if (__propIsEnum$r.call(b, prop))
|
|
969
|
+
__defNormalProp$p(a, prop, b[prop]);
|
|
970
|
+
}
|
|
971
|
+
return a;
|
|
972
|
+
};
|
|
973
|
+
var __spreadProps$o = (a, b) => __defProps$o(a, __getOwnPropDescs$o(b));
|
|
974
|
+
var __objRest$j = (source, exclude) => {
|
|
975
|
+
var target = {};
|
|
976
|
+
for (var prop in source)
|
|
977
|
+
if (__hasOwnProp$r.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
978
|
+
target[prop] = source[prop];
|
|
979
|
+
if (source != null && __getOwnPropSymbols$r)
|
|
980
|
+
for (var prop of __getOwnPropSymbols$r(source)) {
|
|
981
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum$r.call(source, prop))
|
|
982
|
+
target[prop] = source[prop];
|
|
983
|
+
}
|
|
984
|
+
return target;
|
|
985
|
+
};
|
|
986
|
+
const useRangeCalendarState = (_a) => {
|
|
987
|
+
var _b = _a, {
|
|
988
|
+
onChange
|
|
989
|
+
} = _b, options = __objRest$j(_b, [
|
|
990
|
+
"onChange"
|
|
991
|
+
]);
|
|
992
|
+
const lastPredefinedRange = React.useRef(void 0);
|
|
993
|
+
const state = calendar$1.useRangeCalendarState(__spreadProps$o(__spreadValues$p({}, options), {
|
|
994
|
+
onChange: (value) => {
|
|
995
|
+
onChange == null ? void 0 : onChange(value, lastPredefinedRange.current);
|
|
996
|
+
lastPredefinedRange.current = void 0;
|
|
997
|
+
}
|
|
998
|
+
}));
|
|
999
|
+
return __spreadProps$o(__spreadValues$p({}, state), {
|
|
1000
|
+
setValue: (value, predefinedRange) => {
|
|
1001
|
+
lastPredefinedRange.current = predefinedRange;
|
|
1002
|
+
state.setValue(value);
|
|
1003
|
+
}
|
|
1004
|
+
});
|
|
1005
|
+
};
|
|
1006
|
+
|
|
1007
|
+
var __defProp$o = Object.defineProperty;
|
|
1008
|
+
var __defProps$n = Object.defineProperties;
|
|
1009
|
+
var __getOwnPropDescs$n = Object.getOwnPropertyDescriptors;
|
|
1010
|
+
var __getOwnPropSymbols$q = Object.getOwnPropertySymbols;
|
|
1011
|
+
var __hasOwnProp$q = Object.prototype.hasOwnProperty;
|
|
1012
|
+
var __propIsEnum$q = Object.prototype.propertyIsEnumerable;
|
|
1013
|
+
var __defNormalProp$o = (obj, key, value) => key in obj ? __defProp$o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
1014
|
+
var __spreadValues$o = (a, b) => {
|
|
1015
|
+
for (var prop in b || (b = {}))
|
|
1016
|
+
if (__hasOwnProp$q.call(b, prop))
|
|
1017
|
+
__defNormalProp$o(a, prop, b[prop]);
|
|
1018
|
+
if (__getOwnPropSymbols$q)
|
|
1019
|
+
for (var prop of __getOwnPropSymbols$q(b)) {
|
|
1020
|
+
if (__propIsEnum$q.call(b, prop))
|
|
1021
|
+
__defNormalProp$o(a, prop, b[prop]);
|
|
1022
|
+
}
|
|
1023
|
+
return a;
|
|
1024
|
+
};
|
|
1025
|
+
var __spreadProps$n = (a, b) => __defProps$n(a, __getOwnPropDescs$n(b));
|
|
1026
|
+
var __objRest$i = (source, exclude) => {
|
|
1027
|
+
var target = {};
|
|
1028
|
+
for (var prop in source)
|
|
1029
|
+
if (__hasOwnProp$q.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
1030
|
+
target[prop] = source[prop];
|
|
1031
|
+
if (source != null && __getOwnPropSymbols$q)
|
|
1032
|
+
for (var prop of __getOwnPropSymbols$q(source)) {
|
|
1033
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum$q.call(source, prop))
|
|
1034
|
+
target[prop] = source[prop];
|
|
1035
|
+
}
|
|
1036
|
+
return target;
|
|
1037
|
+
};
|
|
1038
|
+
const _RangeCalendar = function RangeCalendar2(_a, forwardedRef) {
|
|
1039
|
+
var _b = _a, {
|
|
1040
|
+
showWeekNumbers,
|
|
1041
|
+
showTwoMonths = false,
|
|
1042
|
+
allowUnavailableDatesWithinRange = false,
|
|
1043
|
+
predefinedRanges
|
|
1044
|
+
} = _b, props = __objRest$i(_b, [
|
|
1045
|
+
"showWeekNumbers",
|
|
1046
|
+
"showTwoMonths",
|
|
1047
|
+
"allowUnavailableDatesWithinRange",
|
|
1048
|
+
"predefinedRanges"
|
|
1049
|
+
]);
|
|
1050
|
+
sapphireReact.useThemeCheck();
|
|
1051
|
+
const { styleProps } = sapphireReact.useSapphireStyleProps(props);
|
|
1052
|
+
const ref = utils$1.useObjectRef(forwardedRef);
|
|
1053
|
+
const { locale } = i18n.useLocale();
|
|
1054
|
+
const state = useCalendarAnimationState(useRangeCalendarState(__spreadProps$n(__spreadValues$o({}, props), {
|
|
1055
|
+
locale,
|
|
1056
|
+
allowsNonContiguousRanges: allowUnavailableDatesWithinRange,
|
|
1057
|
+
visibleDuration: React.useMemo(() => ({ months: showTwoMonths ? 2 : 1 }), [showTwoMonths]),
|
|
1058
|
+
createCalendar: date.createCalendar
|
|
1059
|
+
})));
|
|
1060
|
+
const { calendarProps, prevButtonProps, nextButtonProps } = calendar.useRangeCalendar(props, state, ref);
|
|
1061
|
+
const monthDateFormatter = i18n.useDateFormatter({
|
|
1062
|
+
month: "long",
|
|
1063
|
+
year: "numeric",
|
|
1064
|
+
era: state.visibleRange.start.calendar.identifier === "gregory" && state.visibleRange.start.era === "BC" ? "short" : void 0,
|
|
1065
|
+
calendar: state.visibleRange.start.calendar.identifier,
|
|
1066
|
+
timeZone: state.timeZone
|
|
1067
|
+
});
|
|
1068
|
+
return /* @__PURE__ */ React__default["default"].createElement("div", __spreadValues$o({
|
|
1069
|
+
ref,
|
|
1070
|
+
className: clsx__default["default"](styles__default$1["default"]["sapphire-calendar"], styleProps.className),
|
|
1071
|
+
style: styleProps.style
|
|
1072
|
+
}, utils$1.mergeProps(calendarProps, utils$1.filterDOMProps(props))), /* @__PURE__ */ React__default["default"].createElement("div", {
|
|
1073
|
+
className: styles__default$1["default"]["sapphire-calendar__tables-row"]
|
|
1074
|
+
}, [state.visibleRange.start].concat(showTwoMonths ? state.visibleRange.start.add({ months: 1 }) : []).map((startOfMonth, index, visibleMonths) => {
|
|
1075
|
+
const isLeft = visibleMonths.length > 1 && index === 0;
|
|
1076
|
+
const isRight = visibleMonths.length > 1 && index === visibleMonths.length - 1;
|
|
1077
|
+
const shouldAnimate = visibleMonths.length === 1;
|
|
1078
|
+
const daysGrid = /* @__PURE__ */ React__default["default"].createElement(CalendarDaysGrid, {
|
|
1079
|
+
startDate: startOfMonth,
|
|
1080
|
+
state,
|
|
1081
|
+
showWeekNumbers
|
|
1082
|
+
});
|
|
1083
|
+
return /* @__PURE__ */ React__default["default"].createElement("div", {
|
|
1084
|
+
key: index,
|
|
1085
|
+
className: styles__default$1["default"]["sapphire-calendar__table-container"]
|
|
1086
|
+
}, /* @__PURE__ */ React__default["default"].createElement(CalendarHeader, {
|
|
1087
|
+
prevButtonProps,
|
|
1088
|
+
nextButtonProps,
|
|
1089
|
+
isLeft,
|
|
1090
|
+
isRight
|
|
1091
|
+
}, sentenceCase(monthDateFormatter.format(startOfMonth.toDate(state.timeZone)))), shouldAnimate ? /* @__PURE__ */ React__default["default"].createElement(CalendarPageAnimation, {
|
|
1092
|
+
state: state.animationState
|
|
1093
|
+
}, daysGrid) : daysGrid);
|
|
1094
|
+
})), predefinedRanges && /* @__PURE__ */ React__default["default"].createElement("div", {
|
|
1095
|
+
className: styles__default$1["default"]["sapphire-calendar__custom-ranges"]
|
|
1096
|
+
}, Object.entries(predefinedRanges).map(([key, { label, dateRange }]) => /* @__PURE__ */ React__default["default"].createElement("div", {
|
|
1097
|
+
key
|
|
1098
|
+
}, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Button, {
|
|
1099
|
+
variant: "secondary",
|
|
1100
|
+
appearance: "ghost",
|
|
1101
|
+
onPress: () => {
|
|
1102
|
+
state.setValue(dateRange, key);
|
|
1103
|
+
state.setAnchorDate(null);
|
|
1104
|
+
state.setFocusedDate(date.toCalendarDate(dateRange.end));
|
|
1105
|
+
}
|
|
1106
|
+
}, label)))));
|
|
1107
|
+
};
|
|
1108
|
+
const RangeCalendar = React__default["default"].forwardRef(_RangeCalendar);
|
|
1109
|
+
|
|
1110
|
+
var __getOwnPropSymbols$p = Object.getOwnPropertySymbols;
|
|
1111
|
+
var __hasOwnProp$p = Object.prototype.hasOwnProperty;
|
|
1112
|
+
var __propIsEnum$p = Object.prototype.propertyIsEnumerable;
|
|
1113
|
+
var __objRest$h = (source, exclude) => {
|
|
1114
|
+
var target = {};
|
|
1115
|
+
for (var prop in source)
|
|
1116
|
+
if (__hasOwnProp$p.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
1117
|
+
target[prop] = source[prop];
|
|
1118
|
+
if (source != null && __getOwnPropSymbols$p)
|
|
1119
|
+
for (var prop of __getOwnPropSymbols$p(source)) {
|
|
1120
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum$p.call(source, prop))
|
|
1121
|
+
target[prop] = source[prop];
|
|
1122
|
+
}
|
|
1123
|
+
return target;
|
|
1124
|
+
};
|
|
1125
|
+
const Spinner = (_a) => {
|
|
1126
|
+
var _b = _a, {
|
|
1127
|
+
size = "m"
|
|
1128
|
+
} = _b, props = __objRest$h(_b, [
|
|
1129
|
+
"size"
|
|
1130
|
+
]);
|
|
1131
|
+
sapphireReact.useThemeCheck();
|
|
1132
|
+
const { styleProps } = sapphireReact.useSapphireStyleProps(props);
|
|
1133
|
+
return /* @__PURE__ */ React__default["default"].createElement("svg", {
|
|
1134
|
+
role: "progressbar",
|
|
1135
|
+
"aria-label": "aria-label" in props ? props["aria-label"] : void 0,
|
|
1136
|
+
"aria-labelledby": "aria-labelledby" in props ? props["aria-labelledby"] : void 0,
|
|
1137
|
+
className: clsx__default["default"](styleProps.className, styles__default$2["default"]["sapphire-spinner"], size !== "m" ? styles__default$2["default"][`sapphire-spinner--${size}`] : ""),
|
|
1138
|
+
style: styleProps.style,
|
|
1139
|
+
viewBox: "0 0 16 16"
|
|
1140
|
+
}, /* @__PURE__ */ React__default["default"].createElement("path", {
|
|
1141
|
+
className: styles__default$2["default"]["sapphire-spinner__track"],
|
|
1142
|
+
d: "M10.3993 2.13882C10.3295 2.39914 10.4641 2.66858 10.7034 2.79263C11.2238 3.06246 11.7123 3.41501 12.1489 3.85159C14.4401 6.14281 14.4399 9.85728 12.1489 12.1483C9.85783 14.4393 6.14335 14.4395 3.85214 12.1483C3.41556 11.7117 3.06301 11.2232 2.79317 10.7028C2.66913 10.4635 2.39969 10.329 2.13937 10.3987C1.82795 10.4821 1.65738 10.8194 1.80178 11.1077C2.1261 11.7551 2.55778 12.3624 3.09789 12.9026C5.80564 15.6103 10.1955 15.6101 12.9031 12.9026C15.6107 10.195 15.6109 5.80509 12.9031 3.09734C12.363 2.55723 11.7556 2.12555 11.1082 1.80123C10.82 1.65683 10.4827 1.8274 10.3993 2.13882Z"
|
|
1143
|
+
}), /* @__PURE__ */ React__default["default"].createElement("path", {
|
|
1144
|
+
className: styles__default$2["default"]["sapphire-spinner__accent"],
|
|
1145
|
+
d: "M1.72661 8.85304C1.98694 8.78329 2.15316 8.53215 2.14111 8.26291C2.07002 6.67514 2.63971 5.06425 3.85203 3.85193C5.06452 2.63944 6.67527 2.06989 8.26302 2.14101C8.53225 2.15306 8.78337 1.98683 8.85309 1.7265C8.93661 1.41464 8.72921 1.09798 8.4069 1.07913C6.49959 0.96764 4.55516 1.6403 3.09778 3.09768C1.64062 4.55485 0.967813 6.49934 1.07909 8.40676C1.0979 8.72916 1.41467 8.93663 1.72661 8.85304Z"
|
|
1146
|
+
}));
|
|
1147
|
+
};
|
|
1148
|
+
|
|
1149
|
+
var __defProp$n = Object.defineProperty;
|
|
1150
|
+
var __defProps$m = Object.defineProperties;
|
|
1151
|
+
var __getOwnPropDescs$m = Object.getOwnPropertyDescriptors;
|
|
1152
|
+
var __getOwnPropSymbols$o = Object.getOwnPropertySymbols;
|
|
1153
|
+
var __hasOwnProp$o = Object.prototype.hasOwnProperty;
|
|
1154
|
+
var __propIsEnum$o = Object.prototype.propertyIsEnumerable;
|
|
1155
|
+
var __defNormalProp$n = (obj, key, value) => key in obj ? __defProp$n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
1156
|
+
var __spreadValues$n = (a, b) => {
|
|
1157
|
+
for (var prop in b || (b = {}))
|
|
1158
|
+
if (__hasOwnProp$o.call(b, prop))
|
|
1159
|
+
__defNormalProp$n(a, prop, b[prop]);
|
|
1160
|
+
if (__getOwnPropSymbols$o)
|
|
1161
|
+
for (var prop of __getOwnPropSymbols$o(b)) {
|
|
1162
|
+
if (__propIsEnum$o.call(b, prop))
|
|
1163
|
+
__defNormalProp$n(a, prop, b[prop]);
|
|
1164
|
+
}
|
|
1165
|
+
return a;
|
|
1166
|
+
};
|
|
1167
|
+
var __spreadProps$m = (a, b) => __defProps$m(a, __getOwnPropDescs$m(b));
|
|
1168
|
+
var __objRest$g = (source, exclude) => {
|
|
1169
|
+
var target = {};
|
|
1170
|
+
for (var prop in source)
|
|
1171
|
+
if (__hasOwnProp$o.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
1172
|
+
target[prop] = source[prop];
|
|
1173
|
+
if (source != null && __getOwnPropSymbols$o)
|
|
1174
|
+
for (var prop of __getOwnPropSymbols$o(source)) {
|
|
1175
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum$o.call(source, prop))
|
|
1176
|
+
target[prop] = source[prop];
|
|
1177
|
+
}
|
|
1178
|
+
return target;
|
|
1179
|
+
};
|
|
1180
|
+
const NotificationBadge = (props) => {
|
|
1181
|
+
sapphireReact.useThemeCheck();
|
|
1182
|
+
const _a = props, {
|
|
1183
|
+
children,
|
|
1184
|
+
count,
|
|
1185
|
+
containerType = "circle",
|
|
1186
|
+
variant = "primary",
|
|
1187
|
+
size = "medium",
|
|
1188
|
+
show = true
|
|
1189
|
+
} = _a, otherProps = __objRest$g(_a, [
|
|
1190
|
+
"children",
|
|
1191
|
+
"count",
|
|
1192
|
+
"containerType",
|
|
1193
|
+
"variant",
|
|
1194
|
+
"size",
|
|
1195
|
+
"show"
|
|
1196
|
+
]);
|
|
1197
|
+
const { styleProps } = sapphireReact.useSapphireStyleProps(props);
|
|
1198
|
+
const badge = () => /* @__PURE__ */ React__default["default"].createElement("span", __spreadProps$m(__spreadValues$n({}, otherProps), {
|
|
1199
|
+
role: "status",
|
|
1200
|
+
className: clsx__default["default"](styleProps.className, styles__default$3["default"]["sapphire-notification-badge"], styles__default$3["default"][`sapphire-notification-badge--${size}`], styles__default$3["default"][`sapphire-notification-badge--${variant}`], {
|
|
1201
|
+
[styles__default$3["default"][`sapphire-notification-badge--pop-in`]]: show,
|
|
1202
|
+
[styles__default$3["default"][`sapphire-notification-badge--pop-out`]]: !show
|
|
1203
|
+
}),
|
|
1204
|
+
style: styleProps.style
|
|
1205
|
+
}), size !== "small" && displayCount);
|
|
1206
|
+
const displayCount = count.toString().length > 2 ? `99+` : count;
|
|
1207
|
+
return children ? /* @__PURE__ */ React__default["default"].createElement("span", {
|
|
1208
|
+
className: clsx__default["default"](styles__default$3["default"]["sapphire-notification-badge-container"], {
|
|
1209
|
+
[styles__default$3["default"]["sapphire-notification-badge-container--rectangle"]]: containerType === "rectangle"
|
|
1210
|
+
})
|
|
1211
|
+
}, children, badge()) : badge();
|
|
1212
|
+
};
|
|
1213
|
+
|
|
1214
|
+
function FilterDropdown({
|
|
1215
|
+
children,
|
|
1216
|
+
label,
|
|
1217
|
+
value,
|
|
1218
|
+
isOpen: isOpenProp,
|
|
1219
|
+
clearButtonLabel = "Clear",
|
|
1220
|
+
applyButtonLabel = "Apply",
|
|
1221
|
+
defaultOpen = false,
|
|
1222
|
+
onOpenChange,
|
|
1223
|
+
hasApplyButton = false,
|
|
1224
|
+
onApply,
|
|
1225
|
+
onClear,
|
|
1226
|
+
noMaxWidth,
|
|
1227
|
+
isDisabled = false
|
|
1228
|
+
}) {
|
|
1229
|
+
const [isOpen, setIsOpen] = utils$2.useControlledState(isOpenProp, defaultOpen, onOpenChange);
|
|
1230
|
+
const hasValue = value != null && value !== "";
|
|
1231
|
+
const close = () => setIsOpen(false);
|
|
1232
|
+
const apply = () => {
|
|
1233
|
+
onApply == null ? void 0 : onApply();
|
|
1234
|
+
close();
|
|
1235
|
+
};
|
|
1236
|
+
const applyButton = /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Button, {
|
|
1237
|
+
type: "submit",
|
|
1238
|
+
excludeFromTabOrder: !hasApplyButton
|
|
1239
|
+
}, applyButtonLabel);
|
|
1240
|
+
return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.PopoverTrigger, {
|
|
1241
|
+
popoverContent: /* @__PURE__ */ React__default["default"].createElement("form", {
|
|
1242
|
+
onSubmit: apply
|
|
1243
|
+
}, children, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Flex, {
|
|
1244
|
+
justifyContent: "space-between",
|
|
1245
|
+
marginTop: sapphireReact.tokens.size.spacing30
|
|
1246
|
+
}, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Button, {
|
|
1247
|
+
variant: "secondary",
|
|
1248
|
+
onPress: () => {
|
|
1249
|
+
close();
|
|
1250
|
+
onClear == null ? void 0 : onClear();
|
|
1251
|
+
},
|
|
1252
|
+
isDisabled: !hasValue
|
|
1253
|
+
}, clearButtonLabel), hasApplyButton ? applyButton : /* @__PURE__ */ React__default["default"].createElement(visuallyHidden.VisuallyHidden, null, applyButton))),
|
|
1254
|
+
placement: "bottom left",
|
|
1255
|
+
isOpen,
|
|
1256
|
+
onOpenChange: setIsOpen,
|
|
1257
|
+
noMaxWidth
|
|
1258
|
+
}, /* @__PURE__ */ React__default["default"].createElement(ToggleButton, {
|
|
1259
|
+
icon: /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, null, isOpen ? /* @__PURE__ */ React__default["default"].createElement(react.ChevronUp, null) : /* @__PURE__ */ React__default["default"].createElement(react.ChevronDown, null)),
|
|
1260
|
+
iconAlign: "right",
|
|
1261
|
+
isSelected: hasValue,
|
|
1262
|
+
isDisabled
|
|
1263
|
+
}, label, value ? ": " : "", value));
|
|
1264
|
+
}
|
|
1265
|
+
|
|
1266
|
+
const placeholders = new string.LocalizedStringDictionary({
|
|
1267
|
+
ach: { year: "mwaka", month: "dwe", day: "nino" },
|
|
1268
|
+
af: { year: "jjjj", month: "mm", day: "dd" },
|
|
1269
|
+
am: { year: "\u12D3\u12D3\u12D3\u12D3", month: "\u121A\u121C", day: "\u1240\u1240" },
|
|
1270
|
+
an: { year: "aaaa", month: "mm", day: "dd" },
|
|
1271
|
+
ar: { year: "\u0633\u0646\u0629", month: "\u0634\u0647\u0631", day: "\u064A\u0648\u0645" },
|
|
1272
|
+
ast: { year: "aaaa", month: "mm", day: "dd" },
|
|
1273
|
+
az: { year: "iiii", month: "aa", day: "gg" },
|
|
1274
|
+
be: { year: "\u0433\u0433\u0433\u0433", month: "\u043C\u043C", day: "\u0434\u0434" },
|
|
1275
|
+
bg: { year: "\u0433\u0433\u0433\u0433", month: "\u043C\u043C", day: "\u0434\u0434" },
|
|
1276
|
+
bn: { year: "yyyy", month: "\u09AE\u09BF\u09AE\u09BF", day: "dd" },
|
|
1277
|
+
br: { year: "bbbb", month: "mm", day: "dd" },
|
|
1278
|
+
bs: { year: "gggg", month: "mm", day: "dd" },
|
|
1279
|
+
ca: { year: "aaaa", month: "mm", day: "dd" },
|
|
1280
|
+
cak: { year: "jjjj", month: "ii", day: "q'q'" },
|
|
1281
|
+
ckb: { year: "\u0633\u0627\u06B5", month: "\u0645\u0627\u0646\u06AF", day: "\u0695\u06C6\u0698" },
|
|
1282
|
+
cs: { year: "rrrr", month: "mm", day: "dd" },
|
|
1283
|
+
cy: { year: "bbbb", month: "mm", day: "dd" },
|
|
1284
|
+
da: { year: "\xE5\xE5\xE5\xE5", month: "mm", day: "dd" },
|
|
1285
|
+
de: { year: "jjjj", month: "mm", day: "tt" },
|
|
1286
|
+
dsb: { year: "llll", month: "mm", day: "\u017A\u017A" },
|
|
1287
|
+
el: { year: "\u03B5\u03B5\u03B5\u03B5", month: "\u03BC\u03BC", day: "\u03B7\u03B7" },
|
|
1288
|
+
en: { year: "yyyy", month: "mm", day: "dd" },
|
|
1289
|
+
eo: { year: "jjjj", month: "mm", day: "tt" },
|
|
1290
|
+
es: { year: "aaaa", month: "mm", day: "dd" },
|
|
1291
|
+
et: { year: "aaaa", month: "kk", day: "pp" },
|
|
1292
|
+
eu: { year: "uuuu", month: "hh", day: "ee" },
|
|
1293
|
+
fa: { year: "\u0633\u0627\u0644", month: "\u0645\u0627\u0647", day: "\u0631\u0648\u0632" },
|
|
1294
|
+
ff: { year: "hhhh", month: "ll", day: "\xF1\xF1" },
|
|
1295
|
+
fi: { year: "vvvv", month: "kk", day: "pp" },
|
|
1296
|
+
fr: { year: "aaaa", month: "mm", day: "jj" },
|
|
1297
|
+
fy: { year: "jjjj", month: "mm", day: "dd" },
|
|
1298
|
+
ga: { year: "bbbb", month: "mm", day: "ll" },
|
|
1299
|
+
gd: { year: "bbbb", month: "mm", day: "ll" },
|
|
1300
|
+
gl: { year: "aaaa", month: "mm", day: "dd" },
|
|
1301
|
+
he: { year: "\u05E9\u05E0\u05D4", month: "\u05D7\u05D5\u05D3\u05E9", day: "\u05D9\u05D5\u05DD" },
|
|
1302
|
+
hr: { year: "gggg", month: "mm", day: "dd" },
|
|
1303
|
+
hsb: { year: "llll", month: "mm", day: "dd" },
|
|
1304
|
+
hu: { year: "\xE9\xE9\xE9\xE9", month: "hh", day: "nn" },
|
|
1305
|
+
ia: { year: "aaaa", month: "mm", day: "dd" },
|
|
1306
|
+
id: { year: "tttt", month: "bb", day: "hh" },
|
|
1307
|
+
it: { year: "aaaa", month: "mm", day: "gg" },
|
|
1308
|
+
ja: { year: " \u5E74 ", month: "\u6708", day: "\u65E5" },
|
|
1309
|
+
ka: { year: "\u10EC\u10EC\u10EC\u10EC", month: "\u10D7\u10D7", day: "\u10E0\u10E0" },
|
|
1310
|
+
kk: { year: "\u0436\u0436\u0436\u0436", month: "\u0430\u0430", day: "\u043A\u043A" },
|
|
1311
|
+
kn: { year: "\u0CB5\u0CB5\u0CB5\u0CB5", month: "\u0CAE\u0CBF\u0CAE\u0CC0", day: "\u0CA6\u0CBF\u0CA6\u0CBF" },
|
|
1312
|
+
ko: { year: "\uC5F0\uB3C4", month: "\uC6D4", day: "\uC77C" },
|
|
1313
|
+
lb: { year: "jjjj", month: "mm", day: "dd" },
|
|
1314
|
+
lo: { year: "\u0E9B\u0E9B\u0E9B\u0E9B", month: "\u0E94\u0E94", day: "\u0EA7\u0EA7" },
|
|
1315
|
+
lt: { year: "mmmm", month: "mm", day: "dd" },
|
|
1316
|
+
lv: { year: "gggg", month: "mm", day: "dd" },
|
|
1317
|
+
meh: { year: "aaaa", month: "mm", day: "dd" },
|
|
1318
|
+
ml: { year: "\u0D35\u0D7C\u0D37\u0D02", month: "\u0D2E\u0D3E\u0D38\u0D02", day: "\u0D24\u0D40\u0D2F\u0D24\u0D3F" },
|
|
1319
|
+
ms: { year: "tttt", month: "mm", day: "hh" },
|
|
1320
|
+
nl: { year: "jjjj", month: "mm", day: "dd" },
|
|
1321
|
+
nn: { year: "\xE5\xE5\xE5\xE5", month: "mm", day: "dd" },
|
|
1322
|
+
no: { year: "\xE5\xE5\xE5\xE5", month: "mm", day: "dd" },
|
|
1323
|
+
oc: { year: "aaaa", month: "mm", day: "jj" },
|
|
1324
|
+
pl: { year: "rrrr", month: "mm", day: "dd" },
|
|
1325
|
+
pt: { year: "aaaa", month: "mm", day: "dd" },
|
|
1326
|
+
rm: { year: "oooo", month: "mm", day: "dd" },
|
|
1327
|
+
ro: { year: "aaaa", month: "ll", day: "zz" },
|
|
1328
|
+
ru: { year: "\u0433\u0433\u0433\u0433", month: "\u043C\u043C", day: "\u0434\u0434" },
|
|
1329
|
+
sc: { year: "aaaa", month: "mm", day: "dd" },
|
|
1330
|
+
scn: { year: "aaaa", month: "mm", day: "jj" },
|
|
1331
|
+
sk: { year: "rrrr", month: "mm", day: "dd" },
|
|
1332
|
+
sl: { year: "llll", month: "mm", day: "dd" },
|
|
1333
|
+
sr: { year: "\u0433\u0433\u0433\u0433", month: "\u043C\u043C", day: "\u0434\u0434" },
|
|
1334
|
+
sv: { year: "\xE5\xE5\xE5\xE5", month: "mm", day: "dd" },
|
|
1335
|
+
szl: { year: "rrrr", month: "mm", day: "dd" },
|
|
1336
|
+
tg: { year: "\u0441\u0441\u0441\u0441", month: "\u043C\u043C", day: "\u0440\u0440" },
|
|
1337
|
+
th: { year: "\u0E1B\u0E1B\u0E1B\u0E1B", month: "\u0E14\u0E14", day: "\u0E27\u0E27" },
|
|
1338
|
+
tr: { year: "yyyy", month: "aa", day: "gg" },
|
|
1339
|
+
uk: { year: "\u0440\u0440\u0440\u0440", month: "\u043C\u043C", day: "\u0434\u0434" },
|
|
1340
|
+
"zh-CN": { year: "\u5E74", month: "\u6708", day: "\u65E5" },
|
|
1341
|
+
"zh-TW": { year: "\u5E74", month: "\u6708", day: "\u65E5" }
|
|
1342
|
+
}, "en");
|
|
1343
|
+
function getPlaceholder(field, value, locale) {
|
|
1344
|
+
if (field === "era" || field === "dayPeriod") {
|
|
1345
|
+
return value;
|
|
1346
|
+
}
|
|
1347
|
+
if (field === "year" || field === "month" || field === "day") {
|
|
1348
|
+
return placeholders.getStringForLocale(field, locale);
|
|
1349
|
+
}
|
|
1350
|
+
return "\u2013\u2013";
|
|
1351
|
+
}
|
|
1352
|
+
|
|
1353
|
+
var __defProp$m = Object.defineProperty;
|
|
1354
|
+
var __defProps$l = Object.defineProperties;
|
|
1355
|
+
var __getOwnPropDescs$l = Object.getOwnPropertyDescriptors;
|
|
1356
|
+
var __getOwnPropSymbols$n = Object.getOwnPropertySymbols;
|
|
1357
|
+
var __hasOwnProp$n = Object.prototype.hasOwnProperty;
|
|
1358
|
+
var __propIsEnum$n = Object.prototype.propertyIsEnumerable;
|
|
1359
|
+
var __defNormalProp$m = (obj, key, value) => key in obj ? __defProp$m(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
1360
|
+
var __spreadValues$m = (a, b) => {
|
|
1361
|
+
for (var prop in b || (b = {}))
|
|
1362
|
+
if (__hasOwnProp$n.call(b, prop))
|
|
1363
|
+
__defNormalProp$m(a, prop, b[prop]);
|
|
1364
|
+
if (__getOwnPropSymbols$n)
|
|
1365
|
+
for (var prop of __getOwnPropSymbols$n(b)) {
|
|
1366
|
+
if (__propIsEnum$n.call(b, prop))
|
|
1367
|
+
__defNormalProp$m(a, prop, b[prop]);
|
|
1368
|
+
}
|
|
1369
|
+
return a;
|
|
1370
|
+
};
|
|
1371
|
+
var __spreadProps$l = (a, b) => __defProps$l(a, __getOwnPropDescs$l(b));
|
|
1372
|
+
const segmentTypes = [
|
|
1373
|
+
"day",
|
|
1374
|
+
"hour",
|
|
1375
|
+
"minute",
|
|
1376
|
+
"second",
|
|
1377
|
+
"era",
|
|
1378
|
+
"year",
|
|
1379
|
+
"month",
|
|
1380
|
+
"dayPeriod",
|
|
1381
|
+
"literal",
|
|
1382
|
+
"timeZoneName"
|
|
1383
|
+
];
|
|
1384
|
+
const isAnyModified = (segments) => segments.map(({ type, isPlaceholder }) => {
|
|
1385
|
+
return type !== "literal" && !isPlaceholder;
|
|
1386
|
+
}).some((isModified) => isModified);
|
|
1387
|
+
const setPlaceholderLanguage = (segment, locale) => {
|
|
1388
|
+
const placeholder = getPlaceholder(segment.type, segment.text, locale);
|
|
1389
|
+
return __spreadProps$l(__spreadValues$m({}, segment), {
|
|
1390
|
+
text: segment.isPlaceholder ? placeholder : segment.text,
|
|
1391
|
+
placeholder
|
|
1392
|
+
});
|
|
1393
|
+
};
|
|
1394
|
+
|
|
1395
|
+
var __defProp$l = Object.defineProperty;
|
|
1396
|
+
var __defProps$k = Object.defineProperties;
|
|
1397
|
+
var __getOwnPropDescs$k = Object.getOwnPropertyDescriptors;
|
|
1398
|
+
var __getOwnPropSymbols$m = Object.getOwnPropertySymbols;
|
|
1399
|
+
var __hasOwnProp$m = Object.prototype.hasOwnProperty;
|
|
1400
|
+
var __propIsEnum$m = Object.prototype.propertyIsEnumerable;
|
|
1401
|
+
var __defNormalProp$l = (obj, key, value) => key in obj ? __defProp$l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
1402
|
+
var __spreadValues$l = (a, b) => {
|
|
1403
|
+
for (var prop in b || (b = {}))
|
|
1404
|
+
if (__hasOwnProp$m.call(b, prop))
|
|
1405
|
+
__defNormalProp$l(a, prop, b[prop]);
|
|
1406
|
+
if (__getOwnPropSymbols$m)
|
|
1407
|
+
for (var prop of __getOwnPropSymbols$m(b)) {
|
|
1408
|
+
if (__propIsEnum$m.call(b, prop))
|
|
1409
|
+
__defNormalProp$l(a, prop, b[prop]);
|
|
1410
|
+
}
|
|
1411
|
+
return a;
|
|
1412
|
+
};
|
|
1413
|
+
var __spreadProps$k = (a, b) => __defProps$k(a, __getOwnPropDescs$k(b));
|
|
1414
|
+
const DateSegment = ({ segment, state }) => segment.type === "literal" ? /* @__PURE__ */ React__default["default"].createElement(SeparatorSegment, {
|
|
1415
|
+
segment
|
|
1416
|
+
}) : /* @__PURE__ */ React__default["default"].createElement(EditableSegment, {
|
|
1417
|
+
segment,
|
|
1418
|
+
state
|
|
1419
|
+
});
|
|
1420
|
+
const SeparatorSegment = ({ segment }) => /* @__PURE__ */ React__default["default"].createElement("span", {
|
|
1421
|
+
"aria-hidden": "true",
|
|
1422
|
+
className: clsx__default["default"](styles__default$4["default"]["sapphire-date-field__segment"])
|
|
1423
|
+
}, segment.text);
|
|
1424
|
+
const EditableSegment = ({ segment, state }) => {
|
|
1425
|
+
const ref = React.useRef(null);
|
|
1426
|
+
const { segmentProps } = datepicker.useDateSegment(segment, state, ref);
|
|
1427
|
+
const { locale } = i18n.useLocale();
|
|
1428
|
+
const segmentWithTranslatedPlaceholders = setPlaceholderLanguage(segment, locale);
|
|
1429
|
+
return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$k(__spreadValues$l({}, segmentProps), {
|
|
1430
|
+
style: segmentProps.style,
|
|
1431
|
+
ref,
|
|
1432
|
+
className: clsx__default["default"](styles__default$4["default"]["sapphire-date-field__segment"], {
|
|
1433
|
+
[styles__default$4["default"]["sapphire-date-field__segment--filled"]]: !segmentWithTranslatedPlaceholders.isPlaceholder
|
|
1434
|
+
})
|
|
1435
|
+
}), segmentWithTranslatedPlaceholders.text);
|
|
1436
|
+
};
|
|
1437
|
+
|
|
1438
|
+
var __defProp$k = Object.defineProperty;
|
|
1439
|
+
var __defProps$j = Object.defineProperties;
|
|
1440
|
+
var __getOwnPropDescs$j = Object.getOwnPropertyDescriptors;
|
|
1441
|
+
var __getOwnPropSymbols$l = Object.getOwnPropertySymbols;
|
|
1442
|
+
var __hasOwnProp$l = Object.prototype.hasOwnProperty;
|
|
1443
|
+
var __propIsEnum$l = Object.prototype.propertyIsEnumerable;
|
|
1444
|
+
var __defNormalProp$k = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
1445
|
+
var __spreadValues$k = (a, b) => {
|
|
1446
|
+
for (var prop in b || (b = {}))
|
|
1447
|
+
if (__hasOwnProp$l.call(b, prop))
|
|
1448
|
+
__defNormalProp$k(a, prop, b[prop]);
|
|
1449
|
+
if (__getOwnPropSymbols$l)
|
|
1450
|
+
for (var prop of __getOwnPropSymbols$l(b)) {
|
|
1451
|
+
if (__propIsEnum$l.call(b, prop))
|
|
1452
|
+
__defNormalProp$k(a, prop, b[prop]);
|
|
1453
|
+
}
|
|
1454
|
+
return a;
|
|
1455
|
+
};
|
|
1456
|
+
var __spreadProps$j = (a, b) => __defProps$j(a, __getOwnPropDescs$j(b));
|
|
1457
|
+
const DateFieldButton = (props) => {
|
|
1458
|
+
const ref = React.useRef(null);
|
|
1459
|
+
const { buttonProps, isPressed } = sapphireReact.useButton(props, ref);
|
|
1460
|
+
const { hoverProps, isHovered } = interactions.useHover({ isDisabled: props.isDisabled });
|
|
1461
|
+
const { focusProps, isFocusVisible } = focus.useFocusRing();
|
|
1462
|
+
return /* @__PURE__ */ React__default["default"].createElement("button", __spreadProps$j(__spreadValues$k({}, utils$1.mergeProps(buttonProps, hoverProps, focusProps)), {
|
|
1463
|
+
ref,
|
|
1464
|
+
className: clsx__default["default"](styles__default$4["default"]["sapphire-date-field__button"], styles__default$4["default"]["js-focus"], styles__default$4["default"]["js-hover"], {
|
|
1465
|
+
[styles__default$4["default"]["is-active"]]: isPressed,
|
|
1466
|
+
[styles__default$4["default"]["is-hover"]]: isHovered,
|
|
1467
|
+
[styles__default$4["default"]["is-focus"]]: isFocusVisible
|
|
1468
|
+
})
|
|
1469
|
+
}), props.children);
|
|
1470
|
+
};
|
|
1471
|
+
|
|
1472
|
+
var clear$6 = "Nulstil";
|
|
1473
|
+
var da = {
|
|
1474
|
+
clear: clear$6
|
|
1475
|
+
};
|
|
1476
|
+
|
|
1477
|
+
var clear$5 = "Clear";
|
|
1478
|
+
var en = {
|
|
1479
|
+
clear: clear$5
|
|
1480
|
+
};
|
|
1481
|
+
|
|
1482
|
+
var clear$4 = "Zurücksetzen";
|
|
1483
|
+
var de = {
|
|
1484
|
+
clear: clear$4
|
|
1485
|
+
};
|
|
1486
|
+
|
|
1487
|
+
var clear$3 = "Nollaa";
|
|
1488
|
+
var fi = {
|
|
1489
|
+
clear: clear$3
|
|
1490
|
+
};
|
|
1491
|
+
|
|
1492
|
+
var clear$2 = "Nullstill";
|
|
1493
|
+
var no = {
|
|
1494
|
+
clear: clear$2
|
|
1495
|
+
};
|
|
1496
|
+
|
|
1497
|
+
var clear$1 = "Zresetuj";
|
|
1498
|
+
var pl = {
|
|
1499
|
+
clear: clear$1
|
|
1500
|
+
};
|
|
1501
|
+
|
|
1502
|
+
var clear = "Återställ";
|
|
1503
|
+
var se = {
|
|
1504
|
+
clear: clear
|
|
1505
|
+
};
|
|
1506
|
+
|
|
1507
|
+
var intlMessages = {
|
|
1508
|
+
"da-DK": da,
|
|
1509
|
+
"en-US": en,
|
|
1510
|
+
"de-DE": de,
|
|
1511
|
+
"fi-FI": fi,
|
|
1512
|
+
"nb-NO": no,
|
|
1513
|
+
"pl-PL": pl,
|
|
1514
|
+
"sv-SE": se
|
|
1515
|
+
};
|
|
1516
|
+
|
|
1517
|
+
var __defProp$j = Object.defineProperty;
|
|
1518
|
+
var __defProps$i = Object.defineProperties;
|
|
1519
|
+
var __getOwnPropDescs$i = Object.getOwnPropertyDescriptors;
|
|
1520
|
+
var __getOwnPropSymbols$k = Object.getOwnPropertySymbols;
|
|
1521
|
+
var __hasOwnProp$k = Object.prototype.hasOwnProperty;
|
|
1522
|
+
var __propIsEnum$k = Object.prototype.propertyIsEnumerable;
|
|
1523
|
+
var __defNormalProp$j = (obj, key, value) => key in obj ? __defProp$j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
1524
|
+
var __spreadValues$j = (a, b) => {
|
|
1525
|
+
for (var prop in b || (b = {}))
|
|
1526
|
+
if (__hasOwnProp$k.call(b, prop))
|
|
1527
|
+
__defNormalProp$j(a, prop, b[prop]);
|
|
1528
|
+
if (__getOwnPropSymbols$k)
|
|
1529
|
+
for (var prop of __getOwnPropSymbols$k(b)) {
|
|
1530
|
+
if (__propIsEnum$k.call(b, prop))
|
|
1531
|
+
__defNormalProp$j(a, prop, b[prop]);
|
|
1532
|
+
}
|
|
1533
|
+
return a;
|
|
1534
|
+
};
|
|
1535
|
+
var __spreadProps$i = (a, b) => __defProps$i(a, __getOwnPropDescs$i(b));
|
|
1536
|
+
var __objRest$f = (source, exclude) => {
|
|
1537
|
+
var target = {};
|
|
1538
|
+
for (var prop in source)
|
|
1539
|
+
if (__hasOwnProp$k.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
1540
|
+
target[prop] = source[prop];
|
|
1541
|
+
if (source != null && __getOwnPropSymbols$k)
|
|
1542
|
+
for (var prop of __getOwnPropSymbols$k(source)) {
|
|
1543
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum$k.call(source, prop))
|
|
1544
|
+
target[prop] = source[prop];
|
|
1545
|
+
}
|
|
1546
|
+
return target;
|
|
1547
|
+
};
|
|
1548
|
+
function DateInput(_a) {
|
|
1549
|
+
var _b = _a, {
|
|
1550
|
+
noClearButton = false,
|
|
1551
|
+
size = "large"
|
|
1552
|
+
} = _b, props = __objRest$f(_b, [
|
|
1553
|
+
"noClearButton",
|
|
1554
|
+
"size"
|
|
1555
|
+
]);
|
|
1556
|
+
const ref = React.useRef(null);
|
|
1557
|
+
const formatMessage = i18n.useMessageFormatter(intlMessages);
|
|
1558
|
+
const { locale } = i18n.useLocale();
|
|
1559
|
+
const customDateFormatLocale = sapphireReact.useCustomDateFormatLocale();
|
|
1560
|
+
const state = datepicker$1.useDateFieldState(__spreadProps$i(__spreadValues$j({}, props), {
|
|
1561
|
+
locale: customDateFormatLocale || locale,
|
|
1562
|
+
createCalendar: date.createCalendar
|
|
1563
|
+
}));
|
|
1564
|
+
const { fieldProps } = datepicker.useDateField(props, state, ref);
|
|
1565
|
+
const clear = () => {
|
|
1566
|
+
segmentTypes.forEach(state.clearSegment);
|
|
1567
|
+
};
|
|
1568
|
+
return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$i(__spreadValues$j({}, fieldProps), {
|
|
1569
|
+
className: styles__default$4["default"]["sapphire-date-field__input"],
|
|
1570
|
+
ref
|
|
1571
|
+
}), state.segments.map((segment, i) => /* @__PURE__ */ React__default["default"].createElement(DateSegment, {
|
|
1572
|
+
key: i,
|
|
1573
|
+
segment,
|
|
1574
|
+
state
|
|
1575
|
+
}))), !noClearButton && !props.isReadOnly && !props.isDisabled && isAnyModified(state.segments) && /* @__PURE__ */ React__default["default"].createElement(DateFieldButton, {
|
|
1576
|
+
"aria-label": formatMessage("clear"),
|
|
1577
|
+
onPress: clear
|
|
1578
|
+
}, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, {
|
|
1579
|
+
size: size === "medium" ? "m" : "l"
|
|
1580
|
+
}, /* @__PURE__ */ React__default["default"].createElement(react.CloseCircle, null))));
|
|
1581
|
+
}
|
|
1582
|
+
|
|
1583
|
+
var __defProp$i = Object.defineProperty;
|
|
1584
|
+
var __defProps$h = Object.defineProperties;
|
|
1585
|
+
var __getOwnPropDescs$h = Object.getOwnPropertyDescriptors;
|
|
1586
|
+
var __getOwnPropSymbols$j = Object.getOwnPropertySymbols;
|
|
1587
|
+
var __hasOwnProp$j = Object.prototype.hasOwnProperty;
|
|
1588
|
+
var __propIsEnum$j = Object.prototype.propertyIsEnumerable;
|
|
1589
|
+
var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
1590
|
+
var __spreadValues$i = (a, b) => {
|
|
1591
|
+
for (var prop in b || (b = {}))
|
|
1592
|
+
if (__hasOwnProp$j.call(b, prop))
|
|
1593
|
+
__defNormalProp$i(a, prop, b[prop]);
|
|
1594
|
+
if (__getOwnPropSymbols$j)
|
|
1595
|
+
for (var prop of __getOwnPropSymbols$j(b)) {
|
|
1596
|
+
if (__propIsEnum$j.call(b, prop))
|
|
1597
|
+
__defNormalProp$i(a, prop, b[prop]);
|
|
1598
|
+
}
|
|
1599
|
+
return a;
|
|
1600
|
+
};
|
|
1601
|
+
var __spreadProps$h = (a, b) => __defProps$h(a, __getOwnPropDescs$h(b));
|
|
1602
|
+
var __objRest$e = (source, exclude) => {
|
|
1603
|
+
var target = {};
|
|
1604
|
+
for (var prop in source)
|
|
1605
|
+
if (__hasOwnProp$j.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
1606
|
+
target[prop] = source[prop];
|
|
1607
|
+
if (source != null && __getOwnPropSymbols$j)
|
|
1608
|
+
for (var prop of __getOwnPropSymbols$j(source)) {
|
|
1609
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum$j.call(source, prop))
|
|
1610
|
+
target[prop] = source[prop];
|
|
1611
|
+
}
|
|
1612
|
+
return target;
|
|
1613
|
+
};
|
|
1614
|
+
function _DateField(_a, ref) {
|
|
1615
|
+
var _b = _a, {
|
|
1616
|
+
error,
|
|
1617
|
+
note,
|
|
1618
|
+
contextualHelp,
|
|
1619
|
+
noClearButton = false,
|
|
1620
|
+
showWeekNumbers,
|
|
1621
|
+
size = "large",
|
|
1622
|
+
necessityIndicator = false
|
|
1623
|
+
} = _b, otherProps = __objRest$e(_b, [
|
|
1624
|
+
"error",
|
|
1625
|
+
"note",
|
|
1626
|
+
"contextualHelp",
|
|
1627
|
+
"noClearButton",
|
|
1628
|
+
"showWeekNumbers",
|
|
1629
|
+
"size",
|
|
1630
|
+
"necessityIndicator"
|
|
1631
|
+
]);
|
|
1632
|
+
sapphireReact.useThemeCheck();
|
|
1633
|
+
const groupRef = React.useRef(null);
|
|
1634
|
+
const dialogRef = React.useRef(null);
|
|
1635
|
+
const { styleProps } = sapphireReact.useSapphireStyleProps(otherProps);
|
|
1636
|
+
const { dialogProps } = dialog.useDialog({}, dialogRef);
|
|
1637
|
+
const state = datepicker$1.useDatePickerState(__spreadValues$i(__spreadValues$i({}, otherProps), error ? { validationState: "invalid" } : {}));
|
|
1638
|
+
const {
|
|
1639
|
+
groupProps,
|
|
1640
|
+
labelProps,
|
|
1641
|
+
fieldProps,
|
|
1642
|
+
buttonProps,
|
|
1643
|
+
dialogProps: dialogPropsFromDatePicker,
|
|
1644
|
+
calendarProps,
|
|
1645
|
+
descriptionProps,
|
|
1646
|
+
errorMessageProps
|
|
1647
|
+
} = datepicker.useDatePicker(__spreadProps$h(__spreadValues$i({}, otherProps), {
|
|
1648
|
+
description: note
|
|
1649
|
+
}), state, groupRef);
|
|
1650
|
+
const isMedium = size === "medium";
|
|
1651
|
+
return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field, __spreadProps$h(__spreadValues$i({}, otherProps), {
|
|
1652
|
+
noShrink: true,
|
|
1653
|
+
isDisabled: otherProps.isDisabled,
|
|
1654
|
+
error: state.validationState === "invalid",
|
|
1655
|
+
size,
|
|
1656
|
+
ref
|
|
1657
|
+
}), otherProps.label && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Label, null, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Label, __spreadProps$h(__spreadValues$i({}, labelProps), {
|
|
1658
|
+
size,
|
|
1659
|
+
necessityIndicator: otherProps.isRequired && necessityIndicator ? "required" : !otherProps.isRequired && necessityIndicator ? "optional" : void 0,
|
|
1660
|
+
contextualHelp
|
|
1661
|
+
}), otherProps.label)), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Control, null, /* @__PURE__ */ React__default["default"].createElement("div", __spreadValues$i(__spreadProps$h(__spreadValues$i({}, groupProps), {
|
|
1662
|
+
ref: groupRef,
|
|
1663
|
+
className: clsx__default["default"](styles__default$4["default"]["sapphire-date-field"], {
|
|
1664
|
+
[styles__default$4["default"]["sapphire-date-field--error"]]: state.validationState === "invalid",
|
|
1665
|
+
[styles__default$4["default"]["sapphire-date-field--medium"]]: isMedium
|
|
1666
|
+
})
|
|
1667
|
+
}), styleProps.style.width ? { style: { width: styleProps.style.width } } : {}), /* @__PURE__ */ React__default["default"].createElement(interactions.PressResponder, __spreadProps$h(__spreadValues$i({}, buttonProps), {
|
|
1668
|
+
isPressed: state.isOpen
|
|
1669
|
+
}), /* @__PURE__ */ React__default["default"].createElement(DateFieldButton, {
|
|
1670
|
+
isDisabled: otherProps.isDisabled || otherProps.isReadOnly
|
|
1671
|
+
}, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, {
|
|
1672
|
+
size: isMedium ? "m" : "l"
|
|
1673
|
+
}, /* @__PURE__ */ React__default["default"].createElement(react.Calendar, null)))), /* @__PURE__ */ React__default["default"].createElement(DateInput, __spreadProps$h(__spreadValues$i({}, fieldProps), {
|
|
1674
|
+
noClearButton,
|
|
1675
|
+
size
|
|
1676
|
+
})))), (typeof error === "string" && error !== "" || note) && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Footer, null, error ? /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Note, __spreadValues$i({}, errorMessageProps), error) : note ? /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Note, __spreadValues$i({}, descriptionProps), note) : /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null)), state.isOpen && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Popover, {
|
|
1677
|
+
state,
|
|
1678
|
+
triggerRef: groupRef,
|
|
1679
|
+
placement: "bottom start"
|
|
1680
|
+
}, /* @__PURE__ */ React__default["default"].createElement("div", __spreadValues$i(__spreadValues$i({
|
|
1681
|
+
ref: dialogRef
|
|
1682
|
+
}, dialogProps), dialogPropsFromDatePicker), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.View, {
|
|
1683
|
+
padding: sapphireReact.tokens.size.spacing50
|
|
1684
|
+
}, /* @__PURE__ */ React__default["default"].createElement(Calendar, __spreadProps$h(__spreadValues$i({}, calendarProps), {
|
|
1685
|
+
defaultFocusedValue: state.dateValue,
|
|
1686
|
+
showWeekNumbers
|
|
1687
|
+
}))))));
|
|
1688
|
+
}
|
|
1689
|
+
const DateField = React.forwardRef(_DateField);
|
|
1690
|
+
|
|
1691
|
+
var __defProp$h = Object.defineProperty;
|
|
1692
|
+
var __defProps$g = Object.defineProperties;
|
|
1693
|
+
var __getOwnPropDescs$g = Object.getOwnPropertyDescriptors;
|
|
1694
|
+
var __getOwnPropSymbols$i = Object.getOwnPropertySymbols;
|
|
1695
|
+
var __hasOwnProp$i = Object.prototype.hasOwnProperty;
|
|
1696
|
+
var __propIsEnum$i = Object.prototype.propertyIsEnumerable;
|
|
1697
|
+
var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$h(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
1698
|
+
var __spreadValues$h = (a, b) => {
|
|
1699
|
+
for (var prop in b || (b = {}))
|
|
1700
|
+
if (__hasOwnProp$i.call(b, prop))
|
|
1701
|
+
__defNormalProp$h(a, prop, b[prop]);
|
|
1702
|
+
if (__getOwnPropSymbols$i)
|
|
1703
|
+
for (var prop of __getOwnPropSymbols$i(b)) {
|
|
1704
|
+
if (__propIsEnum$i.call(b, prop))
|
|
1705
|
+
__defNormalProp$h(a, prop, b[prop]);
|
|
1706
|
+
}
|
|
1707
|
+
return a;
|
|
1708
|
+
};
|
|
1709
|
+
var __spreadProps$g = (a, b) => __defProps$g(a, __getOwnPropDescs$g(b));
|
|
1710
|
+
var __objRest$d = (source, exclude) => {
|
|
1711
|
+
var target = {};
|
|
1712
|
+
for (var prop in source)
|
|
1713
|
+
if (__hasOwnProp$i.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
1714
|
+
target[prop] = source[prop];
|
|
1715
|
+
if (source != null && __getOwnPropSymbols$i)
|
|
1716
|
+
for (var prop of __getOwnPropSymbols$i(source)) {
|
|
1717
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum$i.call(source, prop))
|
|
1718
|
+
target[prop] = source[prop];
|
|
1719
|
+
}
|
|
1720
|
+
return target;
|
|
1721
|
+
};
|
|
1722
|
+
const useDateRangePickerState = (_a) => {
|
|
1723
|
+
var _b = _a, {
|
|
1724
|
+
onChange
|
|
1725
|
+
} = _b, options = __objRest$d(_b, [
|
|
1726
|
+
"onChange"
|
|
1727
|
+
]);
|
|
1728
|
+
const lastPredefinedRange = React.useRef(void 0);
|
|
1729
|
+
const state = datepicker$1.useDateRangePickerState(__spreadProps$g(__spreadValues$h({}, options), {
|
|
1730
|
+
onChange: (value) => {
|
|
1731
|
+
onChange == null ? void 0 : onChange(value, lastPredefinedRange.current);
|
|
1732
|
+
lastPredefinedRange.current = void 0;
|
|
1733
|
+
}
|
|
1734
|
+
}));
|
|
1735
|
+
return __spreadProps$g(__spreadValues$h({}, state), {
|
|
1736
|
+
setDateRange: (value, predefinedRange) => {
|
|
1737
|
+
lastPredefinedRange.current = predefinedRange;
|
|
1738
|
+
state.setDateRange(value);
|
|
1739
|
+
}
|
|
1740
|
+
});
|
|
1741
|
+
};
|
|
1742
|
+
|
|
1743
|
+
var __defProp$g = Object.defineProperty;
|
|
1744
|
+
var __defProps$f = Object.defineProperties;
|
|
1745
|
+
var __getOwnPropDescs$f = Object.getOwnPropertyDescriptors;
|
|
1746
|
+
var __getOwnPropSymbols$h = Object.getOwnPropertySymbols;
|
|
1747
|
+
var __hasOwnProp$h = Object.prototype.hasOwnProperty;
|
|
1748
|
+
var __propIsEnum$h = Object.prototype.propertyIsEnumerable;
|
|
1749
|
+
var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
1750
|
+
var __spreadValues$g = (a, b) => {
|
|
1751
|
+
for (var prop in b || (b = {}))
|
|
1752
|
+
if (__hasOwnProp$h.call(b, prop))
|
|
1753
|
+
__defNormalProp$g(a, prop, b[prop]);
|
|
1754
|
+
if (__getOwnPropSymbols$h)
|
|
1755
|
+
for (var prop of __getOwnPropSymbols$h(b)) {
|
|
1756
|
+
if (__propIsEnum$h.call(b, prop))
|
|
1757
|
+
__defNormalProp$g(a, prop, b[prop]);
|
|
1758
|
+
}
|
|
1759
|
+
return a;
|
|
1760
|
+
};
|
|
1761
|
+
var __spreadProps$f = (a, b) => __defProps$f(a, __getOwnPropDescs$f(b));
|
|
1762
|
+
function DateRangeInput({
|
|
1763
|
+
dateRangePickerState,
|
|
1764
|
+
startFieldProps,
|
|
1765
|
+
endFieldProps,
|
|
1766
|
+
noClearButton = false,
|
|
1767
|
+
size = "large"
|
|
1768
|
+
}) {
|
|
1769
|
+
const startFieldRef = React.useRef(null);
|
|
1770
|
+
const endFieldRef = React.useRef(null);
|
|
1771
|
+
const formatMessage = i18n.useMessageFormatter(intlMessages);
|
|
1772
|
+
const { locale } = i18n.useLocale();
|
|
1773
|
+
const customDateFormatLocale = sapphireReact.useCustomDateFormatLocale();
|
|
1774
|
+
const startFieldState = datepicker$1.useDateFieldState(__spreadProps$f(__spreadValues$g({}, startFieldProps), {
|
|
1775
|
+
locale: customDateFormatLocale || locale,
|
|
1776
|
+
createCalendar: date.createCalendar
|
|
1777
|
+
}));
|
|
1778
|
+
const endFieldState = datepicker$1.useDateFieldState(__spreadProps$f(__spreadValues$g({}, endFieldProps), {
|
|
1779
|
+
locale: customDateFormatLocale || locale,
|
|
1780
|
+
createCalendar: date.createCalendar
|
|
1781
|
+
}));
|
|
1782
|
+
const { fieldProps: startFieldAriaProps } = datepicker.useDateField(startFieldProps, startFieldState, startFieldRef);
|
|
1783
|
+
const { fieldProps: endFieldAriaProps } = datepicker.useDateField(endFieldProps, endFieldState, endFieldRef);
|
|
1784
|
+
const clearFields = () => {
|
|
1785
|
+
segmentTypes.forEach((segmentType) => {
|
|
1786
|
+
startFieldState.clearSegment(segmentType);
|
|
1787
|
+
endFieldState.clearSegment(segmentType);
|
|
1788
|
+
});
|
|
1789
|
+
dateRangePickerState.setValue({ start: null, end: null });
|
|
1790
|
+
};
|
|
1791
|
+
return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$f(__spreadValues$g({}, startFieldAriaProps), {
|
|
1792
|
+
className: styles__default$4["default"]["sapphire-date-field__input"],
|
|
1793
|
+
ref: startFieldRef
|
|
1794
|
+
}), startFieldState.segments.map((segment, i) => /* @__PURE__ */ React__default["default"].createElement(DateSegment, {
|
|
1795
|
+
key: i,
|
|
1796
|
+
segment,
|
|
1797
|
+
state: startFieldState
|
|
1798
|
+
}))), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, {
|
|
1799
|
+
size: size == "medium" ? "m" : "l"
|
|
1800
|
+
}, /* @__PURE__ */ React__default["default"].createElement(react.ArrowRight, null)), /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$f(__spreadValues$g({}, endFieldAriaProps), {
|
|
1801
|
+
className: styles__default$4["default"]["sapphire-date-field__input"],
|
|
1802
|
+
ref: endFieldRef
|
|
1803
|
+
}), endFieldState.segments.map((segment, i) => /* @__PURE__ */ React__default["default"].createElement(DateSegment, {
|
|
1804
|
+
key: i,
|
|
1805
|
+
segment,
|
|
1806
|
+
state: endFieldState
|
|
1807
|
+
}))), !noClearButton && !startFieldProps.isReadOnly && !endFieldProps.isReadOnly && !startFieldProps.isDisabled && !endFieldProps.isDisabled && isAnyModified([
|
|
1808
|
+
...startFieldState.segments,
|
|
1809
|
+
...endFieldState.segments
|
|
1810
|
+
]) && /* @__PURE__ */ React__default["default"].createElement(DateFieldButton, {
|
|
1811
|
+
"aria-label": formatMessage("clear"),
|
|
1812
|
+
onPress: clearFields
|
|
1813
|
+
}, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, {
|
|
1814
|
+
size: size === "medium" ? "m" : "l"
|
|
1815
|
+
}, /* @__PURE__ */ React__default["default"].createElement(react.CloseCircle, null))));
|
|
1816
|
+
}
|
|
1817
|
+
|
|
1818
|
+
var __defProp$f = Object.defineProperty;
|
|
1819
|
+
var __defProps$e = Object.defineProperties;
|
|
1820
|
+
var __getOwnPropDescs$e = Object.getOwnPropertyDescriptors;
|
|
1821
|
+
var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
|
|
1822
|
+
var __hasOwnProp$g = Object.prototype.hasOwnProperty;
|
|
1823
|
+
var __propIsEnum$g = Object.prototype.propertyIsEnumerable;
|
|
1824
|
+
var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
1825
|
+
var __spreadValues$f = (a, b) => {
|
|
1826
|
+
for (var prop in b || (b = {}))
|
|
1827
|
+
if (__hasOwnProp$g.call(b, prop))
|
|
1828
|
+
__defNormalProp$f(a, prop, b[prop]);
|
|
1829
|
+
if (__getOwnPropSymbols$g)
|
|
1830
|
+
for (var prop of __getOwnPropSymbols$g(b)) {
|
|
1831
|
+
if (__propIsEnum$g.call(b, prop))
|
|
1832
|
+
__defNormalProp$f(a, prop, b[prop]);
|
|
1833
|
+
}
|
|
1834
|
+
return a;
|
|
1835
|
+
};
|
|
1836
|
+
var __spreadProps$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
|
|
1837
|
+
var __objRest$c = (source, exclude) => {
|
|
1838
|
+
var target = {};
|
|
1839
|
+
for (var prop in source)
|
|
1840
|
+
if (__hasOwnProp$g.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
1841
|
+
target[prop] = source[prop];
|
|
1842
|
+
if (source != null && __getOwnPropSymbols$g)
|
|
1843
|
+
for (var prop of __getOwnPropSymbols$g(source)) {
|
|
1844
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum$g.call(source, prop))
|
|
1845
|
+
target[prop] = source[prop];
|
|
1846
|
+
}
|
|
1847
|
+
return target;
|
|
1848
|
+
};
|
|
1849
|
+
function _DateRangeField(_a, ref) {
|
|
1850
|
+
var _b = _a, {
|
|
1851
|
+
error,
|
|
1852
|
+
note,
|
|
1853
|
+
contextualHelp,
|
|
1854
|
+
noClearButton = false,
|
|
1855
|
+
locale,
|
|
1856
|
+
showWeekNumbers,
|
|
1857
|
+
showTwoMonths,
|
|
1858
|
+
allowUnavailableDatesWithinRange,
|
|
1859
|
+
predefinedRanges,
|
|
1860
|
+
size = "large",
|
|
1861
|
+
necessityIndicator = false
|
|
1862
|
+
} = _b, otherProps = __objRest$c(_b, [
|
|
1863
|
+
"error",
|
|
1864
|
+
"note",
|
|
1865
|
+
"contextualHelp",
|
|
1866
|
+
"noClearButton",
|
|
1867
|
+
"locale",
|
|
1868
|
+
"showWeekNumbers",
|
|
1869
|
+
"showTwoMonths",
|
|
1870
|
+
"allowUnavailableDatesWithinRange",
|
|
1871
|
+
"predefinedRanges",
|
|
1872
|
+
"size",
|
|
1873
|
+
"necessityIndicator"
|
|
1874
|
+
]);
|
|
1875
|
+
sapphireReact.useThemeCheck();
|
|
1876
|
+
const groupRef = React.useRef(null);
|
|
1877
|
+
const dialogRef = React.useRef(null);
|
|
1878
|
+
const { locale: existingLocale } = i18n.useLocale();
|
|
1879
|
+
const preferredLocale = locale || existingLocale;
|
|
1880
|
+
const { styleProps } = sapphireReact.useSapphireStyleProps(otherProps);
|
|
1881
|
+
const { dialogProps } = dialog.useDialog({}, dialogRef);
|
|
1882
|
+
const state = useDateRangePickerState(__spreadValues$f(__spreadValues$f(__spreadValues$f({}, otherProps), error ? { validationState: "invalid" } : {}), allowUnavailableDatesWithinRange ? { allowsNonContiguousRanges: allowUnavailableDatesWithinRange } : {}));
|
|
1883
|
+
const {
|
|
1884
|
+
groupProps,
|
|
1885
|
+
labelProps,
|
|
1886
|
+
startFieldProps,
|
|
1887
|
+
endFieldProps,
|
|
1888
|
+
buttonProps,
|
|
1889
|
+
dialogProps: dialogPropsFromDatePicker,
|
|
1890
|
+
calendarProps,
|
|
1891
|
+
descriptionProps,
|
|
1892
|
+
errorMessageProps
|
|
1893
|
+
} = datepicker.useDateRangePicker(__spreadProps$e(__spreadValues$f({}, otherProps), {
|
|
1894
|
+
description: note,
|
|
1895
|
+
allowsNonContiguousRanges: allowUnavailableDatesWithinRange
|
|
1896
|
+
}), state, groupRef);
|
|
1897
|
+
const isMedium = size === "medium";
|
|
1898
|
+
return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field, __spreadProps$e(__spreadValues$f({}, otherProps), {
|
|
1899
|
+
noShrink: true,
|
|
1900
|
+
isDisabled: otherProps.isDisabled,
|
|
1901
|
+
error: state.validationState === "invalid",
|
|
1902
|
+
size,
|
|
1903
|
+
ref
|
|
1904
|
+
}), /* @__PURE__ */ React__default["default"].createElement(i18n.I18nProvider, {
|
|
1905
|
+
locale: preferredLocale
|
|
1906
|
+
}, otherProps.label && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Label, null, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Label, __spreadProps$e(__spreadValues$f({}, labelProps), {
|
|
1907
|
+
size,
|
|
1908
|
+
necessityIndicator: otherProps.isRequired && necessityIndicator ? "required" : !otherProps.isRequired && necessityIndicator ? "optional" : void 0,
|
|
1909
|
+
contextualHelp
|
|
1910
|
+
}), otherProps.label)), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Control, null, /* @__PURE__ */ React__default["default"].createElement("div", __spreadValues$f(__spreadProps$e(__spreadValues$f({}, groupProps), {
|
|
1911
|
+
ref: groupRef,
|
|
1912
|
+
className: clsx__default["default"](styles__default$4["default"]["sapphire-date-field"], styles__default$4["default"]["sapphire-date-field--range"], {
|
|
1913
|
+
[styles__default$4["default"]["sapphire-date-field--error"]]: state.validationState === "invalid",
|
|
1914
|
+
[styles__default$4["default"]["sapphire-date-field--medium"]]: isMedium
|
|
1915
|
+
})
|
|
1916
|
+
}), styleProps.style.width ? { style: { width: styleProps.style.width } } : {}), /* @__PURE__ */ React__default["default"].createElement(interactions.PressResponder, __spreadProps$e(__spreadValues$f({}, buttonProps), {
|
|
1917
|
+
isPressed: state.isOpen
|
|
1918
|
+
}), /* @__PURE__ */ React__default["default"].createElement(DateFieldButton, {
|
|
1919
|
+
isDisabled: otherProps.isDisabled || otherProps.isReadOnly
|
|
1920
|
+
}, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, {
|
|
1921
|
+
size: isMedium ? "m" : "l"
|
|
1922
|
+
}, /* @__PURE__ */ React__default["default"].createElement(react.Calendar, null)))), /* @__PURE__ */ React__default["default"].createElement(DateRangeInput, {
|
|
1923
|
+
dateRangePickerState: state,
|
|
1924
|
+
startFieldProps,
|
|
1925
|
+
endFieldProps,
|
|
1926
|
+
noClearButton,
|
|
1927
|
+
size
|
|
1928
|
+
}))), error !== false && (typeof error === "string" && error !== "" || note) && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Footer, null, error ? /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Note, __spreadValues$f({}, errorMessageProps), error) : note ? /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Note, __spreadValues$f({}, descriptionProps), note) : /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null)), state.isOpen && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Popover, {
|
|
1929
|
+
state,
|
|
1930
|
+
triggerRef: groupRef,
|
|
1931
|
+
placement: "bottom start"
|
|
1932
|
+
}, /* @__PURE__ */ React__default["default"].createElement("div", __spreadValues$f(__spreadValues$f({
|
|
1933
|
+
ref: dialogRef
|
|
1934
|
+
}, dialogProps), dialogPropsFromDatePicker), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.View, {
|
|
1935
|
+
padding: sapphireReact.tokens.size.spacing50
|
|
1936
|
+
}, /* @__PURE__ */ React__default["default"].createElement(RangeCalendar, __spreadProps$e(__spreadValues$f({}, calendarProps), {
|
|
1937
|
+
allowUnavailableDatesWithinRange,
|
|
1938
|
+
showWeekNumbers,
|
|
1939
|
+
showTwoMonths,
|
|
1940
|
+
predefinedRanges
|
|
1941
|
+
})))))));
|
|
1942
|
+
}
|
|
1943
|
+
const DateRangeField = React.forwardRef(_DateRangeField);
|
|
1944
|
+
|
|
1945
|
+
const isEndDateBeforeStartDate = (dateRange) => dateRange && dateRange.end && dateRange.start && dateRange.end.compare(dateRange.start) < 0;
|
|
1946
|
+
const isDateOutsideValidRange = (value, minValue, maxValue) => {
|
|
1947
|
+
if (value) {
|
|
1948
|
+
if (minValue && value.compare(minValue) < 0) {
|
|
1949
|
+
return "before";
|
|
1950
|
+
}
|
|
1951
|
+
if (maxValue && value.compare(maxValue) > 0) {
|
|
1952
|
+
return "after";
|
|
1953
|
+
}
|
|
1954
|
+
}
|
|
1955
|
+
};
|
|
1956
|
+
|
|
1957
|
+
var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
|
|
1958
|
+
var __hasOwnProp$f = Object.prototype.hasOwnProperty;
|
|
1959
|
+
var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
|
|
1960
|
+
var __objRest$b = (source, exclude) => {
|
|
1961
|
+
var target = {};
|
|
1962
|
+
for (var prop in source)
|
|
1963
|
+
if (__hasOwnProp$f.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
1964
|
+
target[prop] = source[prop];
|
|
1965
|
+
if (source != null && __getOwnPropSymbols$f)
|
|
1966
|
+
for (var prop of __getOwnPropSymbols$f(source)) {
|
|
1967
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum$f.call(source, prop))
|
|
1968
|
+
target[prop] = source[prop];
|
|
1969
|
+
}
|
|
1970
|
+
return target;
|
|
1971
|
+
};
|
|
1972
|
+
const FeedbackMessage = (_a) => {
|
|
1973
|
+
var _b = _a, {
|
|
1974
|
+
heading,
|
|
1975
|
+
body,
|
|
1976
|
+
actions,
|
|
1977
|
+
type = "neutral"
|
|
1978
|
+
} = _b, otherProps = __objRest$b(_b, [
|
|
1979
|
+
"heading",
|
|
1980
|
+
"body",
|
|
1981
|
+
"actions",
|
|
1982
|
+
"type"
|
|
1983
|
+
]);
|
|
1984
|
+
sapphireReact.useThemeCheck();
|
|
1985
|
+
const {
|
|
1986
|
+
styleProps: { style, className }
|
|
1987
|
+
} = sapphireReact.useSapphireStyleProps(otherProps);
|
|
1988
|
+
return /* @__PURE__ */ React__default["default"].createElement("div", {
|
|
1989
|
+
className: clsx__default["default"](styles__default$5["default"]["sapphire-feedback-message"], className),
|
|
1990
|
+
style
|
|
1991
|
+
}, type !== "neutral" && /* @__PURE__ */ React__default["default"].createElement("div", {
|
|
1992
|
+
className: clsx__default["default"](styles__default$5["default"]["sapphire-feedback-message__icon"], styles__default$5["default"][`sapphire-feedback-message__icon--${type}`])
|
|
1993
|
+
}, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, {
|
|
1994
|
+
size: "xl"
|
|
1995
|
+
}, type === "success" ? /* @__PURE__ */ React__default["default"].createElement(react.CheckMarkCircle, null) : /* @__PURE__ */ React__default["default"].createElement(react.AlertCircle, null))), /* @__PURE__ */ React__default["default"].createElement("div", {
|
|
1996
|
+
className: styles__default$5["default"]["sapphire-feedback-message__content"]
|
|
1997
|
+
}, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Heading, {
|
|
1998
|
+
level: 3
|
|
1999
|
+
}, heading), /* @__PURE__ */ React__default["default"].createElement("section", {
|
|
2000
|
+
className: styles__default$5["default"]["sapphire-feedback-message__body"]
|
|
2001
|
+
}, body)), actions);
|
|
2002
|
+
};
|
|
2003
|
+
|
|
2004
|
+
var __defProp$e = Object.defineProperty;
|
|
2005
|
+
var __defProps$d = Object.defineProperties;
|
|
2006
|
+
var __getOwnPropDescs$d = Object.getOwnPropertyDescriptors;
|
|
2007
|
+
var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
|
|
2008
|
+
var __hasOwnProp$e = Object.prototype.hasOwnProperty;
|
|
2009
|
+
var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
|
|
2010
|
+
var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
2011
|
+
var __spreadValues$e = (a, b) => {
|
|
2012
|
+
for (var prop in b || (b = {}))
|
|
2013
|
+
if (__hasOwnProp$e.call(b, prop))
|
|
2014
|
+
__defNormalProp$e(a, prop, b[prop]);
|
|
2015
|
+
if (__getOwnPropSymbols$e)
|
|
2016
|
+
for (var prop of __getOwnPropSymbols$e(b)) {
|
|
2017
|
+
if (__propIsEnum$e.call(b, prop))
|
|
2018
|
+
__defNormalProp$e(a, prop, b[prop]);
|
|
2019
|
+
}
|
|
2020
|
+
return a;
|
|
2021
|
+
};
|
|
2022
|
+
var __spreadProps$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
|
|
2023
|
+
const useComboBoxState = (options) => {
|
|
2024
|
+
const state = combobox.useComboBoxState(__spreadProps$d(__spreadValues$e({}, options), {
|
|
2025
|
+
defaultFilter: (textValue, query) => {
|
|
2026
|
+
if (query.length > 0) {
|
|
2027
|
+
return options.defaultFilter ? options.defaultFilter(textValue, query) : textValue.toLowerCase().includes(query.toLowerCase());
|
|
2028
|
+
} else {
|
|
2029
|
+
return false;
|
|
2030
|
+
}
|
|
2031
|
+
}
|
|
2032
|
+
}));
|
|
2033
|
+
return __spreadProps$d(__spreadValues$e({}, state), {
|
|
2034
|
+
open: (focusStrategy, triggerMode) => {
|
|
2035
|
+
if (triggerMode !== "manual") {
|
|
2036
|
+
state.open(focusStrategy, triggerMode);
|
|
2037
|
+
}
|
|
2038
|
+
}
|
|
2039
|
+
});
|
|
2040
|
+
};
|
|
2041
|
+
|
|
2042
|
+
var __defProp$d = Object.defineProperty;
|
|
2043
|
+
var __defProps$c = Object.defineProperties;
|
|
2044
|
+
var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
|
|
2045
|
+
var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
|
|
2046
|
+
var __hasOwnProp$d = Object.prototype.hasOwnProperty;
|
|
2047
|
+
var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
|
|
2048
|
+
var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
2049
|
+
var __spreadValues$d = (a, b) => {
|
|
2050
|
+
for (var prop in b || (b = {}))
|
|
2051
|
+
if (__hasOwnProp$d.call(b, prop))
|
|
2052
|
+
__defNormalProp$d(a, prop, b[prop]);
|
|
2053
|
+
if (__getOwnPropSymbols$d)
|
|
2054
|
+
for (var prop of __getOwnPropSymbols$d(b)) {
|
|
2055
|
+
if (__propIsEnum$d.call(b, prop))
|
|
2056
|
+
__defNormalProp$d(a, prop, b[prop]);
|
|
2057
|
+
}
|
|
2058
|
+
return a;
|
|
2059
|
+
};
|
|
2060
|
+
var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
|
|
2061
|
+
const SearchField = React__default["default"].forwardRef(function SearchField2(props, forwardedRef) {
|
|
2062
|
+
var _a;
|
|
2063
|
+
sapphireReact.useThemeCheck();
|
|
2064
|
+
const inputRef = utils$1.useObjectRef(forwardedRef);
|
|
2065
|
+
const buttonRef = React.useRef(null);
|
|
2066
|
+
const listBoxRef = utils.useFocusableRef(null);
|
|
2067
|
+
const popoverRef = React.useRef(null);
|
|
2068
|
+
const triggerRef = utils.useFocusableRef(null);
|
|
2069
|
+
const {
|
|
2070
|
+
styleProps: { style, className }
|
|
2071
|
+
} = sapphireReact.useSapphireStyleProps(props);
|
|
2072
|
+
const state = useComboBoxState(__spreadProps$c(__spreadValues$d({}, props), {
|
|
2073
|
+
inputValue: props.value,
|
|
2074
|
+
defaultInputValue: props.defaultValue,
|
|
2075
|
+
onInputChange: props.onChange,
|
|
2076
|
+
allowsEmptyCollection: false,
|
|
2077
|
+
allowsCustomValue: true,
|
|
2078
|
+
shouldCloseOnBlur: true
|
|
2079
|
+
}));
|
|
2080
|
+
const { inputProps: comboBoxInputProps, listBoxProps } = combobox$1.useComboBox(__spreadProps$c(__spreadValues$d({}, props), {
|
|
2081
|
+
inputRef,
|
|
2082
|
+
listBoxRef,
|
|
2083
|
+
popoverRef
|
|
2084
|
+
}), state);
|
|
2085
|
+
const searchProps = {
|
|
2086
|
+
"aria-label": props["aria-label"],
|
|
2087
|
+
"aria-labelledby": props["aria-labelledby"],
|
|
2088
|
+
isDisabled: props.isDisabled,
|
|
2089
|
+
isReadOnly: props.isReadOnly,
|
|
2090
|
+
value: state.inputValue,
|
|
2091
|
+
onSubmit: (value) => {
|
|
2092
|
+
var _a2;
|
|
2093
|
+
if (!state.selectionManager.isFocused) {
|
|
2094
|
+
(_a2 = props == null ? void 0 : props.onSubmit) == null ? void 0 : _a2.call(props, value);
|
|
2095
|
+
}
|
|
2096
|
+
},
|
|
2097
|
+
onClear: () => {
|
|
2098
|
+
var _a2;
|
|
2099
|
+
state.setInputValue("");
|
|
2100
|
+
(_a2 = props.onClear) == null ? void 0 : _a2.call(props);
|
|
2101
|
+
}
|
|
2102
|
+
};
|
|
2103
|
+
const searchFieldState = searchfield.useSearchFieldState(searchProps);
|
|
2104
|
+
const { clearButtonProps, inputProps: searchFieldInputProps } = searchfield$1.useSearchField(searchProps, searchFieldState, inputRef);
|
|
2105
|
+
const { buttonProps } = sapphireReact.useButton(__spreadProps$c(__spreadValues$d({}, clearButtonProps), {
|
|
2106
|
+
elementType: "div"
|
|
2107
|
+
}), buttonRef);
|
|
2108
|
+
return /* @__PURE__ */ React__default["default"].createElement("div", {
|
|
2109
|
+
className: clsx__default["default"](styles__default$6["default"]["sapphire-search-field"], className, {
|
|
2110
|
+
[styles__default$6["default"]["sapphire-search-field--medium"]]: props.size === "medium",
|
|
2111
|
+
[styles__default$6["default"]["sapphire-search-field--surface-secondary"]]: props.surface === "secondary",
|
|
2112
|
+
[styles__default$6["default"]["is-disabled"]]: props.isDisabled
|
|
2113
|
+
}),
|
|
2114
|
+
style,
|
|
2115
|
+
ref: triggerRef
|
|
2116
|
+
}, /* @__PURE__ */ React__default["default"].createElement("span", {
|
|
2117
|
+
className: styles__default$6["default"]["sapphire-search-field__icon"]
|
|
2118
|
+
}, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, {
|
|
2119
|
+
size: props.size === "medium" ? "m" : "l"
|
|
2120
|
+
}, /* @__PURE__ */ React__default["default"].createElement(react.Search, null))), /* @__PURE__ */ React__default["default"].createElement("input", __spreadProps$c(__spreadValues$d({}, utils$1.mergeProps(comboBoxInputProps, searchFieldInputProps)), {
|
|
2121
|
+
ref: inputRef,
|
|
2122
|
+
className: clsx__default["default"](styles__default$6["default"]["sapphire-search-field__input"], {
|
|
2123
|
+
[styles__default$6["default"]["sapphire-search-field__input--empty"]]: state.inputValue.length === 0
|
|
2124
|
+
})
|
|
2125
|
+
})), /* @__PURE__ */ React__default["default"].createElement("div", __spreadValues$d({
|
|
2126
|
+
ref: buttonRef,
|
|
2127
|
+
className: styles__default$6["default"]["sapphire-search-field__button"]
|
|
2128
|
+
}, buttonProps), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, {
|
|
2129
|
+
size: props.size === "medium" ? "m" : "l"
|
|
2130
|
+
}, /* @__PURE__ */ React__default["default"].createElement(react.CloseCircle, null))), state.isOpen && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.ListBoxPopover, {
|
|
2131
|
+
state,
|
|
2132
|
+
triggerRef,
|
|
2133
|
+
popoverRef,
|
|
2134
|
+
listBoxRef,
|
|
2135
|
+
listBoxProps,
|
|
2136
|
+
selectWidth: ((_a = triggerRef.current) == null ? void 0 : _a.offsetWidth) || 0,
|
|
2137
|
+
size: props.size,
|
|
2138
|
+
disableSelectedStyles: true,
|
|
2139
|
+
isNonModal: true
|
|
2140
|
+
}, props.children || []));
|
|
2141
|
+
});
|
|
2142
|
+
|
|
2143
|
+
var __defProp$c = Object.defineProperty;
|
|
2144
|
+
var __defProps$b = Object.defineProperties;
|
|
2145
|
+
var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
|
|
2146
|
+
var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
|
|
2147
|
+
var __hasOwnProp$c = Object.prototype.hasOwnProperty;
|
|
2148
|
+
var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
|
|
2149
|
+
var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
2150
|
+
var __spreadValues$c = (a, b) => {
|
|
2151
|
+
for (var prop in b || (b = {}))
|
|
2152
|
+
if (__hasOwnProp$c.call(b, prop))
|
|
2153
|
+
__defNormalProp$c(a, prop, b[prop]);
|
|
2154
|
+
if (__getOwnPropSymbols$c)
|
|
2155
|
+
for (var prop of __getOwnPropSymbols$c(b)) {
|
|
2156
|
+
if (__propIsEnum$c.call(b, prop))
|
|
2157
|
+
__defNormalProp$c(a, prop, b[prop]);
|
|
2158
|
+
}
|
|
2159
|
+
return a;
|
|
2160
|
+
};
|
|
2161
|
+
var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
|
|
2162
|
+
var __objRest$a = (source, exclude) => {
|
|
2163
|
+
var target = {};
|
|
2164
|
+
for (var prop in source)
|
|
2165
|
+
if (__hasOwnProp$c.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
2166
|
+
target[prop] = source[prop];
|
|
2167
|
+
if (source != null && __getOwnPropSymbols$c)
|
|
2168
|
+
for (var prop of __getOwnPropSymbols$c(source)) {
|
|
2169
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum$c.call(source, prop))
|
|
2170
|
+
target[prop] = source[prop];
|
|
2171
|
+
}
|
|
2172
|
+
return target;
|
|
2173
|
+
};
|
|
2174
|
+
const Toast = (_a) => {
|
|
2175
|
+
var _b = _a, { state } = _b, props = __objRest$a(_b, ["state"]);
|
|
2176
|
+
const {
|
|
2177
|
+
styleProps: { style, className }
|
|
2178
|
+
} = sapphireReact.useSapphireStyleProps(props);
|
|
2179
|
+
const ref = React.useRef(null);
|
|
2180
|
+
const { toastProps, titleProps, closeButtonProps } = toast.useToast(props, state, ref);
|
|
2181
|
+
return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$b(__spreadValues$c({}, toastProps), {
|
|
2182
|
+
className: clsx__default["default"](styles__default$7["default"]["sapphire-toast"], props.toast.animation ? styles__default$7["default"][`sapphire-toast--${props.toast.animation}`] : {}, className),
|
|
2183
|
+
style,
|
|
2184
|
+
ref,
|
|
2185
|
+
onAnimationEnd: () => {
|
|
2186
|
+
if (props.toast.animation === "exiting") {
|
|
2187
|
+
state.remove(props.toast.key);
|
|
2188
|
+
}
|
|
2189
|
+
}
|
|
2190
|
+
}), /* @__PURE__ */ React__default["default"].createElement("div", {
|
|
2191
|
+
className: clsx__default["default"](styles__default$7["default"]["sapphire-toast__content"])
|
|
2192
|
+
}, /* @__PURE__ */ React__default["default"].createElement("div", __spreadValues$c({}, titleProps), props.toast.content), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.IconButton, __spreadProps$b(__spreadValues$c({}, closeButtonProps), {
|
|
2193
|
+
"aria-label": "Close",
|
|
2194
|
+
size: "small",
|
|
2195
|
+
variant: "tertiary",
|
|
2196
|
+
appearance: "ghost"
|
|
2197
|
+
}), /* @__PURE__ */ React__default["default"].createElement(react.Close, null))));
|
|
2198
|
+
};
|
|
2199
|
+
|
|
2200
|
+
var __defProp$b = Object.defineProperty;
|
|
2201
|
+
var __defProps$a = Object.defineProperties;
|
|
2202
|
+
var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
|
|
2203
|
+
var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
|
|
2204
|
+
var __hasOwnProp$b = Object.prototype.hasOwnProperty;
|
|
2205
|
+
var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
|
|
2206
|
+
var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
2207
|
+
var __spreadValues$b = (a, b) => {
|
|
2208
|
+
for (var prop in b || (b = {}))
|
|
2209
|
+
if (__hasOwnProp$b.call(b, prop))
|
|
2210
|
+
__defNormalProp$b(a, prop, b[prop]);
|
|
2211
|
+
if (__getOwnPropSymbols$b)
|
|
2212
|
+
for (var prop of __getOwnPropSymbols$b(b)) {
|
|
2213
|
+
if (__propIsEnum$b.call(b, prop))
|
|
2214
|
+
__defNormalProp$b(a, prop, b[prop]);
|
|
2215
|
+
}
|
|
2216
|
+
return a;
|
|
2217
|
+
};
|
|
2218
|
+
var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
|
|
2219
|
+
var __objRest$9 = (source, exclude) => {
|
|
2220
|
+
var target = {};
|
|
2221
|
+
for (var prop in source)
|
|
2222
|
+
if (__hasOwnProp$b.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
2223
|
+
target[prop] = source[prop];
|
|
2224
|
+
if (source != null && __getOwnPropSymbols$b)
|
|
2225
|
+
for (var prop of __getOwnPropSymbols$b(source)) {
|
|
2226
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum$b.call(source, prop))
|
|
2227
|
+
target[prop] = source[prop];
|
|
2228
|
+
}
|
|
2229
|
+
return target;
|
|
2230
|
+
};
|
|
2231
|
+
const ToastRegion = (_a) => {
|
|
2232
|
+
var _b = _a, { state } = _b, props = __objRest$9(_b, ["state"]);
|
|
2233
|
+
const ref = React.useRef(null);
|
|
2234
|
+
const { regionProps } = toast.useToastRegion(props, state, ref);
|
|
2235
|
+
return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.SapphireOverlayContainer, null, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.ThemeRoot, {
|
|
2236
|
+
contrast: true
|
|
2237
|
+
}, /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$a(__spreadValues$b({}, regionProps), {
|
|
2238
|
+
ref,
|
|
2239
|
+
className: styles__default$7["default"]["sapphire-toast-container"],
|
|
2240
|
+
style: { zIndex: 200 }
|
|
2241
|
+
}), state.visibleToasts.map((toast) => /* @__PURE__ */ React__default["default"].createElement(Toast, __spreadProps$a(__spreadValues$b({}, props), {
|
|
2242
|
+
key: toast.key,
|
|
2243
|
+
toast,
|
|
2244
|
+
state
|
|
2245
|
+
}))))));
|
|
2246
|
+
};
|
|
2247
|
+
|
|
2248
|
+
const ToastContext = React__default["default"].createContext(null);
|
|
2249
|
+
const useToastContext = () => {
|
|
2250
|
+
const context = React.useContext(ToastContext);
|
|
2251
|
+
return context;
|
|
2252
|
+
};
|
|
2253
|
+
|
|
2254
|
+
var __defProp$a = Object.defineProperty;
|
|
2255
|
+
var __defProps$9 = Object.defineProperties;
|
|
2256
|
+
var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
|
|
2257
|
+
var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
|
|
2258
|
+
var __hasOwnProp$a = Object.prototype.hasOwnProperty;
|
|
2259
|
+
var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
|
|
2260
|
+
var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
2261
|
+
var __spreadValues$a = (a, b) => {
|
|
2262
|
+
for (var prop in b || (b = {}))
|
|
2263
|
+
if (__hasOwnProp$a.call(b, prop))
|
|
2264
|
+
__defNormalProp$a(a, prop, b[prop]);
|
|
2265
|
+
if (__getOwnPropSymbols$a)
|
|
2266
|
+
for (var prop of __getOwnPropSymbols$a(b)) {
|
|
2267
|
+
if (__propIsEnum$a.call(b, prop))
|
|
2268
|
+
__defNormalProp$a(a, prop, b[prop]);
|
|
2269
|
+
}
|
|
2270
|
+
return a;
|
|
2271
|
+
};
|
|
2272
|
+
var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
|
|
2273
|
+
var __objRest$8 = (source, exclude) => {
|
|
2274
|
+
var target = {};
|
|
2275
|
+
for (var prop in source)
|
|
2276
|
+
if (__hasOwnProp$a.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
2277
|
+
target[prop] = source[prop];
|
|
2278
|
+
if (source != null && __getOwnPropSymbols$a)
|
|
2279
|
+
for (var prop of __getOwnPropSymbols$a(source)) {
|
|
2280
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum$a.call(source, prop))
|
|
2281
|
+
target[prop] = source[prop];
|
|
2282
|
+
}
|
|
2283
|
+
return target;
|
|
2284
|
+
};
|
|
2285
|
+
const ToastProvider = (_a) => {
|
|
2286
|
+
var _b = _a, { children } = _b, props = __objRest$8(_b, ["children"]);
|
|
2287
|
+
sapphireReact.useThemeCheck();
|
|
2288
|
+
const state = toast$1.useToastState({
|
|
2289
|
+
maxVisibleToasts: 1,
|
|
2290
|
+
hasExitAnimation: true
|
|
2291
|
+
});
|
|
2292
|
+
return /* @__PURE__ */ React__default["default"].createElement(ToastContext.Provider, {
|
|
2293
|
+
value: state
|
|
2294
|
+
}, children, state.visibleToasts.length > 0 && /* @__PURE__ */ React__default["default"].createElement(ToastRegion, __spreadProps$9(__spreadValues$a({}, props), {
|
|
2295
|
+
state
|
|
2296
|
+
})));
|
|
2297
|
+
};
|
|
2298
|
+
|
|
2299
|
+
const useShowToast = () => {
|
|
2300
|
+
const toastState = useToastContext();
|
|
2301
|
+
if (!toastState) {
|
|
2302
|
+
throw new Error('"useShowToast" should be used inside a <ToastProvider>.');
|
|
2303
|
+
}
|
|
2304
|
+
return (content, options) => {
|
|
2305
|
+
const { onClose, timeout = 3e3 } = options || {};
|
|
2306
|
+
toastState.add(content, { onClose, timeout });
|
|
2307
|
+
};
|
|
2308
|
+
};
|
|
2309
|
+
|
|
2310
|
+
var __defProp$9 = Object.defineProperty;
|
|
2311
|
+
var __defProps$8 = Object.defineProperties;
|
|
2312
|
+
var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
|
|
2313
|
+
var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
|
|
2314
|
+
var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
|
|
2315
|
+
var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
|
|
2316
|
+
var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
2317
|
+
var __spreadValues$9 = (a, b) => {
|
|
2318
|
+
for (var prop in b || (b = {}))
|
|
2319
|
+
if (__hasOwnProp$9.call(b, prop))
|
|
2320
|
+
__defNormalProp$9(a, prop, b[prop]);
|
|
2321
|
+
if (__getOwnPropSymbols$9)
|
|
2322
|
+
for (var prop of __getOwnPropSymbols$9(b)) {
|
|
2323
|
+
if (__propIsEnum$9.call(b, prop))
|
|
2324
|
+
__defNormalProp$9(a, prop, b[prop]);
|
|
2325
|
+
}
|
|
2326
|
+
return a;
|
|
2327
|
+
};
|
|
2328
|
+
var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
|
|
2329
|
+
function useTreeState(props) {
|
|
2330
|
+
const state = tree.useTreeState(props);
|
|
2331
|
+
const onToggle = (key) => {
|
|
2332
|
+
state.setExpandedKeys(toggleKey(state.expandedKeys, key, props.expansionMode));
|
|
2333
|
+
};
|
|
2334
|
+
return __spreadProps$8(__spreadValues$9({}, state), { toggleKey: onToggle });
|
|
2335
|
+
}
|
|
2336
|
+
function toggleKey(set, key, expansionMode = "multiple") {
|
|
2337
|
+
const res = new Set(set);
|
|
2338
|
+
if (res.has(key)) {
|
|
2339
|
+
res.delete(key);
|
|
2340
|
+
} else {
|
|
2341
|
+
if (expansionMode === "single")
|
|
2342
|
+
res.clear();
|
|
2343
|
+
res.add(key);
|
|
2344
|
+
}
|
|
2345
|
+
return res;
|
|
2346
|
+
}
|
|
2347
|
+
|
|
2348
|
+
var __defProp$8 = Object.defineProperty;
|
|
2349
|
+
var __defProps$7 = Object.defineProperties;
|
|
2350
|
+
var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
|
|
2351
|
+
var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
|
|
2352
|
+
var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
|
|
2353
|
+
var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
|
|
2354
|
+
var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
2355
|
+
var __spreadValues$8 = (a, b) => {
|
|
2356
|
+
for (var prop in b || (b = {}))
|
|
2357
|
+
if (__hasOwnProp$8.call(b, prop))
|
|
2358
|
+
__defNormalProp$8(a, prop, b[prop]);
|
|
2359
|
+
if (__getOwnPropSymbols$8)
|
|
2360
|
+
for (var prop of __getOwnPropSymbols$8(b)) {
|
|
2361
|
+
if (__propIsEnum$8.call(b, prop))
|
|
2362
|
+
__defNormalProp$8(a, prop, b[prop]);
|
|
2363
|
+
}
|
|
2364
|
+
return a;
|
|
2365
|
+
};
|
|
2366
|
+
var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
|
|
2367
|
+
function _AccordionItem(props) {
|
|
2368
|
+
const { state, item } = props;
|
|
2369
|
+
const isOpen = state.expandedKeys.has(item.key);
|
|
2370
|
+
const isDisabled = state.disabledKeys.has(item.key);
|
|
2371
|
+
const { isHovered, hoverProps } = interactions.useHover({ isDisabled });
|
|
2372
|
+
const { pressProps, isPressed } = interactions.usePress({ isDisabled });
|
|
2373
|
+
const { focusProps, isFocusVisible } = focus.useFocusRing();
|
|
2374
|
+
const ref = React.useRef(null);
|
|
2375
|
+
const { buttonProps, regionProps } = accordion.useAccordionItem(props, state, ref);
|
|
2376
|
+
return /* @__PURE__ */ React__default["default"].createElement("div", {
|
|
2377
|
+
className: clsx__default["default"](styles__default$8["default"]["sapphire-accordion__item"], {
|
|
2378
|
+
[styles__default$8["default"]["sapphire-accordion__item--open"]]: isOpen,
|
|
2379
|
+
[styles__default$8["default"]["is-disabled"]]: isDisabled
|
|
2380
|
+
})
|
|
2381
|
+
}, /* @__PURE__ */ React__default["default"].createElement("div", {
|
|
2382
|
+
role: "heading",
|
|
2383
|
+
"aria-level": props.headerLevel
|
|
2384
|
+
}, /* @__PURE__ */ React__default["default"].createElement("button", __spreadProps$7(__spreadValues$8({}, utils$1.mergeProps(buttonProps, hoverProps, pressProps, focusProps)), {
|
|
2385
|
+
"aria-disabled": isDisabled,
|
|
2386
|
+
ref,
|
|
2387
|
+
className: clsx__default["default"](styles__default$8["default"]["sapphire-accordion__item-header"], styles__default$8["default"]["js-focus"], styles__default$8["default"]["js-hover"], {
|
|
2388
|
+
[styles__default$8["default"]["is-focus"]]: isFocusVisible,
|
|
2389
|
+
[styles__default$8["default"]["is-hover"]]: isHovered,
|
|
2390
|
+
[styles__default$8["default"]["is-active"]]: isPressed
|
|
2391
|
+
})
|
|
2392
|
+
}), item.props.heading, /* @__PURE__ */ React__default["default"].createElement("div", {
|
|
2393
|
+
className: clsx__default["default"](styles__default$8["default"]["sapphire-accordion__item-arrow"])
|
|
2394
|
+
}, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, null, /* @__PURE__ */ React__default["default"].createElement(react.ChevronDown, null))))), /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$7(__spreadValues$8({}, regionProps), {
|
|
2395
|
+
"aria-hidden": !isOpen,
|
|
2396
|
+
className: clsx__default["default"](styles__default$8["default"]["sapphire-accordion__item-content-wrapper"])
|
|
2397
|
+
}), /* @__PURE__ */ React__default["default"].createElement("div", {
|
|
2398
|
+
className: clsx__default["default"](styles__default$8["default"]["sapphire-accordion__item-content"])
|
|
2399
|
+
}, item.props.children)));
|
|
2400
|
+
}
|
|
2401
|
+
const AccordionItem = collections.Item;
|
|
2402
|
+
|
|
2403
|
+
var __defProp$7 = Object.defineProperty;
|
|
2404
|
+
var __defProps$6 = Object.defineProperties;
|
|
2405
|
+
var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
|
|
2406
|
+
var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
|
|
2407
|
+
var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
|
|
2408
|
+
var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
|
|
2409
|
+
var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
2410
|
+
var __spreadValues$7 = (a, b) => {
|
|
2411
|
+
for (var prop in b || (b = {}))
|
|
2412
|
+
if (__hasOwnProp$7.call(b, prop))
|
|
2413
|
+
__defNormalProp$7(a, prop, b[prop]);
|
|
2414
|
+
if (__getOwnPropSymbols$7)
|
|
2415
|
+
for (var prop of __getOwnPropSymbols$7(b)) {
|
|
2416
|
+
if (__propIsEnum$7.call(b, prop))
|
|
2417
|
+
__defNormalProp$7(a, prop, b[prop]);
|
|
2418
|
+
}
|
|
2419
|
+
return a;
|
|
2420
|
+
};
|
|
2421
|
+
var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
|
|
2422
|
+
var __objRest$7 = (source, exclude) => {
|
|
2423
|
+
var target = {};
|
|
2424
|
+
for (var prop in source)
|
|
2425
|
+
if (__hasOwnProp$7.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
2426
|
+
target[prop] = source[prop];
|
|
2427
|
+
if (source != null && __getOwnPropSymbols$7)
|
|
2428
|
+
for (var prop of __getOwnPropSymbols$7(source)) {
|
|
2429
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum$7.call(source, prop))
|
|
2430
|
+
target[prop] = source[prop];
|
|
2431
|
+
}
|
|
2432
|
+
return target;
|
|
2433
|
+
};
|
|
2434
|
+
const _Accordion$1 = (_a, ref) => {
|
|
2435
|
+
var _b = _a, {
|
|
2436
|
+
expansionMode = "multiple",
|
|
2437
|
+
headerLevel = 5,
|
|
2438
|
+
hideLastDivider = false
|
|
2439
|
+
} = _b, props = __objRest$7(_b, [
|
|
2440
|
+
"expansionMode",
|
|
2441
|
+
"headerLevel",
|
|
2442
|
+
"hideLastDivider"
|
|
2443
|
+
]);
|
|
2444
|
+
sapphireReact.useThemeCheck();
|
|
2445
|
+
const { styleProps } = sapphireReact.useSapphireStyleProps(props);
|
|
2446
|
+
const state = useTreeState(__spreadProps$6(__spreadValues$7({}, props), { expansionMode }));
|
|
2447
|
+
const forwardedRef = utils$1.useObjectRef(ref);
|
|
2448
|
+
const { accordionProps } = accordion.useAccordion(props, state, forwardedRef);
|
|
2449
|
+
return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$6(__spreadValues$7({}, utils$1.mergeProps(accordionProps, utils$1.filterDOMProps(props, { labelable: true }))), {
|
|
2450
|
+
className: clsx__default["default"](styles__default$8["default"]["sapphire-accordion"], {
|
|
2451
|
+
[styles__default$8["default"]["sapphire-accordion--without-last-divider"]]: hideLastDivider
|
|
2452
|
+
}, styleProps.className),
|
|
2453
|
+
ref: forwardedRef,
|
|
2454
|
+
style: styleProps.style
|
|
2455
|
+
}), [...state.collection].map((item) => /* @__PURE__ */ React__default["default"].createElement(_AccordionItem, {
|
|
2456
|
+
headerLevel,
|
|
2457
|
+
key: item.key,
|
|
2458
|
+
item,
|
|
2459
|
+
state
|
|
2460
|
+
})));
|
|
2461
|
+
};
|
|
2462
|
+
const Accordion = React.forwardRef(_Accordion$1);
|
|
2463
|
+
|
|
2464
|
+
var __defProp$6 = Object.defineProperty;
|
|
2465
|
+
var __defProps$5 = Object.defineProperties;
|
|
2466
|
+
var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
|
|
2467
|
+
var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
|
|
2468
|
+
var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
|
|
2469
|
+
var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
|
|
2470
|
+
var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
2471
|
+
var __spreadValues$6 = (a, b) => {
|
|
2472
|
+
for (var prop in b || (b = {}))
|
|
2473
|
+
if (__hasOwnProp$6.call(b, prop))
|
|
2474
|
+
__defNormalProp$6(a, prop, b[prop]);
|
|
2475
|
+
if (__getOwnPropSymbols$6)
|
|
2476
|
+
for (var prop of __getOwnPropSymbols$6(b)) {
|
|
2477
|
+
if (__propIsEnum$6.call(b, prop))
|
|
2478
|
+
__defNormalProp$6(a, prop, b[prop]);
|
|
2479
|
+
}
|
|
2480
|
+
return a;
|
|
2481
|
+
};
|
|
2482
|
+
var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
|
|
2483
|
+
var __objRest$6 = (source, exclude) => {
|
|
2484
|
+
var target = {};
|
|
2485
|
+
for (var prop in source)
|
|
2486
|
+
if (__hasOwnProp$6.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
2487
|
+
target[prop] = source[prop];
|
|
2488
|
+
if (source != null && __getOwnPropSymbols$6)
|
|
2489
|
+
for (var prop of __getOwnPropSymbols$6(source)) {
|
|
2490
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum$6.call(source, prop))
|
|
2491
|
+
target[prop] = source[prop];
|
|
2492
|
+
}
|
|
2493
|
+
return target;
|
|
2494
|
+
};
|
|
2495
|
+
const AccordionHeading = (_a) => {
|
|
2496
|
+
var _b = _a, {
|
|
2497
|
+
children
|
|
2498
|
+
} = _b, props = __objRest$6(_b, [
|
|
2499
|
+
"children"
|
|
2500
|
+
]);
|
|
2501
|
+
return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$5(__spreadValues$6({}, utils$1.filterDOMProps(props)), {
|
|
2502
|
+
className: clsx__default["default"](styles__default$8["default"]["sapphire-accordion__item-heading"])
|
|
2503
|
+
}), children);
|
|
2504
|
+
};
|
|
2505
|
+
|
|
2506
|
+
const _Accordion = Object.assign(Accordion, {
|
|
2507
|
+
Heading: AccordionHeading,
|
|
2508
|
+
Item: AccordionItem
|
|
2509
|
+
});
|
|
2510
|
+
|
|
2511
|
+
var __defProp$5 = Object.defineProperty;
|
|
2512
|
+
var __defProps$4 = Object.defineProperties;
|
|
2513
|
+
var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
|
|
2514
|
+
var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
|
|
2515
|
+
var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
|
|
2516
|
+
var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
|
|
2517
|
+
var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
2518
|
+
var __spreadValues$5 = (a, b) => {
|
|
2519
|
+
for (var prop in b || (b = {}))
|
|
2520
|
+
if (__hasOwnProp$5.call(b, prop))
|
|
2521
|
+
__defNormalProp$5(a, prop, b[prop]);
|
|
2522
|
+
if (__getOwnPropSymbols$5)
|
|
2523
|
+
for (var prop of __getOwnPropSymbols$5(b)) {
|
|
2524
|
+
if (__propIsEnum$5.call(b, prop))
|
|
2525
|
+
__defNormalProp$5(a, prop, b[prop]);
|
|
2526
|
+
}
|
|
2527
|
+
return a;
|
|
2528
|
+
};
|
|
2529
|
+
var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
|
|
2530
|
+
var __objRest$5 = (source, exclude) => {
|
|
2531
|
+
var target = {};
|
|
2532
|
+
for (var prop in source)
|
|
2533
|
+
if (__hasOwnProp$5.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
2534
|
+
target[prop] = source[prop];
|
|
2535
|
+
if (source != null && __getOwnPropSymbols$5)
|
|
2536
|
+
for (var prop of __getOwnPropSymbols$5(source)) {
|
|
2537
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum$5.call(source, prop))
|
|
2538
|
+
target[prop] = source[prop];
|
|
2539
|
+
}
|
|
2540
|
+
return target;
|
|
2541
|
+
};
|
|
2542
|
+
const Heading = React.forwardRef(function Heading2(props, ref) {
|
|
2543
|
+
sapphireReact.useThemeCheck();
|
|
2544
|
+
const domProps = utils$1.filterDOMProps(props);
|
|
2545
|
+
const _a = props, { children, level, elementType } = _a, otherProps = __objRest$5(_a, ["children", "level", "elementType"]);
|
|
2546
|
+
const { styleProps } = sapphireReact.useTextStyleProps(otherProps);
|
|
2547
|
+
const domRef = utils.useDOMRef(ref);
|
|
2548
|
+
const HeadingTag = elementType ? elementType : `h${level}`;
|
|
2549
|
+
return /* @__PURE__ */ React__default["default"].createElement(HeadingTag, __spreadProps$4(__spreadValues$5(__spreadValues$5({}, domProps), styleProps), {
|
|
2550
|
+
className: clsx__default["default"](styles__default$9["default"]["sapphire-text"], styles__default$9["default"][`sapphire-text--heading-${level}`], styleProps.className, {
|
|
2551
|
+
[styles__default$9["default"]["sapphire-text--heading-alternative"]]: props.fontVariant === "alternative"
|
|
2552
|
+
}),
|
|
2553
|
+
ref: domRef
|
|
2554
|
+
}), children);
|
|
2555
|
+
});
|
|
2556
|
+
|
|
2557
|
+
var __defProp$4 = Object.defineProperty;
|
|
2558
|
+
var __defProps$3 = Object.defineProperties;
|
|
2559
|
+
var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
|
|
2560
|
+
var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
|
|
2561
|
+
var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
|
|
2562
|
+
var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
|
|
2563
|
+
var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
2564
|
+
var __spreadValues$4 = (a, b) => {
|
|
2565
|
+
for (var prop in b || (b = {}))
|
|
2566
|
+
if (__hasOwnProp$4.call(b, prop))
|
|
2567
|
+
__defNormalProp$4(a, prop, b[prop]);
|
|
2568
|
+
if (__getOwnPropSymbols$4)
|
|
2569
|
+
for (var prop of __getOwnPropSymbols$4(b)) {
|
|
2570
|
+
if (__propIsEnum$4.call(b, prop))
|
|
2571
|
+
__defNormalProp$4(a, prop, b[prop]);
|
|
2572
|
+
}
|
|
2573
|
+
return a;
|
|
2574
|
+
};
|
|
2575
|
+
var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
|
|
2576
|
+
var __objRest$4 = (source, exclude) => {
|
|
2577
|
+
var target = {};
|
|
2578
|
+
for (var prop in source)
|
|
2579
|
+
if (__hasOwnProp$4.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
2580
|
+
target[prop] = source[prop];
|
|
2581
|
+
if (source != null && __getOwnPropSymbols$4)
|
|
2582
|
+
for (var prop of __getOwnPropSymbols$4(source)) {
|
|
2583
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum$4.call(source, prop))
|
|
2584
|
+
target[prop] = source[prop];
|
|
2585
|
+
}
|
|
2586
|
+
return target;
|
|
2587
|
+
};
|
|
2588
|
+
const Subheading = React.forwardRef(function Subheading2(props, ref) {
|
|
2589
|
+
sapphireReact.useThemeCheck();
|
|
2590
|
+
const _a = props, {
|
|
2591
|
+
children,
|
|
2592
|
+
level = 1,
|
|
2593
|
+
elementType: CustomElement = "div",
|
|
2594
|
+
isBold = false
|
|
2595
|
+
} = _a, otherProps = __objRest$4(_a, [
|
|
2596
|
+
"children",
|
|
2597
|
+
"level",
|
|
2598
|
+
"elementType",
|
|
2599
|
+
"isBold"
|
|
2600
|
+
]);
|
|
2601
|
+
const { styleProps } = sapphireReact.useTextStyleProps(otherProps);
|
|
2602
|
+
const levelClassName = `sapphire-text--subheading-${level}`;
|
|
2603
|
+
return /* @__PURE__ */ React__default["default"].createElement(CustomElement, __spreadProps$3(__spreadValues$4(__spreadValues$4({}, utils$1.filterDOMProps(props)), styleProps), {
|
|
2604
|
+
className: clsx__default["default"](styleProps.className, styles__default$9["default"]["sapphire-text"], styles__default$9["default"][levelClassName], {
|
|
2605
|
+
[styles__default$9["default"]["sapphire-text--strong"]]: isBold
|
|
2606
|
+
}),
|
|
2607
|
+
style: styleProps.style,
|
|
2608
|
+
ref
|
|
2609
|
+
}), children);
|
|
2610
|
+
});
|
|
2611
|
+
|
|
2612
|
+
var __defProp$3 = Object.defineProperty;
|
|
2613
|
+
var __defProps$2 = Object.defineProperties;
|
|
2614
|
+
var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
|
|
2615
|
+
var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
|
|
2616
|
+
var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
|
|
2617
|
+
var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
|
|
2618
|
+
var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
2619
|
+
var __spreadValues$3 = (a, b) => {
|
|
2620
|
+
for (var prop in b || (b = {}))
|
|
2621
|
+
if (__hasOwnProp$3.call(b, prop))
|
|
2622
|
+
__defNormalProp$3(a, prop, b[prop]);
|
|
2623
|
+
if (__getOwnPropSymbols$3)
|
|
2624
|
+
for (var prop of __getOwnPropSymbols$3(b)) {
|
|
2625
|
+
if (__propIsEnum$3.call(b, prop))
|
|
2626
|
+
__defNormalProp$3(a, prop, b[prop]);
|
|
2627
|
+
}
|
|
2628
|
+
return a;
|
|
2629
|
+
};
|
|
2630
|
+
var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
|
|
2631
|
+
var __objRest$3 = (source, exclude) => {
|
|
2632
|
+
var target = {};
|
|
2633
|
+
for (var prop in source)
|
|
2634
|
+
if (__hasOwnProp$3.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
2635
|
+
target[prop] = source[prop];
|
|
2636
|
+
if (source != null && __getOwnPropSymbols$3)
|
|
2637
|
+
for (var prop of __getOwnPropSymbols$3(source)) {
|
|
2638
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum$3.call(source, prop))
|
|
2639
|
+
target[prop] = source[prop];
|
|
2640
|
+
}
|
|
2641
|
+
return target;
|
|
2642
|
+
};
|
|
2643
|
+
const Body = React.forwardRef(function Body2(props, ref) {
|
|
2644
|
+
sapphireReact.useThemeCheck();
|
|
2645
|
+
const _a = props, {
|
|
2646
|
+
children,
|
|
2647
|
+
level = 1,
|
|
2648
|
+
elementType: CustomElement = "p",
|
|
2649
|
+
isUnderlined = false,
|
|
2650
|
+
isBold = false
|
|
2651
|
+
} = _a, otherProps = __objRest$3(_a, [
|
|
2652
|
+
"children",
|
|
2653
|
+
"level",
|
|
2654
|
+
"elementType",
|
|
2655
|
+
"isUnderlined",
|
|
2656
|
+
"isBold"
|
|
2657
|
+
]);
|
|
2658
|
+
const { styleProps } = sapphireReact.useTextStyleProps(otherProps);
|
|
2659
|
+
const levelClassName = `sapphire-text--body-${level}`;
|
|
2660
|
+
return /* @__PURE__ */ React__default["default"].createElement(CustomElement, __spreadProps$2(__spreadValues$3(__spreadValues$3({}, utils$1.filterDOMProps(props)), styleProps), {
|
|
2661
|
+
className: clsx__default["default"](styleProps.className, styles__default$9["default"]["sapphire-text"], styles__default$9["default"][levelClassName], {
|
|
2662
|
+
[styles__default$9["default"]["sapphire-text--strong"]]: isBold,
|
|
2663
|
+
[styles__default$9["default"]["sapphire-text--underlined"]]: isUnderlined
|
|
2664
|
+
}),
|
|
2665
|
+
style: styleProps.style,
|
|
2666
|
+
ref
|
|
2667
|
+
}), children);
|
|
2668
|
+
});
|
|
2669
|
+
|
|
2670
|
+
var __defProp$2 = Object.defineProperty;
|
|
2671
|
+
var __defProps$1 = Object.defineProperties;
|
|
2672
|
+
var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
|
|
2673
|
+
var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
|
|
2674
|
+
var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
|
|
2675
|
+
var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
|
|
2676
|
+
var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
2677
|
+
var __spreadValues$2 = (a, b) => {
|
|
2678
|
+
for (var prop in b || (b = {}))
|
|
2679
|
+
if (__hasOwnProp$2.call(b, prop))
|
|
2680
|
+
__defNormalProp$2(a, prop, b[prop]);
|
|
2681
|
+
if (__getOwnPropSymbols$2)
|
|
2682
|
+
for (var prop of __getOwnPropSymbols$2(b)) {
|
|
2683
|
+
if (__propIsEnum$2.call(b, prop))
|
|
2684
|
+
__defNormalProp$2(a, prop, b[prop]);
|
|
2685
|
+
}
|
|
2686
|
+
return a;
|
|
2687
|
+
};
|
|
2688
|
+
var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
|
|
2689
|
+
var __objRest$2 = (source, exclude) => {
|
|
2690
|
+
var target = {};
|
|
2691
|
+
for (var prop in source)
|
|
2692
|
+
if (__hasOwnProp$2.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
2693
|
+
target[prop] = source[prop];
|
|
2694
|
+
if (source != null && __getOwnPropSymbols$2)
|
|
2695
|
+
for (var prop of __getOwnPropSymbols$2(source)) {
|
|
2696
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum$2.call(source, prop))
|
|
2697
|
+
target[prop] = source[prop];
|
|
2698
|
+
}
|
|
2699
|
+
return target;
|
|
2700
|
+
};
|
|
2701
|
+
const Caption = React.forwardRef(function Caption2(props, ref) {
|
|
2702
|
+
sapphireReact.useThemeCheck();
|
|
2703
|
+
const _a = props, {
|
|
2704
|
+
children,
|
|
2705
|
+
level = 1,
|
|
2706
|
+
elementType: CustomElement = "div"
|
|
2707
|
+
} = _a, otherProps = __objRest$2(_a, [
|
|
2708
|
+
"children",
|
|
2709
|
+
"level",
|
|
2710
|
+
"elementType"
|
|
2711
|
+
]);
|
|
2712
|
+
const { styleProps } = sapphireReact.useTextStyleProps(otherProps);
|
|
2713
|
+
const levelClassName = `sapphire-text--caption-${level}`;
|
|
2714
|
+
return /* @__PURE__ */ React__default["default"].createElement(CustomElement, __spreadProps$1(__spreadValues$2(__spreadValues$2({}, utils$1.filterDOMProps(props)), styleProps), {
|
|
2715
|
+
className: clsx__default["default"](styleProps.className, styles__default$9["default"]["sapphire-text"], styles__default$9["default"][levelClassName]),
|
|
2716
|
+
style: styleProps.style,
|
|
2717
|
+
ref
|
|
2718
|
+
}), children);
|
|
2719
|
+
});
|
|
2720
|
+
|
|
2721
|
+
const Typography = {
|
|
2722
|
+
Heading,
|
|
2723
|
+
Subheading,
|
|
2724
|
+
Body,
|
|
2725
|
+
Caption
|
|
2726
|
+
};
|
|
2727
|
+
|
|
2728
|
+
var __defProp$1 = Object.defineProperty;
|
|
2729
|
+
var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
|
|
2730
|
+
var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
|
|
2731
|
+
var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
|
|
2732
|
+
var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
2733
|
+
var __spreadValues$1 = (a, b) => {
|
|
2734
|
+
for (var prop in b || (b = {}))
|
|
2735
|
+
if (__hasOwnProp$1.call(b, prop))
|
|
2736
|
+
__defNormalProp$1(a, prop, b[prop]);
|
|
2737
|
+
if (__getOwnPropSymbols$1)
|
|
2738
|
+
for (var prop of __getOwnPropSymbols$1(b)) {
|
|
2739
|
+
if (__propIsEnum$1.call(b, prop))
|
|
2740
|
+
__defNormalProp$1(a, prop, b[prop]);
|
|
2741
|
+
}
|
|
2742
|
+
return a;
|
|
2743
|
+
};
|
|
2744
|
+
var __objRest$1 = (source, exclude) => {
|
|
2745
|
+
var target = {};
|
|
2746
|
+
for (var prop in source)
|
|
2747
|
+
if (__hasOwnProp$1.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
2748
|
+
target[prop] = source[prop];
|
|
2749
|
+
if (source != null && __getOwnPropSymbols$1)
|
|
2750
|
+
for (var prop of __getOwnPropSymbols$1(source)) {
|
|
2751
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum$1.call(source, prop))
|
|
2752
|
+
target[prop] = source[prop];
|
|
2753
|
+
}
|
|
2754
|
+
return target;
|
|
2755
|
+
};
|
|
2756
|
+
const Fieldset = (_a) => {
|
|
2757
|
+
var _b = _a, {
|
|
2758
|
+
label: label$1,
|
|
2759
|
+
contextualHelp,
|
|
2760
|
+
note,
|
|
2761
|
+
error,
|
|
2762
|
+
isDisabled,
|
|
2763
|
+
isRequired,
|
|
2764
|
+
necessityIndicator,
|
|
2765
|
+
children,
|
|
2766
|
+
size = "large"
|
|
2767
|
+
} = _b, props = __objRest$1(_b, [
|
|
2768
|
+
"label",
|
|
2769
|
+
"contextualHelp",
|
|
2770
|
+
"note",
|
|
2771
|
+
"error",
|
|
2772
|
+
"isDisabled",
|
|
2773
|
+
"isRequired",
|
|
2774
|
+
"necessityIndicator",
|
|
2775
|
+
"children",
|
|
2776
|
+
"size"
|
|
2777
|
+
]);
|
|
2778
|
+
sapphireReact.useThemeCheck();
|
|
2779
|
+
const { fieldProps, descriptionProps, errorMessageProps } = label.useField({
|
|
2780
|
+
isInvalid: !!error
|
|
2781
|
+
});
|
|
2782
|
+
return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field, __spreadValues$1({
|
|
2783
|
+
elementType: "fieldset",
|
|
2784
|
+
error: !!error,
|
|
2785
|
+
isDisabled,
|
|
2786
|
+
size
|
|
2787
|
+
}, utils$1.mergeProps(props, fieldProps)), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Label, {
|
|
2788
|
+
elementType: "legend"
|
|
2789
|
+
}, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Label, {
|
|
2790
|
+
size,
|
|
2791
|
+
necessityIndicator: isRequired && necessityIndicator ? "required" : !isRequired && necessityIndicator ? "optional" : void 0,
|
|
2792
|
+
contextualHelp
|
|
2793
|
+
}, label$1)), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Control, {
|
|
2794
|
+
isGroup: true
|
|
2795
|
+
}, children), (error || note) && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Footer, null, error ? /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Note, __spreadValues$1({}, errorMessageProps), error) : note ? /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Note, __spreadValues$1({}, descriptionProps), note) : /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null)));
|
|
2796
|
+
};
|
|
2797
|
+
|
|
2798
|
+
var __defProp = Object.defineProperty;
|
|
2799
|
+
var __defProps = Object.defineProperties;
|
|
2800
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
2801
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
2802
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
2803
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
2804
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
2805
|
+
var __spreadValues = (a, b) => {
|
|
2806
|
+
for (var prop in b || (b = {}))
|
|
2807
|
+
if (__hasOwnProp.call(b, prop))
|
|
2808
|
+
__defNormalProp(a, prop, b[prop]);
|
|
2809
|
+
if (__getOwnPropSymbols)
|
|
2810
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
2811
|
+
if (__propIsEnum.call(b, prop))
|
|
2812
|
+
__defNormalProp(a, prop, b[prop]);
|
|
2813
|
+
}
|
|
2814
|
+
return a;
|
|
2815
|
+
};
|
|
2816
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
2817
|
+
var __objRest = (source, exclude) => {
|
|
2818
|
+
var target = {};
|
|
2819
|
+
for (var prop in source)
|
|
2820
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
2821
|
+
target[prop] = source[prop];
|
|
2822
|
+
if (source != null && __getOwnPropSymbols)
|
|
2823
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
2824
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
2825
|
+
target[prop] = source[prop];
|
|
2826
|
+
}
|
|
2827
|
+
return target;
|
|
2828
|
+
};
|
|
2829
|
+
const Avatar = (_a) => {
|
|
2830
|
+
var _b = _a, {
|
|
2831
|
+
monogram,
|
|
2832
|
+
icon,
|
|
2833
|
+
color = "informative",
|
|
2834
|
+
size = "medium"
|
|
2835
|
+
} = _b, props = __objRest(_b, [
|
|
2836
|
+
"monogram",
|
|
2837
|
+
"icon",
|
|
2838
|
+
"color",
|
|
2839
|
+
"size"
|
|
2840
|
+
]);
|
|
2841
|
+
sapphireReact.useThemeCheck();
|
|
2842
|
+
const { styleProps } = sapphireReact.useSapphireStyleProps(props);
|
|
2843
|
+
return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps(__spreadValues({}, styleProps), {
|
|
2844
|
+
className: clsx__default["default"](styleProps.className, styles__default$a["default"]["sapphire-avatar"], {
|
|
2845
|
+
[styles__default$a["default"]["sapphire-avatar--large"]]: size === "large",
|
|
2846
|
+
[styles__default$a["default"]["sapphire-avatar--small"]]: size === "small",
|
|
2847
|
+
[styles__default$a["default"]["sapphire-avatar--extra-small"]]: size === "extraSmall"
|
|
2848
|
+
}, color !== "passive" && styles__default$a["default"][`sapphire-avatar--${color}`])
|
|
2849
|
+
}), icon ? /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, {
|
|
2850
|
+
size: size === "large" ? "l" : size === "medium" ? "m" : "s"
|
|
2851
|
+
}, icon) : monogram);
|
|
2852
|
+
};
|
|
2853
|
+
|
|
2854
|
+
Object.defineProperty(exports, 'useLocale', {
|
|
2855
|
+
enumerable: true,
|
|
2856
|
+
get: function () { return i18n.useLocale; }
|
|
2857
|
+
});
|
|
2858
|
+
exports.Accordion = _Accordion;
|
|
2859
|
+
exports.Avatar = Avatar;
|
|
2860
|
+
exports.Calendar = Calendar;
|
|
2861
|
+
exports.DateField = DateField;
|
|
2862
|
+
exports.DateRangeField = DateRangeField;
|
|
2863
|
+
exports.FeedbackMessage = FeedbackMessage;
|
|
2864
|
+
exports.Fieldset = Fieldset;
|
|
2865
|
+
exports.FilterDropdown = FilterDropdown;
|
|
2866
|
+
exports.NotificationBadge = NotificationBadge;
|
|
2867
|
+
exports.RangeCalendar = RangeCalendar;
|
|
2868
|
+
exports.SearchField = SearchField;
|
|
2869
|
+
exports.Spinner = Spinner;
|
|
2870
|
+
exports.ToastProvider = ToastProvider;
|
|
2871
|
+
exports.ToggleButton = ToggleButton;
|
|
2872
|
+
exports.Typography = Typography;
|
|
2873
|
+
exports.isDateOutsideValidRange = isDateOutsideValidRange;
|
|
2874
|
+
exports.isEndDateBeforeStartDate = isEndDateBeforeStartDate;
|
|
2875
|
+
exports.useShowToast = useShowToast;
|
|
2876
|
+
//# sourceMappingURL=index.js.map
|