@mirohq/design-system-calendar 0.1.7 → 0.1.9-use-press.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/dist/main.js CHANGED
@@ -2,6 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ var jsxRuntime = require('react/jsx-runtime');
5
6
  var designSystemPrimitive = require('@mirohq/design-system-primitive');
6
7
  var designSystemStitches = require('@mirohq/design-system-stitches');
7
8
  var React = require('react');
@@ -53,14 +54,25 @@ const StyledDataSegment = designSystemStitches.styled(designSystemPrimitive.Prim
53
54
  const FieldDateSegment = ({ segment, state }) => {
54
55
  const ref = React.useRef(null);
55
56
  const { segmentProps } = reactAria.useDateSegment(segment, state, ref);
56
- return /* @__PURE__ */ React__default["default"].createElement(StyledDataSegment, {
57
- ...segmentProps,
58
- ref,
59
- "data-value": state.value !== null ? "" : void 0
60
- }, /* @__PURE__ */ React__default["default"].createElement("span", {
61
- "aria-hidden": "true",
62
- "data-placeholder": !segment.isPlaceholder ? "" : void 0
63
- }, segment.placeholder), segment.isPlaceholder ? "" : segment.text);
57
+ return /* @__PURE__ */ jsxRuntime.jsxs(
58
+ StyledDataSegment,
59
+ {
60
+ ...segmentProps,
61
+ ref,
62
+ "data-value": state.value !== null ? "" : void 0,
63
+ children: [
64
+ /* @__PURE__ */ jsxRuntime.jsx(
65
+ "span",
66
+ {
67
+ "aria-hidden": "true",
68
+ "data-placeholder": !segment.isPlaceholder ? "" : void 0,
69
+ children: segment.placeholder
70
+ }
71
+ ),
72
+ segment.isPlaceholder ? "" : segment.text
73
+ ]
74
+ }
75
+ );
64
76
  };
65
77
  const TextField = React__default["default"].forwardRef((props, forwardRef) => {
66
78
  const ref = React.useRef(null);
@@ -72,14 +84,7 @@ const TextField = React__default["default"].forwardRef((props, forwardRef) => {
72
84
  createCalendar: date.createCalendar
73
85
  });
74
86
  const { fieldProps } = reactAria.useDateField(props, state, ref);
75
- return /* @__PURE__ */ React__default["default"].createElement(designSystemFlex.Flex, {
76
- ...fieldProps,
77
- ref: forwardRef
78
- }, state.segments.map((segment, i) => /* @__PURE__ */ React__default["default"].createElement(FieldDateSegment, {
79
- key: i,
80
- segment,
81
- state
82
- })));
87
+ return /* @__PURE__ */ jsxRuntime.jsx(designSystemFlex.Flex, { ...fieldProps, ref: forwardRef, children: state.segments.map((segment, i) => /* @__PURE__ */ jsxRuntime.jsx(FieldDateSegment, { segment, state }, i)) });
83
88
  });
84
89
 
85
90
  const StyledButton = designSystemStitches.styled(designSystemPrimitive.Primitive.button, {
@@ -115,19 +120,20 @@ const Button = React__default["default"].forwardRef((props, forwardRef) => {
115
120
  const { buttonProps } = reactAria.useButton(props, forwardRef);
116
121
  const { focusProps } = reactAria.useFocusRing();
117
122
  const { children } = props;
118
- return /* @__PURE__ */ React__default["default"].createElement(StyledButton, {
119
- ...reactAria.mergeProps(buttonProps, focusProps),
120
- ref: forwardRef
121
- }, children);
123
+ return /* @__PURE__ */ jsxRuntime.jsx(StyledButton, { ...reactAria.mergeProps(buttonProps, focusProps), ref: forwardRef, children });
122
124
  });
123
125
  const FieldButton = React__default["default"].forwardRef((props, forwardRef) => {
124
126
  const { buttonProps } = reactAria.useButton(props, forwardRef);
125
127
  const { customButton = false, children } = props;
126
- return /* @__PURE__ */ React__default["default"].createElement(StyledFieldButton, {
127
- "data-custom": customButton ? "" : void 0,
128
- ...buttonProps,
129
- ref: forwardRef
130
- }, children);
128
+ return /* @__PURE__ */ jsxRuntime.jsx(
129
+ StyledFieldButton,
130
+ {
131
+ "data-custom": customButton ? "" : void 0,
132
+ ...buttonProps,
133
+ ref: forwardRef,
134
+ children
135
+ }
136
+ );
131
137
  });
132
138
 
133
139
  const Popover = (props) => {
@@ -141,19 +147,14 @@ const Popover = (props) => {
141
147
  },
142
148
  state
143
149
  );
144
- return /* @__PURE__ */ React__namespace.createElement(reactAria.Overlay, null, /* @__PURE__ */ React__namespace.createElement("div", {
145
- ...underlayProps
146
- }), /* @__PURE__ */ React__namespace.createElement("div", {
147
- ...popoverProps,
148
- ref
149
- }, /* @__PURE__ */ React__namespace.createElement(reactAria.DismissButton, {
150
- onDismiss: state.close
151
- }), /* @__PURE__ */ React__namespace.createElement("div", {
152
- ...dialogProps,
153
- ref
154
- }, children), /* @__PURE__ */ React__namespace.createElement(reactAria.DismissButton, {
155
- onDismiss: state.close
156
- })));
150
+ return /* @__PURE__ */ jsxRuntime.jsxs(reactAria.Overlay, { children: [
151
+ /* @__PURE__ */ jsxRuntime.jsx("div", { ...underlayProps }),
152
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { ...popoverProps, ref, children: [
153
+ /* @__PURE__ */ jsxRuntime.jsx(reactAria.DismissButton, { onDismiss: state.close }),
154
+ /* @__PURE__ */ jsxRuntime.jsx("div", { ...dialogProps, ref, children }),
155
+ /* @__PURE__ */ jsxRuntime.jsx(reactAria.DismissButton, { onDismiss: state.close })
156
+ ] })
157
+ ] });
157
158
  };
158
159
 
159
160
  const StyledRangePicker = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
@@ -207,15 +208,17 @@ const StyledPredefinedRanges = designSystemStitches.styled(designSystemPrimitive
207
208
  }
208
209
  });
