@salt-ds/lab 1.0.0-alpha.33 → 1.0.0-alpha.34

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 (124) hide show
  1. package/css/salt-lab.css +106 -223
  2. package/dist-cjs/calendar/Calendar.css.js +1 -1
  3. package/dist-cjs/calendar/internal/CalendarCarousel.css.js +1 -1
  4. package/dist-cjs/calendar/internal/CalendarCarousel.js +5 -29
  5. package/dist-cjs/calendar/internal/CalendarCarousel.js.map +1 -1
  6. package/dist-cjs/calendar/internal/CalendarContext.js.map +1 -1
  7. package/dist-cjs/calendar/internal/CalendarDay.css.js +1 -1
  8. package/dist-cjs/calendar/internal/CalendarDay.js +18 -19
  9. package/dist-cjs/calendar/internal/CalendarDay.js.map +1 -1
  10. package/dist-cjs/calendar/internal/CalendarMonth.css.js +1 -1
  11. package/dist-cjs/calendar/internal/CalendarMonth.js +0 -2
  12. package/dist-cjs/calendar/internal/CalendarMonth.js.map +1 -1
  13. package/dist-cjs/calendar/internal/CalendarNavigation.css.js +1 -1
  14. package/dist-cjs/calendar/internal/CalendarNavigation.js +74 -81
  15. package/dist-cjs/calendar/internal/CalendarNavigation.js.map +1 -1
  16. package/dist-cjs/calendar/internal/CalendarWeekHeader.css.js +1 -1
  17. package/dist-cjs/calendar/useCalendar.js +14 -8
  18. package/dist-cjs/calendar/useCalendar.js.map +1 -1
  19. package/dist-cjs/calendar/useCalendarDay.js +15 -5
  20. package/dist-cjs/calendar/useCalendarDay.js.map +1 -1
  21. package/dist-cjs/calendar/useSelection.js.map +1 -1
  22. package/dist-cjs/combo-box-next/ComboBoxNext.js +36 -13
  23. package/dist-cjs/combo-box-next/ComboBoxNext.js.map +1 -1
  24. package/dist-cjs/combo-box-next/useComboBoxNext.js +16 -15
  25. package/dist-cjs/combo-box-next/useComboBoxNext.js.map +1 -1
  26. package/dist-cjs/dialog/Dialog.css.js +1 -1
  27. package/dist-cjs/dialog/DialogHeader.css.js +6 -0
  28. package/dist-cjs/dialog/DialogHeader.css.js.map +1 -0
  29. package/dist-cjs/dialog/{DialogTitle.js → DialogHeader.js} +16 -16
  30. package/dist-cjs/dialog/DialogHeader.js.map +1 -0
  31. package/dist-cjs/dropdown-next/DropdownNext.js +7 -8
  32. package/dist-cjs/dropdown-next/DropdownNext.js.map +1 -1
  33. package/dist-cjs/index.js +2 -6
  34. package/dist-cjs/index.js.map +1 -1
  35. package/dist-cjs/list-control/ListControlContext.js +3 -1
  36. package/dist-cjs/list-control/ListControlContext.js.map +1 -1
  37. package/dist-cjs/list-control/ListControlState.js +16 -18
  38. package/dist-cjs/list-control/ListControlState.js.map +1 -1
  39. package/dist-cjs/option/Option.css.js +1 -1
  40. package/dist-cjs/option/Option.js +10 -20
  41. package/dist-cjs/option/Option.js.map +1 -1
  42. package/dist-cjs/overlay/Overlay.css.js +1 -1
  43. package/dist-es/calendar/Calendar.css.js +1 -1
  44. package/dist-es/calendar/internal/CalendarCarousel.css.js +1 -1
  45. package/dist-es/calendar/internal/CalendarCarousel.js +5 -29
  46. package/dist-es/calendar/internal/CalendarCarousel.js.map +1 -1
  47. package/dist-es/calendar/internal/CalendarContext.js.map +1 -1
  48. package/dist-es/calendar/internal/CalendarDay.css.js +1 -1
  49. package/dist-es/calendar/internal/CalendarDay.js +20 -21
  50. package/dist-es/calendar/internal/CalendarDay.js.map +1 -1
  51. package/dist-es/calendar/internal/CalendarMonth.css.js +1 -1
  52. package/dist-es/calendar/internal/CalendarMonth.js +0 -2
  53. package/dist-es/calendar/internal/CalendarMonth.js.map +1 -1
  54. package/dist-es/calendar/internal/CalendarNavigation.css.js +1 -1
  55. package/dist-es/calendar/internal/CalendarNavigation.js +75 -82
  56. package/dist-es/calendar/internal/CalendarNavigation.js.map +1 -1
  57. package/dist-es/calendar/internal/CalendarWeekHeader.css.js +1 -1
  58. package/dist-es/calendar/useCalendar.js +14 -8
  59. package/dist-es/calendar/useCalendar.js.map +1 -1
  60. package/dist-es/calendar/useCalendarDay.js +15 -5
  61. package/dist-es/calendar/useCalendarDay.js.map +1 -1
  62. package/dist-es/calendar/useSelection.js.map +1 -1
  63. package/dist-es/combo-box-next/ComboBoxNext.js +36 -13
  64. package/dist-es/combo-box-next/ComboBoxNext.js.map +1 -1
  65. package/dist-es/combo-box-next/useComboBoxNext.js +16 -15
  66. package/dist-es/combo-box-next/useComboBoxNext.js.map +1 -1
  67. package/dist-es/dialog/Dialog.css.js +1 -1
  68. package/dist-es/dialog/DialogHeader.css.js +4 -0
  69. package/dist-es/dialog/DialogHeader.css.js.map +1 -0
  70. package/dist-es/dialog/{DialogTitle.js → DialogHeader.js} +16 -16
  71. package/dist-es/dialog/DialogHeader.js.map +1 -0
  72. package/dist-es/dropdown-next/DropdownNext.js +8 -9
  73. package/dist-es/dropdown-next/DropdownNext.js.map +1 -1
  74. package/dist-es/index.js +1 -3
  75. package/dist-es/index.js.map +1 -1
  76. package/dist-es/list-control/ListControlContext.js +3 -1
  77. package/dist-es/list-control/ListControlContext.js.map +1 -1
  78. package/dist-es/list-control/ListControlState.js +16 -19
  79. package/dist-es/list-control/ListControlState.js.map +1 -1
  80. package/dist-es/option/Option.css.js +1 -1
  81. package/dist-es/option/Option.js +11 -21
  82. package/dist-es/option/Option.js.map +1 -1
  83. package/dist-es/overlay/Overlay.css.js +1 -1
  84. package/dist-types/calendar/internal/CalendarContext.d.ts +2 -2
  85. package/dist-types/calendar/internal/CalendarNavigation.d.ts +3 -7
  86. package/dist-types/calendar/useCalendarDay.d.ts +7 -4
  87. package/dist-types/calendar/useSelection.d.ts +4 -4
  88. package/dist-types/combo-box-next/ComboBoxNext.d.ts +7 -10
  89. package/dist-types/combo-box-next/useComboBoxNext.d.ts +6 -4
  90. package/dist-types/dialog/DialogHeader.d.ts +22 -0
  91. package/dist-types/dialog/index.d.ts +1 -1
  92. package/dist-types/dropdown-next/DropdownNext.d.ts +49 -7
  93. package/dist-types/index.d.ts +0 -1
  94. package/dist-types/list-control/ListControlContext.d.ts +1 -1
  95. package/dist-types/list-control/ListControlState.d.ts +14 -12
  96. package/dist-types/option/Option.d.ts +0 -4
  97. package/package.json +2 -2
  98. package/dist-cjs/dialog/DialogTitle.css.js +0 -6
  99. package/dist-cjs/dialog/DialogTitle.css.js.map +0 -1
  100. package/dist-cjs/dialog/DialogTitle.js.map +0 -1
  101. package/dist-cjs/drawer/Drawer.css.js +0 -6
  102. package/dist-cjs/drawer/Drawer.css.js.map +0 -1
  103. package/dist-cjs/drawer/Drawer.js +0 -104
  104. package/dist-cjs/drawer/Drawer.js.map +0 -1
  105. package/dist-cjs/drawer/DrawerCloseButton.css.js +0 -6
  106. package/dist-cjs/drawer/DrawerCloseButton.css.js.map +0 -1
  107. package/dist-cjs/drawer/DrawerCloseButton.js +0 -44
  108. package/dist-cjs/drawer/DrawerCloseButton.js.map +0 -1
  109. package/dist-es/dialog/DialogTitle.css.js +0 -4
  110. package/dist-es/dialog/DialogTitle.css.js.map +0 -1
  111. package/dist-es/dialog/DialogTitle.js.map +0 -1
  112. package/dist-es/drawer/Drawer.css.js +0 -4
  113. package/dist-es/drawer/Drawer.css.js.map +0 -1
  114. package/dist-es/drawer/Drawer.js +0 -100
  115. package/dist-es/drawer/Drawer.js.map +0 -1
  116. package/dist-es/drawer/DrawerCloseButton.css.js +0 -4
  117. package/dist-es/drawer/DrawerCloseButton.css.js.map +0 -1
  118. package/dist-es/drawer/DrawerCloseButton.js +0 -36
  119. package/dist-es/drawer/DrawerCloseButton.js.map +0 -1
  120. package/dist-types/calendar/useCalendar.d.ts +0 -60
  121. package/dist-types/dialog/DialogTitle.d.ts +0 -22
  122. package/dist-types/drawer/Drawer.d.ts +0 -28
  123. package/dist-types/drawer/DrawerCloseButton.d.ts +0 -2
  124. package/dist-types/drawer/index.d.ts +0 -2
@@ -1,8 +1,8 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
2
  import { forwardRef, useRef, useState, useEffect } from 'react';
3
- import { isSameMonth, today, getLocalTimeZone } from '@internationalized/date';
3
+ import { isSameMonth } from '@internationalized/date';
4
4
  import { CalendarMonth } from './CalendarMonth.js';
5
- import { makePrefixer, useIsomorphicLayoutEffect, usePrevious } from '@salt-ds/core';
5
+ import { makePrefixer, useIsomorphicLayoutEffect } from '@salt-ds/core';
6
6
  import { useCalendarContext } from './CalendarContext.js';
7
7
  import css_248z from './CalendarCarousel.css.js';
8
8
  import { formatDate, monthDiff } from './utils.js';
@@ -12,10 +12,6 @@ import { useComponentCssInjection } from '@salt-ds/styles';
12
12
  function getMonths(month) {
13
13
  return [month.subtract({ months: 1 }), month, month.add({ months: 1 })];
14
14
  }
15
- function usePreviousMonth(visibleMonth) {
16
- const previous = usePrevious(visibleMonth, [formatDate(visibleMonth)]);
17
- return previous != null ? previous : today(getLocalTimeZone());
18
- }
19
15
  const withBaseName = makePrefixer("saltCalendarCarousel");
