@opengovsg/oui 0.0.0-snapshot-20250320092749 → 0.0.0-snapshot-20250326084237
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/dist/cjs/calendar/agnostic-calendar-state-context.cjs +13 -0
- package/dist/cjs/calendar/calendar-bottom-content.cjs +51 -0
- package/dist/cjs/calendar/calendar-grid-header.cjs +28 -0
- package/dist/cjs/calendar/calendar-header.cjs +74 -0
- package/dist/cjs/calendar/calendar-month-day-selector.cjs +86 -0
- package/dist/cjs/calendar/calendar-style-context.cjs +0 -25
- package/dist/cjs/calendar/calendar.cjs +143 -4
- package/dist/cjs/calendar/hooks/index.cjs +11 -0
- package/dist/cjs/calendar/hooks/use-calendar-i18n.cjs +33 -0
- package/dist/cjs/calendar/hooks/use-calendar-selectors.cjs +41 -0
- package/dist/cjs/calendar/index.cjs +1 -1
- package/dist/cjs/index.cjs +9 -5
- package/dist/cjs/range-calendar/index.cjs +10 -0
- package/dist/cjs/range-calendar/range-calendar.cjs +188 -0
- package/dist/esm/calendar/agnostic-calendar-state-context.js +10 -0
- package/dist/esm/calendar/calendar-bottom-content.js +49 -0
- package/dist/esm/calendar/calendar-grid-header.js +26 -0
- package/dist/esm/calendar/calendar-header.js +72 -0
- package/dist/esm/calendar/calendar-month-day-selector.js +84 -0
- package/dist/esm/calendar/calendar-style-context.js +1 -25
- package/dist/esm/calendar/calendar.js +147 -9
- package/dist/esm/calendar/hooks/index.js +3 -0
- package/dist/esm/calendar/hooks/use-calendar-i18n.js +30 -0
- package/dist/esm/calendar/hooks/use-calendar-selectors.js +39 -0
- package/dist/esm/calendar/index.js +2 -2
- package/dist/esm/index.js +5 -4
- package/dist/esm/range-calendar/index.js +2 -0
- package/dist/esm/range-calendar/range-calendar.js +184 -0
- package/dist/types/calendar/agnostic-calendar-state-context.d.ts +3 -0
- package/dist/types/calendar/agnostic-calendar-state-context.d.ts.map +1 -0
- package/dist/types/calendar/calendar-bottom-content.d.ts +4 -0
- package/dist/types/calendar/calendar-bottom-content.d.ts.map +1 -0
- package/dist/types/calendar/calendar-grid-header.d.ts +2 -0
- package/dist/types/calendar/calendar-grid-header.d.ts.map +1 -0
- package/dist/types/calendar/calendar-header.d.ts +6 -0
- package/dist/types/calendar/calendar-header.d.ts.map +1 -0
- package/dist/types/calendar/calendar-month-day-selector.d.ts +2 -0
- package/dist/types/calendar/calendar-month-day-selector.d.ts.map +1 -0
- package/dist/types/calendar/calendar-style-context.d.ts +10 -1030
- package/dist/types/calendar/calendar-style-context.d.ts.map +1 -1
- package/dist/types/calendar/calendar.d.ts +5 -2
- package/dist/types/calendar/calendar.d.ts.map +1 -1
- package/dist/types/calendar/hooks/index.d.ts +3 -0
- package/dist/types/calendar/hooks/index.d.ts.map +1 -0
- package/dist/types/calendar/hooks/use-calendar-i18n.d.ts +4 -0
- package/dist/types/calendar/hooks/use-calendar-i18n.d.ts.map +1 -0
- package/dist/types/calendar/hooks/use-calendar-selectors.d.ts +13 -0
- package/dist/types/calendar/hooks/use-calendar-selectors.d.ts.map +1 -0
- package/dist/types/calendar/types.d.ts +5 -4
- package/dist/types/calendar/types.d.ts.map +1 -1
- package/dist/types/index.d.mts +1 -0
- package/dist/types/index.d.ts +1 -0
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/range-calendar/index.d.ts +2 -0
- package/dist/types/range-calendar/index.d.ts.map +1 -0
- package/dist/types/range-calendar/range-calendar.d.ts +69 -0
- package/dist/types/range-calendar/range-calendar.d.ts.map +1 -0
- package/dist/types/tag-field/tag-field-tag-list.d.ts.map +1 -1
- package/package.json +4 -4
- package/dist/cjs/calendar/calendar-base.cjs +0 -347
- package/dist/esm/calendar/calendar-base.js +0 -343
- package/dist/types/calendar/calendar-base.d.ts +0 -14
- package/dist/types/calendar/calendar-base.d.ts.map +0 -1
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
'use strict';
|
|
4
|
+
|
|
5
|
+
var context = require('../system/react-utils/context.cjs');
|
|
6
|
+
|
|
7
|
+
const [AgnosticCalendarStateContext, useAgnosticCalendarStateContext] = context.createContext({
|
|
8
|
+
name: "AgnosticCalendarStateContext",
|
|
9
|
+
strict: true
|
|
10
|
+
});
|
|
11
|
+
|
|
12
|
+
exports.AgnosticCalendarStateContext = AgnosticCalendarStateContext;
|
|
13
|
+
exports.useAgnosticCalendarStateContext = useAgnosticCalendarStateContext;
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
'use strict';
|
|
4
|
+
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var react = require('react');
|
|
7
|
+
var date = require('@internationalized/date');
|
|
8
|
+
var button = require('../button/button.cjs');
|
|
9
|
+
var agnosticCalendarStateContext = require('./agnostic-calendar-state-context.cjs');
|
|
10
|
+
var calendarStyleContext = require('./calendar-style-context.cjs');
|
|
11
|
+
var useCalendarI18n = require('./hooks/use-calendar-i18n.cjs');
|
|
12
|
+
|
|
13
|
+
const CalendarBottomContent = ({
|
|
14
|
+
bottomContent,
|
|
15
|
+
showTodayButton
|
|
16
|
+
}) => {
|
|
17
|
+
const state = react.useContext(agnosticCalendarStateContext.AgnosticCalendarStateContext);
|
|
18
|
+
const { slots, classNames, size } = calendarStyleContext.useCalendarStyleContext();
|
|
19
|
+
const formatMessage = useCalendarI18n.useCalendarI18n();
|
|
20
|
+
if (bottomContent) {
|
|
21
|
+
return bottomContent;
|
|
22
|
+
}
|
|
23
|
+
if (!showTodayButton) {
|
|
24
|
+
return null;
|
|
25
|
+
}
|
|
26
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
27
|
+
"div",
|
|
28
|
+
{
|
|
29
|
+
className: slots.bottomContentWrapper({
|
|
30
|
+
className: classNames?.bottomContentWrapper
|
|
31
|
+
}),
|
|
32
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
33
|
+
button.Button,
|
|
34
|
+
{
|
|
35
|
+
isDisabled: state.isDisabled,
|
|
36
|
+
variant: "clear",
|
|
37
|
+
color: "sub",
|
|
38
|
+
size,
|
|
39
|
+
slot: null,
|
|
40
|
+
className: slots.todayButton({ className: classNames?.todayButton }),
|
|
41
|
+
onPress: () => {
|
|
42
|
+
state.setFocusedDate(date.today(date.getLocalTimeZone()));
|
|
43
|
+
},
|
|
44
|
+
children: formatMessage("today")
|
|
45
|
+
}
|
|
46
|
+
)
|
|
47
|
+
}
|
|
48
|
+
);
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
exports.CalendarBottomContent = CalendarBottomContent;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
'use strict';
|
|
4
|
+
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var reactAriaComponents = require('react-aria-components');
|
|
7
|
+
var calendarStyleContext = require('./calendar-style-context.cjs');
|
|
8
|
+
|
|
9
|
+
function CalendarGridHeader() {
|
|
10
|
+
const { slots, classNames } = calendarStyleContext.useCalendarStyleContext();
|
|
11
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
12
|
+
reactAriaComponents.CalendarGridHeader,
|
|
13
|
+
{
|
|
14
|
+
className: slots.gridHeader({ className: classNames?.gridHeader }),
|
|
15
|
+
children: (day) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
16
|
+
reactAriaComponents.CalendarHeaderCell,
|
|
17
|
+
{
|
|
18
|
+
className: slots.gridHeaderCell({
|
|
19
|
+
className: classNames?.gridHeaderCell
|
|
20
|
+
}),
|
|
21
|
+
children: day
|
|
22
|
+
}
|
|
23
|
+
)
|
|
24
|
+
}
|
|
25
|
+
);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
exports.CalendarGridHeader = CalendarGridHeader;
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
'use strict';
|
|
4
|
+
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var react = require('react');
|
|
7
|
+
var reactAriaComponents = require('react-aria-components');
|
|
8
|
+
var button = require('../button/button.cjs');
|
|
9
|
+
var agnosticCalendarStateContext = require('./agnostic-calendar-state-context.cjs');
|
|
10
|
+
var calendarMonthDaySelector = require('./calendar-month-day-selector.cjs');
|
|
11
|
+
var calendarStyleContext = require('./calendar-style-context.cjs');
|
|
12
|
+
var utils = require('./utils.cjs');
|
|
13
|
+
var chevronRight = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-right.cjs');
|
|
14
|
+
var chevronLeft = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-left.cjs');
|
|
15
|
+
|
|
16
|
+
function CalendarHeader({ offsetMonths = 0 }) {
|
|
17
|
+
const { direction } = reactAriaComponents.useLocale();
|
|
18
|
+
const { slots, classNames, size } = calendarStyleContext.useCalendarStyleContext();
|
|
19
|
+
const state = react.useContext(agnosticCalendarStateContext.AgnosticCalendarStateContext);
|
|
20
|
+
const monthYearTitle = utils.useLocalizedMonthYear(
|
|
21
|
+
state.visibleRange.start.add({ months: offsetMonths }),
|
|
22
|
+
state.timeZone
|
|
23
|
+
);
|
|
24
|
+
if (offsetMonths === 0) {
|
|
25
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: slots.header({ className: classNames?.header }), children: [
|
|
26
|
+
/* @__PURE__ */ jsxRuntime.jsx(calendarMonthDaySelector.CalendarMonthDaySelector, {}),
|
|
27
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
28
|
+
reactAriaComponents.Group,
|
|
29
|
+
{
|
|
30
|
+
className: slots.buttonGroup({ className: classNames?.buttonGroup }),
|
|
31
|
+
children: [
|
|
32
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
33
|
+
button.Button,
|
|
34
|
+
{
|
|
35
|
+
size,
|
|
36
|
+
isIconOnly: true,
|
|
37
|
+
variant: "clear",
|
|
38
|
+
color: "sub",
|
|
39
|
+
slot: "previous",
|
|
40
|
+
className: slots.prevButton({ className: classNames?.prevButton }),
|
|
41
|
+
children: direction === "rtl" ? /* @__PURE__ */ jsxRuntime.jsx(chevronRight.default, { "aria-hidden": true }) : /* @__PURE__ */ jsxRuntime.jsx(chevronLeft.default, { "aria-hidden": true })
|
|
42
|
+
}
|
|
43
|
+
),
|
|
44
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
45
|
+
button.Button,
|
|
46
|
+
{
|
|
47
|
+
size,
|
|
48
|
+
variant: "clear",
|
|
49
|
+
color: "sub",
|
|
50
|
+
isIconOnly: true,
|
|
51
|
+
slot: "next",
|
|
52
|
+
className: slots.nextButton({
|
|
53
|
+
className: classNames?.nextButton
|
|
54
|
+
}),
|
|
55
|
+
children: direction === "rtl" ? /* @__PURE__ */ jsxRuntime.jsx(chevronLeft.default, { "aria-hidden": true }) : /* @__PURE__ */ jsxRuntime.jsx(chevronRight.default, { "aria-hidden": true })
|
|
56
|
+
}
|
|
57
|
+
)
|
|
58
|
+
]
|
|
59
|
+
}
|
|
60
|
+
)
|
|
61
|
+
] });
|
|
62
|
+
}
|
|
63
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
64
|
+
reactAriaComponents.Heading,
|
|
65
|
+
{
|
|
66
|
+
className: slots.header({ className: classNames?.header }),
|
|
67
|
+
"aria-hidden": true,
|
|
68
|
+
level: 2,
|
|
69
|
+
children: monthYearTitle
|
|
70
|
+
}
|
|
71
|
+
);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
exports.CalendarHeader = CalendarHeader;
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
'use strict';
|
|
4
|
+
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var react = require('react');
|
|
7
|
+
var date = require('@internationalized/date');
|
|
8
|
+
var reactAriaComponents = require('react-aria-components');
|
|
9
|
+
var agnosticCalendarStateContext = require('./agnostic-calendar-state-context.cjs');
|
|
10
|
+
var calendarStyleContext = require('./calendar-style-context.cjs');
|
|
11
|
+
var useCalendarSelectors = require('./hooks/use-calendar-selectors.cjs');
|
|
12
|
+
var select = require('../select/select.cjs');
|
|
13
|
+
var selectItem = require('../select/select-item.cjs');
|
|
14
|
+
var useCalendarI18n = require('./hooks/use-calendar-i18n.cjs');
|
|
15
|
+
|
|
16
|
+
const CalendarMonthDaySelector = () => {
|
|
17
|
+
const { slots, size, classNames } = calendarStyleContext.useCalendarStyleContext();
|
|
18
|
+
const state = react.useContext(agnosticCalendarStateContext.AgnosticCalendarStateContext);
|
|
19
|
+
const { months, years, datePartOrder } = useCalendarSelectors.useCalendarSelectors(state);
|
|
20
|
+
const formatMessage = useCalendarI18n.useCalendarI18n();
|
|
21
|
+
return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Group, { className: slots.selectors({ className: classNames?.selectors }), children: datePartOrder.map((part) => {
|
|
22
|
+
if (part === "month") {
|
|
23
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
24
|
+
select.Select,
|
|
25
|
+
{
|
|
26
|
+
isDisabled: state.isDisabled,
|
|
27
|
+
size,
|
|
28
|
+
items: months,
|
|
29
|
+
variant: "clear",
|
|
30
|
+
classNames: {
|
|
31
|
+
trigger: slots.monthSelector({
|
|
32
|
+
className: classNames?.monthSelector
|
|
33
|
+
}),
|
|
34
|
+
list: slots.monthList({ className: classNames?.monthList }),
|
|
35
|
+
selectedText: slots.selectorText({
|
|
36
|
+
className: classNames?.selectorText
|
|
37
|
+
}),
|
|
38
|
+
popover: "min-w-[12ch]"
|
|
39
|
+
},
|
|
40
|
+
selectedKey: state.visibleRange.start.month,
|
|
41
|
+
"aria-label": formatMessage("selectMonth"),
|
|
42
|
+
onSelectionChange: (month) => {
|
|
43
|
+
state.setFocusedDate(
|
|
44
|
+
new date.CalendarDate(state.focusedDate.year, Number(month), 1)
|
|
45
|
+
);
|
|
46
|
+
},
|
|
47
|
+
children: (month) => /* @__PURE__ */ jsxRuntime.jsx(selectItem.SelectItem, { children: month.textValue })
|
|
48
|
+
},
|
|
49
|
+
part
|
|
50
|
+
);
|
|
51
|
+
}
|
|
52
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
53
|
+
select.Select,
|
|
54
|
+
{
|
|
55
|
+
isDisabled: state.isDisabled,
|
|
56
|
+
size,
|
|
57
|
+
variant: "clear",
|
|
58
|
+
items: years,
|
|
59
|
+
classNames: {
|
|
60
|
+
trigger: slots.yearSelector({
|
|
61
|
+
className: classNames?.yearSelector
|
|
62
|
+
}),
|
|
63
|
+
list: slots.yearList({ className: classNames?.yearList }),
|
|
64
|
+
selectedText: slots.selectorText({
|
|
65
|
+
className: classNames?.selectorText
|
|
66
|
+
})
|
|
67
|
+
},
|
|
68
|
+
selectedKey: state.visibleRange.start.year,
|
|
69
|
+
"aria-label": formatMessage("selectYear"),
|
|
70
|
+
onSelectionChange: (year) => {
|
|
71
|
+
state.setFocusedDate(
|
|
72
|
+
new date.CalendarDate(
|
|
73
|
+
Number(year),
|
|
74
|
+
state.focusedDate.month,
|
|
75
|
+
state.focusedDate.day
|
|
76
|
+
)
|
|
77
|
+
);
|
|
78
|
+
},
|
|
79
|
+
children: (year) => /* @__PURE__ */ jsxRuntime.jsx(selectItem.SelectItem, { children: year.textValue })
|
|
80
|
+
},
|
|
81
|
+
part
|
|
82
|
+
);
|
|
83
|
+
}) });
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
exports.CalendarMonthDaySelector = CalendarMonthDaySelector;
|
|
@@ -2,32 +2,8 @@
|
|
|
2
2
|
"use client";
|
|
3
3
|
'use strict';
|
|
4
4
|
|
|
5
|
-
var useDeepCompare = require('use-deep-compare');
|
|
6
|
-
var ouiTheme = require('@opengovsg/oui-theme');
|
|
7
|
-
var utils = require('../system/utils.cjs');
|
|
8
5
|
var context = require('../system/react-utils/context.cjs');
|
|
9
6
|
|
|
10
|
-
function useProvideCalendarStyles(originalProps) {
|
|
11
|
-
const [props, variantProps] = utils.mapPropsVariants(
|
|
12
|
-
originalProps,
|
|
13
|
-
ouiTheme.calendarStyles.variantKeys
|
|
14
|
-
);
|
|
15
|
-
const { errorMessage, className, classNames, ...restProps } = props;
|
|
16
|
-
const slots = useDeepCompare.useDeepCompareMemo(
|
|
17
|
-
() => ouiTheme.calendarStyles(variantProps),
|
|
18
|
-
[variantProps]
|
|
19
|
-
);
|
|
20
|
-
return {
|
|
21
|
-
context: {
|
|
22
|
-
slots,
|
|
23
|
-
classNames,
|
|
24
|
-
className,
|
|
25
|
-
size: variantProps.size ?? ouiTheme.calendarStyles.defaultVariants.size,
|
|
26
|
-
errorMessage
|
|
27
|
-
},
|
|
28
|
-
calendarProps: { ...restProps, onChange: restProps.onChange }
|
|
29
|
-
};
|
|
30
|
-
}
|
|
31
7
|
const [CalendarStyleContext, useCalendarStyleContext] = context.createContext({
|
|
32
8
|
name: "CalendarStyleContext",
|
|
33
9
|
strict: true
|
|
@@ -35,4 +11,3 @@ const [CalendarStyleContext, useCalendarStyleContext] = context.createContext({
|
|
|
35
11
|
|
|
36
12
|
exports.CalendarStyleContext = CalendarStyleContext;
|
|
37
13
|
exports.useCalendarStyleContext = useCalendarStyleContext;
|
|
38
|
-
exports.useProvideCalendarStyles = useProvideCalendarStyles;
|
|
@@ -3,14 +3,153 @@
|
|
|
3
3
|
'use strict';
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var react = require('react');
|
|
7
|
+
var date = require('@internationalized/date');
|
|
6
8
|
var reactAriaComponents = require('react-aria-components');
|
|
9
|
+
var useDeepCompare = require('use-deep-compare');
|
|
10
|
+
var ouiTheme = require('@opengovsg/oui-theme');
|
|
7
11
|
var utils = require('../system/utils.cjs');
|
|
8
|
-
var
|
|
12
|
+
var agnosticCalendarStateContext = require('./agnostic-calendar-state-context.cjs');
|
|
13
|
+
var calendarBottomContent = require('./calendar-bottom-content.cjs');
|
|
14
|
+
var calendarGridHeader = require('./calendar-grid-header.cjs');
|
|
15
|
+
var calendarHeader = require('./calendar-header.cjs');
|
|
9
16
|
var calendarStyleContext = require('./calendar-style-context.cjs');
|
|
10
17
|
|
|
11
|
-
const Calendar = utils.forwardRef(function Calendar2(
|
|
12
|
-
const
|
|
13
|
-
|
|
18
|
+
const Calendar = utils.forwardRef(function Calendar2(originalProps, ref) {
|
|
19
|
+
const [props, variantProps] = utils.mapPropsVariants(
|
|
20
|
+
originalProps,
|
|
21
|
+
ouiTheme.calendarStyles.variantKeys
|
|
22
|
+
);
|
|
23
|
+
const {
|
|
24
|
+
className,
|
|
25
|
+
classNames,
|
|
26
|
+
weekdayStyle = "narrow",
|
|
27
|
+
minValue = new date.CalendarDate(1900, 0, 1),
|
|
28
|
+
maxValue = new date.CalendarDate(2100, 12, 31),
|
|
29
|
+
bottomContent,
|
|
30
|
+
showTodayButton = true,
|
|
31
|
+
errorMessage,
|
|
32
|
+
...restProps
|
|
33
|
+
} = props;
|
|
34
|
+
const slots = useDeepCompare.useDeepCompareMemo(
|
|
35
|
+
() => ouiTheme.calendarStyles(variantProps),
|
|
36
|
+
[variantProps]
|
|
37
|
+
);
|
|
38
|
+
const context = react.useMemo(
|
|
39
|
+
() => ({
|
|
40
|
+
slots,
|
|
41
|
+
classNames,
|
|
42
|
+
className,
|
|
43
|
+
size: variantProps.size ?? ouiTheme.calendarStyles.defaultVariants.size
|
|
44
|
+
}),
|
|
45
|
+
[className, classNames, slots, variantProps.size]
|
|
46
|
+
);
|
|
47
|
+
const numberOfVisibleMonths = props.visibleDuration?.months ?? 1;
|
|
48
|
+
const dateToHighlight = react.useMemo(() => {
|
|
49
|
+
if (props.defaultFocusedValue !== void 0) {
|
|
50
|
+
return props.defaultFocusedValue;
|
|
51
|
+
}
|
|
52
|
+
return date.today(date.getLocalTimeZone());
|
|
53
|
+
}, [props.defaultFocusedValue]);
|
|
54
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
55
|
+
reactAriaComponents.Calendar,
|
|
56
|
+
{
|
|
57
|
+
pageBehavior: "single",
|
|
58
|
+
...restProps,
|
|
59
|
+
ref,
|
|
60
|
+
minValue,
|
|
61
|
+
maxValue,
|
|
62
|
+
className: reactAriaComponents.composeRenderProps(
|
|
63
|
+
className,
|
|
64
|
+
(className2, renderProps) => slots.base({
|
|
65
|
+
className: ouiTheme.cn(classNames?.base, className2),
|
|
66
|
+
...renderProps
|
|
67
|
+
})
|
|
68
|
+
),
|
|
69
|
+
children: [
|
|
70
|
+
/* @__PURE__ */ jsxRuntime.jsx(CalendarStateWrapper, { children: /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.Provider, { values: [[calendarStyleContext.CalendarStyleContext, context]], children: [
|
|
71
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
72
|
+
"div",
|
|
73
|
+
{
|
|
74
|
+
className: slots.gridWrapper({
|
|
75
|
+
className: classNames?.gridWrapper
|
|
76
|
+
}),
|
|
77
|
+
children: Array.from({ length: numberOfVisibleMonths }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
78
|
+
"div",
|
|
79
|
+
{
|
|
80
|
+
className: slots.calendar({ className: classNames?.calendar }),
|
|
81
|
+
children: [
|
|
82
|
+
/* @__PURE__ */ jsxRuntime.jsx(calendarHeader.CalendarHeader, { offsetMonths: index }),
|
|
83
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
84
|
+
reactAriaComponents.CalendarGrid,
|
|
85
|
+
{
|
|
86
|
+
className: slots.grid({ className: classNames?.grid }),
|
|
87
|
+
weekdayStyle,
|
|
88
|
+
offset: { months: index },
|
|
89
|
+
children: [
|
|
90
|
+
/* @__PURE__ */ jsxRuntime.jsx(calendarGridHeader.CalendarGridHeader, {}),
|
|
91
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
92
|
+
reactAriaComponents.CalendarGridBody,
|
|
93
|
+
{
|
|
94
|
+
className: slots.gridBody({
|
|
95
|
+
className: classNames?.gridBody
|
|
96
|
+
}),
|
|
97
|
+
children: (date) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
98
|
+
reactAriaComponents.CalendarCell,
|
|
99
|
+
{
|
|
100
|
+
className: reactAriaComponents.composeRenderProps(
|
|
101
|
+
classNames?.cell,
|
|
102
|
+
(className2, renderProps) => slots.cell({
|
|
103
|
+
className: className2,
|
|
104
|
+
isMultipleMonths: numberOfVisibleMonths >= 2,
|
|
105
|
+
...renderProps
|
|
106
|
+
})
|
|
107
|
+
),
|
|
108
|
+
"data-highlighted": ouiTheme.dataAttr(
|
|
109
|
+
dateToHighlight ? date.compare(dateToHighlight) === 0 : false
|
|
110
|
+
),
|
|
111
|
+
date
|
|
112
|
+
}
|
|
113
|
+
)
|
|
114
|
+
}
|
|
115
|
+
)
|
|
116
|
+
]
|
|
117
|
+
}
|
|
118
|
+
)
|
|
119
|
+
]
|
|
120
|
+
},
|
|
121
|
+
index
|
|
122
|
+
))
|
|
123
|
+
}
|
|
124
|
+
),
|
|
125
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
126
|
+
calendarBottomContent.CalendarBottomContent,
|
|
127
|
+
{
|
|
128
|
+
bottomContent,
|
|
129
|
+
showTodayButton
|
|
130
|
+
}
|
|
131
|
+
)
|
|
132
|
+
] }) }),
|
|
133
|
+
errorMessage && /* @__PURE__ */ jsxRuntime.jsx(
|
|
134
|
+
reactAriaComponents.Text,
|
|
135
|
+
{
|
|
136
|
+
className: slots.errorMessage({
|
|
137
|
+
className: classNames?.errorMessage
|
|
138
|
+
}),
|
|
139
|
+
slot: "errorMessage",
|
|
140
|
+
children: errorMessage
|
|
141
|
+
}
|
|
142
|
+
)
|
|
143
|
+
]
|
|
144
|
+
}
|
|
145
|
+
);
|
|
14
146
|
});
|
|
147
|
+
const CalendarStateWrapper = ({
|
|
148
|
+
children
|
|
149
|
+
}) => {
|
|
150
|
+
const state = react.useContext(reactAriaComponents.CalendarStateContext);
|
|
151
|
+
return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Provider, { values: [[agnosticCalendarStateContext.AgnosticCalendarStateContext, state]], children });
|
|
152
|
+
};
|
|
15
153
|
|
|
16
154
|
exports.Calendar = Calendar;
|
|
155
|
+
exports.CalendarStateWrapper = CalendarStateWrapper;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var useCalendarI18n = require('./use-calendar-i18n.cjs');
|
|
5
|
+
var useCalendarSelectors = require('./use-calendar-selectors.cjs');
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
exports.i18nStrings = useCalendarI18n.i18nStrings;
|
|
10
|
+
exports.useCalendarI18n = useCalendarI18n.useCalendarI18n;
|
|
11
|
+
exports.useCalendarSelectors = useCalendarSelectors.useCalendarSelectors;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var reactAria = require('react-aria');
|
|
5
|
+
|
|
6
|
+
const i18nStrings = {
|
|
7
|
+
"en-SG": {
|
|
8
|
+
selectMonth: "Select month",
|
|
9
|
+
selectYear: "Select year",
|
|
10
|
+
today: "Today"
|
|
11
|
+
},
|
|
12
|
+
"zh-SG": {
|
|
13
|
+
selectMonth: "\u9009\u62E9\u6708\u4EFD",
|
|
14
|
+
selectYear: "\u9009\u62E9\u5E74\u4EFD",
|
|
15
|
+
today: "\u4ECA\u5929"
|
|
16
|
+
},
|
|
17
|
+
"ms-SG": {
|
|
18
|
+
selectMonth: "Pilih bulan",
|
|
19
|
+
selectYear: "Pilih tahun",
|
|
20
|
+
today: "Hari ini"
|
|
21
|
+
},
|
|
22
|
+
"ta-SG": {
|
|
23
|
+
selectMonth: "\u0BAE\u0BBE\u0BA4\u0BA4\u0BCD\u0BA4\u0BC8 \u0BA4\u0BC7\u0BB0\u0BCD\u0BA8\u0BCD\u0BA4\u0BC6\u0B9F\u0BC1\u0B95\u0BCD\u0B95\u0BB5\u0BC1\u0BAE\u0BCD",
|
|
24
|
+
selectYear: "\u0B86\u0BA3\u0BCD\u0B9F\u0BC8 \u0BA4\u0BC7\u0BB0\u0BCD\u0BA8\u0BCD\u0BA4\u0BC6\u0B9F\u0BC1\u0B95\u0BCD\u0B95\u0BB5\u0BC1\u0BAE\u0BCD",
|
|
25
|
+
today: "\u0B87\u0BA9\u0BCD\u0BB1\u0BC1"
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
const useCalendarI18n = () => {
|
|
29
|
+
return reactAria.useMessageFormatter(i18nStrings);
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
exports.i18nStrings = i18nStrings;
|
|
33
|
+
exports.useCalendarI18n = useCalendarI18n;
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
'use strict';
|
|
4
|
+
|
|
5
|
+
var react = require('react');
|
|
6
|
+
var reactAria = require('react-aria');
|
|
7
|
+
var utils = require('../utils.cjs');
|
|
8
|
+
|
|
9
|
+
const useCalendarSelectors = (state) => {
|
|
10
|
+
const yearRange = react.useMemo(() => {
|
|
11
|
+
const start = state.minValue.year ?? 1900;
|
|
12
|
+
const end = state.maxValue.year ?? 2100;
|
|
13
|
+
return { start, end };
|
|
14
|
+
}, [state.maxValue, state.minValue]);
|
|
15
|
+
const dateFormatter = reactAria.useDateFormatter(state);
|
|
16
|
+
const datePartOrder = react.useMemo(() => {
|
|
17
|
+
const parts = dateFormatter.formatToParts(
|
|
18
|
+
state.visibleRange.start.toDate(state.timeZone)
|
|
19
|
+
);
|
|
20
|
+
const filteredParts = parts.filter(
|
|
21
|
+
(part) => ["year", "month"].includes(part.type)
|
|
22
|
+
);
|
|
23
|
+
const filteredPartNames = filteredParts.map((part) => part.type);
|
|
24
|
+
return filteredPartNames;
|
|
25
|
+
}, [dateFormatter, state.timeZone, state.visibleRange.start]);
|
|
26
|
+
const months = utils.useGenerateLocalizedMonths(state.timeZone);
|
|
27
|
+
const years = utils.useGenerateLocalizedYears(
|
|
28
|
+
yearRange.start,
|
|
29
|
+
yearRange.end,
|
|
30
|
+
state.timeZone
|
|
31
|
+
);
|
|
32
|
+
return react.useMemo(() => {
|
|
33
|
+
return {
|
|
34
|
+
months,
|
|
35
|
+
years,
|
|
36
|
+
datePartOrder
|
|
37
|
+
};
|
|
38
|
+
}, [datePartOrder, months, years]);
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
exports.useCalendarSelectors = useCalendarSelectors;
|
|
@@ -9,9 +9,9 @@ var date = require('@internationalized/date');
|
|
|
9
9
|
|
|
10
10
|
|
|
11
11
|
exports.Calendar = calendar.Calendar;
|
|
12
|
+
exports.CalendarStateWrapper = calendar.CalendarStateWrapper;
|
|
12
13
|
exports.CalendarStyleContext = calendarStyleContext.CalendarStyleContext;
|
|
13
14
|
exports.useCalendarStyleContext = calendarStyleContext.useCalendarStyleContext;
|
|
14
|
-
exports.useProvideCalendarStyles = calendarStyleContext.useProvideCalendarStyles;
|
|
15
15
|
exports.getEraFormat = utils.getEraFormat;
|
|
16
16
|
exports.useGenerateLocalizedMonths = utils.useGenerateLocalizedMonths;
|
|
17
17
|
exports.useGenerateLocalizedYears = utils.useGenerateLocalizedYears;
|
package/dist/cjs/index.cjs
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
|
+
var toggle = require('./toggle/toggle.cjs');
|
|
5
|
+
var textField = require('./text-field/text-field.cjs');
|
|
4
6
|
var useControllableState = require('./hooks/use-controllable-state.cjs');
|
|
5
7
|
var button = require('./button/button.cjs');
|
|
6
8
|
var govtBanner = require('./govt-banner/govt-banner.cjs');
|
|
@@ -8,10 +10,8 @@ var ripple = require('./ripple/ripple.cjs');
|
|
|
8
10
|
var useRipple = require('./ripple/use-ripple.cjs');
|
|
9
11
|
var spinner = require('./spinner/spinner.cjs');
|
|
10
12
|
var useSpinner = require('./spinner/use-spinner.cjs');
|
|
11
|
-
var toggle = require('./toggle/toggle.cjs');
|
|
12
13
|
var skipNavLink = require('./skip-nav-link/skip-nav-link.cjs');
|
|
13
14
|
var input = require('./input/input.cjs');
|
|
14
|
-
var textField = require('./text-field/text-field.cjs');
|
|
15
15
|
var field = require('./field/field.cjs');
|
|
16
16
|
var textArea = require('./text-area/text-area.cjs');
|
|
17
17
|
var textAreaField = require('./text-area-field/text-area-field.cjs');
|
|
@@ -30,9 +30,12 @@ var date = require('@internationalized/date');
|
|
|
30
30
|
var calendar = require('./calendar/calendar.cjs');
|
|
31
31
|
var calendarStyleContext = require('./calendar/calendar-style-context.cjs');
|
|
32
32
|
var utils = require('./calendar/utils.cjs');
|
|
33
|
+
var rangeCalendar = require('./range-calendar/range-calendar.cjs');
|
|
33
34
|
|
|
34
35
|
|
|
35
36
|
|
|
37
|
+
exports.Toggle = toggle.Toggle;
|
|
38
|
+
exports.TextField = textField.TextField;
|
|
36
39
|
exports.useControllableState = useControllableState.useControllableState;
|
|
37
40
|
exports.Button = button.Button;
|
|
38
41
|
exports.GovtBanner = govtBanner.GovtBanner;
|
|
@@ -40,10 +43,8 @@ exports.Ripple = ripple.Ripple;
|
|
|
40
43
|
exports.useRipple = useRipple.useRipple;
|
|
41
44
|
exports.Spinner = spinner.Spinner;
|
|
42
45
|
exports.useSpinner = useSpinner.useSpinner;
|
|
43
|
-
exports.Toggle = toggle.Toggle;
|
|
44
46
|
exports.SkipNavLink = skipNavLink.SkipNavLink;
|
|
45
47
|
exports.Input = input.Input;
|
|
46
|
-
exports.TextField = textField.TextField;
|
|
47
48
|
exports.Description = field.Description;
|
|
48
49
|
exports.FieldError = field.FieldError;
|
|
49
50
|
exports.FieldGroup = field.FieldGroup;
|
|
@@ -69,10 +70,13 @@ Object.defineProperty(exports, "CalendarDate", {
|
|
|
69
70
|
get: function () { return date.CalendarDate; }
|
|
70
71
|
});
|
|
71
72
|
exports.Calendar = calendar.Calendar;
|
|
73
|
+
exports.CalendarStateWrapper = calendar.CalendarStateWrapper;
|
|
72
74
|
exports.CalendarStyleContext = calendarStyleContext.CalendarStyleContext;
|
|
73
75
|
exports.useCalendarStyleContext = calendarStyleContext.useCalendarStyleContext;
|
|
74
|
-
exports.useProvideCalendarStyles = calendarStyleContext.useProvideCalendarStyles;
|
|
75
76
|
exports.getEraFormat = utils.getEraFormat;
|
|
76
77
|
exports.useGenerateLocalizedMonths = utils.useGenerateLocalizedMonths;
|
|
77
78
|
exports.useGenerateLocalizedYears = utils.useGenerateLocalizedYears;
|
|
78
79
|
exports.useLocalizedMonthYear = utils.useLocalizedMonthYear;
|
|
80
|
+
exports.RangeCalendar = rangeCalendar.RangeCalendar;
|
|
81
|
+
exports.RangeCalendarCell = rangeCalendar.RangeCalendarCell;
|
|
82
|
+
exports.RangeCalendarStateWrapper = rangeCalendar.RangeCalendarStateWrapper;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var rangeCalendar = require('./range-calendar.cjs');
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
exports.RangeCalendar = rangeCalendar.RangeCalendar;
|
|
9
|
+
exports.RangeCalendarCell = rangeCalendar.RangeCalendarCell;
|
|
10
|
+
exports.RangeCalendarStateWrapper = rangeCalendar.RangeCalendarStateWrapper;
|