209
210
 
210
- const PredefinedRanges = React__default["default"].forwardRef(({ range, onClick }, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(StyledPredefinedRanges, {
211
- ref: forwardRef
212
- }, range == null ? void 0 : range.map((date, i) => /* @__PURE__ */ React__default["default"].createElement(designSystemButton.Button, {
213
- variant: "ghost-prominent",
214
- size: "medium",
215
- key: i,
216
- type: "button",
217
- onClick: () => onClick(date)
218
- }, date.label))));
211
+ 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(
212
+ designSystemButton.Button,
213
+ {
214
+ variant: "ghost-prominent",
215
+ size: "medium",
216
+ type: "button",
217
+ onClick: () => onClick(date),
218
+ children: date.label
219
+ },
220
+ i
221
+ )) }));
219
222
 
220
223
  const StyledBody = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
221
224
  display: "inline-block",
@@ -272,15 +275,16 @@ const Header = ({
272
275
  year: "numeric",
273
276
  timeZone: state.timeZone
274
277
  });
275
- return /* @__PURE__ */ React__default["default"].createElement(StyledHeader, null, /* @__PURE__ */ React__default["default"].createElement(Button, {
276
- ...prevButtonProps
277
- }, /* @__PURE__ */ React__default["default"].createElement(designSystemIcons.IconChevronLeft, null)), /* @__PURE__ */ React__default["default"].createElement(StyledHeaderTitle, null, /* @__PURE__ */ React__default["default"].createElement("h2", null, monthDateFormatter.format(
278
- state.visibleRange.start.toDate(state.timeZone)
279
- ))), visibleMonths !== void 0 && /* @__PURE__ */ React__default["default"].createElement(StyledHeaderTitle, null, /* @__PURE__ */ React__default["default"].createElement("h2", null, monthDateFormatter.format(
280
- state.visibleRange.start.add({ months: 1 }).toDate(state.timeZone)
281
- ))), /* @__PURE__ */ React__default["default"].createElement(Button, {
282
- ...nextButtonProps
283
- }, /* @__PURE__ */ React__default["default"].createElement(designSystemIcons.IconChevronRight, null)));
278
+ return /* @__PURE__ */ jsxRuntime.jsxs(StyledHeader, { children: [
279
+ /* @__PURE__ */ jsxRuntime.jsx(Button, { ...prevButtonProps, children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconChevronLeft, {}) }),
280
+ /* @__PURE__ */ jsxRuntime.jsx(StyledHeaderTitle, { children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: monthDateFormatter.format(
281
+ state.visibleRange.start.toDate(state.timeZone)
282
+ ) }) }),
283
+ visibleMonths !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(StyledHeaderTitle, { children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: monthDateFormatter.format(
284
+ state.visibleRange.start.add({ months: 1 }).toDate(state.timeZone)
285
+ ) }) }),
286
+ /* @__PURE__ */ jsxRuntime.jsx(Button, { ...nextButtonProps, children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconChevronRight, {}) })
287
+ ] });
284
288
  };