20
16
  const CalendarCarousel = forwardRef(function CalendarCarousel2(props, ref) {
21
17
  const { ...rest } = props;
@@ -31,18 +27,9 @@ const CalendarCarousel = forwardRef(function CalendarCarousel2(props, ref) {
31
27
  const containerRef = useRef(null);
32
28
  const diffIndex = (a, b) => monthDiff(a, b);
33
29
  const { current: baseIndex } = useRef(visibleMonth);
34
- const previousVisibleMonth = usePreviousMonth(visibleMonth);
35
- useIsomorphicLayoutEffect(() => {
36
- var _a, _b;
37
- if (Math.abs(diffIndex(visibleMonth, previousVisibleMonth)) > 1) {
38
- (_a = containerRef.current) == null ? void 0 : _a.classList.remove(withBaseName("shouldAnimate"));
39
- } else {
40
- (_b = containerRef.current) == null ? void 0 : _b.classList.add(withBaseName("shouldAnimate"));
41
- }
42
- }, [formatDate(visibleMonth), formatDate(previousVisibleMonth)]);
43
30
  useIsomorphicLayoutEffect(() => {
44
31
  if (containerRef.current) {
45
- containerRef.current.style.transform = `translate3d(${diffIndex(baseIndex, visibleMonth) * 100}%, 0, 0)`;
32
+ containerRef.current.style.transform = `translate3d(${diffIndex(baseIndex, visibleMonth) * -101}%, 0, 0)`;
46
33
  }
47
34
  });
48
35
  const [months, setMonths] = useState(() => getMonths(visibleMonth));
@@ -53,18 +40,7 @@ const CalendarCarousel = forwardRef(function CalendarCarousel2(props, ref) {
53
40
  });
54
41
  return oldMonths.concat(newMonths);
55
42
  });
56
- const finishTransition = () => {
57
- setMonths(getMonths(visibleMonth));
58
- };
59
- const container = containerRef.current;
60
- if (container && parseFloat(window.getComputedStyle(container).transitionDuration) > 0) {
61
- container == null ? void 0 : container.addEventListener("transitionend", finishTransition);
62
- return () => {
63
- container == null ? void 0 : container.removeEventListener("transitionend", finishTransition);
64
- };
65
- } else {
66
- finishTransition();
67
- }
43
+ setMonths(getMonths(visibleMonth));
68
44
  return void 0;
69
45
  }, [formatDate(visibleMonth)]);
