@danske/sapphire-react-lab 0.89.0 → 0.90.2

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 (141) hide show
  1. package/build/cjs/index.js +296 -3054
  2. package/build/cjs/index.js.map +1 -1
  3. package/build/esm/Accordion/index.js.map +1 -1
  4. package/build/esm/Accordion/src/Accordion.js +2 -2
  5. package/build/esm/Accordion/src/Accordion.js.map +1 -1
  6. package/build/esm/Accordion/src/AccordionHeading.js +1 -1
  7. package/build/esm/Accordion/src/AccordionHeading.js.map +1 -1
  8. package/build/esm/Accordion/src/AccordionItem.js.map +1 -1
  9. package/build/esm/FileDropzone/src/FileDropzone.js +3 -4
  10. package/build/esm/FileDropzone/src/FileDropzone.js.map +1 -1
  11. package/build/esm/Filtering/src/FilterDropdown.js +9 -8
  12. package/build/esm/Filtering/src/FilterDropdown.js.map +1 -1
  13. package/build/esm/LabeledValue/src/LabeledValue.js +2 -2
  14. package/build/esm/LabeledValue/src/LabeledValue.js.map +1 -1
  15. package/build/esm/NumberField/src/NumberField.js +11 -11
  16. package/build/esm/NumberField/src/NumberField.js.map +1 -1
  17. package/build/esm/NumberField/src/StepperButton.js +1 -1
  18. package/build/esm/NumberField/src/StepperButton.js.map +1 -1
  19. package/build/esm/TagGroup/src/Tag.js +2 -2
  20. package/build/esm/TagGroup/src/Tag.js.map +1 -1
  21. package/build/esm/TagGroup/src/TagGroup.js.map +1 -1
  22. package/build/esm/index.js +0 -17
  23. package/build/esm/index.js.map +1 -1
  24. package/build/index.d.ts +28 -756
  25. package/package.json +5 -13
  26. package/build/esm/AlertDialog/src/AlertDialog.js +0 -75
  27. package/build/esm/AlertDialog/src/AlertDialog.js.map +0 -1
  28. package/build/esm/Avatar/src/Avatar.js +0 -76
  29. package/build/esm/Avatar/src/Avatar.js.map +0 -1
  30. package/build/esm/Calendar/i18n/da-DK.js +0 -9
  31. package/build/esm/Calendar/i18n/da-DK.js.map +0 -1
  32. package/build/esm/Calendar/i18n/de-DE.js +0 -9
  33. package/build/esm/Calendar/i18n/de-DE.js.map +0 -1
  34. package/build/esm/Calendar/i18n/en-US.js +0 -9
  35. package/build/esm/Calendar/i18n/en-US.js.map +0 -1
  36. package/build/esm/Calendar/i18n/fi-FI.js +0 -9
  37. package/build/esm/Calendar/i18n/fi-FI.js.map +0 -1
  38. package/build/esm/Calendar/i18n/index.js +0 -20
  39. package/build/esm/Calendar/i18n/index.js.map +0 -1
  40. package/build/esm/Calendar/i18n/nb-NO.js +0 -9
  41. package/build/esm/Calendar/i18n/nb-NO.js.map +0 -1
  42. package/build/esm/Calendar/i18n/pl-PL.js +0 -9
  43. package/build/esm/Calendar/i18n/pl-PL.js.map +0 -1
  44. package/build/esm/Calendar/i18n/sv-SE.js +0 -9
  45. package/build/esm/Calendar/i18n/sv-SE.js.map +0 -1
  46. package/build/esm/Calendar/src/Calendar.js +0 -121
  47. package/build/esm/Calendar/src/Calendar.js.map +0 -1
  48. package/build/esm/Calendar/src/CalendarButtons.js +0 -96
  49. package/build/esm/Calendar/src/CalendarButtons.js.map +0 -1
  50. package/build/esm/Calendar/src/CalendarDaysGrid.js +0 -169
  51. package/build/esm/Calendar/src/CalendarDaysGrid.js.map +0 -1
  52. package/build/esm/Calendar/src/CalendarHeader.js +0 -58
  53. package/build/esm/Calendar/src/CalendarHeader.js.map +0 -1
  54. package/build/esm/Calendar/src/CalendarMonthOrYearCell.js +0 -79
  55. package/build/esm/Calendar/src/CalendarMonthOrYearCell.js.map +0 -1
  56. package/build/esm/Calendar/src/CalendarMonthsGrid.js +0 -58
  57. package/build/esm/Calendar/src/CalendarMonthsGrid.js.map +0 -1
  58. package/build/esm/Calendar/src/CalendarPageAnimation.js +0 -67
  59. package/build/esm/Calendar/src/CalendarPageAnimation.js.map +0 -1
  60. package/build/esm/Calendar/src/CalendarYearsGrid.js +0 -52
  61. package/build/esm/Calendar/src/CalendarYearsGrid.js.map +0 -1
  62. package/build/esm/Calendar/src/RangeCalendar.js +0 -119
  63. package/build/esm/Calendar/src/RangeCalendar.js.map +0 -1
  64. package/build/esm/Calendar/src/useCustomDurationCalendarGrid.js +0 -57
  65. package/build/esm/Calendar/src/useCustomDurationCalendarGrid.js.map +0 -1
  66. package/build/esm/Calendar/src/useRangeCalendarState.js +0 -57
  67. package/build/esm/Calendar/src/useRangeCalendarState.js.map +0 -1
  68. package/build/esm/Calendar/src/useSapphireCalendarState.js +0 -86
  69. package/build/esm/Calendar/src/useSapphireCalendarState.js.map +0 -1
  70. package/build/esm/Calendar/src/utils.js +0 -12
  71. package/build/esm/Calendar/src/utils.js.map +0 -1
  72. package/build/esm/DateField/i18n/da-DK.js +0 -7
  73. package/build/esm/DateField/i18n/da-DK.js.map +0 -1
  74. package/build/esm/DateField/i18n/de-DE.js +0 -7
  75. package/build/esm/DateField/i18n/de-DE.js.map +0 -1
  76. package/build/esm/DateField/i18n/en-US.js +0 -7
  77. package/build/esm/DateField/i18n/en-US.js.map +0 -1
  78. package/build/esm/DateField/i18n/fi-FI.js +0 -7
  79. package/build/esm/DateField/i18n/fi-FI.js.map +0 -1
  80. package/build/esm/DateField/i18n/index.js +0 -20
  81. package/build/esm/DateField/i18n/index.js.map +0 -1
  82. package/build/esm/DateField/i18n/nb-NO.js +0 -7
  83. package/build/esm/DateField/i18n/nb-NO.js.map +0 -1
  84. package/build/esm/DateField/i18n/pl-PL.js +0 -7
  85. package/build/esm/DateField/i18n/pl-PL.js.map +0 -1
  86. package/build/esm/DateField/i18n/sv-SE.js +0 -7
  87. package/build/esm/DateField/i18n/sv-SE.js.map +0 -1
  88. package/build/esm/DateField/src/DateField.js +0 -129
  89. package/build/esm/DateField/src/DateField.js.map +0 -1
  90. package/build/esm/DateField/src/DateFieldButton.js +0 -44
  91. package/build/esm/DateField/src/DateFieldButton.js.map +0 -1
  92. package/build/esm/DateField/src/DateInput.js +0 -81
  93. package/build/esm/DateField/src/DateInput.js.map +0 -1
  94. package/build/esm/DateField/src/DateRangeField.js +0 -154
  95. package/build/esm/DateField/src/DateRangeField.js.map +0 -1
  96. package/build/esm/DateField/src/DateRangeInput.js +0 -90
  97. package/build/esm/DateField/src/DateRangeInput.js.map +0 -1
  98. package/build/esm/DateField/src/DateSegment.js +0 -52
  99. package/build/esm/DateField/src/DateSegment.js.map +0 -1
  100. package/build/esm/DateField/src/helpers.js +0 -14
  101. package/build/esm/DateField/src/helpers.js.map +0 -1
  102. package/build/esm/DateField/src/useDateRangePickerState.js +0 -57
  103. package/build/esm/DateField/src/useDateRangePickerState.js.map +0 -1
  104. package/build/esm/DateField/src/utils/placeholders.js +0 -91
  105. package/build/esm/DateField/src/utils/placeholders.js.map +0 -1
  106. package/build/esm/DateField/src/utils/segments.js +0 -46
  107. package/build/esm/DateField/src/utils/segments.js.map +0 -1
  108. package/build/esm/FeedbackMessage/src/FeedbackMessage.js +0 -87
  109. package/build/esm/FeedbackMessage/src/FeedbackMessage.js.map +0 -1
  110. package/build/esm/Fieldset/src/Fieldset.js +0 -81
  111. package/build/esm/Fieldset/src/Fieldset.js.map +0 -1
  112. package/build/esm/NotificationBadge/src/NotificationBadge.js +0 -74
  113. package/build/esm/NotificationBadge/src/NotificationBadge.js.map +0 -1
  114. package/build/esm/SearchField/src/SearchField.js +0 -130
  115. package/build/esm/SearchField/src/SearchField.js.map +0 -1
  116. package/build/esm/SearchField/src/useComboBoxState.js +0 -42
  117. package/build/esm/SearchField/src/useComboBoxState.js.map +0 -1
  118. package/build/esm/Toast/src/Toast.js +0 -77
  119. package/build/esm/Toast/src/Toast.js.map +0 -1
  120. package/build/esm/Toast/src/ToastCloseButton.js +0 -50
  121. package/build/esm/Toast/src/ToastCloseButton.js.map +0 -1
  122. package/build/esm/Toast/src/ToastProvider.js +0 -60
  123. package/build/esm/Toast/src/ToastProvider.js.map +0 -1
  124. package/build/esm/Toast/src/ToastRegion.js +0 -66
  125. package/build/esm/Toast/src/ToastRegion.js.map +0 -1
  126. package/build/esm/Toast/src/context.js +0 -10
  127. package/build/esm/Toast/src/context.js.map +0 -1
  128. package/build/esm/Toast/src/useShowToast.js +0 -25
  129. package/build/esm/Toast/src/useShowToast.js.map +0 -1
  130. package/build/esm/ToggleButton/src/ToggleButton.js +0 -85
  131. package/build/esm/ToggleButton/src/ToggleButton.js.map +0 -1
  132. package/build/esm/Typography/index.js +0 -14
  133. package/build/esm/Typography/index.js.map +0 -1
  134. package/build/esm/Typography/src/Body.js +0 -66
  135. package/build/esm/Typography/src/Body.js.map +0 -1
  136. package/build/esm/Typography/src/Caption.js +0 -59
  137. package/build/esm/Typography/src/Caption.js.map +0 -1
  138. package/build/esm/Typography/src/Heading.js +0 -53
  139. package/build/esm/Typography/src/Heading.js.map +0 -1
  140. package/build/esm/Typography/src/Subheading.js +0 -63
  141. package/build/esm/Typography/src/Subheading.js.map +0 -1