285
289
 
286
290
  const StyledCellContent = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
@@ -363,23 +367,29 @@ const Cell = React__default["default"].forwardRef(
363
367
  const isRoundedLeft = isSelected && (isSelectionStart || dayOfWeek === 0 || date$1.day === 1);
364
368
  const isRoundedRight = isSelected && (isSelectionEnd || dayOfWeek === 6 || date$1.day === date$1.calendar.getDaysInMonth(date$1));
365
369
  const { focusProps } = reactAria.useFocusRing();
366
- return /* @__PURE__ */ React__default["default"].createElement("td", {
367
- ...cellProps
368
- }, /* @__PURE__ */ React__default["default"].createElement(StyledCell, {
369
- ...reactAria.mergeProps(buttonProps, focusProps),
370
- ref: forwardRef,
371
- "data-selected": isSelected ? "" : void 0,
372
- "data-selection-start": isRoundedLeft ? "" : void 0,
373
- "data-selection-end": isRoundedRight ? "" : void 0,
374
- "data-disabled": isDisabled ? "" : void 0,
375
- "data-hidden": isOutsideMonth ? "" : void 0
376
- }, /* @__PURE__ */ React__default["default"].createElement(StyledCellContent, {
377
- "data-selected-middle": isSelected && !(isSelectionStart || isSelectionEnd) ? "" : void 0,
378
- "data-selection": isSelectionStart || isSelectionEnd ? "" : void 0,
379
- "data-disabled": isDisabled ? "" : void 0,
380
- "data-today": date.isToday(date$1, date.getLocalTimeZone()) ? "" : void 0,
381
- "data-weekend": isWeekendDay ? "" : void 0
382
- }, formattedDate)));
370
+ return /* @__PURE__ */ jsxRuntime.jsx("td", { ...cellProps, children: /* @__PURE__ */ jsxRuntime.jsx(
371
+ StyledCell,
372
+ {
373
+ ...reactAria.mergeProps(buttonProps, focusProps),
374
+ ref: forwardRef,
375
+ "data-selected": isSelected ? "" : void 0,
376
+ "data-selection-start": isRoundedLeft ? "" : void 0,
377
+ "data-selection-end": isRoundedRight ? "" : void 0,
378
+ "data-disabled": isDisabled ? "" : void 0,
379
+ "data-hidden": isOutsideMonth ? "" : void 0,
380
+ children: /* @__PURE__ */ jsxRuntime.jsx(
381
+ StyledCellContent,
382
+ {
383
+ "data-selected-middle": isSelected && !(isSelectionStart || isSelectionEnd) ? "" : void 0,
384
+ "data-selection": isSelectionStart || isSelectionEnd ? "" : void 0,
385
+ "data-disabled": isDisabled ? "" : void 0,
386
+ "data-today": date.isToday(date$1, date.getLocalTimeZone()) ? "" : void 0,
387
+ "data-weekend": isWeekendDay ? "" : void 0,
388
+ children: formattedDate
389
+ }
390
+ )
391
+ }
392
+ ) });
383
393
  }
384
394
  );
385
395
 
@@ -402,26 +412,20 @@ const Grid = React__default["default"].forwardRef(
402
412
  state
403
413
  );
404
414
  const weeksInMonth = date.getWeeksInMonth(startDate, locale);
