@mirohq/design-system-calendar 0.1.8 → 0.1.9

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 +216 -219
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +216 -219
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +3 -3
  6. package/package.json +2 -2
package/dist/module.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
1
2
  import { Primitive } from '@mirohq/design-system-primitive';
2
3
  import { styled } from '@mirohq/design-system-stitches';
3
4
  import * as React from 'react';
@@ -27,14 +28,25 @@ const StyledDataSegment = styled(Primitive.div, {
27
28
  const FieldDateSegment = ({ segment, state }) => {
28
29
  const ref = useRef(null);
29
30
  const { segmentProps } = useDateSegment(segment, state, ref);
30
- return /* @__PURE__ */ React__default.createElement(StyledDataSegment, {
31
- ...segmentProps,
32
- ref,
33
- "data-value": state.value !== null ? "" : void 0
34
- }, /* @__PURE__ */ React__default.createElement("span", {
35
- "aria-hidden": "true",
36
- "data-placeholder": !segment.isPlaceholder ? "" : void 0
37
- }, segment.placeholder), segment.isPlaceholder ? "" : segment.text);
31
+ return /* @__PURE__ */ jsxs(
32
+ StyledDataSegment,
33
+ {
34
+ ...segmentProps,
35
+ ref,
36
+ "data-value": state.value !== null ? "" : void 0,
37
+ children: [
38
+ /* @__PURE__ */ jsx(
39
+ "span",
40
+ {
41
+ "aria-hidden": "true",
42
+ "data-placeholder": !segment.isPlaceholder ? "" : void 0,
43
+ children: segment.placeholder
44
+ }
45
+ ),
46
+ segment.isPlaceholder ? "" : segment.text
47
+ ]
48
+ }
49
+ );
38
50
  };
39
51
  const TextField = React__default.forwardRef((props, forwardRef) => {
40
52
  const ref = useRef(null);
@@ -46,14 +58,7 @@ const TextField = React__default.forwardRef((props, forwardRef) => {
46
58
  createCalendar
47
59
  });
48
60
  const { fieldProps } = useDateField(props, state, ref);
49
- return /* @__PURE__ */ React__default.createElement(Flex, {
50
- ...fieldProps,
51
- ref: forwardRef
52
- }, state.segments.map((segment, i) => /* @__PURE__ */ React__default.createElement(FieldDateSegment, {
53
- key: i,
54
- segment,
55
- state
56
- })));
61
+ return /* @__PURE__ */ jsx(Flex, { ...fieldProps, ref: forwardRef, children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(FieldDateSegment, { segment, state }, i)) });
57
62
  });
58
63
 
59
64
  const StyledButton = styled(Primitive.button, {
@@ -89,19 +94,20 @@ const Button = React__default.forwardRef((props, forwardRef) => {
89
94
  const { buttonProps } = useButton(props, forwardRef);
90
95
  const { focusProps } = useFocusRing();
91
96
  const { children } = props;
92
- return /* @__PURE__ */ React__default.createElement(StyledButton, {
93
- ...mergeProps(buttonProps, focusProps),
94
- ref: forwardRef
95
- }, children);
97
+ return /* @__PURE__ */ jsx(StyledButton, { ...mergeProps(buttonProps, focusProps), ref: forwardRef, children });
96
98
  });
97
99
  const FieldButton = React__default.forwardRef((props, forwardRef) => {
98
100
  const { buttonProps } = useButton(props, forwardRef);
99
101
  const { customButton = false, children } = props;
100
- return /* @__PURE__ */ React__default.createElement(StyledFieldButton, {
101
- "data-custom": customButton ? "" : void 0,
102
- ...buttonProps,
103
- ref: forwardRef
104
- }, children);
102
+ return /* @__PURE__ */ jsx(
103
+ StyledFieldButton,
104
+ {
105
+ "data-custom": customButton ? "" : void 0,
106
+ ...buttonProps,
107
+ ref: forwardRef,
108
+ children
109
+ }
110
+ );
105
111
  });
106
112
 
107
113
  const Popover = (props) => {
@@ -115,19 +121,14 @@ const Popover = (props) => {
115
121
  },
116
122
  state
117
123
  );
118
- return /* @__PURE__ */ React.createElement(Overlay, null, /* @__PURE__ */ React.createElement("div", {
119
- ...underlayProps
120
- }), /* @__PURE__ */ React.createElement("div", {
121
- ...popoverProps,
122
- ref
123
- }, /* @__PURE__ */ React.createElement(DismissButton, {
124
- onDismiss: state.close
125
- }), /* @__PURE__ */ React.createElement("div", {
126
- ...dialogProps,
127
- ref
128
- }, children), /* @__PURE__ */ React.createElement(DismissButton, {
129
- onDismiss: state.close
130
- })));
124
+ return /* @__PURE__ */ jsxs(Overlay, { children: [
125
+ /* @__PURE__ */ jsx("div", { ...underlayProps }),
126
+ /* @__PURE__ */ jsxs("div", { ...popoverProps, ref, children: [
127
+ /* @__PURE__ */ jsx(DismissButton, { onDismiss: state.close }),
128
+ /* @__PURE__ */ jsx("div", { ...dialogProps, ref, children }),
129
+ /* @__PURE__ */ jsx(DismissButton, { onDismiss: state.close })
130
+ ] })
131
+ ] });
131
132
  };
132
133
 
133
134
  const StyledRangePicker = styled(Primitive.div, {
@@ -181,15 +182,17 @@ const StyledPredefinedRanges = styled(Primitive.div, {
181
182
  }
182
183
  });
183
184
 
184
- const PredefinedRanges = React__default.forwardRef(({ range, onClick }, forwardRef) => /* @__PURE__ */ React__default.createElement(StyledPredefinedRanges, {
185
- ref: forwardRef
186
- }, range == null ? void 0 : range.map((date, i) => /* @__PURE__ */ React__default.createElement(Button$1, {
187
- variant: "ghost-prominent",
188
- size: "medium",
189
- key: i,
190
- type: "button",
191
- onClick: () => onClick(date)
192
- }, date.label))));
185
+ const PredefinedRanges = React__default.forwardRef(({ range, onClick }, forwardRef) => /* @__PURE__ */ jsx(StyledPredefinedRanges, { ref: forwardRef, children: range == null ? void 0 : range.map((date, i) => /* @__PURE__ */ jsx(
186
+ Button$1,
187
+ {
188
+ variant: "ghost-prominent",
189
+ size: "medium",
190
+ type: "button",
191
+ onClick: () => onClick(date),
192
+ children: date.label
193
+ },
194
+ i
195
+ )) }));
193
196
 
194
197
  const StyledBody = styled(Primitive.div, {
195
198
  display: "inline-block",
@@ -246,15 +249,16 @@ const Header = ({
246
249
  year: "numeric",
247
250
  timeZone: state.timeZone
248
251
  });
249
- return /* @__PURE__ */ React__default.createElement(StyledHeader, null, /* @__PURE__ */ React__default.createElement(Button, {
250
- ...prevButtonProps
251
- }, /* @__PURE__ */ React__default.createElement(IconChevronLeft, null)), /* @__PURE__ */ React__default.createElement(StyledHeaderTitle, null, /* @__PURE__ */ React__default.createElement("h2", null, monthDateFormatter.format(
252
- state.visibleRange.start.toDate(state.timeZone)
253
- ))), visibleMonths !== void 0 && /* @__PURE__ */ React__default.createElement(StyledHeaderTitle, null, /* @__PURE__ */ React__default.createElement("h2", null, monthDateFormatter.format(
254
- state.visibleRange.start.add({ months: 1 }).toDate(state.timeZone)
255
- ))), /* @__PURE__ */ React__default.createElement(Button, {
256
- ...nextButtonProps
257
- }, /* @__PURE__ */ React__default.createElement(IconChevronRight, null)));
252
+ return /* @__PURE__ */ jsxs(StyledHeader, { children: [
253
+ /* @__PURE__ */ jsx(Button, { ...prevButtonProps, children: /* @__PURE__ */ jsx(IconChevronLeft, {}) }),
254
+ /* @__PURE__ */ jsx(StyledHeaderTitle, { children: /* @__PURE__ */ jsx("h2", { children: monthDateFormatter.format(
255
+ state.visibleRange.start.toDate(state.timeZone)
256
+ ) }) }),
257
+ visibleMonths !== void 0 && /* @__PURE__ */ jsx(StyledHeaderTitle, { children: /* @__PURE__ */ jsx("h2", { children: monthDateFormatter.format(
258
+ state.visibleRange.start.add({ months: 1 }).toDate(state.timeZone)
259
+ ) }) }),
260
+ /* @__PURE__ */ jsx(Button, { ...nextButtonProps, children: /* @__PURE__ */ jsx(IconChevronRight, {}) })
261
+ ] });
258
262
  };
259
263
 
260
264
  const StyledCellContent = styled(Primitive.div, {
@@ -337,23 +341,29 @@ const Cell = React__default.forwardRef(
337
341
  const isRoundedLeft = isSelected && (isSelectionStart || dayOfWeek === 0 || date.day === 1);
338
342
  const isRoundedRight = isSelected && (isSelectionEnd || dayOfWeek === 6 || date.day === date.calendar.getDaysInMonth(date));
339
343
  const { focusProps } = useFocusRing();
340
- return /* @__PURE__ */ React__default.createElement("td", {
341
- ...cellProps
342
- }, /* @__PURE__ */ React__default.createElement(StyledCell, {
343
- ...mergeProps(buttonProps, focusProps),
344
- ref: forwardRef,
345
- "data-selected": isSelected ? "" : void 0,
346
- "data-selection-start": isRoundedLeft ? "" : void 0,
347
- "data-selection-end": isRoundedRight ? "" : void 0,
348
- "data-disabled": isDisabled ? "" : void 0,
349
- "data-hidden": isOutsideMonth ? "" : void 0
350
- }, /* @__PURE__ */ React__default.createElement(StyledCellContent, {
351
- "data-selected-middle": isSelected && !(isSelectionStart || isSelectionEnd) ? "" : void 0,
352
- "data-selection": isSelectionStart || isSelectionEnd ? "" : void 0,
353
- "data-disabled": isDisabled ? "" : void 0,
354
- "data-today": isToday(date, getLocalTimeZone()) ? "" : void 0,
355
- "data-weekend": isWeekendDay ? "" : void 0
356
- }, formattedDate)));
344
+ return /* @__PURE__ */ jsx("td", { ...cellProps, children: /* @__PURE__ */ jsx(
345
+ StyledCell,
346
+ {
347
+ ...mergeProps(buttonProps, focusProps),
348
+ ref: forwardRef,
349
+ "data-selected": isSelected ? "" : void 0,
350
+ "data-selection-start": isRoundedLeft ? "" : void 0,
351
+ "data-selection-end": isRoundedRight ? "" : void 0,
352
+ "data-disabled": isDisabled ? "" : void 0,
353
+ "data-hidden": isOutsideMonth ? "" : void 0,
354
+ children: /* @__PURE__ */ jsx(
355
+ StyledCellContent,
356
+ {
357
+ "data-selected-middle": isSelected && !(isSelectionStart || isSelectionEnd) ? "" : void 0,
358
+ "data-selection": isSelectionStart || isSelectionEnd ? "" : void 0,
359
+ "data-disabled": isDisabled ? "" : void 0,
360
+ "data-today": isToday(date, getLocalTimeZone()) ? "" : void 0,
361
+ "data-weekend": isWeekendDay ? "" : void 0,
362
+ children: formattedDate
363
+ }
364
+ )
365
+ }
366
+ ) });
357
367
  }
358
368
  );
359
369
 
@@ -376,26 +386,20 @@ const Grid = React__default.forwardRef(
376
386
  state
377
387
  );
378
388
  const weeksInMonth = getWeeksInMonth(startDate, locale);
379
- return /* @__PURE__ */ React__default.createElement(StyledGrid, {
380
- ref: forwardRef,
381
- ...gridProps,
382
- cellPadding: "0"
383
- }, /* @__PURE__ */ React__default.createElement("thead", {
384
- ...headerProps
385
- }, /* @__PURE__ */ React__default.createElement("tr", null, weekDays.map((day, i) => /* @__PURE__ */ React__default.createElement(StyledDays, {
386
- key: i
387
- }, /* @__PURE__ */ React__default.createElement("div", null, day))))), /* @__PURE__ */ React__default.createElement("tbody", null, Array.from(Array(weeksInMonth).keys()).map((weekIndex) => /* @__PURE__ */ React__default.createElement("tr", {
388
- key: weekIndex
389
- }, state.getDatesInWeek(weekIndex, startDate).map(
390
- (date, i) => date !== null ? /* @__PURE__ */ React__default.createElement(Cell, {
391
- key: i,
392
- state,
393
- date,
394
- currentMonth: startDate
395
- }) : /* @__PURE__ */ React__default.createElement("td", {
396
- key: i
397
- })
398
- )))));
389
+ return /* @__PURE__ */ jsxs(StyledGrid, { ref: forwardRef, ...gridProps, cellPadding: "0", children: [
390
+ /* @__PURE__ */ jsx("thead", { ...headerProps, children: /* @__PURE__ */ jsx("tr", { children: weekDays.map((day, i) => /* @__PURE__ */ jsx(StyledDays, { children: /* @__PURE__ */ jsx("div", { children: day }) }, i)) }) }),
391
+ /* @__PURE__ */ jsx("tbody", { children: Array.from(Array(weeksInMonth).keys()).map((weekIndex) => /* @__PURE__ */ jsx("tr", { children: state.getDatesInWeek(weekIndex, startDate).map(
392
+ (date, i) => date !== null ? /* @__PURE__ */ jsx(
393
+ Cell,
394
+ {
395
+ state,
396
+ date,
397
+ currentMonth: startDate
398
+ },
399
+ i
400
+ ) : /* @__PURE__ */ jsx("td", {}, i)
401
+ ) }, weekIndex)) })
402
+ ] });
399
403
  }
400
404
  );
401
405
 
@@ -459,56 +463,56 @@ const RangePicker = React__default.forwardRef((props, forwardRef) => {
459
463
  state.close();
460
464
  }
461
465
  };
462
- return /* @__PURE__ */ React__default.createElement(StyledRangePicker, {
463
- ref: forwardRef
464
- }, children === void 0 && /* @__PURE__ */ React__default.createElement(StyledRangePickerInput$1, {
465
- ...groupProps,
466
- ref
467
- }, /* @__PURE__ */ React__default.createElement(StyledRangePickerInputContent$1, null, /* @__PURE__ */ React__default.createElement(TextField, {
468
- ...startFieldProps
469
- }), /* @__PURE__ */ React__default.createElement("span", {
470
- "aria-hidden": "true"
471
- }, "\u2013"), /* @__PURE__ */ React__default.createElement(TextField, {
472
- ...endFieldProps
473
- }), /* @__PURE__ */ React__default.createElement(Flex, {
474
- css: { marginLeft: "auto" }
475
- }, /* @__PURE__ */ React__default.createElement(FieldButton, {
476
- ...buttonProps
477
- }, /* @__PURE__ */ React__default.createElement(IconCalendarBlank, null))))), children !== null && /* @__PURE__ */ React__default.createElement("div", {
478
- ...groupProps,
479
- ref
480
- }, /* @__PURE__ */ React__default.createElement(FieldButton, {
481
- ...buttonProps,
482
- customButton: true
483
- }, children)), state.isOpen && /* @__PURE__ */ React__default.createElement(Popover, {
484
- triggerRef: ref,
485
- state,
486
- placement: "bottom start"
487
- }, /* @__PURE__ */ React__default.createElement(StyledBody, {
488
- ref: forwardRef
489
- }, /* @__PURE__ */ React__default.createElement(StyledBodyContent, null, predefinedRanges !== void 0 && /* @__PURE__ */ React__default.createElement(PredefinedRanges, {
490
- range: predefinedRanges,
491
- onClick: rangeClick
492
- }), /* @__PURE__ */ React__default.createElement(Flex, {
493
- direction: "column",
494
- ...calendarProps
495
- }, /* @__PURE__ */ React__default.createElement(Header, {
496
- state: rangeState,
497
- prevButtonProps,
498
- nextButtonProps,
499
- visibleMonths
500
- }), /* @__PURE__ */ React__default.createElement(StyledGridContent, null, /* @__PURE__ */ React__default.createElement(StyledBodyContentLeft, null, /* @__PURE__ */ React__default.createElement(Grid, {
501
- state: rangeState
502
- })), visibleMonths !== void 0 && /* @__PURE__ */ React__default.createElement(StyledBodyContentRight, null, /* @__PURE__ */ React__default.createElement(Grid, {
503
- onChange: change,
504
- state: rangeState,
505
- offset: { months: 1 }
506
- }))), onClear !== void 0 && /* @__PURE__ */ React__default.createElement(StyledClearContent, null, /* @__PURE__ */ React__default.createElement(Button$1, {
507
- size: "medium",
508
- type: "button",
509
- onClick: clear,
510
- disabled: rangeState.value === null
511
- }, clearButtonText)))))));
466
+ return /* @__PURE__ */ jsxs(StyledRangePicker, { ref: forwardRef, children: [
467
+ children === void 0 && /* @__PURE__ */ jsx(StyledRangePickerInput$1, { ...groupProps, ref, children: /* @__PURE__ */ jsxs(StyledRangePickerInputContent$1, { children: [
468
+ /* @__PURE__ */ jsx(TextField, { ...startFieldProps }),
469
+ /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2013" }),
470
+ /* @__PURE__ */ jsx(TextField, { ...endFieldProps }),
471
+ /* @__PURE__ */ jsx(Flex, { css: { marginLeft: "auto" }, children: /* @__PURE__ */ jsx(FieldButton, { ...buttonProps, children: /* @__PURE__ */ jsx(IconCalendarBlank, {}) }) })
472
+ ] }) }),
473
+ children !== null && /* @__PURE__ */ jsx("div", { ...groupProps, ref, children: /* @__PURE__ */ jsx(FieldButton, { ...buttonProps, customButton: true, children }) }),
474
+ state.isOpen && /* @__PURE__ */ jsx(Popover, { triggerRef: ref, state, placement: "bottom start", children: /* @__PURE__ */ jsx(StyledBody, { ref: forwardRef, children: /* @__PURE__ */ jsxs(StyledBodyContent, { children: [
475
+ predefinedRanges !== void 0 && /* @__PURE__ */ jsx(
476
+ PredefinedRanges,
477
+ {
478
+ range: predefinedRanges,
479
+ onClick: rangeClick
480
+ }
481
+ ),
482
+ /* @__PURE__ */ jsxs(Flex, { direction: "column", ...calendarProps, children: [
483
+ /* @__PURE__ */ jsx(
484
+ Header,
485
+ {
486
+ state: rangeState,
487
+ prevButtonProps,
488
+ nextButtonProps,
489
+ visibleMonths
490
+ }
491
+ ),
492
+ /* @__PURE__ */ jsxs(StyledGridContent, { children: [
493
+ /* @__PURE__ */ jsx(StyledBodyContentLeft, { children: /* @__PURE__ */ jsx(Grid, { state: rangeState }) }),
494
+ visibleMonths !== void 0 && /* @__PURE__ */ jsx(StyledBodyContentRight, { children: /* @__PURE__ */ jsx(
495
+ Grid,
496
+ {
497
+ onChange: change,
498
+ state: rangeState,
499
+ offset: { months: 1 }
500
+ }
501
+ ) })
502
+ ] }),
503
+ onClear !== void 0 && /* @__PURE__ */ jsx(StyledClearContent, { children: /* @__PURE__ */ jsx(
504
+ Button$1,
505
+ {
506
+ size: "medium",
507
+ type: "button",
508
+ onClick: clear,
509
+ disabled: rangeState.value === null,
510
+ children: clearButtonText
511
+ }
512
+ ) })
513
+ ] })
514
+ ] }) }) })
515
+ ] });
512
516
  });
513
517
 
514
518
  const StyledRangePickerInput = styled(Primitive.div, {
@@ -566,30 +570,33 @@ const DatePickerBody = React__default.forwardRef((props, forwardRef) => {
566
570
  },
567
571
  [state]
568
572
  );
569
- return /* @__PURE__ */ React__default.createElement(StyledBody, {
570
- ref: forwardRef
571
- }, /* @__PURE__ */ React__default.createElement(StyledBodyContent, {
572
- ...calendarProps
573
- }, predefinedRanges !== void 0 && /* @__PURE__ */ React__default.createElement(PredefinedRanges, {
574
- range: predefinedRanges,
575
- onClick: dateClick
576
- }), /* @__PURE__ */ React__default.createElement(Flex, {
577
- direction: "column"
578
- }, /* @__PURE__ */ React__default.createElement(Header, {
579
- state,
580
- prevButtonProps,
581
- nextButtonProps,
582
- visibleMonths
583
- }), /* @__PURE__ */ React__default.createElement(StyledGridContent, null, /* @__PURE__ */ React__default.createElement(StyledBodyContentLeft, null, /* @__PURE__ */ React__default.createElement(Grid, {
584
- state
585
- })), visibleMonths !== void 0 && /* @__PURE__ */ React__default.createElement(StyledBodyContentRight, null, /* @__PURE__ */ React__default.createElement(Grid, {
586
- state,
587
- offset: { months: 1 }
588
- }))), onClear !== void 0 && /* @__PURE__ */ React__default.createElement(StyledClearContent, null, /* @__PURE__ */ React__default.createElement(Button$1, {
589
- size: "medium",
590
- onClick: onClear,
591
- disabled: state.value === null
592
- }, clearButtonText)))));
573
+ return /* @__PURE__ */ jsx(StyledBody, { ref: forwardRef, children: /* @__PURE__ */ jsxs(StyledBodyContent, { ...calendarProps, children: [
574
+ predefinedRanges !== void 0 && /* @__PURE__ */ jsx(PredefinedRanges, { range: predefinedRanges, onClick: dateClick }),
575
+ /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
576
+ /* @__PURE__ */ jsx(
577
+ Header,
578
+ {
579
+ state,
580
+ prevButtonProps,
581
+ nextButtonProps,
582
+ visibleMonths
583
+ }
584
+ ),
585
+ /* @__PURE__ */ jsxs(StyledGridContent, { children: [
586
+ /* @__PURE__ */ jsx(StyledBodyContentLeft, { children: /* @__PURE__ */ jsx(Grid, { state }) }),
587
+ visibleMonths !== void 0 && /* @__PURE__ */ jsx(StyledBodyContentRight, { children: /* @__PURE__ */ jsx(Grid, { state, offset: { months: 1 } }) })
588
+ ] }),
589
+ onClear !== void 0 && /* @__PURE__ */ jsx(StyledClearContent, { children: /* @__PURE__ */ jsx(
590
+ Button$1,
591
+ {
592
+ size: "medium",
593
+ onClick: onClear,
594
+ disabled: state.value === null,
595
+ children: clearButtonText
596
+ }
597
+ ) })
598
+ ] })
599
+ ] }) });
593
600
  });
