@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.
- package/dist/cjs/button/button.cjs +1 -1
- 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/combo-box/combo-box-fuzzy.cjs +3 -3
- package/dist/cjs/combo-box/combo-box-item.cjs +2 -2
- package/dist/cjs/combo-box/combo-box.cjs +3 -2
- package/dist/cjs/index.cjs +38 -23
- package/dist/cjs/menu/index.cjs +15 -0
- package/dist/cjs/menu/menu.cjs +229 -0
- 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
- package/dist/cjs/popover/index.cjs +8 -0
- package/dist/cjs/popover/popover.cjs +46 -0
- package/dist/cjs/range-calendar/index.cjs +10 -0
- package/dist/cjs/range-calendar/range-calendar.cjs +188 -0
- package/dist/cjs/select/select.cjs +4 -1
- package/dist/cjs/system/react-utils/context.cjs +3 -2
- package/dist/cjs/tag-field/tag-field-item.cjs +8 -3
- package/dist/cjs/tag-field/tag-field.cjs +2 -1
- package/dist/esm/button/button.js +1 -1
- 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/combo-box/combo-box-fuzzy.js +4 -4
- package/dist/esm/combo-box/combo-box-item.js +3 -3
- package/dist/esm/combo-box/combo-box.js +4 -3
- package/dist/esm/index.js +15 -12
- package/dist/esm/menu/index.js +2 -0
- package/dist/esm/menu/menu.js +220 -0
- 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
- package/dist/esm/popover/index.js +2 -0
- package/dist/esm/popover/popover.js +44 -0
- package/dist/esm/range-calendar/index.js +2 -0
- package/dist/esm/range-calendar/range-calendar.js +184 -0
- package/dist/esm/select/select.js +5 -2
- package/dist/esm/system/react-utils/context.js +3 -2
- package/dist/esm/tag-field/tag-field-item.js +9 -4
- package/dist/esm/tag-field/tag-field.js +3 -2
- 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/combo-box/combo-box-fuzzy.d.ts +2 -2
- package/dist/types/combo-box/combo-box-fuzzy.d.ts.map +1 -1
- package/dist/types/combo-box/combo-box-item.d.ts +3 -3
- package/dist/types/combo-box/combo-box-item.d.ts.map +1 -1
- package/dist/types/combo-box/combo-box.d.ts.map +1 -1
- package/dist/types/index.d.mts +3 -0
- package/dist/types/index.d.ts +3 -0
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/menu/index.d.ts +2 -0
- package/dist/types/menu/index.d.ts.map +1 -0
- package/dist/types/menu/menu.d.ts +38 -0
- package/dist/types/menu/menu.d.ts.map +1 -0
- package/dist/types/popover/index.d.ts +2 -0
- package/dist/types/popover/index.d.ts.map +1 -0
- package/dist/types/popover/popover.d.ts +21 -0
- package/dist/types/popover/popover.d.ts.map +1 -0
- 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/select/select.d.ts +4 -3
- package/dist/types/select/select.d.ts.map +1 -1
- package/dist/types/system/react-utils/context.d.ts +3 -2
- package/dist/types/system/react-utils/context.d.ts.map +1 -1
- package/dist/types/tag-field/tag-field-item.d.ts +2 -2
- package/dist/types/tag-field/tag-field-item.d.ts.map +1 -1
- package/dist/types/tag-field/tag-field-tag-list.d.ts.map +1 -1
- package/dist/types/tag-field/tag-field.d.ts.map +1 -1
- package/dist/types/tag-field/types.d.ts +3 -3
- package/dist/types/tag-field/types.d.ts.map +1 -1
- package/package.json +5 -5
- 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
package/dist/esm/index.js
CHANGED
|
@@ -1,30 +1,33 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
export { useControllableState } from './hooks/use-controllable-state.js';
|
|
3
|
-
export { Button } from './button/button.js';
|
|
4
|
-
export { GovtBanner } from './govt-banner/govt-banner.js';
|
|
5
2
|
export { Ripple } from './ripple/ripple.js';
|
|
6
3
|
export { useRipple } from './ripple/use-ripple.js';
|
|
7
4
|
export { Spinner } from './spinner/spinner.js';
|
|
8
5
|
export { useSpinner } from './spinner/use-spinner.js';
|
|
9
6
|
export { Toggle } from './toggle/toggle.js';
|
|
10
7
|
export { SkipNavLink } from './skip-nav-link/skip-nav-link.js';
|
|
11
|
-
export { Input } from './input/input.js';
|
|
12
8
|
export { TextField } from './text-field/text-field.js';
|
|
13
|
-
export { Description, FieldError, FieldGroup, Label } from './field/field.js';
|
|
14
9
|
export { TextArea } from './text-area/text-area.js';
|
|
15
10
|
export { TextAreaField } from './text-area-field/text-area-field.js';
|
|
16
|
-
export { ComboBox, ComboBoxEmptyState } from './combo-box/combo-box.js';
|
|
17
|
-
export { ComboBoxFuzzy } from './combo-box/combo-box-fuzzy.js';
|
|
18
|
-
export { ComboBoxItem } from './combo-box/combo-box-item.js';
|
|
19
|
-
export { ComboBoxVariantContext, useComboBoxVariantContext } from './combo-box/combo-box-variant-context.js';
|
|
20
|
-
export { Banner } from './banner/banner.js';
|
|
21
11
|
export { TagField } from './tag-field/tag-field.js';
|
|
22
12
|
export { TagFieldItem } from './tag-field/tag-field-item.js';
|
|
23
13
|
export { Select } from './select/select.js';
|
|
24
14
|
export { SelectItem } from './select/select-item.js';
|
|
25
15
|
export { SelectVariantContext, useSelectVariantContext } from './select/select-variant-context.js';
|
|
16
|
+
export { useControllableState } from './hooks/use-controllable-state.js';
|
|
17
|
+
export { Button } from './button/button.js';
|
|
18
|
+
export { GovtBanner } from './govt-banner/govt-banner.js';
|
|
19
|
+
export { Input } from './input/input.js';
|
|
20
|
+
export { Description, FieldError, FieldGroup, Label } from './field/field.js';
|
|
21
|
+
export { ComboBox, ComboBoxEmptyState } from './combo-box/combo-box.js';
|
|
22
|
+
export { ComboBoxFuzzy } from './combo-box/combo-box-fuzzy.js';
|
|
23
|
+
export { ComboBoxItem } from './combo-box/combo-box-item.js';
|
|
24
|
+
export { ComboBoxVariantContext, useComboBoxVariantContext } from './combo-box/combo-box-variant-context.js';
|
|
25
|
+
export { Banner } from './banner/banner.js';
|
|
26
26
|
export { Badge } from './badge/badge.js';
|
|
27
27
|
export { CalendarDate } from '@internationalized/date';
|
|
28
|
-
export { Calendar } from './calendar/calendar.js';
|
|
29
|
-
export { CalendarStyleContext, useCalendarStyleContext
|
|
28
|
+
export { Calendar, CalendarStateWrapper } from './calendar/calendar.js';
|
|
29
|
+
export { CalendarStyleContext, useCalendarStyleContext } from './calendar/calendar-style-context.js';
|
|
30
30
|
export { getEraFormat, useGenerateLocalizedMonths, useGenerateLocalizedYears, useLocalizedMonthYear } from './calendar/utils.js';
|
|
31
|
+
export { RangeCalendar, RangeCalendarCell, RangeCalendarStateWrapper } from './range-calendar/range-calendar.js';
|
|
32
|
+
export { Menu, MenuItem, MenuSection, MenuSeparator, MenuTrigger, MenuVariantContext, SubmenuTrigger, useMenuVariantContext } from './menu/menu.js';
|
|
33
|
+
export { Popover } from './popover/popover.js';
|
|
@@ -0,0 +1,220 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
4
|
+
import { forwardRef, useMemo, useCallback } from 'react';
|
|
5
|
+
import { useContextProps, MenuItem as MenuItem$1, composeRenderProps, Provider, Menu as Menu$1, MenuSection as MenuSection$1, Header, Collection, MenuTrigger as MenuTrigger$1, SubmenuTrigger as SubmenuTrigger$1, Separator } from 'react-aria-components';
|
|
6
|
+
import { listBoxItemStyles, menuItemStyles, menuStyles, menuSectionStyles, menuDividerStyles } from '@opengovsg/oui-theme';
|
|
7
|
+
import { forwardRefGeneric, mapPropsVariants } from '../system/utils.js';
|
|
8
|
+
import Check from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.js';
|
|
9
|
+
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';
|
|
10
|
+
import { createContext } from '../system/react-utils/context.js';
|
|
11
|
+
import { Popover } from '../popover/popover.js';
|
|
12
|
+
|
|
13
|
+
const [MenuVariantContext, useMenuVariantContext] = createContext({
|
|
14
|
+
name: "MenuVariantContext",
|
|
15
|
+
strict: false
|
|
16
|
+
});
|
|
17
|
+
function MenuInner(originalProps, ref) {
|
|
18
|
+
[originalProps, ref] = useContextProps(
|
|
19
|
+
originalProps,
|
|
20
|
+
ref,
|
|
21
|
+
MenuVariantContext
|
|
22
|
+
);
|
|
23
|
+
const [props, variantProps] = mapPropsVariants(
|
|
24
|
+
originalProps,
|
|
25
|
+
menuStyles.variantKeys
|
|
26
|
+
);
|
|
27
|
+
const { className, classNames, placement, ...rest } = props;
|
|
28
|
+
const styles = menuStyles(variantProps);
|
|
29
|
+
return /* @__PURE__ */ jsx(Provider, { values: [[MenuVariantContext, variantProps]], children: /* @__PURE__ */ jsx(
|
|
30
|
+
Popover,
|
|
31
|
+
{
|
|
32
|
+
placement,
|
|
33
|
+
className: styles.popover({ className: classNames?.popover }),
|
|
34
|
+
children: /* @__PURE__ */ jsx(
|
|
35
|
+
Menu$1,
|
|
36
|
+
{
|
|
37
|
+
...rest,
|
|
38
|
+
ref,
|
|
39
|
+
className: composeRenderProps(
|
|
40
|
+
className ?? classNames?.base,
|
|
41
|
+
(className2, renderProps) => styles.base({
|
|
42
|
+
className: className2,
|
|
43
|
+
...renderProps
|
|
44
|
+
})
|
|
45
|
+
)
|
|
46
|
+
}
|
|
47
|
+
)
|
|
48
|
+
}
|
|
49
|
+
) });
|
|
50
|
+
}
|
|
51
|
+
const Menu = forwardRefGeneric(MenuInner);
|
|
52
|
+
const MenuItem = forwardRef(function MenuItem2(originalProps, ref) {
|
|
53
|
+
[originalProps, ref] = useContextProps(
|
|
54
|
+
originalProps,
|
|
55
|
+
ref,
|
|
56
|
+
MenuVariantContext
|
|
57
|
+
);
|
|
58
|
+
const [
|
|
59
|
+
{
|
|
60
|
+
classNames,
|
|
61
|
+
className,
|
|
62
|
+
multipleSelectionIcon: multipleSelectionIconProp,
|
|
63
|
+
singleSelectionIcon: singleSelectionIconProp,
|
|
64
|
+
startContent,
|
|
65
|
+
endContent,
|
|
66
|
+
...props
|
|
67
|
+
},
|
|
68
|
+
variantProps
|
|
69
|
+
] = mapPropsVariants(originalProps, listBoxItemStyles.variantKeys);
|
|
70
|
+
const styles = menuItemStyles(variantProps);
|
|
71
|
+
const multipleSelectionIcon = useMemo(() => {
|
|
72
|
+
if (multipleSelectionIconProp !== void 0) {
|
|
73
|
+
return multipleSelectionIconProp;
|
|
74
|
+
}
|
|
75
|
+
return /* @__PURE__ */ jsx(
|
|
76
|
+
Check,
|
|
77
|
+
{
|
|
78
|
+
"aria-hidden": true,
|
|
79
|
+
className: styles.icon({ className: classNames?.icon })
|
|
80
|
+
}
|
|
81
|
+
);
|
|
82
|
+
}, [classNames?.icon, multipleSelectionIconProp, styles]);
|
|
83
|
+
const singleSelectionIcon = useMemo(() => {
|
|
84
|
+
if (singleSelectionIconProp !== void 0) {
|
|
85
|
+
return singleSelectionIconProp;
|
|
86
|
+
}
|
|
87
|
+
return /* @__PURE__ */ jsx(
|
|
88
|
+
Check,
|
|
89
|
+
{
|
|
90
|
+
"aria-hidden": true,
|
|
91
|
+
className: styles.icon({ className: classNames?.icon })
|
|
92
|
+
}
|
|
93
|
+
);
|
|
94
|
+
}, [classNames?.icon, singleSelectionIconProp, styles]);
|
|
95
|
+
const showIconContainer = useCallback(
|
|
96
|
+
(selectionMode) => {
|
|
97
|
+
switch (selectionMode) {
|
|
98
|
+
case "none":
|
|
99
|
+
return false;
|
|
100
|
+
case "multiple":
|
|
101
|
+
return !!multipleSelectionIcon;
|
|
102
|
+
case "single":
|
|
103
|
+
return !!singleSelectionIcon;
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
[multipleSelectionIcon, singleSelectionIcon]
|
|
107
|
+
);
|
|
108
|
+
const defaultTextValue = useMemo(() => {
|
|
109
|
+
if (props.textValue) {
|
|
110
|
+
return props.textValue;
|
|
111
|
+
}
|
|
112
|
+
if (typeof props.children === "string") {
|
|
113
|
+
return props.children;
|
|
114
|
+
}
|
|
115
|
+
return void 0;
|
|
116
|
+
}, [props.children, props.textValue]);
|
|
117
|
+
return /* @__PURE__ */ jsx(
|
|
118
|
+
MenuItem$1,
|
|
119
|
+
{
|
|
120
|
+
ref,
|
|
121
|
+
textValue: defaultTextValue,
|
|
122
|
+
...props,
|
|
123
|
+
isDisabled: variantProps.isDisabled,
|
|
124
|
+
className: composeRenderProps(
|
|
125
|
+
className ?? classNames?.container,
|
|
126
|
+
(className2, renderProps) => styles.container({
|
|
127
|
+
className: className2,
|
|
128
|
+
...renderProps
|
|
129
|
+
})
|
|
130
|
+
),
|
|
131
|
+
children: composeRenderProps(
|
|
132
|
+
props.children,
|
|
133
|
+
(children, { selectionMode, isSelected, hasSubmenu }) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
134
|
+
startContent,
|
|
135
|
+
/* @__PURE__ */ jsx(
|
|
136
|
+
"span",
|
|
137
|
+
{
|
|
138
|
+
className: styles.label({
|
|
139
|
+
className: classNames?.label
|
|
140
|
+
}),
|
|
141
|
+
children
|
|
142
|
+
}
|
|
143
|
+
),
|
|
144
|
+
showIconContainer(selectionMode) && /* @__PURE__ */ jsxs(
|
|
145
|
+
"span",
|
|
146
|
+
{
|
|
147
|
+
className: styles.iconContainer({
|
|
148
|
+
className: classNames?.iconContainer
|
|
149
|
+
}),
|
|
150
|
+
children: [
|
|
151
|
+
isSelected && selectionMode === "multiple" && multipleSelectionIcon,
|
|
152
|
+
isSelected && selectionMode === "single" && singleSelectionIcon
|
|
153
|
+
]
|
|
154
|
+
}
|
|
155
|
+
),
|
|
156
|
+
endContent,
|
|
157
|
+
hasSubmenu && /* @__PURE__ */ jsx(
|
|
158
|
+
ChevronRight,
|
|
159
|
+
{
|
|
160
|
+
"aria-hidden": true,
|
|
161
|
+
className: styles.icon({
|
|
162
|
+
className: classNames?.icon
|
|
163
|
+
})
|
|
164
|
+
}
|
|
165
|
+
)
|
|
166
|
+
] })
|
|
167
|
+
)
|
|
168
|
+
}
|
|
169
|
+
);
|
|
170
|
+
});
|
|
171
|
+
function MenuSeparator(props) {
|
|
172
|
+
return /* @__PURE__ */ jsx(
|
|
173
|
+
Separator,
|
|
174
|
+
{
|
|
175
|
+
...props,
|
|
176
|
+
className: menuDividerStyles({
|
|
177
|
+
className: props.className
|
|
178
|
+
})
|
|
179
|
+
}
|
|
180
|
+
);
|
|
181
|
+
}
|
|
182
|
+
function MenuSectionInner(originalProps, ref) {
|
|
183
|
+
[originalProps, ref] = useContextProps(
|
|
184
|
+
originalProps,
|
|
185
|
+
ref,
|
|
186
|
+
MenuVariantContext
|
|
187
|
+
);
|
|
188
|
+
const [{ title, classNames, ...props }, variantProps] = mapPropsVariants(
|
|
189
|
+
originalProps,
|
|
190
|
+
menuSectionStyles.variantKeys
|
|
191
|
+
);
|
|
192
|
+
const styles = menuSectionStyles(variantProps);
|
|
193
|
+
return /* @__PURE__ */ jsxs(
|
|
194
|
+
MenuSection$1,
|
|
195
|
+
{
|
|
196
|
+
ref,
|
|
197
|
+
className: styles.base({
|
|
198
|
+
className: props.className ?? classNames?.base
|
|
199
|
+
}),
|
|
200
|
+
...props,
|
|
201
|
+
children: [
|
|
202
|
+
title && /* @__PURE__ */ jsx(
|
|
203
|
+
Header,
|
|
204
|
+
{
|
|
205
|
+
className: styles.header({
|
|
206
|
+
className: classNames?.header
|
|
207
|
+
}),
|
|
208
|
+
children: title
|
|
209
|
+
}
|
|
210
|
+
),
|
|
211
|
+
/* @__PURE__ */ jsx(Collection, { items: props.items, children: props.children })
|
|
212
|
+
]
|
|
213
|
+
}
|
|
214
|
+
);
|
|
215
|
+
}
|
|
216
|
+
const MenuSection = forwardRefGeneric(MenuSectionInner);
|
|
217
|
+
const MenuTrigger = MenuTrigger$1;
|
|
218
|
+
const SubmenuTrigger = SubmenuTrigger$1;
|
|
219
|
+
|
|
220
|
+
export { Menu, MenuItem, MenuSection, MenuSeparator, MenuTrigger, MenuVariantContext, SubmenuTrigger, useMenuVariantContext };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import createLucideIcon from '../createLucideIcon.js';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @license lucide-react v0.475.0 - ISC
|
|
5
|
+
*
|
|
6
|
+
* This source code is licensed under the ISC license.
|
|
7
|
+
* See the LICENSE file in the root directory of this source tree.
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
const __iconNode = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
|
|
12
|
+
const Check = createLucideIcon("Check", __iconNode);
|
|
13
|
+
|
|
14
|
+
export { __iconNode, Check as default };
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
4
|
+
import { useSlottedContext, PopoverContext, Popover as Popover$1, composeRenderProps, OverlayArrow } from 'react-aria-components';
|
|
5
|
+
import { popoverArrowStyles, popoverStyles } from '@opengovsg/oui-theme';
|
|
6
|
+
|
|
7
|
+
const Popover = ({
|
|
8
|
+
children,
|
|
9
|
+
showArrow,
|
|
10
|
+
className,
|
|
11
|
+
classNames,
|
|
12
|
+
...props
|
|
13
|
+
}) => {
|
|
14
|
+
const popoverContext = useSlottedContext(PopoverContext);
|
|
15
|
+
const isSubmenu = popoverContext?.trigger === "SubmenuTrigger";
|
|
16
|
+
let offset = showArrow ? 12 : 8;
|
|
17
|
+
offset = isSubmenu ? offset - 6 : offset;
|
|
18
|
+
return /* @__PURE__ */ jsxs(
|
|
19
|
+
Popover$1,
|
|
20
|
+
{
|
|
21
|
+
offset,
|
|
22
|
+
...props,
|
|
23
|
+
className: composeRenderProps(
|
|
24
|
+
className ?? classNames?.base,
|
|
25
|
+
(className2, renderProps) => popoverStyles({ ...renderProps, className: className2 })
|
|
26
|
+
),
|
|
27
|
+
children: [
|
|
28
|
+
showArrow && /* @__PURE__ */ jsx(OverlayArrow, { className: "group", children: /* @__PURE__ */ jsx(
|
|
29
|
+
"svg",
|
|
30
|
+
{
|
|
31
|
+
width: 12,
|
|
32
|
+
height: 12,
|
|
33
|
+
viewBox: "0 0 12 12",
|
|
34
|
+
className: popoverArrowStyles({ className: classNames?.arrow }),
|
|
35
|
+
children: /* @__PURE__ */ jsx("path", { d: "M0 0 L6 6 L12 0" })
|
|
36
|
+
}
|
|
37
|
+
) }),
|
|
38
|
+
children
|
|
39
|
+
]
|
|
40
|
+
}
|
|
41
|
+
);
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
export { Popover };
|
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
4
|
+
import { forwardRef, useMemo, useContext } from 'react';
|
|
5
|
+
import { CalendarDate, today, getLocalTimeZone, getDayOfWeek } from '@internationalized/date';
|
|
6
|
+
import { RangeCalendar as RangeCalendar$1, Provider, CalendarGrid, CalendarGridBody, Text, RangeCalendarStateContext, useLocale, CalendarCell } from 'react-aria-components';
|
|
7
|
+
import { useDeepCompareMemo } from 'use-deep-compare';
|
|
8
|
+
import { calendarStyles, composeRenderProps, cn, dataAttr } from '@opengovsg/oui-theme';
|
|
9
|
+
import { AgnosticCalendarStateContext } from '../calendar/agnostic-calendar-state-context.js';
|
|
10
|
+
import { CalendarBottomContent } from '../calendar/calendar-bottom-content.js';
|
|
11
|
+
import { CalendarGridHeader } from '../calendar/calendar-grid-header.js';
|
|
12
|
+
import { CalendarHeader } from '../calendar/calendar-header.js';
|
|
13
|
+
import { mapPropsVariants } from '../system/utils.js';
|
|
14
|
+
import { CalendarStyleContext, useCalendarStyleContext } from '../calendar/calendar-style-context.js';
|
|
15
|
+
|
|
16
|
+
const RangeCalendar = forwardRef(function RangeCalendar2(originalProps, ref) {
|
|
17
|
+
const [props, variantProps] = mapPropsVariants(
|
|
18
|
+
originalProps,
|
|
19
|
+
calendarStyles.variantKeys
|
|
20
|
+
);
|
|
21
|
+
const {
|
|
22
|
+
className,
|
|
23
|
+
classNames,
|
|
24
|
+
weekdayStyle = "narrow",
|
|
25
|
+
minValue = new CalendarDate(1900, 0, 1),
|
|
26
|
+
maxValue = new CalendarDate(2100, 12, 31),
|
|
27
|
+
bottomContent,
|
|
28
|
+
showTodayButton = true,
|
|
29
|
+
errorMessage,
|
|
30
|
+
...restProps
|
|
31
|
+
} = props;
|
|
32
|
+
const slots = useDeepCompareMemo(
|
|
33
|
+
() => calendarStyles({ ...variantProps, isRange: true }),
|
|
34
|
+
[variantProps]
|
|
35
|
+
);
|
|
36
|
+
const context = useMemo(
|
|
37
|
+
() => ({
|
|
38
|
+
slots,
|
|
39
|
+
classNames,
|
|
40
|
+
className,
|
|
41
|
+
size: variantProps.size ?? calendarStyles.defaultVariants.size
|
|
42
|
+
}),
|
|
43
|
+
[className, classNames, slots, variantProps.size]
|
|
44
|
+
);
|
|
45
|
+
const numberOfVisibleMonths = props.visibleDuration?.months ?? 1;
|
|
46
|
+
const dateToHighlight = useMemo(() => {
|
|
47
|
+
if (props.defaultFocusedValue !== void 0) {
|
|
48
|
+
return props.defaultFocusedValue;
|
|
49
|
+
}
|
|
50
|
+
return today(getLocalTimeZone());
|
|
51
|
+
}, [props.defaultFocusedValue]);
|
|
52
|
+
return /* @__PURE__ */ jsxs(
|
|
53
|
+
RangeCalendar$1,
|
|
54
|
+
{
|
|
55
|
+
...restProps,
|
|
56
|
+
ref,
|
|
57
|
+
minValue,
|
|
58
|
+
maxValue,
|
|
59
|
+
className: composeRenderProps(
|
|
60
|
+
className,
|
|
61
|
+
(className2, renderProps) => slots.base({
|
|
62
|
+
className: cn(classNames?.base, className2),
|
|
63
|
+
...renderProps
|
|
64
|
+
})
|
|
65
|
+
),
|
|
66
|
+
children: [
|
|
67
|
+
/* @__PURE__ */ jsx(Provider, { values: [[CalendarStyleContext, context]], children: /* @__PURE__ */ jsxs(RangeCalendarStateWrapper, { children: [
|
|
68
|
+
/* @__PURE__ */ jsx(
|
|
69
|
+
"div",
|
|
70
|
+
{
|
|
71
|
+
className: slots.gridWrapper({
|
|
72
|
+
className: classNames?.gridWrapper
|
|
73
|
+
}),
|
|
74
|
+
children: Array.from({ length: numberOfVisibleMonths }).map((_, index) => /* @__PURE__ */ jsxs(
|
|
75
|
+
"div",
|
|
76
|
+
{
|
|
77
|
+
className: slots.calendar({ className: classNames?.calendar }),
|
|
78
|
+
children: [
|
|
79
|
+
/* @__PURE__ */ jsx(CalendarHeader, { offsetMonths: index }),
|
|
80
|
+
/* @__PURE__ */ jsxs(
|
|
81
|
+
CalendarGrid,
|
|
82
|
+
{
|
|
83
|
+
className: slots.grid({ className: classNames?.grid }),
|
|
84
|
+
weekdayStyle,
|
|
85
|
+
offset: { months: index },
|
|
86
|
+
children: [
|
|
87
|
+
/* @__PURE__ */ jsx(CalendarGridHeader, {}),
|
|
88
|
+
/* @__PURE__ */ jsx(
|
|
89
|
+
CalendarGridBody,
|
|
90
|
+
{
|
|
91
|
+
className: slots.gridBody({
|
|
92
|
+
className: classNames?.gridBody
|
|
93
|
+
}),
|
|
94
|
+
children: (date) => /* @__PURE__ */ jsx(
|
|
95
|
+
RangeCalendarCell,
|
|
96
|
+
{
|
|
97
|
+
firstDayOfWeek: props.firstDayOfWeek,
|
|
98
|
+
dateToHighlight,
|
|
99
|
+
date,
|
|
100
|
+
isMultipleMonths: numberOfVisibleMonths >= 2
|
|
101
|
+
}
|
|
102
|
+
)
|
|
103
|
+
}
|
|
104
|
+
)
|
|
105
|
+
]
|
|
106
|
+
}
|
|
107
|
+
)
|
|
108
|
+
]
|
|
109
|
+
},
|
|
110
|
+
index
|
|
111
|
+
))
|
|
112
|
+
}
|
|
113
|
+
),
|
|
114
|
+
/* @__PURE__ */ jsx(
|
|
115
|
+
CalendarBottomContent,
|
|
116
|
+
{
|
|
117
|
+
bottomContent,
|
|
118
|
+
showTodayButton
|
|
119
|
+
}
|
|
120
|
+
)
|
|
121
|
+
] }) }),
|
|
122
|
+
errorMessage && /* @__PURE__ */ jsx(
|
|
123
|
+
Text,
|
|
124
|
+
{
|
|
125
|
+
className: slots.errorMessage({
|
|
126
|
+
className: classNames?.errorMessage
|
|
127
|
+
}),
|
|
128
|
+
slot: "errorMessage",
|
|
129
|
+
children: errorMessage
|
|
130
|
+
}
|
|
131
|
+
)
|
|
132
|
+
]
|
|
133
|
+
}
|
|
134
|
+
);
|
|
135
|
+
});
|
|
136
|
+
const RangeCalendarStateWrapper = ({
|
|
137
|
+
children
|
|
138
|
+
}) => {
|
|
139
|
+
const state = useContext(RangeCalendarStateContext);
|
|
140
|
+
return /* @__PURE__ */ jsx(Provider, { values: [[AgnosticCalendarStateContext, state]], children });
|
|
141
|
+
};
|
|
142
|
+
const RangeCalendarCell = ({
|
|
143
|
+
date,
|
|
144
|
+
isMultipleMonths,
|
|
145
|
+
dateToHighlight,
|
|
146
|
+
firstDayOfWeek
|
|
147
|
+
}) => {
|
|
148
|
+
const { classNames, slots } = useCalendarStyleContext();
|
|
149
|
+
const state = useContext(AgnosticCalendarStateContext);
|
|
150
|
+
const { locale } = useLocale();
|
|
151
|
+
const dataAttributes = useMemo(() => {
|
|
152
|
+
const isDateHighlighted = dateToHighlight ? date.compare(dateToHighlight) === 0 : false;
|
|
153
|
+
const isSelected = state.isSelected(date);
|
|
154
|
+
const isDisabled = state.isCellDisabled(date);
|
|
155
|
+
const isInvalid = state.isInvalid(date);
|
|
156
|
+
const isFirstSelectedAfterDisabled = !isDisabled && !isInvalid && state.isCellUnavailable(date.subtract({ days: 1 }));
|
|
157
|
+
const isLastSelectedBeforeDisabled = !isDisabled && !isInvalid && state.isCellUnavailable(date.add({ days: 1 }));
|
|
158
|
+
const dayOfWeek = getDayOfWeek(date, locale, firstDayOfWeek);
|
|
159
|
+
const isRangeStart = isSelected && (isFirstSelectedAfterDisabled || dayOfWeek === 0 || date.day === 1);
|
|
160
|
+
const isRangeEnd = isSelected && (isLastSelectedBeforeDisabled || dayOfWeek === 6 || date.day === date.calendar.getDaysInMonth(date));
|
|
161
|
+
return {
|
|
162
|
+
"data-highlighted": dataAttr(isDateHighlighted),
|
|
163
|
+
"data-range-end": dataAttr(isRangeEnd),
|
|
164
|
+
"data-range-start": dataAttr(isRangeStart)
|
|
165
|
+
};
|
|
166
|
+
}, [date, dateToHighlight, firstDayOfWeek, locale, state]);
|
|
167
|
+
return /* @__PURE__ */ jsx(
|
|
168
|
+
CalendarCell,
|
|
169
|
+
{
|
|
170
|
+
className: composeRenderProps(
|
|
171
|
+
classNames?.cell,
|
|
172
|
+
(className, renderProps) => slots.cell({
|
|
173
|
+
className,
|
|
174
|
+
isMultipleMonths,
|
|
175
|
+
...renderProps
|
|
176
|
+
})
|
|
177
|
+
),
|
|
178
|
+
...dataAttributes,
|
|
179
|
+
date
|
|
180
|
+
}
|
|
181
|
+
);
|
|
182
|
+
};
|
|
183
|
+
|
|
184
|
+
export { RangeCalendar, RangeCalendarCell, RangeCalendarStateWrapper };
|
|
@@ -2,12 +2,13 @@
|
|
|
2
2
|
"use client";
|
|
3
3
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
4
4
|
import { useMemo } from 'react';
|
|
5
|
-
import { Provider, Select as Select$1, SelectValue,
|
|
5
|
+
import { Provider, Select as Select$1, SelectValue, Virtualizer, ListLayout, ListBox } from 'react-aria-components';
|
|
6
6
|
import { selectStyles, composeRenderProps } from '@opengovsg/oui-theme';
|
|
7
7
|
import { mapPropsVariants } from '../system/utils.js';
|
|
8
8
|
import { SelectVariantContext } from './select-variant-context.js';
|
|
9
|
-
import { Label, Description } from '../field/field.js';
|
|
9
|
+
import { Label, Description, FieldError } from '../field/field.js';
|
|
10
10
|
import ChevronDown from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.js';
|
|
11
|
+
import { Popover } from '../popover/popover.js';
|
|
11
12
|
import { Button } from '../button/button.js';
|
|
12
13
|
|
|
13
14
|
const calculateEstimatedRowHeight = (size) => {
|
|
@@ -24,6 +25,7 @@ function Select({
|
|
|
24
25
|
label,
|
|
25
26
|
description,
|
|
26
27
|
classNames,
|
|
28
|
+
errorMessage,
|
|
27
29
|
...originalProps
|
|
28
30
|
}) {
|
|
29
31
|
const [_props, variantProps] = mapPropsVariants(
|
|
@@ -88,6 +90,7 @@ function Select({
|
|
|
88
90
|
children: description
|
|
89
91
|
}
|
|
90
92
|
),
|
|
93
|
+
/* @__PURE__ */ jsx(FieldError, { size: variantProps.size, className: classNames?.error, children: errorMessage }),
|
|
91
94
|
/* @__PURE__ */ jsx(Popover, { className: styles.popover({ className: classNames?.popover }), children: /* @__PURE__ */ jsx(Virtualizer, { layout: ListLayout, layoutOptions, children: /* @__PURE__ */ jsx(
|
|
92
95
|
ListBox,
|
|
93
96
|
{
|
|
@@ -5,9 +5,10 @@ function createContext(options = {}) {
|
|
|
5
5
|
const {
|
|
6
6
|
strict = true,
|
|
7
7
|
errorMessage = "useContext: `context` is undefined. Seems you forgot to wrap component within the Provider",
|
|
8
|
-
name
|
|
8
|
+
name,
|
|
9
|
+
defaultValue
|
|
9
10
|
} = options;
|
|
10
|
-
const Context = createContext$1(
|
|
11
|
+
const Context = createContext$1(defaultValue);
|
|
11
12
|
Context.displayName = name;
|
|
12
13
|
function useContext$1() {
|
|
13
14
|
const context = useContext(Context);
|
|
@@ -2,21 +2,26 @@
|
|
|
2
2
|
"use client";
|
|
3
3
|
import { jsx } from 'react/jsx-runtime';
|
|
4
4
|
import { useContext } from 'react';
|
|
5
|
-
import {
|
|
5
|
+
import { listBoxItemStyles, dataAttr } from '@opengovsg/oui-theme';
|
|
6
6
|
import { forwardRefGeneric } from '../system/utils.js';
|
|
7
7
|
import { TagFieldStateContext } from './tag-field-state-context.js';
|
|
8
8
|
|
|
9
9
|
const TagFieldItemInner = ({ item, isHighlighted, classNames, ...itemProps }, ref) => {
|
|
10
10
|
const { itemToText, size } = useContext(TagFieldStateContext);
|
|
11
|
-
const styles =
|
|
11
|
+
const styles = listBoxItemStyles({ size });
|
|
12
12
|
return /* @__PURE__ */ jsx(
|
|
13
13
|
"li",
|
|
14
14
|
{
|
|
15
15
|
ref,
|
|
16
16
|
...itemProps,
|
|
17
|
-
className: styles.container({
|
|
17
|
+
className: styles.container({
|
|
18
|
+
className: classNames?.container,
|
|
19
|
+
isFocused: isHighlighted,
|
|
20
|
+
isDisabled: itemProps["aria-disabled"]
|
|
21
|
+
}),
|
|
18
22
|
"data-rac": true,
|
|
19
|
-
"data-
|
|
23
|
+
"data-focused": dataAttr(isHighlighted),
|
|
24
|
+
"data-disabled": dataAttr(itemProps["aria-disabled"]),
|
|
20
25
|
children: /* @__PURE__ */ jsx("span", { className: styles.label({ className: classNames?.label }), children: itemToText(item) })
|
|
21
26
|
}
|
|
22
27
|
);
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"use client";
|
|
3
3
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
4
4
|
import { createElement } from 'react';
|
|
5
|
-
import { composeRenderProps
|
|
5
|
+
import { composeRenderProps } from 'react-aria-components';
|
|
6
6
|
import { tagFieldStyles } from '@opengovsg/oui-theme';
|
|
7
7
|
import { TagFieldItem } from './tag-field-item.js';
|
|
8
8
|
import { TagFieldList } from './tag-field-list.js';
|
|
@@ -12,6 +12,7 @@ import { TagFieldTrigger } from './tag-field-trigger.js';
|
|
|
12
12
|
import ChevronDown from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.js';
|
|
13
13
|
import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
|
|
14
14
|
import { Input } from '../input/input.js';
|
|
15
|
+
import { Popover } from '../popover/popover.js';
|
|
15
16
|
|
|
16
17
|
function TagField({
|
|
17
18
|
classNames,
|
|
@@ -91,7 +92,7 @@ function TagField({
|
|
|
91
92
|
}
|
|
92
93
|
)
|
|
93
94
|
] }),
|
|
94
|
-
/* @__PURE__ */ jsx(Popover, { children: /* @__PURE__ */ jsx(
|
|
95
|
+
/* @__PURE__ */ jsx(Popover, { className: styles.popover({ className: classNames?.popover }), children: /* @__PURE__ */ jsx(
|
|
95
96
|
TagFieldList,
|
|
96
97
|
{
|
|
97
98
|
className: styles.list({ className: classNames?.list }),
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import type { CalendarState, RangeCalendarState } from "react-stately";
|
|
2
|
+
export declare const AgnosticCalendarStateContext: import("react").Context<CalendarState | RangeCalendarState>, useAgnosticCalendarStateContext: () => CalendarState | RangeCalendarState;
|
|
3
|
+
//# sourceMappingURL=agnostic-calendar-state-context.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"agnostic-calendar-state-context.d.ts","sourceRoot":"","sources":["../../../src/calendar/agnostic-calendar-state-context.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAItE,eAAO,MAAO,4BAA4B,+DAAE,+BAA+B,0CAIvE,CAAA"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import type { CalendarDate } from "@internationalized/date";
|
|
2
|
+
import type { CalendarProps } from "./types";
|
|
3
|
+
export declare const CalendarBottomContent: <T extends CalendarDate>({ bottomContent, showTodayButton, }: Pick<CalendarProps<T>, "bottomContent" | "showTodayButton">) => string | number | bigint | true | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null;
|
|
4
|
+
//# sourceMappingURL=calendar-bottom-content.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"calendar-bottom-content.d.ts","sourceRoot":"","sources":["../../../src/calendar/calendar-bottom-content.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAI3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAM5C,eAAO,MAAM,qBAAqB,GAAI,CAAC,SAAS,YAAY,uCAGzD,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,eAAe,GAAG,iBAAiB,CAAC,6VAkC7D,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"calendar-grid-header.d.ts","sourceRoot":"","sources":["../../../src/calendar/calendar-grid-header.tsx"],"names":[],"mappings":"AASA,wBAAgB,kBAAkB,4CAiBjC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"calendar-header.d.ts","sourceRoot":"","sources":["../../../src/calendar/calendar-header.tsx"],"names":[],"mappings":"AAYA,UAAU,mBAAmB;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,wBAAgB,cAAc,CAAC,EAAE,YAAgB,EAAE,EAAE,mBAAmB,2CA8DvE"}
|