@mirohq/design-system-calendar 0.4.7 → 1.1.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.
Files changed (6) hide show
  1. package/dist/main.js +592 -574
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +598 -580
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +287 -44
  6. package/package.json +19 -11
package/dist/main.js CHANGED
@@ -3,21 +3,26 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
- var designSystemPrimitive = require('@mirohq/design-system-primitive');
7
- var designSystemStitches = require('@mirohq/design-system-stitches');
8
6
  var React = require('react');
9
7
  var reactAria = require('react-aria');
10
- var date = require('@internationalized/date');
11
- var reactStately = require('react-stately');
12
- var designSystemFlex = require('@mirohq/design-system-flex');
13
- var designSystemButton = require('@mirohq/design-system-button');
8
+ var RadixPopover = require('@radix-ui/react-popover');
14
9
  var designSystemBaseForm = require('@mirohq/design-system-base-form');
15
10
  var designSystemIcons = require('@mirohq/design-system-icons');
16
11
  var designSystemExperiments = require('@mirohq/design-system-experiments');
12
+ var designSystemUtils = require('@mirohq/design-system-utils');
13
+ var designSystemPrimitive = require('@mirohq/design-system-primitive');
14
+ var designSystemStitches = require('@mirohq/design-system-stitches');
17
15
  var designSystemBaseTextField = require('@mirohq/design-system-base-text-field');
18
16
  var designSystemStyles = require('@mirohq/design-system-styles');
19
- var designSystemTooltip = require('@mirohq/design-system-tooltip');
20
17
  var designSystemBaseButton = require('@mirohq/design-system-base-button');
18
+ var designSystemTooltip = require('@mirohq/design-system-tooltip');
19
+ var reactUseControllableState = require('@radix-ui/react-use-controllable-state');
20
+ var reactStately = require('react-stately');
21
+ var date = require('@internationalized/date');
22
+ var designSystemFlex = require('@mirohq/design-system-flex');
23
+ var designSystemTypography = require('@mirohq/design-system-typography');
24
+ var designSystemIconButton = require('@mirohq/design-system-icon-button');
25
+ var designSystemButton = require('@mirohq/design-system-button');
21
26
 
22
27
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
23
28
 
@@ -39,134 +44,270 @@ function _interopNamespace(e) {
39
44
  return Object.freeze(n);
40
45
  }
41
46
 
42
- var React__namespace = /*#__PURE__*/_interopNamespace(React);
43
47
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
48
+ var RadixPopover__namespace = /*#__PURE__*/_interopNamespace(RadixPopover);
44
49
 
45
- const Popover = (props) => {
46
- const ref = React__namespace.useRef(null);
47
- const { state, children } = props;
48
- const { dialogProps } = reactAria.useDialog(props, ref);
49
- const { popoverProps, underlayProps } = reactAria.usePopover(
50
+ const StyledPlaceholder = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
51
+ ...designSystemBaseTextField.textFieldStyles.base.placeholder.old,
52
+ padding: "0 $50"
53
+ });
54
+ const StyledValue$1 = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
55
+ padding: "0 $50"
56
+ });
57
+ const StyledIconContainer = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
58
+ display: "flex",
59
+ justifyContent: "center",
60
+ padding: "6px",
61
+ color: "$text-neutrals-subtle"
62
+ });
63
+ const StyledTrigger = designSystemStitches.styled(designSystemBaseButton.BaseButton, {
64
+ display: "inline-flex",
65
+ gap: "$50",
66
+ justifyContent: "space-between",
67
+ alignItems: "center",
68
+ height: "$10",
69
+ padding: "0 $100",
70
+ minWidth: "230px",
71
+ ...designSystemBaseTextField.textFieldStyles.variants.idle,
72
+ _hover: designSystemBaseTextField.textFieldStyles.variants.hovered,
73
+ '&:disabled, &[aria-disabled="true"]': {
74
+ ...designSystemBaseTextField.textFieldStyles.variants.disabled,
75
+ color: "$text-neutrals-disabled"
76
+ },
77
+ variants: {
78
+ v1: {
79
+ true: {
80
+ ...designSystemBaseTextField.textFieldStyles.v1.idle,
81
+ ...designSystemStyles.focus.css(designSystemBaseTextField.textFieldStyles.v1.focused)
82
+ },
83
+ false: {
84
+ ...designSystemStyles.focus.css(designSystemBaseTextField.textFieldStyles.variants.focused)
85
+ }
86
+ },
87
+ withClearButton: {
88
+ true: {
89
+ paddingRight: "calc($100 + $400)"
90
+ // initial left padding + clear button width + gap
91
+ }
92
+ }
93
+ }
94
+ });
95
+ const StyledCustomTrigger = designSystemStitches.styled(designSystemBaseButton.BaseButton, {
96
+ width: "100%",
97
+ height: "unset",
98
+ padding: "0",
99
+ backgroundColor: "$transparent",
100
+ border: "none",
101
+ cursor: "pointer"
102
+ });
103
+
104
+ const StyledClearAction = designSystemStitches.styled(designSystemBaseButton.BaseButton, {
105
+ position: "absolute",
106
+ top: 0,
107
+ bottom: 0,
108
+ right: "calc($100 + 1px)",
109
+ // to compensate border width
110
+ margin: "auto",
111
+ ...designSystemBaseTextField.actionButtonStyles,
112
+ '&:disabled, &[aria-disabled="true"]': {
113
+ color: "$icon-neutrals-disabled"
114
+ }
115
+ });
116
+
117
+ const ClearAction = React__default["default"].forwardRef(({ "aria-label": ariaLabel, label, ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsxs(designSystemTooltip.Tooltip, { children: [
118
+ /* @__PURE__ */ jsxRuntime.jsx(designSystemTooltip.Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
119
+ StyledClearAction,
50
120
  {
51
- ...props,
52
- popoverRef: ref
121
+ ...restProps,
122
+ ref: forwardRef,
123
+ "aria-label": ariaLabel != null ? ariaLabel : label,
124
+ children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCross, {})
125
+ }
126
+ ) }),
127
+ /* @__PURE__ */ jsxRuntime.jsx(designSystemTooltip.Tooltip.Content, { children: label })
128
+ ] }));
129
+
130
+ const CalendarContext = React.createContext({});
131
+ const CalendarProvider = ({
132
+ children,
133
+ visibleMonths = 1,
134
+ value: valueProp,
135
+ defaultValue: defaultValueProp,
136
+ onValueChange,
137
+ open: openProp,
138
+ defaultOpen: defaultOpenProp,
139
+ onOpen,
140
+ onClose,
141
+ ...restProps
142
+ }) => {
143
+ var _a;
144
+ const [immediateSave, setImmediateSave] = React.useState(false);
145
+ const [internalCalendarValue, setInternalCalendarValue] = React.useState(valueProp != null ? valueProp : defaultValueProp);
146
+ const visibleDuration = React.useMemo(
147
+ () => ({
148
+ months: visibleMonths
149
+ }),
150
+ [visibleMonths]
151
+ );
152
+ const [value, setValue] = reactUseControllableState.useControllableState({
153
+ prop: valueProp,
154
+ defaultProp: defaultValueProp,
155
+ onChange: onValueChange
156
+ });
157
+ const [open = false, setOpen] = reactUseControllableState.useControllableState({
158
+ prop: openProp,
159
+ defaultProp: defaultOpenProp,
160
+ onChange: (state) => {
161
+ if (state) {
162
+ onOpen == null ? void 0 : onOpen();
163
+ } else {
164
+ onClose == null ? void 0 : onClose();
165
+ }
166
+ }
167
+ });
168
+ const onCalendarDateClick = React.useCallback(
169
+ (value2) => {
170
+ if (immediateSave) {
171
+ setInternalCalendarValue(value2);
172
+ } else {
173
+ setValue(value2);
174
+ setOpen(false);
175
+ }
53
176
  },
54
- state
177
+ [setValue, setOpen, immediateSave, setInternalCalendarValue]
178
+ );
179
+ const onSaveClick = () => {
180
+ setValue(internalCalendarValue);
181
+ setOpen(false);
182
+ };
183
+ return /* @__PURE__ */ jsxRuntime.jsx(
184
+ CalendarContext.Provider,
185
+ {
186
+ value: {
187
+ ...restProps,
188
+ visibleDuration,
189
+ value,
190
+ setValue,
191
+ open,
192
+ setOpen,
193
+ onCalendarDateClick,
194
+ setImmediateSave,
195
+ onSaveClick,
196
+ // value should not be undefined otherwise react-aria calendar will complain in console
197
+ calendarValue: (_a = immediateSave ? internalCalendarValue : value) != null ? _a : null
198
+ },
199
+ children
200
+ }
55
201
  );
56
- return /* @__PURE__ */ jsxRuntime.jsxs(reactAria.Overlay, { children: [
57
- /* @__PURE__ */ jsxRuntime.jsx("div", { ...underlayProps }),
58
- /* @__PURE__ */ jsxRuntime.jsxs("div", { ...popoverProps, ref, children: [
59
- /* @__PURE__ */ jsxRuntime.jsx(reactAria.DismissButton, { onDismiss: state.close }),
60
- /* @__PURE__ */ jsxRuntime.jsx("div", { ...dialogProps, ref, children }),
61
- /* @__PURE__ */ jsxRuntime.jsx(reactAria.DismissButton, { onDismiss: state.close })
62
- ] })
63
- ] });
64
202
  };