405
- return /* @__PURE__ */ React__default["default"].createElement(StyledGrid, {
406
- ref: forwardRef,
407
- ...gridProps,
408
- cellPadding: "0"
409
- }, /* @__PURE__ */ React__default["default"].createElement("thead", {
410
- ...headerProps
411
- }, /* @__PURE__ */ React__default["default"].createElement("tr", null, weekDays.map((day, i) => /* @__PURE__ */ React__default["default"].createElement(StyledDays, {
412
- key: i
413
- }, /* @__PURE__ */ React__default["default"].createElement("div", null, day))))), /* @__PURE__ */ React__default["default"].createElement("tbody", null, Array.from(Array(weeksInMonth).keys()).map((weekIndex) => /* @__PURE__ */ React__default["default"].createElement("tr", {
414
- key: weekIndex
415
- }, state.getDatesInWeek(weekIndex, startDate).map(
416
- (date, i) => date !== null ? /* @__PURE__ */ React__default["default"].createElement(Cell, {
417
- key: i,
418
- state,
419
- date,
420
- currentMonth: startDate
421
- }) : /* @__PURE__ */ React__default["default"].createElement("td", {
422
- key: i
423
- })
424
- )))));
415
+ return /* @__PURE__ */ jsxRuntime.jsxs(StyledGrid, { ref: forwardRef, ...gridProps, cellPadding: "0", children: [
416
+ /* @__PURE__ */ jsxRuntime.jsx("thead", { ...headerProps, children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: weekDays.map((day, i) => /* @__PURE__ */ jsxRuntime.jsx(StyledDays, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: day }) }, i)) }) }),
417
+ /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: Array.from(Array(weeksInMonth).keys()).map((weekIndex) => /* @__PURE__ */ jsxRuntime.jsx("tr", { children: state.getDatesInWeek(weekIndex, startDate).map(
418
+ (date, i) => date !== null ? /* @__PURE__ */ jsxRuntime.jsx(
419
+ Cell,
420
+ {
421
+ state,
422
+ date,
423
+ currentMonth: startDate
424
+ },
425
+ i
426
+ ) : /* @__PURE__ */ jsxRuntime.jsx("td", {}, i)
427
+ ) }, weekIndex)) })
428
+ ] });
425
429
  }
426
430
  );
427
431
 
@@ -485,56 +489,56 @@ const RangePicker = React__default["default"].forwardRef((props, forwardRef) =>
485
489
  state.close();
486
490
  }
487
491
  };
