@salt-ds/lab 1.0.0-alpha.55 → 1.0.0-alpha.57
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 +167 -0
- package/css/salt-lab.css +44 -7
- package/dist-cjs/calendar/Calendar.js +12 -12
- package/dist-cjs/calendar/Calendar.js.map +1 -1
- package/dist-cjs/calendar/CalendarGrid.css.js +6 -0
- package/dist-cjs/calendar/CalendarGrid.css.js.map +1 -0
- package/dist-cjs/calendar/CalendarGrid.js +107 -0
- package/dist-cjs/calendar/CalendarGrid.js.map +1 -0
- package/dist-cjs/calendar/CalendarNavigation.js +219 -201
- package/dist-cjs/calendar/CalendarNavigation.js.map +1 -1
- package/dist-cjs/calendar/CalendarWeekHeader.js +10 -4
- package/dist-cjs/calendar/CalendarWeekHeader.js.map +1 -1
- package/dist-cjs/calendar/internal/CalendarContext.js +6 -2
- package/dist-cjs/calendar/internal/CalendarContext.js.map +1 -1
- package/dist-cjs/calendar/internal/CalendarDay.js +6 -9
- package/dist-cjs/calendar/internal/CalendarDay.js.map +1 -1
- package/dist-cjs/calendar/internal/CalendarMonth.css.js +1 -1
- package/dist-cjs/calendar/internal/CalendarMonth.js +47 -54
- package/dist-cjs/calendar/internal/CalendarMonth.js.map +1 -1
- package/dist-cjs/calendar/internal/useFocusManagement.js +18 -18
- package/dist-cjs/calendar/internal/useFocusManagement.js.map +1 -1
- package/dist-cjs/calendar/internal/utils.js +33 -48
- package/dist-cjs/calendar/internal/utils.js.map +1 -1
- package/dist-cjs/calendar/useCalendar.js +46 -38
- package/dist-cjs/calendar/useCalendar.js.map +1 -1
- package/dist-cjs/calendar/useCalendarDay.js +15 -21
- package/dist-cjs/calendar/useCalendarDay.js.map +1 -1
- package/dist-cjs/calendar/useCalendarSelection.js +44 -35
- package/dist-cjs/calendar/useCalendarSelection.js.map +1 -1
- package/dist-cjs/date-input/DateInput.css.js +1 -1
- package/dist-cjs/date-input/DateInputRange.js +102 -107
- package/dist-cjs/date-input/DateInputRange.js.map +1 -1
- package/dist-cjs/date-input/DateInputSingle.js +39 -51
- package/dist-cjs/date-input/DateInputSingle.js.map +1 -1
- package/dist-cjs/date-picker/DatePicker.js +15 -13
- package/dist-cjs/date-picker/DatePicker.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerActions.js +3 -8
- package/dist-cjs/date-picker/DatePickerActions.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerContext.js +6 -2
- package/dist-cjs/date-picker/DatePickerContext.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerOverlay.js +1 -0
- package/dist-cjs/date-picker/DatePickerOverlay.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerOverlayProvider.js +21 -8
- package/dist-cjs/date-picker/DatePickerOverlayProvider.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerRangeInput.js +77 -28
- package/dist-cjs/date-picker/DatePickerRangeInput.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerRangePanel.js +45 -40
- package/dist-cjs/date-picker/DatePickerRangePanel.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerSingleInput.js +123 -84
- package/dist-cjs/date-picker/DatePickerSingleInput.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerSinglePanel.js +17 -20
- package/dist-cjs/date-picker/DatePickerSinglePanel.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerTrigger.js +32 -0
- package/dist-cjs/date-picker/DatePickerTrigger.js.map +1 -0
- package/dist-cjs/date-picker/useDatePicker.js +60 -110
- package/dist-cjs/date-picker/useDatePicker.js.map +1 -1
- package/dist-cjs/dropdown/DropdownButton.js.map +1 -1
- package/dist-cjs/index.js +19 -20
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/localization-provider/LocalizationProvider.js +48 -0
- package/dist-cjs/localization-provider/LocalizationProvider.js.map +1 -0
- package/dist-cjs/overlay/OverlayHeader.css.js +6 -0
- package/dist-cjs/overlay/OverlayHeader.css.js.map +1 -0
- package/dist-cjs/overlay/OverlayHeader.js +35 -0
- package/dist-cjs/overlay/OverlayHeader.js.map +1 -0
- package/dist-cjs/system-status/SystemStatus.css.js +1 -1
- package/dist-cjs/tabs-next/TabListNext.css.js +1 -1
- package/dist-cjs/tabs-next/TabListNext.js +4 -0
- package/dist-cjs/tabs-next/TabListNext.js.map +1 -1
- package/dist-es/calendar/Calendar.js +12 -12
- package/dist-es/calendar/Calendar.js.map +1 -1
- package/dist-es/calendar/CalendarGrid.css.js +4 -0
- package/dist-es/calendar/CalendarGrid.css.js.map +1 -0
- package/dist-es/calendar/CalendarGrid.js +105 -0
- package/dist-es/calendar/CalendarGrid.js.map +1 -0
- package/dist-es/calendar/CalendarNavigation.js +220 -202
- package/dist-es/calendar/CalendarNavigation.js.map +1 -1
- package/dist-es/calendar/CalendarWeekHeader.js +11 -5
- package/dist-es/calendar/CalendarWeekHeader.js.map +1 -1
- package/dist-es/calendar/internal/CalendarContext.js +6 -2
- package/dist-es/calendar/internal/CalendarContext.js.map +1 -1
- package/dist-es/calendar/internal/CalendarDay.js +6 -9
- package/dist-es/calendar/internal/CalendarDay.js.map +1 -1
- package/dist-es/calendar/internal/CalendarMonth.css.js +1 -1
- package/dist-es/calendar/internal/CalendarMonth.js +48 -55
- package/dist-es/calendar/internal/CalendarMonth.js.map +1 -1
- package/dist-es/calendar/internal/useFocusManagement.js +15 -15
- package/dist-es/calendar/internal/useFocusManagement.js.map +1 -1
- package/dist-es/calendar/internal/utils.js +32 -45
- package/dist-es/calendar/internal/utils.js.map +1 -1
- package/dist-es/calendar/useCalendar.js +40 -32
- package/dist-es/calendar/useCalendar.js.map +1 -1
- package/dist-es/calendar/useCalendarDay.js +11 -17
- package/dist-es/calendar/useCalendarDay.js.map +1 -1
- package/dist-es/calendar/useCalendarSelection.js +40 -29
- package/dist-es/calendar/useCalendarSelection.js.map +1 -1
- package/dist-es/date-input/DateInput.css.js +1 -1
- package/dist-es/date-input/DateInputRange.js +101 -107
- package/dist-es/date-input/DateInputRange.js.map +1 -1
- package/dist-es/date-input/DateInputSingle.js +39 -51
- package/dist-es/date-input/DateInputSingle.js.map +1 -1
- package/dist-es/date-picker/DatePicker.js +15 -13
- package/dist-es/date-picker/DatePicker.js.map +1 -1
- package/dist-es/date-picker/DatePickerActions.js +3 -8
- package/dist-es/date-picker/DatePickerActions.js.map +1 -1
- package/dist-es/date-picker/DatePickerContext.js +6 -2
- package/dist-es/date-picker/DatePickerContext.js.map +1 -1
- package/dist-es/date-picker/DatePickerOverlay.js +1 -0
- package/dist-es/date-picker/DatePickerOverlay.js.map +1 -1
- package/dist-es/date-picker/DatePickerOverlayProvider.js +21 -8
- package/dist-es/date-picker/DatePickerOverlayProvider.js.map +1 -1
- package/dist-es/date-picker/DatePickerRangeInput.js +78 -30
- package/dist-es/date-picker/DatePickerRangeInput.js.map +1 -1
- package/dist-es/date-picker/DatePickerRangePanel.js +44 -39
- package/dist-es/date-picker/DatePickerRangePanel.js.map +1 -1
- package/dist-es/date-picker/DatePickerSingleInput.js +124 -85
- package/dist-es/date-picker/DatePickerSingleInput.js.map +1 -1
- package/dist-es/date-picker/DatePickerSinglePanel.js +17 -20
- package/dist-es/date-picker/DatePickerSinglePanel.js.map +1 -1
- package/dist-es/date-picker/DatePickerTrigger.js +30 -0
- package/dist-es/date-picker/DatePickerTrigger.js.map +1 -0
- package/dist-es/date-picker/useDatePicker.js +61 -111
- package/dist-es/date-picker/useDatePicker.js.map +1 -1
- package/dist-es/dropdown/DropdownButton.js.map +1 -1
- package/dist-es/index.js +8 -7
- package/dist-es/index.js.map +1 -1
- package/dist-es/localization-provider/LocalizationProvider.js +44 -0
- package/dist-es/localization-provider/LocalizationProvider.js.map +1 -0
- package/dist-es/overlay/OverlayHeader.css.js +4 -0
- package/dist-es/overlay/OverlayHeader.css.js.map +1 -0
- package/dist-es/overlay/OverlayHeader.js +33 -0
- package/dist-es/overlay/OverlayHeader.js.map +1 -0
- package/dist-es/system-status/SystemStatus.css.js +1 -1
- package/dist-es/tabs-next/TabListNext.css.js +1 -1
- package/dist-es/tabs-next/TabListNext.js +5 -1
- package/dist-es/tabs-next/TabListNext.js.map +1 -1
- package/dist-types/calendar/Calendar.d.ts +11 -6
- package/dist-types/calendar/CalendarGrid.d.ts +13 -0
- package/dist-types/calendar/CalendarNavigation.d.ts +9 -11
- package/dist-types/calendar/CalendarWeekHeader.d.ts +4 -3
- package/dist-types/calendar/index.d.ts +1 -2
- package/dist-types/calendar/internal/CalendarContext.d.ts +5 -6
- package/dist-types/calendar/internal/CalendarDay.d.ts +6 -8
- package/dist-types/calendar/internal/CalendarMonth.d.ts +5 -6
- package/dist-types/calendar/internal/useFocusManagement.d.ts +3 -4
- package/dist-types/calendar/internal/utils.d.ts +7 -11
- package/dist-types/calendar/useCalendar.d.ts +207 -55
- package/dist-types/calendar/useCalendarDay.d.ts +5 -7
- package/dist-types/calendar/useCalendarSelection.d.ts +92 -58
- package/dist-types/date-input/DateInputRange.d.ts +38 -56
- package/dist-types/date-input/DateInputSingle.d.ts +32 -49
- package/dist-types/date-input/index.d.ts +0 -1
- package/dist-types/date-picker/DatePicker.d.ts +23 -5
- package/dist-types/date-picker/DatePickerActions.d.ts +13 -12
- package/dist-types/date-picker/DatePickerContext.d.ts +42 -59
- package/dist-types/date-picker/DatePickerOverlayProvider.d.ts +10 -0
- package/dist-types/date-picker/DatePickerRangeInput.d.ts +13 -3
- package/dist-types/date-picker/DatePickerRangePanel.d.ts +17 -17
- package/dist-types/date-picker/DatePickerSingleInput.d.ts +12 -3
- package/dist-types/date-picker/DatePickerSinglePanel.d.ts +11 -11
- package/dist-types/date-picker/DatePickerTrigger.d.ts +9 -0
- package/dist-types/date-picker/index.d.ts +3 -2
- package/dist-types/date-picker/useDatePicker.d.ts +52 -59
- package/dist-types/index.d.ts +2 -0
- package/dist-types/localization-provider/LocalizationProvider.d.ts +62 -0
- package/dist-types/localization-provider/index.d.ts +1 -0
- package/dist-types/overlay/OverlayHeader.d.ts +20 -0
- package/dist-types/overlay/index.d.ts +1 -0
- package/package.json +11 -3
- package/dist-cjs/calendar/CalendarDateGrid.css.js +0 -6
- package/dist-cjs/calendar/CalendarDateGrid.css.js.map +0 -1
- package/dist-cjs/calendar/CalendarDateGrid.js +0 -105
- package/dist-cjs/calendar/CalendarDateGrid.js.map +0 -1
- package/dist-cjs/calendar/formatDate.js +0 -51
- package/dist-cjs/calendar/formatDate.js.map +0 -1
- package/dist-cjs/date-input/utils.js +0 -63
- package/dist-cjs/date-input/utils.js.map +0 -1
- package/dist-es/calendar/CalendarDateGrid.css.js +0 -4
- package/dist-es/calendar/CalendarDateGrid.css.js.map +0 -1
- package/dist-es/calendar/CalendarDateGrid.js +0 -103
- package/dist-es/calendar/CalendarDateGrid.js.map +0 -1
- package/dist-es/calendar/formatDate.js +0 -48
- package/dist-es/calendar/formatDate.js.map +0 -1
- package/dist-es/date-input/utils.js +0 -57
- package/dist-es/date-input/utils.js.map +0 -1
- package/dist-types/calendar/CalendarDateGrid.d.ts +0 -10
- package/dist-types/calendar/formatDate.d.ts +0 -14
- package/dist-types/date-input/utils.d.ts +0 -43
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarWeekHeader.js","sources":["../src/calendar/CalendarWeekHeader.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithRef, forwardRef } from \"react\";\nimport {
|
|
1
|
+
{"version":3,"file":"CalendarWeekHeader.js","sources":["../src/calendar/CalendarWeekHeader.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithRef, forwardRef } from \"react\";\nimport { daysOfWeek } from \"./internal/utils\";\n\nimport type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useLocalization } from \"../localization-provider\";\nimport calendarWeekHeaderCss from \"./CalendarWeekHeader.css\";\nimport { useCalendarContext } from \"./internal/CalendarContext\";\n\n/**\n * Props for the CalendarWeekHeader component.\n */\nexport type CalendarWeekHeaderProps = ComponentPropsWithRef<\"div\"> & {};\n\nconst withBaseName = makePrefixer(\"saltCalendarWeekHeader\");\n\nexport const CalendarWeekHeader = forwardRef(function CalendarWeekHeader<\n TDate extends DateFrameworkType,\n>(props: CalendarWeekHeaderProps, ref: React.Ref<HTMLDivElement>) {\n const { className, ...rest } = props;\n const { dateAdapter } = useLocalization<TDate>();\n const {\n state: { locale },\n } = useCalendarContext<TDate>();\n\n const weekdaysShort = daysOfWeek(dateAdapter, \"narrow\", locale);\n const weekdaysLong = daysOfWeek(dateAdapter, \"long\", locale);\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-calendar-week-header\",\n css: calendarWeekHeaderCss,\n window: targetWindow,\n });\n\n return (\n <div\n data-testid=\"CalendarWeekHeader\"\n className={clsx(withBaseName(), className)}\n ref={ref}\n {...rest}\n >\n {weekdaysShort.map((day, index) => (\n <small\n aria-hidden\n key={weekdaysLong[index]}\n className={withBaseName(\"dayOfWeek\")}\n >\n {day}\n </small>\n ))}\n </div>\n );\n});\n"],"names":["CalendarWeekHeader","calendarWeekHeaderCss"],"mappings":";;;;;;;;;;;AAiBA,MAAM,YAAA,GAAe,aAAa,wBAAwB,CAAA;AAEnD,MAAM,kBAAqB,GAAA,UAAA,CAAW,SAASA,mBAAAA,CAEpD,OAAgC,GAAgC,EAAA;AAChE,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAS,GAAA,KAAA;AAC/B,EAAM,MAAA,EAAE,WAAY,EAAA,GAAI,eAAuB,EAAA;AAC/C,EAAM,MAAA;AAAA,IACJ,KAAA,EAAO,EAAE,MAAO;AAAA,MACd,kBAA0B,EAAA;AAE9B,EAAA,MAAM,aAAgB,GAAA,UAAA,CAAW,WAAa,EAAA,QAAA,EAAU,MAAM,CAAA;AAC9D,EAAA,MAAM,YAAe,GAAA,UAAA,CAAW,WAAa,EAAA,MAAA,EAAQ,MAAM,CAAA;AAE3D,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,2BAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAY,EAAA,oBAAA;AAAA,MACZ,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAc,EAAA,aAAA,CAAA,GAAA,CAAI,CAAC,GAAA,EAAK,KACvB,qBAAA,GAAA;AAAA,QAAC,OAAA;AAAA,QAAA;AAAA,UACC,aAAW,EAAA,IAAA;AAAA,UAEX,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,UAElC,QAAA,EAAA;AAAA,SAAA;AAAA,QAHI,aAAa,KAAK;AAAA,OAK1B;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
|
|
@@ -5,9 +5,13 @@ if (process.env.NODE_ENV !== "production") {
|
|
|
5
5
|
CalendarContext.displayName = "CalendarContext";
|
|
6
6
|
}
|
|
7
7
|
function useCalendarContext() {
|
|
8
|
-
const context = useContext(
|
|
8
|
+
const context = useContext(
|
|
9
|
+
CalendarContext
|
|
10
|
+
);
|
|
9
11
|
if (!context) {
|
|
10
|
-
throw new Error(
|
|
12
|
+
throw new Error(
|
|
13
|
+
"useCalendarContext should be called inside CalendarContext.Provider"
|
|
14
|
+
);
|
|
11
15
|
}
|
|
12
16
|
return context;
|
|
13
17
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarContext.js","sources":["../src/calendar/internal/CalendarContext.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type {
|
|
1
|
+
{"version":3,"file":"CalendarContext.js","sources":["../src/calendar/internal/CalendarContext.tsx"],"sourcesContent":["import type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport { createContext, useContext } from \"react\";\nimport type { UseCalendarReturn } from \"../useCalendar\";\n\ninterface CalendarState<TDate extends DateFrameworkType>\n extends UseCalendarReturn<TDate> {}\n\nconst CalendarContext = createContext<CalendarState<any> | null>(null);\n\nif (process.env.NODE_ENV !== \"production\") {\n CalendarContext.displayName = \"CalendarContext\";\n}\n\nfunction useCalendarContext<\n TDate extends DateFrameworkType,\n>(): CalendarState<TDate> {\n const context = useContext(\n CalendarContext as React.Context<CalendarState<TDate> | null>,\n );\n if (!context) {\n throw new Error(\n \"useCalendarContext should be called inside CalendarContext.Provider\",\n );\n }\n\n return context;\n}\n\nexport { CalendarContext, useCalendarContext };\n"],"names":[],"mappings":";;AAOM,MAAA,eAAA,GAAkB,cAAyC,IAAI;AAErE,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,eAAA,CAAgB,WAAc,GAAA,iBAAA;AAChC;AAEA,SAAS,kBAEiB,GAAA;AACxB,EAAA,MAAM,OAAU,GAAA,UAAA;AAAA,IACd;AAAA,GACF;AACA,EAAA,IAAI,CAAC,OAAS,EAAA;AACZ,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KACF;AAAA;AAGF,EAAO,OAAA,OAAA;AACT;;;;"}
|
|
@@ -4,9 +4,9 @@ import { useComponentCssInjection } from '@salt-ds/styles';
|
|
|
4
4
|
import { useWindow } from '@salt-ds/window';
|
|
5
5
|
import { clsx } from 'clsx';
|
|
6
6
|
import { forwardRef, useRef } from 'react';
|
|
7
|
+
import { useLocalization } from '../../localization-provider/LocalizationProvider.js';
|
|
7
8
|
import { useCalendarDay } from '../useCalendarDay.js';
|
|
8
9
|
import css_248z from './CalendarDay.css.js';
|
|
9
|
-
import { formatDate } from './utils.js';
|
|
10
10
|
|
|
11
11
|
const withBaseName = makePrefixer("saltCalendarDay");
|
|
12
12
|
const CalendarDay = forwardRef(
|
|
@@ -17,9 +17,10 @@ const CalendarDay = forwardRef(
|
|
|
17
17
|
renderDayContents,
|
|
18
18
|
month,
|
|
19
19
|
TooltipProps,
|
|
20
|
-
|
|
20
|
+
format = "DD",
|
|
21
21
|
...rest
|
|
22
22
|
} = props;
|
|
23
|
+
const { dateAdapter } = useLocalization();
|
|
23
24
|
const targetWindow = useWindow();
|
|
24
25
|
useComponentCssInjection({
|
|
25
26
|
testId: "salt-calendar-day",
|
|
@@ -28,7 +29,7 @@ const CalendarDay = forwardRef(
|
|
|
28
29
|
});
|
|
29
30
|
const dayRef = useRef(null);
|
|
30
31
|
const buttonRef = useForkRef(ref, dayRef);
|
|
31
|
-
const { status, dayProps, unselectableReason, highlightedReason
|
|
32
|
+
const { status, dayProps, unselectableReason, highlightedReason } = useCalendarDay(
|
|
32
33
|
{
|
|
33
34
|
date: day,
|
|
34
35
|
month
|
|
@@ -39,11 +40,7 @@ const CalendarDay = forwardRef(
|
|
|
39
40
|
const buttonElement = /* @__PURE__ */ jsx(
|
|
40
41
|
"button",
|
|
41
42
|
{
|
|
42
|
-
"aria-label":
|
|
43
|
-
day: "2-digit",
|
|
44
|
-
month: "long",
|
|
45
|
-
year: "numeric"
|
|
46
|
-
}),
|
|
43
|
+
"aria-label": dateAdapter.format(day, "DD MMMM YYYY"),
|
|
47
44
|
disabled,
|
|
48
45
|
type: "button",
|
|
49
46
|
...dayProps,
|
|
@@ -67,7 +64,7 @@ const CalendarDay = forwardRef(
|
|
|
67
64
|
className: clsx(withBaseName("content"), {
|
|
68
65
|
[withBaseName("today")]: today
|
|
69
66
|
}),
|
|
70
|
-
children: renderDayContents ? renderDayContents(day, status) :
|
|
67
|
+
children: renderDayContents ? renderDayContents(day, status) : dateAdapter.format(day, format)
|
|
71
68
|
}
|
|
72
69
|
)
|
|
73
70
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarDay.js","sources":["../src/calendar/internal/CalendarDay.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"CalendarDay.js","sources":["../src/calendar/internal/CalendarDay.tsx"],"sourcesContent":["import {\n Tooltip,\n type TooltipProps,\n makePrefixer,\n useForkRef,\n} from \"@salt-ds/core\";\nimport type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithRef,\n type ReactElement,\n forwardRef,\n useRef,\n} from \"react\";\nimport { useLocalization } from \"../../localization-provider\";\nimport { type DayStatus, useCalendarDay } from \"../useCalendarDay\";\nimport calendarDayCss from \"./CalendarDay.css\";\n\nexport type DateFormatter = (day: Date) => string | undefined;\n\nexport interface CalendarDayProps<TDate>\n extends Omit<ComponentPropsWithRef<\"button\">, \"children\"> {\n day: TDate;\n format?: string;\n renderDayContents?: (date: TDate, status: DayStatus) => ReactElement;\n status?: DayStatus;\n month: TDate;\n TooltipProps?: Partial<TooltipProps>;\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarDay\");\n\nexport const CalendarDay = forwardRef<HTMLButtonElement, CalendarDayProps<any>>(\n function CalendarDay<TDate extends DateFrameworkType>(\n props: CalendarDayProps<TDate>,\n ref: React.Ref<HTMLButtonElement>,\n ) {\n const {\n className,\n day,\n renderDayContents,\n month,\n TooltipProps,\n format = \"DD\",\n ...rest\n } = props;\n const { dateAdapter } = useLocalization<TDate>();\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-calendar-day\",\n css: calendarDayCss,\n window: targetWindow,\n });\n\n const dayRef = useRef<HTMLButtonElement>(null);\n const buttonRef = useForkRef(ref, dayRef);\n const { status, dayProps, unselectableReason, highlightedReason } =\n useCalendarDay(\n {\n date: day,\n month,\n },\n dayRef,\n );\n const { outOfRange, today, unselectable, highlighted, hidden, disabled } =\n status;\n\n const buttonElement = (\n <button\n aria-label={dateAdapter.format(day, \"DD MMMM YYYY\")}\n disabled={disabled}\n type=\"button\"\n {...dayProps}\n ref={buttonRef}\n {...rest}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"hidden\")]: hidden,\n [withBaseName(\"outOfRange\")]: outOfRange,\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"unselectable\")]: !!unselectable,\n [withBaseName(\"highlighted\")]: !!highlighted,\n },\n dayProps.className,\n className,\n )}\n >\n <span\n className={clsx(withBaseName(\"content\"), {\n [withBaseName(\"today\")]: today,\n })}\n >\n {renderDayContents\n ? renderDayContents(day, status)\n : dateAdapter.format(day, format)}\n </span>\n </button>\n );\n const hasTooltip = unselectableReason || highlightedReason;\n if (!hasTooltip) {\n return buttonElement;\n }\n return (\n <Tooltip\n hideIcon\n status={unselectableReason ? \"error\" : \"info\"}\n content={\n unselectableReason || highlightedReason || \"Date is out of range\"\n }\n placement=\"top\"\n enterDelay={0} // --salt-duration-instant\n leaveDelay={0} // --salt-duration-instant\n {...TooltipProps}\n >\n {buttonElement}\n </Tooltip>\n );\n },\n);\n"],"names":["CalendarDay","calendarDayCss"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltCalendarMonth-
|
|
1
|
+
var css_248z = ".saltCalendarMonth-grid {\n display: grid;\n gap: var(--salt-size-border);\n grid-template-columns: repeat(7, var(--salt-size-base));\n grid-template-rows: repeat(6, var(--salt-size-base));\n text-align: center;\n margin: var(--salt-size-border);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=CalendarMonth.css.js.map
|
|
@@ -3,68 +3,61 @@ import { makePrefixer } from '@salt-ds/core';
|
|
|
3
3
|
import { clsx } from 'clsx';
|
|
4
4
|
import { forwardRef } from 'react';
|
|
5
5
|
import { CalendarDay } from './CalendarDay.js';
|
|
6
|
-
import { generateVisibleDays
|
|
6
|
+
import { generateVisibleDays } from './utils.js';
|
|
7
7
|
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
8
8
|
import { useWindow } from '@salt-ds/window';
|
|
9
|
+
import { useLocalization } from '../../localization-provider/LocalizationProvider.js';
|
|
9
10
|
import { useCalendarContext } from './CalendarContext.js';
|
|
10
11
|
import css_248z from './CalendarMonth.css.js';
|
|
11
12
|
|
|
12
13
|
const withBaseName = makePrefixer("saltCalendarMonth");
|
|
13
|
-
const CalendarMonth = forwardRef(
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
14
|
+
const CalendarMonth = forwardRef(function CalendarMonth2(props, ref) {
|
|
15
|
+
const {
|
|
16
|
+
className,
|
|
17
|
+
date,
|
|
18
|
+
renderDayContents,
|
|
19
|
+
onMouseLeave,
|
|
20
|
+
TooltipProps,
|
|
21
|
+
...rest
|
|
22
|
+
} = props;
|
|
23
|
+
const { dateAdapter } = useLocalization();
|
|
24
|
+
const targetWindow = useWindow();
|
|
25
|
+
useComponentCssInjection({
|
|
26
|
+
testId: "salt-calendar-month",
|
|
27
|
+
css: css_248z,
|
|
28
|
+
window: targetWindow
|
|
29
|
+
});
|
|
30
|
+
const {
|
|
31
|
+
state: { locale },
|
|
32
|
+
helpers: { setHoveredDate }
|
|
33
|
+
} = useCalendarContext();
|
|
34
|
+
const days = generateVisibleDays(dateAdapter, date, locale);
|
|
35
|
+
const handleMouseLeave = (event) => {
|
|
36
|
+
setHoveredDate(event, null);
|
|
37
|
+
onMouseLeave == null ? void 0 : onMouseLeave(event);
|
|
38
|
+
};
|
|
39
|
+
return /* @__PURE__ */ jsx(
|
|
40
|
+
"div",
|
|
41
|
+
{
|
|
42
|
+
className: clsx(withBaseName(), className),
|
|
43
|
+
ref,
|
|
44
|
+
onMouseLeave: handleMouseLeave,
|
|
45
|
+
...rest,
|
|
46
|
+
children: /* @__PURE__ */ jsx("div", { "data-testid": "CalendarGrid", className: withBaseName("grid"), children: days.map((day) => {
|
|
47
|
+
return /* @__PURE__ */ jsx(
|
|
48
|
+
CalendarDay,
|
|
47
49
|
{
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
formatDate(day.date, locale)
|
|
60
|
-
);
|
|
61
|
-
})
|
|
62
|
-
}
|
|
63
|
-
)
|
|
64
|
-
}
|
|
65
|
-
);
|
|
66
|
-
}
|
|
67
|
-
);
|
|
50
|
+
day: day.date,
|
|
51
|
+
renderDayContents,
|
|
52
|
+
month: date,
|
|
53
|
+
TooltipProps
|
|
54
|
+
},
|
|
55
|
+
dateAdapter.format(day.date, "DD MMM YYYY", locale)
|
|
56
|
+
);
|
|
57
|
+
}) })
|
|
58
|
+
}
|
|
59
|
+
);
|
|
60
|
+
});
|
|
68
61
|
|
|
69
62
|
export { CalendarMonth };
|
|
70
63
|
//# sourceMappingURL=CalendarMonth.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarMonth.js","sources":["../src/calendar/internal/CalendarMonth.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"CalendarMonth.js","sources":["../src/calendar/internal/CalendarMonth.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithRef,\n type MouseEvent,\n type SyntheticEvent,\n forwardRef,\n} from \"react\";\nimport { CalendarDay, type CalendarDayProps } from \"./CalendarDay\";\nimport { generateVisibleDays } from \"./utils\";\n\nimport type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useLocalization } from \"../../localization-provider\";\nimport { useCalendarContext } from \"./CalendarContext\";\nimport calendarMonthCss from \"./CalendarMonth.css\";\n\nexport interface CalendarMonthProps<TDate>\n extends ComponentPropsWithRef<\"div\"> {\n /**\n * Month to render as selectable dates\n */\n date: TDate;\n /**\n * Function to render the contents of a day.\n */\n renderDayContents?: CalendarDayProps<TDate>[\"renderDayContents\"];\n /**\n * Props for the tooltip component.\n */\n TooltipProps?: CalendarDayProps<TDate>[\"TooltipProps\"];\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarMonth\");\n\nexport const CalendarMonth = forwardRef<\n HTMLDivElement,\n CalendarMonthProps<any>\n>(function CalendarMonth<TDate extends DateFrameworkType>(\n props: CalendarMonthProps<TDate>,\n ref: React.Ref<HTMLDivElement>,\n) {\n const {\n className,\n date,\n renderDayContents,\n onMouseLeave,\n TooltipProps,\n ...rest\n } = props;\n const { dateAdapter } = useLocalization<TDate>();\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-calendar-month\",\n css: calendarMonthCss,\n window: targetWindow,\n });\n\n const {\n state: { locale },\n helpers: { setHoveredDate },\n } = useCalendarContext<TDate>();\n const days = generateVisibleDays<TDate>(dateAdapter, date, locale);\n const handleMouseLeave = (event: SyntheticEvent) => {\n setHoveredDate(event, null);\n onMouseLeave?.(event as MouseEvent<HTMLDivElement>);\n };\n\n return (\n <div\n className={clsx(withBaseName(), className)}\n ref={ref}\n onMouseLeave={handleMouseLeave}\n {...rest}\n >\n <div data-testid=\"CalendarGrid\" className={withBaseName(\"grid\")}>\n {days.map((day) => {\n return (\n <CalendarDay\n key={dateAdapter.format(day.date, \"DD MMM YYYY\", locale)}\n day={day.date}\n renderDayContents={renderDayContents}\n month={date}\n TooltipProps={TooltipProps}\n />\n );\n })}\n </div>\n </div>\n );\n});\n"],"names":["CalendarMonth","calendarMonthCss"],"mappings":";;;;;;;;;;;;AAkCA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA;AAE9C,MAAM,aAAgB,GAAA,UAAA,CAG3B,SAASA,cAAAA,CACT,OACA,GACA,EAAA;AACA,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,IAAA;AAAA,IACA,iBAAA;AAAA,IACA,YAAA;AAAA,IACA,YAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AACJ,EAAM,MAAA,EAAE,WAAY,EAAA,GAAI,eAAuB,EAAA;AAC/C,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,qBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,KAAA,EAAO,EAAE,MAAO,EAAA;AAAA,IAChB,OAAA,EAAS,EAAE,cAAe;AAAA,MACxB,kBAA0B,EAAA;AAC9B,EAAA,MAAM,IAAO,GAAA,mBAAA,CAA2B,WAAa,EAAA,IAAA,EAAM,MAAM,CAAA;AACjE,EAAM,MAAA,gBAAA,GAAmB,CAAC,KAA0B,KAAA;AAClD,IAAA,cAAA,CAAe,OAAO,IAAI,CAAA;AAC1B,IAAe,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,KAAA,CAAA;AAAA,GACjB;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA;AAAA,MACA,YAAc,EAAA,gBAAA;AAAA,MACb,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,aAAA,EAAY,cAAe,EAAA,SAAA,EAAW,YAAa,CAAA,MAAM,CAC3D,EAAA,QAAA,EAAA,IAAA,CAAK,GAAI,CAAA,CAAC,GAAQ,KAAA;AACjB,QACE,uBAAA,GAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YAEC,KAAK,GAAI,CAAA,IAAA;AAAA,YACT,iBAAA;AAAA,YACA,KAAO,EAAA,IAAA;AAAA,YACP;AAAA,WAAA;AAAA,UAJK,WAAY,CAAA,MAAA,CAAO,GAAI,CAAA,IAAA,EAAM,eAAe,MAAM;AAAA,SAKzD;AAAA,OAEH,CACH,EAAA;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { getCurrentLocale } from '../formatDate.js';
|
|
1
|
+
import { useLocalization } from '../../localization-provider/LocalizationProvider.js';
|
|
3
2
|
import { useCalendarContext } from './CalendarContext.js';
|
|
4
3
|
|
|
5
4
|
function useFocusManagement({
|
|
6
|
-
date
|
|
7
|
-
locale = getCurrentLocale()
|
|
5
|
+
date
|
|
8
6
|
}) {
|
|
7
|
+
const { dateAdapter } = useLocalization();
|
|
9
8
|
const {
|
|
9
|
+
state: { locale },
|
|
10
10
|
helpers: { setFocusedDate }
|
|
11
11
|
} = useCalendarContext();
|
|
12
12
|
const handleClick = (event) => {
|
|
@@ -16,39 +16,39 @@ function useFocusManagement({
|
|
|
16
16
|
let newDate = date;
|
|
17
17
|
switch (event.key) {
|
|
18
18
|
case "ArrowUp":
|
|
19
|
-
newDate =
|
|
19
|
+
newDate = dateAdapter.subtract(date, { weeks: 1 });
|
|
20
20
|
break;
|
|
21
21
|
case "ArrowDown":
|
|
22
|
-
newDate =
|
|
22
|
+
newDate = dateAdapter.add(date, { weeks: 1 });
|
|
23
23
|
break;
|
|
24
24
|
case "ArrowLeft":
|
|
25
|
-
newDate =
|
|
25
|
+
newDate = dateAdapter.subtract(date, { days: 1 });
|
|
26
26
|
break;
|
|
27
27
|
case "ArrowRight":
|
|
28
|
-
newDate =
|
|
28
|
+
newDate = dateAdapter.add(date, { days: 1 });
|
|
29
29
|
break;
|
|
30
30
|
case "Home":
|
|
31
|
-
newDate =
|
|
31
|
+
newDate = dateAdapter.startOf(date, "week", locale);
|
|
32
32
|
break;
|
|
33
33
|
case "End":
|
|
34
|
-
newDate =
|
|
34
|
+
newDate = dateAdapter.endOf(date, "week", locale);
|
|
35
35
|
break;
|
|
36
36
|
case "PageUp":
|
|
37
37
|
if (event.shiftKey) {
|
|
38
|
-
newDate =
|
|
38
|
+
newDate = dateAdapter.subtract(date, { years: 1 });
|
|
39
39
|
} else {
|
|
40
|
-
newDate =
|
|
40
|
+
newDate = dateAdapter.subtract(date, { months: 1 });
|
|
41
41
|
}
|
|
42
42
|
break;
|
|
43
43
|
case "PageDown":
|
|
44
44
|
if (event.shiftKey) {
|
|
45
|
-
newDate =
|
|
45
|
+
newDate = dateAdapter.add(date, { years: 1 });
|
|
46
46
|
} else {
|
|
47
|
-
newDate =
|
|
47
|
+
newDate = dateAdapter.add(date, { months: 1 });
|
|
48
48
|
}
|
|
49
49
|
break;
|
|
50
50
|
}
|
|
51
|
-
if (
|
|
51
|
+
if (dateAdapter.compare(newDate, date) !== 0) {
|
|
52
52
|
event.preventDefault();
|
|
53
53
|
}
|
|
54
54
|
setFocusedDate(event, newDate);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFocusManagement.js","sources":["../src/calendar/internal/useFocusManagement.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"useFocusManagement.js","sources":["../src/calendar/internal/useFocusManagement.ts"],"sourcesContent":["import type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport type {\n FocusEventHandler,\n KeyboardEventHandler,\n MouseEventHandler,\n} from \"react\";\nimport { useLocalization } from \"../../localization-provider\";\nimport { useCalendarContext } from \"./CalendarContext\";\n\nexport function useFocusManagement<TDate extends DateFrameworkType>({\n date,\n}: {\n date: TDate;\n}) {\n const { dateAdapter } = useLocalization<TDate>();\n const {\n state: { locale },\n helpers: { setFocusedDate },\n } = useCalendarContext<TDate>();\n const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n setFocusedDate(event, date);\n };\n\n const handleKeyDown: KeyboardEventHandler<HTMLButtonElement> = (event) => {\n let newDate = date;\n switch (event.key) {\n case \"ArrowUp\":\n newDate = dateAdapter.subtract(date, { weeks: 1 });\n break;\n case \"ArrowDown\":\n newDate = dateAdapter.add(date, { weeks: 1 });\n break;\n case \"ArrowLeft\":\n newDate = dateAdapter.subtract(date, { days: 1 });\n break;\n case \"ArrowRight\":\n newDate = dateAdapter.add(date, { days: 1 });\n break;\n case \"Home\":\n newDate = dateAdapter.startOf(date, \"week\", locale);\n break;\n case \"End\":\n newDate = dateAdapter.endOf(date, \"week\", locale);\n break;\n case \"PageUp\":\n if (event.shiftKey) {\n newDate = dateAdapter.subtract(date, { years: 1 });\n } else {\n newDate = dateAdapter.subtract(date, { months: 1 });\n }\n break;\n case \"PageDown\":\n if (event.shiftKey) {\n newDate = dateAdapter.add(date, { years: 1 });\n } else {\n newDate = dateAdapter.add(date, { months: 1 });\n }\n break;\n default:\n }\n if (dateAdapter.compare(newDate, date) !== 0) {\n event.preventDefault();\n }\n setFocusedDate(event, newDate);\n };\n\n const handleFocus: FocusEventHandler<HTMLButtonElement> = (event) => {\n setFocusedDate(event, date);\n };\n\n return {\n handleClick,\n handleKeyDown,\n handleFocus,\n };\n}\n"],"names":[],"mappings":";;;AASO,SAAS,kBAAoD,CAAA;AAAA,EAClE;AACF,CAEG,EAAA;AACD,EAAM,MAAA,EAAE,WAAY,EAAA,GAAI,eAAuB,EAAA;AAC/C,EAAM,MAAA;AAAA,IACJ,KAAA,EAAO,EAAE,MAAO,EAAA;AAAA,IAChB,OAAA,EAAS,EAAE,cAAe;AAAA,MACxB,kBAA0B,EAAA;AAC9B,EAAM,MAAA,WAAA,GAAoD,CAAC,KAAU,KAAA;AACnE,IAAA,cAAA,CAAe,OAAO,IAAI,CAAA;AAAA,GAC5B;AAEA,EAAM,MAAA,aAAA,GAAyD,CAAC,KAAU,KAAA;AACxE,IAAA,IAAI,OAAU,GAAA,IAAA;AACd,IAAA,QAAQ,MAAM,GAAK;AAAA,MACjB,KAAK,SAAA;AACH,QAAA,OAAA,GAAU,YAAY,QAAS,CAAA,IAAA,EAAM,EAAE,KAAA,EAAO,GAAG,CAAA;AACjD,QAAA;AAAA,MACF,KAAK,WAAA;AACH,QAAA,OAAA,GAAU,YAAY,GAAI,CAAA,IAAA,EAAM,EAAE,KAAA,EAAO,GAAG,CAAA;AAC5C,QAAA;AAAA,MACF,KAAK,WAAA;AACH,QAAA,OAAA,GAAU,YAAY,QAAS,CAAA,IAAA,EAAM,EAAE,IAAA,EAAM,GAAG,CAAA;AAChD,QAAA;AAAA,MACF,KAAK,YAAA;AACH,QAAA,OAAA,GAAU,YAAY,GAAI,CAAA,IAAA,EAAM,EAAE,IAAA,EAAM,GAAG,CAAA;AAC3C,QAAA;AAAA,MACF,KAAK,MAAA;AACH,QAAA,OAAA,GAAU,WAAY,CAAA,OAAA,CAAQ,IAAM,EAAA,MAAA,EAAQ,MAAM,CAAA;AAClD,QAAA;AAAA,MACF,KAAK,KAAA;AACH,QAAA,OAAA,GAAU,WAAY,CAAA,KAAA,CAAM,IAAM,EAAA,MAAA,EAAQ,MAAM,CAAA;AAChD,QAAA;AAAA,MACF,KAAK,QAAA;AACH,QAAA,IAAI,MAAM,QAAU,EAAA;AAClB,UAAA,OAAA,GAAU,YAAY,QAAS,CAAA,IAAA,EAAM,EAAE,KAAA,EAAO,GAAG,CAAA;AAAA,SAC5C,MAAA;AACL,UAAA,OAAA,GAAU,YAAY,QAAS,CAAA,IAAA,EAAM,EAAE,MAAA,EAAQ,GAAG,CAAA;AAAA;AAEpD,QAAA;AAAA,MACF,KAAK,UAAA;AACH,QAAA,IAAI,MAAM,QAAU,EAAA;AAClB,UAAA,OAAA,GAAU,YAAY,GAAI,CAAA,IAAA,EAAM,EAAE,KAAA,EAAO,GAAG,CAAA;AAAA,SACvC,MAAA;AACL,UAAA,OAAA,GAAU,YAAY,GAAI,CAAA,IAAA,EAAM,EAAE,MAAA,EAAQ,GAAG,CAAA;AAAA;AAE/C,QAAA;AACF;AAEF,IAAA,IAAI,WAAY,CAAA,OAAA,CAAQ,OAAS,EAAA,IAAI,MAAM,CAAG,EAAA;AAC5C,MAAA,KAAA,CAAM,cAAe,EAAA;AAAA;AAEvB,IAAA,cAAA,CAAe,OAAO,OAAO,CAAA;AAAA,GAC/B;AAEA,EAAM,MAAA,WAAA,GAAoD,CAAC,KAAU,KAAA;AACnE,IAAA,cAAA,CAAe,OAAO,IAAI,CAAA;AAAA,GAC5B;AAEA,EAAO,OAAA;AAAA,IACL,WAAA;AAAA,IACA,aAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}
|
|
@@ -1,61 +1,48 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
const timeLocale = locale || getCurrentLocale();
|
|
6
|
-
const timeZone = (options == null ? void 0 : options.timeZone) || getLocalTimeZone();
|
|
7
|
-
const formatter = new DateFormatter(timeLocale, options);
|
|
8
|
-
return formatter.format(date.toDate(timeZone));
|
|
9
|
-
}
|
|
10
|
-
function getCalendar(locale) {
|
|
11
|
-
const calendarIdentifier = new DateFormatter(locale).resolvedOptions().calendar;
|
|
12
|
-
return createCalendar(calendarIdentifier);
|
|
13
|
-
}
|
|
14
|
-
function daysForLocale(weekday, locale) {
|
|
15
|
-
return [...Array(7).keys()].map(
|
|
16
|
-
(day) => formatDate(
|
|
17
|
-
startOfWeek(today(getLocalTimeZone()), locale).add({
|
|
18
|
-
days: day
|
|
19
|
-
}),
|
|
20
|
-
locale,
|
|
21
|
-
{ weekday: weekday || "long" }
|
|
22
|
-
)
|
|
1
|
+
function daysOfWeek(dateAdapter, format, locale) {
|
|
2
|
+
return Array.from(
|
|
3
|
+
{ length: 7 },
|
|
4
|
+
(_, day) => dateAdapter.getDayOfWeekName(day, format, locale)
|
|
23
5
|
);
|
|
24
6
|
}
|
|
25
|
-
function
|
|
26
|
-
const
|
|
27
|
-
return
|
|
28
|
-
|
|
7
|
+
function generateMonthsForYear(dateAdapter, currentYear) {
|
|
8
|
+
const startOfYear = dateAdapter.startOf(currentYear, "year");
|
|
9
|
+
return Array.from(
|
|
10
|
+
{ length: 12 },
|
|
11
|
+
(_, month) => dateAdapter.add(startOfYear, { months: month })
|
|
29
12
|
);
|
|
30
13
|
}
|
|
31
|
-
function
|
|
32
|
-
return {
|
|
33
|
-
date: currentDate,
|
|
34
|
-
dateOfMonth: currentDate.month,
|
|
35
|
-
isCurrentMonth: isSameMonth(currentDate, currentMonth)
|
|
36
|
-
};
|
|
37
|
-
}
|
|
38
|
-
function generateVisibleDays(currentMonth, locale) {
|
|
14
|
+
function generateVisibleDays(dateAdapter, currentMonth, locale) {
|
|
39
15
|
const totalDays = 6 * 7;
|
|
40
|
-
const startDate =
|
|
16
|
+
const startDate = dateAdapter.startOf(
|
|
17
|
+
dateAdapter.startOf(currentMonth, "month", locale),
|
|
18
|
+
"week",
|
|
19
|
+
locale
|
|
20
|
+
);
|
|
41
21
|
return [...Array(totalDays).keys()].map((dayDelta) => {
|
|
42
|
-
const day =
|
|
43
|
-
return
|
|
22
|
+
const day = dateAdapter.add(startDate, { days: dayDelta });
|
|
23
|
+
return {
|
|
24
|
+
date: day,
|
|
25
|
+
dateOfMonth: dateAdapter.getMonth(day),
|
|
26
|
+
isCurrentMonth: dateAdapter.isSame(day, currentMonth, "month")
|
|
27
|
+
};
|
|
44
28
|
});
|
|
45
29
|
}
|
|
46
|
-
function monthDiff(a, b) {
|
|
47
|
-
|
|
30
|
+
function monthDiff(dateAdapter, a, b) {
|
|
31
|
+
const aMonth = dateAdapter.getMonth(a);
|
|
32
|
+
const aYear = dateAdapter.getYear(a);
|
|
33
|
+
const bMonth = dateAdapter.getMonth(b);
|
|
34
|
+
const bYear = dateAdapter.getYear(b);
|
|
35
|
+
return bMonth - aMonth + 12 * (bYear - aYear);
|
|
48
36
|
}
|
|
49
|
-
function generateDatesForMonth(date) {
|
|
50
|
-
const
|
|
51
|
-
const
|
|
52
|
-
const endDate = endOfMonth(calendarDate);
|
|
37
|
+
function generateDatesForMonth(dateAdapter, date) {
|
|
38
|
+
const startDate = dateAdapter.startOf(date, "month");
|
|
39
|
+
const endDate = dateAdapter.endOf(date, "month");
|
|
53
40
|
const dates = [];
|
|
54
|
-
for (let currentDate = startDate;
|
|
41
|
+
for (let currentDate = startDate; dateAdapter.compare(currentDate, endDate) <= 0; currentDate = dateAdapter.add(currentDate, { days: 1 })) {
|
|
55
42
|
dates.push(currentDate);
|
|
56
43
|
}
|
|
57
44
|
return dates;
|
|
58
45
|
}
|
|
59
46
|
|
|
60
|
-
export {
|
|
47
|
+
export { daysOfWeek, generateDatesForMonth, generateMonthsForYear, generateVisibleDays, monthDiff };
|
|
61
48
|
//# sourceMappingURL=utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../src/calendar/internal/utils.ts"],"sourcesContent":["import {\n
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../src/calendar/internal/utils.ts"],"sourcesContent":["import type {\n DateFrameworkType,\n SaltDateAdapter,\n} from \"@salt-ds/date-adapters\";\n\nexport function daysOfWeek<TDate extends DateFrameworkType>(\n dateAdapter: SaltDateAdapter<TDate>,\n format: \"long\" | \"short\" | \"narrow\",\n locale?: any,\n) {\n return Array.from({ length: 7 }, (_, day) =>\n dateAdapter.getDayOfWeekName(day, format, locale),\n );\n}\n\nexport function generateMonthsForYear<TDate extends DateFrameworkType>(\n dateAdapter: SaltDateAdapter<TDate>,\n currentYear: TDate,\n) {\n const startOfYear = dateAdapter.startOf(currentYear, \"year\");\n return Array.from({ length: 12 }, (_, month) =>\n dateAdapter.add(startOfYear, { months: month }),\n );\n}\n\nexport function generateVisibleDays<TDate extends DateFrameworkType>(\n dateAdapter: SaltDateAdapter<TDate>,\n currentMonth: TDate,\n locale?: any,\n) {\n const totalDays = 6 * 7;\n const startDate = dateAdapter.startOf(\n dateAdapter.startOf(currentMonth, \"month\", locale),\n \"week\",\n locale,\n );\n return [...Array(totalDays).keys()].map((dayDelta) => {\n const day = dateAdapter.add(startDate, { days: dayDelta });\n return {\n date: day,\n dateOfMonth: dateAdapter.getMonth(day),\n isCurrentMonth: dateAdapter.isSame(day, currentMonth, \"month\"),\n };\n });\n}\n\nexport function monthDiff<TDate extends DateFrameworkType>(\n dateAdapter: SaltDateAdapter<TDate>,\n a: TDate,\n b: TDate,\n) {\n const aMonth = dateAdapter.getMonth(a);\n const aYear = dateAdapter.getYear(a);\n const bMonth = dateAdapter.getMonth(b);\n const bYear = dateAdapter.getYear(b);\n\n return bMonth - aMonth + 12 * (bYear - aYear);\n}\n\nexport function generateDatesForMonth<TDate extends DateFrameworkType>(\n dateAdapter: SaltDateAdapter<TDate>,\n date: TDate,\n): TDate[] {\n const startDate = dateAdapter.startOf(date, \"month\");\n const endDate = dateAdapter.endOf(date, \"month\");\n const dates: TDate[] = [];\n for (\n let currentDate = startDate;\n dateAdapter.compare(currentDate, endDate) <= 0;\n currentDate = dateAdapter.add(currentDate, { days: 1 })\n ) {\n dates.push(currentDate);\n }\n return dates;\n}\n"],"names":[],"mappings":"AAKgB,SAAA,UAAA,CACd,WACA,EAAA,MAAA,EACA,MACA,EAAA;AACA,EAAA,OAAO,KAAM,CAAA,IAAA;AAAA,IAAK,EAAE,QAAQ,CAAE,EAAA;AAAA,IAAG,CAAC,CAAG,EAAA,GAAA,KACnC,YAAY,gBAAiB,CAAA,GAAA,EAAK,QAAQ,MAAM;AAAA,GAClD;AACF;AAEgB,SAAA,qBAAA,CACd,aACA,WACA,EAAA;AACA,EAAA,MAAM,WAAc,GAAA,WAAA,CAAY,OAAQ,CAAA,WAAA,EAAa,MAAM,CAAA;AAC3D,EAAA,OAAO,KAAM,CAAA,IAAA;AAAA,IAAK,EAAE,QAAQ,EAAG,EAAA;AAAA,IAAG,CAAC,GAAG,KACpC,KAAA,WAAA,CAAY,IAAI,WAAa,EAAA,EAAE,MAAQ,EAAA,KAAA,EAAO;AAAA,GAChD;AACF;AAEgB,SAAA,mBAAA,CACd,WACA,EAAA,YAAA,EACA,MACA,EAAA;AACA,EAAA,MAAM,YAAY,CAAI,GAAA,CAAA;AACtB,EAAA,MAAM,YAAY,WAAY,CAAA,OAAA;AAAA,IAC5B,WAAY,CAAA,OAAA,CAAQ,YAAc,EAAA,OAAA,EAAS,MAAM,CAAA;AAAA,IACjD,MAAA;AAAA,IACA;AAAA,GACF;AACA,EAAO,OAAA,CAAC,GAAG,KAAA,CAAM,SAAS,CAAA,CAAE,MAAM,CAAA,CAAE,GAAI,CAAA,CAAC,QAAa,KAAA;AACpD,IAAA,MAAM,MAAM,WAAY,CAAA,GAAA,CAAI,WAAW,EAAE,IAAA,EAAM,UAAU,CAAA;AACzD,IAAO,OAAA;AAAA,MACL,IAAM,EAAA,GAAA;AAAA,MACN,WAAA,EAAa,WAAY,CAAA,QAAA,CAAS,GAAG,CAAA;AAAA,MACrC,cAAgB,EAAA,WAAA,CAAY,MAAO,CAAA,GAAA,EAAK,cAAc,OAAO;AAAA,KAC/D;AAAA,GACD,CAAA;AACH;AAEgB,SAAA,SAAA,CACd,WACA,EAAA,CAAA,EACA,CACA,EAAA;AACA,EAAM,MAAA,MAAA,GAAS,WAAY,CAAA,QAAA,CAAS,CAAC,CAAA;AACrC,EAAM,MAAA,KAAA,GAAQ,WAAY,CAAA,OAAA,CAAQ,CAAC,CAAA;AACnC,EAAM,MAAA,MAAA,GAAS,WAAY,CAAA,QAAA,CAAS,CAAC,CAAA;AACrC,EAAM,MAAA,KAAA,GAAQ,WAAY,CAAA,OAAA,CAAQ,CAAC,CAAA;AAEnC,EAAO,OAAA,MAAA,GAAS,MAAS,GAAA,EAAA,IAAM,KAAQ,GAAA,KAAA,CAAA;AACzC;AAEgB,SAAA,qBAAA,CACd,aACA,IACS,EAAA;AACT,EAAA,MAAM,SAAY,GAAA,WAAA,CAAY,OAAQ,CAAA,IAAA,EAAM,OAAO,CAAA;AACnD,EAAA,MAAM,OAAU,GAAA,WAAA,CAAY,KAAM,CAAA,IAAA,EAAM,OAAO,CAAA;AAC/C,EAAA,MAAM,QAAiB,EAAC;AACxB,EAAA,KAAA,IACM,cAAc,SAClB,EAAA,WAAA,CAAY,OAAQ,CAAA,WAAA,EAAa,OAAO,CAAK,IAAA,CAAA,EAC7C,WAAc,GAAA,WAAA,CAAY,IAAI,WAAa,EAAA,EAAE,IAAM,EAAA,CAAA,EAAG,CACtD,EAAA;AACA,IAAA,KAAA,CAAM,KAAK,WAAW,CAAA;AAAA;AAExB,EAAO,OAAA,KAAA;AACT;;;;"}
|