203
+ const useCalendarContext = () => React.useContext(CalendarContext);
65
204
 
66
- const StyledGroup = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
67
- position: "relative"
68
- });
69
- const StyledPicker = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {});
70
-
71
- const StyledPredefinedRanges = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
72
- display: "flex",
73
- flexDirection: "column",
74
- borderRight: "1px solid $border-neutrals",
75
- padding: "$300 $200 0 $200",
76
- "& button": {
77
- backgroundColor: "$transparent",
78
- border: "none",
79
- fontSize: "$200",
80
- padding: "0 0 0 $100",
81
- textAlign: "left",
82
- lineHeight: "24px",
83
- color: "$text-neutrals",
84
- marginBottom: "$150",
85
- borderRadius: "$50",
86
- minWidth: "125px",
87
- cursor: "pointer",
88
- "&:hover": {
89
- backgroundColor: "$background-primary-prominent-hover",
90
- color: "$text-primary-inverted",
91
- fontWeight: "600"
205
+ const Trigger = React__default["default"].forwardRef(
206
+ ({
207
+ id,
208
+ "aria-describedby": ariaDescribedBy,
209
+ placeholder,
210
+ asChild = false,
211
+ clearable = true,
212
+ clearLabel,
213
+ onClear,
214
+ children,
215
+ ...restProps
216
+ }, forwardRef) => {
217
+ const [v1] = designSystemExperiments.useNewDesignLanguage();
218
+ const { value, setValue, disabled, ariaDisabled } = useCalendarContext();
219
+ const { formElementId, ariaDescribedBy: formFieldContextDescribedBy } = designSystemBaseForm.useFormFieldContext();
220
+ if (asChild) {
221
+ return /* @__PURE__ */ jsxRuntime.jsx(RadixPopover.Trigger, { ref: forwardRef, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(StyledCustomTrigger, { asChild: true, ...restProps, children }) });
92
222
  }
223
+ const onClearHandler = () => {
224
+ setValue(void 0);
225
+ if (onClear !== void 0) {
226
+ onClear();
227
+ }
228
+ };
229
+ const clearButtonVisible = clearable && value != null && clearLabel !== void 0;
230
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
231
+ /* @__PURE__ */ jsxRuntime.jsx(RadixPopover.Trigger, { ref: forwardRef, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
232
+ StyledTrigger,
233
+ {
234
+ id: id != null ? id : formElementId,
235
+ "aria-describedby": designSystemUtils.stringAttrValue(
236
+ ariaDescribedBy,
237
+ formFieldContextDescribedBy
238
+ ),
239
+ v1,
240
+ withClearButton: clearButtonVisible,
241
+ disabled,
242
+ "aria-disabled": ariaDisabled,
243
+ ...restProps,
244
+ children: [
245
+ value != null ? /* @__PURE__ */ jsxRuntime.jsx(StyledValue$1, { children }) : /* @__PURE__ */ jsxRuntime.jsx(StyledPlaceholder, { children: placeholder }),
246
+ !clearButtonVisible && /* @__PURE__ */ jsxRuntime.jsx(StyledIconContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCalendarBlank, { weight: "thin", size: "small" }) })
247
+ ]
248
+ }
249
+ ) }),
250
+ clearButtonVisible && /* @__PURE__ */ jsxRuntime.jsx(
251
+ ClearAction,
252
+ {
253
+ label: clearLabel,
254
+ onPress: onClearHandler,
255
+ disabled: disabled != null ? disabled : designSystemUtils.booleanify(ariaDisabled)
256
+ }
257
+ )
258
+ ] });
93
259
  }
94
- });
95
-
96
- const PredefinedRanges = React__default["default"].forwardRef(({ range, onClick }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledPredefinedRanges, { ref: forwardRef, children: range == null ? void 0 : range.map((date, i) => /* @__PURE__ */ jsxRuntime.jsx(
97
- designSystemButton.Button,
98
- {
99
- variant: "ghost",
100
- size: "medium",
101
- type: "button",
102
- onClick: () => onClick(date),
103
- children: date.label
104
- },
105
- i
106
- )) }));
260
+ );
107
261
 
