@opengovsg/oui 0.0.9 → 0.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (111) hide show
  1. package/dist/cjs/button/button.cjs +1 -1
  2. package/dist/cjs/calendar/agnostic-calendar-state-context.cjs +13 -0
  3. package/dist/cjs/calendar/calendar-bottom-content.cjs +51 -0
  4. package/dist/cjs/calendar/calendar-grid-header.cjs +28 -0
  5. package/dist/cjs/calendar/calendar-header.cjs +74 -0
  6. package/dist/cjs/calendar/calendar-month-day-selector.cjs +86 -0
  7. package/dist/cjs/calendar/calendar-style-context.cjs +0 -25
  8. package/dist/cjs/calendar/calendar.cjs +143 -4
  9. package/dist/cjs/calendar/hooks/index.cjs +11 -0
  10. package/dist/cjs/calendar/hooks/use-calendar-i18n.cjs +33 -0
  11. package/dist/cjs/calendar/hooks/use-calendar-selectors.cjs +41 -0
  12. package/dist/cjs/calendar/index.cjs +1 -1
  13. package/dist/cjs/combo-box/combo-box-fuzzy.cjs +3 -3
  14. package/dist/cjs/combo-box/combo-box-item.cjs +2 -2
  15. package/dist/cjs/combo-box/combo-box.cjs +3 -2
  16. package/dist/cjs/index.cjs +38 -23
  17. package/dist/cjs/menu/index.cjs +15 -0
  18. package/dist/cjs/menu/menu.cjs +229 -0
  19. package/dist/cjs/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.cjs +19 -0
  20. package/dist/cjs/popover/index.cjs +8 -0
  21. package/dist/cjs/popover/popover.cjs +46 -0
  22. package/dist/cjs/range-calendar/index.cjs +10 -0
  23. package/dist/cjs/range-calendar/range-calendar.cjs +188 -0
  24. package/dist/cjs/select/select.cjs +4 -1
  25. package/dist/cjs/system/react-utils/context.cjs +3 -2
  26. package/dist/cjs/tag-field/tag-field-item.cjs +8 -3
  27. package/dist/cjs/tag-field/tag-field.cjs +2 -1
  28. package/dist/esm/button/button.js +1 -1
  29. package/dist/esm/calendar/agnostic-calendar-state-context.js +10 -0
  30. package/dist/esm/calendar/calendar-bottom-content.js +49 -0
  31. package/dist/esm/calendar/calendar-grid-header.js +26 -0
  32. package/dist/esm/calendar/calendar-header.js +72 -0
  33. package/dist/esm/calendar/calendar-month-day-selector.js +84 -0
  34. package/dist/esm/calendar/calendar-style-context.js +1 -25
  35. package/dist/esm/calendar/calendar.js +147 -9
  36. package/dist/esm/calendar/hooks/index.js +3 -0
  37. package/dist/esm/calendar/hooks/use-calendar-i18n.js +30 -0
  38. package/dist/esm/calendar/hooks/use-calendar-selectors.js +39 -0
  39. package/dist/esm/calendar/index.js +2 -2
  40. package/dist/esm/combo-box/combo-box-fuzzy.js +4 -4
  41. package/dist/esm/combo-box/combo-box-item.js +3 -3
  42. package/dist/esm/combo-box/combo-box.js +4 -3
  43. package/dist/esm/index.js +15 -12
  44. package/dist/esm/menu/index.js +2 -0
  45. package/dist/esm/menu/menu.js +220 -0
  46. package/dist/esm/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.js +14 -0
  47. package/dist/esm/popover/index.js +2 -0
  48. package/dist/esm/popover/popover.js +44 -0
  49. package/dist/esm/range-calendar/index.js +2 -0
  50. package/dist/esm/range-calendar/range-calendar.js +184 -0
  51. package/dist/esm/select/select.js +5 -2
  52. package/dist/esm/system/react-utils/context.js +3 -2
  53. package/dist/esm/tag-field/tag-field-item.js +9 -4
  54. package/dist/esm/tag-field/tag-field.js +3 -2
  55. package/dist/types/calendar/agnostic-calendar-state-context.d.ts +3 -0
  56. package/dist/types/calendar/agnostic-calendar-state-context.d.ts.map +1 -0
  57. package/dist/types/calendar/calendar-bottom-content.d.ts +4 -0
  58. package/dist/types/calendar/calendar-bottom-content.d.ts.map +1 -0
  59. package/dist/types/calendar/calendar-grid-header.d.ts +2 -0
  60. package/dist/types/calendar/calendar-grid-header.d.ts.map +1 -0
  61. package/dist/types/calendar/calendar-header.d.ts +6 -0
  62. package/dist/types/calendar/calendar-header.d.ts.map +1 -0
  63. package/dist/types/calendar/calendar-month-day-selector.d.ts +2 -0
  64. package/dist/types/calendar/calendar-month-day-selector.d.ts.map +1 -0
  65. package/dist/types/calendar/calendar-style-context.d.ts +10 -1030
  66. package/dist/types/calendar/calendar-style-context.d.ts.map +1 -1
  67. package/dist/types/calendar/calendar.d.ts +5 -2
  68. package/dist/types/calendar/calendar.d.ts.map +1 -1
  69. package/dist/types/calendar/hooks/index.d.ts +3 -0
  70. package/dist/types/calendar/hooks/index.d.ts.map +1 -0
  71. package/dist/types/calendar/hooks/use-calendar-i18n.d.ts +4 -0
  72. package/dist/types/calendar/hooks/use-calendar-i18n.d.ts.map +1 -0
  73. package/dist/types/calendar/hooks/use-calendar-selectors.d.ts +13 -0
  74. package/dist/types/calendar/hooks/use-calendar-selectors.d.ts.map +1 -0
  75. package/dist/types/calendar/types.d.ts +5 -4
  76. package/dist/types/calendar/types.d.ts.map +1 -1
  77. package/dist/types/combo-box/combo-box-fuzzy.d.ts +2 -2
  78. package/dist/types/combo-box/combo-box-fuzzy.d.ts.map +1 -1
  79. package/dist/types/combo-box/combo-box-item.d.ts +3 -3
  80. package/dist/types/combo-box/combo-box-item.d.ts.map +1 -1
  81. package/dist/types/combo-box/combo-box.d.ts.map +1 -1
  82. package/dist/types/index.d.mts +3 -0
  83. package/dist/types/index.d.ts +3 -0
  84. package/dist/types/index.d.ts.map +1 -1
  85. package/dist/types/menu/index.d.ts +2 -0
  86. package/dist/types/menu/index.d.ts.map +1 -0
  87. package/dist/types/menu/menu.d.ts +38 -0
  88. package/dist/types/menu/menu.d.ts.map +1 -0
  89. package/dist/types/popover/index.d.ts +2 -0
  90. package/dist/types/popover/index.d.ts.map +1 -0
  91. package/dist/types/popover/popover.d.ts +21 -0
  92. package/dist/types/popover/popover.d.ts.map +1 -0
  93. package/dist/types/range-calendar/index.d.ts +2 -0
  94. package/dist/types/range-calendar/index.d.ts.map +1 -0
  95. package/dist/types/range-calendar/range-calendar.d.ts +69 -0
  96. package/dist/types/range-calendar/range-calendar.d.ts.map +1 -0
  97. package/dist/types/select/select.d.ts +4 -3
  98. package/dist/types/select/select.d.ts.map +1 -1
  99. package/dist/types/system/react-utils/context.d.ts +3 -2
  100. package/dist/types/system/react-utils/context.d.ts.map +1 -1
  101. package/dist/types/tag-field/tag-field-item.d.ts +2 -2
  102. package/dist/types/tag-field/tag-field-item.d.ts.map +1 -1
  103. package/dist/types/tag-field/tag-field-tag-list.d.ts.map +1 -1
  104. package/dist/types/tag-field/tag-field.d.ts.map +1 -1
  105. package/dist/types/tag-field/types.d.ts +3 -3
  106. package/dist/types/tag-field/types.d.ts.map +1 -1
  107. package/package.json +5 -5
  108. package/dist/cjs/calendar/calendar-base.cjs +0 -347
  109. package/dist/esm/calendar/calendar-base.js +0 -343
  110. package/dist/types/calendar/calendar-base.d.ts +0 -14
  111. package/dist/types/calendar/calendar-base.d.ts.map +0 -1
