@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.
- package/CHANGELOG.md +120 -68
- package/dist/Calendar-BFWJ7Rlq.js +2635 -0
- package/dist/Calendar-BFWJ7Rlq.js.map +1 -0
- package/dist/{Calendar-D4abBZAq.js → Calendar-BO9QiBJG.js} +2 -2
- package/dist/{Calendar-D4abBZAq.js.map → Calendar-BO9QiBJG.js.map} +1 -1
- package/dist/Calendar.js +2 -2
- package/dist/{Combobox-CeADQxTl.js → Combobox-OUK7p5gp.js} +34 -24
- package/dist/Combobox-OUK7p5gp.js.map +1 -0
- package/dist/Combobox.js +1 -1
- package/dist/{DataTable-CVtDYMKC.js → DataTable-BPJeSvOx.js} +1956 -1324
- package/dist/DataTable-BPJeSvOx.js.map +1 -0
- package/dist/DataTable.css +82 -80
- package/dist/{DateFieldRange-BfdBwpwc.js → DateFieldRange-CanMYRgZ.js} +6 -5
- package/dist/{DateFieldRange-BfdBwpwc.js.map → DateFieldRange-CanMYRgZ.js.map} +1 -1
- package/dist/DateFieldRange.js +1 -1
- package/dist/{DateFieldSingle-CVxnfM5x.js → DateFieldSingle-CShe2aHZ.js} +6 -5
- package/dist/{DateFieldSingle-CVxnfM5x.js.map → DateFieldSingle-CShe2aHZ.js.map} +1 -1
- package/dist/DateFieldSingle.js +1 -1
- package/dist/{DateFieldYearless-CgOOwwTc.js → DateFieldYearless-MBQ233Xa.js} +2 -2
- package/dist/{DateFieldYearless-CgOOwwTc.js.map → DateFieldYearless-MBQ233Xa.js.map} +1 -1
- package/dist/DateFieldYearless.js +1 -1
- package/dist/{DateFieldYearlessRange-D8dQk2WI.js → DateFieldYearlessRange-BBtaFzsE.js} +2 -2
- package/dist/{DateFieldYearlessRange-D8dQk2WI.js.map → DateFieldYearlessRange-BBtaFzsE.js.map} +1 -1
- package/dist/DateFieldYearlessRange.js +1 -1
- package/dist/{ListView-CBmaHOY-.js → ListView-CRDUPrbQ.js} +11 -9
- package/dist/ListView-CRDUPrbQ.js.map +1 -0
- package/dist/ListView.js +1 -1
- package/dist/{Menu-d3w2bIdB.js → Menu-Dh0q__vE.js} +7 -5
- package/dist/Menu-Dh0q__vE.js.map +1 -0
- package/dist/Menu.js +1 -1
- package/dist/{NumberField-r0fRpYa0.js → NumberField-Dmm1YQNn.js} +221 -7
- package/dist/NumberField-Dmm1YQNn.js.map +1 -0
- package/dist/NumberField.js +1 -1
- package/dist/{Page-DR5k0MAR.js → Page-C5nExhiH.js} +117 -13
- package/dist/Page-C5nExhiH.js.map +1 -0
- package/dist/Page.js +1 -1
- package/dist/{Pagination-XPZ5UeBs.js → Pagination-CimQTC7M.js} +3 -3
- package/dist/{Pagination-XPZ5UeBs.js.map → Pagination-CimQTC7M.js.map} +1 -1
- package/dist/Pagination.css +2 -1
- package/dist/Pagination.js +1 -1
- package/dist/{Popover-U2Eu7v1Q.js → Popover-CJLSDpgR.js} +9 -8
- package/dist/Popover-CJLSDpgR.js.map +1 -0
- package/dist/Popover.js +1 -1
- package/dist/Table.js +1 -1
- package/dist/{TimeField-BX9PovdE.js → TimeField-BeaCSkdZ.js} +3 -3
- package/dist/{TimeField-BX9PovdE.js.map → TimeField-BeaCSkdZ.js.map} +1 -1
- package/dist/TimeField.js +1 -1
- package/dist/{Toolbar-BWqguBF1.js → Toolbar-Cjo7eAhI.js} +8 -8
- package/dist/{Toolbar-BWqguBF1.js.map → Toolbar-Cjo7eAhI.js.map} +1 -1
- package/dist/Toolbar.js +1 -1
- package/dist/{YearlessDateInputWithPicker-uG9QMemw.js → YearlessDateInputWithPicker-BVRZlf9Y.js} +3 -3
- package/dist/{YearlessDateInputWithPicker-uG9QMemw.js.map → YearlessDateInputWithPicker-BVRZlf9Y.js.map} +1 -1
- package/dist/beta/components/Table/DataTable/DataTable.d.ts +8 -10
- package/dist/beta/components/Table/DataTable/DataTable.test-data.d.ts +2 -0
- package/dist/beta/components/Table/DataTable/internal/DataTableBody.d.ts +6 -1
- package/dist/beta/components/Table/DataTable/internal/DataTableBodyRow.d.ts +9 -0
- package/dist/beta/components/Table/DataTable/internal/DataTablePagination.d.ts +1 -1
- package/dist/beta/components/Table/DataTable/internal/cells/CellError.d.ts +10 -0
- package/dist/beta/components/Table/DataTable/internal/cells/CellFocusContext.d.ts +16 -0
- package/dist/beta/components/Table/DataTable/internal/cells/DataTableBodyCell.d.ts +19 -37
- package/dist/beta/components/Table/DataTable/internal/cells/DataTableBodyImmutableCell.d.ts +32 -0
- package/dist/beta/components/Table/DataTable/internal/cells/DataTableBodyMutableCell.d.ts +33 -0
- package/dist/beta/components/Table/DataTable/internal/cells/DataTableFooterCell.d.ts +2 -0
- package/dist/beta/components/Table/DataTable/internal/cells/DataTableHeaderCell.d.ts +1 -0
- package/dist/beta/components/Table/DataTable/internal/constants.d.ts +13 -0
- package/dist/beta/components/Table/DataTable/internal/context/focus/DTFocusContext.d.ts +57 -0
- package/dist/beta/components/Table/DataTable/internal/context/focus/DTFocusProvider.d.ts +9 -0
- package/dist/beta/components/Table/DataTable/internal/context/focus/useDTFocusDispatchContext.d.ts +11 -0
- package/dist/beta/components/Table/DataTable/internal/context/focus/useDTFocusStateContext.d.ts +1 -0
- package/dist/beta/components/Table/DataTable/internal/context/hover/DTHoverContext.d.ts +31 -0
- package/dist/beta/components/Table/DataTable/internal/context/hover/DTHoverProvider.d.ts +3 -0
- package/dist/beta/components/Table/DataTable/internal/context/hover/useDTHoverDispatchContext.d.ts +1 -0
- package/dist/beta/components/Table/DataTable/internal/context/hover/useDTHoverStateContext.d.ts +4 -0
- package/dist/beta/components/Table/DataTable/internal/editable-cells/DataTableEditableMultiselectCell.d.ts +19 -23
- package/dist/beta/components/Table/DataTable/internal/editable-cells/DataTableEditableSelectCell.d.ts +6 -25
- package/dist/beta/components/Table/DataTable/internal/editable-cells/DataTableEditableTextCell.d.ts +7 -17
- package/dist/beta/components/Table/DataTable/internal/editable-cells/types.d.ts +29 -37
- package/dist/beta/components/Table/DataTable/internal/util/cellPositionHelpers.d.ts +6 -0
- package/dist/beta/components/Table/DataTable/internal/util/cellTypeHelpers.d.ts +42 -0
- package/dist/beta/components/Table/{internal → DataTable/internal/util}/getTanStackColumnDef.d.ts +14 -6
- package/dist/beta/components/Table/DataTable/stories/DataTable.story-data.d.ts +4 -2
- package/dist/beta/components/Table/DataTable/types.d.ts +21 -0
- package/dist/beta/components/Table/base/TableContainer.d.ts +3 -14
- package/dist/beta/components/Table/createColumnHelper.d.ts +119 -13
- package/dist/beta/components/Table/formatters/booleanFormatter.d.ts +22 -0
- package/dist/beta/components/Table/formatters/currencyFormatter.d.ts +2 -2
- package/dist/beta/components/Table/formatters/dateFormatter.d.ts +34 -0
- package/dist/beta/components/Table/formatters/dateTimeFormatter.d.ts +66 -0
- package/dist/beta/components/Table/formatters/index.d.ts +7 -0
- package/dist/beta/components/Table/formatters/numberFormatter.d.ts +42 -0
- package/dist/beta/components/Table/formatters/percentFormatter.d.ts +1 -1
- package/dist/beta/components/Table/formatters/presets.d.ts +16 -0
- package/dist/beta/components/Table/formatters/timeFormatter.d.ts +28 -0
- package/dist/beta/components/Table/formatters/yearlessDateFormatter.d.ts +32 -0
- package/dist/beta/components/Table/internal/ResizeHandle.d.ts +2 -1
- package/dist/beta/components/Table/internal/getCommonPinningStyles.d.ts +1 -0
- package/dist/beta/components/Table/internal/scrollCellIntoView.d.ts +13 -0
- package/dist/beta/components/Table/internal/types.d.ts +13 -0
- package/dist/beta/components/Table/types.d.ts +52 -8
- package/dist/beta.js +4 -4
- package/dist/components/DateFieldRange/internal/MaskedDateRangeInput.d.ts +1 -1
- package/dist/components/DateFieldSingle/internal/MaskedDateInput.d.ts +1 -1
- package/dist/components/Page/Page.d.ts +9 -2
- package/dist/components/Page/PageHeader.d.ts +13 -4
- package/dist/components/Popover/internal/PopoverContext.d.ts +0 -1
- package/dist/components/Popover/internal/usePopoverContext.d.ts +0 -1
- package/dist/components/SearchField/SearchField.d.ts +1 -1
- package/dist/edit-DQOiktcu.js +6 -0
- package/dist/edit-DQOiktcu.js.map +1 -0
- package/dist/{index.esm-C2ZhC_8d.js → index.esm-BMOZFPwN.js} +2 -2
- package/dist/{index.esm-C2ZhC_8d.js.map → index.esm-BMOZFPwN.js.map} +1 -1
- package/dist/index.js +13 -13
- package/dist/internal/hooks/useNumberField/internal/createNumberMaskOptions.d.ts +10 -0
- package/dist/internal/hooks/useNumberField/internal/createTrailingDecimalHandlers.d.ts +13 -0
- package/dist/internal/hooks/useNumberField/internal/createTrailingZerosHandlers.d.ts +16 -0
- package/dist/internal/hooks/useNumberField/internal/numberMaskUtils.d.ts +9 -0
- package/dist/{Calendar-BEwWBsCE.js → luxon-wpz4A-OQ.js} +3 -2635
- package/dist/luxon-wpz4A-OQ.js.map +1 -0
- package/dist/{utils-CcMJa47q.js → utils-Cj6v6CZ-.js} +2 -2
- package/dist/{utils-CcMJa47q.js.map → utils-Cj6v6CZ-.js.map} +1 -1
- package/package.json +1 -1
- package/dist/Calendar-BEwWBsCE.js.map +0 -1
- package/dist/Combobox-CeADQxTl.js.map +0 -1
- package/dist/DataTable-CVtDYMKC.js.map +0 -1
- package/dist/ListView-CBmaHOY-.js.map +0 -1
- package/dist/Menu-d3w2bIdB.js.map +0 -1
- package/dist/NumberField-r0fRpYa0.js.map +0 -1
- package/dist/Page-DR5k0MAR.js.map +0 -1
- package/dist/Popover-U2Eu7v1Q.js.map +0 -1
- package/dist/beta/components/Table/DataTable/internal/DataTableContainer.d.ts +0 -7
- package/dist/beta/components/Table/DataTable/internal/DataTableContext.d.ts +0 -25
- package/dist/beta/components/Table/DataTable/internal/DataTableContextProvider.d.ts +0 -28
- package/dist/beta/components/Table/DataTable/internal/editable-cells/useEditCell.d.ts +0 -11
- package/dist/beta/components/Table/DataTable/internal/useDataTableContext.d.ts +0 -4
- package/dist/beta/components/Table/internal/focus-management/types.d.ts +0 -34
- package/dist/beta/components/Table/internal/focus-management/useFocusManagement.d.ts +0 -27
- package/dist/beta/components/Table/internal/focus-management/useHandleKeyDown.d.ts +0 -36
- package/dist/beta/components/Table/internal/focus-management/useScrollIntoView.d.ts +0 -9
- /package/dist/beta/components/Table/{internal/focus-management → DataTable/internal}/useColumnOrder.d.ts +0 -0
|
@@ -1,22 +1,4 @@
|
|
|
1
|
-
|
|
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
|
-
|
|
8149
|
-
|
|
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
|