108
- const StyledBody = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
109
- display: "inline-block",
110
- background: "$background-neutrals"
111
- });
112
- const StyledBodyContent = designSystemStitches.styled(designSystemFlex.Flex, {
113
- margin: "0 auto",
114
- boxShadow: "$100",
262
+ const StyledContent = designSystemStitches.styled(RadixPopover.Content, {
263
+ zIndex: "$calendar",
115
264
  background: "$background-neutrals",
116
- borderRadius: "$100"
265
+ borderRadius: "$100",
266
+ boxShadow: "$100"
117
267
  });
118
- const StyledGridContent = designSystemStitches.styled(designSystemFlex.Flex, {
119
- paddingBottom: "$200",
120
- "& [data-left-calendar]": {
121
- paddingLeft: "$200",
122
- paddingRight: "$100"
123
- },
124
- "& [data-right-calendar]": {
125
- paddingLeft: "$100",
126
- paddingRight: "$200"
127
- }
128
- });
129
- const StyledBodyContentLeft = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
130
- paddingLeft: "$200",
131
- paddingRight: "$100"
268
+ const StyledCalendarBody = designSystemStitches.styled(designSystemFlex.Flex, {
269
+ padding: "$200"
132
270
  });
271
+ const StyledGridContent = designSystemStitches.styled(designSystemFlex.Flex, {});
272
+ const StyledBodyContentLeft = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {});
133
273
  const StyledBodyContentRight = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
134
- paddingLeft: "$100",
135
- paddingRight: "$200"
274
+ paddingLeft: "$200"
136
275
  });
137
276
  const StyledClearContent = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
277
+ display: "flex",
278
+ gap: "$100",
138
279
  padding: "$200",
139
280
  borderTop: "1px solid $border-neutrals"
140
281
  });
141
282
 
142
- const StyledButton = designSystemStitches.styled(designSystemPrimitive.Primitive.button, {
143
- padding: "0",
144
- backgroundColor: "$transparent",
145
- border: "none",
146
- cursor: "pointer",
147
- color: "$text-neutrals",
148
- "&[disabled]": {
149
- cursor: "not-allowed"
150
- }
151
- });
152
-
153
- const Button = React__default["default"].forwardRef((props, forwardRef) => {
154
- const { buttonProps } = reactAria.useButton(props, forwardRef);
155
- const { focusProps } = reactAria.useFocusRing();
156
- const { children } = props;
157
- return /* @__PURE__ */ jsxRuntime.jsx(StyledButton, { ...reactAria.mergeProps(buttonProps, focusProps), ref: forwardRef, children });
283
+ const StyledHeaderTitle = designSystemStitches.styled(designSystemTypography.Heading, {
284
+ margin: 0,
285
+ flex: "2",
286
+ textAlign: "center"
158
287
  });
159
-
160
- const StyledHeaderTitle = designSystemStitches.styled(designSystemFlex.Flex, {
161
- justifyContent: "center",
162
- flex: "3",
163
- color: "$text-neutrals"
288
+ const StyledHeaderPlaceholder = designSystemStitches.styled("div", {
289
+ height: "$8",
290
+ // to compensate icon buttons' width and space between 2 calendars
291
+ width: "calc($8 * 2 + $space$200)"
164
292
  });
165
293
  const StyledHeader = designSystemStitches.styled(designSystemFlex.Flex, {
166
- padding: "0 $200",
167
- color: "$text-neutrals"
294
+ color: "$text-neutrals",
295
+ height: "$8",
296
+ alignItems: "center",
297
+ justifyContent: "space-between"
168
298
  });
169
299
 
300
+ const HeaderButton = React__default["default"].forwardRef(({ isDisabled, children, ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(
301
+ designSystemIconButton.IconButton,
302
+ {
303
+ ...restProps,
304
+ size: "medium",
305
+ disabled: isDisabled,
306
+ ref: forwardRef,
307
+ children
308
+ }
309
+ ));
310
+
170
311
  const Header = ({
171
312
  state,
172
313
  prevButtonProps,
@@ -179,130 +320,136 @@ const Header = ({
179
320
  timeZone: state.timeZone
180
321
  });
181
322
  return /* @__PURE__ */ jsxRuntime.jsxs(StyledHeader, { children: [
182
- /* @__PURE__ */ jsxRuntime.jsx(Button, { ...prevButtonProps, children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconChevronLeft, {}) }),
183
- /* @__PURE__ */ jsxRuntime.jsx(StyledHeaderTitle, { children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: monthDateFormatter.format(
323
+ /* @__PURE__ */ jsxRuntime.jsx(HeaderButton, { ...prevButtonProps, children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconChevronLeft, {}) }),
324
+ /* @__PURE__ */ jsxRuntime.jsx(StyledHeaderTitle, { level: 2, styledAs: "h3", children: monthDateFormatter.format(
184
325
  state.visibleRange.start.toDate(state.timeZone)
185
- ) }) }),
186
- visibleMonths !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(StyledHeaderTitle, { children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: monthDateFormatter.format(
187
- state.visibleRange.start.add({ months: 1 }).toDate(state.timeZone)
188
- ) }) }),
189
- /* @__PURE__ */ jsxRuntime.jsx(Button, { ...nextButtonProps, children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconChevronRight, {}) })
326
+ ) }),
327
+ visibleMonths === 2 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
328
+ /* @__PURE__ */ jsxRuntime.jsx(StyledHeaderPlaceholder, {}),
329
+ /* @__PURE__ */ jsxRuntime.jsx(StyledHeaderTitle, { level: 2, styledAs: "h3", children: monthDateFormatter.format(
330
+ state.visibleRange.start.add({ months: 1 }).toDate(state.timeZone)
331
+ ) })
332
+ ] }),
333
+ /* @__PURE__ */ jsxRuntime.jsx(HeaderButton, { ...nextButtonProps, children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconChevronRight, {}) })
190
334
  ] });
191
335
  };
192
336
 
337
+ const StyledCell = designSystemStitches.styled(designSystemPrimitive.Primitive.td, {
338
+ square: "$10",
339
+ marginTop: "$50",
340
+ position: "relative"
341
+ });
193
342
  const StyledCellContent = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
194
- square: "28px",
343
+ cursor: "pointer",
344
+ square: "$10",
195
345
  display: "flex",
196
346
  alignItems: "center",
197
347
  justifyContent: "center",
198
348
  borderRadius: "$50",
199
349
  color: "$text-neutrals",
