@opengovsg/oui 0.0.0-snapshot-20250511111650 → 0.0.0-snapshot-20250808095237
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 +4 -2
- package/dist/cjs/calendar/calendar-month-day-selector.cjs +2 -2
- package/dist/cjs/calendar/calendar.cjs +1 -1
- package/dist/cjs/combo-box/combo-box.cjs +2 -2
- package/dist/cjs/date-field/date-field.cjs +81 -0
- package/dist/cjs/date-field/index.cjs +9 -0
- package/dist/cjs/date-picker/date-picker.cjs +85 -0
- package/dist/cjs/date-picker/index.cjs +8 -0
- package/dist/cjs/date-range-picker/date-range-picker.cjs +128 -0
- package/dist/cjs/date-range-picker/index.cjs +8 -0
- package/dist/cjs/govt-banner/govt-banner.cjs +1 -1
- package/dist/cjs/index.cjs +20 -13
- package/dist/cjs/menu/menu.cjs +1 -1
- package/dist/cjs/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/calendar.cjs +24 -0
- package/dist/cjs/range-calendar/range-calendar.cjs +2 -2
- package/dist/cjs/select/select.cjs +2 -2
- package/dist/cjs/tag-field/tag-field.cjs +3 -3
- package/dist/cjs/text-area-field/text-area-field.cjs +1 -1
- package/dist/cjs/text-field/text-field.cjs +1 -1
- package/dist/esm/button/button.js +4 -2
- package/dist/esm/calendar/calendar-month-day-selector.js +2 -2
- package/dist/esm/calendar/calendar.js +2 -2
- package/dist/esm/combo-box/combo-box.js +2 -2
- package/dist/esm/date-field/date-field.js +78 -0
- package/dist/esm/date-field/index.js +2 -0
- package/dist/esm/date-picker/date-picker.js +83 -0
- package/dist/esm/date-picker/index.js +2 -0
- package/dist/esm/date-range-picker/date-range-picker.js +126 -0
- package/dist/esm/date-range-picker/index.js +2 -0
- package/dist/esm/govt-banner/govt-banner.js +1 -1
- package/dist/esm/index.js +8 -5
- package/dist/esm/menu/menu.js +1 -1
- package/dist/esm/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/calendar.js +19 -0
- package/dist/esm/range-calendar/range-calendar.js +4 -4
- package/dist/esm/select/select.js +2 -2
- package/dist/esm/tag-field/tag-field.js +3 -3
- package/dist/esm/text-area-field/text-area-field.js +1 -1
- package/dist/esm/text-field/text-field.js +1 -1
- package/dist/types/button/button.d.ts.map +1 -1
- package/dist/types/calendar/calendar.d.ts +2 -3
- package/dist/types/calendar/calendar.d.ts.map +1 -1
- package/dist/types/calendar/types.d.ts +2 -13
- package/dist/types/calendar/types.d.ts.map +1 -1
- package/dist/types/date-field/date-field.d.ts +19 -0
- package/dist/types/date-field/date-field.d.ts.map +1 -0
- package/dist/types/date-field/index.d.ts +2 -0
- package/dist/types/date-field/index.d.ts.map +1 -0
- package/dist/types/date-picker/date-picker.d.ts +20 -0
- package/dist/types/date-picker/date-picker.d.ts.map +1 -0
- package/dist/types/date-picker/index.d.ts +2 -0
- package/dist/types/date-picker/index.d.ts.map +1 -0
- package/dist/types/date-range-picker/date-range-picker.d.ts +19 -0
- package/dist/types/date-range-picker/date-range-picker.d.ts.map +1 -0
- package/dist/types/date-range-picker/index.d.ts +2 -0
- package/dist/types/date-range-picker/index.d.ts.map +1 -0
- 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/menu.d.ts +1 -1
- package/dist/types/menu/menu.d.ts.map +1 -1
- package/dist/types/range-calendar/range-calendar.d.ts +2 -13
- package/dist/types/range-calendar/range-calendar.d.ts.map +1 -1
- package/package.json +26 -26
|
@@ -7,9 +7,9 @@ var react = require('react');
|
|
|
7
7
|
var utils = require('@react-aria/utils');
|
|
8
8
|
var reactAriaComponents = require('react-aria-components');
|
|
9
9
|
var ouiTheme = require('@opengovsg/oui-theme');
|
|
10
|
-
var ripple = require('../ripple/ripple.cjs');
|
|
11
10
|
var useRipple = require('../ripple/use-ripple.cjs');
|
|
12
11
|
var spinner = require('../spinner/spinner.cjs');
|
|
12
|
+
var ripple = require('../ripple/ripple.cjs');
|
|
13
13
|
|
|
14
14
|
const Button = react.forwardRef(
|
|
15
15
|
({
|
|
@@ -29,6 +29,7 @@ const Button = react.forwardRef(
|
|
|
29
29
|
isPending,
|
|
30
30
|
spinner: spinnerProp,
|
|
31
31
|
isIconOnly,
|
|
32
|
+
isAttached,
|
|
32
33
|
...props
|
|
33
34
|
}, ref) => {
|
|
34
35
|
const {
|
|
@@ -62,7 +63,8 @@ const Button = react.forwardRef(
|
|
|
62
63
|
layout,
|
|
63
64
|
color,
|
|
64
65
|
radius,
|
|
65
|
-
isIconOnly
|
|
66
|
+
isIconOnly,
|
|
67
|
+
isAttached
|
|
66
68
|
})
|
|
67
69
|
),
|
|
68
70
|
isPending,
|
|
@@ -6,11 +6,11 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
6
6
|
var react = require('react');
|
|
7
7
|
var date = require('@internationalized/date');
|
|
8
8
|
var reactAriaComponents = require('react-aria-components');
|
|
9
|
-
var select = require('../select/select.cjs');
|
|
10
|
-
var selectItem = require('../select/select-item.cjs');
|
|
11
9
|
var agnosticCalendarStateContext = require('./agnostic-calendar-state-context.cjs');
|
|
12
10
|
var calendarStyleContext = require('./calendar-style-context.cjs');
|
|
13
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
14
|
var useCalendarI18n = require('./hooks/use-calendar-i18n.cjs');
|
|
15
15
|
|
|
16
16
|
const CalendarMonthDaySelector = () => {
|
|
@@ -15,7 +15,7 @@ var calendarGridHeader = require('./calendar-grid-header.cjs');
|
|
|
15
15
|
var calendarHeader = require('./calendar-header.cjs');
|
|
16
16
|
var calendarStyleContext = require('./calendar-style-context.cjs');
|
|
17
17
|
|
|
18
|
-
const Calendar = utils.
|
|
18
|
+
const Calendar = utils.forwardRefGeneric(function Calendar2(originalProps, ref) {
|
|
19
19
|
const [props, variantProps] = utils.mapPropsVariants(
|
|
20
20
|
originalProps,
|
|
21
21
|
ouiTheme.calendarStyles.variantKeys
|
|
@@ -7,13 +7,13 @@ var react = require('react');
|
|
|
7
7
|
var reactAria = require('react-aria');
|
|
8
8
|
var reactAriaComponents = require('react-aria-components');
|
|
9
9
|
var ouiTheme = require('@opengovsg/oui-theme');
|
|
10
|
-
var field = require('../field/field.cjs');
|
|
11
|
-
var popover = require('../popover/popover.cjs');
|
|
12
10
|
var utils = require('../system/utils.cjs');
|
|
13
11
|
var comboBoxVariantContext = require('./combo-box-variant-context.cjs');
|
|
12
|
+
var field = require('../field/field.cjs');
|
|
14
13
|
var chevronUp = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-up.cjs');
|
|
15
14
|
var chevronDown = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.cjs');
|
|
16
15
|
var x = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/x.cjs');
|
|
16
|
+
var popover = require('../popover/popover.cjs');
|
|
17
17
|
|
|
18
18
|
const calculateEstimatedRowHeight = (size) => {
|
|
19
19
|
switch (size) {
|
|
@@ -0,0 +1,81 @@
|
|
|
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 ouiTheme = require('@opengovsg/oui-theme');
|
|
9
|
+
var utils = require('../system/utils.cjs');
|
|
10
|
+
var field = require('../field/field.cjs');
|
|
11
|
+
|
|
12
|
+
function DateField(originalProps) {
|
|
13
|
+
const [
|
|
14
|
+
{ label, description, errorMessage, className, classNames, ...props },
|
|
15
|
+
variantProps
|
|
16
|
+
] = react.useMemo(
|
|
17
|
+
() => utils.mapPropsVariants(originalProps, ouiTheme.dateFieldStyles.variantKeys),
|
|
18
|
+
[originalProps]
|
|
19
|
+
);
|
|
20
|
+
const styles = ouiTheme.dateFieldStyles({
|
|
21
|
+
className: classNames?.input,
|
|
22
|
+
...variantProps
|
|
23
|
+
});
|
|
24
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
25
|
+
reactAriaComponents.DateField,
|
|
26
|
+
{
|
|
27
|
+
...props,
|
|
28
|
+
isDisabled: variantProps.isDisabled,
|
|
29
|
+
className: ouiTheme.composeTailwindRenderProps(
|
|
30
|
+
className ?? classNames?.base,
|
|
31
|
+
"flex flex-col gap-2"
|
|
32
|
+
),
|
|
33
|
+
children: [
|
|
34
|
+
label && /* @__PURE__ */ jsxRuntime.jsx(field.Label, { size: variantProps.size, className: classNames?.label, children: label }),
|
|
35
|
+
/* @__PURE__ */ jsxRuntime.jsx(DateInput, { size: variantProps.size, className: styles }),
|
|
36
|
+
description && /* @__PURE__ */ jsxRuntime.jsx(
|
|
37
|
+
field.Description,
|
|
38
|
+
{
|
|
39
|
+
size: variantProps.size,
|
|
40
|
+
className: classNames?.description,
|
|
41
|
+
children: description
|
|
42
|
+
}
|
|
43
|
+
),
|
|
44
|
+
/* @__PURE__ */ jsxRuntime.jsx(field.FieldError, { size: variantProps.size, className: classNames?.error, children: errorMessage })
|
|
45
|
+
]
|
|
46
|
+
}
|
|
47
|
+
);
|
|
48
|
+
}
|
|
49
|
+
function DateInput(originalProps) {
|
|
50
|
+
const [{ className, classNames, ...props }, variantProps] = react.useMemo(
|
|
51
|
+
() => utils.mapPropsVariants(originalProps, ouiTheme.dateInputStyles.variantKeys),
|
|
52
|
+
[originalProps]
|
|
53
|
+
);
|
|
54
|
+
const styles = ouiTheme.dateInputStyles(variantProps);
|
|
55
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
56
|
+
reactAriaComponents.DateInput,
|
|
57
|
+
{
|
|
58
|
+
className: ouiTheme.composeTailwindRenderProps(
|
|
59
|
+
className ?? classNames?.base,
|
|
60
|
+
styles.base()
|
|
61
|
+
),
|
|
62
|
+
...props,
|
|
63
|
+
children: (segment) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
64
|
+
reactAriaComponents.DateSegment,
|
|
65
|
+
{
|
|
66
|
+
segment,
|
|
67
|
+
className: ouiTheme.composeRenderProps(
|
|
68
|
+
classNames?.segment,
|
|
69
|
+
(className2, renderProps) => styles.segment({
|
|
70
|
+
...renderProps,
|
|
71
|
+
className: className2
|
|
72
|
+
})
|
|
73
|
+
)
|
|
74
|
+
}
|
|
75
|
+
)
|
|
76
|
+
}
|
|
77
|
+
);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
exports.DateField = DateField;
|
|
81
|
+
exports.DateInput = DateInput;
|
|
@@ -0,0 +1,85 @@
|
|
|
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 ouiTheme = require('@opengovsg/oui-theme');
|
|
9
|
+
var utils = require('../system/utils.cjs');
|
|
10
|
+
var dateField = require('../date-field/date-field.cjs');
|
|
11
|
+
var calendar = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/calendar.cjs');
|
|
12
|
+
var calendar$1 = require('../calendar/calendar.cjs');
|
|
13
|
+
var field = require('../field/field.cjs');
|
|
14
|
+
var button = require('../button/button.cjs');
|
|
15
|
+
var popover = require('../popover/popover.cjs');
|
|
16
|
+
|
|
17
|
+
function DatePicker(originalProps) {
|
|
18
|
+
const [
|
|
19
|
+
{
|
|
20
|
+
label,
|
|
21
|
+
description,
|
|
22
|
+
errorMessage,
|
|
23
|
+
classNames,
|
|
24
|
+
className,
|
|
25
|
+
calendarProps,
|
|
26
|
+
popoverProps,
|
|
27
|
+
calendarButtonProps,
|
|
28
|
+
...props
|
|
29
|
+
},
|
|
30
|
+
variantProps
|
|
31
|
+
] = react.useMemo(
|
|
32
|
+
() => utils.mapPropsVariants(originalProps, ouiTheme.datePickerStyles.variantKeys),
|
|
33
|
+
[originalProps]
|
|
34
|
+
);
|
|
35
|
+
const styles = ouiTheme.datePickerStyles(variantProps);
|
|
36
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
37
|
+
reactAriaComponents.DatePicker,
|
|
38
|
+
{
|
|
39
|
+
...props,
|
|
40
|
+
className: ouiTheme.composeTailwindRenderProps(
|
|
41
|
+
className ?? classNames?.base,
|
|
42
|
+
styles.base()
|
|
43
|
+
),
|
|
44
|
+
children: [
|
|
45
|
+
label && /* @__PURE__ */ jsxRuntime.jsx(field.Label, { size: variantProps.size, children: label }),
|
|
46
|
+
/* @__PURE__ */ jsxRuntime.jsxs(field.FieldGroup, { className: styles.group({ className: classNames?.group }), children: [
|
|
47
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
48
|
+
dateField.DateInput,
|
|
49
|
+
{
|
|
50
|
+
size: variantProps.size,
|
|
51
|
+
className: styles.input({ className: classNames?.input })
|
|
52
|
+
}
|
|
53
|
+
),
|
|
54
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
55
|
+
button.Button,
|
|
56
|
+
{
|
|
57
|
+
isIconOnly: true,
|
|
58
|
+
isAttached: true,
|
|
59
|
+
variant: "clear",
|
|
60
|
+
color: "sub",
|
|
61
|
+
size: variantProps.size,
|
|
62
|
+
className: styles.calendarButton({
|
|
63
|
+
className: classNames?.calendarButton
|
|
64
|
+
}),
|
|
65
|
+
...calendarButtonProps,
|
|
66
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(calendar.default, { "aria-hidden": true })
|
|
67
|
+
}
|
|
68
|
+
)
|
|
69
|
+
] }),
|
|
70
|
+
/* @__PURE__ */ jsxRuntime.jsx(popover.Popover, { placement: "bottom end", ...popoverProps, children: /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Dialog, { className: styles.dialog({ className: classNames?.dialog }), children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
71
|
+
calendar$1.Calendar,
|
|
72
|
+
{
|
|
73
|
+
size: variantProps.size === "xs" ? "sm" : variantProps.size,
|
|
74
|
+
classNames: classNames?.calendar,
|
|
75
|
+
...calendarProps
|
|
76
|
+
}
|
|
77
|
+
) }) }),
|
|
78
|
+
description && /* @__PURE__ */ jsxRuntime.jsx(field.Description, { size: variantProps.size, children: description }),
|
|
79
|
+
/* @__PURE__ */ jsxRuntime.jsx(field.FieldError, { size: variantProps.size, children: errorMessage })
|
|
80
|
+
]
|
|
81
|
+
}
|
|
82
|
+
);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
exports.DatePicker = DatePicker;
|
|
@@ -0,0 +1,128 @@
|
|
|
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 ouiTheme = require('@opengovsg/oui-theme');
|
|
10
|
+
var utils = require('../system/utils.cjs');
|
|
11
|
+
var calendar = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/calendar.cjs');
|
|
12
|
+
var rangeCalendar = require('../range-calendar/range-calendar.cjs');
|
|
13
|
+
var field = require('../field/field.cjs');
|
|
14
|
+
var dateField = require('../date-field/date-field.cjs');
|
|
15
|
+
var button = require('../button/button.cjs');
|
|
16
|
+
var popover = require('../popover/popover.cjs');
|
|
17
|
+
|
|
18
|
+
function DateRangePicker(originalProps) {
|
|
19
|
+
const [
|
|
20
|
+
{
|
|
21
|
+
label,
|
|
22
|
+
description,
|
|
23
|
+
errorMessage,
|
|
24
|
+
classNames,
|
|
25
|
+
className,
|
|
26
|
+
calendarProps,
|
|
27
|
+
popoverProps,
|
|
28
|
+
calendarButtonProps,
|
|
29
|
+
minValue: minValueProp,
|
|
30
|
+
maxValue: maxValueProp,
|
|
31
|
+
...props
|
|
32
|
+
},
|
|
33
|
+
variantProps
|
|
34
|
+
] = react.useMemo(
|
|
35
|
+
() => utils.mapPropsVariants(originalProps, ouiTheme.dateRangePickerStyles.variantKeys),
|
|
36
|
+
[originalProps]
|
|
37
|
+
);
|
|
38
|
+
const styles = ouiTheme.dateRangePickerStyles(variantProps);
|
|
39
|
+
const { minValue, maxValue } = react.useMemo(() => {
|
|
40
|
+
return {
|
|
41
|
+
minValue: minValueProp ?? new date.CalendarDate(1900, 0, 1),
|
|
42
|
+
// Default to 1 Jan 1900
|
|
43
|
+
maxValue: maxValueProp ?? new date.CalendarDate(2100, 12, 31)
|
|
44
|
+
// Default to 31 Dec 2100
|
|
45
|
+
};
|
|
46
|
+
}, [maxValueProp, minValueProp]);
|
|
47
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
48
|
+
reactAriaComponents.DateRangePicker,
|
|
49
|
+
{
|
|
50
|
+
...props,
|
|
51
|
+
minValue,
|
|
52
|
+
maxValue,
|
|
53
|
+
className: ouiTheme.composeTailwindRenderProps(
|
|
54
|
+
className ?? classNames?.base,
|
|
55
|
+
styles.base()
|
|
56
|
+
),
|
|
57
|
+
children: [
|
|
58
|
+
label && /* @__PURE__ */ jsxRuntime.jsx(field.Label, { children: label }),
|
|
59
|
+
/* @__PURE__ */ jsxRuntime.jsxs(field.FieldGroup, { className: styles.group({ className: classNames?.group }), children: [
|
|
60
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
61
|
+
"div",
|
|
62
|
+
{
|
|
63
|
+
className: styles.dateWrapper({ className: classNames?.dateWrapper }),
|
|
64
|
+
children: [
|
|
65
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
66
|
+
dateField.DateInput,
|
|
67
|
+
{
|
|
68
|
+
slot: "start",
|
|
69
|
+
size: variantProps.size,
|
|
70
|
+
className: styles.startInput({ className: classNames?.startInput })
|
|
71
|
+
}
|
|
72
|
+
),
|
|
73
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
74
|
+
"span",
|
|
75
|
+
{
|
|
76
|
+
"aria-hidden": "true",
|
|
77
|
+
className: styles.connector({
|
|
78
|
+
className: classNames?.connector
|
|
79
|
+
}),
|
|
80
|
+
children: "\u2013"
|
|
81
|
+
}
|
|
82
|
+
),
|
|
83
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
84
|
+
dateField.DateInput,
|
|
85
|
+
{
|
|
86
|
+
slot: "end",
|
|
87
|
+
size: variantProps.size,
|
|
88
|
+
className: styles.endInput({ className: classNames?.endInput })
|
|
89
|
+
}
|
|
90
|
+
)
|
|
91
|
+
]
|
|
92
|
+
}
|
|
93
|
+
),
|
|
94
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
95
|
+
button.Button,
|
|
96
|
+
{
|
|
97
|
+
isIconOnly: true,
|
|
98
|
+
isAttached: true,
|
|
99
|
+
variant: "clear",
|
|
100
|
+
color: "sub",
|
|
101
|
+
size: variantProps.size,
|
|
102
|
+
className: styles.calendarButton({
|
|
103
|
+
className: classNames?.calendarButton
|
|
104
|
+
}),
|
|
105
|
+
...calendarButtonProps,
|
|
106
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(calendar.default, { "aria-hidden": true })
|
|
107
|
+
}
|
|
108
|
+
)
|
|
109
|
+
] }),
|
|
110
|
+
description && /* @__PURE__ */ jsxRuntime.jsx(field.Description, { size: variantProps.size, children: description }),
|
|
111
|
+
/* @__PURE__ */ jsxRuntime.jsx(field.FieldError, { size: variantProps.size, children: errorMessage }),
|
|
112
|
+
/* @__PURE__ */ jsxRuntime.jsx(popover.Popover, { placement: "bottom end", ...popoverProps, children: /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Dialog, { className: styles.dialog({ className: classNames?.dialog }), children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
113
|
+
rangeCalendar.RangeCalendar,
|
|
114
|
+
{
|
|
115
|
+
visibleDuration: { months: 2 },
|
|
116
|
+
size: variantProps.size === "xs" ? "sm" : variantProps.size,
|
|
117
|
+
classNames: classNames?.calendar,
|
|
118
|
+
minValue,
|
|
119
|
+
maxValue,
|
|
120
|
+
...calendarProps
|
|
121
|
+
}
|
|
122
|
+
) }) })
|
|
123
|
+
]
|
|
124
|
+
}
|
|
125
|
+
);
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
exports.DateRangePicker = DateRangePicker;
|
|
@@ -169,7 +169,7 @@ function GovtBanner({
|
|
|
169
169
|
),
|
|
170
170
|
/* @__PURE__ */ jsxRuntime.jsxs("article", { children: [
|
|
171
171
|
formatMessage("officialLinkContent", {
|
|
172
|
-
boldThis: (content) => /* @__PURE__ */ jsxRuntime.jsx("b", { children: content })
|
|
172
|
+
boldThis: (content) => /* @__PURE__ */ jsxRuntime.jsx("b", { children: content }, content)
|
|
173
173
|
}),
|
|
174
174
|
" ",
|
|
175
175
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
package/dist/cjs/index.cjs
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
|
+
var textArea = require('./text-area/text-area.cjs');
|
|
4
5
|
var useControllableState = require('./hooks/use-controllable-state.cjs');
|
|
6
|
+
var button = require('./button/button.cjs');
|
|
5
7
|
var govtBanner = require('./govt-banner/govt-banner.cjs');
|
|
6
8
|
var ripple = require('./ripple/ripple.cjs');
|
|
7
9
|
var useRipple = require('./ripple/use-ripple.cjs');
|
|
@@ -12,32 +14,35 @@ var skipNavLink = require('./skip-nav-link/skip-nav-link.cjs');
|
|
|
12
14
|
var input = require('./input/input.cjs');
|
|
13
15
|
var textField = require('./text-field/text-field.cjs');
|
|
14
16
|
var field = require('./field/field.cjs');
|
|
15
|
-
var textArea = require('./text-area/text-area.cjs');
|
|
16
17
|
var textAreaField = require('./text-area-field/text-area-field.cjs');
|
|
17
18
|
var comboBox = require('./combo-box/combo-box.cjs');
|
|
18
19
|
var comboBoxFuzzy = require('./combo-box/combo-box-fuzzy.cjs');
|
|
19
20
|
var comboBoxItem = require('./combo-box/combo-box-item.cjs');
|
|
20
21
|
var comboBoxVariantContext = require('./combo-box/combo-box-variant-context.cjs');
|
|
22
|
+
var banner = require('./banner/banner.cjs');
|
|
21
23
|
var tagField = require('./tag-field/tag-field.cjs');
|
|
22
24
|
var tagFieldItem = require('./tag-field/tag-field-item.cjs');
|
|
23
25
|
var select = require('./select/select.cjs');
|
|
24
26
|
var selectItem = require('./select/select-item.cjs');
|
|
25
27
|
var selectVariantContext = require('./select/select-variant-context.cjs');
|
|
28
|
+
var badge = require('./badge/badge.cjs');
|
|
29
|
+
var date = require('@internationalized/date');
|
|
26
30
|
var calendar = require('./calendar/calendar.cjs');
|
|
27
31
|
var calendarStyleContext = require('./calendar/calendar-style-context.cjs');
|
|
28
32
|
var utils = require('./calendar/utils.cjs');
|
|
29
|
-
var date = require('@internationalized/date');
|
|
30
33
|
var rangeCalendar = require('./range-calendar/range-calendar.cjs');
|
|
31
34
|
var menu = require('./menu/menu.cjs');
|
|
32
35
|
var popover = require('./popover/popover.cjs');
|
|
33
36
|
var tabs = require('./tabs/tabs.cjs');
|
|
34
|
-
var
|
|
35
|
-
var
|
|
36
|
-
var
|
|
37
|
+
var dateField = require('./date-field/date-field.cjs');
|
|
38
|
+
var datePicker = require('./date-picker/date-picker.cjs');
|
|
39
|
+
var dateRangePicker = require('./date-range-picker/date-range-picker.cjs');
|
|
37
40
|
|
|
38
41
|
|
|
39
42
|
|
|
43
|
+
exports.TextArea = textArea.TextArea;
|
|
40
44
|
exports.useControllableState = useControllableState.useControllableState;
|
|
45
|
+
exports.Button = button.Button;
|
|
41
46
|
exports.GovtBanner = govtBanner.GovtBanner;
|
|
42
47
|
exports.Ripple = ripple.Ripple;
|
|
43
48
|
exports.useRipple = useRipple.useRipple;
|
|
@@ -51,7 +56,6 @@ exports.Description = field.Description;
|
|
|
51
56
|
exports.FieldError = field.FieldError;
|
|
52
57
|
exports.FieldGroup = field.FieldGroup;
|
|
53
58
|
exports.Label = field.Label;
|
|
54
|
-
exports.TextArea = textArea.TextArea;
|
|
55
59
|
exports.TextAreaField = textAreaField.TextAreaField;
|
|
56
60
|
exports.ComboBox = comboBox.ComboBox;
|
|
57
61
|
exports.ComboBoxEmptyState = comboBox.ComboBoxEmptyState;
|
|
@@ -59,12 +63,18 @@ exports.ComboBoxFuzzy = comboBoxFuzzy.ComboBoxFuzzy;
|
|
|
59
63
|
exports.ComboBoxItem = comboBoxItem.ComboBoxItem;
|
|
60
64
|
exports.ComboBoxVariantContext = comboBoxVariantContext.ComboBoxVariantContext;
|
|
61
65
|
exports.useComboBoxVariantContext = comboBoxVariantContext.useComboBoxVariantContext;
|
|
66
|
+
exports.Banner = banner.Banner;
|
|
62
67
|
exports.TagField = tagField.TagField;
|
|
63
68
|
exports.TagFieldItem = tagFieldItem.TagFieldItem;
|
|
64
69
|
exports.Select = select.Select;
|
|
65
70
|
exports.SelectItem = selectItem.SelectItem;
|
|
66
71
|
exports.SelectVariantContext = selectVariantContext.SelectVariantContext;
|
|
67
72
|
exports.useSelectVariantContext = selectVariantContext.useSelectVariantContext;
|
|
73
|
+
exports.Badge = badge.Badge;
|
|
74
|
+
Object.defineProperty(exports, "CalendarDate", {
|
|
75
|
+
enumerable: true,
|
|
76
|
+
get: function () { return date.CalendarDate; }
|
|
77
|
+
});
|
|
68
78
|
exports.Calendar = calendar.Calendar;
|
|
69
79
|
exports.CalendarStateWrapper = calendar.CalendarStateWrapper;
|
|
70
80
|
exports.CalendarStyleContext = calendarStyleContext.CalendarStyleContext;
|
|
@@ -73,10 +83,6 @@ exports.getEraFormat = utils.getEraFormat;
|
|
|
73
83
|
exports.useGenerateLocalizedMonths = utils.useGenerateLocalizedMonths;
|
|
74
84
|
exports.useGenerateLocalizedYears = utils.useGenerateLocalizedYears;
|
|
75
85
|
exports.useLocalizedMonthYear = utils.useLocalizedMonthYear;
|
|
76
|
-
Object.defineProperty(exports, "CalendarDate", {
|
|
77
|
-
enumerable: true,
|
|
78
|
-
get: function () { return date.CalendarDate; }
|
|
79
|
-
});
|
|
80
86
|
exports.RangeCalendar = rangeCalendar.RangeCalendar;
|
|
81
87
|
exports.RangeCalendarCell = rangeCalendar.RangeCalendarCell;
|
|
82
88
|
exports.RangeCalendarStateWrapper = rangeCalendar.RangeCalendarStateWrapper;
|
|
@@ -95,6 +101,7 @@ exports.TabPanel = tabs.TabPanel;
|
|
|
95
101
|
exports.Tabs = tabs.Tabs;
|
|
96
102
|
exports.TabsVariantContext = tabs.TabsVariantContext;
|
|
97
103
|
exports.useTabsVariantContext = tabs.useTabsVariantContext;
|
|
98
|
-
exports.
|
|
99
|
-
exports.
|
|
100
|
-
exports.
|
|
104
|
+
exports.DateField = dateField.DateField;
|
|
105
|
+
exports.DateInput = dateField.DateInput;
|
|
106
|
+
exports.DatePicker = datePicker.DatePicker;
|
|
107
|
+
exports.DateRangePicker = dateRangePicker.DateRangePicker;
|
package/dist/cjs/menu/menu.cjs
CHANGED
|
@@ -6,11 +6,11 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
6
6
|
var react = require('react');
|
|
7
7
|
var reactAriaComponents = require('react-aria-components');
|
|
8
8
|
var ouiTheme = require('@opengovsg/oui-theme');
|
|
9
|
-
var popover = require('../popover/popover.cjs');
|
|
10
9
|
var utils = require('../system/utils.cjs');
|
|
11
10
|
var check = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.cjs');
|
|
12
11
|
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');
|
|
13
12
|
var context = require('../system/react-utils/context.cjs');
|
|
13
|
+
var popover = require('../popover/popover.cjs');
|
|
14
14
|
|
|
15
15
|
const [MenuVariantContext, useMenuVariantContext] = context.createContext({
|
|
16
16
|
name: "MenuVariantContext",
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var createLucideIcon = require('../createLucideIcon.cjs');
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* @license lucide-react v0.475.0 - ISC
|
|
9
|
+
*
|
|
10
|
+
* This source code is licensed under the ISC license.
|
|
11
|
+
* See the LICENSE file in the root directory of this source tree.
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
const __iconNode = [
|
|
16
|
+
["path", { d: "M8 2v4", key: "1cmpym" }],
|
|
17
|
+
["path", { d: "M16 2v4", key: "4m81vk" }],
|
|
18
|
+
["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
|
|
19
|
+
["path", { d: "M3 10h18", key: "8toen8" }]
|
|
20
|
+
];
|
|
21
|
+
const Calendar = createLucideIcon.default("Calendar", __iconNode);
|
|
22
|
+
|
|
23
|
+
exports.__iconNode = __iconNode;
|
|
24
|
+
exports.default = Calendar;
|
|
@@ -8,14 +8,14 @@ var date = require('@internationalized/date');
|
|
|
8
8
|
var reactAriaComponents = require('react-aria-components');
|
|
9
9
|
var useDeepCompare = require('use-deep-compare');
|
|
10
10
|
var ouiTheme = require('@opengovsg/oui-theme');
|
|
11
|
-
var calendarStyleContext = require('../calendar/calendar-style-context.cjs');
|
|
12
11
|
var agnosticCalendarStateContext = require('../calendar/agnostic-calendar-state-context.cjs');
|
|
13
12
|
var calendarBottomContent = require('../calendar/calendar-bottom-content.cjs');
|
|
14
13
|
var calendarGridHeader = require('../calendar/calendar-grid-header.cjs');
|
|
15
14
|
var calendarHeader = require('../calendar/calendar-header.cjs');
|
|
16
15
|
var utils = require('../system/utils.cjs');
|
|
16
|
+
var calendarStyleContext = require('../calendar/calendar-style-context.cjs');
|
|
17
17
|
|
|
18
|
-
const RangeCalendar =
|
|
18
|
+
const RangeCalendar = utils.forwardRefGeneric(function RangeCalendar2(originalProps, ref) {
|
|
19
19
|
const [props, variantProps] = utils.mapPropsVariants(
|
|
20
20
|
originalProps,
|
|
21
21
|
ouiTheme.calendarStyles.variantKeys
|
|
@@ -6,11 +6,11 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
6
6
|
var react = require('react');
|
|
7
7
|
var reactAriaComponents = require('react-aria-components');
|
|
8
8
|
var ouiTheme = require('@opengovsg/oui-theme');
|
|
9
|
-
var field = require('../field/field.cjs');
|
|
10
|
-
var popover = require('../popover/popover.cjs');
|
|
11
9
|
var utils = require('../system/utils.cjs');
|
|
12
10
|
var selectVariantContext = require('./select-variant-context.cjs');
|
|
11
|
+
var field = require('../field/field.cjs');
|
|
13
12
|
var chevronDown = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.cjs');
|
|
13
|
+
var popover = require('../popover/popover.cjs');
|
|
14
14
|
var button = require('../button/button.cjs');
|
|
15
15
|
|
|
16
16
|
const calculateEstimatedRowHeight = (size) => {
|
|
@@ -6,15 +6,15 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
6
6
|
var react = require('react');
|
|
7
7
|
var reactAriaComponents = require('react-aria-components');
|
|
8
8
|
var ouiTheme = require('@opengovsg/oui-theme');
|
|
9
|
-
var field = require('../field/field.cjs');
|
|
10
|
-
var input = require('../input/input.cjs');
|
|
11
|
-
var popover = require('../popover/popover.cjs');
|
|
12
9
|
var tagFieldItem = require('./tag-field-item.cjs');
|
|
13
10
|
var tagFieldList = require('./tag-field-list.cjs');
|
|
14
11
|
var tagFieldRoot = require('./tag-field-root.cjs');
|
|
15
12
|
var tagFieldTagList = require('./tag-field-tag-list.cjs');
|
|
16
13
|
var tagFieldTrigger = require('./tag-field-trigger.cjs');
|
|
17
14
|
var chevronDown = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.cjs');
|
|
15
|
+
var field = require('../field/field.cjs');
|
|
16
|
+
var input = require('../input/input.cjs');
|
|
17
|
+
var popover = require('../popover/popover.cjs');
|
|
18
18
|
|
|
19
19
|
function TagField({
|
|
20
20
|
classNames,
|
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var reactAriaComponents = require('react-aria-components');
|
|
7
7
|
var ouiTheme = require('@opengovsg/oui-theme');
|
|
8
|
-
var field = require('../field/field.cjs');
|
|
9
8
|
var textArea = require('../text-area/text-area.cjs');
|
|
9
|
+
var field = require('../field/field.cjs');
|
|
10
10
|
|
|
11
11
|
function TextAreaField({
|
|
12
12
|
label,
|
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var reactAriaComponents = require('react-aria-components');
|
|
7
7
|
var ouiTheme = require('@opengovsg/oui-theme');
|
|
8
|
-
var field = require('../field/field.cjs');
|
|
9
8
|
var input = require('../input/input.cjs');
|
|
9
|
+
var field = require('../field/field.cjs');
|
|
10
10
|
|
|
11
11
|
function TextField({
|
|
12
12
|
label,
|
|
@@ -5,9 +5,9 @@ import { forwardRef, useMemo } from 'react';
|
|
|
5
5
|
import { chain } from '@react-aria/utils';
|
|
6
6
|
import { Button as Button$1, composeRenderProps } from 'react-aria-components';
|
|
7
7
|
import { buttonStyles } from '@opengovsg/oui-theme';
|
|
8
|
-
import { Ripple } from '../ripple/ripple.js';
|
|
9
8
|
import { useRipple } from '../ripple/use-ripple.js';
|
|
10
9
|
import { Spinner } from '../spinner/spinner.js';
|
|
10
|
+
import { Ripple } from '../ripple/ripple.js';
|
|
11
11
|
|
|
12
12
|
const Button = forwardRef(
|
|
13
13
|
({
|
|
@@ -27,6 +27,7 @@ const Button = forwardRef(
|
|
|
27
27
|
isPending,
|
|
28
28
|
spinner: spinnerProp,
|
|
29
29
|
isIconOnly,
|
|
30
|
+
isAttached,
|
|
30
31
|
...props
|
|
31
32
|
}, ref) => {
|
|
32
33
|
const {
|
|
@@ -60,7 +61,8 @@ const Button = forwardRef(
|
|
|
60
61
|
layout,
|
|
61
62
|
color,
|
|
62
63
|
radius,
|
|
63
|
-
isIconOnly
|
|
64
|
+
isIconOnly,
|
|
65
|
+
isAttached
|
|
64
66
|
})
|
|
65
67
|
),
|
|
66
68
|
isPending,
|
|
@@ -4,11 +4,11 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
4
4
|
import { useContext } from 'react';
|
|
5
5
|
import { CalendarDate } from '@internationalized/date';
|
|
6
6
|
import { Group } from 'react-aria-components';
|
|
7
|
-
import { Select } from '../select/select.js';
|
|
8
|
-
import { SelectItem } from '../select/select-item.js';
|
|
9
7
|
import { AgnosticCalendarStateContext } from './agnostic-calendar-state-context.js';
|
|
10
8
|
import { useCalendarStyleContext } from './calendar-style-context.js';
|
|
11
9
|
import { useCalendarSelectors } from './hooks/use-calendar-selectors.js';
|
|
10
|
+
import { Select } from '../select/select.js';
|
|
11
|
+
import { SelectItem } from '../select/select-item.js';
|
|
12
12
|
import { useCalendarI18n } from './hooks/use-calendar-i18n.js';
|
|
13
13
|
|
|
14
14
|
const CalendarMonthDaySelector = () => {
|