488
- return /* @__PURE__ */ React__default["default"].createElement(StyledRangePicker, {
489
- ref: forwardRef
490
- }, children === void 0 && /* @__PURE__ */ React__default["default"].createElement(StyledRangePickerInput$1, {
491
- ...groupProps,
492
- ref
493
- }, /* @__PURE__ */ React__default["default"].createElement(StyledRangePickerInputContent$1, null, /* @__PURE__ */ React__default["default"].createElement(TextField, {
494
- ...startFieldProps
495
- }), /* @__PURE__ */ React__default["default"].createElement("span", {
496
- "aria-hidden": "true"
497
- }, "\u2013"), /* @__PURE__ */ React__default["default"].createElement(TextField, {
498
- ...endFieldProps
499
- }), /* @__PURE__ */ React__default["default"].createElement(designSystemFlex.Flex, {
500
- css: { marginLeft: "auto" }
501
- }, /* @__PURE__ */ React__default["default"].createElement(FieldButton, {
502
- ...buttonProps
503
- }, /* @__PURE__ */ React__default["default"].createElement(designSystemIcons.IconCalendarBlank, null))))), children !== null && /* @__PURE__ */ React__default["default"].createElement("div", {
504
- ...groupProps,
505
- ref
506
- }, /* @__PURE__ */ React__default["default"].createElement(FieldButton, {
507
- ...buttonProps,
508
- customButton: true
509
- }, children)), state.isOpen && /* @__PURE__ */ React__default["default"].createElement(Popover, {
510
- triggerRef: ref,
511
- state,
512
- placement: "bottom start"
513
- }, /* @__PURE__ */ React__default["default"].createElement(StyledBody, {
514
- ref: forwardRef
515
- }, /* @__PURE__ */ React__default["default"].createElement(StyledBodyContent, null, predefinedRanges !== void 0 && /* @__PURE__ */ React__default["default"].createElement(PredefinedRanges, {
516
- range: predefinedRanges,
517
- onClick: rangeClick
518
- }), /* @__PURE__ */ React__default["default"].createElement(designSystemFlex.Flex, {
519
- direction: "column",
520
- ...calendarProps
521
- }, /* @__PURE__ */ React__default["default"].createElement(Header, {
522
- state: rangeState,
523
- prevButtonProps,
524
- nextButtonProps,
525
- visibleMonths
526
- }), /* @__PURE__ */ React__default["default"].createElement(StyledGridContent, null, /* @__PURE__ */ React__default["default"].createElement(StyledBodyContentLeft, null, /* @__PURE__ */ React__default["default"].createElement(Grid, {
527
- state: rangeState
528
- })), visibleMonths !== void 0 && /* @__PURE__ */ React__default["default"].createElement(StyledBodyContentRight, null, /* @__PURE__ */ React__default["default"].createElement(Grid, {
529
- onChange: change,
530
- state: rangeState,
531
- offset: { months: 1 }
532
- }))), onClear !== void 0 && /* @__PURE__ */ React__default["default"].createElement(StyledClearContent, null, /* @__PURE__ */ React__default["default"].createElement(designSystemButton.Button, {
533
- size: "medium",
534
- type: "button",
535
- onClick: clear,
536
- disabled: rangeState.value === null
537
- }, clearButtonText)))))));
492
+ return /* @__PURE__ */ jsxRuntime.jsxs(StyledRangePicker, { ref: forwardRef, children: [
493
+ children === void 0 && /* @__PURE__ */ jsxRuntime.jsx(StyledRangePickerInput$1, { ...groupProps, ref, children: /* @__PURE__ */ jsxRuntime.jsxs(StyledRangePickerInputContent$1, { children: [
494
+ /* @__PURE__ */ jsxRuntime.jsx(TextField, { ...startFieldProps }),
495
+ /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\u2013" }),
496
+ /* @__PURE__ */ jsxRuntime.jsx(TextField, { ...endFieldProps }),
497
+ /* @__PURE__ */ jsxRuntime.jsx(designSystemFlex.Flex, { css: { marginLeft: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsx(FieldButton, { ...buttonProps, children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCalendarBlank, {}) }) })
498
+ ] }) }),
499
+ children !== null && /* @__PURE__ */ jsxRuntime.jsx("div", { ...groupProps, ref, children: /* @__PURE__ */ jsxRuntime.jsx(FieldButton, { ...buttonProps, customButton: true, children }) }),
500
+ 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: [
501
+ predefinedRanges !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
502
+ PredefinedRanges,
503
+ {
504
+ range: predefinedRanges,
505
+ onClick: rangeClick
506
+ }
507
+ ),
508
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystemFlex.Flex, { direction: "column", ...calendarProps, children: [
509
+ /* @__PURE__ */ jsxRuntime.jsx(
510
+ Header,
511
+ {
512
+ state: rangeState,
513
+ prevButtonProps,
514
+ nextButtonProps,
515
+ visibleMonths
516
+ }
517
+ ),
518
+ /* @__PURE__ */ jsxRuntime.jsxs(StyledGridContent, { children: [
519
+ /* @__PURE__ */ jsxRuntime.jsx(StyledBodyContentLeft, { children: /* @__PURE__ */ jsxRuntime.jsx(Grid, { state: rangeState }) }),
520
+ visibleMonths !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(StyledBodyContentRight, { children: /* @__PURE__ */ jsxRuntime.jsx(
521
+ Grid,
522
+ {
523
+ onChange: change,
524
+ state: rangeState,
525
+ offset: { months: 1 }
526
+ }
527
+ ) })
528
+ ] }),
529
+ onClear !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(StyledClearContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
530
+ designSystemButton.Button,
531
+ {
532
+ size: "medium",
533
+ type: "button",
534
+ onClick: clear,
535
+ disabled: rangeState.value === null,
536
+ children: clearButtonText
537
+ }
538
+ ) })
539
+ ] })
540
+ ] }) }) })
541
+ ] });
538
542
  });
539
543
 
540
544
  const StyledRangePickerInput = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
@@ -592,30 +596,33 @@ const DatePickerBody = React__default["default"].forwardRef((props, forwardRef)
592
596
  },
593
597
  [state]
594
598
  );
