@servicetitan/anvil2 2.0.0 → 2.0.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 (139) hide show
  1. package/CHANGELOG.md +120 -68
  2. package/dist/Calendar-BFWJ7Rlq.js +2635 -0
  3. package/dist/Calendar-BFWJ7Rlq.js.map +1 -0
  4. package/dist/{Calendar-D4abBZAq.js → Calendar-BO9QiBJG.js} +2 -2
  5. package/dist/{Calendar-D4abBZAq.js.map → Calendar-BO9QiBJG.js.map} +1 -1
  6. package/dist/Calendar.js +2 -2
  7. package/dist/{Combobox-CeADQxTl.js → Combobox-OUK7p5gp.js} +34 -24
  8. package/dist/Combobox-OUK7p5gp.js.map +1 -0
  9. package/dist/Combobox.js +1 -1
  10. package/dist/{DataTable-CVtDYMKC.js → DataTable-BPJeSvOx.js} +1956 -1324
  11. package/dist/DataTable-BPJeSvOx.js.map +1 -0
  12. package/dist/DataTable.css +82 -80
  13. package/dist/{DateFieldRange-BfdBwpwc.js → DateFieldRange-CanMYRgZ.js} +6 -5
  14. package/dist/{DateFieldRange-BfdBwpwc.js.map → DateFieldRange-CanMYRgZ.js.map} +1 -1
  15. package/dist/DateFieldRange.js +1 -1
  16. package/dist/{DateFieldSingle-CVxnfM5x.js → DateFieldSingle-CShe2aHZ.js} +6 -5
  17. package/dist/{DateFieldSingle-CVxnfM5x.js.map → DateFieldSingle-CShe2aHZ.js.map} +1 -1
  18. package/dist/DateFieldSingle.js +1 -1
  19. package/dist/{DateFieldYearless-CgOOwwTc.js → DateFieldYearless-MBQ233Xa.js} +2 -2
  20. package/dist/{DateFieldYearless-CgOOwwTc.js.map → DateFieldYearless-MBQ233Xa.js.map} +1 -1
  21. package/dist/DateFieldYearless.js +1 -1
  22. package/dist/{DateFieldYearlessRange-D8dQk2WI.js → DateFieldYearlessRange-BBtaFzsE.js} +2 -2
  23. package/dist/{DateFieldYearlessRange-D8dQk2WI.js.map → DateFieldYearlessRange-BBtaFzsE.js.map} +1 -1
  24. package/dist/DateFieldYearlessRange.js +1 -1
  25. package/dist/{ListView-CBmaHOY-.js → ListView-CRDUPrbQ.js} +11 -9
  26. package/dist/ListView-CRDUPrbQ.js.map +1 -0
  27. package/dist/ListView.js +1 -1
  28. package/dist/{Menu-d3w2bIdB.js → Menu-Dh0q__vE.js} +7 -5
  29. package/dist/Menu-Dh0q__vE.js.map +1 -0
  30. package/dist/Menu.js +1 -1
  31. package/dist/{NumberField-r0fRpYa0.js → NumberField-Dmm1YQNn.js} +221 -7
  32. package/dist/NumberField-Dmm1YQNn.js.map +1 -0
  33. package/dist/NumberField.js +1 -1
  34. package/dist/{Page-DR5k0MAR.js → Page-C5nExhiH.js} +117 -13
  35. package/dist/Page-C5nExhiH.js.map +1 -0
  36. package/dist/Page.js +1 -1
  37. package/dist/{Pagination-XPZ5UeBs.js → Pagination-CimQTC7M.js} +3 -3
  38. package/dist/{Pagination-XPZ5UeBs.js.map → Pagination-CimQTC7M.js.map} +1 -1
  39. package/dist/Pagination.css +2 -1
  40. package/dist/Pagination.js +1 -1
  41. package/dist/{Popover-U2Eu7v1Q.js → Popover-CJLSDpgR.js} +9 -8
  42. package/dist/Popover-CJLSDpgR.js.map +1 -0
  43. package/dist/Popover.js +1 -1
  44. package/dist/Table.js +1 -1
  45. package/dist/{TimeField-BX9PovdE.js → TimeField-BeaCSkdZ.js} +3 -3
  46. package/dist/{TimeField-BX9PovdE.js.map → TimeField-BeaCSkdZ.js.map} +1 -1
  47. package/dist/TimeField.js +1 -1
  48. package/dist/{Toolbar-BWqguBF1.js → Toolbar-Cjo7eAhI.js} +8 -8
  49. package/dist/{Toolbar-BWqguBF1.js.map → Toolbar-Cjo7eAhI.js.map} +1 -1
  50. package/dist/Toolbar.js +1 -1
  51. package/dist/{YearlessDateInputWithPicker-uG9QMemw.js → YearlessDateInputWithPicker-BVRZlf9Y.js} +3 -3
  52. package/dist/{YearlessDateInputWithPicker-uG9QMemw.js.map → YearlessDateInputWithPicker-BVRZlf9Y.js.map} +1 -1
  53. package/dist/beta/components/Table/DataTable/DataTable.d.ts +8 -10
  54. package/dist/beta/components/Table/DataTable/DataTable.test-data.d.ts +2 -0
  55. package/dist/beta/components/Table/DataTable/internal/DataTableBody.d.ts +6 -1
  56. package/dist/beta/components/Table/DataTable/internal/DataTableBodyRow.d.ts +9 -0
  57. package/dist/beta/components/Table/DataTable/internal/DataTablePagination.d.ts +1 -1
  58. package/dist/beta/components/Table/DataTable/internal/cells/CellError.d.ts +10 -0
  59. package/dist/beta/components/Table/DataTable/internal/cells/CellFocusContext.d.ts +16 -0
  60. package/dist/beta/components/Table/DataTable/internal/cells/DataTableBodyCell.d.ts +19 -37
  61. package/dist/beta/components/Table/DataTable/internal/cells/DataTableBodyImmutableCell.d.ts +32 -0
  62. package/dist/beta/components/Table/DataTable/internal/cells/DataTableBodyMutableCell.d.ts +33 -0
  63. package/dist/beta/components/Table/DataTable/internal/cells/DataTableFooterCell.d.ts +2 -0
  64. package/dist/beta/components/Table/DataTable/internal/cells/DataTableHeaderCell.d.ts +1 -0
  65. package/dist/beta/components/Table/DataTable/internal/constants.d.ts +13 -0
  66. package/dist/beta/components/Table/DataTable/internal/context/focus/DTFocusContext.d.ts +57 -0
  67. package/dist/beta/components/Table/DataTable/internal/context/focus/DTFocusProvider.d.ts +9 -0
  68. package/dist/beta/components/Table/DataTable/internal/context/focus/useDTFocusDispatchContext.d.ts +11 -0
  69. package/dist/beta/components/Table/DataTable/internal/context/focus/useDTFocusStateContext.d.ts +1 -0
  70. package/dist/beta/components/Table/DataTable/internal/context/hover/DTHoverContext.d.ts +31 -0
  71. package/dist/beta/components/Table/DataTable/internal/context/hover/DTHoverProvider.d.ts +3 -0
  72. package/dist/beta/components/Table/DataTable/internal/context/hover/useDTHoverDispatchContext.d.ts +1 -0
  73. package/dist/beta/components/Table/DataTable/internal/context/hover/useDTHoverStateContext.d.ts +4 -0
  74. package/dist/beta/components/Table/DataTable/internal/editable-cells/DataTableEditableMultiselectCell.d.ts +19 -23
  75. package/dist/beta/components/Table/DataTable/internal/editable-cells/DataTableEditableSelectCell.d.ts +6 -25
  76. package/dist/beta/components/Table/DataTable/internal/editable-cells/DataTableEditableTextCell.d.ts +7 -17
  77. package/dist/beta/components/Table/DataTable/internal/editable-cells/types.d.ts +29 -37
  78. package/dist/beta/components/Table/DataTable/internal/util/cellPositionHelpers.d.ts +6 -0
  79. package/dist/beta/components/Table/DataTable/internal/util/cellTypeHelpers.d.ts +42 -0
  80. package/dist/beta/components/Table/{internal → DataTable/internal/util}/getTanStackColumnDef.d.ts +14 -6
  81. package/dist/beta/components/Table/DataTable/stories/DataTable.story-data.d.ts +4 -2
  82. package/dist/beta/components/Table/DataTable/types.d.ts +21 -0
  83. package/dist/beta/components/Table/base/TableContainer.d.ts +3 -14
  84. package/dist/beta/components/Table/createColumnHelper.d.ts +119 -13
  85. package/dist/beta/components/Table/formatters/booleanFormatter.d.ts +22 -0
  86. package/dist/beta/components/Table/formatters/currencyFormatter.d.ts +2 -2
  87. package/dist/beta/components/Table/formatters/dateFormatter.d.ts +34 -0
  88. package/dist/beta/components/Table/formatters/dateTimeFormatter.d.ts +66 -0
  89. package/dist/beta/components/Table/formatters/index.d.ts +7 -0
  90. package/dist/beta/components/Table/formatters/numberFormatter.d.ts +42 -0
  91. package/dist/beta/components/Table/formatters/percentFormatter.d.ts +1 -1
  92. package/dist/beta/components/Table/formatters/presets.d.ts +16 -0
  93. package/dist/beta/components/Table/formatters/timeFormatter.d.ts +28 -0
  94. package/dist/beta/components/Table/formatters/yearlessDateFormatter.d.ts +32 -0
  95. package/dist/beta/components/Table/internal/ResizeHandle.d.ts +2 -1
  96. package/dist/beta/components/Table/internal/getCommonPinningStyles.d.ts +1 -0
  97. package/dist/beta/components/Table/internal/scrollCellIntoView.d.ts +13 -0
  98. package/dist/beta/components/Table/internal/types.d.ts +13 -0
  99. package/dist/beta/components/Table/types.d.ts +52 -8
  100. package/dist/beta.js +4 -4
  101. package/dist/components/DateFieldRange/internal/MaskedDateRangeInput.d.ts +1 -1
  102. package/dist/components/DateFieldSingle/internal/MaskedDateInput.d.ts +1 -1
  103. package/dist/components/Page/Page.d.ts +9 -2
  104. package/dist/components/Page/PageHeader.d.ts +13 -4
  105. package/dist/components/Popover/internal/PopoverContext.d.ts +0 -1
  106. package/dist/components/Popover/internal/usePopoverContext.d.ts +0 -1
  107. package/dist/components/SearchField/SearchField.d.ts +1 -1
  108. package/dist/edit-DQOiktcu.js +6 -0
  109. package/dist/edit-DQOiktcu.js.map +1 -0
  110. package/dist/{index.esm-C2ZhC_8d.js → index.esm-BMOZFPwN.js} +2 -2
  111. package/dist/{index.esm-C2ZhC_8d.js.map → index.esm-BMOZFPwN.js.map} +1 -1
  112. package/dist/index.js +13 -13
  113. package/dist/internal/hooks/useNumberField/internal/createNumberMaskOptions.d.ts +10 -0
  114. package/dist/internal/hooks/useNumberField/internal/createTrailingDecimalHandlers.d.ts +13 -0
  115. package/dist/internal/hooks/useNumberField/internal/createTrailingZerosHandlers.d.ts +16 -0
  116. package/dist/internal/hooks/useNumberField/internal/numberMaskUtils.d.ts +9 -0
  117. package/dist/{Calendar-BEwWBsCE.js → luxon-wpz4A-OQ.js} +3 -2635
  118. package/dist/luxon-wpz4A-OQ.js.map +1 -0
  119. package/dist/{utils-CcMJa47q.js → utils-Cj6v6CZ-.js} +2 -2
  120. package/dist/{utils-CcMJa47q.js.map → utils-Cj6v6CZ-.js.map} +1 -1
  121. package/package.json +1 -1
  122. package/dist/Calendar-BEwWBsCE.js.map +0 -1
  123. package/dist/Combobox-CeADQxTl.js.map +0 -1
  124. package/dist/DataTable-CVtDYMKC.js.map +0 -1
  125. package/dist/ListView-CBmaHOY-.js.map +0 -1
  126. package/dist/Menu-d3w2bIdB.js.map +0 -1
  127. package/dist/NumberField-r0fRpYa0.js.map +0 -1
  128. package/dist/Page-DR5k0MAR.js.map +0 -1
  129. package/dist/Popover-U2Eu7v1Q.js.map +0 -1
  130. package/dist/beta/components/Table/DataTable/internal/DataTableContainer.d.ts +0 -7
  131. package/dist/beta/components/Table/DataTable/internal/DataTableContext.d.ts +0 -25
  132. package/dist/beta/components/Table/DataTable/internal/DataTableContextProvider.d.ts +0 -28
  133. package/dist/beta/components/Table/DataTable/internal/editable-cells/useEditCell.d.ts +0 -11
  134. package/dist/beta/components/Table/DataTable/internal/useDataTableContext.d.ts +0 -4
  135. package/dist/beta/components/Table/internal/focus-management/types.d.ts +0 -34
  136. package/dist/beta/components/Table/internal/focus-management/useFocusManagement.d.ts +0 -27
  137. package/dist/beta/components/Table/internal/focus-management/useHandleKeyDown.d.ts +0 -36
  138. package/dist/beta/components/Table/internal/focus-management/useScrollIntoView.d.ts +0 -9
  139. /package/dist/beta/components/Table/{internal/focus-management → DataTable/internal}/useColumnOrder.d.ts +0 -0