200
- "&[data-today]": {
201
- color: "$text-primary"
202
- },
203
- "&[data-weekend]": {
204
- color: "$text-neutrals-subtle"
205
- },
206
- "&[data-selected-middle]": {
207
- color: "$text-neutrals"
208
- },
209
- "&[data-selection]": {
210
- borderRadius: "$50",
211
- background: "$background-primary-prominent-selected",
212
- color: "$text-primary-inverted",
213
- fontWeight: "600"
214
- },
215
- "&[data-disabled]": {
350
+ ...designSystemStyles.focus.css({
351
+ top: "0",
352
+ left: "0",
353
+ position: "absolute",
354
+ zIndex: "1",
355
+ boxShadow: "$focus-v1",
356
+ outline: "1px solid transparent"
357
+ }),
358
+ '&[aria-disabled="true"]': {
216
359
  textDecoration: "line-through",
217
- color: "$text-neutrals-disabled"
218
- }
219
- });
220
- const StyledCell = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
221
- square: "36px",
222
- cursor: "pointer",
223
- display: "flex",
224
- alignItems: "center",
225
- justifyContent: "center",
226
- "&:hover": {
227
- background: "$background-primary-subtle-hover",
228
- ["& ".concat(StyledCellContent)]: {
229
- background: "$background-primary-prominent-hover",
230
- color: "$text-primary-inverted"
231
- }
232
- },
233
- "&[data-selected]": {
234
- background: "$background-primary-subtle-hover"
360
+ color: "$text-neutrals-disabled",
361
+ cursor: "default"
235
362
  },