@@ -1,347 +0,0 @@
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 reactAria = require('react-aria');
9
- var reactAriaComponents = require('react-aria-components');
10
- var ouiTheme = require('@opengovsg/oui-theme');
11
- var button = require('../button/button.cjs');
12
- var calendarStyleContext = require('./calendar-style-context.cjs');
13
- var utils = require('./utils.cjs');
14
- 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');
15
- 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');
16
- var select = require('../select/select.cjs');
17
- var selectItem = require('../select/select-item.cjs');
18
-
19
- const useCalendarSelectors = (state) => {
20
- const yearRange = react.useMemo(() => {
21
- const start = state.minValue.year ?? 1900;
22
- const end = state.maxValue.year ?? 2100;
23
- return { start, end };
24
- }, [state.maxValue, state.minValue]);
25
- const dateFormatter = reactAria.useDateFormatter(state);
26
- const datePartOrder = react.useMemo(() => {
27
- const parts = dateFormatter.formatToParts(
28
- state.visibleRange.start.toDate(state.timeZone)
29
- );
30
- const filteredParts = parts.filter(
31
- (part) => ["year", "month"].includes(part.type)
32
- );
33
- const filteredPartNames = filteredParts.map((part) => part.type);
34
- return filteredPartNames;
35
- }, [dateFormatter, state.timeZone, state.visibleRange.start]);
36
- const months = utils.useGenerateLocalizedMonths(state.timeZone);
37
- const years = utils.useGenerateLocalizedYears(
38
- yearRange.start,
39
- yearRange.end,
40
- state.timeZone
41
- );
42
- return react.useMemo(() => {
43
- return {
44
- months,
45
- years,
46
- datePartOrder
47
- };
48
- }, [datePartOrder, months, years]);
49
- };
50
- const i18nStrings = {
51
- "en-SG": {
52
- selectMonth: "Select month",
53
- selectYear: "Select year",
54
- today: "Today"
55
- },
56
- "zh-SG": {
57
- selectMonth: "\u9009\u62E9\u6708\u4EFD",
58
- selectYear: "\u9009\u62E9\u5E74\u4EFD",
59
- today: "\u4ECA\u5929"
60
- },
61
- "ms-SG": {
62
- selectMonth: "Pilih bulan",
63
- selectYear: "Pilih tahun",
64
- today: "Hari ini"
65
- },
66
- "ta-SG": {
67
- 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",
68
- selectYear: "\u0B86\u0BA3\u0BCD\u0B9F\u0BC8 \u0BA4\u0BC7\u0BB0\u0BCD\u0BA8\u0BCD\u0BA4\u0BC6\u0B9F\u0BC1\u0B95\u0BCD\u0B95\u0BB5\u0BC1\u0BAE\u0BCD",
69
- today: "\u0B87\u0BA9\u0BCD\u0BB1\u0BC1"
70
- }
71
- };
72
- const CalendarBottomContent = ({
73
- bottomContent,
74
- showTodayButton
75
- }) => {
76
- const state = react.useContext(reactAriaComponents.CalendarStateContext);
77
- const { slots, classNames, size } = calendarStyleContext.useCalendarStyleContext();
78
- const formatMessage = reactAria.useMessageFormatter(i18nStrings);
79
- if (bottomContent) {
80
- return bottomContent;
81
- }
82
- if (!showTodayButton) {
83
- return null;
84
- }
85
- return /* @__PURE__ */ jsxRuntime.jsx(
86
- "div",
87
- {
88
- className: slots.bottomContentWrapper({
89
- className: classNames?.bottomContentWrapper
90
- }),
91
- children: /* @__PURE__ */ jsxRuntime.jsx(
92
- button.Button,
93
- {
94
- isDisabled: state.isDisabled,
95
- variant: "clear",
96
- color: "sub",
97
- size,
98
- slot: null,
99
- className: slots.todayButton({ className: classNames?.todayButton }),
100
- onPress: () => {
101
- state.setFocusedDate(date.today(date.getLocalTimeZone()));
102
- },
103
- children: formatMessage("today")
104
- }
105
- )
106
- }
107
- );
108
- };
109
- function CalendarBase({
110
- weekdayStyle = "narrow",
111
- calendarRef,
112
- minValue = new date.CalendarDate(1900, 0, 1),
113
- maxValue = new date.CalendarDate(2100, 12, 31),
114
- bottomContent,
115
- showTodayButton = true,
116
- ...props
117
- }) {
118
- const { slots, className, classNames } = calendarStyleContext.useCalendarStyleContext();
119
- const numberOfVisibleMonths = props.visibleDuration?.months ?? 1;
120
- const dateToHighlight = react.useMemo(() => {
121
- return props.defaultFocusedValue ?? date.today(date.getLocalTimeZone());
122
- }, [props.defaultFocusedValue]);
123
- return /* @__PURE__ */ jsxRuntime.jsxs(
124
- reactAriaComponents.Calendar,
125
- {
126
- pageBehavior: "single",
127
- ...props,
128
- ref: calendarRef,
129
- minValue,
130
- maxValue,
131
- className: reactAriaComponents.composeRenderProps(
132
- className,
133
- (className2, renderProps) => slots.base({
134
- className: ouiTheme.cn(classNames?.base, className2),
135
- ...renderProps
136
- })
137
- ),
138
- children: [
139
- /* @__PURE__ */ jsxRuntime.jsx(
140
- "div",
141
- {
142
- className: slots.gridWrapper({
143
- className: classNames?.gridWrapper
144
- }),
145
- children: Array.from({ length: numberOfVisibleMonths }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsxs(
146
- "div",
147
- {
148
- className: slots.calendar({ className: classNames?.calendar }),
149
- children: [
150
- /* @__PURE__ */ jsxRuntime.jsx(CalendarHeader, { offsetMonths: index }),
151
- /* @__PURE__ */ jsxRuntime.jsxs(
152
- reactAriaComponents.CalendarGrid,
153
- {
154
- className: slots.grid({ className: classNames?.grid }),
155
- weekdayStyle,
156
- offset: { months: index },
157
- children: [
158
- /* @__PURE__ */ jsxRuntime.jsx(CalendarGridHeader, {}),
159
- /* @__PURE__ */ jsxRuntime.jsx(
160
- reactAriaComponents.CalendarGridBody,
161
- {
162
- className: slots.gridBody({ className: classNames?.gridBody }),
163
- children: (date) => /* @__PURE__ */ jsxRuntime.jsx(
164
- reactAriaComponents.CalendarCell,
165
- {
166
- className: reactAriaComponents.composeRenderProps(
167
- classNames?.cell,
168
- (className2, renderProps) => slots.cell({
169
- className: className2,
170
- isMultipleMonths: numberOfVisibleMonths >= 2,
171
- isDateHighlighted: date.compare(dateToHighlight) === 0,
172
- ...renderProps
173
- })
174
- ),
175
- date
176
- }
177
- )
178
- }
179
- )
180
- ]
181
- }
182
- )
183
- ]
184
- },
185
- index
186
- ))
187
- }
188
- ),
189
- /* @__PURE__ */ jsxRuntime.jsx(
190
- CalendarBottomContent,
191
- {
192
- bottomContent,
193
- showTodayButton
194
- }
195
- )
196
- ]
197
- }
198
- );
199
- }
200
- const CalendarMonthDaySelector = () => {
201
- const { slots, size, classNames } = calendarStyleContext.useCalendarStyleContext();
202
- const state = react.useContext(reactAriaComponents.CalendarStateContext);
203
- const { months, years, datePartOrder } = useCalendarSelectors(state);
204
- const formatMessage = reactAria.useMessageFormatter(i18nStrings);
205
- return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Group, { className: slots.selectors({ className: classNames?.selectors }), children: datePartOrder.map((part) => {
206
- if (part === "month") {
207
- return /* @__PURE__ */ jsxRuntime.jsx(
208
- select.Select,
209
- {
210
- isDisabled: state.isDisabled,
211
- size,
212
- items: months,
213
- variant: "clear",
214
- classNames: {
215
- trigger: slots.monthSelector({
216
- className: classNames?.monthSelector
217
- }),
218
- list: slots.monthList({ className: classNames?.monthList }),
219
- selectedText: slots.selectorText({
220
- className: classNames?.selectorText
221
- }),
222
- popover: "min-w-[12ch]"
223
- },
224
- selectedKey: state.visibleRange.start.month,
225
- "aria-label": formatMessage("selectMonth"),
226
- onSelectionChange: (month) => {
227
- state.setFocusedDate(
228
- new date.CalendarDate(state.focusedDate.year, Number(month), 1)
229
- );
230
- },
231
- children: (month) => /* @__PURE__ */ jsxRuntime.jsx(selectItem.SelectItem, { children: month.textValue })
232
- },
233
- part
234
- );
235
- }
236
- return /* @__PURE__ */ jsxRuntime.jsx(
237
- select.Select,
238
- {
239
- isDisabled: state.isDisabled,
240
- size,
241
- variant: "clear",
242
- items: years,
243
- classNames: {
244
- trigger: slots.yearSelector({
245
- className: classNames?.yearSelector
246
- }),
247
- list: slots.yearList({ className: classNames?.yearList }),
248
- selectedText: slots.selectorText({
249
- className: classNames?.selectorText
250
- })
251
- },
252
- selectedKey: state.visibleRange.start.year,
253
- "aria-label": formatMessage("selectYear"),
254
- onSelectionChange: (year) => {
255
- state.setFocusedDate(
256
- new date.CalendarDate(
257
- Number(year),
258
- state.focusedDate.month,
259
- state.focusedDate.day
260
- )
261
- );
262
- },
263
- children: (year) => /* @__PURE__ */ jsxRuntime.jsx(selectItem.SelectItem, { children: year.textValue })
264
- },
265
- part
266
- );
267
- }) });
268
- };
269
- function CalendarHeader({ offsetMonths = 0 }) {
270
- const { direction } = reactAriaComponents.useLocale();
271
- const { slots, classNames, size } = calendarStyleContext.useCalendarStyleContext();
272
- const state = react.useContext(reactAriaComponents.CalendarStateContext);
273
- const monthYearTitle = utils.useLocalizedMonthYear(
274
- state.visibleRange.start.add({ months: offsetMonths }),
275
- state.timeZone
276
- );
277
- if (offsetMonths === 0) {
278
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: slots.header({ className: classNames?.header }), children: [
279
- /* @__PURE__ */ jsxRuntime.jsx(CalendarMonthDaySelector, {}),
280
- /* @__PURE__ */ jsxRuntime.jsxs(
281
- reactAriaComponents.Group,
282
- {
283
- className: slots.buttonGroup({ className: classNames?.buttonGroup }),
284
- children: [
285
- /* @__PURE__ */ jsxRuntime.jsx(
286
- button.Button,
287
- {
288
- size,
289
- isIconOnly: true,
290
- variant: "clear",
291
- color: "sub",
292
- slot: "previous",
293
- className: slots.prevButton({ className: classNames?.prevButton }),
294
- children: direction === "rtl" ? /* @__PURE__ */ jsxRuntime.jsx(chevronRight.default, { "aria-hidden": true }) : /* @__PURE__ */ jsxRuntime.jsx(chevronLeft.default, { "aria-hidden": true })
295
- }
296
- ),
297
- /* @__PURE__ */ jsxRuntime.jsx(
298
- button.Button,
299
- {
300
- size,
301
- variant: "clear",
302
- color: "sub",
303
- isIconOnly: true,
304
- slot: "next",
305
- className: slots.nextButton({
306
- className: classNames?.nextButton
307
- }),
308
- children: direction === "rtl" ? /* @__PURE__ */ jsxRuntime.jsx(chevronLeft.default, { "aria-hidden": true }) : /* @__PURE__ */ jsxRuntime.jsx(chevronRight.default, { "aria-hidden": true })
309
- }
310
- )
311
- ]
312
- }
313
- )
314
- ] });
315
- }
316
- return /* @__PURE__ */ jsxRuntime.jsx(
317
- reactAriaComponents.Heading,
318
- {
319
- className: slots.header({ className: classNames?.header }),
320
- "aria-hidden": true,
321
- level: 2,
322
- children: monthYearTitle
323
- }
324
- );
325
- }
326
- function CalendarGridHeader() {
327
- const { slots, classNames } = calendarStyleContext.useCalendarStyleContext();
328
- return /* @__PURE__ */ jsxRuntime.jsx(
329
- reactAriaComponents.CalendarGridHeader,
330
- {
331
- className: slots.gridHeader({ className: classNames?.gridHeader }),
332
- children: (day) => /* @__PURE__ */ jsxRuntime.jsx(
333
- reactAriaComponents.CalendarHeaderCell,
334
- {
335
- className: slots.gridHeaderCell({
336
- className: classNames?.gridHeaderCell
337
- }),
338
- children: day
339
- }
340
- )
341
- }
342
- );
343
- }
344
-
345
- exports.CalendarBase = CalendarBase;
346
- exports.CalendarGridHeader = CalendarGridHeader;
347
- exports.CalendarHeader = CalendarHeader;
@@ -1,343 +0,0 @@
1
- "use strict";
2
- "use client";
3
- import { jsxs, jsx } from 'react/jsx-runtime';
4
- import { useMemo, useContext } from 'react';
5
- import { today, getLocalTimeZone, CalendarDate } from '@internationalized/date';
6
- import { useMessageFormatter, useDateFormatter } from 'react-aria';
7
- import { Calendar, composeRenderProps, CalendarGrid, CalendarGridBody, CalendarCell, useLocale, CalendarStateContext, Group, Heading, CalendarGridHeader as CalendarGridHeader$1, CalendarHeaderCell } from 'react-aria-components';
8
- import { cn } from '@opengovsg/oui-theme';
9
- import { Button } from '../button/button.js';
10
- import { useCalendarStyleContext } from './calendar-style-context.js';
11
- import { useLocalizedMonthYear, useGenerateLocalizedMonths, useGenerateLocalizedYears } from './utils.js';
12
- import ChevronRight from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-right.js';
13
- import ChevronLeft from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-left.js';
14
- import { Select } from '../select/select.js';
15
- import { SelectItem } from '../select/select-item.js';
16
-
17
- const useCalendarSelectors = (state) => {
18
- const yearRange = useMemo(() => {
19
- const start = state.minValue.year ?? 1900;
20
- const end = state.maxValue.year ?? 2100;
21
- return { start, end };
22
- }, [state.maxValue, state.minValue]);
23
- const dateFormatter = useDateFormatter(state);
24
- const datePartOrder = useMemo(() => {
25
- const parts = dateFormatter.formatToParts(
26
- state.visibleRange.start.toDate(state.timeZone)
27
- );
28
- const filteredParts = parts.filter(
29
- (part) => ["year", "month"].includes(part.type)
30
- );
31
- const filteredPartNames = filteredParts.map((part) => part.type);
32
- return filteredPartNames;
33
- }, [dateFormatter, state.timeZone, state.visibleRange.start]);
34
- const months = useGenerateLocalizedMonths(state.timeZone);
35
- const years = useGenerateLocalizedYears(
36
- yearRange.start,
37
- yearRange.end,
38
- state.timeZone
39
- );
40
- return useMemo(() => {
41
- return {
42
- months,
43
- years,
44
- datePartOrder
45
- };
46
- }, [datePartOrder, months, years]);
47
- };
48
- const i18nStrings = {
49
- "en-SG": {
50
- selectMonth: "Select month",
51
- selectYear: "Select year",
52
- today: "Today"
53
- },
54
- "zh-SG": {
55
- selectMonth: "\u9009\u62E9\u6708\u4EFD",
56
- selectYear: "\u9009\u62E9\u5E74\u4EFD",
57
- today: "\u4ECA\u5929"
58
- },
59
- "ms-SG": {
60
- selectMonth: "Pilih bulan",
61
- selectYear: "Pilih tahun",
62
- today: "Hari ini"
63
- },
64
- "ta-SG": {
65
- 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",
66
- selectYear: "\u0B86\u0BA3\u0BCD\u0B9F\u0BC8 \u0BA4\u0BC7\u0BB0\u0BCD\u0BA8\u0BCD\u0BA4\u0BC6\u0B9F\u0BC1\u0B95\u0BCD\u0B95\u0BB5\u0BC1\u0BAE\u0BCD",
67
- today: "\u0B87\u0BA9\u0BCD\u0BB1\u0BC1"
68
- }
69
- };
70
- const CalendarBottomContent = ({
71
- bottomContent,
72
- showTodayButton
73
- }) => {
74
- const state = useContext(CalendarStateContext);
75
- const { slots, classNames, size } = useCalendarStyleContext();
76
- const formatMessage = useMessageFormatter(i18nStrings);
77
- if (bottomContent) {
78
- return bottomContent;
79
- }
80
- if (!showTodayButton) {
81
- return null;
82
- }
83
- return /* @__PURE__ */ jsx(
84
- "div",
85
- {
86
- className: slots.bottomContentWrapper({
87
- className: classNames?.bottomContentWrapper
88
- }),
89
- children: /* @__PURE__ */ jsx(
90
- Button,
91
- {
92
- isDisabled: state.isDisabled,
93
- variant: "clear",
94
- color: "sub",
95
- size,
96
- slot: null,
97
- className: slots.todayButton({ className: classNames?.todayButton }),
98
- onPress: () => {
99
- state.setFocusedDate(today(getLocalTimeZone()));
100
- },
101
- children: formatMessage("today")
102
- }
103
- )
104
- }
105
- );
106
- };
107
- function CalendarBase({
108
- weekdayStyle = "narrow",
109
- calendarRef,
110
- minValue = new CalendarDate(1900, 0, 1),
111
- maxValue = new CalendarDate(2100, 12, 31),
112
- bottomContent,
113
- showTodayButton = true,
114
- ...props
115
- }) {
116
- const { slots, className, classNames } = useCalendarStyleContext();
117
- const numberOfVisibleMonths = props.visibleDuration?.months ?? 1;
118
- const dateToHighlight = useMemo(() => {
119
- return props.defaultFocusedValue ?? today(getLocalTimeZone());
120
- }, [props.defaultFocusedValue]);
121
- return /* @__PURE__ */ jsxs(
122
- Calendar,
123
- {
124
- pageBehavior: "single",
125
- ...props,
126
- ref: calendarRef,
127
- minValue,
128
- maxValue,
129
- className: composeRenderProps(
130
- className,
131
- (className2, renderProps) => slots.base({
132
- className: cn(classNames?.base, className2),
133
- ...renderProps
134
- })
135
- ),
136
- children: [
137
- /* @__PURE__ */ jsx(
138
- "div",
139
- {
140
- className: slots.gridWrapper({
141
- className: classNames?.gridWrapper
142
- }),
143
- children: Array.from({ length: numberOfVisibleMonths }).map((_, index) => /* @__PURE__ */ jsxs(
144
- "div",
145
- {
146
- className: slots.calendar({ className: classNames?.calendar }),
147
- children: [
148
- /* @__PURE__ */ jsx(CalendarHeader, { offsetMonths: index }),
149
- /* @__PURE__ */ jsxs(
150
- CalendarGrid,
151
- {
152
- className: slots.grid({ className: classNames?.grid }),
153
- weekdayStyle,
154
- offset: { months: index },
155
- children: [
156
- /* @__PURE__ */ jsx(CalendarGridHeader, {}),
157
- /* @__PURE__ */ jsx(
158
- CalendarGridBody,
159
- {
160
- className: slots.gridBody({ className: classNames?.gridBody }),
161
- children: (date) => /* @__PURE__ */ jsx(
162
- CalendarCell,
163
- {
164
- className: composeRenderProps(
165
- classNames?.cell,
166
- (className2, renderProps) => slots.cell({
167
- className: className2,
168
- isMultipleMonths: numberOfVisibleMonths >= 2,
169
- isDateHighlighted: date.compare(dateToHighlight) === 0,
170
- ...renderProps
171
- })
172
- ),
173
- date
174
- }
175
- )
176
- }
177
- )
178
- ]
179
- }
180
- )
181
- ]
182
- },
183
- index
184
- ))
185
- }
186
- ),
187
- /* @__PURE__ */ jsx(
188
- CalendarBottomContent,
189
- {
190
- bottomContent,
191
- showTodayButton
192
- }
193
- )
194
- ]
195
- }
196
- );
197
- }
198
- const CalendarMonthDaySelector = () => {
199
- const { slots, size, classNames } = useCalendarStyleContext();
200
- const state = useContext(CalendarStateContext);
201
- const { months, years, datePartOrder } = useCalendarSelectors(state);
202
- const formatMessage = useMessageFormatter(i18nStrings);
203
- return /* @__PURE__ */ jsx(Group, { className: slots.selectors({ className: classNames?.selectors }), children: datePartOrder.map((part) => {
204
- if (part === "month") {
205
- return /* @__PURE__ */ jsx(
206
- Select,
207
- {
208
- isDisabled: state.isDisabled,
209
- size,
210
- items: months,
211
- variant: "clear",
212
- classNames: {
213
- trigger: slots.monthSelector({
214
- className: classNames?.monthSelector
215
- }),
216
- list: slots.monthList({ className: classNames?.monthList }),
217
- selectedText: slots.selectorText({
218
- className: classNames?.selectorText
219
- }),
220
- popover: "min-w-[12ch]"
221
- },
222
- selectedKey: state.visibleRange.start.month,
223
- "aria-label": formatMessage("selectMonth"),
224
- onSelectionChange: (month) => {
225
- state.setFocusedDate(
226
- new CalendarDate(state.focusedDate.year, Number(month), 1)
227
- );
228
- },
229
- children: (month) => /* @__PURE__ */ jsx(SelectItem, { children: month.textValue })
230
- },
231
- part
232
- );
233
- }
234
- return /* @__PURE__ */ jsx(
235
- Select,
236
- {
237
- isDisabled: state.isDisabled,
238
- size,
239
- variant: "clear",
240
- items: years,
241
- classNames: {
242
- trigger: slots.yearSelector({
243
- className: classNames?.yearSelector
244
- }),
245
- list: slots.yearList({ className: classNames?.yearList }),
246
- selectedText: slots.selectorText({
247
- className: classNames?.selectorText
248
- })
249
- },
250
- selectedKey: state.visibleRange.start.year,
251
- "aria-label": formatMessage("selectYear"),
252
- onSelectionChange: (year) => {
253
- state.setFocusedDate(
254
- new CalendarDate(
255
- Number(year),
256
- state.focusedDate.month,
257
- state.focusedDate.day
258
- )
259
- );
260
- },
261
- children: (year) => /* @__PURE__ */ jsx(SelectItem, { children: year.textValue })
262
- },
263
- part
264
- );
265
- }) });
266
- };
267
- function CalendarHeader({ offsetMonths = 0 }) {
268
- const { direction } = useLocale();
269
- const { slots, classNames, size } = useCalendarStyleContext();
270
- const state = useContext(CalendarStateContext);
271
- const monthYearTitle = useLocalizedMonthYear(
272
- state.visibleRange.start.add({ months: offsetMonths }),
273
- state.timeZone
274
- );
275
- if (offsetMonths === 0) {
276
- return /* @__PURE__ */ jsxs("div", { className: slots.header({ className: classNames?.header }), children: [
277
- /* @__PURE__ */ jsx(CalendarMonthDaySelector, {}),
278
- /* @__PURE__ */ jsxs(
279
- Group,
280
- {
281
- className: slots.buttonGroup({ className: classNames?.buttonGroup }),
282
- children: [
283
- /* @__PURE__ */ jsx(
284
- Button,
285
- {
286
- size,
287
- isIconOnly: true,
288
- variant: "clear",
289
- color: "sub",
290
- slot: "previous",
291
- className: slots.prevButton({ className: classNames?.prevButton }),
292
- children: direction === "rtl" ? /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": true }) : /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": true })
293
- }
294
- ),
295
- /* @__PURE__ */ jsx(
296
- Button,
297
- {
298
- size,
299
- variant: "clear",
300
- color: "sub",
301
- isIconOnly: true,
302
- slot: "next",
303
- className: slots.nextButton({
304
- className: classNames?.nextButton
305
- }),
306
- children: direction === "rtl" ? /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": true }) : /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": true })
307
- }
308
- )
309
- ]
310
- }
311
- )
312
- ] });
313
- }
314
- return /* @__PURE__ */ jsx(
315
- Heading,
316
- {
317
- className: slots.header({ className: classNames?.header }),
318
- "aria-hidden": true,
319
- level: 2,
320
- children: monthYearTitle
321
- }
322
- );
323
- }
324
- function CalendarGridHeader() {
325
- const { slots, classNames } = useCalendarStyleContext();
326
- return /* @__PURE__ */ jsx(
327
- CalendarGridHeader$1,
328
- {
329
- className: slots.gridHeader({ className: classNames?.gridHeader }),
330
- children: (day) => /* @__PURE__ */ jsx(
331
- CalendarHeaderCell,
332
- {
333
- className: slots.gridHeaderCell({
334
- className: classNames?.gridHeaderCell
335
- }),
336
- children: day
337
- }
338
- )
339
- }
340
- );
341
- }
342
-
343
- export { CalendarBase, CalendarGridHeader, CalendarHeader };
@@ -1,14 +0,0 @@
1
- import type { ForwardedRef } from "react";
2
- import type { DateValue } from "react-aria-components";
3
- import type { CalendarProps } from "./types";
4
- export interface CalendarBaseProps<T extends DateValue> extends CalendarProps<T> {
5
- calendarRef: ForwardedRef<HTMLDivElement>;
6
- }
7
- export declare function CalendarBase<T extends DateValue>({ weekdayStyle, calendarRef, minValue, maxValue, bottomContent, showTodayButton, ...props }: CalendarBaseProps<T>): import("react/jsx-runtime").JSX.Element;
8
- interface CalendarHeaderProps {
9
- offsetMonths?: number;
10
- }
11
- export declare function CalendarHeader({ offsetMonths }: CalendarHeaderProps): import("react/jsx-runtime").JSX.Element;
12
- export declare function CalendarGridHeader(): import("react/jsx-runtime").JSX.Element;
13
- export {};
14
- //# sourceMappingURL=calendar-base.d.ts.map