@@ -1,169 +0,0 @@
1
- import React, { useMemo } from 'react';
2
- import clsx from 'clsx';
3
- import { useCalendarGrid, useCalendarCell } from '@react-aria/calendar';
4
- import { endOfMonth, getWeeksInMonth, startOfWeek, today, isSameMonth, isSameDay, getDayOfWeek, startOfMonth, getLocalTimeZone } from '@internationalized/date';
5
- import { useLocale, useDateFormatter, useMessageFormatter } from '@react-aria/i18n';
6
- import intlMessages from '../i18n/index.js';
7
- import styles from '@danske/sapphire-css/components/calendar/calendar.module.css';
8
- import { CalendarDayButton } from './CalendarButtons.js';
9
- import { sentenceCase } from './utils.js';
10
-
11
- var __defProp = Object.defineProperty;
12
- var __defProps = Object.defineProperties;
13
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
14
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
15
- var __hasOwnProp = Object.prototype.hasOwnProperty;
16
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
17
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
18
- var __spreadValues = (a, b) => {
19
- for (var prop in b || (b = {}))
20
- if (__hasOwnProp.call(b, prop))
21
- __defNormalProp(a, prop, b[prop]);
22
- if (__getOwnPropSymbols)
23
- for (var prop of __getOwnPropSymbols(b)) {
24
- if (__propIsEnum.call(b, prop))
25
- __defNormalProp(a, prop, b[prop]);
26
- }
27
- return a;
28
- };
29
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
30
- var __objRest = (source, exclude) => {
31
- var target = {};
32
- for (var prop in source)
33
- if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
34
- target[prop] = source[prop];
35
- if (source != null && __getOwnPropSymbols)
36
- for (var prop of __getOwnPropSymbols(source)) {
37
- if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
38
- target[prop] = source[prop];
39
- }
40
- return target;
41
- };
42
- function CalendarDaysGrid(_a) {
43
- var _b = _a, {
44
- state,
45
- startDate = state.visibleRange.start,
46
- showWeekNumbers
47
- } = _b, props = __objRest(_b, [
48
- "state",
49
- "startDate",
50
- "showWeekNumbers"
51
- ]);
52
- const { locale } = useLocale();
53
- const { gridProps, headerProps } = useCalendarGrid(__spreadProps(__spreadValues({}, props), {
54
- startDate,
55
- endDate: endOfMonth(startDate)
56
- }), state);
57
- const weeksInMonth = getWeeksInMonth(startDate, locale);
58
- const dayFormatter = useDateFormatter({
59
- weekday: "short",
60
- timeZone: state.timeZone
61
- });
62
- const weekDays = useMemo(() => {
63
- const weekStart = startOfWeek(today(state.timeZone), locale);
64
- return [...new Array(7).keys()].map((index) => {
65
- const date = weekStart.add({ days: index });
66
- const dateDay = date.toDate(state.timeZone);
67
- return dayFormatter.format(dateDay);
68
- });
69
- }, [locale, state.timeZone, dayFormatter]);
70
- return /* @__PURE__ */ React.createElement("table", __spreadProps(__spreadValues({}, gridProps), {
71
- className: clsx(styles["sapphire-calendar__table"], {
72
- [styles["sapphire-calendar__table--with-week-numbers"]]: showWeekNumbers
73
- })
74
- }), /* @__PURE__ */ React.createElement("thead", __spreadValues({}, headerProps), /* @__PURE__ */ React.createElement("tr", null, showWeekNumbers && /* @__PURE__ */ React.createElement("th", {
75
- className: styles["sapphire-calendar__table-head-cell"],
76
- "aria-hidden": "true"
77
- }, /* @__PURE__ */ React.createElement("span", {
78
- className: styles["sapphire-calendar__week-number"]
79
- }, "#")), weekDays.map((day, index) => /* @__PURE__ */ React.createElement("th", {
80
- key: index,
81
- className: styles["sapphire-calendar__table-head-cell"]
82
- }, /* @__PURE__ */ React.createElement("abbr", {
83
- className: styles["sapphire-calendar__day-of-week"]
84
- }, sentenceCase(day)))))), /* @__PURE__ */ React.createElement("tbody", null, [...new Array(weeksInMonth).keys()].map((weekIndex) => {
85
- return /* @__PURE__ */ React.createElement("tr", {
86
- className: styles["sapphire-calendar__table-body-row"],
87
- key: weekIndex
88
- }, showWeekNumbers && /* @__PURE__ */ React.createElement(CalendarWeekNumberCell, {
89
- date: startDate.add({ days: 7 * weekIndex })
90
- }), state.getDatesInWeek(weekIndex, startDate).map((date, i) => date ? /* @__PURE__ */ React.createElement(CalendarCell, {
91
- currentMonth: startDate,
92
- key: date.toString(),
93
- state,
94
- date
95
- }) : /* @__PURE__ */ React.createElement("td", {
96
- key: i
97
- })));
98
- }), /* @__PURE__ */ React.createElement("tr", null)));
99
- }
100
- function CalendarWeekNumberCell({ date }) {
101
- const weekNumber = getWeekNumber(date);
102
- const formatMessage = useMessageFormatter(intlMessages);
103
- return /* @__PURE__ */ React.createElement("th", {
104
- className: styles["sapphire-calendar__table-body-cell"],
105
- role: "rowheader",
106
- "aria-label": formatMessage("week", { weekNumber })
107
- }, /* @__PURE__ */ React.createElement("span", {
108
- className: styles["sapphire-calendar__week-number"]
109
- }, weekNumber));
110
- }
111
- function CalendarCell({
112
- state,
113
- date,
114
- currentMonth
115
- }) {
116
- const ref = React.useRef(null);
117
- const { locale } = useLocale();
118
- const sameMonth = isSameMonth(date, currentMonth);
119
- const {
120
- cellProps,
121
- buttonProps,
122
- isSelected: isInSelection,
123
- isDisabled,
124
- formattedDate,
125
- isUnavailable
126
- } = useCalendarCell({ date, isDisabled: !sameMonth }, state, ref);
127
- const highlightedRange = "highlightedRange" in state ? state.highlightedRange : null;
128
- const isSelected = isInSelection && (!highlightedRange || isSameDay(highlightedRange.start, date) || isSameDay(highlightedRange.end, date));
129
- return /* @__PURE__ */ React.createElement("td", __spreadProps(__spreadValues({}, cellProps), {
130
- className: styles["sapphire-calendar__table-body-cell"]
131
- }), /* @__PURE__ */ React.createElement(CalendarDayButton, __spreadProps(__spreadValues({}, buttonProps), {
132
- ref,
133
- isSelected,
134
- isDisabled: isDisabled || isUnavailable,
135
- hasCurrentIndicator: today(state.timeZone).compare(date) === 0,
136
- isOutsideVisibleRange: !isSameMonth(currentMonth, date),
137
- rangeHighlight: highlightedRange ? getRangeHighlight({ date, highlightedRange, locale }) : { highlighted: false }
138
- }), formattedDate));
139
- }
140
- const getRangeHighlight = ({
141
- date,
142
- highlightedRange,
143
- locale
144
- }) => {
145
- const isInSelection = !!highlightedRange && highlightedRange.start.compare(date) <= 0 && highlightedRange.end.compare(date) >= 0;
146
- const rangeIsNotASingleDay = !!highlightedRange && !isSameDay(highlightedRange.start, highlightedRange.end);
147
- const isStartOfWeek = getDayOfWeek(date, locale) === 0;
148
- const isEndOfWeek = getDayOfWeek(date, locale) === 6;
149
- const isStartOfMonth = isSameDay(date, startOfMonth(date));
150
- const isEndOfMonth = isSameDay(date, endOfMonth(date));
151
- const isStartOfRange = highlightedRange && isSameDay(highlightedRange == null ? void 0 : highlightedRange.start, date);
152
- const isEndOfRange = highlightedRange && isSameDay(highlightedRange == null ? void 0 : highlightedRange.end, date);
153
- const highlighted = isInSelection && rangeIsNotASingleDay;
154
- return {
155
- highlighted,
156
- start: highlighted && (isStartOfWeek || isStartOfMonth || isStartOfRange),
157
- end: highlighted && (isEndOfWeek || isEndOfMonth || isEndOfRange)
158
- };
159
- };
160
- const getWeekNumber = function(dateValue) {
161
- const date = new Date(dateValue.toDate(getLocalTimeZone()));
162
- date.setHours(0, 0, 0, 0);
163
- date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7);
164
- const week1 = new Date(date.getFullYear(), 0, 4);
165
- return 1 + Math.round(((date.getTime() - week1.getTime()) / 864e5 - 3 + (week1.getDay() + 6) % 7) / 7);
166
- };
167
-
168
- export { CalendarDaysGrid };
169
- //# sourceMappingURL=CalendarDaysGrid.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CalendarDaysGrid.js","sources":["../../../../src/Calendar/src/CalendarDaysGrid.tsx"],"sourcesContent":["import React, { ComponentProps, useMemo } from 'react';\nimport clsx from 'clsx';\nimport {\n AriaCalendarCellProps,\n AriaCalendarGridProps,\n useCalendarCell,\n useCalendarGrid,\n} from '@react-aria/calendar';\nimport { CalendarState, RangeCalendarState } from '@react-stately/calendar';\nimport {\n CalendarDate,\n DateValue,\n endOfMonth,\n getDayOfWeek,\n getLocalTimeZone,\n getWeeksInMonth,\n isSameDay,\n isSameMonth,\n startOfMonth,\n startOfWeek,\n today,\n} from '@internationalized/date';\nimport {\n useDateFormatter,\n useLocale,\n useMessageFormatter,\n} from '@react-aria/i18n';\nimport intlMessages from '../i18n';\n\nimport styles from '@danske/sapphire-css/components/calendar/calendar.module.css';\n\nimport { CalendarDayButton } from './CalendarButtons';\nimport { sentenceCase } from './utils';\n\nexport function CalendarDaysGrid({\n state,\n startDate = state.visibleRange.start,\n showWeekNumbers,\n ...props\n}: {\n state: CalendarState | RangeCalendarState;\n startDate?: CalendarDate;\n showWeekNumbers?: boolean;\n} & AriaCalendarGridProps): JSX.Element {\n const { locale } = useLocale();\n const { gridProps, headerProps } = useCalendarGrid(\n {\n ...props,\n startDate,\n endDate: endOfMonth(startDate),\n },\n state\n );\n const weeksInMonth = getWeeksInMonth(startDate, locale);\n\n // `weekDays` is returned from useCalendarGrid, but there is currently no option\n // for customizing weekday format. So the corresponding piece of code is copy-pasted\n // from useCalendarGrid, just to use \"short\" format instead of \"narrow\"\n const dayFormatter = useDateFormatter({\n weekday: 'short',\n timeZone: state.timeZone,\n });\n const weekDays = useMemo(() => {\n const weekStart = startOfWeek(today(state.timeZone), locale);\n return [...new Array(7).keys()].map((index) => {\n const date = weekStart.add({ days: index });\n const dateDay = date.toDate(state.timeZone);\n return dayFormatter.format(dateDay);\n });\n }, [locale, state.timeZone, dayFormatter]);\n\n return (\n <table\n {...gridProps}\n className={clsx(styles['sapphire-calendar__table'], {\n [styles['sapphire-calendar__table--with-week-numbers']]:\n showWeekNumbers,\n })}\n >\n <thead {...headerProps}>\n <tr>\n {showWeekNumbers && (\n <th\n className={styles['sapphire-calendar__table-head-cell']}\n aria-hidden=\"true\"\n >\n <span className={styles['sapphire-calendar__week-number']}>\n #\n </span>\n </th>\n )}\n {weekDays.map((day, index) => (\n <th\n key={index}\n className={styles['sapphire-calendar__table-head-cell']}\n >\n <abbr className={styles['sapphire-calendar__day-of-week']}>\n {sentenceCase(day)}\n </abbr>\n </th>\n ))}\n </tr>\n </thead>\n <tbody>\n {[...new Array(weeksInMonth).keys()].map((weekIndex) => {\n return (\n <tr\n className={styles['sapphire-calendar__table-body-row']}\n key={weekIndex}\n >\n {showWeekNumbers && (\n <CalendarWeekNumberCell\n date={startDate.add({ days: 7 * weekIndex })}\n />\n )}\n {state.getDatesInWeek(weekIndex, startDate).map((date, i) =>\n date ? (\n <CalendarCell\n currentMonth={startDate}\n // by passing date.toString() instead of index, we make sure the cell\n // is remounted as we navigate between months. That prevents awkward\n // color transition if the same day-of-the-month is highlighted in one month\n // but not the other.\n key={date.toString()}\n state={state}\n date={date}\n />\n ) : (\n <td key={i} />\n )\n )}\n </tr>\n );\n })}\n <tr></tr>\n </tbody>\n </table>\n );\n}\nfunction CalendarWeekNumberCell({ date }: { date: DateValue }) {\n const weekNumber = getWeekNumber(date);\n const formatMessage = useMessageFormatter(intlMessages);\n return (\n <th\n className={styles['sapphire-calendar__table-body-cell']}\n role=\"rowheader\"\n aria-label={formatMessage('week', { weekNumber })}\n >\n <span className={styles['sapphire-calendar__week-number']}>\n {weekNumber}\n </span>\n </th>\n );\n}\n\nfunction CalendarCell({\n state,\n date,\n currentMonth,\n}: {\n state: CalendarState | RangeCalendarState;\n currentMonth: CalendarDate;\n} & AriaCalendarCellProps) {\n const ref = React.useRef(null);\n const { locale } = useLocale();\n const sameMonth = isSameMonth(date, currentMonth);\n const {\n cellProps,\n buttonProps,\n isSelected: isInSelection,\n isDisabled,\n formattedDate,\n isUnavailable,\n } = useCalendarCell({ date, isDisabled: !sameMonth }, state, ref);\n\n const highlightedRange =\n 'highlightedRange' in state ? state.highlightedRange : null;\n\n const isSelected =\n isInSelection &&\n // if we have a highlighted range, only start and end of the range are styled selected.\n (!highlightedRange ||\n isSameDay(highlightedRange.start, date) ||\n isSameDay(highlightedRange.end, date));\n\n return (\n <td {...cellProps} className={styles['sapphire-calendar__table-body-cell']}>\n <CalendarDayButton\n {...buttonProps}\n ref={ref}\n isSelected={isSelected}\n isDisabled={isDisabled || isUnavailable}\n hasCurrentIndicator={today(state.timeZone).compare(date) === 0}\n isOutsideVisibleRange={!isSameMonth(currentMonth, date)}\n rangeHighlight={\n highlightedRange\n ? getRangeHighlight({ date, highlightedRange, locale })\n : { highlighted: false }\n }\n >\n {formattedDate}\n </CalendarDayButton>\n </td>\n );\n}\n\n/**\n * Given a date and a highlighted range, returns the range highlight state for that date.\n * Note that \"start\" doesn't simply mean start of the range, but means range start **style**,\n * which applies to some dates inside the range as well. A css-only solution could also cover\n * this, but it would require `:has()` selector which is not widely supported at the time of writing\n * this.\n */\nconst getRangeHighlight = ({\n date,\n highlightedRange,\n locale,\n}: {\n date: DateValue;\n highlightedRange: RangeCalendarState['highlightedRange'];\n locale: string;\n}): ComponentProps<typeof CalendarDayButton>['rangeHighlight'] => {\n const isInSelection =\n !!highlightedRange &&\n highlightedRange.start.compare(date) <= 0 &&\n highlightedRange.end.compare(date) >= 0;\n const rangeIsNotASingleDay =\n !!highlightedRange &&\n !isSameDay(highlightedRange.start, highlightedRange.end);\n const isStartOfWeek = getDayOfWeek(date, locale) === 0;\n const isEndOfWeek = getDayOfWeek(date, locale) === 6;\n const isStartOfMonth = isSameDay(date, startOfMonth(date));\n const isEndOfMonth = isSameDay(date, endOfMonth(date));\n const isStartOfRange =\n highlightedRange && isSameDay(highlightedRange?.start, date);\n const isEndOfRange =\n highlightedRange && isSameDay(highlightedRange?.end, date);\n\n const highlighted = isInSelection && rangeIsNotASingleDay;\n return {\n highlighted,\n start: highlighted && (isStartOfWeek || isStartOfMonth || isStartOfRange),\n end: highlighted && (isEndOfWeek || isEndOfMonth || isEndOfRange),\n };\n};\n\n/**\n * Almost copied from https://weeknumber.com/how-to/javascript\n * No corresponding API found in @internationalized/date package, at the time\n * of writing this.\n * Caveat: this code is based on built-in Date object, and may not be\n * calendar-agnostic. We don't really care about supporting different types\n * of calendar, so it should be fine for now. But we can look into improving\n * this if needed.\n */\nconst getWeekNumber = function (dateValue: DateValue) {\n const date = new Date(dateValue.toDate(getLocalTimeZone()));\n date.setHours(0, 0, 0, 0);\n // Thursday in current week decides the year.\n date.setDate(date.getDate() + 3 - ((date.getDay() + 6) % 7));\n // January 4 is always in week 1.\n const week1 = new Date(date.getFullYear(), 0, 4);\n // Adjust to Thursday in week 1 and count number of weeks from date to week1.\n return (\n 1 +\n Math.round(\n ((date.getTime() - week1.getTime()) / 86400000 -\n 3 +\n ((week1.getDay() + 6) % 7)) /\n 7\n )\n );\n};\n"],"names":[],"mappings":"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"}
@@ -1,58 +0,0 @@
1
- import React from 'react';
2
- import clsx from 'clsx';
3
- import { IconButton } from '@danske/sapphire-react';
4
- import { ChevronLeft, ChevronRight } from '@danske/sapphire-icons/react';
5
- import styles from '@danske/sapphire-css/components/calendar/calendar.module.css';
6
-
7
- var __defProp = Object.defineProperty;
8
- var __defProps = Object.defineProperties;
9
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
10
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
11
- var __hasOwnProp = Object.prototype.hasOwnProperty;
12
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
13
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
14
- var __spreadValues = (a, b) => {
15
- for (var prop in b || (b = {}))
16
- if (__hasOwnProp.call(b, prop))
17
- __defNormalProp(a, prop, b[prop]);
18
- if (__getOwnPropSymbols)
19
- for (var prop of __getOwnPropSymbols(b)) {
20
- if (__propIsEnum.call(b, prop))
21
- __defNormalProp(a, prop, b[prop]);
22
- }
23
- return a;
24
- };
25
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
26
- function CalendarHeader({
27
- isLeft,
28
- isRight,
29
- children,
30
- prevButtonProps,
31
- nextButtonProps
32
- }) {
33
- return /* @__PURE__ */ React.createElement("div", {
34
- className: clsx(styles["sapphire-calendar__header"], {
35
- [styles["sapphire-calendar__header--left"]]: isLeft,
36
- [styles["sapphire-calendar__header--right"]]: isRight
37
- })
38
- }, /* @__PURE__ */ React.createElement("div", {
39
- className: styles["sapphire-calendar__header-prev-month"]
40
- }, /* @__PURE__ */ React.createElement(IconButton, __spreadProps(__spreadValues({}, prevButtonProps), {
41
- variant: "tertiary",
42
- appearance: "ghost",
43
- size: "large",
44
- "aria-label": "Previous"
45
- }), /* @__PURE__ */ React.createElement(ChevronLeft, null))), /* @__PURE__ */ React.createElement("div", {
46
- className: styles["sapphire-calendar__header-title"]
47
- }, children), /* @__PURE__ */ React.createElement("div", {
48
- className: styles["sapphire-calendar__header-next-month"]
49
- }, /* @__PURE__ */ React.createElement(IconButton, __spreadProps(__spreadValues({}, nextButtonProps), {
50
- variant: "tertiary",
51
- appearance: "ghost",
52
- size: "large",
53
- "aria-label": "Next"
54
- }), /* @__PURE__ */ React.createElement(ChevronRight, null))));
55
- }
56
-
57
- export { CalendarHeader };
58
- //# sourceMappingURL=CalendarHeader.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CalendarHeader.js","sources":["../../../../src/Calendar/src/CalendarHeader.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport { PressProps } from '@react-aria/interactions';\nimport { IconButton } from '@danske/sapphire-react';\nimport { ChevronLeft, ChevronRight } from '@danske/sapphire-icons/react';\nimport styles from '@danske/sapphire-css/components/calendar/calendar.module.css';\n\n/**\n * Calendar header shown above the grid.\n * @internal\n */\nexport function CalendarHeader({\n isLeft,\n isRight,\n children,\n prevButtonProps,\n nextButtonProps,\n}: {\n children: React.ReactNode;\n prevButtonProps?: PressProps;\n nextButtonProps?: PressProps;\n isLeft?: boolean;\n isRight?: boolean;\n}) {\n return (\n <div\n className={clsx(styles['sapphire-calendar__header'], {\n [styles['sapphire-calendar__header--left']]: isLeft,\n [styles['sapphire-calendar__header--right']]: isRight,\n })}\n >\n <div className={styles['sapphire-calendar__header-prev-month']}>\n <IconButton\n {...prevButtonProps}\n variant=\"tertiary\"\n appearance=\"ghost\"\n size=\"large\"\n aria-label=\"Previous\"\n >\n <ChevronLeft />\n </IconButton>\n </div>\n <div className={styles['sapphire-calendar__header-title']}>\n {children}\n </div>\n <div className={styles['sapphire-calendar__header-next-month']}>\n <IconButton\n {...nextButtonProps}\n variant=\"tertiary\"\n appearance=\"ghost\"\n size=\"large\"\n aria-label=\"Next\"\n >\n <ChevronRight />\n </IconButton>\n </div>\n </div>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAW+B,SAAA,cAAA,CAAA;AAAA,EAC7B,MAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,eAAA;AAAA,EACA,eAAA;AAAA,CAOC,EAAA;AACD,EAAA,2CACG,KAAD,EAAA;AAAA,IACE,SAAA,EAAW,IAAK,CAAA,MAAA,CAAO,2BAA8B,CAAA,EAAA;AAAA,MAAA,CAClD,OAAO,iCAAqC,CAAA,GAAA,MAAA;AAAA,MAAA,CAC5C,OAAO,kCAAsC,CAAA,GAAA,OAAA;AAAA,KAAA,CAAA;AAAA,GAAA,sCAG/C,KAAD,EAAA;AAAA,IAAK,WAAW,MAAO,CAAA,sCAAA,CAAA;AAAA,GACrB,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,eADN,CAAA,EAAA;AAAA,IAEE,OAAQ,EAAA,UAAA;AAAA,IACR,UAAW,EAAA,OAAA;AAAA,IACX,IAAK,EAAA,OAAA;AAAA,IACL,YAAW,EAAA,UAAA;AAAA,GAAA,CAAA,kBAEV,KAAA,CAAA,aAAA,CAAA,WAAA,EAAD,IAGJ,CAAA,CAAA,CAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA;AAAA,IAAK,WAAW,MAAO,CAAA,iCAAA,CAAA;AAAA,GACpB,EAAA,QAAA,CAAA,sCAEF,KAAD,EAAA;AAAA,IAAK,WAAW,MAAO,CAAA,sCAAA,CAAA;AAAA,GACrB,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,eADN,CAAA,EAAA;AAAA,IAEE,OAAQ,EAAA,UAAA;AAAA,IACR,UAAW,EAAA,OAAA;AAAA,IACX,IAAK,EAAA,OAAA;AAAA,IACL,YAAW,EAAA,MAAA;AAAA,GAAA,CAAA,sCAEV,YAAD,EAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
@@ -1,79 +0,0 @@
1
- import React, { useEffect } from 'react';
2
- import { today, isSameMonth, isSameYear } from '@internationalized/date';
3
- import { usePress } from '@react-aria/interactions';
4
- import { focusWithoutScrolling, mergeProps } from '@react-aria/utils';
5
- import styles from '@danske/sapphire-css/components/calendar/calendar.module.css';
6
- import { CalendarButton } from './CalendarButtons.js';
7
-
8
- var __defProp = Object.defineProperty;
9
- var __defProps = Object.defineProperties;
10
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
11
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
12
- var __hasOwnProp = Object.prototype.hasOwnProperty;
13
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
14
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
15
- var __spreadValues = (a, b) => {
16
- for (var prop in b || (b = {}))
17
- if (__hasOwnProp.call(b, prop))
18
- __defNormalProp(a, prop, b[prop]);
19
- if (__getOwnPropSymbols)
20
- for (var prop of __getOwnPropSymbols(b)) {
21
- if (__propIsEnum.call(b, prop))
22
- __defNormalProp(a, prop, b[prop]);
23
- }
24
- return a;
25
- };
26
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
27
- const isSame = { month: isSameMonth, year: isSameYear };
28
- function CalendarMonthOrYearCell({
29
- date,
30
- state,
31
- isDisabled,
32
- field,
33
- children
34
- }) {
35
- const ref = React.useRef(null);
36
- const isFocused = state.focusedDate[field] === date[field];
37
- let tabIndex;
38
- if (!isDisabled) {
39
- tabIndex = isSame[field](date, state.focusedDate) ? 0 : -1;
40
- }
41
- useEffect(() => {
42
- if (isFocused && ref.current) {
43
- focusWithoutScrolling(ref.current);
44
- }
45
- }, [isFocused, ref]);
46
- const { pressProps } = usePress({
47
- isDisabled: state.isDisabled || isDisabled,
48
- onPress: () => {
49
- state.setFocusedDate(date);
50
- if (!state.isReadOnly) {
51
- state.narrowView();
52
- }
53
- }
54
- });
55
- const buttonProps = mergeProps(pressProps, {
56
- onFocus() {
57
- if (!isDisabled) {
58
- state.setFocusedDate(date);
59
- }
60
- },
61
- tabIndex,
62
- role: "button",
63
- "aria-disabled": isDisabled || void 0
64
- });
65
- return /* @__PURE__ */ React.createElement("td", {
66
- className: styles["sapphire-calendar__table-body-cell"],
67
- role: "gridcell"
68
- }, /* @__PURE__ */ React.createElement(CalendarButton, __spreadProps(__spreadValues({
69
- ref
70
- }, buttonProps), {
71
- isInGridCell: true,
72
- isSelected: !!state.value && isSame[field](state.value, date),
73
- isDisabled: state.isDisabled || isDisabled,
74
- hasCurrentIndicator: isSame[field](date, today(state.timeZone))
75
- }), children));
76
- }
77
-
78
- export { CalendarMonthOrYearCell };
79
- //# sourceMappingURL=CalendarMonthOrYearCell.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CalendarMonthOrYearCell.js","sources":["../../../../src/Calendar/src/CalendarMonthOrYearCell.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport {\n isSameMonth,\n CalendarDate,\n DateField,\n isSameYear,\n today,\n} from '@internationalized/date';\nimport { usePress } from '@react-aria/interactions';\nimport { focusWithoutScrolling, mergeProps } from '@react-aria/utils';\n\nimport styles from '@danske/sapphire-css/components/calendar/calendar.module.css';\n\nimport { SapphireCalendarState } from './useSapphireCalendarState';\nimport { CalendarButton } from './CalendarButtons';\n\nconst isSame = { month: isSameMonth, year: isSameYear } as const;\n\nexport function CalendarMonthOrYearCell({\n date,\n state,\n isDisabled,\n field,\n children,\n}: {\n date: CalendarDate;\n field: Extract<DateField, 'month' | 'year'>;\n state: SapphireCalendarState;\n isDisabled?: boolean;\n children: React.ReactNode;\n}): JSX.Element {\n const ref = React.useRef(null);\n const isFocused = state.focusedDate[field] === date[field];\n\n let tabIndex: number | undefined;\n if (!isDisabled) {\n tabIndex = isSame[field](date, state.focusedDate) ? 0 : -1;\n }\n\n useEffect(() => {\n if (isFocused && ref.current) {\n focusWithoutScrolling(ref.current);\n }\n }, [isFocused, ref]);\n\n const { pressProps } = usePress({\n isDisabled: state.isDisabled || isDisabled,\n onPress: () => {\n state.setFocusedDate(date);\n if (!state.isReadOnly) {\n state.narrowView();\n }\n },\n });\n const buttonProps = mergeProps(pressProps, {\n onFocus() {\n if (!isDisabled) {\n state.setFocusedDate(date);\n }\n },\n tabIndex,\n role: 'button',\n 'aria-disabled': isDisabled || undefined,\n });\n return (\n <td\n className={styles['sapphire-calendar__table-body-cell']}\n role=\"gridcell\"\n >\n <CalendarButton\n ref={ref}\n {...buttonProps}\n isInGridCell\n isSelected={!!state.value && isSame[field](state.value, date)}\n isDisabled={state.isDisabled || isDisabled}\n hasCurrentIndicator={isSame[field](date, today(state.timeZone))}\n >\n {children}\n </CalendarButton>\n </td>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,MAAS,GAAA,EAAE,KAAO,EAAA,WAAA,EAAa,IAAM,EAAA,UAAA,EAAA,CAAA;AAEH,SAAA,uBAAA,CAAA;AAAA,EACtC,IAAA;AAAA,EACA,KAAA;AAAA,EACA,UAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,CAOc,EAAA;AACd,EAAM,MAAA,GAAA,GAAM,MAAM,MAAO,CAAA,IAAA,CAAA,CAAA;AACzB,EAAA,MAAM,SAAY,GAAA,KAAA,CAAM,WAAY,CAAA,KAAA,CAAA,KAAW,IAAK,CAAA,KAAA,CAAA,CAAA;AAEpD,EAAI,IAAA,QAAA,CAAA;AACJ,EAAA,IAAI,CAAC,UAAY,EAAA;AACf,IAAA,QAAA,GAAW,MAAO,CAAA,KAAA,CAAA,CAAO,IAAM,EAAA,KAAA,CAAM,eAAe,CAAI,GAAA,CAAA,CAAA,CAAA;AAAA,GAAA;AAG1D,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,SAAA,IAAa,IAAI,OAAS,EAAA;AAC5B,MAAA,qBAAA,CAAsB,GAAI,CAAA,OAAA,CAAA,CAAA;AAAA,KAAA;AAAA,GAAA,EAE3B,CAAC,SAAW,EAAA,GAAA,CAAA,CAAA,CAAA;AAEf,EAAM,MAAA,EAAE,eAAe,QAAS,CAAA;AAAA,IAC9B,UAAA,EAAY,MAAM,UAAc,IAAA,UAAA;AAAA,IAChC,SAAS,MAAM;AACb,MAAA,KAAA,CAAM,cAAe,CAAA,IAAA,CAAA,CAAA;AACrB,MAAI,IAAA,CAAC,MAAM,UAAY,EAAA;AACrB,QAAM,KAAA,CAAA,UAAA,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GAAA,CAAA,CAAA;AAIZ,EAAM,MAAA,WAAA,GAAc,WAAW,UAAY,EAAA;AAAA,IACzC,OAAU,GAAA;AACR,MAAA,IAAI,CAAC,UAAY,EAAA;AACf,QAAA,KAAA,CAAM,cAAe,CAAA,IAAA,CAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,IAGzB,QAAA;AAAA,IACA,IAAM,EAAA,QAAA;AAAA,IACN,iBAAiB,UAAc,IAAA,KAAA,CAAA;AAAA,GAAA,CAAA,CAAA;AAEjC,EAAA,2CACG,IAAD,EAAA;AAAA,IACE,WAAW,MAAO,CAAA,oCAAA,CAAA;AAAA,IAClB,IAAK,EAAA,UAAA;AAAA,GAAA,sCAEJ,cAAD,EAAA,aAAA,CAAA,cAAA,CAAA;AAAA,IACE,GAAA;AAAA,GAAA,EACI,WAFN,CAAA,EAAA;AAAA,IAGE,YAAY,EAAA,IAAA;AAAA,IACZ,UAAA,EAAY,CAAC,CAAC,KAAA,CAAM,SAAS,MAAO,CAAA,KAAA,CAAA,CAAO,MAAM,KAAO,EAAA,IAAA,CAAA;AAAA,IACxD,UAAA,EAAY,MAAM,UAAc,IAAA,UAAA;AAAA,IAChC,mBAAqB,EAAA,MAAA,CAAO,KAAO,CAAA,CAAA,IAAA,EAAM,MAAM,KAAM,CAAA,QAAA,CAAA,CAAA;AAAA,GAEpD,CAAA,EAAA,QAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
@@ -1,58 +0,0 @@
1
- import React from 'react';
2
- import clsx from 'clsx';
3
- import { useDateFormatter } from '@react-aria/i18n';
4
- import { startOfMonth, endOfMonth } from '@internationalized/date';
5
- import styles from '@danske/sapphire-css/components/calendar/calendar.module.css';
6
- import { range, chunks, sentenceCase } from './utils.js';
7
- import { CalendarMonthOrYearCell } from './CalendarMonthOrYearCell.js';
8
- import { useCustomDurationCalendarGrid } from './useCustomDurationCalendarGrid.js';
9
-
10
- var __defProp = Object.defineProperty;
11
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
12
- var __hasOwnProp = Object.prototype.hasOwnProperty;
13
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
14
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
15
- var __spreadValues = (a, b) => {
16
- for (var prop in b || (b = {}))
17
- if (__hasOwnProp.call(b, prop))
18
- __defNormalProp(a, prop, b[prop]);
19
- if (__getOwnPropSymbols)
20
- for (var prop of __getOwnPropSymbols(b)) {
21
- if (__propIsEnum.call(b, prop))
22
- __defNormalProp(a, prop, b[prop]);
23
- }
24
- return a;
25
- };
26
- function CalendarMonthsGrid({
27
- state
28
- }) {
29
- const formatter = useDateFormatter({
30
- month: "long",
31
- timeZone: state.timeZone
32
- });
33
- const numMonths = state.focusedDate.calendar.getMonthsInYear(state.focusedDate);
34
- const months = range(1, numMonths).map((month) => formatter.format(state.focusedDate.set({ month }).toDate(state.timeZone)));
35
- const monthRows = [...chunks(months, 3)];
36
- const { gridProps } = useCustomDurationCalendarGrid({ cellsDuration: "months" }, state);
37
- return /* @__PURE__ */ React.createElement("table", __spreadValues({
38
- className: clsx(styles["sapphire-calendar__table"], styles["sapphire-calendar__table--month-year"])
39
- }, gridProps), /* @__PURE__ */ React.createElement("tbody", null, monthRows.map((currentRowMonths, rowIndex) => /* @__PURE__ */ React.createElement("tr", {
40
- key: rowIndex,
41
- className: styles["sapphire-calendar__table-body-row"]
42
- }, currentRowMonths.map((month, index) => {
43
- const newFocusedDate = state.focusedDate.set({
44
- month: months.indexOf(month) + 1
45
- });
46
- const isMonthDisabled = state.isInvalid(startOfMonth(newFocusedDate)) && state.isInvalid(endOfMonth(newFocusedDate));
47
- return /* @__PURE__ */ React.createElement(CalendarMonthOrYearCell, {
48
- key: index,
49
- date: newFocusedDate,
50
- field: "month",
51
- isDisabled: isMonthDisabled,
52
- state
53
- }, sentenceCase(month));
54
- })))));
55
- }
56
-
57
- export { CalendarMonthsGrid };
58
- //# sourceMappingURL=CalendarMonthsGrid.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CalendarMonthsGrid.js","sources":["../../../../src/Calendar/src/CalendarMonthsGrid.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport { useDateFormatter } from '@react-aria/i18n';\nimport { endOfMonth, startOfMonth } from '@internationalized/date';\n\nimport styles from '@danske/sapphire-css/components/calendar/calendar.module.css';\n\nimport { chunks, range, sentenceCase } from './utils';\nimport { CalendarMonthOrYearCell } from './CalendarMonthOrYearCell';\nimport { SapphireCalendarState } from './useSapphireCalendarState';\nimport { useCustomDurationCalendarGrid } from './useCustomDurationCalendarGrid';\n\nexport function CalendarMonthsGrid({\n state,\n}: {\n state: SapphireCalendarState;\n}): JSX.Element {\n const formatter = useDateFormatter({\n month: 'long',\n timeZone: state.timeZone,\n });\n\n const numMonths = state.focusedDate.calendar.getMonthsInYear(\n state.focusedDate\n );\n const months = range(1, numMonths).map((month) =>\n formatter.format(state.focusedDate.set({ month }).toDate(state.timeZone))\n );\n const monthRows = [...chunks(months, 3)];\n\n const { gridProps } = useCustomDurationCalendarGrid(\n { cellsDuration: 'months' },\n state\n );\n\n return (\n <table\n className={clsx(\n styles['sapphire-calendar__table'],\n styles['sapphire-calendar__table--month-year']\n )}\n {...gridProps}\n >\n <tbody>\n {monthRows.map((currentRowMonths, rowIndex) => (\n <tr\n key={rowIndex}\n className={styles['sapphire-calendar__table-body-row']}\n >\n {currentRowMonths.map((month, index) => {\n const newFocusedDate = state.focusedDate.set({\n month: months.indexOf(month) + 1,\n });\n\n // Since validation is only about min and max dates, we just\n // check the edges of the period\n const isMonthDisabled =\n state.isInvalid(startOfMonth(newFocusedDate)) &&\n state.isInvalid(endOfMonth(newFocusedDate));\n return (\n <CalendarMonthOrYearCell\n key={index}\n date={newFocusedDate}\n field={'month'}\n isDisabled={isMonthDisabled}\n state={state}\n >\n {sentenceCase(month)}\n </CalendarMonthOrYearCell>\n );\n })}\n </tr>\n ))}\n </tbody>\n </table>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAYmC,SAAA,kBAAA,CAAA;AAAA,EACjC,KAAA;AAAA,CAGc,EAAA;AACd,EAAA,MAAM,YAAY,gBAAiB,CAAA;AAAA,IACjC,KAAO,EAAA,MAAA;AAAA,IACP,UAAU,KAAM,CAAA,QAAA;AAAA,GAAA,CAAA,CAAA;AAGlB,EAAA,MAAM,SAAY,GAAA,KAAA,CAAM,WAAY,CAAA,QAAA,CAAS,gBAC3C,KAAM,CAAA,WAAA,CAAA,CAAA;AAER,EAAA,MAAM,MAAS,GAAA,KAAA,CAAM,CAAG,EAAA,SAAA,CAAA,CAAW,IAAI,CAAC,KAAA,KACtC,SAAU,CAAA,MAAA,CAAO,MAAM,WAAY,CAAA,GAAA,CAAI,EAAE,KAAA,EAAA,CAAA,CAAS,OAAO,KAAM,CAAA,QAAA,CAAA,CAAA,CAAA,CAAA;AAEjE,EAAA,MAAM,SAAY,GAAA,CAAC,GAAG,MAAA,CAAO,MAAQ,EAAA,CAAA,CAAA,CAAA,CAAA;AAErC,EAAA,MAAM,EAAE,SAAA,EAAA,GAAc,6BACpB,CAAA,EAAE,eAAe,QACjB,EAAA,EAAA,KAAA,CAAA,CAAA;AAGF,EAAA,2CACG,OAAD,EAAA,cAAA,CAAA;AAAA,IACE,SAAW,EAAA,IAAA,CACT,MAAO,CAAA,0BAAA,CAAA,EACP,MAAO,CAAA,sCAAA,CAAA,CAAA;AAAA,GAEL,EAAA,SAAA,CAAA,kBAEH,KAAA,CAAA,aAAA,CAAA,OAAA,EAAD,IACG,EAAA,SAAA,CAAU,IAAI,CAAC,gBAAA,EAAkB,QAChC,qBAAA,KAAA,CAAA,aAAA,CAAC,IAAD,EAAA;AAAA,IACE,GAAK,EAAA,QAAA;AAAA,IACL,WAAW,MAAO,CAAA,mCAAA,CAAA;AAAA,GAAA,EAEjB,gBAAiB,CAAA,GAAA,CAAI,CAAC,KAAA,EAAO,KAAU,KAAA;AACtC,IAAM,MAAA,cAAA,GAAiB,KAAM,CAAA,WAAA,CAAY,GAAI,CAAA;AAAA,MAC3C,KAAA,EAAO,MAAO,CAAA,OAAA,CAAQ,KAAS,CAAA,GAAA,CAAA;AAAA,KAAA,CAAA,CAAA;AAKjC,IAAA,MAAM,kBACJ,KAAM,CAAA,SAAA,CAAU,aAAa,cAC7B,CAAA,CAAA,IAAA,KAAA,CAAM,UAAU,UAAW,CAAA,cAAA,CAAA,CAAA,CAAA;AAC7B,IAAA,2CACG,uBAAD,EAAA;AAAA,MACE,GAAK,EAAA,KAAA;AAAA,MACL,IAAM,EAAA,cAAA;AAAA,MACN,KAAO,EAAA,OAAA;AAAA,MACP,UAAY,EAAA,eAAA;AAAA,MACZ,KAAA;AAAA,KAAA,EAEC,YAAa,CAAA,KAAA,CAAA,CAAA,CAAA;AAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
@@ -1,67 +0,0 @@
1
- import React, { useState } from 'react';
2
- import { TransitionGroup, CSSTransition } from 'react-transition-group';
3
- import styles from '@danske/sapphire-css/components/calendar/calendar.module.css';
4
- import clsx from 'clsx';
5
-
6
- var __defProp = Object.defineProperty;
7
- var __defProps = Object.defineProperties;
8
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
9
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
10
- var __hasOwnProp = Object.prototype.hasOwnProperty;
11
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
12
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
13
- var __spreadValues = (a, b) => {
14
- for (var prop in b || (b = {}))
15
- if (__hasOwnProp.call(b, prop))
16
- __defNormalProp(a, prop, b[prop]);
17
- if (__getOwnPropSymbols)
18
- for (var prop of __getOwnPropSymbols(b)) {
19
- if (__propIsEnum.call(b, prop))
20
- __defNormalProp(a, prop, b[prop]);
21
- }
22
- return a;
23
- };
24
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
25
- function CalendarPageAnimation({
26
- children,
27
- state: { direction, key }
28
- }) {
29
- return /* @__PURE__ */ React.createElement(TransitionGroup, {
30
- className: clsx(styles["sapphire-calendar__grid-page-animation"], styles[`sapphire-calendar__grid-page-animation--${direction}`])
31
- }, /* @__PURE__ */ React.createElement(CSSTransition, {
32
- key,
33
- addEndListener: (node, done) => {
34
- node.addEventListener("transitionend", done, false);
35
- },
36
- unmountOnExit: true,
37
- classNames: {
38
- enter: styles["enter"],
39
- enterActive: styles["enter-active"],
40
- exit: styles["exit"],
41
- exitActive: styles["exit-active"]
42
- }
43
- }, children));
44
- }
45
- function useCalendarAnimationState(state) {
46
- const [animationState, setAnimationState] = useState({ key: 0, direction: "next" });
47
- return __spreadProps(__spreadValues({}, state), {
48
- focusNextPage: () => {
49
- setAnimationState(({ key }) => ({
50
- key: key + 1,
51
- direction: "next"
52
- }));
53
- state.focusNextPage();
54
- },
55
- focusPreviousPage: () => {
56
- setAnimationState(({ key }) => ({
57
- key: key - 1,
58
- direction: "prev"
59
- }));
60
- state.focusPreviousPage();
61
- },
62
- animationState
63
- });
64
- }
65
-
66
- export { CalendarPageAnimation, useCalendarAnimationState };
67
- //# sourceMappingURL=CalendarPageAnimation.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CalendarPageAnimation.js","sources":["../../../../src/Calendar/src/CalendarPageAnimation.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport styles from '@danske/sapphire-css/components/calendar/calendar.module.css';\nimport { CalendarState } from '@react-stately/calendar';\nimport clsx from 'clsx';\n\nexport function CalendarPageAnimation({\n children,\n state: { direction, key },\n}: {\n children: ReactNode;\n state: CalendarAnimationState;\n}) {\n return (\n <TransitionGroup\n className={clsx(\n styles['sapphire-calendar__grid-page-animation'],\n styles[`sapphire-calendar__grid-page-animation--${direction}`]\n )}\n >\n <CSSTransition\n key={key}\n addEndListener={(node, done) => {\n // Using addEndListener, to avoid passing `timeout` which we can't easily know in js\n node.addEventListener('transitionend', done, false);\n }}\n unmountOnExit\n classNames={{\n enter: styles['enter'],\n enterActive: styles['enter-active'],\n exit: styles['exit'],\n exitActive: styles['exit-active'],\n }}\n >\n {children}\n </CSSTransition>\n </TransitionGroup>\n );\n}\n\ninterface CalendarAnimationState {\n key: React.Key;\n direction: 'prev' | 'next';\n}\n\n/**\n * @param state input calendar state\n * @returns a new calendar state which has additional properties required for animation\n */\nexport function useCalendarAnimationState<\n T extends Pick<CalendarState, 'focusNextPage' | 'focusPreviousPage'>\n>(\n state: T\n): T & {\n animationState: CalendarAnimationState;\n} {\n const [animationState, setAnimationState] = useState<{\n key: number;\n direction: 'prev' | 'next';\n }>({ key: 0, direction: 'next' });\n return {\n ...state,\n focusNextPage: () => {\n setAnimationState(({ key }) => ({\n key: key + 1,\n direction: 'next',\n }));\n state.focusNextPage();\n },\n focusPreviousPage: () => {\n setAnimationState(({ key }) => ({\n key: key - 1,\n direction: 'prev',\n }));\n state.focusPreviousPage();\n },\n animationState,\n };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAMsC,SAAA,qBAAA,CAAA;AAAA,EACpC,QAAA;AAAA,EACA,KAAA,EAAO,EAAE,SAAW,EAAA,GAAA,EAAA;AAAA,CAInB,EAAA;AACD,EAAA,2CACG,eAAD,EAAA;AAAA,IACE,SAAW,EAAA,IAAA,CACT,MAAO,CAAA,wCAAA,CAAA,EACP,OAAO,CAA2C,wCAAA,EAAA,SAAA,CAAA,CAAA,CAAA,CAAA;AAAA,GAAA,sCAGnD,aAAD,EAAA;AAAA,IACE,GAAA;AAAA,IACA,cAAA,EAAgB,CAAC,IAAA,EAAM,IAAS,KAAA;AAE9B,MAAK,IAAA,CAAA,gBAAA,CAAiB,iBAAiB,IAAM,EAAA,KAAA,CAAA,CAAA;AAAA,KAAA;AAAA,IAE/C,aAAa,EAAA,IAAA;AAAA,IACb,UAAY,EAAA;AAAA,MACV,OAAO,MAAO,CAAA,OAAA,CAAA;AAAA,MACd,aAAa,MAAO,CAAA,cAAA,CAAA;AAAA,MACpB,MAAM,MAAO,CAAA,MAAA,CAAA;AAAA,MACb,YAAY,MAAO,CAAA,aAAA,CAAA;AAAA,KAAA;AAAA,GAGpB,EAAA,QAAA,CAAA,CAAA,CAAA;AAAA,CAAA;AAeF,SAAA,yBAAA,CAGL,KAGA,EAAA;AACA,EAAA,MAAM,CAAC,cAAgB,EAAA,iBAAA,CAAA,GAAqB,SAGzC,EAAE,GAAA,EAAK,GAAG,SAAW,EAAA,MAAA,EAAA,CAAA,CAAA;AACxB,EAAA,OAAO,iCACF,KADE,CAAA,EAAA;AAAA,IAEL,eAAe,MAAM;AACnB,MAAkB,iBAAA,CAAA,CAAC,EAAE,GAAW,EAAA,MAAA;AAAA,QAC9B,KAAK,GAAM,GAAA,CAAA;AAAA,QACX,SAAW,EAAA,MAAA;AAAA,OAAA,CAAA,CAAA,CAAA;AAEb,MAAM,KAAA,CAAA,aAAA,EAAA,CAAA;AAAA,KAAA;AAAA,IAER,mBAAmB,MAAM;AACvB,MAAkB,iBAAA,CAAA,CAAC,EAAE,GAAW,EAAA,MAAA;AAAA,QAC9B,KAAK,GAAM,GAAA,CAAA;AAAA,QACX,SAAW,EAAA,MAAA;AAAA,OAAA,CAAA,CAAA,CAAA;AAEb,MAAM,KAAA,CAAA,iBAAA,EAAA,CAAA;AAAA,KAAA;AAAA,IAER,cAAA;AAAA,GAAA,CAAA,CAAA;AAAA;;;;"}
@@ -1,52 +0,0 @@
1
- import React from 'react';
2
- import clsx from 'clsx';
3
- import { startOfYear, endOfYear } from '@internationalized/date';
4
- import styles from '@danske/sapphire-css/components/calendar/calendar.module.css';
5
- import { range, chunks } from './utils.js';
6
- import { CalendarMonthOrYearCell } from './CalendarMonthOrYearCell.js';
7
- import { useCustomDurationCalendarGrid } from './useCustomDurationCalendarGrid.js';
8
-
9
- var __defProp = Object.defineProperty;
10
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
11
- var __hasOwnProp = Object.prototype.hasOwnProperty;
12
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
13
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
14
- var __spreadValues = (a, b) => {
15
- for (var prop in b || (b = {}))
16
- if (__hasOwnProp.call(b, prop))
17
- __defNormalProp(a, prop, b[prop]);
18
- if (__getOwnPropSymbols)
19
- for (var prop of __getOwnPropSymbols(b)) {
20
- if (__propIsEnum.call(b, prop))
21
- __defNormalProp(a, prop, b[prop]);
22
- }
23
- return a;
24
- };
25
- function CalendarYearsGrid({
26
- state
27
- }) {
28
- const years = range(state.visibleRange.start.year, state.visibleRange.end.year).slice(0, 12);
29
- const yearRows = [...chunks(years, 3)];
30
- const { gridProps } = useCustomDurationCalendarGrid({ cellsDuration: "years" }, state);
31
- return /* @__PURE__ */ React.createElement("table", __spreadValues({
32
- className: clsx(styles["sapphire-calendar__table"], styles["sapphire-calendar__table--month-year"])
33
- }, gridProps), /* @__PURE__ */ React.createElement("tbody", null, yearRows.map((currentRowYears, rowIndex) => /* @__PURE__ */ React.createElement("tr", {
34
- key: rowIndex,
35
- className: styles["sapphire-calendar__table-body-row"]
36
- }, currentRowYears.map((year, index) => {
37
- const newFocusedDate = state.focusedDate.set({
38
- year
39
- });
40
- const isYearDisabled = state.isInvalid(startOfYear(newFocusedDate)) && state.isInvalid(endOfYear(newFocusedDate));
41
- return /* @__PURE__ */ React.createElement(CalendarMonthOrYearCell, {
42
- key: index,
43
- date: newFocusedDate,
44
- field: "year",
45
- isDisabled: isYearDisabled,
46
- state
47
- }, year);
48
- })))));
49
- }
50
-
51
- export { CalendarYearsGrid };
52
- //# sourceMappingURL=CalendarYearsGrid.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CalendarYearsGrid.js","sources":["../../../../src/Calendar/src/CalendarYearsGrid.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport { endOfYear, startOfYear } from '@internationalized/date';\n\nimport styles from '@danske/sapphire-css/components/calendar/calendar.module.css';\n\nimport { chunks, range } from './utils';\nimport { CalendarMonthOrYearCell } from './CalendarMonthOrYearCell';\nimport { SapphireCalendarState } from './useSapphireCalendarState';\nimport { useCustomDurationCalendarGrid } from './useCustomDurationCalendarGrid';\n\nexport function CalendarYearsGrid({\n state,\n}: {\n state: SapphireCalendarState;\n}): JSX.Element {\n const years = range(\n state.visibleRange.start.year,\n state.visibleRange.end.year\n ).slice(0, 12);\n const yearRows = [...chunks(years, 3)];\n const { gridProps } = useCustomDurationCalendarGrid(\n { cellsDuration: 'years' },\n state\n );\n return (\n <table\n className={clsx(\n styles['sapphire-calendar__table'],\n styles['sapphire-calendar__table--month-year']\n )}\n {...gridProps}\n >\n <tbody>\n {yearRows.map((currentRowYears, rowIndex) => (\n <tr\n key={rowIndex}\n className={styles['sapphire-calendar__table-body-row']}\n >\n {currentRowYears.map((year, index) => {\n const newFocusedDate = state.focusedDate.set({\n year: year,\n });\n // Since validation is only about min and max dates, we just\n // check the edges of the period\n const isYearDisabled =\n state.isInvalid(startOfYear(newFocusedDate)) &&\n state.isInvalid(endOfYear(newFocusedDate));\n return (\n <CalendarMonthOrYearCell\n key={index}\n date={newFocusedDate}\n field={'year'}\n isDisabled={isYearDisabled}\n state={state}\n >\n {year}\n </CalendarMonthOrYearCell>\n );\n })}\n </tr>\n ))}\n </tbody>\n </table>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAWkC,SAAA,iBAAA,CAAA;AAAA,EAChC,KAAA;AAAA,CAGc,EAAA;AACd,EAAM,MAAA,KAAA,GAAQ,KACZ,CAAA,KAAA,CAAM,YAAa,CAAA,KAAA,CAAM,IACzB,EAAA,KAAA,CAAM,YAAa,CAAA,GAAA,CAAI,IACvB,CAAA,CAAA,KAAA,CAAM,CAAG,EAAA,EAAA,CAAA,CAAA;AACX,EAAA,MAAM,QAAW,GAAA,CAAC,GAAG,MAAA,CAAO,KAAO,EAAA,CAAA,CAAA,CAAA,CAAA;AACnC,EAAA,MAAM,EAAE,SAAA,EAAA,GAAc,6BACpB,CAAA,EAAE,eAAe,OACjB,EAAA,EAAA,KAAA,CAAA,CAAA;AAEF,EAAA,2CACG,OAAD,EAAA,cAAA,CAAA;AAAA,IACE,SAAW,EAAA,IAAA,CACT,MAAO,CAAA,0BAAA,CAAA,EACP,MAAO,CAAA,sCAAA,CAAA,CAAA;AAAA,GAEL,EAAA,SAAA,CAAA,kBAEH,KAAA,CAAA,aAAA,CAAA,OAAA,EAAD,IACG,EAAA,QAAA,CAAS,IAAI,CAAC,eAAA,EAAiB,QAC9B,qBAAA,KAAA,CAAA,aAAA,CAAC,IAAD,EAAA;AAAA,IACE,GAAK,EAAA,QAAA;AAAA,IACL,WAAW,MAAO,CAAA,mCAAA,CAAA;AAAA,GAAA,EAEjB,eAAgB,CAAA,GAAA,CAAI,CAAC,IAAA,EAAM,KAAU,KAAA;AACpC,IAAM,MAAA,cAAA,GAAiB,KAAM,CAAA,WAAA,CAAY,GAAI,CAAA;AAAA,MAC3C,IAAA;AAAA,KAAA,CAAA,CAAA;AAIF,IAAA,MAAM,iBACJ,KAAM,CAAA,SAAA,CAAU,YAAY,cAC5B,CAAA,CAAA,IAAA,KAAA,CAAM,UAAU,SAAU,CAAA,cAAA,CAAA,CAAA,CAAA;AAC5B,IAAA,2CACG,uBAAD,EAAA;AAAA,MACE,GAAK,EAAA,KAAA;AAAA,MACL,IAAM,EAAA,cAAA;AAAA,MACN,KAAO,EAAA,MAAA;AAAA,MACP,UAAY,EAAA,cAAA;AAAA,MACZ,KAAA;AAAA,KAEC,EAAA,IAAA,CAAA,CAAA;AAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}