70
46
  return /* @__PURE__ */ jsx("div", {
@@ -80,7 +56,7 @@ const CalendarCarousel = forwardRef(function CalendarCarousel2(props, ref) {
80
56
  children: months.map((date, index) => /* @__PURE__ */ jsx("div", {
81
57
  className: withBaseName("slide"),
82
58
  style: {
83
- transform: `translateX(${diffIndex(date, baseIndex) * 100}%)`
59
+ transform: `translateX(${diffIndex(date, baseIndex) * -101}%)`
84
60
  },
85
61
  "aria-hidden": index !== 1 ? "true" : void 0,
86
62
  children: /* @__PURE__ */ jsx(CalendarMonth, {
@@ -1 +1 @@
1
- {"version":3,"file":"CalendarCarousel.js","sources":["../src/calendar/internal/CalendarCarousel.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from \"react\";\nimport {\n DateValue,\n getLocalTimeZone,\n isSameMonth,\n today,\n} from \"@internationalized/date\";\nimport { CalendarMonth, CalendarMonthProps } from \"./CalendarMonth\";\nimport {\n makePrefixer,\n useIsomorphicLayoutEffect,\n usePrevious,\n} from \"@salt-ds/core\";\nimport { useCalendarContext } from \"./CalendarContext\";\n\nimport calendarCarouselCss from \"./CalendarCarousel.css\";\nimport { formatDate, monthDiff } from \"./utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport type CalendarCarouselProps = Omit<CalendarMonthProps, \"date\">;\n\nfunction getMonths(month: DateValue) {\n return [month.subtract({ months: 1 }), month, month.add({ months: 1 })];\n}\n\nfunction usePreviousMonth(visibleMonth: DateValue) {\n const previous = usePrevious(visibleMonth, [formatDate(visibleMonth)]);\n\n return previous ?? today(getLocalTimeZone());\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarCarousel\");\n\nexport const CalendarCarousel = forwardRef<\n HTMLDivElement,\n CalendarCarouselProps\n>(function CalendarCarousel(props, ref) {\n const { ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-calendar-carousel\",\n css: calendarCarouselCss,\n window: targetWindow,\n });\n\n const {\n state: { visibleMonth },\n } = useCalendarContext();\n const containerRef = useRef<HTMLDivElement>(null);\n const diffIndex = (a: DateValue, b: DateValue) => monthDiff(a, b);\n\n const { current: baseIndex } = useRef(visibleMonth);\n const previousVisibleMonth = usePreviousMonth(visibleMonth);\n\n useIsomorphicLayoutEffect(() => {\n if (Math.abs(diffIndex(visibleMonth, previousVisibleMonth)) > 1) {\n containerRef.current?.classList.remove(withBaseName(\"shouldAnimate\"));\n } else {\n containerRef.current?.classList.add(withBaseName(\"shouldAnimate\"));\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [formatDate(visibleMonth), formatDate(previousVisibleMonth)]);\n\n useIsomorphicLayoutEffect(() => {\n if (containerRef.current) {\n containerRef.current.style.transform = `translate3d(${\n diffIndex(baseIndex, visibleMonth) * 100\n }%, 0, 0)`;\n }\n });\n\n const [months, setMonths] = useState(() => getMonths(visibleMonth));\n\n useEffect(() => {\n setMonths((oldMonths) => {\n const newMonths = getMonths(visibleMonth).filter((month) => {\n return !oldMonths.find((oldMonth) => isSameMonth(oldMonth, month));\n });\n\n return oldMonths.concat(newMonths);\n });\n const finishTransition = () => {\n setMonths(getMonths(visibleMonth));\n };\n const container = containerRef.current;\n\n if (\n container &&\n parseFloat(window.getComputedStyle(container).transitionDuration) > 0\n ) {\n container?.addEventListener(\"transitionend\", finishTransition);\n\n return () => {\n container?.removeEventListener(\"transitionend\", finishTransition);\n };\n } else {\n finishTransition();\n }\n\n return undefined;\n }, [formatDate(visibleMonth)]); // eslint-disable-line react-hooks/exhaustive-deps\n\n return (\n <div\n className={withBaseName()}\n style={{\n overflowX: \"hidden\",\n position: \"relative\",\n }}\n ref={ref}\n >\n <div className={withBaseName(\"track\")} ref={containerRef}>\n {months.map((date, index) => (\n <div\n key={formatDate(date)}\n className={withBaseName(\"slide\")}\n style={{\n transform: `translateX(${diffIndex(date, baseIndex) * 100}%)`,\n }}\n aria-hidden={index !== 1 ? \"true\" : undefined}\n >\n <CalendarMonth isVisible={index === 1} {...rest} date={date} />\n </div>\n ))}\n </div>\n </div>\n );\n});\n"],"names":["CalendarCarousel","calendarCarouselCss"],"mappings":"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"}
1
+ {"version":3,"file":"CalendarCarousel.js","sources":["../src/calendar/internal/CalendarCarousel.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from \"react\";\nimport { DateValue, isSameMonth } from \"@internationalized/date\";\nimport { CalendarMonth, CalendarMonthProps } from \"./CalendarMonth\";\nimport { makePrefixer, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { useCalendarContext } from \"./CalendarContext\";\n\nimport calendarCarouselCss from \"./CalendarCarousel.css\";\nimport { formatDate, monthDiff } from \"./utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport type CalendarCarouselProps = Omit<CalendarMonthProps, \"date\">;\n\nfunction getMonths(month: DateValue) {\n return [month.subtract({ months: 1 }), month, month.add({ months: 1 })];\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarCarousel\");\n\nexport const CalendarCarousel = forwardRef<\n HTMLDivElement,\n CalendarCarouselProps\n>(function CalendarCarousel(props, ref) {\n const { ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-calendar-carousel\",\n css: calendarCarouselCss,\n window: targetWindow,\n });\n\n const {\n state: { visibleMonth },\n } = useCalendarContext();\n const containerRef = useRef<HTMLDivElement>(null);\n const diffIndex = (a: DateValue, b: DateValue) => monthDiff(a, b);\n\n const { current: baseIndex } = useRef(visibleMonth);\n\n useIsomorphicLayoutEffect(() => {\n if (containerRef.current) {\n containerRef.current.style.transform = `translate3d(${\n diffIndex(baseIndex, visibleMonth) * -101 // needs to be higher than 100% so the next month doesn't show on the edges\n }%, 0, 0)`;\n }\n });\n\n const [months, setMonths] = useState(() => getMonths(visibleMonth));\n\n useEffect(() => {\n setMonths((oldMonths) => {\n const newMonths = getMonths(visibleMonth).filter((month) => {\n return !oldMonths.find((oldMonth) => isSameMonth(oldMonth, month));\n });\n\n return oldMonths.concat(newMonths);\n });\n setMonths(getMonths(visibleMonth));\n return undefined;\n }, [formatDate(visibleMonth)]); // eslint-disable-line react-hooks/exhaustive-deps\n\n return (\n <div\n className={withBaseName()}\n style={{\n overflowX: \"hidden\",\n position: \"relative\",\n }}\n ref={ref}\n >\n <div className={withBaseName(\"track\")} ref={containerRef}>\n {months.map((date, index) => (\n <div\n key={formatDate(date)}\n className={withBaseName(\"slide\")}\n style={{\n transform: `translateX(${diffIndex(date, baseIndex) * -101}%)`,\n }}\n aria-hidden={index !== 1 ? \"true\" : undefined}\n >\n <CalendarMonth isVisible={index === 1} {...rest} date={date} />\n </div>\n ))}\n </div>\n </div>\n );\n});\n"],"names":["CalendarCarousel","calendarCarouselCss"],"mappings":";;;;;;;;;;;AAaA,SAAS,UAAU,KAAkB,EAAA;AACnC,EAAA,OAAO,CAAC,KAAA,CAAM,QAAS,CAAA,EAAE,QAAQ,CAAE,EAAC,CAAG,EAAA,KAAA,EAAO,MAAM,GAAI,CAAA,EAAE,MAAQ,EAAA,CAAA,EAAG,CAAC,CAAA,CAAA;AACxE,CAAA;AAEA,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA,CAAA;AAEjD,MAAM,gBAAmB,GAAA,UAAA,CAG9B,SAASA,iBAAAA,CAAiB,OAAO,GAAK,EAAA;AACtC,EAAM,MAAA,EAAA,GAAK,MAAS,GAAA,KAAA,CAAA;AAEpB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,KAAA,EAAO,EAAE,YAAa,EAAA;AAAA,MACpB,kBAAmB,EAAA,CAAA;AACvB,EAAM,MAAA,YAAA,GAAe,OAAuB,IAAI,CAAA,CAAA;AAChD,EAAA,MAAM,YAAY,CAAC,CAAA,EAAc,CAAiB,KAAA,SAAA,CAAU,GAAG,CAAC,CAAA,CAAA;AAEhE,EAAA,MAAM,EAAE,OAAA,EAAS,SAAU,EAAA,GAAI,OAAO,YAAY,CAAA,CAAA;AAElD,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,aAAa,OAAS,EAAA;AACxB,MAAA,YAAA,CAAa,QAAQ,KAAM,CAAA,SAAA,GAAY,eACrC,SAAU,CAAA,SAAA,EAAW,YAAY,CAAI,GAAA,CAAA,GAAA,CAAA,QAAA,CAAA,CAAA;AAAA,KAEzC;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA,CAAC,QAAQ,SAAS,CAAA,GAAI,SAAS,MAAM,SAAA,CAAU,YAAY,CAAC,CAAA,CAAA;AAElE,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,SAAA,CAAU,CAAC,SAAc,KAAA;AACvB,MAAA,MAAM,YAAY,SAAU,CAAA,YAAY,CAAE,CAAA,MAAA,CAAO,CAAC,KAAU,KAAA;AAC1D,QAAO,OAAA,CAAC,UAAU,IAAK,CAAA,CAAC,aAAa,WAAY,CAAA,QAAA,EAAU,KAAK,CAAC,CAAA,CAAA;AAAA,OAClE,CAAA,CAAA;AAED,MAAO,OAAA,SAAA,CAAU,OAAO,SAAS,CAAA,CAAA;AAAA,KAClC,CAAA,CAAA;AACD,IAAU,SAAA,CAAA,SAAA,CAAU,YAAY,CAAC,CAAA,CAAA;AACjC,IAAO,OAAA,KAAA,CAAA,CAAA;AAAA,GACN,EAAA,CAAC,UAAW,CAAA,YAAY,CAAC,CAAC,CAAA,CAAA;AAE7B,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,WAAW,YAAa,EAAA;AAAA,IACxB,KAAO,EAAA;AAAA,MACL,SAAW,EAAA,QAAA;AAAA,MACX,QAAU,EAAA,UAAA;AAAA,KACZ;AAAA,IACA,GAAA;AAAA,IAEA,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,MAAG,GAAK,EAAA,YAAA;AAAA,MACzC,QAAO,EAAA,MAAA,CAAA,GAAA,CAAI,CAAC,IAAA,EAAM,0BAChB,GAAA,CAAA,KAAA,EAAA;AAAA,QAEC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,QAC/B,KAAO,EAAA;AAAA,UACL,SAAW,EAAA,CAAA,WAAA,EAAc,SAAU,CAAA,IAAA,EAAM,SAAS,CAAI,GAAA,CAAA,GAAA,CAAA,EAAA,CAAA;AAAA,SACxD;AAAA,QACA,aAAA,EAAa,KAAU,KAAA,CAAA,GAAI,MAAS,GAAA,KAAA,CAAA;AAAA,QAEpC,QAAC,kBAAA,GAAA,CAAA,aAAA,EAAA;AAAA,UAAc,WAAW,KAAU,KAAA,CAAA;AAAA,UAAI,GAAG,IAAA;AAAA,UAAM,IAAA;AAAA,SAAY,CAAA;AAAA,OAPxD,EAAA,UAAA,CAAW,IAAI,CAQtB,CACD,CAAA;AAAA,KACH,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"CalendarContext.js","sources":["../src/calendar/internal/CalendarContext.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport { useCalendar } from \"../useCalendar\";\n\ntype CalendarState = {\n state: ReturnType<typeof useCalendar>[\"state\"];\n helpers: ReturnType<typeof useCalendar>[\"helpers\"];\n};\n\nconst CalendarContext = createContext<CalendarState | null>(null);\n\nif (process.env.NODE_ENV !== \"production\") {\n CalendarContext.displayName = \"CalendarContext\";\n}\n\nfunction useCalendarContext(): CalendarState {\n const context = useContext(CalendarContext);\n\n if (!context) {\n throw new Error(\"Unexpected usage\");\n }\n\n return context;\n}\n\nexport { CalendarContext, useCalendarContext };\n"],"names":[],"mappings":";;AAQM,MAAA,eAAA,GAAkB,cAAoC,IAAI,EAAA;AAEhE,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,eAAA,CAAgB,WAAc,GAAA,iBAAA,CAAA;AAChC,CAAA;AAEA,SAAS,kBAAoC,GAAA;AAC3C,EAAM,MAAA,OAAA,GAAU,WAAW,eAAe,CAAA,CAAA;AAE1C,EAAA,IAAI,CAAC,OAAS,EAAA;AACZ,IAAM,MAAA,IAAI,MAAM,kBAAkB,CAAA,CAAA;AAAA,GACpC;AAEA,EAAO,OAAA,OAAA,CAAA;AACT;;;;"}
1
+ {"version":3,"file":"CalendarContext.js","sources":["../src/calendar/internal/CalendarContext.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport { useCalendar } from \"../useCalendar\";\n\ninterface CalendarState {\n state: ReturnType<typeof useCalendar>[\"state\"];\n helpers: ReturnType<typeof useCalendar>[\"helpers\"];\n}\n\nconst CalendarContext = createContext<CalendarState | null>(null);\n\nif (process.env.NODE_ENV !== \"production\") {\n CalendarContext.displayName = \"CalendarContext\";\n}\n\nfunction useCalendarContext(): CalendarState {\n const context = useContext(CalendarContext);\n\n if (!context) {\n throw new Error(\"Unexpected usage\");\n }\n\n return context;\n}\n\nexport { CalendarContext, useCalendarContext };\n"],"names":[],"mappings":";;AAQM,MAAA,eAAA,GAAkB,cAAoC,IAAI,EAAA;AAEhE,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,eAAA,CAAgB,WAAc,GAAA,iBAAA,CAAA;AAChC,CAAA;AAEA,SAAS,kBAAoC,GAAA;AAC3C,EAAM,MAAA,OAAA,GAAU,WAAW,eAAe,CAAA,CAAA;AAE1C,EAAA,IAAI,CAAC,OAAS,EAAA;AACZ,IAAM,MAAA,IAAI,MAAM,kBAAkB,CAAA,CAAA;AAAA,GACpC;AAEA,EAAO,OAAA,OAAA,CAAA;AACT;;;;"}
@@ -1,4 +1,4 @@
1
- var css_248z = "/* TODO: Design need to align characteristics for CalendarDay */\n.saltCalendarDay {\n --calendar-day-text-color: var(--salt-content-primary-foreground);\n --calendar-day-background: var(--salt-selectable-background);\n --calendar-day-background-hover: var(--salt-selectable-background-hover);\n --calendar-day-text-color-hover: var(--salt-content-primary-foreground);\n --calendar-day-outOfRange-text-color: var(--salt-content-secondary-foreground-disabled);\n --calendar-day-blocked-text-color: var(--salt-content-primary-foreground);\n --calendar-day-blocked-cursor: var(--salt-selectable-cursor-disabled);\n --calendar-day-blocked-icon-color: var(--salt-status-error-foreground);\n --calendar-day-blocked-background: var(--calendar-day-background);\n --calendar-day-unselectable-text-color: var(--salt-content-secondary-foreground-disabled);\n --calendar-day-unselectable-background: var(--calendar-day-background);\n --calendar-day-unselectable-cursor: var(--salt-selectable-cursor-disabled);\n\n --calendar-day-selected-background: var(--salt-selectable-background-selected);\n --calendar-day-selected-text-color: var(--salt-content-primary-foreground);\n /* --calendar-day-selected-focused-outlineColor: var(--salt-color-white); TODO: Check with design */\n\n --calendar-day-selectedStart-background: var(--salt-selectable-background-selected);\n --calendar-day-selectedStart-text-color: var(--salt-content-primary-foreground);\n /* --calendar-day-selectedStart-focused-outlineColor: var(--salt-color-white); TODO: Check with design */\n\n --calendar-day-selectedEnd-background: var(--salt-selectable-background-selected);\n --calendar-day-selectedEnd-text-color: var(--salt-content-primary-foreground);\n /* --calendar-day-selectedEnd-focused-outlineColor: var(--salt-color-white); TODO: Check with design */\n\n --calendar-day-selectedSpan-background: var(--salt-selectable-background-blurSelected);\n --calendar-day-selectedSpan-text-color: var(--salt-content-primary-foreground);\n\n --calendar-day-hoveredSpan-background: var(--salt-selectable-background-hover);\n --calendar-day-hoveredSpan-text-color: var(--salt-content-primary-foreground);\n\n --calendar-day-hoveredOffset-background: var(--salt-selectable-background-hover);\n --calendar-day-hoveredOffset-text-color: var(--salt-content-primary-foreground);\n\n --calendar-day-currentDay-borderColor: var(--salt-content-primary-foreground); /* TODO should not be foreground color */\n\n /* Focus */\n --calendar-day-focused-outline: var(--salt-focused-outline);\n --calendar-day-size: var(--salt-size-base);\n --calendar-day-fontSize: var(--salt-text-fontSize);\n}\n\n.saltCalendarDay {\n width: var(--calendar-day-size);\n height: var(--calendar-day-size);\n color: var(--calendar-day-text-color);\n background-color: var(--calendar-day-background);\n font-size: var(--calendar-day-fontSize);\n border: 0;\n cursor: pointer;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.saltCalendarDay:focus-visible {\n outline: var(--calendar-day-focused-outline);\n outline-offset: calc(0px - var(--salt-focused-outlineWidth));\n}\n\n.saltCalendarDay-outOfRange {\n color: var(--calendar-day-outOfRange-text-color);\n}\n\n.saltCalendarDay:hover {\n background: var(--calendar-day-background-hover);\n color: var(--calendar-day-text-color-hover);\n}\n\n.saltCalendarDay-unselectableMedium,\n.saltCalendarDay-unselectableMedium:hover {\n color: var(--calendar-day-blocked-text-color);\n cursor: var(--calendar-day-blocked-cursor);\n background: var(--calendar-day-blocked-background);\n}\n\n.saltCalendarDay-today {\n border: 1px solid var(--calendar-day-currentDay-borderColor);\n}\n\n.saltCalendarDay-selectedSpan {\n background: var(--calendar-day-selectedSpan-background);\n color: var(--calendar-day-selectedSpan-text-color);\n}\n\n.saltCalendarDay-hoveredSpan,\n.saltCalendarDay-hoveredSpan:hover {\n background: var(--calendar-day-hoveredSpan-background);\n color: var(--calendar-day-hoveredSpan-text-color);\n}\n\n.saltCalendarDay-hoveredOffset,\n.saltCalendarDay-hoveredOffset:hover {\n background: var(--calendar-day-hoveredOffset-background);\n color: var(--calendar-day-hoveredOffset-text-color);\n}\n\n.saltCalendarDay-selected,\n.saltCalendarDay-selected:hover {\n background: var(--calendar-day-selected-background);\n color: var(--calendar-day-selected-text-color);\n}\n\n.saltCalendarDay-selectedStart,\n.saltCalendarDay-selectedStart:hover {\n background: var(--calendar-day-selectedStart-background);\n color: var(--calendar-day-selectedStart-text-color);\n}\n\n.saltCalendarDay-selectedEnd,\n.saltCalendarDay-selectedEnd:hover {\n background: var(--calendar-day-selectedEnd-background);\n color: var(--calendar-day-selectedEnd-text-color);\n}\n\n.saltCalendarDay-selected:focus-visible {\n outline-color: var(--calendar-day-selected-focused-outlineColor);\n}\n\n.saltCalendarDay-selectedStart:focus-visible {\n outline-color: var(--calendar-day-selectedStart-focused-outlineColor);\n}\n\n.saltCalendarDay-selectedEnd:focus-visible {\n outline-color: var(--calendar-day-selectedEnd-focused-outlineColor);\n}\n\n.saltCalendarDay-unselectableLow,\n.saltCalendarDay-unselectableLow:hover {\n color: var(--calendar-day-unselectable-text-color);\n background: var(--calendar-day-unselectable-background);\n cursor: var(--calendar-day-unselectable-cursor);\n text-decoration: line-through;\n}\n\n.salt-density-high {\n --calendar-day-blocked-icon-size: 14px;\n}\n\n.salt-density-medium {\n --calendar-day-blocked-icon-size: 18px;\n}\n\n.salt-density-low {\n --calendar-day-blocked-icon-size: 24px;\n}\n\n.salt-density-touch {\n --calendar-day-blocked-icon-size: 28px;\n}\n\n.saltCalendarDay-blockedIcon {\n fill: var(--calendar-day-blocked-icon-color);\n position: absolute;\n --icon-size: var(--calendar-day-blocked-icon-size);\n pointer-events: none;\n line-height: 1.29;\n}\n\n.saltCalendarDay-hidden {\n visibility: hidden;\n}\n";
1
+ var css_248z = ".saltCalendarDay {\n font-family: var(--salt-text-fontFamily);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n font-size: var(--salt-text-fontSize);\n width: var(--salt-size-base);\n height: var(--salt-size-base);\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background);\n cursor: pointer;\n border: none;\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n overflow: hidden;\n}\n.saltCalendarDay-content {\n margin: 0 var(--salt-spacing-50);\n width: 100%;\n}\n\n.saltCalendarDay:focus-visible {\n outline: var(--salt-focused-outline);\n outline-offset: calc(0px - var(--salt-focused-outlineWidth));\n}\n\n.saltCalendarDay-outOfRange {\n color: var(--salt-content-secondary-foreground);\n}\n\n.saltCalendarDay:hover,\n.saltCalendarDay-hoveredOffset,\n.saltCalendarDay-hoveredOffset:hover {\n background: var(--salt-selectable-background-hover);\n}\n.saltCalendarDay-selectedStart {\n z-index: var(--salt-zIndex-default);\n}\n\n.saltCalendarDay-selected,\n.saltCalendarDay-selected:hover,\n.saltCalendarDay-selectedStart,\n.saltCalendarDay-selectedStart:hover,\n.saltCalendarDay-selectedEnd,\n.saltCalendarDay-selectedEnd:hover {\n background: var(--salt-selectable-background-selected);\n box-shadow: 0 0 0 var(--salt-size-border) var(--salt-selectable-borderColor-selected);\n}\n\n.saltCalendarDay-hoveredSpan,\n.saltCalendarDay-hoveredSpan:hover,\n.saltCalendarDay-selectedSpan,\n.saltCalendarDay-selectedSpan:hover {\n background: var(--salt-selectable-background-hover);\n box-shadow: calc(var(--salt-size-border) * -2) 0 0 0 var(--salt-selectable-background-hover),\n calc(var(--salt-size-border) * -1) 0 0 var(--salt-size-border) var(--salt-selectable-borderColor-selected), 0 calc(var(--salt-size-border) * -1) 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltCalendarDay-disabled,\n.saltCalendarDay-disabled:hover,\n.saltCalendarDay-unselectable,\n.saltCalendarDay-unselectable:hover {\n background: var(--salt-selectable-background-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltCalendarDay-highlighted:before {\n content: \"\";\n height: var(--salt-spacing-200); /* TODO: change for size-modifier when available */\n width: var(--salt-spacing-200);\n top: calc(var(--salt-spacing-100) * -1);\n right: calc(var(--salt-spacing-100) * -1);\n transform: rotate(45deg);\n background: var(--salt-selectable-borderColor-selected);\n position: absolute;\n}\n\n.saltCalendarDay-disabled {\n color: var(--salt-content-secondary-foreground-disabled);\n}\n.saltCalendarDay-unselectable:after {\n content: \"\";\n height: var(--salt-size-border);\n width: calc(100% - var(--salt-spacing-100));\n background: var(--salt-content-secondary-foreground);\n position: absolute;\n}\n\n.saltCalendarDay-today,\n.saltCalendarDay-today:hover {\n border-bottom: var(--salt-size-indicator) var(--salt-selectable-borderStyle) var(--salt-content-foreground-active);\n margin-bottom: calc(var(--salt-size-indicator) * -1);\n}\n\n.saltCalendarDay-hidden {\n visibility: hidden;\n}\n";
2
2
 
3
3
  export { css_248z as default };
4
4
  //# sourceMappingURL=CalendarDay.css.js.map
@@ -1,6 +1,5 @@
1
- import { jsx, jsxs } from 'react/jsx-runtime';
2
- import { makePrefixer, Tooltip } from '@salt-ds/core';
3
- import { CloseIcon } from '@salt-ds/icons';
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import { makePrefixer, useForkRef, Tooltip } from '@salt-ds/core';
4
3
  import { clsx } from 'clsx';
5
4
  import { forwardRef, useRef } from 'react';
6
5
  import { useCalendarDay } from '../useCalendarDay.js';
@@ -20,48 +19,48 @@ const CalendarDay = forwardRef(
20
19
  window: targetWindow
21
20
  });
22
21
  const dayRef = useRef(null);
23
- const { status, dayProps, unselectableReason } = useCalendarDay(
22
+ const buttonRef = useForkRef(ref, dayRef);
23
+ const { status, dayProps, unselectableReason, highlightedReason } = useCalendarDay(
24
24
  {
25
25
  date: day,
26
26
  month
27
27
  },
28
28
  dayRef
29
29
  );
30
- const { outOfRange, today, unselectable, hidden } = status;
30
+ const { outOfRange, today, unselectable, highlighted, hidden, disabled } = status;
31
31
  return /* @__PURE__ */ jsx(Tooltip, {
32
32
  hideIcon: true,
33
- status: "error",
34
- content: unselectableReason,
35
- disabled: !unselectableReason,
33
+ status: unselectableReason ? "error" : "info",
34
+ content: unselectableReason || highlightedReason || "Date is out of range",
35
+ disabled: !unselectableReason && !highlightedReason,
36
36
  placement: "top",
37
- enterDelay: 300,
37
+ enterDelay: 0,
38
+ leaveDelay: 0,
38
39
  ...TooltipProps2,
39
- children: /* @__PURE__ */ jsxs("button", {
40
+ children: /* @__PURE__ */ jsx("button", {
40
41
  "aria-label": formatDate(day),
42
+ disabled,
41
43
  ...dayProps,
42
- ref: dayRef,
44
+ ref: buttonRef,
43
45
  ...rest,
44
46
  className: clsx(
45
47
  withBaseName(),
46
48
  {
47
49
  [withBaseName("hidden")]: hidden,
48
50
  [withBaseName("outOfRange")]: outOfRange,
49
- [withBaseName("today")]: today,
51
+ [withBaseName("disabled")]: disabled,
50
52
  [withBaseName("unselectable")]: !!unselectable,
51
- [withBaseName("unselectableLow")]: unselectable === "low",
52
- [withBaseName("unselectableMedium")]: unselectable === "medium"
53
+ [withBaseName("highlighted")]: !!highlighted
53
54
  },
54
55
  dayProps.className,
55
56
  className
56
57
  ),
57
- children: [
58
- unselectable === "medium" && /* @__PURE__ */ jsx(CloseIcon, {
59
- "aria-hidden": true,
60
- "aria-label": void 0,
61
- className: withBaseName("blockedIcon")
58
+ children: /* @__PURE__ */ jsx("span", {
59
+ className: clsx(withBaseName("content"), {
60
+ [withBaseName("today")]: today
62
61
  }),
63
- renderDayContents ? renderDayContents(day, status) : formatDate(day, { day: "numeric" })
64
- ]
62
+ children: renderDayContents ? renderDayContents(day, status) : formatDate(day, { day: "numeric" })
63
+ })
65
64
  })
66
65
  });
67
66
  }
@@ -1 +1 @@
1
- {"version":3,"file":"CalendarDay.js","sources":["../src/calendar/internal/CalendarDay.tsx"],"sourcesContent":["import { makePrefixer, Tooltip, TooltipProps } from \"@salt-ds/core\";\nimport { CloseIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { ComponentPropsWithRef, forwardRef, ReactElement, useRef } from \"react\";\nimport { DateValue } from \"@internationalized/date\";\n\nimport { DayStatus, useCalendarDay } from \"../useCalendarDay\";\nimport calendarDayCss from \"./CalendarDay.css\";\nimport { formatDate } from \"./utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport type DateFormatter = (day: Date) => string | undefined;\n\nexport interface CalendarDayProps\n extends Omit<ComponentPropsWithRef<\"button\">, \"children\"> {\n day: DateValue;\n formatDate?: DateFormatter;\n renderDayContents?: (date: DateValue, status: DayStatus) => ReactElement;\n status?: DayStatus;\n month: DateValue;\n TooltipProps?: Partial<TooltipProps>;\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarDay\");\n\nexport const CalendarDay = forwardRef<HTMLButtonElement, CalendarDayProps>(\n function CalendarDay(props, ref) {\n const { className, day, renderDayContents, month, TooltipProps, ...rest } =\n props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-calendar-day\",\n css: calendarDayCss,\n window: targetWindow,\n });\n\n const dayRef = useRef<HTMLButtonElement>(null);\n const { status, dayProps, unselectableReason } = useCalendarDay(\n {\n date: day,\n month,\n },\n dayRef\n );\n const { outOfRange, today, unselectable, hidden } = status;\n\n return (\n <Tooltip\n hideIcon\n status=\"error\"\n content={unselectableReason}\n disabled={!unselectableReason}\n placement=\"top\"\n enterDelay={300}\n {...TooltipProps}\n >\n <button\n aria-label={formatDate(day)}\n {...dayProps}\n ref={dayRef}\n {...rest}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"hidden\")]: hidden,\n [withBaseName(\"outOfRange\")]: outOfRange,\n [withBaseName(\"today\")]: today,\n [withBaseName(\"unselectable\")]: !!unselectable,\n [withBaseName(\"unselectableLow\")]: unselectable === \"low\",\n [withBaseName(\"unselectableMedium\")]: unselectable === \"medium\",\n },\n dayProps.className,\n className\n )}\n >\n {unselectable === \"medium\" && (\n <CloseIcon\n aria-hidden\n aria-label={undefined}\n className={withBaseName(\"blockedIcon\")}\n />\n )}\n\n {renderDayContents\n ? renderDayContents(day, status)\n : formatDate(day, { day: \"numeric\" })}\n </button>\n </Tooltip>\n );\n }\n);\n"],"names":["CalendarDay","TooltipProps","calendarDayCss"],"mappings":";;;;;;;;;;;AAwBA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA,CAAA;AAE5C,MAAM,WAAc,GAAA,UAAA;AAAA,EACzB,SAASA,YAAY,CAAA,KAAA,EAAO,GAAK,EAAA;AAC/B,IAAM,MAAA,EAAE,WAAW,GAAK,EAAA,iBAAA,EAAmB,OAAO,YAAAC,EAAAA,aAAAA,EAAAA,GAAiB,MACjE,GAAA,KAAA,CAAA;AACF,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,MAAA,GAAS,OAA0B,IAAI,CAAA,CAAA;AAC7C,IAAA,MAAM,EAAE,MAAA,EAAQ,QAAU,EAAA,kBAAA,EAAuB,GAAA,cAAA;AAAA,MAC/C;AAAA,QACE,IAAM,EAAA,GAAA;AAAA,QACN,KAAA;AAAA,OACF;AAAA,MACA,MAAA;AAAA,KACF,CAAA;AACA,IAAA,MAAM,EAAE,UAAA,EAAY,KAAO,EAAA,YAAA,EAAc,QAAW,GAAA,MAAA,CAAA;AAEpD,IAAA,uBACG,GAAA,CAAA,OAAA,EAAA;AAAA,MACC,QAAQ,EAAA,IAAA;AAAA,MACR,MAAO,EAAA,OAAA;AAAA,MACP,OAAS,EAAA,kBAAA;AAAA,MACT,UAAU,CAAC,kBAAA;AAAA,MACX,SAAU,EAAA,KAAA;AAAA,MACV,UAAY,EAAA,GAAA;AAAA,MACX,GAAGD,aAAAA;AAAA,MAEJ,QAAC,kBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,QACC,YAAA,EAAY,WAAW,GAAG,CAAA;AAAA,QACzB,GAAG,QAAA;AAAA,QACJ,GAAK,EAAA,MAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QACJ,SAAW,EAAA,IAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,YAC1B,CAAC,YAAa,CAAA,YAAY,CAAI,GAAA,UAAA;AAAA,YAC9B,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,KAAA;AAAA,YACzB,CAAC,YAAA,CAAa,cAAc,CAAA,GAAI,CAAC,CAAC,YAAA;AAAA,YAClC,CAAC,YAAA,CAAa,iBAAiB,CAAA,GAAI,YAAiB,KAAA,KAAA;AAAA,YACpD,CAAC,YAAA,CAAa,oBAAoB,CAAA,GAAI,YAAiB,KAAA,QAAA;AAAA,WACzD;AAAA,UACA,QAAS,CAAA,SAAA;AAAA,UACT,SAAA;AAAA,SACF;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,YAAA,KAAiB,4BACf,GAAA,CAAA,SAAA,EAAA;AAAA,YACC,aAAW,EAAA,IAAA;AAAA,YACX,YAAY,EAAA,KAAA,CAAA;AAAA,YACZ,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,WACvC,CAAA;AAAA,UAGD,iBAAA,GACG,iBAAkB,CAAA,GAAA,EAAK,MAAM,CAAA,GAC7B,WAAW,GAAK,EAAA,EAAE,GAAK,EAAA,SAAA,EAAW,CAAA;AAAA,SAAA;AAAA,OACxC,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1
+ {"version":3,"file":"CalendarDay.js","sources":["../src/calendar/internal/CalendarDay.tsx"],"sourcesContent":["import { makePrefixer, Tooltip, TooltipProps, useForkRef } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { ComponentPropsWithRef, forwardRef, ReactElement, useRef } from \"react\";\nimport { DateValue } from \"@internationalized/date\";\nimport { DayStatus, useCalendarDay } from \"../useCalendarDay\";\nimport calendarDayCss from \"./CalendarDay.css\";\nimport { formatDate } from \"./utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport type DateFormatter = (day: Date) => string | undefined;\n\nexport interface CalendarDayProps\n extends Omit<ComponentPropsWithRef<\"button\">, \"children\"> {\n day: DateValue;\n formatDate?: DateFormatter;\n renderDayContents?: (date: DateValue, status: DayStatus) => ReactElement;\n status?: DayStatus;\n month: DateValue;\n TooltipProps?: Partial<TooltipProps>;\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarDay\");\n\nexport const CalendarDay = forwardRef<HTMLButtonElement, CalendarDayProps>(\n function CalendarDay(props, ref) {\n const { className, day, renderDayContents, month, TooltipProps, ...rest } =\n props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-calendar-day\",\n css: calendarDayCss,\n window: targetWindow,\n });\n\n const dayRef = useRef<HTMLButtonElement>(null);\n const buttonRef = useForkRef(ref, dayRef);\n const { status, dayProps, unselectableReason, highlightedReason } =\n useCalendarDay(\n {\n date: day,\n month,\n },\n dayRef\n );\n const { outOfRange, today, unselectable, highlighted, hidden, disabled } =\n status;\n\n return (\n <Tooltip\n hideIcon\n status={unselectableReason ? \"error\" : \"info\"}\n content={\n unselectableReason || highlightedReason || \"Date is out of range\"\n }\n disabled={!unselectableReason && !highlightedReason}\n placement=\"top\"\n enterDelay={0} // --salt-duration-instant\n leaveDelay={0} // --salt-duration-instant\n {...TooltipProps}\n >\n <button\n aria-label={formatDate(day)}\n disabled={disabled}\n {...dayProps}\n ref={buttonRef}\n {...rest}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"hidden\")]: hidden,\n [withBaseName(\"outOfRange\")]: outOfRange,\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"unselectable\")]: !!unselectable,\n [withBaseName(\"highlighted\")]: !!highlighted,\n },\n dayProps.className,\n className\n )}\n >\n <span\n className={clsx(withBaseName(\"content\"), {\n [withBaseName(\"today\")]: today,\n })}\n >\n {renderDayContents\n ? renderDayContents(day, status)\n : formatDate(day, { day: \"numeric\" })}\n </span>\n </button>\n </Tooltip>\n );\n }\n);\n"],"names":["CalendarDay","TooltipProps","calendarDayCss"],"mappings":";;;;;;;;;;AAsBA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA,CAAA;AAE5C,MAAM,WAAc,GAAA,UAAA;AAAA,EACzB,SAASA,YAAY,CAAA,KAAA,EAAO,GAAK,EAAA;AAC/B,IAAM,MAAA,EAAE,WAAW,GAAK,EAAA,iBAAA,EAAmB,OAAO,YAAAC,EAAAA,aAAAA,EAAAA,GAAiB,MACjE,GAAA,KAAA,CAAA;AACF,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,MAAA,GAAS,OAA0B,IAAI,CAAA,CAAA;AAC7C,IAAM,MAAA,SAAA,GAAY,UAAW,CAAA,GAAA,EAAK,MAAM,CAAA,CAAA;AACxC,IAAA,MAAM,EAAE,MAAA,EAAQ,QAAU,EAAA,kBAAA,EAAoB,mBAC5C,GAAA,cAAA;AAAA,MACE;AAAA,QACE,IAAM,EAAA,GAAA;AAAA,QACN,KAAA;AAAA,OACF;AAAA,MACA,MAAA;AAAA,KACF,CAAA;AACF,IAAA,MAAM,EAAE,UAAY,EAAA,KAAA,EAAO,cAAc,WAAa,EAAA,MAAA,EAAQ,UAC5D,GAAA,MAAA,CAAA;AAEF,IAAA,uBACG,GAAA,CAAA,OAAA,EAAA;AAAA,MACC,QAAQ,EAAA,IAAA;AAAA,MACR,MAAA,EAAQ,qBAAqB,OAAU,GAAA,MAAA;AAAA,MACvC,OAAA,EACE,sBAAsB,iBAAqB,IAAA,sBAAA;AAAA,MAE7C,QAAA,EAAU,CAAC,kBAAA,IAAsB,CAAC,iBAAA;AAAA,MAClC,SAAU,EAAA,KAAA;AAAA,MACV,UAAY,EAAA,CAAA;AAAA,MACZ,UAAY,EAAA,CAAA;AAAA,MACX,GAAGD,aAAAA;AAAA,MAEJ,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,QACC,YAAA,EAAY,WAAW,GAAG,CAAA;AAAA,QAC1B,QAAA;AAAA,QACC,GAAG,QAAA;AAAA,QACJ,GAAK,EAAA,SAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QACJ,SAAW,EAAA,IAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,YAC1B,CAAC,YAAa,CAAA,YAAY,CAAI,GAAA,UAAA;AAAA,YAC9B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,YAC5B,CAAC,YAAA,CAAa,cAAc,CAAA,GAAI,CAAC,CAAC,YAAA;AAAA,YAClC,CAAC,YAAA,CAAa,aAAa,CAAA,GAAI,CAAC,CAAC,WAAA;AAAA,WACnC;AAAA,UACA,QAAS,CAAA,SAAA;AAAA,UACT,SAAA;AAAA,SACF;AAAA,QAEA,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,UACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,SAAS,CAAG,EAAA;AAAA,YACvC,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,KAAA;AAAA,WAC1B,CAAA;AAAA,UAEA,QAAA,EAAA,iBAAA,GACG,iBAAkB,CAAA,GAAA,EAAK,MAAM,CAAA,GAC7B,WAAW,GAAK,EAAA,EAAE,GAAK,EAAA,SAAA,EAAW,CAAA;AAAA,SACxC,CAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
@@ -1,4 +1,4 @@
1
- var css_248z = ".saltCalendarMonth-dateGrid {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n text-align: center;\n}\n";
1
+ var css_248z = ".saltCalendarMonth-dateGrid {\n display: grid;\n gap: var(--salt-size-border);\n grid-template-columns: repeat(7, var(--salt-size-base));\n grid-template-rows: repeat(6, var(--salt-size-base));\n text-align: center;\n margin: var(--salt-size-border);\n}\n";
2
2
 
3
3
  export { css_248z as default };
4
4
  //# sourceMappingURL=CalendarMonth.css.js.map
@@ -15,8 +15,6 @@ const CalendarMonth = forwardRef(
15
15
  const {
16
16
  className,
17
17
  date,
18
- hideOutOfRangeDates,
19
- isVisible,
20
18
  renderDayContents,
21
19
  onMouseLeave,
22
20
  TooltipProps,
@@ -1 +1 @@
1
- {"version":3,"file":"CalendarMonth.js","sources":["../src/calendar/internal/CalendarMonth.tsx"],"sourcesContent":["import {\n ComponentPropsWithRef,\n forwardRef,\n MouseEvent,\n SyntheticEvent,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { DateValue } from \"@internationalized/date\";\nimport { CalendarDay, CalendarDayProps } from \"./CalendarDay\";\nimport { formatDate, generateVisibleDays } from \"./utils\";\n\nimport calendarMonthCss from \"./CalendarMonth.css\";\nimport { useCalendarContext } from \"./CalendarContext\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport interface CalendarMonthProps extends ComponentPropsWithRef<\"div\"> {\n date: DateValue;\n hideOutOfRangeDates?: boolean;\n renderDayContents?: CalendarDayProps[\"renderDayContents\"];\n isVisible?: boolean;\n TooltipProps?: CalendarDayProps[\"TooltipProps\"];\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarMonth\");\n\nexport const CalendarMonth = forwardRef<HTMLDivElement, CalendarMonthProps>(\n function CalendarMonth(props, ref) {\n const {\n className,\n date,\n hideOutOfRangeDates,\n isVisible,\n renderDayContents,\n onMouseLeave,\n TooltipProps,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-calendar-month\",\n css: calendarMonthCss,\n window: targetWindow,\n });\n\n const days = generateVisibleDays(date);\n const {\n helpers: { setHoveredDate },\n } = useCalendarContext();\n\n const handleMouseLeave = (event: SyntheticEvent) => {\n setHoveredDate(event, null);\n onMouseLeave?.(event as MouseEvent<HTMLDivElement>);\n };\n\n return (\n <div\n className={clsx(withBaseName(), className)}\n ref={ref}\n onMouseLeave={handleMouseLeave}\n {...rest}\n >\n <div\n data-testid=\"CalendarDateGrid\"\n className={withBaseName(\"dateGrid\")}\n >\n {days.map((day) => {\n return (\n <CalendarDay\n key={formatDate(day.date)}\n day={day.date}\n renderDayContents={renderDayContents}\n month={date}\n TooltipProps={TooltipProps}\n />\n );\n })}\n </div>\n </div>\n );\n }\n);\n"],"names":["CalendarMonth","calendarMonthCss"],"mappings":";;;;;;;;;;;AAyBA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,IAAA;AAAA,MACA,mBAAA;AAAA,MACA,SAAA;AAAA,MACA,iBAAA;AAAA,MACA,YAAA;AAAA,MACA,YAAA;AAAA,MACG,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,IAAA,GAAO,oBAAoB,IAAI,CAAA,CAAA;AACrC,IAAM,MAAA;AAAA,MACJ,OAAA,EAAS,EAAE,cAAe,EAAA;AAAA,QACxB,kBAAmB,EAAA,CAAA;AAEvB,IAAM,MAAA,gBAAA,GAAmB,CAAC,KAA0B,KAAA;AAClD,MAAA,cAAA,CAAe,OAAO,IAAI,CAAA,CAAA;AAC1B,MAAe,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACjB,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA;AAAA,MACA,YAAc,EAAA,gBAAA;AAAA,MACb,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,QACC,aAAY,EAAA,kBAAA;AAAA,QACZ,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,QAEjC,QAAA,EAAA,IAAA,CAAK,GAAI,CAAA,CAAC,GAAQ,KAAA;AACjB,UAAA,uBACG,GAAA,CAAA,WAAA,EAAA;AAAA,YAEC,KAAK,GAAI,CAAA,IAAA;AAAA,YACT,iBAAA;AAAA,YACA,KAAO,EAAA,IAAA;AAAA,YACP,YAAA;AAAA,WAJK,EAAA,UAAA,CAAW,GAAI,CAAA,IAAI,CAK1B,CAAA,CAAA;AAAA,SAEH,CAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1
+ {"version":3,"file":"CalendarMonth.js","sources":["../src/calendar/internal/CalendarMonth.tsx"],"sourcesContent":["import {\n ComponentPropsWithRef,\n forwardRef,\n MouseEvent,\n SyntheticEvent,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { DateValue } from \"@internationalized/date\";\nimport { CalendarDay, CalendarDayProps } from \"./CalendarDay\";\nimport { formatDate, generateVisibleDays } from \"./utils\";\n\nimport calendarMonthCss from \"./CalendarMonth.css\";\nimport { useCalendarContext } from \"./CalendarContext\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport interface CalendarMonthProps extends ComponentPropsWithRef<\"div\"> {\n date: DateValue;\n hideOutOfRangeDates?: boolean;\n renderDayContents?: CalendarDayProps[\"renderDayContents\"];\n isVisible?: boolean;\n TooltipProps?: CalendarDayProps[\"TooltipProps\"];\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarMonth\");\n\nexport const CalendarMonth = forwardRef<HTMLDivElement, CalendarMonthProps>(\n function CalendarMonth(props, ref) {\n const {\n className,\n date,\n renderDayContents,\n onMouseLeave,\n TooltipProps,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-calendar-month\",\n css: calendarMonthCss,\n window: targetWindow,\n });\n\n const days = generateVisibleDays(date);\n const {\n helpers: { setHoveredDate },\n } = useCalendarContext();\n\n const handleMouseLeave = (event: SyntheticEvent) => {\n setHoveredDate(event, null);\n onMouseLeave?.(event as MouseEvent<HTMLDivElement>);\n };\n\n return (\n <div\n className={clsx(withBaseName(), className)}\n ref={ref}\n onMouseLeave={handleMouseLeave}\n {...rest}\n >\n <div\n data-testid=\"CalendarDateGrid\"\n className={withBaseName(\"dateGrid\")}\n >\n {days.map((day) => {\n return (\n <CalendarDay\n key={formatDate(day.date)}\n day={day.date}\n renderDayContents={renderDayContents}\n month={date}\n TooltipProps={TooltipProps}\n />\n );\n })}\n </div>\n </div>\n );\n }\n);\n"],"names":["CalendarMonth","calendarMonthCss"],"mappings":";;;;;;;;;;;AAyBA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,IAAA;AAAA,MACA,iBAAA;AAAA,MACA,YAAA;AAAA,MACA,YAAA;AAAA,MACG,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,IAAA,GAAO,oBAAoB,IAAI,CAAA,CAAA;AACrC,IAAM,MAAA;AAAA,MACJ,OAAA,EAAS,EAAE,cAAe,EAAA;AAAA,QACxB,kBAAmB,EAAA,CAAA;AAEvB,IAAM,MAAA,gBAAA,GAAmB,CAAC,KAA0B,KAAA;AAClD,MAAA,cAAA,CAAe,OAAO,IAAI,CAAA,CAAA;AAC1B,MAAe,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACjB,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA;AAAA,MACA,YAAc,EAAA,gBAAA;AAAA,MACb,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,QACC,aAAY,EAAA,kBAAA;AAAA,QACZ,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,QAEjC,QAAA,EAAA,IAAA,CAAK,GAAI,CAAA,CAAC,GAAQ,KAAA;AACjB,UAAA,uBACG,GAAA,CAAA,WAAA,EAAA;AAAA,YAEC,KAAK,GAAI,CAAA,IAAA;AAAA,YACT,iBAAA;AAAA,YACA,KAAO,EAAA,IAAA;AAAA,YACP,YAAA;AAAA,WAJK,EAAA,UAAA,CAAW,GAAI,CAAA,IAAI,CAK1B,CAAA,CAAA;AAAA,SAEH,CAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
@@ -1,4 +1,4 @@
1
- var css_248z = ".salt-density-medium,\n.salt-density-touch,\n.salt-density-low {\n --calendar-navigation-gap: calc(var(--salt-size-unit) * 0.5);\n}\n\n.salt-density-high {\n --calendar-navigation-gap: 0px;\n}\n\n.saltCalendarNavigation-hideYearDropdown {\n --calendar-navigation-gap: calc(var(--salt-size-unit) * 2);\n}\n\n.saltCalendarNavigation {\n display: grid;\n grid-template-columns: min-content auto auto min-content;\n grid-gap: var(--calendar-navigation-gap);\n}\n\n.saltCalendarNavigation-hideYearDropdown {\n grid-template-columns: min-content auto min-content;\n}\n";
1
+ var css_248z = ".saltCalendarNavigation {\n display: grid;\n grid-template-columns: min-content auto min-content;\n padding-bottom: var(--salt-spacing-100);\n grid-gap: 0;\n align-items: center;\n height: var(--salt-size-base);\n}\n\n.saltCalendarNavigation-hideYearDropdown {\n grid-template-columns: min-content auto min-content;\n grid-gap: var(--salt-spacing-300);\n}\n\n.saltCalendarNavigation-dropdowns {\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-gap: var(--salt-spacing-100);\n}\n";
2
2
 
3
3
  export { css_248z as default };
4
4
  //# sourceMappingURL=CalendarNavigation.css.js.map
@@ -1,25 +1,18 @@
1
1
  import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { makePrefixer, useId, Tooltip, Button } from '@salt-ds/core';
2
+ import { forwardRef } from 'react';
3
+ import { makePrefixer, Tooltip, Button } from '@salt-ds/core';
3
4
  import { ChevronLeftIcon, ChevronRightIcon } from '@salt-ds/icons';
4
5
  import { clsx } from 'clsx';
5
- import { forwardRef } from 'react';
6
- import '../../dropdown/DropdownBase.js';
7
- import '../../dropdown/DropdownButton.js';
8
- import { Dropdown } from '../../dropdown/Dropdown.js';
9
- import '../../responsive/useResizeObserver.js';
10
- import '../../form-field-context-legacy/FormFieldLegacyContext.js';
11
- import '../../list/Highlighter.js';
12
- import { ListItem } from '../../list/ListItem.js';
13
- import '../../list/List.js';
14
- import '../../common-hooks/collectionProvider.js';
15
- import '../../common-hooks/keyUtils.js';
16
- import '../../list/VirtualizedList.js';
6
+ import { DropdownNext } from '../../dropdown-next/DropdownNext.js';
17
7
  import { useCalendarContext } from './CalendarContext.js';
18
8
  import css_248z from './CalendarNavigation.css.js';
19
9
  import { isSameMonth, isSameYear } from '@internationalized/date';
20
10
  import { formatDate, monthsForLocale, monthDiff } from './utils.js';
21
11
  import { useWindow } from '@salt-ds/window';
22
12
  import { useComponentCssInjection } from '@salt-ds/styles';
13
+ import { Option } from '../../option/Option.js';
14
+ import '../../option/OptionGroup.js';
15
+ import { useListControlContext } from '../../list-control/ListControlContext.js';
23
16
 
24
17
  const withBaseName = makePrefixer("saltCalendarNavigation");
25
18
  function useCalendarNavigation() {
@@ -52,15 +45,13 @@ function useCalendarNavigation() {
52
45
  setVisibleMonth(event, newMonth);
53
46
  }
54
47
  };
55
- const months = monthsForLocale(visibleMonth).map((month) => {
56
- return { value: month, disabled: isOutsideAllowedMonths(month) };
57
- });
58
- const years = [-2, -1, 0, 1, 2].map((delta) => ({ value: visibleMonth.add({ years: delta }) })).filter(({ value }) => !isOutsideAllowedYears(value));
48
+ const months = monthsForLocale(visibleMonth);
49
+ const years = [-2, -1, 0, 1, 2].map((delta) => visibleMonth.add({ years: delta })).filter((year) => !isOutsideAllowedYears(year));
59
50
  const selectedMonth = months.find(
60
- (item) => isSameMonth(item.value, visibleMonth)
51
+ (month) => isSameMonth(month, visibleMonth)
61
52
  );
62
53
  const selectedYear = years.find(
63
- (item) => isSameYear(item.value, visibleMonth)
54
+ (year) => isSameYear(year, visibleMonth)
64
55
  );
65
56
  const canNavigatePrevious = !(minDate && isDayVisible(minDate));
66
57
  const canNavigateNext = !(maxDate && isDayVisible(maxDate));
@@ -74,22 +65,32 @@ function useCalendarNavigation() {
74
65
  canNavigateNext,
75
66
  canNavigatePrevious,
76
67
  selectedMonth,
77
- selectedYear
68
+ selectedYear,
69
+ isOutsideAllowedMonths
78
70
  };
79
71
  }
80
- const ListItemWithTooltip = ({
81
- item,
82
- label,
83
- ...props
84
- }) => /* @__PURE__ */ jsx(Tooltip, {
85
- placement: "right",
86
- disabled: !(item == null ? void 0 : item.disabled),
87
- content: "This month is out of range",
88
- children: /* @__PURE__ */ jsx(ListItem, {
89
- ...props,
90
- children: label
91
- })
92
- });
72
+ const OptionWithTooltip = ({
73
+ value,
74
+ children,
75
+ disabled,
76
+ tooltipContent
77
+ }) => {
78
+ const { activeState, openState } = useListControlContext();
79
+ const open = (activeState == null ? void 0 : activeState.value) === value;
80
+ return /* @__PURE__ */ jsx(Tooltip, {
81
+ placement: "right",
82
+ open: open && openState,
83
+ disabled: !disabled,
84
+ content: tooltipContent,
85
+ enterDelay: 0,
86
+ leaveDelay: 0,
87
+ children: /* @__PURE__ */ jsx(Option, {
88
+ value,
89
+ disabled,
90
+ children
91
+ })
92
+ });
93
+ };
93
94
  const CalendarNavigation = forwardRef(function CalendarNavigation2(props, ref) {
94
95
  const {
95
96
  className,
@@ -114,7 +115,8 @@ const CalendarNavigation = forwardRef(function CalendarNavigation2(props, ref) {
114
115
  canNavigatePrevious,
115
116
  visibleMonth,
116
117
  selectedMonth,
117
- selectedYear
118
+ selectedYear,
119
+ isOutsideAllowedMonths
118
120
  } = useCalendarNavigation();
119
121
  const handleNavigatePrevious = (event) => {
120
122
  moveToPreviousMonth(event);
@@ -123,33 +125,16 @@ const CalendarNavigation = forwardRef(function CalendarNavigation2(props, ref) {
123
125
  moveToNextMonth(event);
124
126
  };
125
127
  const handleMonthSelect = (event, month) => {
126
- if (month) {
127
- moveToMonth(event, month.value);
128
- }
128
+ moveToMonth(event, month[0]);
129
129
  };
130
130
  const handleYearSelect = (event, year) => {
131
- if (year) {
132
- moveToMonth(event, year.value);
133
- }
131
+ moveToMonth(event, year[0]);
134
132
  };
135
- const monthDropdownId = useId(MonthDropdownProps == null ? void 0 : MonthDropdownProps.id) || "";
136
- const monthDropdownLabelledBy = clsx(
137
- MonthDropdownProps == null ? void 0 : MonthDropdownProps["aria-labelledby"],
138
- `${monthDropdownId}-control`
139
- );
140
- const yearDropdownId = useId(YearDropdownProps == null ? void 0 : YearDropdownProps.id) || "";
141
- const yearDropdownLabelledBy = clsx(
142
- YearDropdownProps == null ? void 0 : YearDropdownProps["aria-labelledby"],
143
- `${yearDropdownId}-control`
144
- );
145
- const defaultItemToMonth = (date) => {
146
- if (hideYearDropdown) {
147
- return formatDate(date.value, { month: "long" });
148
- }
149
- return formatDate(date.value, { month: "short" });
133
+ const formatMonth = (date) => {
134
+ return !date ? "" : formatDate(date, { month: hideYearDropdown ? "long" : "short" });
150
135
  };
151
- const defaultItemToYear = (date) => {
152
- return formatDate(date.value, { year: "numeric" });
136
+ const formatYear = (date) => {
137
+ return !date ? "" : formatDate(date, { year: "numeric" });
153
138
  };
154
139
  return /* @__PURE__ */ jsxs("div", {
155
140
  className: clsx(
@@ -164,11 +149,12 @@ const CalendarNavigation = forwardRef(function CalendarNavigation2(props, ref) {
164
149
  placement: "top",
165
150
  disabled: canNavigatePrevious,
166
151
  content: "Past dates are out of range",
152
+ enterDelay: 0,
153
+ leaveDelay: 0,
167
154
  children: /* @__PURE__ */ jsx(Button, {
168
155
  disabled: !canNavigatePrevious,
169
156
  variant: "secondary",
170
157
  onClick: handleNavigatePrevious,
171
- className: withBaseName("previousButton"),
172
158
  focusableWhenDisabled: true,
173
159
  children: /* @__PURE__ */ jsx(ChevronLeftIcon, {
174
160
  "aria-label": `Previous Month, ${formatDate(
@@ -177,39 +163,46 @@ const CalendarNavigation = forwardRef(function CalendarNavigation2(props, ref) {
177
163
  })
178
164
  })
179
165
  }),
180
- /* @__PURE__ */ jsx(Dropdown, {
181
- source: months,
182
- id: monthDropdownId,
183
- "aria-labelledby": monthDropdownLabelledBy,
184
- "aria-label": "Month Dropdown",
185
- ...MonthDropdownProps,
186
- ListItem: ListItemWithTooltip,
187
- selected: selectedMonth,
188
- itemToString: defaultItemToMonth,
189
- onSelectionChange: handleMonthSelect,
190
- fullWidth: true
191
- }),
192
- !hideYearDropdown && /* @__PURE__ */ jsx(Dropdown, {
193
- source: years,
194
- id: yearDropdownId,
195
- "aria-labelledby": yearDropdownLabelledBy,
196
- "aria-label": "Year Dropdown",
197
- ...YearDropdownProps,
198
- ListItem: ListItemWithTooltip,
199
- selected: selectedYear,
200
- onSelectionChange: handleYearSelect,
201
- itemToString: defaultItemToYear,
202
- fullWidth: true
166
+ /* @__PURE__ */ jsxs("div", {
167
+ className: withBaseName("dropdowns"),
168
+ children: [
169
+ /* @__PURE__ */ jsx(DropdownNext, {
170
+ "aria-label": "Month Dropdown",
171
+ selected: selectedMonth ? [selectedMonth] : [],
172
+ value: formatMonth(selectedMonth),
173
+ onSelectionChange: handleMonthSelect,
174
+ ...MonthDropdownProps,
175
+ children: months.map((month) => /* @__PURE__ */ jsx(OptionWithTooltip, {
176
+ value: month,
177
+ disabled: isOutsideAllowedMonths(month),
178
+ tooltipContent: "This month is out of range",
179
+ children: formatMonth(month)
180
+ }, formatMonth(month)))
181
+ }),
182
+ !hideYearDropdown && /* @__PURE__ */ jsx(DropdownNext, {
183
+ "aria-label": "Year Dropdown",
184
+ selected: selectedYear ? [selectedYear] : [],
185
+ value: formatYear(selectedYear),
186
+ onSelectionChange: handleYearSelect,
187
+ ...YearDropdownProps,
188
+ children: years.map((year) => /* @__PURE__ */ jsx(OptionWithTooltip, {
189
+ value: year,
190
+ tooltipContent: "This year is out of range",
191
+ children: formatYear(year)
192
+ }, formatYear(year)))
193
+ })
194
+ ]
203
195
  }),
204
196
  /* @__PURE__ */ jsx(Tooltip, {
205
197
  placement: "top",
206
198
  disabled: canNavigateNext,
207
199
  content: "Future dates are out of range",
200
+ enterDelay: 0,
201
+ leaveDelay: 0,
208
202
  children: /* @__PURE__ */ jsx(Button, {
209
203
  disabled: !canNavigateNext,
210
204
  variant: "secondary",
211
205
  onClick: handleNavigateNext,
212
- className: withBaseName("nextButton"),
213
206
  focusableWhenDisabled: true,
214
207
  children: /* @__PURE__ */ jsx(ChevronRightIcon, {
215
208
  "aria-label": `Next Month, ${formatDate(
@@ -1 +1 @@
1
- {"version":3,"file":"CalendarNavigation.js","sources":["../src/calendar/internal/CalendarNavigation.tsx"],"sourcesContent":["import {\n Button,\n ButtonProps,\n makePrefixer,\n Tooltip,\n useId,\n} from \"@salt-ds/core\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n ComponentPropsWithRef,\n forwardRef,\n MouseEventHandler,\n SyntheticEvent,\n} from \"react\";\nimport { Dropdown, DropdownProps } from \"../../dropdown\";\nimport { ListItem, ListItemType } from \"../../list\";\n\nimport { useCalendarContext } from \"./CalendarContext\";\n\nimport calendarNavigationCss from \"./CalendarNavigation.css\";\nimport { DateValue, isSameMonth, isSameYear } from \"@internationalized/date\";\nimport { formatDate, monthDiff, monthsForLocale } from \"./utils\";\nimport { SelectionChangeHandler } from \"../../common-hooks\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\ntype DropdownItem = {\n value: DateValue;\n disabled?: boolean;\n};\n\ntype dateDropdownProps = DropdownProps<DropdownItem>;\n\nexport interface CalendarNavigationProps extends ComponentPropsWithRef<\"div\"> {\n MonthDropdownProps?: dateDropdownProps;\n YearDropdownProps?: dateDropdownProps;\n onMonthSelect?: dateDropdownProps[\"onChange\"];\n onYearSelect?: dateDropdownProps[\"onChange\"];\n onNavigateNext?: ButtonProps[\"onClick\"];\n onNavigatePrevious?: ButtonProps[\"onClick\"];\n hideYearDropdown?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarNavigation\");\n\nfunction useCalendarNavigation() {\n const {\n state: { visibleMonth, minDate, maxDate },\n helpers: {\n setVisibleMonth,\n isDayVisible,\n isOutsideAllowedYears,\n isOutsideAllowedMonths,\n },\n } = useCalendarContext();\n\n const moveToNextMonth = (event: SyntheticEvent) => {\n setVisibleMonth(event, visibleMonth.add({ months: 1 }));\n };\n\n const moveToPreviousMonth = (event: SyntheticEvent) => {\n setVisibleMonth(event, visibleMonth.subtract({ months: 1 }));\n };\n\n const moveToMonth = (event: SyntheticEvent, month: DateValue) => {\n let newMonth = month;\n\n if (!isOutsideAllowedYears(newMonth)) {\n if (isOutsideAllowedMonths(newMonth)) {\n // If month is navigable we should move to the closest navigable month\n const navigableMonths = monthsForLocale(visibleMonth).filter(\n (n) => !isOutsideAllowedMonths(n)\n );\n newMonth = navigableMonths.reduce((closestMonth, currentMonth) =>\n Math.abs(monthDiff(currentMonth, newMonth)) <\n Math.abs(monthDiff(closestMonth, newMonth))\n ? currentMonth\n : closestMonth\n );\n }\n setVisibleMonth(event, newMonth);\n }\n };\n\n const months = monthsForLocale(visibleMonth).map((month) => {\n return { value: month, disabled: isOutsideAllowedMonths(month) };\n });\n\n const years = [-2, -1, 0, 1, 2]\n .map((delta) => ({ value: visibleMonth.add({ years: delta }) }))\n .filter(({ value }) => !isOutsideAllowedYears(value));\n\n const selectedMonth = months.find((item: DropdownItem) =>\n isSameMonth(item.value, visibleMonth)\n );\n const selectedYear = years.find((item: DropdownItem) =>\n isSameYear(item.value, visibleMonth)\n );\n\n const canNavigatePrevious = !(minDate && isDayVisible(minDate));\n const canNavigateNext = !(maxDate && isDayVisible(maxDate));\n\n return {\n moveToNextMonth,\n moveToPreviousMonth,\n moveToMonth,\n visibleMonth,\n months,\n years,\n canNavigateNext,\n canNavigatePrevious,\n selectedMonth,\n selectedYear,\n };\n}\n\nconst ListItemWithTooltip: ListItemType<DropdownItem> = ({\n item,\n label,\n ...props\n}) => (\n <Tooltip\n placement=\"right\"\n disabled={!item?.disabled}\n content=\"This month is out of range\"\n >\n <ListItem {...props}>{label}</ListItem>\n </Tooltip>\n);\n\nexport const CalendarNavigation = forwardRef<\n HTMLDivElement,\n CalendarNavigationProps\n>(function CalendarNavigation(props, ref) {\n const {\n className,\n MonthDropdownProps,\n YearDropdownProps,\n hideYearDropdown,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-calendar-navigation\",\n css: calendarNavigationCss,\n window: targetWindow,\n });\n\n const {\n moveToPreviousMonth,\n moveToNextMonth,\n moveToMonth,\n months,\n years,\n canNavigateNext,\n canNavigatePrevious,\n visibleMonth,\n selectedMonth,\n selectedYear,\n } = useCalendarNavigation();\n\n const handleNavigatePrevious: MouseEventHandler<HTMLButtonElement> = (\n event\n ) => {\n moveToPreviousMonth(event);\n };\n\n const handleNavigateNext: MouseEventHandler<HTMLButtonElement> = (event) => {\n moveToNextMonth(event);\n };\n\n const handleMonthSelect: SelectionChangeHandler<DropdownItem> = (\n event,\n month\n ) => {\n if (month) {\n moveToMonth(event, month.value);\n }\n };\n\n const handleYearSelect: SelectionChangeHandler<DropdownItem> = (\n event,\n year\n ) => {\n if (year) {\n moveToMonth(event, year.value);\n }\n };\n\n const monthDropdownId = useId(MonthDropdownProps?.id) || \"\";\n const monthDropdownLabelledBy = clsx(\n MonthDropdownProps?.[\"aria-labelledby\"],\n // TODO need a prop on Dropdown to allow buttonId to be passed, should not make assumptions about internal\n // id assignment like this\n `${monthDropdownId}-control`\n );\n\n const yearDropdownId = useId(YearDropdownProps?.id) || \"\";\n const yearDropdownLabelledBy = clsx(\n YearDropdownProps?.[\"aria-labelledby\"],\n `${yearDropdownId}-control`\n );\n\n const defaultItemToMonth = (date: DropdownItem) => {\n if (hideYearDropdown) {\n return formatDate(date.value, { month: \"long\" });\n }\n return formatDate(date.value, { month: \"short\" });\n };\n\n const defaultItemToYear = (date: DropdownItem) => {\n return formatDate(date.value, { year: \"numeric\" });\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n { [withBaseName(\"hideYearDropdown\")]: hideYearDropdown },\n className\n )}\n ref={ref}\n {...rest}\n >\n <Tooltip\n placement=\"top\"\n disabled={canNavigatePrevious}\n content=\"Past dates are out of range\"\n >\n <Button\n disabled={!canNavigatePrevious}\n variant=\"secondary\"\n onClick={handleNavigatePrevious}\n className={withBaseName(\"previousButton\")}\n focusableWhenDisabled={true}\n >\n <ChevronLeftIcon\n aria-label={`Previous Month, ${formatDate(\n visibleMonth.subtract({ months: 1 })\n )}`}\n />\n </Button>\n </Tooltip>\n <Dropdown<DropdownItem>\n source={months}\n id={monthDropdownId}\n aria-labelledby={monthDropdownLabelledBy}\n aria-label=\"Month Dropdown\"\n {...MonthDropdownProps}\n ListItem={ListItemWithTooltip}\n selected={selectedMonth}\n itemToString={defaultItemToMonth}\n onSelectionChange={handleMonthSelect}\n fullWidth\n />\n {!hideYearDropdown && (\n <Dropdown<DropdownItem>\n source={years}\n id={yearDropdownId}\n aria-labelledby={yearDropdownLabelledBy}\n aria-label=\"Year Dropdown\"\n {...YearDropdownProps}\n ListItem={ListItemWithTooltip}\n selected={selectedYear}\n onSelectionChange={handleYearSelect}\n itemToString={defaultItemToYear}\n fullWidth\n />\n )}\n <Tooltip\n placement=\"top\"\n disabled={canNavigateNext}\n content=\"Future dates are out of range\"\n >\n <Button\n disabled={!canNavigateNext}\n variant=\"secondary\"\n onClick={handleNavigateNext}\n className={withBaseName(\"nextButton\")}\n focusableWhenDisabled={true}\n >\n <ChevronRightIcon\n aria-label={`Next Month, ${formatDate(\n visibleMonth.add({ months: 1 })\n )}`}\n />\n </Button>\n </Tooltip>\n </div>\n );\n});\n"],"names":["CalendarNavigation","calendarNavigationCss"],"mappings":"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"}
1
+ {"version":3,"file":"CalendarNavigation.js","sources":["../src/calendar/internal/CalendarNavigation.tsx"],"sourcesContent":["import {\n ComponentPropsWithRef,\n forwardRef,\n MouseEventHandler,\n SyntheticEvent,\n} from \"react\";\nimport { Button, ButtonProps, makePrefixer, Tooltip } from \"@salt-ds/core\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { DropdownNext, DropdownNextProps } from \"../../dropdown-next\";\n\nimport { useCalendarContext } from \"./CalendarContext\";\n\nimport calendarNavigationCss from \"./CalendarNavigation.css\";\nimport { DateValue, isSameMonth, isSameYear } from \"@internationalized/date\";\nimport { formatDate, monthDiff, monthsForLocale } from \"./utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { Option, OptionProps } from \"../../option\";\nimport { useListControlContext } from \"../../list-control/ListControlContext\";\n\ntype dateDropdownProps = DropdownNextProps<DateValue>;\n\nexport interface CalendarNavigationProps extends ComponentPropsWithRef<\"div\"> {\n MonthDropdownProps?: dateDropdownProps;\n YearDropdownProps?: dateDropdownProps;\n onMonthSelect?: dateDropdownProps[\"onChange\"];\n onYearSelect?: dateDropdownProps[\"onChange\"];\n onNavigateNext?: ButtonProps[\"onClick\"];\n onNavigatePrevious?: ButtonProps[\"onClick\"];\n hideYearDropdown?: boolean;\n}\n\ninterface OptionWithTooltipProps extends OptionProps {\n value: DateValue;\n tooltipContent: string;\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarNavigation\");\n\nfunction useCalendarNavigation() {\n const {\n state: { visibleMonth, minDate, maxDate },\n helpers: {\n setVisibleMonth,\n isDayVisible,\n isOutsideAllowedYears,\n isOutsideAllowedMonths,\n },\n } = useCalendarContext();\n\n const moveToNextMonth = (event: SyntheticEvent) => {\n setVisibleMonth(event, visibleMonth.add({ months: 1 }));\n };\n\n const moveToPreviousMonth = (event: SyntheticEvent) => {\n setVisibleMonth(event, visibleMonth.subtract({ months: 1 }));\n };\n\n const moveToMonth = (event: SyntheticEvent, month: DateValue) => {\n let newMonth = month;\n\n if (!isOutsideAllowedYears(newMonth)) {\n if (isOutsideAllowedMonths(newMonth)) {\n // If month is navigable we should move to the closest navigable month\n const navigableMonths = monthsForLocale(visibleMonth).filter(\n (n) => !isOutsideAllowedMonths(n)\n );\n newMonth = navigableMonths.reduce((closestMonth, currentMonth) =>\n Math.abs(monthDiff(currentMonth, newMonth)) <\n Math.abs(monthDiff(closestMonth, newMonth))\n ? currentMonth\n : closestMonth\n );\n }\n setVisibleMonth(event, newMonth);\n }\n };\n\n const months: DateValue[] = monthsForLocale(visibleMonth);\n\n const years: DateValue[] = [-2, -1, 0, 1, 2]\n .map((delta) => visibleMonth.add({ years: delta }))\n .filter((year) => !isOutsideAllowedYears(year));\n\n const selectedMonth: DateValue | undefined = months.find((month: DateValue) =>\n isSameMonth(month, visibleMonth)\n );\n const selectedYear: DateValue | undefined = years.find((year: DateValue) =>\n isSameYear(year, visibleMonth)\n );\n\n const canNavigatePrevious = !(minDate && isDayVisible(minDate));\n const canNavigateNext = !(maxDate && isDayVisible(maxDate));\n\n return {\n moveToNextMonth,\n moveToPreviousMonth,\n moveToMonth,\n visibleMonth,\n months,\n years,\n canNavigateNext,\n canNavigatePrevious,\n selectedMonth,\n selectedYear,\n isOutsideAllowedMonths,\n };\n}\n\nconst OptionWithTooltip = ({\n value,\n children,\n disabled,\n tooltipContent,\n}: OptionWithTooltipProps) => {\n const { activeState, openState } = useListControlContext();\n const open = activeState?.value === value;\n\n return (\n <Tooltip\n placement=\"right\"\n open={open && openState}\n disabled={!disabled}\n content={tooltipContent}\n enterDelay={0} // --salt-duration-instant\n leaveDelay={0} // --salt-duration-instant\n >\n <Option value={value} disabled={disabled}>\n {children}\n </Option>\n </Tooltip>\n );\n};\n\nexport const CalendarNavigation = forwardRef<\n HTMLDivElement,\n CalendarNavigationProps\n>(function CalendarNavigation(props, ref) {\n const {\n className,\n MonthDropdownProps,\n YearDropdownProps,\n hideYearDropdown,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-calendar-navigation\",\n css: calendarNavigationCss,\n window: targetWindow,\n });\n\n const {\n moveToPreviousMonth,\n moveToNextMonth,\n moveToMonth,\n months,\n years,\n canNavigateNext,\n canNavigatePrevious,\n visibleMonth,\n selectedMonth,\n selectedYear,\n isOutsideAllowedMonths,\n } = useCalendarNavigation();\n\n const handleNavigatePrevious: MouseEventHandler<HTMLButtonElement> = (\n event\n ) => {\n moveToPreviousMonth(event);\n };\n\n const handleNavigateNext: MouseEventHandler<HTMLButtonElement> = (event) => {\n moveToNextMonth(event);\n };\n\n const handleMonthSelect = (event: SyntheticEvent, month: DateValue[]) => {\n moveToMonth(event, month[0]);\n };\n\n const handleYearSelect = (event: SyntheticEvent, year: DateValue[]) => {\n moveToMonth(event, year[0]);\n };\n\n const formatMonth = (date?: DateValue) => {\n return !date\n ? \"\"\n : formatDate(date, { month: hideYearDropdown ? \"long\" : \"short\" });\n };\n\n const formatYear = (date?: DateValue) => {\n return !date ? \"\" : formatDate(date, { year: \"numeric\" });\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n { [withBaseName(\"hideYearDropdown\")]: hideYearDropdown },\n className\n )}\n ref={ref}\n {...rest}\n >\n <Tooltip\n placement=\"top\"\n disabled={canNavigatePrevious}\n content=\"Past dates are out of range\"\n enterDelay={0} // --salt-duration-instant\n leaveDelay={0} // --salt-duration-instant\n >\n <Button\n disabled={!canNavigatePrevious}\n variant=\"secondary\"\n onClick={handleNavigatePrevious}\n focusableWhenDisabled={true}\n >\n <ChevronLeftIcon\n aria-label={`Previous Month, ${formatDate(\n visibleMonth.subtract({ months: 1 })\n )}`}\n />\n </Button>\n </Tooltip>\n <div className={withBaseName(\"dropdowns\")}>\n <DropdownNext\n aria-label=\"Month Dropdown\"\n selected={selectedMonth ? [selectedMonth] : []}\n value={formatMonth(selectedMonth)}\n onSelectionChange={handleMonthSelect}\n {...MonthDropdownProps}\n >\n {months.map((month) => (\n <OptionWithTooltip\n key={formatMonth(month)}\n value={month}\n disabled={isOutsideAllowedMonths(month)}\n tooltipContent=\"This month is out of range\"\n >\n {formatMonth(month)}\n </OptionWithTooltip>\n ))}\n </DropdownNext>\n {!hideYearDropdown && (\n <DropdownNext\n aria-label=\"Year Dropdown\"\n selected={selectedYear ? [selectedYear] : []}\n value={formatYear(selectedYear)}\n onSelectionChange={handleYearSelect}\n {...YearDropdownProps}\n >\n {years.map((year) => (\n <OptionWithTooltip\n key={formatYear(year)}\n value={year}\n tooltipContent=\"This year is out of range\"\n >\n {formatYear(year)}\n </OptionWithTooltip>\n ))}\n </DropdownNext>\n )}\n </div>\n <Tooltip\n placement=\"top\"\n disabled={canNavigateNext}\n content=\"Future dates are out of range\"\n enterDelay={0} // --salt-duration-instant\n leaveDelay={0} // --salt-duration-instant\n >\n <Button\n disabled={!canNavigateNext}\n variant=\"secondary\"\n onClick={handleNavigateNext}\n focusableWhenDisabled={true}\n >\n <ChevronRightIcon\n aria-label={`Next Month, ${formatDate(\n visibleMonth.add({ months: 1 })\n )}`}\n />\n </Button>\n </Tooltip>\n </div>\n );\n});\n"],"names":["CalendarNavigation","calendarNavigationCss"],"mappings":"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"}