@@ -1,22 +1,4 @@
1
- import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
2
- import * as React from 'react';
3
- import { createContext, useContext, forwardRef, useState, useEffect, useRef, useCallback, useMemo, useId } from 'react';
4
- import { B as Button } from './Button-B__Q1BA5.js';
5
- import { S as SvgKeyboardArrowDown } from './keyboard_arrow_down-C8WQ38p1.js';
6
- import { S as SvgKeyboardArrowUp } from './keyboard_arrow_up-CxzK6LAl.js';
7
- import { S as SvgKeyboardArrowLeft, a as SvgKeyboardArrowRight } from './keyboard_arrow_right-DZWNVytH.js';
8
- import { c as cx } from './index-SvGbrGuT.js';
9
- import { S as SrOnly } from './SrOnly-CrdBTl6E.js';
10
- import { u as useSwipe } from './useSwipe-Cp-CJxLU.js';
11
- import { G as Grid } from './Grid-BUmKiLhz.js';
12
- import { S as SelectCard } from './SelectCard-B9RLpwtX.js';
13
- import { u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';
14
- import { flushSync } from 'react-dom';
15
- import { u as useOptionallyControlledState } from './useOptionallyControlledState-DbDuos5L.js';
16
- import { u as usePrevious } from './usePrevious-Bvq-5auG.js';
17
- import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-BlIWftBb.js';
18
-
19
- import './Calendar.css';// these aren't really private, but nor are they really useful to document
1
+ // these aren't really private, but nor are they really useful to document
20
2
 
21
3
  /**
22
4
  * @private
@@ -8145,2619 +8127,5 @@ function friendlyDateTime(dateTimeish) {
8145
8127
  }
8146
8128
  }
8147
8129
 
8148
- const CalendarContext = createContext(null);
8149
- function useCalendar() {
8150
- const context = useContext(CalendarContext);
8151
- if (!context) {
8152
- throw new Error("useCalendar must be used within a <Calendar>");
8153
- }
8154
- return context;
8155
- }
8156
-
8157
- const isSameDay = (d1, d2) => {
8158
- if (!d1 || !d2) return void 0;
8159
- try {
8160
- if (d1.hasSame(d2, "month") && d1.hasSame(d2, "year") && d1.hasSame(d2, "day")) {
8161
- return true;
8162
- }
8163
- return false;
8164
- } catch {
8165
- return false;
8166
- }
8167
- };
8168
- const isSameMonth = (d1, d2) => {
8169
- if (!d1 || !d2) return void 0;
8170
- if (d1.hasSame(d2, "month") && d1.hasSame(d2, "year")) return true;
8171
- return false;
8172
- };
8173
- const isUnavailableDate = (n, unavailable, timeZone) => {
8174
- const tmpSet = /* @__PURE__ */ new Set();
8175
- unavailable.dates?.forEach((date) => {
8176
- tmpSet.add(toDateString(DateTime.fromISO(date, { zone: timeZone })));
8177
- });
8178
- if (unavailable.daysOfWeek?.has(n.weekday)) {
8179
- return true;
8180
- }
8181
- const dateISO = n.toISO();
8182
- if (!dateISO) return;
8183
- return tmpSet.has(
8184
- toDateString(DateTime.fromISO(dateISO, { zone: timeZone }))
8185
- );
8186
- };
8187
- const isBeyondMinDate = (n, minDate) => minDate && minDate.toMillis() > n.toMillis();
8188
- const isBeyondMaxDate = (n, maxDate) => maxDate && maxDate.toMillis() < n.toMillis();
8189
- const normalizeDate = (date, defaultTimeZone) => {
8190
- return DateTime.fromISO(date, { zone: defaultTimeZone }).startOf("day");
8191
- };
8192
- const toDateString = (date) => date.startOf("day").toISO();
8193
- function rangeUpdater(value, newDate, setValue, onSelection) {
8194
- if (value.start && isSameDay(value.start, newDate) && !value.end) {
8195
- setValue((prev) => {
8196
- return { ...prev, end: newDate };
8197
- });
8198
- onSelection?.({
8199
- value: {
8200
- start: toDateString(value.start) ?? void 0,
8201
- end: toDateString(newDate) ?? void 0
8202
- }
8203
- });
8204
- return;
8205
- }
8206
- if (!value.start && !value.end || value.start && value.end || value.start && !value.end && value.start.startOf("day").toMillis() > newDate.startOf("day").toMillis()) {
8207
- setValue({ start: newDate, end: null });
8208
- onSelection?.({
8209
- value: {
8210
- start: toDateString(newDate) ?? void 0,
8211
- end: void 0
8212
- }
8213
- });
8214
- return;
8215
- }
8216
- if (value.start && !value.end && value.start.startOf("day").toMillis() < newDate.startOf("day").toMillis()) {
8217
- setValue((prev) => {
8218
- return { ...prev, end: newDate };
8219
- });
8220
- onSelection?.({
8221
- value: {
8222
- start: toDateString(value.start) ?? void 0,
8223
- end: toDateString(newDate) ?? void 0
8224
- }
8225
- });
8226
- return;
8227
- }
8228
- if (!value.start && value.end) {
8229
- setValue((prev) => {
8230
- return { ...prev, start: newDate };
8231
- });
8232
- onSelection?.({
8233
- value: {
8234
- start: toDateString(newDate) ?? void 0,
8235
- end: toDateString(value.end) ?? void 0
8236
- }
8237
- });
8238
- return;
8239
- }
8240
- }
8241
- const getDateMetadata = (date, dateMetadata) => {
8242
- if (!dateMetadata) return void 0;
8243
- const dateString = date.toISODate();
8244
- return dateString ? dateMetadata.get(dateString) : void 0;
8245
- };
8246
-
8247
- const CalendarNow = forwardRef(
8248
- (props, ref) => {
8249
- const { onClick, onClickFixed, ...rest } = props;
8250
- const {
8251
- setFocusedDate,
8252
- setSelectedMonth,
8253
- setSelectedYear,
8254
- value,
8255
- setValue,
8256
- defaultTimeZone,
8257
- unavailable,
8258
- onSelection,
8259
- minDate,
8260
- maxDate,
8261
- controlled,
8262
- range
8263
- } = useCalendar();
8264
- const nToday = DateTime.fromISO(DateTime.now().toISO(), {
8265
- zone: defaultTimeZone
8266
- }).startOf("day");
8267
- const onClickHandler = (e) => {
8268
- onClickFixed?.(e);
8269
- setFocusedDate(nToday);
8270
- setSelectedMonth(nToday.month);
8271
- setSelectedYear(nToday.year);
8272
- if (!range) {
8273
- onSelection?.({
8274
- value: toDateString(nToday) ?? void 0
8275
- });
8276
- if (!controlled) {
8277
- setValue(nToday);
8278
- }
8279
- return;
8280
- }
8281
- rangeUpdater(value, nToday, setValue, onSelection);
8282
- };
8283
- const isDisabled = isBeyondMaxDate(nToday, maxDate) || isBeyondMinDate(nToday, minDate) || isUnavailableDate(nToday, unavailable, defaultTimeZone);
8284
- return /* @__PURE__ */ jsx(
8285
- Button,
8286
- {
8287
- ref,
8288
- onClick: onClickHandler,
8289
- appearance: "ghost",
8290
- disabled: isDisabled,
8291
- "data-anv": "calendar-now",
8292
- size: "small",
8293
- ...rest,
8294
- children: "Today"
8295
- }
8296
- );
8297
- }
8298
- );
8299
- CalendarNow.displayName = "CalendarNowButton";
8300
-
8301
- const CalendarYearButton = forwardRef((props, ref) => {
8302
- const { calendarSelectionState, ...rest } = props;
8303
- const { selectedYear, locale } = useCalendar();
8304
- const currentYear = DateTime.fromObject({ year: selectedYear }).setLocale(locale).toLocaleString({ year: "numeric" });
8305
- return /* @__PURE__ */ jsx(
8306
- Button,
8307
- {
8308
- ref,
8309
- appearance: "ghost",
8310
- size: "small",
8311
- icon: {
8312
- after: calendarSelectionState === "year" ? SvgKeyboardArrowUp : SvgKeyboardArrowDown
8313
- },
8314
- ...rest,
8315
- children: currentYear
8316
- }
8317
- );
8318
- });
8319
- CalendarYearButton.displayName = "CalendarYearButton";
8320
-
8321
- const calendar = "_calendar_50kmd_2";
8322
- const header = "_header_50kmd_15";
8323
- const controller = "_controller_50kmd_46";
8324
- const spacer = "_spacer_50kmd_54";
8325
- const cell = "_cell_50kmd_67";
8326
- const overflow = "_overflow_50kmd_98";
8327
- const weekday = "_weekday_50kmd_104";
8328
- const range = "_range_50kmd_149";
8329
- const selected = "_selected_50kmd_159";
8330
- const pip = "_pip_50kmd_233";
8331
- const styles$1 = {
8332
- calendar: calendar,
8333
- header: header,
8334
- controller: controller,
8335
- spacer: spacer,
8336
- "day-grid": "_day-grid_50kmd_57",
8337
- cell: cell,
8338
- overflow: overflow,
8339
- weekday: weekday,
8340
- "month-selection": "_month-selection_50kmd_116",
8341
- "selection-checkbox": "_selection-checkbox_50kmd_116",
8342
- "selection-card": "_selection-card_50kmd_126",
8343
- "range-first": "_range-first_50kmd_149",
8344
- "range-last": "_range-last_50kmd_149",
8345
- range: range,
8346
- selected: selected,
8347
- "is-unavailable": "_is-unavailable_50kmd_167",
8348
- "hover-last": "_hover-last_50kmd_225",
8349
- "has-metadata": "_has-metadata_50kmd_229",
8350
- pip: pip,
8351
- "range-fill": "_range-fill_50kmd_245",
8352
- "range-disabled": "_range-disabled_50kmd_255",
8353
- "controller-button": "_controller-button_50kmd_263",
8354
- "year-selector": "_year-selector_50kmd_271"
8355
- };
8356
-
8357
- const CalendarPrev = forwardRef(
8358
- (props, ref) => {
8359
- const { onClick, className, ...rest } = props;
8360
- const {
8361
- focusedDate,
8362
- setFocusedDate,
8363
- minDate,
8364
- setSelectedMonth,
8365
- setSelectedYear
8366
- } = useCalendar();
8367
- const [disabled, setDisabled] = useState(false);
8368
- useEffect(() => {
8369
- setDisabled(
8370
- minDate != null && focusedDate.minus({ month: 1 }).endOf("month") < minDate
8371
- );
8372
- }, [minDate, focusedDate]);
8373
- const onClickHandler = (e) => {
8374
- onClick?.(e);
8375
- const targetMonth = focusedDate.minus({ month: 1 }).endOf("month");
8376
- const targetDate = focusedDate.minus({ month: 1 });
8377
- const isCrossingYearBoundary = focusedDate.month === 1 && targetDate.month === 12;
8378
- if (minDate !== null) {
8379
- if (targetDate.toMillis() >= minDate?.toMillis()) {
8380
- setFocusedDate(targetDate);
8381
- setSelectedMonth(targetDate.month);
8382
- if (isCrossingYearBoundary) {
8383
- setSelectedYear(targetDate.year);
8384
- }
8385
- return;
8386
- }
8387
- if (!isSameMonth(targetMonth, focusedDate)) {
8388
- setFocusedDate(minDate);
8389
- setSelectedMonth(minDate.month);
8390
- if (isCrossingYearBoundary) {
8391
- setSelectedYear(minDate.year);
8392
- }
8393
- }
8394
- return;
8395
- }
8396
- setFocusedDate(targetDate);
8397
- setSelectedMonth(targetDate.month);
8398
- if (isCrossingYearBoundary) {
8399
- setSelectedYear(targetDate.year);
8400
- }
8401
- };
8402
- return /* @__PURE__ */ jsx(
8403
- Button,
8404
- {
8405
- ref,
8406
- onClick: onClickHandler,
8407
- className: cx(styles$1["controller-button"], className),
8408
- appearance: "ghost",
8409
- size: "small",
8410
- icon: SvgKeyboardArrowLeft,
8411
- "data-anv": "calendar-prev",
8412
- "aria-label": "Previous Month",
8413
- ...rest,
8414
- disabled
8415
- }
8416
- );
8417
- }
8418
- );
8419
- CalendarPrev.displayName = "CalendarPrevButton";
8420
-
8421
- const CalendarNext = forwardRef(
8422
- (props, ref) => {
8423
- const { onClick, className, ...rest } = props;
8424
- const {
8425
- focusedDate,
8426
- setFocusedDate,
8427
- maxDate,
8428
- setSelectedMonth,
8429
- setSelectedYear
8430
- } = useCalendar();
8431
- const [disabled, setDisabled] = useState(false);
8432
- useEffect(() => {
8433
- setDisabled(
8434
- maxDate != null && focusedDate.plus({ month: 1 }).startOf("month") > maxDate
8435
- );
8436
- }, [maxDate, focusedDate]);
8437
- const onClickHandler = (e) => {
8438
- onClick?.(e);
8439
- const targetMonth = focusedDate.plus({ month: 1 }).startOf("month");
8440
- const targetDate = focusedDate.plus({ month: 1 });
8441
- const isCrossingYearBoundary = focusedDate.month === 12 && targetDate.month === 1;
8442
- if (maxDate !== null) {
8443
- if (targetDate.toMillis() <= maxDate?.toMillis()) {
8444
- setFocusedDate(targetDate);
8445
- setSelectedMonth(targetDate.month);
8446
- if (isCrossingYearBoundary) {
8447
- setSelectedYear(targetDate.year);
8448
- }
8449
- return;
8450
- }
8451
- if (!isSameMonth(targetMonth, focusedDate)) {
8452
- setFocusedDate(maxDate);
8453
- setSelectedMonth(maxDate.month);
8454
- if (isCrossingYearBoundary) {
8455
- setSelectedYear(maxDate.year);
8456
- }
8457
- }
8458
- return;
8459
- }
8460
- setFocusedDate(targetDate);
8461
- setSelectedMonth(targetDate.month);
8462
- if (isCrossingYearBoundary) {
8463
- setSelectedYear(targetDate.year);
8464
- }
8465
- };
8466
- return /* @__PURE__ */ jsx(
8467
- Button,
8468
- {
8469
- onClick: onClickHandler,
8470
- appearance: "ghost",
8471
- size: "small",
8472
- className: cx(styles$1["controller-button"], className),
8473
- icon: SvgKeyboardArrowRight,
8474
- "aria-label": "Next Month",
8475
- "data-anv": "calendar-next",
8476
- ref,
8477
- ...rest,
8478
- disabled
8479
- }
8480
- );
8481
- }
8482
- );
8483
- CalendarNext.displayName = "CalendarNextButton";
8484
-
8485
- const CalendarMonthButton = forwardRef((props, ref) => {
8486
- const { calendarSelectionState, onClick, ...rest } = props;
8487
- const { selectedMonth, locale } = useCalendar();
8488
- const currentMonth = DateTime.fromObject({ month: selectedMonth }).setLocale(locale).toFormat("MMM");
8489
- return /* @__PURE__ */ jsx(
8490
- Button,
8491
- {
8492
- ref,
8493
- appearance: "ghost",
8494
- size: "small",
8495
- onClick,
8496
- icon: {
8497
- after: calendarSelectionState === "month" ? SvgKeyboardArrowUp : SvgKeyboardArrowDown
8498
- },
8499
- ...rest,
8500
- children: currentMonth
8501
- }
8502
- );
8503
- });
8504
- CalendarMonthButton.displayName = "CalendarMonthButton";
8505
-
8506
- const CalendarDay = forwardRef(
8507
- (props, ref) => {
8508
- const { className, date, ...rest } = props;
8509
- const context = useCalendar();
8510
- const {
8511
- disableAutofocus,
8512
- value,
8513
- setValue,
8514
- focusedDate,
8515
- setFocusedDate,
8516
- hoveredDate,
8517
- setHoveredDate,
8518
- onSelection,
8519
- locale,
8520
- minDate,
8521
- maxDate,
8522
- unavailable,
8523
- defaultTimeZone,
8524
- controlled,
8525
- id: uid,
8526
- range,
8527
- dateFormat,
8528
- startDay,
8529
- setSelectedMonth,
8530
- setSelectedYear,
8531
- dateMetadata
8532
- } = context;
8533
- const initialized = useRef(false);
8534
- const futureDateSelection = useCallback(
8535
- (targetDate) => {
8536
- if (maxDate !== null && targetDate.toMillis() > maxDate?.toMillis()) {
8537
- return;
8538
- }
8539
- if (isUnavailableDate(targetDate, unavailable, defaultTimeZone)) {
8540
- let nextFocusDate = targetDate.plus({ days: 1 });
8541
- for (let i = 0; i < 365; i++) {
8542
- if (maxDate !== null && nextFocusDate.toMillis() > maxDate?.toMillis()) {
8543
- break;
8544
- }
8545
- if (isUnavailableDate(nextFocusDate, unavailable, defaultTimeZone)) {
8546
- nextFocusDate = nextFocusDate.plus({ days: 1 });
8547
- } else {
8548
- setFocusedDate(nextFocusDate);
8549
- break;
8550
- }
8551
- }
8552
- return;
8553
- }
8554
- setFocusedDate(targetDate);
8555
- if (targetDate.month !== focusedDate.month) {
8556
- setSelectedMonth(targetDate.month);
8557
- if (targetDate.year !== focusedDate.year) {
8558
- setSelectedYear(targetDate.year);
8559
- }
8560
- }
8561
- },
8562
- // eslint-disable-next-line react-hooks/exhaustive-deps -- we don't need to re-render when the selected month or year changes
8563
- [maxDate, setFocusedDate, defaultTimeZone, unavailable]
8564
- );
8565
- const pastDateSelection = (targetDate) => {
8566
- if (minDate !== null && targetDate.toMillis() < minDate?.toMillis()) {
8567
- return;
8568
- }
8569
- if (isUnavailableDate(targetDate, unavailable, defaultTimeZone)) {
8570
- let prevFocusDate = targetDate.minus({ days: 1 });
8571
- for (let i = 0; i < 365; i++) {
8572
- if (minDate !== null && prevFocusDate.toMillis() < minDate?.toMillis()) {
8573
- break;
8574
- }
8575
- if (isUnavailableDate(prevFocusDate, unavailable, defaultTimeZone)) {
8576
- prevFocusDate = prevFocusDate.minus({ days: 1 });
8577
- } else {
8578
- setFocusedDate(prevFocusDate);
8579
- break;
8580
- }
8581
- }
8582
- return;
8583
- }
8584
- setFocusedDate(targetDate);
8585
- if (targetDate.month !== focusedDate.month) {
8586
- setSelectedMonth(targetDate.month);
8587
- if (targetDate.year !== focusedDate.year) {
8588
- setSelectedYear(targetDate.year);
8589
- }
8590
- }
8591
- };
8592
- const isSelectedDate = (date2, compareDate) => {
8593
- if (!range) {
8594
- return isSameDay(date2, value);
8595
- }
8596
- if (value.start && value.end) {
8597
- return date2.toMillis() >= value.start.startOf("day").toMillis() && date2.toMillis() <= value.end.endOf("day").toMillis();
8598
- }
8599
- return isSameDay(date2, value.start);
8600
- };
8601
- const isRange = (date2) => {
8602
- if (!range) {
8603
- return false;
8604
- }
8605
- if (value.start && value.end) {
8606
- return date2.toMillis() >= value.start.startOf("day").toMillis() && date2.toMillis() <= value.end.endOf("day").toMillis() && !isSameDay(value.start, date2) && !isSameDay(value.end, date2);
8607
- }
8608
- return false;
8609
- };
8610
- const onKeyDownHandler = (e) => {
8611
- switch (e.code) {
8612
- case "Space":
8613
- case "Enter":
8614
- e.preventDefault();
8615
- if (!range) {
8616
- if (!controlled) {
8617
- setValue(isSameDay(value, focusedDate) ? null : focusedDate);
8618
- }
8619
- onSelection?.({
8620
- value: isSameDay(value, focusedDate) ? void 0 : focusedDate.setZone(defaultTimeZone).startOf("day").toISO() ?? void 0
8621
- });
8622
- break;
8623
- }
8624
- rangeUpdater(value, focusedDate, setValue, onSelection);
8625
- break;
8626
- case "ArrowLeft":
8627
- e.preventDefault();
8628
- pastDateSelection(focusedDate.minus({ days: 1 }));
8629
- break;
8630
- case "ArrowRight":
8631
- e.preventDefault();
8632
- futureDateSelection(focusedDate.plus({ days: 1 }));
8633
- break;
8634
- case "ArrowUp":
8635
- e.preventDefault();
8636
- pastDateSelection(focusedDate.minus({ days: 7 }));
8637
- break;
8638
- case "ArrowDown":
8639
- e.preventDefault();
8640
- futureDateSelection(focusedDate.plus({ days: 7 }));
8641
- break;
8642
- case "PageUp":
8643
- e.preventDefault();
8644
- if (e.shiftKey) {
8645
- pastDateSelection(focusedDate.minus({ years: 1 }));
8646
- break;
8647
- }
8648
- pastDateSelection(focusedDate.minus({ months: 1 }));
8649
- break;
8650
- case "PageDown":
8651
- e.preventDefault();
8652
- if (e.shiftKey) {
8653
- futureDateSelection(focusedDate.plus({ years: 1 }));
8654
- break;
8655
- }
8656
- futureDateSelection(focusedDate.plus({ months: 1 }));
8657
- break;
8658
- }
8659
- };
8660
- let startDayIndex = 6;
8661
- switch (startDay) {
8662
- case "Monday":
8663
- startDayIndex = 0;
8664
- break;
8665
- case "Sunday":
8666
- default:
8667
- startDayIndex = 6;
8668
- }
8669
- const weekdaysArr = [];
8670
- for (let i = 0; i < 7; i++) {
8671
- const dayIndex = (startDayIndex + i) % 7;
8672
- weekdaysArr.push(Info.weekdays("narrow", { locale })[dayIndex]);
8673
- }
8674
- const firstDay = focusedDate.startOf("month");
8675
- if (firstDay.weekday !== startDayIndex + 1) {
8676
- for (let i = 1; i < 8; i++) {
8677
- const prevDay = firstDay.minus({ days: i });
8678
- if (prevDay.weekday === startDayIndex + 1) break;
8679
- }
8680
- }
8681
- const onClickHandler = (d) => {
8682
- setFocusedDate(d);
8683
- if (!range) {
8684
- onSelection?.({
8685
- value: toDateString(d.setZone(defaultTimeZone)) ?? void 0
8686
- });
8687
- if (!controlled) {
8688
- setValue(d);
8689
- }
8690
- return;
8691
- }
8692
- rangeUpdater(value, d, setValue, onSelection);
8693
- };
8694
- const onFocusHandler = (d) => {
8695
- setHoveredDate(d);
8696
- };
8697
- const onBlurHandler = () => {
8698
- setHoveredDate(void 0);
8699
- };
8700
- const onMouseEnterHandler = (d) => {
8701
- setHoveredDate(d);
8702
- };
8703
- useEffect(() => {
8704
- if (!initialized.current) {
8705
- initialized.current = true;
8706
- return;
8707
- }
8708
- if (!disableAutofocus) {
8709
- requestAnimationFrame(() => {
8710
- const targetElement = document.getElementById(`${uid}-${focusedDate.toISODate()}`) || document.activeElement?.shadowRoot?.getElementById(
8711
- `${uid}-${focusedDate.toISODate()}`
8712
- );
8713
- targetElement?.focus();
8714
- });
8715
- }
8716
- }, [focusedDate, uid, disableAutofocus]);
8717
- useEffect(() => {
8718
- if (!isUnavailableDate(focusedDate, unavailable, defaultTimeZone)) return;
8719
- futureDateSelection(focusedDate.plus({ days: 1 }));
8720
- }, [focusedDate, futureDateSelection, defaultTimeZone, unavailable]);
8721
- const isDisabled = !isSameMonth(date, focusedDate) || isBeyondMinDate(date, minDate) || isBeyondMaxDate(date, maxDate) || isUnavailableDate(date, unavailable, defaultTimeZone);
8722
- const isUnavailable = isUnavailableDate(date, unavailable, defaultTimeZone);
8723
- const hasMetadata = getDateMetadata(date, dateMetadata);
8724
- const hoverRange = range && hoveredDate && value.start && !value.end && date.toMillis() > value.start.toMillis() && date.toMillis() <= hoveredDate.toMillis();
8725
- const cellCx = cx(styles$1["cell"], {
8726
- [styles$1["selected"]]: !isUnavailable && isSelectedDate(date),
8727
- [styles$1["range-first"]]: range && value.start && (value.end || hoveredDate) && isSameDay(date, value.start),
8728
- [styles$1["range-last"]]: range && (value.start && value.end && isSameDay(date, value.end) || hoverRange && isSameDay(date, hoveredDate)),
8729
- [styles$1["range"]]: isRange(date) || hoverRange,
8730
- [styles$1["is-unavailable"]]: isUnavailable,
8731
- [styles$1["overflow"]]: !isSameMonth(date, focusedDate),
8732
- [styles$1["hover-last"]]: hoverRange && isSameDay(date, hoveredDate),
8733
- [styles$1["has-metadata"]]: hasMetadata
8734
- });
8735
- const isMinDate = minDate !== null && date.toMillis() <= minDate?.toMillis();
8736
- const isMaxDate = maxDate !== null && date.toMillis() >= maxDate?.toMillis();
8737
- return /* @__PURE__ */ jsxs("td", { role: "gridcell", ...rest, ref, children: [
8738
- !isUnavailable && (isRange(date) || hoverRange) ? /* @__PURE__ */ jsx(
8739
- "div",
8740
- {
8741
- role: "presentation",
8742
- className: cx(styles$1["range-fill"], {
8743
- [styles$1["range-disabled"]]: isDisabled,
8744
- [styles$1["hover-last"]]: hoverRange && isSameDay(date, hoveredDate)
8745
- })
8746
- }
8747
- ) : null,
8748
- /* @__PURE__ */ jsxs(
8749
- "button",
8750
- {
8751
- onClick: () => onClickHandler(date),
8752
- onFocus: () => onFocusHandler(date),
8753
- onBlur: () => onBlurHandler(),
8754
- className: cellCx,
8755
- onKeyDown: onKeyDownHandler,
8756
- onMouseEnter: () => onMouseEnterHandler(date),
8757
- tabIndex: disableAutofocus ? -1 : isSameDay(date, focusedDate) ? 0 : -1,
8758
- disabled: isDisabled ? true : void 0,
8759
- "aria-label": `${date.toLocaleString(dateFormat)}${isSelectedDate(date) ? " selected" : ""}${hasMetadata ? `, ${hasMetadata}` : ""}${isMinDate ? ", You are on the first available date" : ""}${isMaxDate ? ", You are on the last available date" : ""}`,
8760
- id: `${uid}-${date.toISODate()}`,
8761
- children: [
8762
- date.day,
8763
- hasMetadata && /* @__PURE__ */ jsx("span", { className: styles$1["pip"], "aria-hidden": "true" })
8764
- ]
8765
- }
8766
- )
8767
- ] }, date.toISODate());
8768
- }
8769
- );
8770
- CalendarDay.displayName = "CalendarDay";
8771
-
8772
- const CalendarWeek = forwardRef(
8773
- (props, ref) => {
8774
- const { className, week, ...rest } = props;
8775
- const context = useCalendar();
8776
- const {
8777
- focusedDate,
8778
- setFocusedDate,
8779
- locale,
8780
- maxDate,
8781
- unavailable,
8782
- defaultTimeZone,
8783
- id: uid,
8784
- startDay
8785
- } = context;
8786
- const initialized = useRef(false);
8787
- const futureDateSelection = useCallback(
8788
- (targetDate) => {
8789
- if (maxDate !== null && targetDate.toMillis() > maxDate?.toMillis()) {
8790
- return;
8791
- }
8792
- if (isUnavailableDate(targetDate, unavailable, defaultTimeZone)) {
8793
- let nextFocusDate = targetDate.plus({ days: 1 });
8794
- for (let i = 0; i < 365; i++) {
8795
- if (maxDate !== null && nextFocusDate.toMillis() > maxDate?.toMillis()) {
8796
- break;
8797
- }
8798
- if (isUnavailableDate(nextFocusDate, unavailable, defaultTimeZone)) {
8799
- nextFocusDate = nextFocusDate.plus({ days: 1 });
8800
- } else {
8801
- setFocusedDate(nextFocusDate);
8802
- break;
8803
- }
8804
- }
8805
- return;
8806
- }
8807
- setFocusedDate(targetDate);
8808
- },
8809
- [maxDate, setFocusedDate, defaultTimeZone, unavailable]
8810
- );
8811
- let startDayIndex = 6;
8812
- switch (startDay) {
8813
- case "Monday":
8814
- startDayIndex = 0;
8815
- break;
8816
- case "Sunday":
8817
- default:
8818
- startDayIndex = 6;
8819
- }
8820
- const weekdaysArr = [];
8821
- for (let i = 0; i < 7; i++) {
8822
- const dayIndex = (startDayIndex + i) % 7;
8823
- weekdaysArr.push(Info.weekdays("narrow", { locale })[dayIndex]);
8824
- }
8825
- const firstDay = focusedDate.startOf("month");
8826
- if (firstDay.weekday !== startDayIndex + 1) {
8827
- for (let i = 1; i < 8; i++) {
8828
- const prevDay = firstDay.minus({ days: i });
8829
- if (prevDay.weekday === startDayIndex + 1) break;
8830
- }
8831
- }
8832
- useEffect(() => {
8833
- if (!initialized.current) return;
8834
- setTimeout(() => {
8835
- const targetElement = document.getElementById(
8836
- `${uid}-${focusedDate.toISODate()}`
8837
- );
8838
- targetElement?.focus();
8839
- }, 100);
8840
- }, [focusedDate, uid]);
8841
- useEffect(() => {
8842
- if (!isUnavailableDate(focusedDate, unavailable, defaultTimeZone)) return;
8843
- futureDateSelection(focusedDate.plus({ days: 1 }));
8844
- }, [focusedDate, futureDateSelection, defaultTimeZone, unavailable]);
8845
- return /* @__PURE__ */ jsx("tr", { ...rest, ref, children: week.map((n) => {
8846
- return /* @__PURE__ */ jsx(CalendarDay, { date: n }, n.toISODate());
8847
- }) });
8848
- }
8849
- );
8850
- CalendarWeek.displayName = "CalendarWeek";
8851
-
8852
- const CalendarMonth = forwardRef(
8853
- (props, ref) => {
8854
- const { className, ...rest } = props;
8855
- const context = useCalendar();
8856
- const {
8857
- value,
8858
- focusedDate,
8859
- setFocusedDate,
8860
- setHoveredDate,
8861
- locale,
8862
- minDate,
8863
- maxDate,
8864
- unavailable,
8865
- defaultTimeZone,
8866
- id: uid,
8867
- range,
8868
- dateFormat,
8869
- startDay
8870
- } = context;
8871
- const initialized = useRef(false);
8872
- const ViewCX = cx(styles$1["grid"], className);
8873
- const futureDateSelection = useCallback(
8874
- (targetDate) => {
8875
- if (maxDate !== null && targetDate.toMillis() > maxDate?.toMillis()) {
8876
- return;
8877
- }
8878
- if (isUnavailableDate(targetDate, unavailable, defaultTimeZone)) {
8879
- let nextFocusDate = targetDate.plus({ days: 1 });
8880
- for (let i = 0; i < 365; i++) {
8881
- if (maxDate !== null && nextFocusDate.toMillis() > maxDate?.toMillis()) {
8882
- break;
8883
- }
8884
- if (isUnavailableDate(nextFocusDate, unavailable, defaultTimeZone)) {
8885
- nextFocusDate = nextFocusDate.plus({ days: 1 });
8886
- } else {
8887
- setFocusedDate(nextFocusDate);
8888
- break;
8889
- }
8890
- }
8891
- return;
8892
- }
8893
- setFocusedDate(targetDate);
8894
- },
8895
- [maxDate, setFocusedDate, defaultTimeZone, unavailable]
8896
- );
8897
- let startDayIndex = 6;
8898
- switch (startDay) {
8899
- case "Monday":
8900
- startDayIndex = 0;
8901
- break;
8902
- case "Sunday":
8903
- default:
8904
- startDayIndex = 6;
8905
- }
8906
- const weekdaysArr = [];
8907
- for (let i = 0; i < 7; i++) {
8908
- const dayIndex = (startDayIndex + i) % 7;
8909
- weekdaysArr.push(Info.weekdays("narrow", { locale })[dayIndex]);
8910
- }
8911
- const firstDay = focusedDate.startOf("month");
8912
- const lastDay = focusedDate.endOf("month");
8913
- const monthArr = Array.from(new Array(firstDay.daysInMonth)).map((_, i) => {
8914
- return firstDay.plus({ days: i });
8915
- });
8916
- const prevArr = [];
8917
- if (firstDay.weekday !== startDayIndex + 1) {
8918
- for (let i = 1; i < 8; i++) {
8919
- const prevDay = firstDay.minus({ days: i });
8920
- prevArr.push(prevDay);
8921
- if (prevDay.weekday === startDayIndex + 1) break;
8922
- }
8923
- }
8924
- prevArr.reverse();
8925
- const nextArr = Array.from(new Array(14)).map((_, i) => {
8926
- return lastDay.plus({ days: i + 1 });
8927
- });
8928
- const fullArr = [...prevArr, ...monthArr, ...nextArr];
8929
- const splitArr = [...Array(Math.ceil(fullArr.length / 7))].map((_, i) => fullArr.slice(7 * i, 7 + 7 * i)).slice(0, 6);
8930
- const onMouseLeaveHandler = () => {
8931
- setHoveredDate(void 0);
8932
- };
8933
- const onSwipe = (dir) => {
8934
- if (dir === "left") {
8935
- const targetMonth = focusedDate.plus({ month: 1 });
8936
- if (isBeyondMinDate(targetMonth, minDate) || isBeyondMaxDate(targetMonth, maxDate))
8937
- return;
8938
- setFocusedDate(targetMonth);
8939
- return;
8940
- }
8941
- if (dir === "right") {
8942
- const targetMonth = focusedDate.minus({ month: 1 });
8943
- if (isBeyondMinDate(targetMonth, minDate) || isBeyondMaxDate(targetMonth, maxDate))
8944
- return;
8945
- setFocusedDate(targetMonth);
8946
- return;
8947
- }
8948
- };
8949
- const { direction, ...touchProps } = useSwipe(onSwipe);
8950
- useEffect(() => {
8951
- if (!initialized.current) return;
8952
- setTimeout(() => {
8953
- const targetElement = document.getElementById(
8954
- `${uid}-${focusedDate.toISODate()}`
8955
- );
8956
- targetElement?.focus();
8957
- }, 100);
8958
- }, [focusedDate, uid]);
8959
- useEffect(() => {
8960
- if (!isUnavailableDate(focusedDate, unavailable, defaultTimeZone)) return;
8961
- futureDateSelection(focusedDate.plus({ days: 1 }));
8962
- }, [focusedDate, futureDateSelection, defaultTimeZone, unavailable]);
8963
- return /* @__PURE__ */ jsxs(Fragment, { children: [
8964
- /* @__PURE__ */ jsxs(
8965
- "table",
8966
- {
8967
- ref,
8968
- "data-anv": "calendar-month",
8969
- onFocus: () => {
8970
- initialized.current = true;
8971
- },
8972
- onBlur: () => {
8973
- initialized.current = false;
8974
- },
8975
- className: ViewCX,
8976
- onMouseLeave: onMouseLeaveHandler,
8977
- role: "grid",
8978
- ...rest,
8979
- ...touchProps,
8980
- children: [
8981
- /* @__PURE__ */ jsxs("thead", { "aria-hidden": true, className: styles$1["weekdays"], children: [
8982
- /* @__PURE__ */ jsx("tr", { children: weekdaysArr.map((weekday, i) => {
8983
- return /* @__PURE__ */ jsx(
8984
- "th",
8985
- {
8986
- scope: "col",
8987
- className: styles$1["weekday"],
8988
- children: weekday
8989
- },
8990
- `${weekday}${i}`
8991
- );
8992
- }) }),
8993
- /* @__PURE__ */ jsx("tr", { className: styles$1["spacer"], children: /* @__PURE__ */ jsx("td", { colSpan: 7 }) })
8994
- ] }),
8995
- /* @__PURE__ */ jsx(
8996
- "tbody",
8997
- {
8998
- className: styles$1["day-grid"],
8999
- children: splitArr.map((week, i) => {
9000
- return /* @__PURE__ */ jsx(CalendarWeek, { week }, i);
9001
- })
9002
- },
9003
- focusedDate.startOf("month").toMillis()
9004
- )
9005
- ]
9006
- }
9007
- ),
9008
- range && value ? /* @__PURE__ */ jsx(SrOnly, { "aria-live": "polite", children: `Range starts at ${value.start && value.start.toLocaleString(dateFormat)}, ${value.end ? `ends at ${value.end.toLocaleString(dateFormat)}` : "select an end date"}` }) : null
9009
- ] });
9010
- }
9011
- );
9012
- CalendarMonth.displayName = "CalendarMonth";
9013
-
9014
- function memo(getDeps, fn, opts) {
9015
- let deps = opts.initialDeps ?? [];
9016
- let result;
9017
- function memoizedFunction() {
9018
- var _a, _b, _c, _d;
9019
- let depTime;
9020
- if (opts.key && ((_a = opts.debug) == null ? void 0 : _a.call(opts))) depTime = Date.now();
9021
- const newDeps = getDeps();
9022
- const depsChanged = newDeps.length !== deps.length || newDeps.some((dep, index) => deps[index] !== dep);
9023
- if (!depsChanged) {
9024
- return result;
9025
- }
9026
- deps = newDeps;
9027
- let resultTime;
9028
- if (opts.key && ((_b = opts.debug) == null ? void 0 : _b.call(opts))) resultTime = Date.now();
9029
- result = fn(...newDeps);
9030
- if (opts.key && ((_c = opts.debug) == null ? void 0 : _c.call(opts))) {
9031
- const depEndTime = Math.round((Date.now() - depTime) * 100) / 100;
9032
- const resultEndTime = Math.round((Date.now() - resultTime) * 100) / 100;
9033
- const resultFpsPercentage = resultEndTime / 16;
9034
- const pad = (str, num) => {
9035
- str = String(str);
9036
- while (str.length < num) {
9037
- str = " " + str;
9038
- }
9039
- return str;
9040
- };
9041
- console.info(
9042
- `%c⏱ ${pad(resultEndTime, 5)} /${pad(depEndTime, 5)} ms`,
9043
- `
9044
- font-size: .6rem;
9045
- font-weight: bold;
9046
- color: hsl(${Math.max(
9047
- 0,
9048
- Math.min(120 - 120 * resultFpsPercentage, 120)
9049
- )}deg 100% 31%);`,
9050
- opts == null ? void 0 : opts.key
9051
- );
9052
- }
9053
- (_d = opts == null ? void 0 : opts.onChange) == null ? void 0 : _d.call(opts, result);
9054
- return result;
9055
- }
9056
- memoizedFunction.updateDeps = (newDeps) => {
9057
- deps = newDeps;
9058
- };
9059
- return memoizedFunction;
9060
- }
9061
- function notUndefined(value, msg) {
9062
- if (value === void 0) {
9063
- throw new Error(`Unexpected undefined${""}`);
9064
- } else {
9065
- return value;
9066
- }
9067
- }
9068
- const approxEqual = (a, b) => Math.abs(a - b) < 1.01;
9069
- const debounce = (targetWindow, fn, ms) => {
9070
- let timeoutId;
9071
- return function(...args) {
9072
- targetWindow.clearTimeout(timeoutId);
9073
- timeoutId = targetWindow.setTimeout(() => fn.apply(this, args), ms);
9074
- };
9075
- };
9076
-
9077
- const getRect = (element) => {
9078
- const { offsetWidth, offsetHeight } = element;
9079
- return { width: offsetWidth, height: offsetHeight };
9080
- };
9081
- const defaultKeyExtractor = (index) => index;
9082
- const defaultRangeExtractor = (range) => {
9083
- const start = Math.max(range.startIndex - range.overscan, 0);
9084
- const end = Math.min(range.endIndex + range.overscan, range.count - 1);
9085
- const arr = [];
9086
- for (let i = start; i <= end; i++) {
9087
- arr.push(i);
9088
- }
9089
- return arr;
9090
- };
9091
- const observeElementRect = (instance, cb) => {
9092
- const element = instance.scrollElement;
9093
- if (!element) {
9094
- return;
9095
- }
9096
- const targetWindow = instance.targetWindow;
9097
- if (!targetWindow) {
9098
- return;
9099
- }
9100
- const handler = (rect) => {
9101
- const { width, height } = rect;
9102
- cb({ width: Math.round(width), height: Math.round(height) });
9103
- };
9104
- handler(getRect(element));
9105
- if (!targetWindow.ResizeObserver) {
9106
- return () => {
9107
- };
9108
- }
9109
- const observer = new targetWindow.ResizeObserver((entries) => {
9110
- const run = () => {
9111
- const entry = entries[0];
9112
- if (entry == null ? void 0 : entry.borderBoxSize) {
9113
- const box = entry.borderBoxSize[0];
9114
- if (box) {
9115
- handler({ width: box.inlineSize, height: box.blockSize });
9116
- return;
9117
- }
9118
- }
9119
- handler(getRect(element));
9120
- };
9121
- instance.options.useAnimationFrameWithResizeObserver ? requestAnimationFrame(run) : run();
9122
- });
9123
- observer.observe(element, { box: "border-box" });
9124
- return () => {
9125
- observer.unobserve(element);
9126
- };
9127
- };
9128
- const addEventListenerOptions = {
9129
- passive: true
9130
- };
9131
- const supportsScrollend = typeof window == "undefined" ? true : "onscrollend" in window;
9132
- const observeElementOffset = (instance, cb) => {
9133
- const element = instance.scrollElement;
9134
- if (!element) {
9135
- return;
9136
- }
9137
- const targetWindow = instance.targetWindow;
9138
- if (!targetWindow) {
9139
- return;
9140
- }
9141
- let offset = 0;
9142
- const fallback = instance.options.useScrollendEvent && supportsScrollend ? () => void 0 : debounce(
9143
- targetWindow,
9144
- () => {
9145
- cb(offset, false);
9146
- },
9147
- instance.options.isScrollingResetDelay
9148
- );
9149
- const createHandler = (isScrolling) => () => {
9150
- const { horizontal, isRtl } = instance.options;
9151
- offset = horizontal ? element["scrollLeft"] * (isRtl && -1 || 1) : element["scrollTop"];
9152
- fallback();
9153
- cb(offset, isScrolling);
9154
- };
9155
- const handler = createHandler(true);
9156
- const endHandler = createHandler(false);
9157
- endHandler();
9158
- element.addEventListener("scroll", handler, addEventListenerOptions);
9159
- const registerScrollendEvent = instance.options.useScrollendEvent && supportsScrollend;
9160
- if (registerScrollendEvent) {
9161
- element.addEventListener("scrollend", endHandler, addEventListenerOptions);
9162
- }
9163
- return () => {
9164
- element.removeEventListener("scroll", handler);
9165
- if (registerScrollendEvent) {
9166
- element.removeEventListener("scrollend", endHandler);
9167
- }
9168
- };
9169
- };
9170
- const measureElement = (element, entry, instance) => {
9171
- if (entry == null ? void 0 : entry.borderBoxSize) {
9172
- const box = entry.borderBoxSize[0];
9173
- if (box) {
9174
- const size = Math.round(
9175
- box[instance.options.horizontal ? "inlineSize" : "blockSize"]
9176
- );
9177
- return size;
9178
- }
9179
- }
9180
- return element[instance.options.horizontal ? "offsetWidth" : "offsetHeight"];
9181
- };
9182
- const elementScroll = (offset, {
9183
- adjustments = 0,
9184
- behavior
9185
- }, instance) => {
9186
- var _a, _b;
9187
- const toOffset = offset + adjustments;
9188
- (_b = (_a = instance.scrollElement) == null ? void 0 : _a.scrollTo) == null ? void 0 : _b.call(_a, {
9189
- [instance.options.horizontal ? "left" : "top"]: toOffset,
9190
- behavior
9191
- });
9192
- };
9193
- class Virtualizer {
9194
- constructor(opts) {
9195
- this.unsubs = [];
9196
- this.scrollElement = null;
9197
- this.targetWindow = null;
9198
- this.isScrolling = false;
9199
- this.measurementsCache = [];
9200
- this.itemSizeCache = /* @__PURE__ */ new Map();
9201
- this.pendingMeasuredCacheIndexes = [];
9202
- this.scrollRect = null;
9203
- this.scrollOffset = null;
9204
- this.scrollDirection = null;
9205
- this.scrollAdjustments = 0;
9206
- this.elementsCache = /* @__PURE__ */ new Map();
9207
- this.observer = /* @__PURE__ */ (() => {
9208
- let _ro = null;
9209
- const get = () => {
9210
- if (_ro) {
9211
- return _ro;
9212
- }
9213
- if (!this.targetWindow || !this.targetWindow.ResizeObserver) {
9214
- return null;
9215
- }
9216
- return _ro = new this.targetWindow.ResizeObserver((entries) => {
9217
- entries.forEach((entry) => {
9218
- const run = () => {
9219
- this._measureElement(entry.target, entry);
9220
- };
9221
- this.options.useAnimationFrameWithResizeObserver ? requestAnimationFrame(run) : run();
9222
- });
9223
- });
9224
- };
9225
- return {
9226
- disconnect: () => {
9227
- var _a;
9228
- (_a = get()) == null ? void 0 : _a.disconnect();
9229
- _ro = null;
9230
- },
9231
- observe: (target) => {
9232
- var _a;
9233
- return (_a = get()) == null ? void 0 : _a.observe(target, { box: "border-box" });
9234
- },
9235
- unobserve: (target) => {
9236
- var _a;
9237
- return (_a = get()) == null ? void 0 : _a.unobserve(target);
9238
- }
9239
- };
9240
- })();
9241
- this.range = null;
9242
- this.setOptions = (opts2) => {
9243
- Object.entries(opts2).forEach(([key, value]) => {
9244
- if (typeof value === "undefined") delete opts2[key];
9245
- });
9246
- this.options = {
9247
- debug: false,
9248
- initialOffset: 0,
9249
- overscan: 1,
9250
- paddingStart: 0,
9251
- paddingEnd: 0,
9252
- scrollPaddingStart: 0,
9253
- scrollPaddingEnd: 0,
9254
- horizontal: false,
9255
- getItemKey: defaultKeyExtractor,
9256
- rangeExtractor: defaultRangeExtractor,
9257
- onChange: () => {
9258
- },
9259
- measureElement,
9260
- initialRect: { width: 0, height: 0 },
9261
- scrollMargin: 0,
9262
- gap: 0,
9263
- indexAttribute: "data-index",
9264
- initialMeasurementsCache: [],
9265
- lanes: 1,
9266
- isScrollingResetDelay: 150,
9267
- enabled: true,
9268
- isRtl: false,
9269
- useScrollendEvent: false,
9270
- useAnimationFrameWithResizeObserver: false,
9271
- ...opts2
9272
- };
9273
- };
9274
- this.notify = (sync) => {
9275
- var _a, _b;
9276
- (_b = (_a = this.options).onChange) == null ? void 0 : _b.call(_a, this, sync);
9277
- };
9278
- this.maybeNotify = memo(
9279
- () => {
9280
- this.calculateRange();
9281
- return [
9282
- this.isScrolling,
9283
- this.range ? this.range.startIndex : null,
9284
- this.range ? this.range.endIndex : null
9285
- ];
9286
- },
9287
- (isScrolling) => {
9288
- this.notify(isScrolling);
9289
- },
9290
- {
9291
- key: process.env.NODE_ENV !== "production" && "maybeNotify",
9292
- debug: () => this.options.debug,
9293
- initialDeps: [
9294
- this.isScrolling,
9295
- this.range ? this.range.startIndex : null,
9296
- this.range ? this.range.endIndex : null
9297
- ]
9298
- }
9299
- );
9300
- this.cleanup = () => {
9301
- this.unsubs.filter(Boolean).forEach((d) => d());
9302
- this.unsubs = [];
9303
- this.observer.disconnect();
9304
- this.scrollElement = null;
9305
- this.targetWindow = null;
9306
- };
9307
- this._didMount = () => {
9308
- return () => {
9309
- this.cleanup();
9310
- };
9311
- };
9312
- this._willUpdate = () => {
9313
- var _a;
9314
- const scrollElement = this.options.enabled ? this.options.getScrollElement() : null;
9315
- if (this.scrollElement !== scrollElement) {
9316
- this.cleanup();
9317
- if (!scrollElement) {
9318
- this.maybeNotify();
9319
- return;
9320
- }
9321
- this.scrollElement = scrollElement;
9322
- if (this.scrollElement && "ownerDocument" in this.scrollElement) {
9323
- this.targetWindow = this.scrollElement.ownerDocument.defaultView;
9324
- } else {
9325
- this.targetWindow = ((_a = this.scrollElement) == null ? void 0 : _a.window) ?? null;
9326
- }
9327
- this.elementsCache.forEach((cached) => {
9328
- this.observer.observe(cached);
9329
- });
9330
- this._scrollToOffset(this.getScrollOffset(), {
9331
- adjustments: void 0,
9332
- behavior: void 0
9333
- });
9334
- this.unsubs.push(
9335
- this.options.observeElementRect(this, (rect) => {
9336
- this.scrollRect = rect;
9337
- this.maybeNotify();
9338
- })
9339
- );
9340
- this.unsubs.push(
9341
- this.options.observeElementOffset(this, (offset, isScrolling) => {
9342
- this.scrollAdjustments = 0;
9343
- this.scrollDirection = isScrolling ? this.getScrollOffset() < offset ? "forward" : "backward" : null;
9344
- this.scrollOffset = offset;
9345
- this.isScrolling = isScrolling;
9346
- this.maybeNotify();
9347
- })
9348
- );
9349
- }
9350
- };
9351
- this.getSize = () => {
9352
- if (!this.options.enabled) {
9353
- this.scrollRect = null;
9354
- return 0;
9355
- }
9356
- this.scrollRect = this.scrollRect ?? this.options.initialRect;
9357
- return this.scrollRect[this.options.horizontal ? "width" : "height"];
9358
- };
9359
- this.getScrollOffset = () => {
9360
- if (!this.options.enabled) {
9361
- this.scrollOffset = null;
9362
- return 0;
9363
- }
9364
- this.scrollOffset = this.scrollOffset ?? (typeof this.options.initialOffset === "function" ? this.options.initialOffset() : this.options.initialOffset);
9365
- return this.scrollOffset;
9366
- };
9367
- this.getFurthestMeasurement = (measurements, index) => {
9368
- const furthestMeasurementsFound = /* @__PURE__ */ new Map();
9369
- const furthestMeasurements = /* @__PURE__ */ new Map();
9370
- for (let m = index - 1; m >= 0; m--) {
9371
- const measurement = measurements[m];
9372
- if (furthestMeasurementsFound.has(measurement.lane)) {
9373
- continue;
9374
- }
9375
- const previousFurthestMeasurement = furthestMeasurements.get(
9376
- measurement.lane
9377
- );
9378
- if (previousFurthestMeasurement == null || measurement.end > previousFurthestMeasurement.end) {
9379
- furthestMeasurements.set(measurement.lane, measurement);
9380
- } else if (measurement.end < previousFurthestMeasurement.end) {
9381
- furthestMeasurementsFound.set(measurement.lane, true);
9382
- }
9383
- if (furthestMeasurementsFound.size === this.options.lanes) {
9384
- break;
9385
- }
9386
- }
9387
- return furthestMeasurements.size === this.options.lanes ? Array.from(furthestMeasurements.values()).sort((a, b) => {
9388
- if (a.end === b.end) {
9389
- return a.index - b.index;
9390
- }
9391
- return a.end - b.end;
9392
- })[0] : void 0;
9393
- };
9394
- this.getMeasurementOptions = memo(
9395
- () => [
9396
- this.options.count,
9397
- this.options.paddingStart,
9398
- this.options.scrollMargin,
9399
- this.options.getItemKey,
9400
- this.options.enabled
9401
- ],
9402
- (count, paddingStart, scrollMargin, getItemKey, enabled) => {
9403
- this.pendingMeasuredCacheIndexes = [];
9404
- return {
9405
- count,
9406
- paddingStart,
9407
- scrollMargin,
9408
- getItemKey,
9409
- enabled
9410
- };
9411
- },
9412
- {
9413
- key: false
9414
- }
9415
- );
9416
- this.getMeasurements = memo(
9417
- () => [this.getMeasurementOptions(), this.itemSizeCache],
9418
- ({ count, paddingStart, scrollMargin, getItemKey, enabled }, itemSizeCache) => {
9419
- if (!enabled) {
9420
- this.measurementsCache = [];
9421
- this.itemSizeCache.clear();
9422
- return [];
9423
- }
9424
- if (this.measurementsCache.length === 0) {
9425
- this.measurementsCache = this.options.initialMeasurementsCache;
9426
- this.measurementsCache.forEach((item) => {
9427
- this.itemSizeCache.set(item.key, item.size);
9428
- });
9429
- }
9430
- const min = this.pendingMeasuredCacheIndexes.length > 0 ? Math.min(...this.pendingMeasuredCacheIndexes) : 0;
9431
- this.pendingMeasuredCacheIndexes = [];
9432
- const measurements = this.measurementsCache.slice(0, min);
9433
- for (let i = min; i < count; i++) {
9434
- const key = getItemKey(i);
9435
- const furthestMeasurement = this.options.lanes === 1 ? measurements[i - 1] : this.getFurthestMeasurement(measurements, i);
9436
- const start = furthestMeasurement ? furthestMeasurement.end + this.options.gap : paddingStart + scrollMargin;
9437
- const measuredSize = itemSizeCache.get(key);
9438
- const size = typeof measuredSize === "number" ? measuredSize : this.options.estimateSize(i);
9439
- const end = start + size;
9440
- const lane = furthestMeasurement ? furthestMeasurement.lane : i % this.options.lanes;
9441
- measurements[i] = {
9442
- index: i,
9443
- start,
9444
- size,
9445
- end,
9446
- key,
9447
- lane
9448
- };
9449
- }
9450
- this.measurementsCache = measurements;
9451
- return measurements;
9452
- },
9453
- {
9454
- key: process.env.NODE_ENV !== "production" && "getMeasurements",
9455
- debug: () => this.options.debug
9456
- }
9457
- );
9458
- this.calculateRange = memo(
9459
- () => [
9460
- this.getMeasurements(),
9461
- this.getSize(),
9462
- this.getScrollOffset(),
9463
- this.options.lanes
9464
- ],
9465
- (measurements, outerSize, scrollOffset, lanes) => {
9466
- return this.range = measurements.length > 0 && outerSize > 0 ? calculateRange({
9467
- measurements,
9468
- outerSize,
9469
- scrollOffset,
9470
- lanes
9471
- }) : null;
9472
- },
9473
- {
9474
- key: process.env.NODE_ENV !== "production" && "calculateRange",
9475
- debug: () => this.options.debug
9476
- }
9477
- );
9478
- this.getVirtualIndexes = memo(
9479
- () => {
9480
- let startIndex = null;
9481
- let endIndex = null;
9482
- const range = this.calculateRange();
9483
- if (range) {
9484
- startIndex = range.startIndex;
9485
- endIndex = range.endIndex;
9486
- }
9487
- this.maybeNotify.updateDeps([this.isScrolling, startIndex, endIndex]);
9488
- return [
9489
- this.options.rangeExtractor,
9490
- this.options.overscan,
9491
- this.options.count,
9492
- startIndex,
9493
- endIndex
9494
- ];
9495
- },
9496
- (rangeExtractor, overscan, count, startIndex, endIndex) => {
9497
- return startIndex === null || endIndex === null ? [] : rangeExtractor({
9498
- startIndex,
9499
- endIndex,
9500
- overscan,
9501
- count
9502
- });
9503
- },
9504
- {
9505
- key: process.env.NODE_ENV !== "production" && "getVirtualIndexes",
9506
- debug: () => this.options.debug
9507
- }
9508
- );
9509
- this.indexFromElement = (node) => {
9510
- const attributeName = this.options.indexAttribute;
9511
- const indexStr = node.getAttribute(attributeName);
9512
- if (!indexStr) {
9513
- console.warn(
9514
- `Missing attribute name '${attributeName}={index}' on measured element.`
9515
- );
9516
- return -1;
9517
- }
9518
- return parseInt(indexStr, 10);
9519
- };
9520
- this._measureElement = (node, entry) => {
9521
- const index = this.indexFromElement(node);
9522
- const item = this.measurementsCache[index];
9523
- if (!item) {
9524
- return;
9525
- }
9526
- const key = item.key;
9527
- const prevNode = this.elementsCache.get(key);
9528
- if (prevNode !== node) {
9529
- if (prevNode) {
9530
- this.observer.unobserve(prevNode);
9531
- }
9532
- this.observer.observe(node);
9533
- this.elementsCache.set(key, node);
9534
- }
9535
- if (node.isConnected) {
9536
- this.resizeItem(index, this.options.measureElement(node, entry, this));
9537
- }
9538
- };
9539
- this.resizeItem = (index, size) => {
9540
- const item = this.measurementsCache[index];
9541
- if (!item) {
9542
- return;
9543
- }
9544
- const itemSize = this.itemSizeCache.get(item.key) ?? item.size;
9545
- const delta = size - itemSize;
9546
- if (delta !== 0) {
9547
- if (this.shouldAdjustScrollPositionOnItemSizeChange !== void 0 ? this.shouldAdjustScrollPositionOnItemSizeChange(item, delta, this) : item.start < this.getScrollOffset() + this.scrollAdjustments) {
9548
- if (process.env.NODE_ENV !== "production" && this.options.debug) {
9549
- console.info("correction", delta);
9550
- }
9551
- this._scrollToOffset(this.getScrollOffset(), {
9552
- adjustments: this.scrollAdjustments += delta,
9553
- behavior: void 0
9554
- });
9555
- }
9556
- this.pendingMeasuredCacheIndexes.push(item.index);
9557
- this.itemSizeCache = new Map(this.itemSizeCache.set(item.key, size));
9558
- this.notify(false);
9559
- }
9560
- };
9561
- this.measureElement = (node) => {
9562
- if (!node) {
9563
- this.elementsCache.forEach((cached, key) => {
9564
- if (!cached.isConnected) {
9565
- this.observer.unobserve(cached);
9566
- this.elementsCache.delete(key);
9567
- }
9568
- });
9569
- return;
9570
- }
9571
- this._measureElement(node, void 0);
9572
- };
9573
- this.getVirtualItems = memo(
9574
- () => [this.getVirtualIndexes(), this.getMeasurements()],
9575
- (indexes, measurements) => {
9576
- const virtualItems = [];
9577
- for (let k = 0, len = indexes.length; k < len; k++) {
9578
- const i = indexes[k];
9579
- const measurement = measurements[i];
9580
- virtualItems.push(measurement);
9581
- }
9582
- return virtualItems;
9583
- },
9584
- {
9585
- key: process.env.NODE_ENV !== "production" && "getVirtualItems",
9586
- debug: () => this.options.debug
9587
- }
9588
- );
9589
- this.getVirtualItemForOffset = (offset) => {
9590
- const measurements = this.getMeasurements();
9591
- if (measurements.length === 0) {
9592
- return void 0;
9593
- }
9594
- return notUndefined(
9595
- measurements[findNearestBinarySearch(
9596
- 0,
9597
- measurements.length - 1,
9598
- (index) => notUndefined(measurements[index]).start,
9599
- offset
9600
- )]
9601
- );
9602
- };
9603
- this.getOffsetForAlignment = (toOffset, align, itemSize = 0) => {
9604
- const size = this.getSize();
9605
- const scrollOffset = this.getScrollOffset();
9606
- if (align === "auto") {
9607
- align = toOffset >= scrollOffset + size ? "end" : "start";
9608
- }
9609
- if (align === "center") {
9610
- toOffset += (itemSize - size) / 2;
9611
- } else if (align === "end") {
9612
- toOffset -= size;
9613
- }
9614
- const maxOffset = this.getTotalSize() + this.options.scrollMargin - size;
9615
- return Math.max(Math.min(maxOffset, toOffset), 0);
9616
- };
9617
- this.getOffsetForIndex = (index, align = "auto") => {
9618
- index = Math.max(0, Math.min(index, this.options.count - 1));
9619
- const item = this.measurementsCache[index];
9620
- if (!item) {
9621
- return void 0;
9622
- }
9623
- const size = this.getSize();
9624
- const scrollOffset = this.getScrollOffset();
9625
- if (align === "auto") {
9626
- if (item.end >= scrollOffset + size - this.options.scrollPaddingEnd) {
9627
- align = "end";
9628
- } else if (item.start <= scrollOffset + this.options.scrollPaddingStart) {
9629
- align = "start";
9630
- } else {
9631
- return [scrollOffset, align];
9632
- }
9633
- }
9634
- const toOffset = align === "end" ? item.end + this.options.scrollPaddingEnd : item.start - this.options.scrollPaddingStart;
9635
- return [
9636
- this.getOffsetForAlignment(toOffset, align, item.size),
9637
- align
9638
- ];
9639
- };
9640
- this.isDynamicMode = () => this.elementsCache.size > 0;
9641
- this.scrollToOffset = (toOffset, { align = "start", behavior } = {}) => {
9642
- if (behavior === "smooth" && this.isDynamicMode()) {
9643
- console.warn(
9644
- "The `smooth` scroll behavior is not fully supported with dynamic size."
9645
- );
9646
- }
9647
- this._scrollToOffset(this.getOffsetForAlignment(toOffset, align), {
9648
- adjustments: void 0,
9649
- behavior
9650
- });
9651
- };
9652
- this.scrollToIndex = (index, { align: initialAlign = "auto", behavior } = {}) => {
9653
- if (behavior === "smooth" && this.isDynamicMode()) {
9654
- console.warn(
9655
- "The `smooth` scroll behavior is not fully supported with dynamic size."
9656
- );
9657
- }
9658
- index = Math.max(0, Math.min(index, this.options.count - 1));
9659
- let attempts = 0;
9660
- const maxAttempts = 10;
9661
- const tryScroll = (currentAlign) => {
9662
- if (!this.targetWindow) return;
9663
- const offsetInfo = this.getOffsetForIndex(index, currentAlign);
9664
- if (!offsetInfo) {
9665
- console.warn("Failed to get offset for index:", index);
9666
- return;
9667
- }
9668
- const [offset, align] = offsetInfo;
9669
- this._scrollToOffset(offset, { adjustments: void 0, behavior });
9670
- this.targetWindow.requestAnimationFrame(() => {
9671
- const currentOffset = this.getScrollOffset();
9672
- const afterInfo = this.getOffsetForIndex(index, align);
9673
- if (!afterInfo) {
9674
- console.warn("Failed to get offset for index:", index);
9675
- return;
9676
- }
9677
- if (!approxEqual(afterInfo[0], currentOffset)) {
9678
- scheduleRetry(align);
9679
- }
9680
- });
9681
- };
9682
- const scheduleRetry = (align) => {
9683
- if (!this.targetWindow) return;
9684
- attempts++;
9685
- if (attempts < maxAttempts) {
9686
- if (process.env.NODE_ENV !== "production" && this.options.debug) {
9687
- console.info("Schedule retry", attempts, maxAttempts);
9688
- }
9689
- this.targetWindow.requestAnimationFrame(() => tryScroll(align));
9690
- } else {
9691
- console.warn(
9692
- `Failed to scroll to index ${index} after ${maxAttempts} attempts.`
9693
- );
9694
- }
9695
- };
9696
- tryScroll(initialAlign);
9697
- };
9698
- this.scrollBy = (delta, { behavior } = {}) => {
9699
- if (behavior === "smooth" && this.isDynamicMode()) {
9700
- console.warn(
9701
- "The `smooth` scroll behavior is not fully supported with dynamic size."
9702
- );
9703
- }
9704
- this._scrollToOffset(this.getScrollOffset() + delta, {
9705
- adjustments: void 0,
9706
- behavior
9707
- });
9708
- };
9709
- this.getTotalSize = () => {
9710
- var _a;
9711
- const measurements = this.getMeasurements();
9712
- let end;
9713
- if (measurements.length === 0) {
9714
- end = this.options.paddingStart;
9715
- } else if (this.options.lanes === 1) {
9716
- end = ((_a = measurements[measurements.length - 1]) == null ? void 0 : _a.end) ?? 0;
9717
- } else {
9718
- const endByLane = Array(this.options.lanes).fill(null);
9719
- let endIndex = measurements.length - 1;
9720
- while (endIndex >= 0 && endByLane.some((val) => val === null)) {
9721
- const item = measurements[endIndex];
9722
- if (endByLane[item.lane] === null) {
9723
- endByLane[item.lane] = item.end;
9724
- }
9725
- endIndex--;
9726
- }
9727
- end = Math.max(...endByLane.filter((val) => val !== null));
9728
- }
9729
- return Math.max(
9730
- end - this.options.scrollMargin + this.options.paddingEnd,
9731
- 0
9732
- );
9733
- };
9734
- this._scrollToOffset = (offset, {
9735
- adjustments,
9736
- behavior
9737
- }) => {
9738
- this.options.scrollToFn(offset, { behavior, adjustments }, this);
9739
- };
9740
- this.measure = () => {
9741
- this.itemSizeCache = /* @__PURE__ */ new Map();
9742
- this.notify(false);
9743
- };
9744
- this.setOptions(opts);
9745
- }
9746
- }
9747
- const findNearestBinarySearch = (low, high, getCurrentValue, value) => {
9748
- while (low <= high) {
9749
- const middle = (low + high) / 2 | 0;
9750
- const currentValue = getCurrentValue(middle);
9751
- if (currentValue < value) {
9752
- low = middle + 1;
9753
- } else if (currentValue > value) {
9754
- high = middle - 1;
9755
- } else {
9756
- return middle;
9757
- }
9758
- }
9759
- if (low > 0) {
9760
- return low - 1;
9761
- } else {
9762
- return 0;
9763
- }
9764
- };
9765
- function calculateRange({
9766
- measurements,
9767
- outerSize,
9768
- scrollOffset,
9769
- lanes
9770
- }) {
9771
- const lastIndex = measurements.length - 1;
9772
- const getOffset = (index) => measurements[index].start;
9773
- if (measurements.length <= lanes) {
9774
- return {
9775
- startIndex: 0,
9776
- endIndex: lastIndex
9777
- };
9778
- }
9779
- let startIndex = findNearestBinarySearch(
9780
- 0,
9781
- lastIndex,
9782
- getOffset,
9783
- scrollOffset
9784
- );
9785
- let endIndex = startIndex;
9786
- if (lanes === 1) {
9787
- while (endIndex < lastIndex && measurements[endIndex].end < scrollOffset + outerSize) {
9788
- endIndex++;
9789
- }
9790
- } else if (lanes > 1) {
9791
- const endPerLane = Array(lanes).fill(0);
9792
- while (endIndex < lastIndex && endPerLane.some((pos) => pos < scrollOffset + outerSize)) {
9793
- const item = measurements[endIndex];
9794
- endPerLane[item.lane] = item.end;
9795
- endIndex++;
9796
- }
9797
- const startPerLane = Array(lanes).fill(scrollOffset + outerSize);
9798
- while (startIndex >= 0 && startPerLane.some((pos) => pos >= scrollOffset)) {
9799
- const item = measurements[startIndex];
9800
- startPerLane[item.lane] = item.start;
9801
- startIndex--;
9802
- }
9803
- startIndex = Math.max(0, startIndex - startIndex % lanes);
9804
- endIndex = Math.min(lastIndex, endIndex + (lanes - 1 - endIndex % lanes));
9805
- }
9806
- return { startIndex, endIndex };
9807
- }
9808
-
9809
- const useIsomorphicLayoutEffect = typeof document !== "undefined" ? React.useLayoutEffect : React.useEffect;
9810
- function useVirtualizerBase(options) {
9811
- const rerender = React.useReducer(() => ({}), {})[1];
9812
- const resolvedOptions = {
9813
- ...options,
9814
- onChange: (instance2, sync) => {
9815
- var _a;
9816
- if (sync) {
9817
- flushSync(rerender);
9818
- } else {
9819
- rerender();
9820
- }
9821
- (_a = options.onChange) == null ? void 0 : _a.call(options, instance2, sync);
9822
- }
9823
- };
9824
- const [instance] = React.useState(
9825
- () => new Virtualizer(resolvedOptions)
9826
- );
9827
- instance.setOptions(resolvedOptions);
9828
- useIsomorphicLayoutEffect(() => {
9829
- return instance._didMount();
9830
- }, []);
9831
- useIsomorphicLayoutEffect(() => {
9832
- return instance._willUpdate();
9833
- });
9834
- return instance;
9835
- }
9836
- function useVirtualizer(options) {
9837
- return useVirtualizerBase({
9838
- observeElementRect,
9839
- observeElementOffset,
9840
- scrollToFn: elementScroll,
9841
- ...options
9842
- });
9843
- }
9844
-
9845
- const styles = {
9846
- "year-selector": "_year-selector_1pxps_2",
9847
- "year-grid": "_year-grid_1pxps_9",
9848
- "year-item": "_year-item_1pxps_26",
9849
- "pseudo-focused": "_pseudo-focused_1pxps_29"
9850
- };
9851
-
9852
- const useYearSelectorKeys = ({
9853
- columns,
9854
- scrollToYear,
9855
- initialFocus,
9856
- onSelect,
9857
- onConfirm,
9858
- pseudoFocused,
9859
- setPseudoFocused,
9860
- min,
9861
- max,
9862
- disabled,
9863
- required
9864
- }) => {
9865
- const listRef = useRef(null);
9866
- useEffect(() => {
9867
- const list = listRef.current;
9868
- const handleKeyDown = (e) => {
9869
- if (pseudoFocused === null) return;
9870
- if ([
9871
- "ArrowLeft",
9872
- "ArrowRight",
9873
- "ArrowUp",
9874
- "ArrowDown",
9875
- "Home",
9876
- "PageUp",
9877
- "PageDown",
9878
- "Enter",
9879
- " ",
9880
- "Backspace",
9881
- "Delete"
9882
- ].includes(e.key)) {
9883
- e.preventDefault();
9884
- if (e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "ArrowUp" || e.key === "ArrowDown") {
9885
- const newYear = e.key === "ArrowLeft" || e.key === "ArrowUp" ? pseudoFocused - 1 : pseudoFocused + 1;
9886
- const clampedYear = Math.min(Math.max(newYear, min), max);
9887
- scrollToYear(newYear, { focus: true });
9888
- setPseudoFocused(newYear);
9889
- if (!disabled) {
9890
- onSelect(clampedYear);
9891
- }
9892
- return;
9893
- }
9894
- if (!required && (e.key === "Backspace" || e.key === "Delete")) {
9895
- onSelect(null);
9896
- return;
9897
- }
9898
- if (e.key === "PageUp" || e.key === "PageDown") {
9899
- const newYear = e.key === "PageUp" ? min : max;
9900
- scrollToYear(newYear, { focus: true });
9901
- setPseudoFocused(newYear);
9902
- if (!disabled) {
9903
- onSelect(newYear);
9904
- }
9905
- return;
9906
- }
9907
- if (e.key === "Home") {
9908
- scrollToYear(initialFocus, { focus: true });
9909
- setPseudoFocused(initialFocus);
9910
- if (!disabled) {
9911
- onSelect(initialFocus);
9912
- }
9913
- return;
9914
- }
9915
- if (e.key === "Enter" || e.key === " ") {
9916
- if (!disabled) {
9917
- onConfirm();
9918
- }
9919
- return;
9920
- }
9921
- }
9922
- };
9923
- list?.addEventListener("keydown", handleKeyDown);
9924
- return () => {
9925
- list?.removeEventListener("keydown", handleKeyDown);
9926
- };
9927
- }, [
9928
- pseudoFocused,
9929
- columns,
9930
- scrollToYear,
9931
- onSelect,
9932
- min,
9933
- max,
9934
- initialFocus,
9935
- disabled,
9936
- setPseudoFocused,
9937
- required,
9938
- onConfirm
9939
- ]);
9940
- return { listRef };
9941
- };
9942
-
9943
- const YearItem = ({
9944
- year,
9945
- onChange,
9946
- selected,
9947
- pseudoFocused,
9948
- disabled,
9949
- onFocus,
9950
- ...rest
9951
- }) => {
9952
- return /* @__PURE__ */ jsx(
9953
- SelectCard,
9954
- {
9955
- disabled,
9956
- id: year,
9957
- onChange: !disabled ? () => onChange(year) : () => {
9958
- },
9959
- checked: selected,
9960
- checkboxProps: {
9961
- tabIndex: -1,
9962
- onFocus
9963
- },
9964
- flexGrow: 1,
9965
- className: cx(styles["year-item"], {
9966
- [styles["pseudo-focused"]]: pseudoFocused
9967
- }),
9968
- "data-year": year,
9969
- tabIndex: -1,
9970
- ...rest,
9971
- children: year
9972
- }
9973
- );
9974
- };
9975
-
9976
- const DEFAULT_MIN = 1900;
9977
- const DEFAULT_MAX = 2200;
9978
- const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
9979
- const YearSelector = forwardRef(
9980
- ({
9981
- min = DEFAULT_MIN,
9982
- max = DEFAULT_MAX,
9983
- value: valueProp,
9984
- defaultValue: defaultValueProp,
9985
- onChange,
9986
- onConfirm,
9987
- startingYear = currentYear,
9988
- columns: columnsProp,
9989
- className,
9990
- required = false,
9991
- disabled = false,
9992
- ariaLabel = "Year selection",
9993
- rootProps
9994
- }, ref) => {
9995
- const columns = Math.max(columnsProp ?? 2, 1);
9996
- const [value, setValue] = useOptionallyControlledState({
9997
- controlledValue: valueProp,
9998
- defaultValue: defaultValueProp ?? null,
9999
- onChange
10000
- });
10001
- const previousValue = usePrevious(value);
10002
- const initialFocusYear = value ?? startingYear;
10003
- const [pseudoFocused, setPseudoFocused] = useState(initialFocusYear);
10004
- const handleChange = (year) => {
10005
- if (!required && value === year) {
10006
- setValue(null);
10007
- return;
10008
- }
10009
- setValue(year);
10010
- if (year !== null) {
10011
- setPseudoFocused(year);
10012
- }
10013
- };
10014
- const handleItemChange = (year) => {
10015
- handleChange(year);
10016
- onConfirm?.(year);
10017
- };
10018
- const gap = 12;
10019
- const rowHeight = 58;
10020
- const rowCount = Math.ceil((max - min + 1) / columns);
10021
- const initialOffset = (initialFocusYear - min) * (rowHeight + gap) / columns + gap / 2;
10022
- const rowVirtualizer = useVirtualizer({
10023
- count: rowCount,
10024
- getScrollElement: () => parentRef.current,
10025
- estimateSize: () => rowHeight,
10026
- gap,
10027
- initialOffset,
10028
- paddingEnd: gap / 2
10029
- });
10030
- const scrollToYear = useCallback(
10031
- (year, { focus } = {}) => {
10032
- const index = Math.floor((year - min) / columns);
10033
- rowVirtualizer.scrollToIndex(index, { align: "center" });
10034
- if (focus) {
10035
- setPseudoFocused(year);
10036
- }
10037
- },
10038
- [min, columns, rowVirtualizer, setPseudoFocused]
10039
- );
10040
- const parentRef = useRef(null);
10041
- const { listRef } = useYearSelectorKeys({
10042
- columns,
10043
- scrollToYear,
10044
- initialFocus: initialFocusYear,
10045
- onSelect: handleChange,
10046
- onConfirm: () => onConfirm?.(value),
10047
- min,
10048
- max,
10049
- disabled,
10050
- pseudoFocused,
10051
- setPseudoFocused,
10052
- required
10053
- });
10054
- useEffect(() => {
10055
- if (value !== null && previousValue !== value) {
10056
- scrollToYear(value, { focus: true });
10057
- }
10058
- }, [value, previousValue, scrollToYear, listRef]);
10059
- const jointRef = useMergeRefs([parentRef, listRef, ref]);
10060
- return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
10061
- "div",
10062
- {
10063
- ref: jointRef,
10064
- "aria-label": ariaLabel,
10065
- tabIndex: 0,
10066
- className: cx(styles["year-selector"], className),
10067
- role: "spinbutton",
10068
- "aria-valuenow": value ?? void 0,
10069
- "aria-valuemin": min,
10070
- "aria-valuemax": max,
10071
- "aria-valuetext": value ? `${value}` : "No year selected",
10072
- "data-test": rowVirtualizer.options.paddingEnd,
10073
- style: {
10074
- maxHeight: `${rowVirtualizer.getTotalSize() + 8}px`
10075
- },
10076
- ...rootProps,
10077
- children: /* @__PURE__ */ jsx(
10078
- "div",
10079
- {
10080
- style: {
10081
- height: `${rowVirtualizer.getTotalSize()}px`,
10082
- width: "100%",
10083
- position: "relative"
10084
- },
10085
- children: rowVirtualizer.getVirtualItems().map((virtualItem) => {
10086
- const years = Array.from(
10087
- { length: columns },
10088
- (_, i) => virtualItem.index * columns + i + min
10089
- );
10090
- return /* @__PURE__ */ jsx(
10091
- "div",
10092
- {
10093
- "data-testid": "v-row",
10094
- className: styles["year-grid"],
10095
- style: {
10096
- transform: `translateY(${virtualItem.start}px)`,
10097
- gridTemplateColumns: `repeat(${columns}, 1fr)`
10098
- },
10099
- children: years.map((year) => {
10100
- if (year > max) return /* @__PURE__ */ jsx("div", {}, year);
10101
- return /* @__PURE__ */ jsx(
10102
- YearItem,
10103
- {
10104
- disabled,
10105
- year,
10106
- onChange: handleItemChange,
10107
- selected: value === year,
10108
- pseudoFocused: pseudoFocused === year,
10109
- onFocus: () => {
10110
- listRef.current?.focus();
10111
- setPseudoFocused(year);
10112
- }
10113
- },
10114
- year
10115
- );
10116
- })
10117
- },
10118
- virtualItem.key
10119
- );
10120
- })
10121
- }
10122
- )
10123
- }
10124
- ) });
10125
- }
10126
- );
10127
- YearSelector.displayName = "YearSelector";
10128
-
10129
- const CalendarMonthSelection = forwardRef(({ onMonthSelection, ...props }, ref) => {
10130
- const { defaultTimeZone, maxDate, minDate, selectedMonth, selectedYear } = useCalendar();
10131
- const monthSelectionRef = useRef(null);
10132
- const combinedRef = useMergeRefs([ref, monthSelectionRef]);
10133
- const currentDate = useMemo(
10134
- () => DateTime.fromObject({ year: selectedYear, month: selectedMonth }).setZone(defaultTimeZone).startOf("day"),
10135
- [defaultTimeZone, selectedYear, selectedMonth]
10136
- );
10137
- const dates = useMemo(
10138
- () => Array.from({ length: 12 }, (_, i) => {
10139
- const date = DateTime.fromObject({
10140
- year: selectedYear,
10141
- month: 1
10142
- }).plus({
10143
- month: i
10144
- });
10145
- const disabled = minDate && date < minDate && !date.hasSame(minDate, "month") || maxDate && date > maxDate && !date.hasSame(maxDate, "month");
10146
- return {
10147
- month: date.month,
10148
- disabled: disabled ?? false
10149
- };
10150
- }),
10151
- [maxDate, minDate, selectedYear]
10152
- );
10153
- const classes = cx(styles$1["month-selection"], props.className);
10154
- const [focusedIndex, setFocusedIndex] = useState(selectedMonth - 1);
10155
- useEffect(() => {
10156
- if (minDate || maxDate) {
10157
- let index = dates.findIndex(({ month }) => month === selectedMonth);
10158
- while (dates[index].disabled && index < 11) {
10159
- index++;
10160
- }
10161
- setFocusedIndex(index);
10162
- } else {
10163
- setFocusedIndex(selectedMonth - 1);
10164
- }
10165
- }, [selectedMonth, minDate, maxDate, dates]);
10166
- const handleKeyDown = useCallback(
10167
- (e) => {
10168
- const target = e.target;
10169
- const cards = monthSelectionRef.current?.querySelectorAll(
10170
- "input[type='checkbox']"
10171
- );
10172
- if (!cards || cards.length === 0) {
10173
- return;
10174
- }
10175
- const cardArray = Array.from(cards);
10176
- const currentIndex = cardArray.indexOf(target);
10177
- if (currentIndex === -1) return;
10178
- const updateFocusedIndex = (index) => {
10179
- e.preventDefault();
10180
- cardArray[index].focus();
10181
- setFocusedIndex(index);
10182
- };
10183
- let newIndex;
10184
- switch (e.key) {
10185
- case "ArrowLeft":
10186
- newIndex = currentIndex > 0 ? currentIndex - 1 : 11;
10187
- while (dates[newIndex].disabled) {
10188
- newIndex = newIndex > 0 ? newIndex - 1 : 11;
10189
- }
10190
- updateFocusedIndex(newIndex);
10191
- break;
10192
- case "ArrowRight":
10193
- newIndex = currentIndex < 11 ? currentIndex + 1 : 0;
10194
- while (dates[newIndex].disabled) {
10195
- newIndex = newIndex < 11 ? newIndex + 1 : 0;
10196
- }
10197
- updateFocusedIndex(newIndex);
10198
- break;
10199
- case "ArrowUp":
10200
- if (currentIndex < 3) {
10201
- newIndex = currentIndex + 9;
10202
- } else {
10203
- newIndex = currentIndex - 3;
10204
- }
10205
- while (dates[newIndex].disabled) {
10206
- if (newIndex > 2) {
10207
- newIndex -= 3;
10208
- } else {
10209
- newIndex += 9;
10210
- }
10211
- }
10212
- updateFocusedIndex(newIndex);
10213
- break;
10214
- case "ArrowDown":
10215
- if (currentIndex > 8) {
10216
- newIndex = currentIndex - 9;
10217
- } else {
10218
- newIndex = currentIndex + 3;
10219
- }
10220
- while (dates[newIndex].disabled) {
10221
- if (newIndex < 9) {
10222
- newIndex += 3;
10223
- } else {
10224
- newIndex -= 9;
10225
- }
10226
- }
10227
- updateFocusedIndex(newIndex);
10228
- break;
10229
- case "Enter":
10230
- case " ":
10231
- e.preventDefault();
10232
- if (!dates[currentIndex].disabled) {
10233
- onMonthSelection(dates[currentIndex].month);
10234
- }
10235
- break;
10236
- }
10237
- },
10238
- [dates, onMonthSelection]
10239
- );
10240
- return /* @__PURE__ */ jsx(
10241
- "div",
10242
- {
10243
- ref: combinedRef,
10244
- "data-anv": "calendar-month-selection",
10245
- className: classes,
10246
- ...props,
10247
- children: /* @__PURE__ */ jsx("div", { role: "grid", "aria-label": "Calendar month selection", children: /* @__PURE__ */ jsx(
10248
- Grid,
10249
- {
10250
- templateColumns: "repeat(3, minmax(0, 1fr))",
10251
- gap: 3,
10252
- onKeyDown: handleKeyDown,
10253
- role: "row",
10254
- children: dates.map(({ month, disabled }, index) => /* @__PURE__ */ jsx("div", { role: "gridcell", children: /* @__PURE__ */ jsx(
10255
- SelectCard,
10256
- {
10257
- id: month.toString(),
10258
- disabled,
10259
- onChange: () => onMonthSelection(month),
10260
- checked: selectedMonth === month && selectedYear === currentDate.year,
10261
- checkboxProps: {
10262
- className: styles$1["selection-checkbox"],
10263
- tabIndex: focusedIndex === index ? 0 : -1
10264
- },
10265
- className: styles$1["selection-card"],
10266
- children: DateTime.fromObject({ month }).toFormat("MMMM")
10267
- }
10268
- ) }, month.toString()))
10269
- }
10270
- ) })
10271
- }
10272
- );
10273
- });
10274
- CalendarMonthSelection.displayName = "CalendarMonthSelection";
10275
-
10276
- const CalendarBetaPropsContext = createContext({});
10277
-
10278
- const useCalendarBetaProps = () => {
10279
- return useContext(CalendarBetaPropsContext);
10280
- };
10281
-
10282
- const toolbarFocusStates = ["month", "year", "next", "prev", "now"];
10283
- const CalendarElement = forwardRef(
10284
- (props, ref) => {
10285
- const uid = useId();
10286
- const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
10287
- const {
10288
- children,
10289
- focusedDate: focusProp,
10290
- defaultFocusedDate,
10291
- locale = Intl.DateTimeFormat().resolvedOptions().locale,
10292
- defaultTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone,
10293
- startDay = "Sunday",
10294
- minDate,
10295
- maxDate,
10296
- unavailable = {
10297
- dates: [],
10298
- daysOfWeek: []
10299
- },
10300
- id,
10301
- style,
10302
- value: iValue,
10303
- defaultValue: iDefaultValue,
10304
- onSelection,
10305
- range,
10306
- className,
10307
- _disableAutofocus,
10308
- _disableFocus,
10309
- ...remainingProps
10310
- } = componentProps;
10311
- const { dateMetadata, onMonthView } = useCalendarBetaProps();
10312
- const calendarRef = useRef(null);
10313
- const combinedRef = useMergeRefs([ref, calendarRef]);
10314
- const lastIValue = useRef(iValue);
10315
- const yearButtonRef = useRef(null);
10316
- const monthButtonRef = useRef(null);
10317
- const headerRef = useRef(null);
10318
- const [toolbarFocus, setToolbarFocus] = useState(toolbarFocusStates[0]);
10319
- const [calendarWidth, setCalendarWidth] = useState(
10320
- void 0
10321
- );
10322
- const [calendarSelectionState, setCalendarSelectionState] = useState("day");
10323
- const visibleHeaderButtons = useMemo(() => {
10324
- if (calendarSelectionState !== "day") {
10325
- return toolbarFocusStates.slice(0, 2);
10326
- }
10327
- return toolbarFocusStates;
10328
- }, [calendarSelectionState]);
10329
- useEffect(() => {
10330
- if (!calendarRef.current || style?.width != null) return;
10331
- const resizeObserver = new ResizeObserver((entries) => {
10332
- for (const entry of entries) {
10333
- const width = entry.contentRect.width;
10334
- if (calendarSelectionState === "day" && width > 100) {
10335
- setCalendarWidth(width);
10336
- }
10337
- }
10338
- });
10339
- resizeObserver.observe(calendarRef.current);
10340
- return () => {
10341
- resizeObserver.disconnect();
10342
- };
10343
- }, [calendarSelectionState, style?.width]);
10344
- const styleCombined = {
10345
- width: calendarWidth,
10346
- ...style,
10347
- ...layoutStyles
10348
- };
10349
- const classNameCombined = cx(styles$1["calendar"], className);
10350
- const { nDate, nDefaultDate, nToday } = useMemo(
10351
- () => ({
10352
- nDate: iValue ? typeof iValue === "string" ? normalizeDate(iValue, defaultTimeZone) : {
10353
- start: iValue.start ? normalizeDate(iValue.start, defaultTimeZone) : null,
10354
- end: iValue.end ? normalizeDate(iValue.end, defaultTimeZone) : null
10355
- } : null,
10356
- nDefaultDate: iDefaultValue ? typeof iDefaultValue === "string" ? normalizeDate(iDefaultValue, defaultTimeZone) : {
10357
- start: iDefaultValue.start ? normalizeDate(iDefaultValue.start, defaultTimeZone) : null,
10358
- end: iDefaultValue?.end ? normalizeDate(iDefaultValue.end, defaultTimeZone) : null
10359
- } : null,
10360
- nToday: typeof iValue === "string" ? normalizeDate(DateTime.now().toISO(), defaultTimeZone) : {
10361
- start: normalizeDate(DateTime.now().toISO(), defaultTimeZone),
10362
- end: normalizeDate(DateTime.now().toISO(), defaultTimeZone)
10363
- }
10364
- }),
10365
- [iValue, iDefaultValue, defaultTimeZone]
10366
- );
10367
- const [value, setValue] = useState(nDate ?? nDefaultDate ?? nToday);
10368
- const getInitialDate = useMemo(() => {
10369
- if (defaultFocusedDate) {
10370
- return normalizeDate(defaultFocusedDate, defaultTimeZone);
10371
- }
10372
- if (iDefaultValue) {
10373
- const date = typeof iDefaultValue === "string" ? normalizeDate(iDefaultValue, defaultTimeZone) : normalizeDate(
10374
- iDefaultValue.start ?? iDefaultValue.end ?? "",
10375
- defaultTimeZone
10376
- );
10377
- return date;
10378
- }
10379
- if (!DateTime.isDateTime(nDate) && !DateTime.isDateTime(nDefaultDate) && !DateTime.isDateTime(nToday)) {
10380
- return nDate?.start ?? nDefaultDate?.start ?? nToday?.start;
10381
- }
10382
- return nDate ?? nDefaultDate ?? nToday;
10383
- }, [
10384
- defaultFocusedDate,
10385
- iDefaultValue,
10386
- nDate,
10387
- nDefaultDate,
10388
- nToday,
10389
- defaultTimeZone
10390
- ]);
10391
- const initialDate = getInitialDate ?? DateTime.now();
10392
- const [focusedDate, setFocusedDate] = useState(initialDate);
10393
- const [hoveredDate, setHoveredDate] = useState();
10394
- const [selectedMonth, setSelectedMonth] = useState(
10395
- initialDate.month
10396
- );
10397
- const [selectedYear, setSelectedYear] = useState(
10398
- initialDate.year
10399
- );
10400
- const currentVisibleMonth = useMemo(() => {
10401
- return {
10402
- year: focusedDate?.year ?? selectedYear,
10403
- month: focusedDate?.month ?? selectedMonth
10404
- };
10405
- }, [focusedDate?.month, focusedDate?.year, selectedYear, selectedMonth]);
10406
- useEffect(
10407
- () => onMonthView?.(currentVisibleMonth),
10408
- // eslint-disable-next-line react-hooks/exhaustive-deps -- omit onMonthView from deps because we don't want to trigger infinite re-renders
10409
- [currentVisibleMonth]
10410
- );
10411
- useEffect(() => {
10412
- if (!focusProp && !defaultFocusedDate) return;
10413
- if (focusProp) {
10414
- setFocusedDate(normalizeDate(focusProp, defaultTimeZone));
10415
- } else if (defaultFocusedDate) {
10416
- setFocusedDate(normalizeDate(defaultFocusedDate, defaultTimeZone));
10417
- setSelectedMonth(
10418
- normalizeDate(defaultFocusedDate, defaultTimeZone).month
10419
- );
10420
- setSelectedYear(
10421
- normalizeDate(defaultFocusedDate, defaultTimeZone).year
10422
- );
10423
- }
10424
- }, [focusProp, defaultFocusedDate]);
10425
- useEffect(() => {
10426
- if (!iValue) {
10427
- lastIValue.current = iValue;
10428
- return;
10429
- }
10430
- if (typeof iValue === "string") {
10431
- setValue(normalizeDate(iValue, defaultTimeZone));
10432
- setFocusedDate(normalizeDate(iValue, defaultTimeZone));
10433
- } else if (iValue.end && (typeof lastIValue.current !== "object" || lastIValue?.current?.end !== iValue.end)) {
10434
- setValue({
10435
- start: iValue.start ? normalizeDate(iValue.start, defaultTimeZone) : null,
10436
- end: iValue.end ? normalizeDate(iValue.end, defaultTimeZone) : null
10437
- });
10438
- setFocusedDate(normalizeDate(iValue.end, defaultTimeZone));
10439
- } else if (iValue.start && (typeof lastIValue.current !== "object" || lastIValue?.current?.start !== iValue.start)) {
10440
- setFocusedDate(normalizeDate(iValue.start, defaultTimeZone));
10441
- }
10442
- lastIValue.current = iValue;
10443
- }, [iValue]);
10444
- const normalizedMinDate = useMemo(
10445
- () => minDate ? normalizeDate(minDate, defaultTimeZone) : null,
10446
- [minDate, defaultTimeZone]
10447
- );
10448
- const normalizedMaxDate = useMemo(
10449
- () => maxDate ? normalizeDate(maxDate, defaultTimeZone) : null,
10450
- [maxDate, defaultTimeZone]
10451
- );
10452
- const dateMetadataMap = useMemo(() => {
10453
- if (!dateMetadata) return void 0;
10454
- return new Map(dateMetadata.map((item) => [item.date, item.context]));
10455
- }, [dateMetadata]);
10456
- const providerValue = useMemo(() => {
10457
- const format = {
10458
- weekday: "long",
10459
- month: "long",
10460
- day: "2-digit",
10461
- year: "numeric"
10462
- };
10463
- return {
10464
- disableAutofocus: _disableAutofocus ?? false,
10465
- focusedDate,
10466
- setFocusedDate,
10467
- selectedMonth,
10468
- setSelectedMonth,
10469
- selectedYear,
10470
- setSelectedYear,
10471
- hoveredDate,
10472
- setHoveredDate,
10473
- value,
10474
- setValue,
10475
- defaultTimeZone,
10476
- id: id ?? uid,
10477
- onSelection,
10478
- controlled: !!iValue,
10479
- range,
10480
- minDate: normalizedMinDate,
10481
- maxDate: normalizedMaxDate,
10482
- unavailable: {
10483
- dates: new Set(unavailable.dates),
10484
- daysOfWeek: new Set(unavailable.daysOfWeek)
10485
- },
10486
- locale,
10487
- dateFormat: format,
10488
- startDay,
10489
- dateMetadata: dateMetadataMap
10490
- };
10491
- }, [
10492
- focusedDate,
10493
- selectedMonth,
10494
- selectedYear,
10495
- hoveredDate,
10496
- id,
10497
- locale,
10498
- normalizedMaxDate,
10499
- normalizedMinDate,
10500
- iValue,
10501
- onSelection,
10502
- range,
10503
- defaultTimeZone,
10504
- uid,
10505
- unavailable,
10506
- value,
10507
- startDay,
10508
- dateMetadataMap,
10509
- _disableAutofocus
10510
- ]);
10511
- const handleHeaderKeyDown = useCallback(
10512
- (e) => {
10513
- switch (e.key) {
10514
- case "ArrowLeft":
10515
- e.preventDefault();
10516
- setToolbarFocus((previousToolbarFocus) => {
10517
- const newToolbarFocus = previousToolbarFocus === visibleHeaderButtons[0] ? visibleHeaderButtons[visibleHeaderButtons.length - 1] : visibleHeaderButtons[visibleHeaderButtons.indexOf(previousToolbarFocus) - 1] ?? visibleHeaderButtons[visibleHeaderButtons.length - 1];
10518
- const button = headerRef.current?.querySelector(
10519
- `[data-calendar-header-button-name="${newToolbarFocus}"]`
10520
- );
10521
- if (button && "focus" in button && typeof button.focus === "function") {
10522
- button.focus();
10523
- }
10524
- return newToolbarFocus;
10525
- });
10526
- break;
10527
- case "ArrowRight":
10528
- e.preventDefault();
10529
- setToolbarFocus((previousToolbarFocus) => {
10530
- const newToolbarFocus = previousToolbarFocus === visibleHeaderButtons[visibleHeaderButtons.length - 1] ? visibleHeaderButtons[0] : visibleHeaderButtons[visibleHeaderButtons.indexOf(previousToolbarFocus) + 1] ?? visibleHeaderButtons[0];
10531
- const button = headerRef.current?.querySelector(
10532
- `[data-calendar-header-button-name="${newToolbarFocus}"]`
10533
- );
10534
- if (button && "focus" in button && typeof button.focus === "function") {
10535
- button.focus();
10536
- }
10537
- return newToolbarFocus;
10538
- });
10539
- }
10540
- },
10541
- [visibleHeaderButtons]
10542
- );
10543
- const handleMonthSelection = useCallback(
10544
- (month) => {
10545
- monthButtonRef.current?.focus();
10546
- setToolbarFocus(toolbarFocusStates[0]);
10547
- setSelectedMonth(month);
10548
- setFocusedDate(
10549
- DateTime.fromObject({
10550
- year: focusedDate?.year ?? 1,
10551
- month,
10552
- day: 1
10553
- }).setZone(defaultTimeZone).startOf("day")
10554
- );
10555
- setCalendarSelectionState("day");
10556
- },
10557
- // eslint-disable-next-line react-hooks/exhaustive-deps
10558
- [focusedDate]
10559
- );
10560
- const handleYearSelection = useCallback(
10561
- (year) => {
10562
- if (year === null) return;
10563
- yearButtonRef.current?.focus();
10564
- setToolbarFocus(toolbarFocusStates[1]);
10565
- setSelectedYear(year);
10566
- setFocusedDate(
10567
- DateTime.fromObject({
10568
- year,
10569
- month: focusedDate?.month ?? 1,
10570
- day: 1
10571
- }).setZone(defaultTimeZone).startOf("day")
10572
- );
10573
- setCalendarSelectionState("day");
10574
- },
10575
- // eslint-disable-next-line react-hooks/exhaustive-deps
10576
- [focusedDate?.month]
10577
- );
10578
- return /* @__PURE__ */ jsx(CalendarContext.Provider, { value: providerValue, children: /* @__PURE__ */ jsxs(
10579
- "div",
10580
- {
10581
- ref: combinedRef,
10582
- id: id ?? uid,
10583
- style: styleCombined,
10584
- className: classNameCombined,
10585
- "data-anv": "calendar",
10586
- ...remainingProps,
10587
- children: [
10588
- /* @__PURE__ */ jsx("div", { className: styles$1["header"], children: /* @__PURE__ */ jsxs(
10589
- "span",
10590
- {
10591
- ref: headerRef,
10592
- "aria-label": "Calendar navigation",
10593
- role: "toolbar",
10594
- onKeyDown: handleHeaderKeyDown,
10595
- className: styles$1["controller"],
10596
- children: [
10597
- /* @__PURE__ */ jsx(
10598
- CalendarMonthButton,
10599
- {
10600
- ref: monthButtonRef,
10601
- tabIndex: _disableFocus ? -1 : toolbarFocus === toolbarFocusStates[0] ? 0 : -1,
10602
- "data-calendar-header-button": true,
10603
- "data-calendar-header-button-name": toolbarFocusStates[0],
10604
- calendarSelectionState,
10605
- onClick: () => {
10606
- setCalendarSelectionState(
10607
- (prev) => prev === "month" ? "day" : "month"
10608
- );
10609
- setToolbarFocus(toolbarFocusStates[0]);
10610
- }
10611
- }
10612
- ),
10613
- /* @__PURE__ */ jsx(
10614
- CalendarYearButton,
10615
- {
10616
- ref: yearButtonRef,
10617
- tabIndex: _disableFocus ? -1 : toolbarFocus === toolbarFocusStates[1] ? 0 : -1,
10618
- "data-calendar-header-button": true,
10619
- "data-calendar-header-button-name": toolbarFocusStates[1],
10620
- calendarSelectionState,
10621
- onClick: () => {
10622
- setCalendarSelectionState(
10623
- (prev) => prev === "year" ? "day" : "year"
10624
- );
10625
- setToolbarFocus(toolbarFocusStates[1]);
10626
- }
10627
- }
10628
- ),
10629
- calendarSelectionState === "day" && /* @__PURE__ */ jsxs(Fragment, { children: [
10630
- /* @__PURE__ */ jsx(
10631
- CalendarPrev,
10632
- {
10633
- tabIndex: _disableFocus ? -1 : toolbarFocus === toolbarFocusStates[2] ? 0 : -1,
10634
- "data-calendar-header-button": true,
10635
- "data-calendar-header-button-name": toolbarFocusStates[2],
10636
- onClick: () => setToolbarFocus(toolbarFocusStates[2])
10637
- }
10638
- ),
10639
- /* @__PURE__ */ jsx(
10640
- CalendarNext,
10641
- {
10642
- tabIndex: _disableFocus ? -1 : toolbarFocus === toolbarFocusStates[3] ? 0 : -1,
10643
- "data-calendar-header-button": true,
10644
- "data-calendar-header-button-name": toolbarFocusStates[3],
10645
- onClick: () => setToolbarFocus(toolbarFocusStates[3])
10646
- }
10647
- ),
10648
- /* @__PURE__ */ jsx(
10649
- CalendarNow,
10650
- {
10651
- tabIndex: _disableFocus ? -1 : toolbarFocus === toolbarFocusStates[4] ? 0 : -1,
10652
- "data-calendar-header-button": true,
10653
- "data-calendar-header-button-name": toolbarFocusStates[4],
10654
- onClickFixed: () => setToolbarFocus(toolbarFocusStates[4])
10655
- }
10656
- )
10657
- ] })
10658
- ]
10659
- }
10660
- ) }),
10661
- calendarSelectionState === "day" && /* @__PURE__ */ jsx(CalendarMonth, {}),
10662
- calendarSelectionState === "month" && /* @__PURE__ */ jsx(CalendarMonthSelection, { onMonthSelection: handleMonthSelection }),
10663
- calendarSelectionState === "year" && // Wrapper div provides some manual offsetting to account for internal padding of the year selector
10664
- /* @__PURE__ */ jsx("div", { className: styles$1["year-selector"], children: /* @__PURE__ */ jsx(
10665
- YearSelector,
10666
- {
10667
- onConfirm: handleYearSelection,
10668
- required: true,
10669
- defaultValue: selectedYear,
10670
- min: normalizedMinDate?.year,
10671
- max: normalizedMaxDate?.year
10672
- }
10673
- ) })
10674
- ]
10675
- }
10676
- ) });
10677
- }
10678
- );
10679
- CalendarElement.displayName = "Calendar";
10680
- const Calendar = Object.assign(CalendarElement, {
10681
- /**
10682
- * Calendar.Now component for navigating to today's date.
10683
- *
10684
- * Features:
10685
- * - Quick navigation to current date
10686
- * - Accessible button with proper ARIA labels
10687
- * - Integrates with calendar context
10688
- * - Data tracking integration for analytics
10689
- *
10690
- * @example
10691
- * <Calendar.Now />
10692
- */
10693
- Now: CalendarNow,
10694
- /**
10695
- * Calendar.Month component for displaying the month grid.
10696
- *
10697
- * Features:
10698
- * - Displays calendar days in a table format
10699
- * - Handles day selection and navigation
10700
- * - Supports range selection mode
10701
- * - Accessible with proper ARIA attributes
10702
- * - Data tracking integration for analytics
10703
- *
10704
- * @example
10705
- * <Calendar.Month />
10706
- */
10707
- Month: CalendarMonth,
10708
- /**
10709
- * Calendar.Next component for navigating to the next month.
10710
- *
10711
- * Features:
10712
- * - Navigation to next month
10713
- * - Accessible button with proper ARIA labels
10714
- * - Integrates with calendar context
10715
- * - Data tracking integration for analytics
10716
- *
10717
- * @example
10718
- * <Calendar.Next />
10719
- */
10720
- Next: CalendarNext,
10721
- /**
10722
- * Calendar.Prev component for navigating to the previous month.
10723
- *
10724
- * Features:
10725
- * - Navigation to previous month
10726
- * - Accessible button with proper ARIA labels
10727
- * - Integrates with calendar context
10728
- * - Data tracking integration for analytics
10729
- *
10730
- * @example
10731
- * <Calendar.Prev />
10732
- */
10733
- Prev: CalendarPrev,
10734
- /**
10735
- * Calendar.MonthButton component for switching to month selection view.
10736
- *
10737
- * Features:
10738
- * - Switches calendar to month selection mode
10739
- * - Accessible button with proper ARIA labels
10740
- * - Integrates with calendar context
10741
- * - Data tracking integration for analytics
10742
- *
10743
- * @example
10744
- * <Calendar.MonthButton />
10745
- */
10746
- MonthButton: CalendarMonthButton,
10747
- /**
10748
- * Calendar.YearButton component for switching to year selection view.
10749
- *
10750
- * Features:
10751
- * - Switches calendar to year selection mode
10752
- * - Accessible button with proper ARIA labels
10753
- * - Integrates with calendar context
10754
- * - Data tracking integration for analytics
10755
- *
10756
- * @example
10757
- * <Calendar.YearButton />
10758
- */
10759
- YearButton: CalendarYearButton
10760
- });
10761
-
10762
- export { CalendarBetaPropsContext as C, DateTime as D, Calendar as a, CalendarNow as b, CalendarYearButton as c, CalendarPrev as d, CalendarNext as e, CalendarMonthButton as f, CalendarMonth as g, useCalendarBetaProps as u };
10763
- //# sourceMappingURL=Calendar-BEwWBsCE.js.map
8130
+ export { DateTime as D, Info as I };
8131
+ //# sourceMappingURL=luxon-wpz4A-OQ.js.map