595
- return /* @__PURE__ */ React__default["default"].createElement(StyledBody, {
596
- ref: forwardRef
597
- }, /* @__PURE__ */ React__default["default"].createElement(StyledBodyContent, {
598
- ...calendarProps
599
- }, predefinedRanges !== void 0 && /* @__PURE__ */ React__default["default"].createElement(PredefinedRanges, {
600
- range: predefinedRanges,
601
- onClick: dateClick
602
- }), /* @__PURE__ */ React__default["default"].createElement(designSystemFlex.Flex, {
603
- direction: "column"
604
- }, /* @__PURE__ */ React__default["default"].createElement(Header, {
605
- state,
606
- prevButtonProps,
607
- nextButtonProps,
608
- visibleMonths
609
- }), /* @__PURE__ */ React__default["default"].createElement(StyledGridContent, null, /* @__PURE__ */ React__default["default"].createElement(StyledBodyContentLeft, null, /* @__PURE__ */ React__default["default"].createElement(Grid, {
610
- state
611
- })), visibleMonths !== void 0 && /* @__PURE__ */ React__default["default"].createElement(StyledBodyContentRight, null, /* @__PURE__ */ React__default["default"].createElement(Grid, {
612
- state,
613
- offset: { months: 1 }
614
- }))), onClear !== void 0 && /* @__PURE__ */ React__default["default"].createElement(StyledClearContent, null, /* @__PURE__ */ React__default["default"].createElement(designSystemButton.Button, {
615
- size: "medium",
616
- onClick: onClear,
617
- disabled: state.value === null
618
- }, clearButtonText)))));
599
+ return /* @__PURE__ */ jsxRuntime.jsx(StyledBody, { ref: forwardRef, children: /* @__PURE__ */ jsxRuntime.jsxs(StyledBodyContent, { ...calendarProps, children: [
600
+ predefinedRanges !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(PredefinedRanges, { range: predefinedRanges, onClick: dateClick }),
601
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystemFlex.Flex, { direction: "column", children: [
602
+ /* @__PURE__ */ jsxRuntime.jsx(
603
+ Header,
604
+ {
605
+ state,
606
+ prevButtonProps,
607
+ nextButtonProps,
608
+ visibleMonths
609
+ }
610
+ ),
611
+ /* @__PURE__ */ jsxRuntime.jsxs(StyledGridContent, { children: [
612
+ /* @__PURE__ */ jsxRuntime.jsx(StyledBodyContentLeft, { children: /* @__PURE__ */ jsxRuntime.jsx(Grid, { state }) }),
613
+ visibleMonths !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(StyledBodyContentRight, { children: /* @__PURE__ */ jsxRuntime.jsx(Grid, { state, offset: { months: 1 } }) })
614
+ ] }),
615
+ onClear !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(StyledClearContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
616
+ designSystemButton.Button,
617
+ {
618
+ size: "medium",
619
+ onClick: onClear,
620
+ disabled: state.value === null,
621
+ children: clearButtonText
622
+ }
623
+ ) })
624
+ ] })
625
+ ] }) });
619
626
  });
620
627
 
