@opengovsg/oui 0.0.18 → 0.0.20
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/banner/banner.cjs +7 -2
- package/dist/cjs/button/button.cjs +1 -1
- package/dist/cjs/calendar/calendar-month-day-selector.cjs +2 -2
- package/dist/cjs/checkbox/checkbox.cjs +1 -1
- package/dist/cjs/combo-box/combo-box.cjs +5 -3
- package/dist/cjs/date-field/date-field.cjs +1 -1
- package/dist/cjs/date-picker/date-picker.cjs +5 -4
- package/dist/cjs/date-range-picker/date-range-picker.cjs +4 -4
- package/dist/cjs/index.cjs +11 -11
- package/dist/cjs/menu/menu.cjs +1 -1
- package/dist/cjs/range-calendar/range-calendar.cjs +1 -1
- 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/cjs/toggle/toggle.cjs +3 -1
- package/dist/esm/banner/banner.js +7 -2
- package/dist/esm/button/button.js +1 -1
- package/dist/esm/calendar/calendar-month-day-selector.js +2 -2
- package/dist/esm/checkbox/checkbox.js +1 -1
- package/dist/esm/combo-box/combo-box.js +5 -3
- package/dist/esm/date-field/date-field.js +1 -1
- package/dist/esm/date-picker/date-picker.js +5 -4
- package/dist/esm/date-range-picker/date-range-picker.js +4 -4
- package/dist/esm/index.js +4 -4
- package/dist/esm/menu/menu.js +1 -1
- package/dist/esm/range-calendar/range-calendar.js +1 -1
- 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/esm/toggle/toggle.js +3 -1
- package/dist/types/banner/banner.d.ts +1 -1
- package/dist/types/banner/banner.d.ts.map +1 -1
- package/dist/types/combo-box/combo-box.d.ts +2 -1
- package/dist/types/combo-box/combo-box.d.ts.map +1 -1
- package/dist/types/toggle/toggle.d.ts +6 -1
- package/dist/types/toggle/toggle.d.ts.map +1 -1
- package/package.json +4 -4
|
@@ -43,6 +43,9 @@ const Banner = ({
|
|
|
43
43
|
if (startContentProp) {
|
|
44
44
|
return startContentProp;
|
|
45
45
|
}
|
|
46
|
+
if (startContentProp === null) {
|
|
47
|
+
return null;
|
|
48
|
+
}
|
|
46
49
|
switch (variant) {
|
|
47
50
|
case "info":
|
|
48
51
|
return /* @__PURE__ */ jsxRuntime.jsx(info.default, { className: styles.icon({ className: classNames?.icon }) });
|
|
@@ -58,7 +61,9 @@ const Banner = ({
|
|
|
58
61
|
}, [classNames?.icon, startContentProp, styles, variant]);
|
|
59
62
|
const bannerRef = $670gB$react.useRef(null);
|
|
60
63
|
const state = reactStately.useDisclosureState({
|
|
61
|
-
defaultExpanded
|
|
64
|
+
defaultExpanded,
|
|
65
|
+
isExpanded: disclosureProps.isExpanded,
|
|
66
|
+
onExpandedChange: disclosureProps.onExpandedChange
|
|
62
67
|
});
|
|
63
68
|
const { buttonProps, panelProps: bannerProps } = reactAria.useDisclosure(
|
|
64
69
|
disclosureProps,
|
|
@@ -76,7 +81,7 @@ const Banner = ({
|
|
|
76
81
|
...isDismissable ? bannerProps : {},
|
|
77
82
|
children: [
|
|
78
83
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.content({ className: classNames?.content }), children: [
|
|
79
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
84
|
+
startContent && /* @__PURE__ */ jsxRuntime.jsx(
|
|
80
85
|
"div",
|
|
81
86
|
{
|
|
82
87
|
className: styles.startContentWrapper({
|
|
@@ -7,9 +7,9 @@ var $670gB$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');
|
|
10
11
|
var useRipple = require('../ripple/use-ripple.cjs');
|
|
11
12
|
var spinner = require('../spinner/spinner.cjs');
|
|
12
|
-
var ripple = require('../ripple/ripple.cjs');
|
|
13
13
|
|
|
14
14
|
const Button = $670gB$react.forwardRef(
|
|
15
15
|
({
|
|
@@ -6,11 +6,11 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
6
6
|
var $670gB$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');
|
|
9
11
|
var agnosticCalendarStateContext = require('./agnostic-calendar-state-context.cjs');
|
|
10
12
|
var calendarStyleContext = require('./calendar-style-context.cjs');
|
|
11
13
|
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 = () => {
|
|
@@ -5,11 +5,11 @@
|
|
|
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');
|
|
8
9
|
var utils = require('../system/utils.cjs');
|
|
9
10
|
var checkboxGroupStyleContext = require('./checkbox-group-style-context.cjs');
|
|
10
11
|
var minus = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/minus.cjs');
|
|
11
12
|
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
|
-
var field = require('../field/field.cjs');
|
|
13
13
|
|
|
14
14
|
const Checkbox = ({
|
|
15
15
|
classNames,
|
|
@@ -7,13 +7,13 @@ var $670gB$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');
|
|
10
12
|
var utils = require('../system/utils.cjs');
|
|
11
13
|
var comboBoxVariantContext = require('./combo-box-variant-context.cjs');
|
|
12
|
-
var field = require('../field/field.cjs');
|
|
13
14
|
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');
|
|
14
15
|
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
16
|
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) {
|
|
@@ -75,6 +75,7 @@ function ComboBox(originalProps) {
|
|
|
75
75
|
dependencies,
|
|
76
76
|
onClear,
|
|
77
77
|
renderEmptyState: renderEmptyStateProp,
|
|
78
|
+
inputProps,
|
|
78
79
|
...props
|
|
79
80
|
} = _props;
|
|
80
81
|
const styles = ouiTheme.comboBoxStyles(variantProps);
|
|
@@ -135,7 +136,8 @@ function ComboBox(originalProps) {
|
|
|
135
136
|
className: ouiTheme.composeRenderProps(
|
|
136
137
|
classNames?.field,
|
|
137
138
|
(className, renderProps) => styles.field({ ...renderProps, className })
|
|
138
|
-
)
|
|
139
|
+
),
|
|
140
|
+
...inputProps
|
|
139
141
|
}
|
|
140
142
|
),
|
|
141
143
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -6,8 +6,8 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
6
6
|
var $670gB$react = require('react');
|
|
7
7
|
var reactAriaComponents = require('react-aria-components');
|
|
8
8
|
var ouiTheme = require('@opengovsg/oui-theme');
|
|
9
|
-
var utils = require('../system/utils.cjs');
|
|
10
9
|
var field = require('../field/field.cjs');
|
|
10
|
+
var utils = require('../system/utils.cjs');
|
|
11
11
|
|
|
12
12
|
function DateField(originalProps) {
|
|
13
13
|
const [
|
|
@@ -6,13 +6,14 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
6
6
|
var $670gB$react = require('react');
|
|
7
7
|
var reactAriaComponents = require('react-aria-components');
|
|
8
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
9
|
var calendar$1 = require('../calendar/calendar.cjs');
|
|
10
|
+
require('@internationalized/date');
|
|
11
|
+
var dateField = require('../date-field/date-field.cjs');
|
|
13
12
|
var field = require('../field/field.cjs');
|
|
14
|
-
var button = require('../button/button.cjs');
|
|
15
13
|
var popover = require('../popover/popover.cjs');
|
|
14
|
+
var utils = require('../system/utils.cjs');
|
|
15
|
+
var calendar = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/calendar.cjs');
|
|
16
|
+
var button = require('../button/button.cjs');
|
|
16
17
|
|
|
17
18
|
function DatePicker(originalProps) {
|
|
18
19
|
const [
|
|
@@ -7,13 +7,13 @@ var $670gB$react = require('react');
|
|
|
7
7
|
var date = require('@internationalized/date');
|
|
8
8
|
var reactAriaComponents = require('react-aria-components');
|
|
9
9
|
var ouiTheme = require('@opengovsg/oui-theme');
|
|
10
|
+
var dateField = require('../date-field/date-field.cjs');
|
|
11
|
+
var field = require('../field/field.cjs');
|
|
12
|
+
var popover = require('../popover/popover.cjs');
|
|
13
|
+
var rangeCalendar = require('../range-calendar/range-calendar.cjs');
|
|
10
14
|
var utils = require('../system/utils.cjs');
|
|
11
15
|
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
16
|
var button = require('../button/button.cjs');
|
|
16
|
-
var popover = require('../popover/popover.cjs');
|
|
17
17
|
|
|
18
18
|
function DateRangePicker(originalProps) {
|
|
19
19
|
const [
|
package/dist/cjs/index.cjs
CHANGED
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
4
|
var useControllableState = require('./hooks/use-controllable-state.cjs');
|
|
5
|
-
var button = require('./button/button.cjs');
|
|
6
5
|
var govtBanner = require('./govt-banner/govt-banner.cjs');
|
|
7
6
|
var ripple = require('./ripple/ripple.cjs');
|
|
8
7
|
var useRipple = require('./ripple/use-ripple.cjs');
|
|
@@ -19,17 +18,16 @@ var comboBox = require('./combo-box/combo-box.cjs');
|
|
|
19
18
|
var comboBoxFuzzy = require('./combo-box/combo-box-fuzzy.cjs');
|
|
20
19
|
var comboBoxItem = require('./combo-box/combo-box-item.cjs');
|
|
21
20
|
var comboBoxVariantContext = require('./combo-box/combo-box-variant-context.cjs');
|
|
22
|
-
var banner = require('./banner/banner.cjs');
|
|
23
21
|
var tagField = require('./tag-field/tag-field.cjs');
|
|
24
22
|
var tagFieldItem = require('./tag-field/tag-field-item.cjs');
|
|
25
23
|
var select = require('./select/select.cjs');
|
|
26
24
|
var selectItem = require('./select/select-item.cjs');
|
|
27
25
|
var selectVariantContext = require('./select/select-variant-context.cjs');
|
|
28
26
|
var badge = require('./badge/badge.cjs');
|
|
29
|
-
var date = require('@internationalized/date');
|
|
30
27
|
var calendar = require('./calendar/calendar.cjs');
|
|
31
28
|
var calendarStyleContext = require('./calendar/calendar-style-context.cjs');
|
|
32
29
|
var utils = require('./calendar/utils.cjs');
|
|
30
|
+
var date = require('@internationalized/date');
|
|
33
31
|
var rangeCalendar = require('./range-calendar/range-calendar.cjs');
|
|
34
32
|
var menu = require('./menu/menu.cjs');
|
|
35
33
|
var popover = require('./popover/popover.cjs');
|
|
@@ -39,16 +37,17 @@ var datePicker = require('./date-picker/date-picker.cjs');
|
|
|
39
37
|
var dateRangePicker = require('./date-range-picker/date-range-picker.cjs');
|
|
40
38
|
var checkbox = require('./checkbox/checkbox.cjs');
|
|
41
39
|
var checkboxGroupStyleContext = require('./checkbox/checkbox-group-style-context.cjs');
|
|
42
|
-
var usePagination = require('./pagination/hooks/use-pagination.cjs');
|
|
43
40
|
var pagination = require('./pagination/pagination.cjs');
|
|
44
41
|
var paginationCursor = require('./pagination/pagination-cursor.cjs');
|
|
45
42
|
var paginationItem = require('./pagination/pagination-item.cjs');
|
|
43
|
+
var usePagination = require('./pagination/hooks/use-pagination.cjs');
|
|
46
44
|
var usePagination$1 = require('./pagination/use-pagination.cjs');
|
|
45
|
+
var button = require('./button/button.cjs');
|
|
46
|
+
var banner = require('./banner/banner.cjs');
|
|
47
47
|
|
|
48
48
|
|
|
49
49
|
|
|
50
50
|
exports.useControllableState = useControllableState.useControllableState;
|
|
51
|
-
exports.Button = button.Button;
|
|
52
51
|
exports.GovtBanner = govtBanner.GovtBanner;
|
|
53
52
|
exports.Ripple = ripple.Ripple;
|
|
54
53
|
exports.useRipple = useRipple.useRipple;
|
|
@@ -70,7 +69,6 @@ exports.ComboBoxFuzzy = comboBoxFuzzy.ComboBoxFuzzy;
|
|
|
70
69
|
exports.ComboBoxItem = comboBoxItem.ComboBoxItem;
|
|
71
70
|
exports.ComboBoxVariantContext = comboBoxVariantContext.ComboBoxVariantContext;
|
|
72
71
|
exports.useComboBoxVariantContext = comboBoxVariantContext.useComboBoxVariantContext;
|
|
73
|
-
exports.Banner = banner.Banner;
|
|
74
72
|
exports.TagField = tagField.TagField;
|
|
75
73
|
exports.TagFieldItem = tagFieldItem.TagFieldItem;
|
|
76
74
|
exports.Select = select.Select;
|
|
@@ -78,10 +76,6 @@ exports.SelectItem = selectItem.SelectItem;
|
|
|
78
76
|
exports.SelectVariantContext = selectVariantContext.SelectVariantContext;
|
|
79
77
|
exports.useSelectVariantContext = selectVariantContext.useSelectVariantContext;
|
|
80
78
|
exports.Badge = badge.Badge;
|
|
81
|
-
Object.defineProperty(exports, "CalendarDate", {
|
|
82
|
-
enumerable: true,
|
|
83
|
-
get: function () { return date.CalendarDate; }
|
|
84
|
-
});
|
|
85
79
|
exports.Calendar = calendar.Calendar;
|
|
86
80
|
exports.CalendarStateWrapper = calendar.CalendarStateWrapper;
|
|
87
81
|
exports.CalendarStyleContext = calendarStyleContext.CalendarStyleContext;
|
|
@@ -90,6 +84,10 @@ exports.getEraFormat = utils.getEraFormat;
|
|
|
90
84
|
exports.useGenerateLocalizedMonths = utils.useGenerateLocalizedMonths;
|
|
91
85
|
exports.useGenerateLocalizedYears = utils.useGenerateLocalizedYears;
|
|
92
86
|
exports.useLocalizedMonthYear = utils.useLocalizedMonthYear;
|
|
87
|
+
Object.defineProperty(exports, "CalendarDate", {
|
|
88
|
+
enumerable: true,
|
|
89
|
+
get: function () { return date.CalendarDate; }
|
|
90
|
+
});
|
|
93
91
|
exports.RangeCalendar = rangeCalendar.RangeCalendar;
|
|
94
92
|
exports.RangeCalendarCell = rangeCalendar.RangeCalendarCell;
|
|
95
93
|
exports.RangeCalendarStateWrapper = rangeCalendar.RangeCalendarStateWrapper;
|
|
@@ -116,9 +114,11 @@ exports.Checkbox = checkbox.Checkbox;
|
|
|
116
114
|
exports.CheckboxGroup = checkbox.CheckboxGroup;
|
|
117
115
|
exports.CheckboxGroupStyleContext = checkboxGroupStyleContext.CheckboxGroupStyleContext;
|
|
118
116
|
exports.useCheckboxGroupStyleContext = checkboxGroupStyleContext.useCheckboxGroupStyleContext;
|
|
119
|
-
exports.PaginationItemType = usePagination.PaginationItemType;
|
|
120
117
|
exports.Pagination = pagination.Pagination;
|
|
121
118
|
exports.PaginationCursor = paginationCursor.PaginationCursor;
|
|
122
119
|
exports.PaginationItem = paginationItem.PaginationItem;
|
|
120
|
+
exports.PaginationItemType = usePagination.PaginationItemType;
|
|
123
121
|
exports.CURSOR_TRANSITION_TIMEOUT = usePagination$1.CURSOR_TRANSITION_TIMEOUT;
|
|
124
122
|
exports.usePagination = usePagination$1.usePagination;
|
|
123
|
+
exports.Button = button.Button;
|
|
124
|
+
exports.Banner = banner.Banner;
|
package/dist/cjs/menu/menu.cjs
CHANGED
|
@@ -6,11 +6,11 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
6
6
|
var $670gB$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');
|
|
9
10
|
var utils = require('../system/utils.cjs');
|
|
10
11
|
var check = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.cjs');
|
|
11
12
|
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');
|
|
12
13
|
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",
|
|
@@ -8,12 +8,12 @@ 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');
|
|
11
12
|
var agnosticCalendarStateContext = require('../calendar/agnostic-calendar-state-context.cjs');
|
|
12
13
|
var calendarBottomContent = require('../calendar/calendar-bottom-content.cjs');
|
|
13
14
|
var calendarGridHeader = require('../calendar/calendar-grid-header.cjs');
|
|
14
15
|
var calendarHeader = require('../calendar/calendar-header.cjs');
|
|
15
16
|
var utils = require('../system/utils.cjs');
|
|
16
|
-
var calendarStyleContext = require('../calendar/calendar-style-context.cjs');
|
|
17
17
|
|
|
18
18
|
const RangeCalendar = utils.forwardRefGeneric(function RangeCalendar2(originalProps, ref) {
|
|
19
19
|
const [props, variantProps] = utils.mapPropsVariants(
|
|
@@ -6,11 +6,11 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
6
6
|
var $670gB$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');
|
|
9
11
|
var utils = require('../system/utils.cjs');
|
|
10
12
|
var selectVariantContext = require('./select-variant-context.cjs');
|
|
11
|
-
var field = require('../field/field.cjs');
|
|
12
13
|
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 $670gB$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');
|
|
9
12
|
var tagFieldItem = require('./tag-field-item.cjs');
|
|
10
13
|
var tagFieldList = require('./tag-field-list.cjs');
|
|
11
14
|
var tagFieldRoot = require('./tag-field-root.cjs');
|
|
12
15
|
var tagFieldTagList = require('./tag-field-tag-list.cjs');
|
|
13
16
|
var tagFieldTrigger = require('./tag-field-trigger.cjs');
|
|
14
17
|
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 textArea = require('../text-area/text-area.cjs');
|
|
9
8
|
var field = require('../field/field.cjs');
|
|
9
|
+
var textArea = require('../text-area/text-area.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 input = require('../input/input.cjs');
|
|
9
8
|
var field = require('../field/field.cjs');
|
|
9
|
+
var input = require('../input/input.cjs');
|
|
10
10
|
|
|
11
11
|
function TextField({
|
|
12
12
|
label,
|
|
@@ -13,6 +13,7 @@ const Toggle = ({
|
|
|
13
13
|
children,
|
|
14
14
|
classNames,
|
|
15
15
|
thumbIcon,
|
|
16
|
+
labelPlacement = "end",
|
|
16
17
|
...originalProps
|
|
17
18
|
}) => {
|
|
18
19
|
const [props, variantProps] = utils.mapPropsVariants(
|
|
@@ -38,8 +39,9 @@ const Toggle = ({
|
|
|
38
39
|
slots.base()
|
|
39
40
|
),
|
|
40
41
|
children: (renderProps) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
42
|
+
labelPlacement === "start" ? children : null,
|
|
41
43
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: slots.track({ className: classNames?.track }), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: slots.thumb({ className: classNames?.thumb }), children: thumbIcon && clonedThumbIcon(renderProps) }) }),
|
|
42
|
-
children
|
|
44
|
+
labelPlacement === "end" ? children : null
|
|
43
45
|
] })
|
|
44
46
|
}
|
|
45
47
|
);
|
|
@@ -41,6 +41,9 @@ const Banner = ({
|
|
|
41
41
|
if (startContentProp) {
|
|
42
42
|
return startContentProp;
|
|
43
43
|
}
|
|
44
|
+
if (startContentProp === null) {
|
|
45
|
+
return null;
|
|
46
|
+
}
|
|
44
47
|
switch (variant) {
|
|
45
48
|
case "info":
|
|
46
49
|
return /* @__PURE__ */ jsx(Info, { className: styles.icon({ className: classNames?.icon }) });
|
|
@@ -56,7 +59,9 @@ const Banner = ({
|
|
|
56
59
|
}, [classNames?.icon, startContentProp, styles, variant]);
|
|
57
60
|
const bannerRef = useRef(null);
|
|
58
61
|
const state = useDisclosureState({
|
|
59
|
-
defaultExpanded
|
|
62
|
+
defaultExpanded,
|
|
63
|
+
isExpanded: disclosureProps.isExpanded,
|
|
64
|
+
onExpandedChange: disclosureProps.onExpandedChange
|
|
60
65
|
});
|
|
61
66
|
const { buttonProps, panelProps: bannerProps } = useDisclosure(
|
|
62
67
|
disclosureProps,
|
|
@@ -74,7 +79,7 @@ const Banner = ({
|
|
|
74
79
|
...isDismissable ? bannerProps : {},
|
|
75
80
|
children: [
|
|
76
81
|
/* @__PURE__ */ jsxs("div", { className: styles.content({ className: classNames?.content }), children: [
|
|
77
|
-
/* @__PURE__ */ jsx(
|
|
82
|
+
startContent && /* @__PURE__ */ jsx(
|
|
78
83
|
"div",
|
|
79
84
|
{
|
|
80
85
|
className: styles.startContentWrapper({
|
|
@@ -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';
|
|
8
9
|
import { useRipple } from '../ripple/use-ripple.js';
|
|
9
10
|
import { Spinner } from '../spinner/spinner.js';
|
|
10
|
-
import { Ripple } from '../ripple/ripple.js';
|
|
11
11
|
|
|
12
12
|
const Button = forwardRef(
|
|
13
13
|
({
|
|
@@ -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';
|
|
7
9
|
import { AgnosticCalendarStateContext } from './agnostic-calendar-state-context.js';
|
|
8
10
|
import { useCalendarStyleContext } from './calendar-style-context.js';
|
|
9
11
|
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 = () => {
|
|
@@ -3,11 +3,11 @@
|
|
|
3
3
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
4
4
|
import { Checkbox as Checkbox$1, composeRenderProps, Provider, CheckboxGroup as CheckboxGroup$1 } from 'react-aria-components';
|
|
5
5
|
import { checkboxStyles, checkboxGroupStyles } from '@opengovsg/oui-theme';
|
|
6
|
+
import { Label, Description, FieldError } from '../field/field.js';
|
|
6
7
|
import { mapPropsVariants } from '../system/utils.js';
|
|
7
8
|
import { useCheckboxGroupStyleContext, CheckboxGroupStyleContext } from './checkbox-group-style-context.js';
|
|
8
9
|
import Minus from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/minus.js';
|
|
9
10
|
import Check from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.js';
|
|
10
|
-
import { Label, Description, FieldError } from '../field/field.js';
|
|
11
11
|
|
|
12
12
|
const Checkbox = ({
|
|
13
13
|
classNames,
|
|
@@ -5,13 +5,13 @@ import { useMemo, useCallback } from 'react';
|
|
|
5
5
|
import { useMessageFormatter } from 'react-aria';
|
|
6
6
|
import { ListLayout, Provider, ComboBox as ComboBox$1, Input, Button, Virtualizer, ListBox } from 'react-aria-components';
|
|
7
7
|
import { listBoxItemStyles, cn, comboBoxStyles, composeTailwindRenderProps, composeRenderProps, comboBoxClearButtonStyles } from '@opengovsg/oui-theme';
|
|
8
|
+
import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
|
|
9
|
+
import { Popover } from '../popover/popover.js';
|
|
8
10
|
import { mapPropsVariants } from '../system/utils.js';
|
|
9
11
|
import { ComboBoxVariantContext } from './combo-box-variant-context.js';
|
|
10
|
-
import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
|
|
11
12
|
import ChevronUp from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-up.js';
|
|
12
13
|
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
14
|
import X from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/x.js';
|
|
14
|
-
import { Popover } from '../popover/popover.js';
|
|
15
15
|
|
|
16
16
|
const calculateEstimatedRowHeight = (size) => {
|
|
17
17
|
switch (size) {
|
|
@@ -73,6 +73,7 @@ function ComboBox(originalProps) {
|
|
|
73
73
|
dependencies,
|
|
74
74
|
onClear,
|
|
75
75
|
renderEmptyState: renderEmptyStateProp,
|
|
76
|
+
inputProps,
|
|
76
77
|
...props
|
|
77
78
|
} = _props;
|
|
78
79
|
const styles = comboBoxStyles(variantProps);
|
|
@@ -133,7 +134,8 @@ function ComboBox(originalProps) {
|
|
|
133
134
|
className: composeRenderProps(
|
|
134
135
|
classNames?.field,
|
|
135
136
|
(className, renderProps) => styles.field({ ...renderProps, className })
|
|
136
|
-
)
|
|
137
|
+
),
|
|
138
|
+
...inputProps
|
|
137
139
|
}
|
|
138
140
|
),
|
|
139
141
|
/* @__PURE__ */ jsx(
|
|
@@ -4,8 +4,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
4
4
|
import { useMemo } from 'react';
|
|
5
5
|
import { DateField as DateField$1, DateInput as DateInput$1, DateSegment } from 'react-aria-components';
|
|
6
6
|
import { dateFieldStyles, composeTailwindRenderProps, dateInputStyles, composeRenderProps } from '@opengovsg/oui-theme';
|
|
7
|
-
import { mapPropsVariants } from '../system/utils.js';
|
|
8
7
|
import { Label, Description, FieldError } from '../field/field.js';
|
|
8
|
+
import { mapPropsVariants } from '../system/utils.js';
|
|
9
9
|
|
|
10
10
|
function DateField(originalProps) {
|
|
11
11
|
const [
|
|
@@ -4,13 +4,14 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
4
4
|
import { useMemo } from 'react';
|
|
5
5
|
import { DatePicker as DatePicker$1, Dialog } from 'react-aria-components';
|
|
6
6
|
import { datePickerStyles, composeTailwindRenderProps } from '@opengovsg/oui-theme';
|
|
7
|
-
import { mapPropsVariants } from '../system/utils.js';
|
|
8
|
-
import { DateInput } from '../date-field/date-field.js';
|
|
9
|
-
import Calendar from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/calendar.js';
|
|
10
7
|
import { Calendar as Calendar$1 } from '../calendar/calendar.js';
|
|
8
|
+
import '@internationalized/date';
|
|
9
|
+
import { DateInput } from '../date-field/date-field.js';
|
|
11
10
|
import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
|
|
12
|
-
import { Button } from '../button/button.js';
|
|
13
11
|
import { Popover } from '../popover/popover.js';
|
|
12
|
+
import { mapPropsVariants } from '../system/utils.js';
|
|
13
|
+
import Calendar from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/calendar.js';
|
|
14
|
+
import { Button } from '../button/button.js';
|
|
14
15
|
|
|
15
16
|
function DatePicker(originalProps) {
|
|
16
17
|
const [
|
|
@@ -5,13 +5,13 @@ import { useMemo } from 'react';
|
|
|
5
5
|
import { CalendarDate } from '@internationalized/date';
|
|
6
6
|
import { DateRangePicker as DateRangePicker$1, Dialog } from 'react-aria-components';
|
|
7
7
|
import { dateRangePickerStyles, composeTailwindRenderProps } from '@opengovsg/oui-theme';
|
|
8
|
+
import { DateInput } from '../date-field/date-field.js';
|
|
9
|
+
import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
|
|
10
|
+
import { Popover } from '../popover/popover.js';
|
|
11
|
+
import { RangeCalendar } from '../range-calendar/range-calendar.js';
|
|
8
12
|
import { mapPropsVariants } from '../system/utils.js';
|
|
9
13
|
import Calendar from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/calendar.js';
|
|
10
|
-
import { RangeCalendar } from '../range-calendar/range-calendar.js';
|
|
11
|
-
import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
|
|
12
|
-
import { DateInput } from '../date-field/date-field.js';
|
|
13
14
|
import { Button } from '../button/button.js';
|
|
14
|
-
import { Popover } from '../popover/popover.js';
|
|
15
15
|
|
|
16
16
|
function DateRangePicker(originalProps) {
|
|
17
17
|
const [
|
package/dist/esm/index.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
export { useControllableState } from './hooks/use-controllable-state.js';
|
|
3
|
-
export { Button } from './button/button.js';
|
|
4
3
|
export { GovtBanner } from './govt-banner/govt-banner.js';
|
|
5
4
|
export { Ripple } from './ripple/ripple.js';
|
|
6
5
|
export { useRipple } from './ripple/use-ripple.js';
|
|
@@ -17,17 +16,16 @@ export { ComboBox, ComboBoxEmptyState } from './combo-box/combo-box.js';
|
|
|
17
16
|
export { ComboBoxFuzzy } from './combo-box/combo-box-fuzzy.js';
|
|
18
17
|
export { ComboBoxItem } from './combo-box/combo-box-item.js';
|
|
19
18
|
export { ComboBoxVariantContext, useComboBoxVariantContext } from './combo-box/combo-box-variant-context.js';
|
|
20
|
-
export { Banner } from './banner/banner.js';
|
|
21
19
|
export { TagField } from './tag-field/tag-field.js';
|
|
22
20
|
export { TagFieldItem } from './tag-field/tag-field-item.js';
|
|
23
21
|
export { Select } from './select/select.js';
|
|
24
22
|
export { SelectItem } from './select/select-item.js';
|
|
25
23
|
export { SelectVariantContext, useSelectVariantContext } from './select/select-variant-context.js';
|
|
26
24
|
export { Badge } from './badge/badge.js';
|
|
27
|
-
export { CalendarDate } from '@internationalized/date';
|
|
28
25
|
export { Calendar, CalendarStateWrapper } from './calendar/calendar.js';
|
|
29
26
|
export { CalendarStyleContext, useCalendarStyleContext } from './calendar/calendar-style-context.js';
|
|
30
27
|
export { getEraFormat, useGenerateLocalizedMonths, useGenerateLocalizedYears, useLocalizedMonthYear } from './calendar/utils.js';
|
|
28
|
+
export { CalendarDate } from '@internationalized/date';
|
|
31
29
|
export { RangeCalendar, RangeCalendarCell, RangeCalendarStateWrapper } from './range-calendar/range-calendar.js';
|
|
32
30
|
export { Menu, MenuItem, MenuSection, MenuSeparator, MenuTrigger, MenuVariantContext, SubmenuTrigger, useMenuVariantContext } from './menu/menu.js';
|
|
33
31
|
export { Popover } from './popover/popover.js';
|
|
@@ -37,8 +35,10 @@ export { DatePicker } from './date-picker/date-picker.js';
|
|
|
37
35
|
export { DateRangePicker } from './date-range-picker/date-range-picker.js';
|
|
38
36
|
export { Checkbox, CheckboxGroup } from './checkbox/checkbox.js';
|
|
39
37
|
export { CheckboxGroupStyleContext, useCheckboxGroupStyleContext } from './checkbox/checkbox-group-style-context.js';
|
|
40
|
-
export { PaginationItemType } from './pagination/hooks/use-pagination.js';
|
|
41
38
|
export { Pagination } from './pagination/pagination.js';
|
|
42
39
|
export { PaginationCursor } from './pagination/pagination-cursor.js';
|
|
43
40
|
export { PaginationItem } from './pagination/pagination-item.js';
|
|
41
|
+
export { PaginationItemType } from './pagination/hooks/use-pagination.js';
|
|
44
42
|
export { CURSOR_TRANSITION_TIMEOUT, usePagination } from './pagination/use-pagination.js';
|
|
43
|
+
export { Button } from './button/button.js';
|
|
44
|
+
export { Banner } from './banner/banner.js';
|
package/dist/esm/menu/menu.js
CHANGED
|
@@ -4,11 +4,11 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
|
4
4
|
import { forwardRef, useMemo, useCallback } from 'react';
|
|
5
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
6
|
import { listBoxItemStyles, menuItemStyles, menuStyles, menuSectionStyles, menuDividerStyles } from '@opengovsg/oui-theme';
|
|
7
|
+
import { Popover } from '../popover/popover.js';
|
|
7
8
|
import { forwardRefGeneric, mapPropsVariants } from '../system/utils.js';
|
|
8
9
|
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
10
|
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
11
|
import { createContext } from '../system/react-utils/context.js';
|
|
11
|
-
import { Popover } from '../popover/popover.js';
|
|
12
12
|
|
|
13
13
|
const [MenuVariantContext, useMenuVariantContext] = createContext({
|
|
14
14
|
name: "MenuVariantContext",
|
|
@@ -6,12 +6,12 @@ import { CalendarDate, today, getLocalTimeZone, getDayOfWeek } from '@internatio
|
|
|
6
6
|
import { RangeCalendar as RangeCalendar$1, Provider, CalendarGrid, CalendarGridBody, Text, RangeCalendarStateContext, useLocale, CalendarCell } from 'react-aria-components';
|
|
7
7
|
import { useDeepCompareMemo } from 'use-deep-compare';
|
|
8
8
|
import { calendarStyles, composeRenderProps, cn, dataAttr } from '@opengovsg/oui-theme';
|
|
9
|
+
import { CalendarStyleContext, useCalendarStyleContext } from '../calendar/calendar-style-context.js';
|
|
9
10
|
import { AgnosticCalendarStateContext } from '../calendar/agnostic-calendar-state-context.js';
|
|
10
11
|
import { CalendarBottomContent } from '../calendar/calendar-bottom-content.js';
|
|
11
12
|
import { CalendarGridHeader } from '../calendar/calendar-grid-header.js';
|
|
12
13
|
import { CalendarHeader } from '../calendar/calendar-header.js';
|
|
13
14
|
import { forwardRefGeneric, mapPropsVariants } from '../system/utils.js';
|
|
14
|
-
import { CalendarStyleContext, useCalendarStyleContext } from '../calendar/calendar-style-context.js';
|
|
15
15
|
|
|
16
16
|
const RangeCalendar = forwardRefGeneric(function RangeCalendar2(originalProps, ref) {
|
|
17
17
|
const [props, variantProps] = mapPropsVariants(
|
|
@@ -4,11 +4,11 @@ import { jsx, jsxs } from 'react/jsx-runtime';
|
|
|
4
4
|
import { useMemo } from 'react';
|
|
5
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
|
+
import { Label, Description, FieldError } from '../field/field.js';
|
|
8
|
+
import { Popover } from '../popover/popover.js';
|
|
7
9
|
import { mapPropsVariants } from '../system/utils.js';
|
|
8
10
|
import { SelectVariantContext } from './select-variant-context.js';
|
|
9
|
-
import { Label, Description, FieldError } from '../field/field.js';
|
|
10
11
|
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';
|
|
12
12
|
import { Button } from '../button/button.js';
|
|
13
13
|
|
|
14
14
|
const calculateEstimatedRowHeight = (size) => {
|
|
@@ -4,15 +4,15 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
4
4
|
import { createElement } from 'react';
|
|
5
5
|
import { composeRenderProps } from 'react-aria-components';
|
|
6
6
|
import { tagFieldStyles } from '@opengovsg/oui-theme';
|
|
7
|
+
import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
|
|
8
|
+
import { Input } from '../input/input.js';
|
|
9
|
+
import { Popover } from '../popover/popover.js';
|
|
7
10
|
import { TagFieldItem } from './tag-field-item.js';
|
|
8
11
|
import { TagFieldList } from './tag-field-list.js';
|
|
9
12
|
import { TagFieldRoot } from './tag-field-root.js';
|
|
10
13
|
import { TagFieldTagList } from './tag-field-tag-list.js';
|
|
11
14
|
import { TagFieldTrigger } from './tag-field-trigger.js';
|
|
12
15
|
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
|
-
import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
|
|
14
|
-
import { Input } from '../input/input.js';
|
|
15
|
-
import { Popover } from '../popover/popover.js';
|
|
16
16
|
|
|
17
17
|
function TagField({
|
|
18
18
|
classNames,
|
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
4
4
|
import { TextField } from 'react-aria-components';
|
|
5
5
|
import { composeTailwindRenderProps } from '@opengovsg/oui-theme';
|
|
6
|
-
import { TextArea } from '../text-area/text-area.js';
|
|
7
6
|
import { Label, Description, FieldError } from '../field/field.js';
|
|
7
|
+
import { TextArea } from '../text-area/text-area.js';
|
|
8
8
|
|
|
9
9
|
function TextAreaField({
|
|
10
10
|
label,
|
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
4
4
|
import { TextField as TextField$1 } from 'react-aria-components';
|
|
5
5
|
import { composeTailwindRenderProps } from '@opengovsg/oui-theme';
|
|
6
|
-
import { Input } from '../input/input.js';
|
|
7
6
|
import { Label, Description, FieldError } from '../field/field.js';
|
|
7
|
+
import { Input } from '../input/input.js';
|
|
8
8
|
|
|
9
9
|
function TextField({
|
|
10
10
|
label,
|
|
@@ -11,6 +11,7 @@ const Toggle = ({
|
|
|
11
11
|
children,
|
|
12
12
|
classNames,
|
|
13
13
|
thumbIcon,
|
|
14
|
+
labelPlacement = "end",
|
|
14
15
|
...originalProps
|
|
15
16
|
}) => {
|
|
16
17
|
const [props, variantProps] = mapPropsVariants(
|
|
@@ -36,8 +37,9 @@ const Toggle = ({
|
|
|
36
37
|
slots.base()
|
|
37
38
|
),
|
|
38
39
|
children: (renderProps) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
40
|
+
labelPlacement === "start" ? children : null,
|
|
39
41
|
/* @__PURE__ */ jsx("div", { className: slots.track({ className: classNames?.track }), children: /* @__PURE__ */ jsx("span", { className: slots.thumb({ className: classNames?.thumb }), children: thumbIcon && clonedThumbIcon(renderProps) }) }),
|
|
40
|
-
children
|
|
42
|
+
labelPlacement === "end" ? children : null
|
|
41
43
|
] })
|
|
42
44
|
}
|
|
43
45
|
);
|
|
@@ -6,7 +6,7 @@ interface BannerProps extends VariantProps<typeof bannerStyles>, AriaDisclosureP
|
|
|
6
6
|
/**
|
|
7
7
|
* The banner start content. Will default to the relevant icons based on the `variant` prop.
|
|
8
8
|
*/
|
|
9
|
-
startContent?: React.ReactNode;
|
|
9
|
+
startContent?: React.ReactNode | null;
|
|
10
10
|
children: ReactNode;
|
|
11
11
|
/**
|
|
12
12
|
* If provided, the dismiss button will be rendered.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../../../src/banner/banner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,mBAAmB,EAAoB,MAAM,YAAY,CAAA;AAMvE,OAAO,KAAK,EACV,WAAW,EACX,cAAc,EACd,YAAY,EACb,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAInD,UAAU,WACR,SAAQ,YAAY,CAAC,OAAO,YAAY,CAAC,EACvC,mBAAmB;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../../../src/banner/banner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,mBAAmB,EAAoB,MAAM,YAAY,CAAA;AAMvE,OAAO,KAAK,EACV,WAAW,EACX,cAAc,EACd,YAAY,EACb,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAInD,UAAU,WACR,SAAQ,YAAY,CAAC,OAAO,YAAY,CAAC,EACvC,mBAAmB;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAA;IACrC,QAAQ,EAAE,SAAS,CAAA;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAA;CACzC;AAiBD,eAAO,MAAM,MAAM,2IAUhB,WAAW,mDAsFb,CAAA"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ComboBoxProps as AriaComboBoxProps, ListBoxProps, ListLayoutOptions, ValidationResult } from "react-aria-components";
|
|
1
|
+
import type { ComboBoxProps as AriaComboBoxProps, InputProps, ListBoxProps, ListLayoutOptions, ValidationResult } from "react-aria-components";
|
|
2
2
|
import type { ComboBoxSlots, ComboBoxVariantProps, SlotsToClasses } from "@opengovsg/oui-theme";
|
|
3
3
|
export interface ComboBoxProps<T extends object> extends ComboBoxVariantProps, Omit<AriaComboBoxProps<T>, "children"> {
|
|
4
4
|
label?: React.ReactNode;
|
|
@@ -26,6 +26,7 @@ export interface ComboBoxProps<T extends object> extends ComboBoxVariantProps, O
|
|
|
26
26
|
onClear?: () => void;
|
|
27
27
|
renderEmptyState?: ListBoxProps<T>["renderEmptyState"];
|
|
28
28
|
children?: ListBoxProps<T>["children"];
|
|
29
|
+
inputProps?: Partial<InputProps>;
|
|
29
30
|
}
|
|
30
31
|
export declare function ComboBoxEmptyState({ size, className, }: Pick<ComboBoxVariantProps, "size"> & {
|
|
31
32
|
className?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combo-box.d.ts","sourceRoot":"","sources":["../../../src/combo-box/combo-box.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,aAAa,IAAI,iBAAiB,EAClC,YAAY,EAEZ,iBAAiB,EACjB,gBAAgB,EACjB,MAAM,uBAAuB,CAAA;AAc9B,OAAO,KAAK,EACV,aAAa,EACb,oBAAoB,EACpB,cAAc,EACf,MAAM,sBAAsB,CAAA;AAe7B,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,MAAM,CAC7C,SAAQ,oBAAoB,EAC1B,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC;IACxC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,iDAAiD;IACjD,YAAY,CAAC,EAAE,CAAC,EAAE,CAAA;IAClB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,CAAC,EAAE,CAAA;IACX,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAA;IACpC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,UAAU,EAAE,gBAAgB,KAAK,MAAM,CAAC,CAAA;IAC3E,UAAU,CAAC,EAAE,cAAc,CAAC,aAAa,CAAC,GACxC,cAAc,CAAC,aAAa,GAAG,YAAY,CAAC,CAAA;IAC9C;;OAEG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;
|
|
1
|
+
{"version":3,"file":"combo-box.d.ts","sourceRoot":"","sources":["../../../src/combo-box/combo-box.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,aAAa,IAAI,iBAAiB,EAClC,UAAU,EACV,YAAY,EAEZ,iBAAiB,EACjB,gBAAgB,EACjB,MAAM,uBAAuB,CAAA;AAc9B,OAAO,KAAK,EACV,aAAa,EACb,oBAAoB,EACpB,cAAc,EACf,MAAM,sBAAsB,CAAA;AAe7B,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,MAAM,CAC7C,SAAQ,oBAAoB,EAC1B,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC;IACxC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,iDAAiD;IACjD,YAAY,CAAC,EAAE,CAAC,EAAE,CAAA;IAClB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,CAAC,EAAE,CAAA;IACX,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAA;IACpC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,UAAU,EAAE,gBAAgB,KAAK,MAAM,CAAC,CAAA;IAC3E,UAAU,CAAC,EAAE,cAAc,CAAC,aAAa,CAAC,GACxC,cAAc,CAAC,aAAa,GAAG,YAAY,CAAC,CAAA;IAC9C;;OAEG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC,mFAAmF;IACnF,YAAY,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAA;IAC9C;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,gBAAgB,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAA;IACtD,QAAQ,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAA;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAA;CACjC;AAkCD,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,SAAS,GACV,EAAE,IAAI,CAAC,oBAAoB,EAAE,MAAM,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAY7D;AAED,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,EAAE,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,2CA+JzE"}
|
|
@@ -10,6 +10,11 @@ interface _ToggleProps extends Omit<AriaSwitchProps, "children">, VariantProps<t
|
|
|
10
10
|
* The icon to be displayed inside the thumb.
|
|
11
11
|
*/
|
|
12
12
|
thumbIcon?: React.ReactElement | ((props: ToggleThumbIconProps) => React.ReactNode);
|
|
13
|
+
/**
|
|
14
|
+
* Where to place the children label.
|
|
15
|
+
* @defaultValue "end"
|
|
16
|
+
*/
|
|
17
|
+
labelPlacement?: "start" | "end";
|
|
13
18
|
}
|
|
14
19
|
export type ToggleProps = _ToggleProps & ({
|
|
15
20
|
children: React.ReactNode;
|
|
@@ -18,6 +23,6 @@ export type ToggleProps = _ToggleProps & ({
|
|
|
18
23
|
children?: never;
|
|
19
24
|
"aria-label": string;
|
|
20
25
|
});
|
|
21
|
-
export declare const Toggle: ({ children, classNames, thumbIcon, ...originalProps }: ToggleProps) => import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
export declare const Toggle: ({ children, classNames, thumbIcon, labelPlacement, ...originalProps }: ToggleProps) => import("react/jsx-runtime").JSX.Element;
|
|
22
27
|
export {};
|
|
23
28
|
//# sourceMappingURL=toggle.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../src/toggle/toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,WAAW,IAAI,eAAe,EAC9B,iBAAiB,EAClB,MAAM,uBAAuB,CAAA;AAK9B,OAAO,KAAK,EACV,cAAc,EACd,WAAW,EACX,YAAY,EACb,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAA8B,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAI/E,MAAM,WAAW,oBAAqB,SAAQ,iBAAiB;IAC7D,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,UAAU,YACR,SAAQ,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,EACvC,YAAY,CAAC,OAAO,YAAY,CAAC;IACnC,UAAU,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAA;IACxC;;OAEG;IACH,SAAS,CAAC,EACN,KAAK,CAAC,YAAY,GAClB,CAAC,CAAC,KAAK,EAAE,oBAAoB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;
|
|
1
|
+
{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../src/toggle/toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,WAAW,IAAI,eAAe,EAC9B,iBAAiB,EAClB,MAAM,uBAAuB,CAAA;AAK9B,OAAO,KAAK,EACV,cAAc,EACd,WAAW,EACX,YAAY,EACb,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAA8B,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAI/E,MAAM,WAAW,oBAAqB,SAAQ,iBAAiB;IAC7D,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,UAAU,YACR,SAAQ,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,EACvC,YAAY,CAAC,OAAO,YAAY,CAAC;IACnC,UAAU,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAA;IACxC;;OAEG;IACH,SAAS,CAAC,EACN,KAAK,CAAC,YAAY,GAClB,CAAC,CAAC,KAAK,EAAE,oBAAoB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;IACtD;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;CACjC;AAED,MAAM,MAAM,WAAW,GAAG,YAAY,GACpC,CACI;IACE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,GACD;IACE,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,YAAY,EAAE,MAAM,CAAA;CACrB,CACJ,CAAA;AAEH,eAAO,MAAM,MAAM,0EAMhB,WAAW,4CAyCb,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@opengovsg/oui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.20",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"type": "module",
|
|
@@ -49,10 +49,10 @@
|
|
|
49
49
|
"storybook": "9.1.6",
|
|
50
50
|
"tsx": "^4.20.3",
|
|
51
51
|
"typescript": "5.7.3",
|
|
52
|
-
"@opengovsg/oui-theme": "0.0.18",
|
|
53
|
-
"@oui/prettier-config": "0.0.0",
|
|
54
52
|
"@oui/eslint-config": "0.0.0",
|
|
55
53
|
"@oui/chromatic": "0.0.0",
|
|
54
|
+
"@opengovsg/oui-theme": "0.0.20",
|
|
55
|
+
"@oui/prettier-config": "0.0.0",
|
|
56
56
|
"@oui/typescript-config": "0.0.0"
|
|
57
57
|
},
|
|
58
58
|
"dependencies": {
|
|
@@ -83,7 +83,7 @@
|
|
|
83
83
|
"motion": ">=11.12.0 || >=12.0.0-alpha.1",
|
|
84
84
|
"react": ">= 18",
|
|
85
85
|
"react-aria-components": "^1.12.2",
|
|
86
|
-
"@opengovsg/oui-theme": "0.0.
|
|
86
|
+
"@opengovsg/oui-theme": "0.0.20"
|
|
87
87
|
},
|
|
88
88
|
"scripts": {
|
|
89
89
|
"build": "tsx ../../tooling/build-scripts/main.ts --dts --clean",
|