236
- "&[data-selection-start]": {
237
- borderBottomLeftRadius: "$lg",
238
- borderTopLeftRadius: "$lg"
239
- },
240
- "&[data-selection-end]": {
241
- borderBottomRightRadius: "$lg",
242
- borderTopRightRadius: "$lg"
243
- },
244
- "&[data-hidden]": {
245
- display: "none"
363
+ '&:not([aria-disabled="true"])': {
364
+ _hover: {
365
+ backgroundColor: "$background-neutrals-subtle-hover",
366
+ color: "$text-neutrals"
367
+ }
246
368
  },
247
- "&[data-disabled]": {
248
- cursor: "not-allowed",
249
- "&:hover": {
250
- backgroundColor: "$transparent",
251
- ["& ".concat(StyledCellContent)]: {
252
- backgroundColor: "$transparent",
253
- color: "$text-neutrals-disabled"
369
+ variants: {
370
+ today: {
371
+ true: {
372
+ backgroundColor: "$background-neutrals-subtle-hover",
373
+ color: "$text-neutrals"
374
+ }
375
+ },
376
+ selected: {
377
+ true: {
378
+ backgroundColor: "$background-primary-prominent-selected",
379
+ color: "$text-neutrals-inverted",
380
+ '&:not([aria-disabled="true"])': {
381
+ _hover: {
382
+ backgroundColor: "$background-primary-prominent-hover",
383
+ color: "$text-neutrals-inverted"
384
+ }
385
+ }
386
+ }
387
+ },
388
+ range: {
389
+ middle: {
390
+ backgroundColor: "$background-primary-subtle-selected",
391
+ color: "$text-neutrals",
392
+ borderRadius: 0,
393
+ '&:not([aria-disabled="true"])': {
394
+ _hover: {
395
+ backgroundColor: "$background-primary-subtle-hover"
396
+ }
397
+ }
398
+ },
399
+ start: {
400
+ borderTopRightRadius: 0,
401
+ borderBottomRightRadius: 0
402
+ },
403
+ end: {
404
+ borderTopLeftRadius: 0,
405
+ borderBottomLeftRadius: 0
406
+ }
407
+ },
408
+ hidden: {
409
+ true: {
410
+ display: "none"
254
411
  }
255
412
  }
256
413
  }
257
414
  });
258
415
 
259
- const Cell = React__default["default"].forwardRef(
260
- (props, forwardRef) => {
261
- const { state, date: date$1, currentMonth } = props;
262
- const ref = React.useRef(null);
263
- const { cellProps, buttonProps, isSelected, isDisabled, formattedDate } = reactAria.useCalendarCell({ date: date$1 }, state, ref);
264
- const isOutsideMonth = !date.isSameMonth(currentMonth, date$1);
265
- const isSelectionStart = state.highlightedRange !== void 0 && state.highlightedRange !== null ? date.isSameDay(date$1, state.highlightedRange.start) : isSelected;
266
- const isSelectionEnd = state.highlightedRange !== void 0 && state.highlightedRange !== null ? date.isSameDay(date$1, state.highlightedRange.end) : isSelected;
267
- const { locale } = reactAria.useLocale();
268
- const dayOfWeek = date.getDayOfWeek(date$1, locale);
269
- const isWeekendDay = date.isWeekend(date$1, locale);
270
- const isRoundedLeft = isSelected && (isSelectionStart || dayOfWeek === 0 || date$1.day === 1);
271
- const isRoundedRight = isSelected && (isSelectionEnd || dayOfWeek === 6 || date$1.day === date$1.calendar.getDaysInMonth(date$1));
272
- const { focusProps } = reactAria.useFocusRing();
273
- return /* @__PURE__ */ jsxRuntime.jsx("td", { ...cellProps, children: /* @__PURE__ */ jsxRuntime.jsx(
274
- StyledCell,
275
- {
276
- ...reactAria.mergeProps(buttonProps, focusProps),
277
- ref: forwardRef,
278
- "data-selected": isSelected ? "" : void 0,
279
- "data-selection-start": isRoundedLeft ? "" : void 0,
280
- "data-selection-end": isRoundedRight ? "" : void 0,
281
- "data-disabled": isDisabled ? "" : void 0,
282
- "data-hidden": isOutsideMonth ? "" : void 0,
283
- children: /* @__PURE__ */ jsxRuntime.jsx(
284
- StyledCellContent,
285
- {
286
- "data-selected-middle": isSelected && !(isSelectionStart || isSelectionEnd) ? "" : void 0,
287
- "data-selection": isSelectionStart || isSelectionEnd ? "" : void 0,
288
- "data-disabled": isDisabled ? "" : void 0,
289
- "data-today": date.isToday(date$1, date.getLocalTimeZone()) ? "" : void 0,
290
- "data-weekend": isWeekendDay ? "" : void 0,
291
- children: formattedDate
292
- }
293
- )
294
- }
295
- ) });
296
- }
297
- );
416
+ const Cell = (props) => {
417
+ const { state, date: date$1, currentMonth } = props;
418
+ const ref = React.useRef(null);
419
+ const { cellProps, buttonProps, isSelected, formattedDate } = reactAria.useCalendarCell(
420
+ { date: date$1 },
421
+ state,
422
+ ref
423
+ );
424
+ const isOutsideMonth = !date.isSameMonth(currentMonth, date$1);
425
+ const isSelectionStart = state.highlightedRange !== void 0 && state.highlightedRange !== null ? date.isSameDay(date$1, state.highlightedRange.start) : isSelected;
426
+ const isSelectionEnd = state.highlightedRange !== void 0 && state.highlightedRange !== null ? date.isSameDay(date$1, state.highlightedRange.end) : isSelected;
427
+ const { focusProps } = reactAria.useFocusRing();
428
+ const isRange = isSelected && (!isSelectionStart || !isSelectionEnd);
429
+ const rangeVariant = isRange ? isSelectionStart ? "start" : isSelectionEnd ? "end" : "middle" : void 0;
430
+ return /* @__PURE__ */ jsxRuntime.jsx(StyledCell, { ...cellProps, children: /* @__PURE__ */ jsxRuntime.jsx(
431
+ StyledCellContent,
432
+ {
433
+ ...reactAria.mergeProps(buttonProps, focusProps),
434
+ ref,
435
+ selected: isSelected && (isSelectionStart || isSelectionEnd),
436
+ today: date.isToday(date$1, date.getLocalTimeZone()),
437
+ range: rangeVariant,
438
+ hidden: isOutsideMonth,
439
+ children: formattedDate
440
+ }
441
+ ) });
442
+ };
298
443
 
299
444
  const StyledGrid = designSystemStitches.styled(designSystemPrimitive.Primitive.table, {
300
445
  borderCollapse: "separate",
301
446
  borderSpacing: " 0 $50"
302
447
  });
303
448
  const StyledDays = designSystemStitches.styled(designSystemPrimitive.Primitive.th, {
304
- square: "36px",
305
- color: "$text-neutrals"
449
+ height: "$10",
450
+ color: "$text-neutrals-subtle",
451
+ fontWeight: "$regular",
452
+ paddingTop: "$50"
306
453
  });
307
454
 
308
455
  const Grid = React__default["default"].forwardRef(
@@ -332,411 +479,282 @@ const Grid = React__default["default"].forwardRef(
332
479
  }
333
480
  );
334
481
 
335
- const StyledPlaceholder = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
336
- ...designSystemBaseTextField.textFieldStyles.base.placeholder.old,
337
- padding: "0 $50"
338
- });
339
- const StyledValue = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
340
- padding: "0 $50"
341
- });
342
- const StyledTriggerContainer = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
343
- position: "relative"
344
- });
345
- const StyledTrigger = designSystemStitches.styled(designSystemPrimitive.Primitive.button, {
346
- all: "unset",
347
- display: "inline-flex",
348
- gap: "$50",
349
- justifyContent: "space-between",
350
- alignItems: "center",
351
- height: "$10",
352
- padding: "0 $100",
353
- minWidth: "230px",
354
- ...designSystemBaseTextField.textFieldStyles.variants.idle,
355
- "& svg": {
356
- color: "$text-neutrals-subtle",
357
- square: "22px"
358
- },
359
- _hover: designSystemBaseTextField.textFieldStyles.variants.hovered,
360
- variants: {
361
- v1: {
362
- true: {
363
- ...designSystemBaseTextField.textFieldStyles.v1.idle,
364
- ...designSystemStyles.focus.css(designSystemBaseTextField.textFieldStyles.v1.focused)
365
- },
366
- false: {
367
- ...designSystemStyles.focus.css(designSystemBaseTextField.textFieldStyles.variants.focused)
368
- }
369
- },
370
- withClearButton: {
371
- true: {
372
- paddingRight: "calc($100 + $400)"
373
- // initial left padding + clear button width + gap
482
+ const CONTENT_OFFSET = parseInt(designSystemStitches.theme.space[50]);
483
+ const SharedContent = React__default["default"].forwardRef(
484
+ ({ calendarProps, prevButtonProps, nextButtonProps, state }, forwardRef) => {
485
+ const { visibleDuration } = useCalendarContext();
486
+ return /* @__PURE__ */ jsxRuntime.jsxs(
487
+ StyledCalendarBody,
488
+ {
489
+ direction: "column",
490
+ ...calendarProps,
491
+ ref: forwardRef,
492
+ children: [
493
+ /* @__PURE__ */ jsxRuntime.jsx(
494
+ Header,
495
+ {
496
+ state,
497
+ prevButtonProps,
498
+ nextButtonProps,
499
+ visibleMonths: visibleDuration.months
500
+ }
501
+ ),
502
+ /* @__PURE__ */ jsxRuntime.jsxs(StyledGridContent, { children: [
503
+ /* @__PURE__ */ jsxRuntime.jsx(StyledBodyContentLeft, { children: /* @__PURE__ */ jsxRuntime.jsx(Grid, { state }) }),
504
+ visibleDuration.months === 2 && /* @__PURE__ */ jsxRuntime.jsx(StyledBodyContentRight, { children: /* @__PURE__ */ jsxRuntime.jsx(Grid, { state, offset: { months: 1 } }) })
505
+ ] })
506
+ ]
374
507
  }
375
- }
376
- }
377
- });
378
- const StyledCustomTrigger = designSystemStitches.styled(designSystemPrimitive.Primitive.button, {
379
- width: "100%",
380
- height: "unset",
381
- padding: "0",
382
- backgroundColor: "$transparent",
383
- border: "none",
384
- cursor: "pointer"
385
- });
386
-
387
- const StyledClearButton = designSystemStitches.styled(designSystemBaseButton.BaseButton, {
388
- position: "absolute",
389
- top: 0,
390
- bottom: 0,
391
- right: "calc($100 + 1px)",
392
- // to compensate border width
393
- margin: "auto",
394
- ...designSystemBaseTextField.actionButtonStyles
395
- });
396
-
397
- const ClearButton = React__default["default"].forwardRef(({ "aria-label": ariaLabel, label, ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsxs(designSystemTooltip.Tooltip, { children: [
398
- /* @__PURE__ */ jsxRuntime.jsx(designSystemTooltip.Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
399
- StyledClearButton,
400
- {
401
- ...restProps,
402
- ref: forwardRef,
403
- "aria-label": ariaLabel != null ? ariaLabel : label,
404
- children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCross, {})
405
- }
406
- ) }),
407
- /* @__PURE__ */ jsxRuntime.jsx(designSystemTooltip.Tooltip.Content, { children: label })
408
- ] }));
409
-
410
- function dateToString(value) {
411
- if (value == null) {
412
- return void 0;
413
- }
414
- if ("start" in value) {
415
- if (value.start == null || value.end == null) {
416
- return void 0;
417
- }
418
- return "".concat(value.start, " - ").concat(value.end);
419
- }
420
- return value.toString();
421
- }
422
- const Trigger = React__default["default"].forwardRef(
423
- ({
424
- placeholder,
425
- displayValue,
426
- stateValue,
427
- asChild = false,
428
- clearable = true,
429
- clearActionLabel,
430
- onClear,
431
- ...restProps
432
- }, forwardRef) => {
433
- const [v1] = designSystemExperiments.useNewDesignLanguage();
434
- const { buttonProps } = reactAria.useButton(
435
- restProps,
436
- forwardRef
437
508
  );
438
- const { children } = restProps;
439
- if (asChild) {
440
- return /* @__PURE__ */ jsxRuntime.jsx(StyledCustomTrigger, { ...buttonProps, children });
441
- }
442
- const valueToDisplay = displayValue != null ? displayValue : dateToString(stateValue);
443
- const clearButtonVisible = clearable && clearActionLabel !== void 0 && valueToDisplay != null;
444
- return /* @__PURE__ */ jsxRuntime.jsxs(StyledTriggerContainer, { children: [
445
- /* @__PURE__ */ jsxRuntime.jsxs(
446
- StyledTrigger,
447
- {
448
- "data-custom": "",
449
- ...buttonProps,
450
- v1,
451
- ref: forwardRef,
452
- withClearButton: clearButtonVisible,
453
- children: [
454
- valueToDisplay != null ? /* @__PURE__ */ jsxRuntime.jsx(StyledValue, { children: valueToDisplay }) : /* @__PURE__ */ jsxRuntime.jsx(StyledPlaceholder, { children: placeholder }),
455
- !clearButtonVisible && /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCalendarBlank, { weight: "thin" })
456
- ]
457
- }
458
- ),
459
- clearButtonVisible && /* @__PURE__ */ jsxRuntime.jsx(ClearButton, { label: clearActionLabel, onPress: onClear })
460
- ] });
461
509
  }
462
510
  );
463
-
464
- const RangePicker = React__default["default"].forwardRef((props, forwardRef) => {
511
+ const DatePickerContent = () => {
512
+ const { locale } = reactAria.useLocale();
465
513
  const {
466
- predefinedRanges,
514
+ calendarValue,
515
+ visibleDuration,
467
516
  minDate,
468
517
  maxDate,
469
- visibleMonths,
470
- clearButtonText,
471
- children,
472
- defaultOpen,
473
- onClear,
474
- label,
475
- placeholder,
476
- displayValue
477
- } = props;
478
- const state = reactStately.useDateRangePickerState(
479
- props
518
+ onCalendarDateClick
519
+ } = useCalendarContext();
520
+ const state = reactStately.useCalendarState({
521
+ value: calendarValue,
522
+ visibleDuration,
523
+ minValue: minDate,
524
+ maxValue: maxDate,
525
+ autoFocus: true,
526
+ onChange: onCalendarDateClick,
527
+ locale,
528
+ createCalendar: date.createCalendar
529
+ });
530
+ const { calendarProps, prevButtonProps, nextButtonProps } = reactAria.useCalendar(
531
+ {},
532
+ state
480
533
  );
481
- const ref = React.useRef(null);
482
- const { locale } = reactAria.useLocale();
483
- const { groupProps, labelProps, buttonProps } = reactAria.useDateRangePicker(
534
+ return /* @__PURE__ */ jsxRuntime.jsx(
535
+ SharedContent,
484
536
  {
485
- ...props,
486
- isOpen: defaultOpen,
487
- label
488
- },
489
- state,
490
- ref
537
+ calendarProps,
538
+ prevButtonProps,
539
+ nextButtonProps,
540
+ state
541
+ }
491
542
  );
492
- const change = (value) => {
493
- state.setValue(value);
494
- state.close();
495
- };
496
- const rangeState = reactStately.useRangeCalendarState({
497
- ...props,
498
- visibleDuration: visibleMonths,
543
+ };
544
+ const RangePickerContent = () => {
545
+ const { locale } = reactAria.useLocale();
546
+ const {
547
+ calendarValue,
548
+ visibleDuration,
549
+ minDate,
550
+ maxDate,
551
+ onCalendarDateClick
552
+ } = useCalendarContext();
553
+ const ref = React.useRef(null);
554
+ const state = reactStately.useRangeCalendarState({
555
+ value: calendarValue,
556
+ visibleDuration,
499
557
  minValue: minDate,
500
558
  maxValue: maxDate,
501
559
  autoFocus: true,
502
- onFocusChange: focus,
503
- onChange: change,
560
+ onChange: onCalendarDateClick,
504
561
  locale,
505
562
  createCalendar: date.createCalendar
506
563
  });
507
564
  const { calendarProps, prevButtonProps, nextButtonProps } = reactAria.useRangeCalendar(
508
- props,
509
- rangeState,
565
+ {},
566
+ state,
510
567
  ref
511
568
  );
512
- const rangeClick = React.useCallback(
513
- (selectedRange) => {
514
- if (selectedRange.range !== void 0) {
515
- state.setValue(selectedRange.range);
516
- rangeState.setValue(selectedRange.range);
569
+ return /* @__PURE__ */ jsxRuntime.jsx(
570
+ SharedContent,
571
+ {
572
+ ref,
573
+ calendarProps,
574
+ prevButtonProps,
575
+ nextButtonProps,
576
+ state
577
+ }
578
+ );
579
+ };
580
+ const Content = React__default["default"].forwardRef(
581
+ ({
582
+ side = "bottom",
583
+ sideOffset = CONTENT_OFFSET,
584
+ align = "start",
585
+ alignOffset = 0,
586
+ collisionPadding = 0,
587
+ avoidCollisions = true,
588
+ sticky = "partial",
589
+ hideWhenDetached = true,
590
+ children,
591
+ ...restProps
592
+ }, forwardRef) => {
593
+ const { picker, open } = useCalendarContext();
594
+ if (!open) {
595
+ return null;
596
+ }
597
+ return /* @__PURE__ */ jsxRuntime.jsx(
598
+ StyledContent,
599
+ {
600
+ ...restProps,
601
+ ref: forwardRef,
602
+ side,
603
+ sideOffset,
604
+ align,
605
+ alignOffset,
606
+ collisionPadding,
607
+ avoidCollisions,
608
+ sticky,
609
+ hideWhenDetached,
610
+ children: /* @__PURE__ */ jsxRuntime.jsxs(designSystemFlex.Flex, { direction: "column", children: [
611
+ picker === "single" ? /* @__PURE__ */ jsxRuntime.jsx(DatePickerContent, {}) : /* @__PURE__ */ jsxRuntime.jsx(RangePickerContent, {}),
612
+ children != null && /* @__PURE__ */ jsxRuntime.jsx(StyledClearContent, { children })
613
+ ] })
517
614
  }
518
- },
519
- [rangeState, state]
615
+ );
616
+ }
617
+ );
618
+
619
+ const StyledValue = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {});
620
+
621
+ const DEFAULT_FORMAT = {
622
+ day: "2-digit",
623
+ month: "short",
624
+ year: "numeric"
625
+ };
626
+ function formatDate(date, formatter, timeZone) {
627
+ return formatter.format(date.toDate(timeZone));
628
+ }
629
+ function formatValue(value, formatter, timeZone) {
630
+ if (value == null) {
631
+ return void 0;
632
+ }
633
+ if ("start" in value) {
634
+ if (value.start == null || value.end == null) {
635
+ return void 0;
636
+ }
637
+ return "".concat(formatDate(value.start, formatter, timeZone), " - ").concat(formatDate(
638
+ value.end,
639
+ formatter,
640
+ timeZone
641
+ ));
642
+ }
643
+ return formatDate(value, formatter, timeZone);
644
+ }
645
+ const Value = React__default["default"].forwardRef(({ format = DEFAULT_FORMAT, ...restProps }, forwardRef) => {
646
+ const { value } = useCalendarContext();
647
+ const timeZone = React.useMemo(date.getLocalTimeZone, [format]);
648
+ const formatWithTimeZone = React.useMemo(
649
+ () => ({ ...format, timeZone }),
650
+ [format, timeZone]
520
651
  );
652
+ const dateFormatter = reactAria.useDateFormatter(formatWithTimeZone);
653
+ const valueToDisplay = formatValue(value, dateFormatter, timeZone);
654
+ return /* @__PURE__ */ jsxRuntime.jsx(StyledValue, { ref: forwardRef, ...restProps, children: valueToDisplay });
655
+ });
656
+
657
+ const ClearButton = React__default["default"].forwardRef(({ onClear, children, ...restProps }, forwardRef) => {
658
+ const { value, setValue } = useCalendarContext();
521
659
  const onClearHandler = () => {
522
- state.setValue({ start: null, end: null });
660
+ setValue(void 0);
523
661
  if (onClear !== void 0) {
524
662
  onClear();
525
- state.close();
526
663
  }
527
664
  };
528
- const clearableTrigger = clearButtonText !== void 0 && onClear !== void 0;
529
- return /* @__PURE__ */ jsxRuntime.jsxs(StyledPicker, { ref: forwardRef, children: [
530
- children === void 0 && /* @__PURE__ */ jsxRuntime.jsxs(StyledGroup, { ...groupProps, ref, children: [
531
- label !== void 0 && // todo refactoring: use Form Field context
532
- /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseForm.FloatingLabel, { floating: true, ...labelProps, children: label }),
533
- /* @__PURE__ */ jsxRuntime.jsx(
534
- Trigger,
535
- {
536
- ...buttonProps,
537
- placeholder,
538
- displayValue,
539
- stateValue: state.value,
540
- clearable: clearableTrigger,
541
- clearActionLabel: clearableTrigger ? clearButtonText : void 0,
542
- onClear: clearableTrigger ? onClearHandler : void 0
543
- }
544
- )
545
- ] }),
546
- children !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { ...groupProps, ref, children: /* @__PURE__ */ jsxRuntime.jsx(Trigger, { ...buttonProps, asChild: true, children }) }),
547
- state.isOpen && /* @__PURE__ */ jsxRuntime.jsx(Popover, { triggerRef: ref, state, placement: "bottom start", children: /* @__PURE__ */ jsxRuntime.jsx(StyledBody, { ref: forwardRef, children: /* @__PURE__ */ jsxRuntime.jsxs(StyledBodyContent, { children: [
548
- predefinedRanges !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
549
- PredefinedRanges,
550
- {
551
- range: predefinedRanges,
552
- onClick: rangeClick
553
- }
554
- ),
555
- /* @__PURE__ */ jsxRuntime.jsxs(designSystemFlex.Flex, { direction: "column", ...calendarProps, children: [
556
- /* @__PURE__ */ jsxRuntime.jsx(
557
- Header,
558
- {
559
- state: rangeState,
560
- prevButtonProps,
561
- nextButtonProps,
562
- visibleMonths
563
- }
564
- ),
565
- /* @__PURE__ */ jsxRuntime.jsxs(StyledGridContent, { children: [
566
- /* @__PURE__ */ jsxRuntime.jsx(StyledBodyContentLeft, { children: /* @__PURE__ */ jsxRuntime.jsx(Grid, { state: rangeState }) }),
567
- visibleMonths !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(StyledBodyContentRight, { children: /* @__PURE__ */ jsxRuntime.jsx(
568
- Grid,
569
- {
570
- onChange: change,
571
- state: rangeState,
572
- offset: { months: 1 }
573
- }
574
- ) })
575
- ] }),
576
- onClear !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(StyledClearContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
577
- designSystemButton.Button,
578
- {
579
- size: "medium",
580
- type: "button",
581
- onClick: onClearHandler,
582
- disabled: rangeState.value === null,
583
- children: clearButtonText
584
- }
585
- ) })
586
- ] })
587
- ] }) }) })
588
- ] });
665
+ return /* @__PURE__ */ jsxRuntime.jsx(
666
+ designSystemButton.Button,
667
+ {
668
+ ...restProps,
669
+ ref: forwardRef,
670
+ variant: "ghost",
671
+ size: "medium",
672
+ onClick: onClearHandler,
673
+ disabled: value === null,
674
+ children
675
+ }
676
+ );
589
677
  });
590
678
 
591
- const DatePickerBody = React__default["default"].forwardRef((props, forwardRef) => {
592
- const {
593
- predefinedRanges,
594
- visibleMonths,
595
- onClear,
596
- minDate,
597
- maxDate,
598
- clearButtonText
599
- } = props;
600
- const { locale } = reactAria.useLocale();
601
- const state = reactStately.useCalendarState({
602
- ...props,
603
- visibleDuration: visibleMonths,
604
- minValue: minDate,
605
- maxValue: maxDate,
606
- locale,
607
- createCalendar: date.createCalendar
608
- });
609
- const { calendarProps, prevButtonProps, nextButtonProps } = reactAria.useCalendar(
610
- props,
611
- state
612
- );
613
- const dateClick = React.useCallback(
614
- (selectedRange) => {
615
- if (selectedRange.date !== void 0)
616
- state.setValue(selectedRange.date);
617
- },
618
- [state]
679
+ const SaveButton = React__default["default"].forwardRef(({ onSave, children, ...restProps }, forwardRef) => {
680
+ const { setImmediateSave, onSaveClick } = useCalendarContext();
681
+ React.useEffect(() => {
682
+ setImmediateSave(true);
683
+ return () => setImmediateSave(false);
684
+ }, [setImmediateSave]);
685
+ const onSaveHandler = () => {
686
+ onSaveClick();
687
+ if (onSave !== void 0) {
688
+ onSave();
689
+ }
690
+ };
691
+ return /* @__PURE__ */ jsxRuntime.jsx(
692
+ designSystemButton.Button,
693
+ {
694
+ ref: forwardRef,
695
+ ...restProps,
696
+ variant: "primary",
697
+ size: "medium",
698
+ onClick: onSaveHandler,
699
+ children
700
+ }
619
701
  );
620
- return /* @__PURE__ */ jsxRuntime.jsx(StyledBody, { ref: forwardRef, children: /* @__PURE__ */ jsxRuntime.jsxs(StyledBodyContent, { ...calendarProps, children: [
621
- predefinedRanges !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(PredefinedRanges, { range: predefinedRanges, onClick: dateClick }),
622
- /* @__PURE__ */ jsxRuntime.jsxs(designSystemFlex.Flex, { direction: "column", children: [
623
- /* @__PURE__ */ jsxRuntime.jsx(
624
- Header,
625
- {
626
- state,
627
- prevButtonProps,
628
- nextButtonProps,
629
- visibleMonths
630
- }
631
- ),
632
- /* @__PURE__ */ jsxRuntime.jsxs(StyledGridContent, { children: [
633
- /* @__PURE__ */ jsxRuntime.jsx(StyledBodyContentLeft, { children: /* @__PURE__ */ jsxRuntime.jsx(Grid, { state }) }),
634
- visibleMonths !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(StyledBodyContentRight, { children: /* @__PURE__ */ jsxRuntime.jsx(Grid, { state, offset: { months: 1 } }) })
635
- ] }),
636
- onClear !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(StyledClearContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
637
- designSystemButton.Button,
638
- {
639
- size: "medium",
640
- onClick: onClear,
641
- disabled: state.value === null,
642
- children: clearButtonText
643
- }
644
- ) })
645
- ] })
646
- ] }) });
647
702
  });
648
703
 
649
- const DatePicker = React__default["default"].forwardRef((props, forwardRef) => {
650
- const {
704
+ const StyledCalendar = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
705
+ position: "relative"
706
+ });
707
+
708
+ const Root = React__default["default"].forwardRef(({ children, ...restProps }, forwardRef) => {
709
+ const { open, setOpen } = useCalendarContext();
710
+ const { label, isFloatingLabel } = designSystemBaseForm.useFormFieldContext();
711
+ return /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Root, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(StyledCalendar, { ref: forwardRef, ...restProps, children: [
712
+ label !== null && isFloatingLabel && /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseForm.FloatingLabel, { floating: true, size: "medium", children: label }),
713
+ children
714
+ ] }) });
715
+ });
716
+ const Calendar = React__default["default"].forwardRef(
717
+ ({
651
718
  picker,
652
- predefinedRanges,
653
- visibleMonths,
654
719
  defaultValue,
720
+ value,
721
+ onValueChange,
722
+ defaultOpen,
723
+ open,
724
+ onClose,
725
+ onOpen,
726
+ locale,
727
+ visibleMonths,
655
728
  minDate,
656
729
  maxDate,
730
+ disabled,
731
+ "aria-disabled": ariaDisabled,
657
732
  children,
658
- clearButtonText,
659
- defaultOpen,
660
- onClear,
661
- label,
662
- placeholder,
663
- displayValue
664
- } = props;
665
- const ref = React.useRef(null);
666
- const state = reactStately.useDatePickerState(props);
667
- const { groupProps, buttonProps, calendarProps, labelProps } = reactAria.useDatePicker(
668
- {
669
- ...props,
670
- isOpen: defaultOpen,
671
- label
672
- },
673
- state,
674
- ref
675
- );
676
- const onClearHandler = () => {
677
- state.setValue(null);
678
- if (onClear !== void 0) {
679
- onClear();
680
- }
681
- };
682
- const clearableTrigger = clearButtonText !== void 0 && onClear !== void 0;
683
- return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: picker === "single" ? /* @__PURE__ */ jsxRuntime.jsxs(StyledPicker, { ref: forwardRef, children: [
684
- children === void 0 && /* @__PURE__ */ jsxRuntime.jsxs(StyledGroup, { ...groupProps, ref, children: [
685
- label !== void 0 && // todo refactoring: use Form Field context
686
- /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseForm.FloatingLabel, { floating: true, ...labelProps, children: label }),
687
- /* @__PURE__ */ jsxRuntime.jsx(
688
- Trigger,
689
- {
690
- ...buttonProps,
691
- placeholder,
692
- displayValue,
693
- stateValue: state.value,
694
- clearable: clearableTrigger,
695
- clearActionLabel: clearableTrigger ? clearButtonText : void 0,
696
- onClear: clearableTrigger ? onClearHandler : void 0
697
- }
698
- )
699
- ] }),
700
- children !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { ...groupProps, ref, children: /* @__PURE__ */ jsxRuntime.jsx(Trigger, { ...buttonProps, asChild: true, children }) }),
701
- state.isOpen && /* @__PURE__ */ jsxRuntime.jsx(Popover, { triggerRef: ref, state, placement: "bottom start", children: /* @__PURE__ */ jsxRuntime.jsx(
702
- DatePickerBody,
703
- {
704
- ...calendarProps,
705
- defaultValue,
706
- predefinedRanges,
707
- visibleMonths,
708
- onClear: onClear !== void 0 ? onClearHandler : void 0,
709
- minDate,
710
- maxDate,
711
- clearButtonText: onClear !== void 0 ? clearButtonText : void 0,
712
- ref: forwardRef
713
- }
714
- ) })
715
- ] }) : /* @__PURE__ */ jsxRuntime.jsx(
716
- DatePickerBody,
717
- {
718
- ...calendarProps,
719
- ref: forwardRef,
733
+ ...props
734
+ }, forwardRef) => {
735
+ const providerProps = {
736
+ picker,
720
737
  defaultValue,
721
- predefinedRanges,
738
+ value,
739
+ onValueChange,
722
740
  visibleMonths,
723
- onClear: onClear !== void 0 ? onClearHandler : void 0,
724
741
  minDate,
725
742
  maxDate,
726
- clearButtonText: onClear !== void 0 ? clearButtonText : void 0
727
- }
728
- ) });
729
- });
730
-
731
- const StyledCalendar = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {});
732
- const Calendar = React__default["default"].forwardRef(({ picker, defaultValue, ...props }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledCalendar, { ref: forwardRef, children: picker === "range" ? /* @__PURE__ */ jsxRuntime.jsx(RangePicker, { defaultValue, ...props }) : /* @__PURE__ */ jsxRuntime.jsx(
733
- DatePicker,
734
- {
735
- defaultValue,
736
- ...props,
737
- picker
743
+ defaultOpen,
744
+ open,
745
+ onClose,
746
+ onOpen,
747
+ disabled,
748
+ ariaDisabled
749
+ };
750
+ return /* @__PURE__ */ jsxRuntime.jsx(reactAria.I18nProvider, { locale, children: /* @__PURE__ */ jsxRuntime.jsx(CalendarProvider, { ...providerProps, children: /* @__PURE__ */ jsxRuntime.jsx(Root, { ...props, ref: forwardRef, children }) }) });
738
751
  }
739
- ) }));
752
+ );
753
+ Calendar.Trigger = Trigger;
754
+ Calendar.Content = Content;
755
+ Calendar.Value = Value;
756
+ Calendar.ClearButton = ClearButton;
757
+ Calendar.SaveButton = SaveButton;
740
758
 
741
759
  exports.Calendar = Calendar;
742
760
  //# sourceMappingURL=main.js.map