594
601
 
595
602
  const DatePicker = React__default.forwardRef((props, forwardRef) => {
@@ -618,61 +625,51 @@ const DatePicker = React__default.forwardRef((props, forwardRef) => {
618
625
  onClear();
619
626
  }
620
627
  };
621
- return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, picker === "single" ? /* @__PURE__ */ React__default.createElement(StyledDatePicker, {
622
- ref: forwardRef
623
- }, children === void 0 && /* @__PURE__ */ React__default.createElement(StyledRangePickerInput, {
624
- ...groupProps,
625
- ref
626
- }, /* @__PURE__ */ React__default.createElement(StyledRangePickerInputContent, null, /* @__PURE__ */ React__default.createElement(TextField, {
627
- ...fieldProps
628
- }), /* @__PURE__ */ React__default.createElement(Flex, {
629
- css: { marginLeft: "auto" }
630
- }, /* @__PURE__ */ React__default.createElement(FieldButton, {
631
- ...buttonProps
632
- }, /* @__PURE__ */ React__default.createElement(IconCalendarBlank, null))))), children !== void 0 && /* @__PURE__ */ React__default.createElement("div", {
633
- ...groupProps,
634
- ref
635
- }, /* @__PURE__ */ React__default.createElement(FieldButton, {
636
- ...buttonProps,
637
- customButton: true
638
- }, children)), state.isOpen && /* @__PURE__ */ React__default.createElement(Popover, {
639
- triggerRef: ref,
640
- state,
641
- placement: "bottom start"
642
- }, /* @__PURE__ */ React__default.createElement(DatePickerBody, {
643
- ...calendarProps,
644
- defaultValue,
645
- predefinedRanges,
646
- visibleMonths,
647
- onClear: onClear !== void 0 ? clearState : void 0,
648
- minDate,
649
- maxDate,
650
- clearButtonText: onClear !== void 0 ? clearButtonText : void 0,
651
- ref: forwardRef
652
- }))) : /* @__PURE__ */ React__default.createElement(DatePickerBody, {
653
- ...calendarProps,
654
- ref: forwardRef,
655
- defaultValue,
656
- predefinedRanges,
657
- visibleMonths,
658
- onClear: onClear !== void 0 ? clearState : void 0,
659
- minDate,
660
- maxDate,
661
- clearButtonText: onClear !== void 0 ? clearButtonText : void 0
662
- }));
628
+ return /* @__PURE__ */ jsx(Fragment, { children: picker === "single" ? /* @__PURE__ */ jsxs(StyledDatePicker, { ref: forwardRef, children: [
629
+ children === void 0 && /* @__PURE__ */ jsx(StyledRangePickerInput, { ...groupProps, ref, children: /* @__PURE__ */ jsxs(StyledRangePickerInputContent, { children: [
630
+ /* @__PURE__ */ jsx(TextField, { ...fieldProps }),
631
+ /* @__PURE__ */ jsx(Flex, { css: { marginLeft: "auto" }, children: /* @__PURE__ */ jsx(FieldButton, { ...buttonProps, children: /* @__PURE__ */ jsx(IconCalendarBlank, {}) }) })
632
+ ] }) }),
633
+ children !== void 0 && /* @__PURE__ */ jsx("div", { ...groupProps, ref, children: /* @__PURE__ */ jsx(FieldButton, { ...buttonProps, customButton: true, children }) }),
634
+ state.isOpen && /* @__PURE__ */ jsx(Popover, { triggerRef: ref, state, placement: "bottom start", children: /* @__PURE__ */ jsx(
635
+ DatePickerBody,
636
+ {
637
+ ...calendarProps,
638
+ defaultValue,
639
+ predefinedRanges,
640
+ visibleMonths,
641
+ onClear: onClear !== void 0 ? clearState : void 0,
642
+ minDate,
643
+ maxDate,
644
+ clearButtonText: onClear !== void 0 ? clearButtonText : void 0,
645
+ ref: forwardRef
646
+ }
647
+ ) })
648
+ ] }) : /* @__PURE__ */ jsx(
649
+ DatePickerBody,
650
+ {
651
+ ...calendarProps,
652
+ ref: forwardRef,
653
+ defaultValue,
654
+ predefinedRanges,
655
+ visibleMonths,
656
+ onClear: onClear !== void 0 ? clearState : void 0,
657
+ minDate,
658
+ maxDate,
659
+ clearButtonText: onClear !== void 0 ? clearButtonText : void 0
660
+ }
661
+ ) });
663
662
  });
664
663
 
665
664
  const StyledCalendar = styled(Primitive.div, {});
666
- const Calendar = React__default.forwardRef(({ picker, defaultValue, ...props }, forwardRef) => /* @__PURE__ */ React__default.createElement(StyledCalendar, {
667
- ref: forwardRef
668
- }, picker === "range" ? /* @__PURE__ */ React__default.createElement(RangePicker, {
669
- defaultValue,
670
- ...props
671
- }) : /* @__PURE__ */ React__default.createElement(DatePicker, {
672
- defaultValue,
673
- ...props,
674
- picker
675
- })));
665
+ const Calendar = React__default.forwardRef(({ picker, defaultValue, ...props }, forwardRef) => /* @__PURE__ */ jsx(StyledCalendar, { ref: forwardRef, children: picker === "range" ? /* @__PURE__ */ jsx(RangePicker, { defaultValue, ...props }) : /* @__PURE__ */ jsx(
666
+ DatePicker,
667
+ {
668
+ defaultValue,
669
+ ...props,
670
+ picker
671
+ }
672
+ ) }));
676
673
 
677
674
  export { Calendar };
678
675
  //# sourceMappingURL=module.js.map