621
628
  const DatePicker = React__default["default"].forwardRef((props, forwardRef) => {
@@ -644,61 +651,51 @@ const DatePicker = React__default["default"].forwardRef((props, forwardRef) => {
644
651
  onClear();
645
652
  }
646
653
  };
647
- return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, picker === "single" ? /* @__PURE__ */ React__default["default"].createElement(StyledDatePicker, {
648
- ref: forwardRef
649
- }, children === void 0 && /* @__PURE__ */ React__default["default"].createElement(StyledRangePickerInput, {
650
- ...groupProps,
651
- ref
652
- }, /* @__PURE__ */ React__default["default"].createElement(StyledRangePickerInputContent, null, /* @__PURE__ */ React__default["default"].createElement(TextField, {
653
- ...fieldProps
654
- }), /* @__PURE__ */ React__default["default"].createElement(designSystemFlex.Flex, {
655
- css: { marginLeft: "auto" }
656
- }, /* @__PURE__ */ React__default["default"].createElement(FieldButton, {
657
- ...buttonProps
658
- }, /* @__PURE__ */ React__default["default"].createElement(designSystemIcons.IconCalendarBlank, null))))), children !== void 0 && /* @__PURE__ */ React__default["default"].createElement("div", {
659
- ...groupProps,
660
- ref
661
- }, /* @__PURE__ */ React__default["default"].createElement(FieldButton, {
662
- ...buttonProps,
663
- customButton: true
664
- }, children)), state.isOpen && /* @__PURE__ */ React__default["default"].createElement(Popover, {
665
- triggerRef: ref,
666
- state,
667
- placement: "bottom start"
668
- }, /* @__PURE__ */ React__default["default"].createElement(DatePickerBody, {
669
- ...calendarProps,
670
- defaultValue,
671
- predefinedRanges,
672
- visibleMonths,
673
- onClear: onClear !== void 0 ? clearState : void 0,
674
- minDate,
675
- maxDate,
676
- clearButtonText: onClear !== void 0 ? clearButtonText : void 0,
677
- ref: forwardRef
678
- }))) : /* @__PURE__ */ React__default["default"].createElement(DatePickerBody, {
679
- ...calendarProps,
680
- ref: forwardRef,
681
- defaultValue,
682
- predefinedRanges,
683
- visibleMonths,
684
- onClear: onClear !== void 0 ? clearState : void 0,
685
- minDate,
686
- maxDate,
687
- clearButtonText: onClear !== void 0 ? clearButtonText : void 0
688
- }));
654
+ return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: picker === "single" ? /* @__PURE__ */ jsxRuntime.jsxs(StyledDatePicker, { ref: forwardRef, children: [
655
+ children === void 0 && /* @__PURE__ */ jsxRuntime.jsx(StyledRangePickerInput, { ...groupProps, ref, children: /* @__PURE__ */ jsxRuntime.jsxs(StyledRangePickerInputContent, { children: [
656
+ /* @__PURE__ */ jsxRuntime.jsx(TextField, { ...fieldProps }),
657
+ /* @__PURE__ */ jsxRuntime.jsx(designSystemFlex.Flex, { css: { marginLeft: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsx(FieldButton, { ...buttonProps, children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCalendarBlank, {}) }) })
658
+ ] }) }),
659
+ children !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { ...groupProps, ref, children: /* @__PURE__ */ jsxRuntime.jsx(FieldButton, { ...buttonProps, customButton: true, children }) }),
660
+ state.isOpen && /* @__PURE__ */ jsxRuntime.jsx(Popover, { triggerRef: ref, state, placement: "bottom start", children: /* @__PURE__ */ jsxRuntime.jsx(
661
+ DatePickerBody,
662
+ {
663
+ ...calendarProps,
664
+ defaultValue,
665
+ predefinedRanges,
666
+ visibleMonths,
667
+ onClear: onClear !== void 0 ? clearState : void 0,
668
+ minDate,
669
+ maxDate,
670
+ clearButtonText: onClear !== void 0 ? clearButtonText : void 0,
671
+ ref: forwardRef
672
+ }
673
+ ) })
674
+ ] }) : /* @__PURE__ */ jsxRuntime.jsx(
675
+ DatePickerBody,
676
+ {
677
+ ...calendarProps,
678
+ ref: forwardRef,
679
+ defaultValue,
680
+ predefinedRanges,
681
+ visibleMonths,
682
+ onClear: onClear !== void 0 ? clearState : void 0,
683
+ minDate,
684
+ maxDate,
685
+ clearButtonText: onClear !== void 0 ? clearButtonText : void 0
686
+ }
687
+ ) });
689
688
  });
690
689
 
691
690
  const StyledCalendar = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {});
692
- const Calendar = React__default["default"].forwardRef(({ picker, defaultValue, ...props }, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(StyledCalendar, {
693
- ref: forwardRef
694
- }, picker === "range" ? /* @__PURE__ */ React__default["default"].createElement(RangePicker, {
695
- defaultValue,
696
- ...props
697
- }) : /* @__PURE__ */ React__default["default"].createElement(DatePicker, {
698
- defaultValue,
699
- ...props,
700
- picker
701
- })));
691
+ 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(
692
+ DatePicker,
693
+ {
694
+ defaultValue,
695
+ ...props,
696
+ picker
697
+ }
698
+ ) }));
702
699
 
703
700
  exports.Calendar = Calendar;
704
701
  //# sourceMappingURL=main.js.map