@opengovsg/oui 0.0.0-snapshot-20250314033948 → 0.0.0-snapshot-20250318052429
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 +1 -1
- package/dist/cjs/button/button.cjs +1 -1
- package/dist/cjs/combo-box/combo-box-fuzzy.cjs +52 -30
- package/dist/cjs/combo-box/combo-box-item.cjs +70 -0
- package/dist/cjs/combo-box/combo-box-variant-context.cjs +13 -0
- package/dist/cjs/combo-box/combo-box.cjs +46 -100
- package/dist/cjs/combo-box/index.cjs +5 -1
- package/dist/cjs/index.cjs +10 -1
- package/dist/cjs/select/index.cjs +5 -0
- package/dist/cjs/select/select-item.cjs +1 -0
- package/dist/cjs/select/select-variant-context.cjs +1 -0
- package/dist/cjs/select/select.cjs +2 -2
- package/dist/cjs/tag-field/tag-field-list.cjs +1 -0
- package/dist/cjs/tag-field/tag-field-trigger.cjs +1 -0
- package/dist/cjs/tag-field/tag-field.cjs +2 -2
- 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/banner/banner.js +1 -1
- package/dist/esm/button/button.js +1 -1
- package/dist/esm/combo-box/combo-box-fuzzy.js +55 -33
- package/dist/esm/combo-box/combo-box-item.js +68 -0
- package/dist/esm/combo-box/combo-box-variant-context.js +10 -0
- package/dist/esm/combo-box/combo-box.js +48 -101
- package/dist/esm/combo-box/index.js +3 -1
- package/dist/esm/index.js +5 -1
- package/dist/esm/select/index.js +2 -0
- package/dist/esm/select/select-item.js +1 -0
- package/dist/esm/select/select-variant-context.js +1 -0
- package/dist/esm/select/select.js +2 -2
- package/dist/esm/tag-field/tag-field-list.js +1 -0
- package/dist/esm/tag-field/tag-field-trigger.js +1 -0
- package/dist/esm/tag-field/tag-field.js +2 -2
- 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/combo-box/combo-box-fuzzy.d.ts +12 -4
- package/dist/types/combo-box/combo-box-fuzzy.d.ts.map +1 -1
- package/dist/types/combo-box/combo-box-item.d.ts +11 -0
- package/dist/types/combo-box/combo-box-item.d.ts.map +1 -0
- package/dist/types/combo-box/combo-box-variant-context.d.ts +4 -0
- package/dist/types/combo-box/combo-box-variant-context.d.ts.map +1 -0
- package/dist/types/combo-box/combo-box.d.ts +5 -21
- package/dist/types/combo-box/combo-box.d.ts.map +1 -1
- package/dist/types/combo-box/index.d.ts +2 -0
- package/dist/types/combo-box/index.d.ts.map +1 -1
- package/dist/types/select/index.d.ts +2 -0
- package/dist/types/select/index.d.ts.map +1 -1
- package/dist/types/select/select-item.d.ts.map +1 -1
- package/dist/types/select/select-variant-context.d.ts.map +1 -1
- package/dist/types/tag-field/tag-field-list.d.ts.map +1 -1
- package/dist/types/tag-field/tag-field-trigger.d.ts.map +1 -1
- package/package.json +4 -4
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
"use client";
|
|
3
|
-
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
4
4
|
import { useDeferredValue, useMemo, useState, useCallback } from 'react';
|
|
5
5
|
import fuzzysort from 'fuzzysort';
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
6
|
+
import { Text } from 'react-aria-components';
|
|
7
|
+
import { comboBoxStyles, comboBoxItemStyles, comboBoxFuzzyHighlightedTextStyles } from '@opengovsg/oui-theme';
|
|
8
|
+
import { mapPropsVariants } from '../system/utils.js';
|
|
9
|
+
import { ComboBox } from './combo-box.js';
|
|
10
|
+
import { ComboBoxItem } from './combo-box-item.js';
|
|
8
11
|
|
|
9
12
|
function HighlightedText({
|
|
10
13
|
result,
|
|
@@ -27,18 +30,24 @@ function HighlightedText({
|
|
|
27
30
|
i
|
|
28
31
|
));
|
|
29
32
|
}
|
|
30
|
-
function ComboBoxFuzzy({
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
33
|
+
function ComboBoxFuzzy(originalProps) {
|
|
34
|
+
const [_props, variantProps] = mapPropsVariants(
|
|
35
|
+
originalProps,
|
|
36
|
+
comboBoxStyles.variantKeys
|
|
37
|
+
);
|
|
38
|
+
const {
|
|
39
|
+
items,
|
|
40
|
+
itemClassNames,
|
|
41
|
+
onSelectionChange: onSelectionChangeProp,
|
|
42
|
+
onInputChange: onInputChangeProp,
|
|
43
|
+
inputValue,
|
|
44
|
+
...props
|
|
45
|
+
} = _props;
|
|
46
|
+
const deferredInputValue = useDeferredValue(inputValue);
|
|
38
47
|
const preparedItems = useMemo(() => {
|
|
39
48
|
return items?.map((item) => ({
|
|
40
49
|
...item,
|
|
41
|
-
prepared: fuzzysort.prepare(item.
|
|
50
|
+
prepared: fuzzysort.prepare(item.textValue)
|
|
42
51
|
})) ?? [];
|
|
43
52
|
}, [items]);
|
|
44
53
|
const [filteredResults, setFilteredResults] = useState({ items, result: {} });
|
|
@@ -61,7 +70,7 @@ function ComboBoxFuzzy({
|
|
|
61
70
|
}).reduce(
|
|
62
71
|
(acc, result) => {
|
|
63
72
|
acc.items.push(result.obj);
|
|
64
|
-
acc.result[result.obj.
|
|
73
|
+
acc.result[result.obj.textValue] = result;
|
|
65
74
|
return acc;
|
|
66
75
|
},
|
|
67
76
|
{ items: [], result: {} }
|
|
@@ -70,34 +79,47 @@ function ComboBoxFuzzy({
|
|
|
70
79
|
},
|
|
71
80
|
[onInputChangeProp, preparedItems]
|
|
72
81
|
);
|
|
82
|
+
const comboboxItemStyles = comboBoxItemStyles(variantProps);
|
|
73
83
|
return /* @__PURE__ */ jsx(
|
|
74
84
|
ComboBox,
|
|
75
85
|
{
|
|
76
86
|
...props,
|
|
87
|
+
inputValue,
|
|
77
88
|
items: filteredResults.items,
|
|
78
89
|
dependencies: [deferredInputValue],
|
|
79
90
|
onSelectionChange,
|
|
80
91
|
onInputChange,
|
|
81
|
-
children: (item) => /* @__PURE__ */ jsx(
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
92
|
+
children: (item) => /* @__PURE__ */ jsx(ComboBoxItem, { textValue: item.textValue, id: item.id, children: ({ isSelected, isFocused }) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
93
|
+
/* @__PURE__ */ jsx(
|
|
94
|
+
Text,
|
|
95
|
+
{
|
|
96
|
+
className: comboboxItemStyles.label({
|
|
97
|
+
className: itemClassNames?.label
|
|
98
|
+
}),
|
|
99
|
+
slot: "label",
|
|
100
|
+
children: /* @__PURE__ */ jsx(
|
|
101
|
+
HighlightedText,
|
|
102
|
+
{
|
|
103
|
+
className: itemClassNames?.highlight,
|
|
104
|
+
result: filteredResults.result?.[item.textValue],
|
|
105
|
+
originalText: item.textValue,
|
|
106
|
+
isSelected,
|
|
107
|
+
isFocused
|
|
108
|
+
}
|
|
109
|
+
)
|
|
110
|
+
}
|
|
111
|
+
),
|
|
112
|
+
item.description && /* @__PURE__ */ jsx(
|
|
113
|
+
Text,
|
|
114
|
+
{
|
|
115
|
+
className: comboboxItemStyles.description({
|
|
116
|
+
className: itemClassNames?.description
|
|
117
|
+
}),
|
|
118
|
+
slot: "description",
|
|
119
|
+
children: item.description
|
|
120
|
+
}
|
|
121
|
+
)
|
|
122
|
+
] }) }, item.id)
|
|
101
123
|
}
|
|
102
124
|
);
|
|
103
125
|
}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
4
|
+
import { useMemo } from 'react';
|
|
5
|
+
import { useContextProps, ListBoxItem, composeRenderProps, Text } from 'react-aria-components';
|
|
6
|
+
import { comboBoxItemStyles } from '@opengovsg/oui-theme';
|
|
7
|
+
import { forwardRef, mapPropsVariants } from '../system/utils.js';
|
|
8
|
+
import { ComboBoxVariantContext } from './combo-box-variant-context.js';
|
|
9
|
+
|
|
10
|
+
const ComboBoxItem = forwardRef(function ComboBoxItem2(originalProps, ref) {
|
|
11
|
+
[originalProps, ref] = useContextProps(
|
|
12
|
+
originalProps,
|
|
13
|
+
ref,
|
|
14
|
+
ComboBoxVariantContext
|
|
15
|
+
);
|
|
16
|
+
const [
|
|
17
|
+
{ className, description, children, classNames, ...props },
|
|
18
|
+
variantProps
|
|
19
|
+
] = mapPropsVariants(originalProps, comboBoxItemStyles.variantKeys);
|
|
20
|
+
const styles = comboBoxItemStyles(variantProps);
|
|
21
|
+
const defaultTextValue = useMemo(() => {
|
|
22
|
+
if (props.textValue) {
|
|
23
|
+
return props.textValue;
|
|
24
|
+
}
|
|
25
|
+
if (typeof children === "string") {
|
|
26
|
+
return children;
|
|
27
|
+
}
|
|
28
|
+
return void 0;
|
|
29
|
+
}, [children, props.textValue]);
|
|
30
|
+
return /* @__PURE__ */ jsx(
|
|
31
|
+
ListBoxItem,
|
|
32
|
+
{
|
|
33
|
+
textValue: defaultTextValue,
|
|
34
|
+
...props,
|
|
35
|
+
className: composeRenderProps(
|
|
36
|
+
className ?? classNames?.container,
|
|
37
|
+
(className2, renderProps) => styles.container({ ...renderProps, className: className2 })
|
|
38
|
+
),
|
|
39
|
+
children: (renderProps) => {
|
|
40
|
+
if (typeof children === "function") {
|
|
41
|
+
return children(renderProps);
|
|
42
|
+
}
|
|
43
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
44
|
+
/* @__PURE__ */ jsx(
|
|
45
|
+
Text,
|
|
46
|
+
{
|
|
47
|
+
className: styles.label({ className: classNames?.label }),
|
|
48
|
+
slot: "label",
|
|
49
|
+
children
|
|
50
|
+
}
|
|
51
|
+
),
|
|
52
|
+
description && /* @__PURE__ */ jsx(
|
|
53
|
+
Text,
|
|
54
|
+
{
|
|
55
|
+
className: styles.description({
|
|
56
|
+
className: classNames?.description
|
|
57
|
+
}),
|
|
58
|
+
slot: "description",
|
|
59
|
+
children: description
|
|
60
|
+
}
|
|
61
|
+
)
|
|
62
|
+
] });
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
);
|
|
66
|
+
});
|
|
67
|
+
|
|
68
|
+
export { ComboBoxItem };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
import { createContext } from '../system/react-utils/context.js';
|
|
4
|
+
|
|
5
|
+
const [ComboBoxVariantContext, useComboBoxVariantContext] = createContext({
|
|
6
|
+
name: "ComboBoxVariantContext",
|
|
7
|
+
strict: true
|
|
8
|
+
});
|
|
9
|
+
|
|
10
|
+
export { ComboBoxVariantContext, useComboBoxVariantContext };
|
|
@@ -3,9 +3,11 @@
|
|
|
3
3
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
4
4
|
import { useMemo, useCallback } from 'react';
|
|
5
5
|
import { useMessageFormatter } from 'react-aria';
|
|
6
|
-
import { ListLayout, ComboBox as ComboBox$1, Input, Button,
|
|
6
|
+
import { ListLayout, Provider, ComboBox as ComboBox$1, Input, Button, Popover, Virtualizer, ListBox } from 'react-aria-components';
|
|
7
7
|
import { comboBoxItemStyles, cn, comboBoxStyles, composeTailwindRenderProps, composeRenderProps, comboBoxClearButtonStyles } from '@opengovsg/oui-theme';
|
|
8
8
|
import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
|
|
9
|
+
import { mapPropsVariants } from '../system/utils.js';
|
|
10
|
+
import { ComboBoxVariantContext } from './combo-box-variant-context.js';
|
|
9
11
|
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';
|
|
10
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';
|
|
11
13
|
import X from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/x.js';
|
|
@@ -54,38 +56,43 @@ function ComboBoxEmptyState({
|
|
|
54
56
|
}
|
|
55
57
|
);
|
|
56
58
|
}
|
|
57
|
-
function ComboBox({
|
|
58
|
-
label,
|
|
59
|
-
description,
|
|
60
|
-
errorMessage,
|
|
61
|
-
classNames,
|
|
62
|
-
itemClassNames,
|
|
63
|
-
size,
|
|
64
|
-
listLayoutOptions,
|
|
65
|
-
children,
|
|
66
|
-
dependencies,
|
|
67
|
-
onClear,
|
|
68
|
-
renderEmptyState: renderEmptyStateProp,
|
|
69
|
-
...props
|
|
70
|
-
}) {
|
|
59
|
+
function ComboBox(originalProps) {
|
|
71
60
|
const formatMessage = useMessageFormatter(i18nStrings);
|
|
72
|
-
const
|
|
61
|
+
const [_props, variantProps] = mapPropsVariants(
|
|
62
|
+
originalProps,
|
|
63
|
+
comboBoxStyles.variantKeys
|
|
64
|
+
);
|
|
65
|
+
const {
|
|
66
|
+
label,
|
|
67
|
+
description,
|
|
68
|
+
errorMessage,
|
|
69
|
+
classNames,
|
|
70
|
+
listLayoutOptions,
|
|
71
|
+
children,
|
|
72
|
+
dependencies,
|
|
73
|
+
onClear,
|
|
74
|
+
renderEmptyState: renderEmptyStateProp,
|
|
75
|
+
...props
|
|
76
|
+
} = _props;
|
|
77
|
+
const styles = comboBoxStyles(variantProps);
|
|
73
78
|
const layout = useMemo(() => {
|
|
74
79
|
return new ListLayout({
|
|
75
|
-
estimatedRowHeight: calculateEstimatedRowHeight(
|
|
80
|
+
estimatedRowHeight: calculateEstimatedRowHeight(
|
|
81
|
+
variantProps.size ?? "md"
|
|
82
|
+
),
|
|
76
83
|
...listLayoutOptions
|
|
77
84
|
});
|
|
78
|
-
}, [listLayoutOptions, size]);
|
|
85
|
+
}, [listLayoutOptions, variantProps.size]);
|
|
79
86
|
const renderEmptyState = useCallback(
|
|
80
87
|
(props2) => {
|
|
81
88
|
if (renderEmptyStateProp) {
|
|
82
89
|
return renderEmptyStateProp(props2);
|
|
83
90
|
}
|
|
84
|
-
return /* @__PURE__ */ jsx(ComboBoxEmptyState, {
|
|
91
|
+
return /* @__PURE__ */ jsx(ComboBoxEmptyState, { className: classNames?.emptyState });
|
|
85
92
|
},
|
|
86
|
-
[classNames?.emptyState, renderEmptyStateProp
|
|
93
|
+
[classNames?.emptyState, renderEmptyStateProp]
|
|
87
94
|
);
|
|
88
|
-
return /* @__PURE__ */ jsx(
|
|
95
|
+
return /* @__PURE__ */ jsx(Provider, { values: [[ComboBoxVariantContext, variantProps]], children: /* @__PURE__ */ jsx(
|
|
89
96
|
ComboBox$1,
|
|
90
97
|
{
|
|
91
98
|
className: composeTailwindRenderProps(
|
|
@@ -94,13 +101,14 @@ function ComboBox({
|
|
|
94
101
|
),
|
|
95
102
|
shouldFocusWrap: true,
|
|
96
103
|
allowsEmptyCollection: true,
|
|
104
|
+
isDisabled: variantProps.isDisabled,
|
|
97
105
|
...props,
|
|
98
106
|
children: ({ isOpen, isDisabled: isComboBoxDisabled }) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
99
107
|
/* @__PURE__ */ jsx(
|
|
100
108
|
Label,
|
|
101
109
|
{
|
|
102
|
-
size,
|
|
103
|
-
className: styles.label({ className: classNames?.label
|
|
110
|
+
size: variantProps.size,
|
|
111
|
+
className: styles.label({ className: classNames?.label }),
|
|
104
112
|
children: label
|
|
105
113
|
}
|
|
106
114
|
),
|
|
@@ -108,12 +116,12 @@ function ComboBox({
|
|
|
108
116
|
/* @__PURE__ */ jsxs(
|
|
109
117
|
FieldGroup,
|
|
110
118
|
{
|
|
119
|
+
isDisabled: isComboBoxDisabled,
|
|
111
120
|
className: composeRenderProps(
|
|
112
121
|
classNames?.group,
|
|
113
122
|
(className, renderProps) => styles.group({
|
|
114
123
|
...renderProps,
|
|
115
124
|
className,
|
|
116
|
-
size,
|
|
117
125
|
isClearable: !!onClear
|
|
118
126
|
})
|
|
119
127
|
),
|
|
@@ -123,7 +131,7 @@ function ComboBox({
|
|
|
123
131
|
{
|
|
124
132
|
className: composeRenderProps(
|
|
125
133
|
classNames?.field,
|
|
126
|
-
(className, renderProps) => styles.field({ ...renderProps, className
|
|
134
|
+
(className, renderProps) => styles.field({ ...renderProps, className })
|
|
127
135
|
)
|
|
128
136
|
}
|
|
129
137
|
),
|
|
@@ -132,22 +140,20 @@ function ComboBox({
|
|
|
132
140
|
{
|
|
133
141
|
className: composeRenderProps(
|
|
134
142
|
classNames?.expandButton,
|
|
135
|
-
(className, renderProps) => styles.expandButton({ ...renderProps, className
|
|
143
|
+
(className, renderProps) => styles.expandButton({ ...renderProps, className })
|
|
136
144
|
),
|
|
137
145
|
children: isOpen ? /* @__PURE__ */ jsx(
|
|
138
146
|
ChevronUp,
|
|
139
147
|
{
|
|
140
148
|
className: styles.icon({
|
|
141
|
-
className: classNames?.icon
|
|
142
|
-
size
|
|
149
|
+
className: classNames?.icon
|
|
143
150
|
})
|
|
144
151
|
}
|
|
145
152
|
) : /* @__PURE__ */ jsx(
|
|
146
153
|
ChevronDown,
|
|
147
154
|
{
|
|
148
155
|
className: styles.icon({
|
|
149
|
-
className: classNames?.icon
|
|
150
|
-
size
|
|
156
|
+
className: classNames?.icon
|
|
151
157
|
})
|
|
152
158
|
}
|
|
153
159
|
)
|
|
@@ -166,35 +172,33 @@ function ComboBox({
|
|
|
166
172
|
className: composeRenderProps(
|
|
167
173
|
classNames?.clearButton,
|
|
168
174
|
(className, renderProps) => comboBoxClearButtonStyles({
|
|
175
|
+
...variantProps,
|
|
169
176
|
...renderProps,
|
|
170
177
|
className,
|
|
171
|
-
|
|
172
|
-
isInactive: !props.inputValue,
|
|
173
|
-
isDisabled: renderProps.isDisabled
|
|
178
|
+
isInactive: !props.inputValue
|
|
174
179
|
})
|
|
175
180
|
),
|
|
176
181
|
children: /* @__PURE__ */ jsx(
|
|
177
182
|
X,
|
|
178
183
|
{
|
|
179
184
|
className: styles.icon({
|
|
180
|
-
className: classNames?.icon
|
|
181
|
-
size
|
|
185
|
+
className: classNames?.icon
|
|
182
186
|
})
|
|
183
187
|
}
|
|
184
188
|
)
|
|
185
189
|
}
|
|
186
190
|
)
|
|
187
191
|
] }),
|
|
188
|
-
description && /* @__PURE__ */ jsx(Description, { size, children: description }),
|
|
189
|
-
/* @__PURE__ */ jsx(FieldError, { size, children: errorMessage }),
|
|
190
|
-
/* @__PURE__ */ jsx(
|
|
192
|
+
description && /* @__PURE__ */ jsx(Description, { size: variantProps.size, children: description }),
|
|
193
|
+
/* @__PURE__ */ jsx(FieldError, { size: variantProps.size, children: errorMessage }),
|
|
194
|
+
/* @__PURE__ */ jsx(
|
|
191
195
|
Popover,
|
|
192
196
|
{
|
|
193
197
|
className: composeRenderProps(
|
|
194
198
|
classNames?.popover,
|
|
195
199
|
(className, renderProps) => styles.popover({ ...renderProps, className })
|
|
196
200
|
),
|
|
197
|
-
children: /* @__PURE__ */ jsx(
|
|
201
|
+
children: /* @__PURE__ */ jsx(Virtualizer, { layout, children: /* @__PURE__ */ jsx(
|
|
198
202
|
ListBox,
|
|
199
203
|
{
|
|
200
204
|
className: composeRenderProps(
|
|
@@ -203,71 +207,14 @@ function ComboBox({
|
|
|
203
207
|
),
|
|
204
208
|
dependencies,
|
|
205
209
|
renderEmptyState,
|
|
206
|
-
children
|
|
207
|
-
if (children) {
|
|
208
|
-
return children(item);
|
|
209
|
-
}
|
|
210
|
-
return /* @__PURE__ */ jsx(
|
|
211
|
-
ComboBoxItem,
|
|
212
|
-
{
|
|
213
|
-
size,
|
|
214
|
-
id: item.value,
|
|
215
|
-
label: item.name,
|
|
216
|
-
textValue: item.name,
|
|
217
|
-
description: item.description,
|
|
218
|
-
classNames: itemClassNames
|
|
219
|
-
}
|
|
220
|
-
);
|
|
221
|
-
}
|
|
210
|
+
children
|
|
222
211
|
}
|
|
223
|
-
)
|
|
212
|
+
) })
|
|
224
213
|
}
|
|
225
|
-
)
|
|
214
|
+
)
|
|
226
215
|
] })
|
|
227
216
|
}
|
|
228
|
-
);
|
|
229
|
-
}
|
|
230
|
-
function ComboBoxItem({
|
|
231
|
-
className,
|
|
232
|
-
size,
|
|
233
|
-
description,
|
|
234
|
-
label,
|
|
235
|
-
classNames,
|
|
236
|
-
...props
|
|
237
|
-
}) {
|
|
238
|
-
const styles = comboBoxItemStyles({ size });
|
|
239
|
-
return /* @__PURE__ */ jsx(
|
|
240
|
-
ListBoxItem,
|
|
241
|
-
{
|
|
242
|
-
...props,
|
|
243
|
-
className: composeRenderProps(
|
|
244
|
-
className ?? classNames?.container,
|
|
245
|
-
(className2, renderProps) => styles.container({ ...renderProps, className: className2 })
|
|
246
|
-
),
|
|
247
|
-
children: (renderProps) => {
|
|
248
|
-
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
249
|
-
/* @__PURE__ */ jsx(
|
|
250
|
-
Text,
|
|
251
|
-
{
|
|
252
|
-
className: styles.label({ className: classNames?.label }),
|
|
253
|
-
slot: "label",
|
|
254
|
-
children: typeof label === "function" ? label(renderProps) : label
|
|
255
|
-
}
|
|
256
|
-
),
|
|
257
|
-
description && /* @__PURE__ */ jsx(
|
|
258
|
-
Text,
|
|
259
|
-
{
|
|
260
|
-
className: styles.description({
|
|
261
|
-
className: classNames?.description
|
|
262
|
-
}),
|
|
263
|
-
slot: "description",
|
|
264
|
-
children: typeof description === "function" ? description(renderProps) : description
|
|
265
|
-
}
|
|
266
|
-
)
|
|
267
|
-
] });
|
|
268
|
-
}
|
|
269
|
-
}
|
|
270
|
-
);
|
|
217
|
+
) });
|
|
271
218
|
}
|
|
272
219
|
|
|
273
|
-
export { ComboBox, ComboBoxEmptyState
|
|
220
|
+
export { ComboBox, ComboBoxEmptyState };
|
|
@@ -1,3 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
export { ComboBox, ComboBoxEmptyState
|
|
2
|
+
export { ComboBox, ComboBoxEmptyState } from './combo-box.js';
|
|
3
3
|
export { ComboBoxFuzzy } from './combo-box-fuzzy.js';
|
|
4
|
+
export { ComboBoxItem } from './combo-box-item.js';
|
|
5
|
+
export { ComboBoxVariantContext, useComboBoxVariantContext } from './combo-box-variant-context.js';
|
package/dist/esm/index.js
CHANGED
|
@@ -13,8 +13,12 @@ export { TextField } from './text-field/text-field.js';
|
|
|
13
13
|
export { Description, FieldError, FieldGroup, Label } from './field/field.js';
|
|
14
14
|
export { TextArea } from './text-area/text-area.js';
|
|
15
15
|
export { TextAreaField } from './text-area-field/text-area-field.js';
|
|
16
|
-
export { ComboBox, ComboBoxEmptyState
|
|
16
|
+
export { ComboBox, ComboBoxEmptyState } from './combo-box/combo-box.js';
|
|
17
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';
|
|
18
20
|
export { Banner } from './banner/banner.js';
|
|
19
21
|
export { TagField } from './tag-field/tag-field.js';
|
|
20
22
|
export { Select } from './select/select.js';
|
|
23
|
+
export { SelectItem } from './select/select-item.js';
|
|
24
|
+
export { SelectVariantContext, useSelectVariantContext } from './select/select-variant-context.js';
|
package/dist/esm/select/index.js
CHANGED
|
@@ -4,11 +4,11 @@ import { jsx, jsxs } from 'react/jsx-runtime';
|
|
|
4
4
|
import { useMemo } from 'react';
|
|
5
5
|
import { ListLayout, Provider, Select as Select$1, SelectValue, Popover, Virtualizer, ListBox } from 'react-aria-components';
|
|
6
6
|
import { selectStyles, composeRenderProps } from '@opengovsg/oui-theme';
|
|
7
|
+
import { Button } from '../button/button.js';
|
|
8
|
+
import { Label, Description } from '../field/field.js';
|
|
7
9
|
import { mapPropsVariants } from '../system/utils.js';
|
|
8
10
|
import { SelectVariantContext } from './select-variant-context.js';
|
|
9
11
|
import ChevronsUpDown from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevrons-up-down.js';
|
|
10
|
-
import { Label, Description } from '../field/field.js';
|
|
11
|
-
import { Button } from '../button/button.js';
|
|
12
12
|
|
|
13
13
|
const calculateEstimatedRowHeight = (size) => {
|
|
14
14
|
switch (size) {
|
|
@@ -4,13 +4,13 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
4
4
|
import { createElement } from 'react';
|
|
5
5
|
import { composeRenderProps, Popover } 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';
|
|
7
9
|
import { TagFieldList, TagFieldListItem } from './tag-field-list.js';
|
|
8
10
|
import { TagFieldRoot } from './tag-field-root.js';
|
|
9
11
|
import { TagFieldTagList } from './tag-field-tag-list.js';
|
|
10
12
|
import { TagFieldTrigger } from './tag-field-trigger.js';
|
|
11
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';
|
|
12
|
-
import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
|
|
13
|
-
import { Input } from '../input/input.js';
|
|
14
14
|
|
|
15
15
|
function TagField({
|
|
16
16
|
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,
|
|
@@ -1,12 +1,20 @@
|
|
|
1
|
+
import type { Key } from "react-aria";
|
|
1
2
|
import type { SetRequired } from "type-fest";
|
|
2
|
-
import type { SlotsToClasses } from "@opengovsg/oui-theme";
|
|
3
|
+
import type { ComboBoxItemSlots, SlotsToClasses } from "@opengovsg/oui-theme";
|
|
3
4
|
import type { ComboBoxProps } from "./combo-box";
|
|
4
|
-
import { ComboBoxItem } from "./combo-box";
|
|
5
|
+
import { ComboBoxItem } from "./combo-box-item";
|
|
6
|
+
type ComboBoxItem = {
|
|
7
|
+
id: Key;
|
|
8
|
+
textValue: string;
|
|
9
|
+
description?: string;
|
|
10
|
+
};
|
|
5
11
|
export interface ComboBoxFuzzyProps<T extends ComboBoxItem = ComboBoxItem> extends SetRequired<ComboBoxProps<T>, "inputValue" | "onInputChange" | "onSelectionChange" | "selectedKey" | "items"> {
|
|
6
|
-
itemClassNames?:
|
|
12
|
+
itemClassNames?: SlotsToClasses<ComboBoxItemSlots> & SlotsToClasses<"highlight">;
|
|
7
13
|
}
|
|
8
14
|
/**
|
|
9
15
|
* Controlled variant of ComboBox, allows for fuzzy search and item highlight.
|
|
16
|
+
* @deprecated Use ComboBox instead (and bring your own fuzzysearch).
|
|
10
17
|
*/
|
|
11
|
-
export declare function ComboBoxFuzzy<T extends ComboBoxItem = ComboBoxItem>(
|
|
18
|
+
export declare function ComboBoxFuzzy<T extends ComboBoxItem = ComboBoxItem>(originalProps: ComboBoxFuzzyProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
export {};
|
|
12
20
|
//# sourceMappingURL=combo-box-fuzzy.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combo-box-fuzzy.d.ts","sourceRoot":"","sources":["../../../src/combo-box/combo-box-fuzzy.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"combo-box-fuzzy.d.ts","sourceRoot":"","sources":["../../../src/combo-box/combo-box-fuzzy.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAK5C,OAAO,KAAK,EAEV,iBAAiB,EACjB,cAAc,EACf,MAAM,sBAAsB,CAAA;AAO7B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAGhD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAQ/C,KAAK,YAAY,GAAG;IAClB,EAAE,EAAE,GAAG,CAAA;IACP,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAwBD,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,YAAY,GAAG,YAAY,CACvE,SAAQ,WAAW,CACjB,aAAa,CAAC,CAAC,CAAC,EACd,YAAY,GACZ,eAAe,GACf,mBAAmB,GACnB,aAAa,GACb,OAAO,CACV;IACD,cAAc,CAAC,EAAE,cAAc,CAAC,iBAAiB,CAAC,GAChD,cAAc,CAAC,WAAW,CAAC,CAAA;CAC9B;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,YAAY,GAAG,YAAY,EACjE,aAAa,EAAE,kBAAkB,CAAC,CAAC,CAAC,2CAwGrC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { ListBoxItemProps } from "react-aria-components";
|
|
2
|
+
import type { ComboBoxItemSlots, ComboBoxItemVariantProps, SlotsToClasses } from "@opengovsg/oui-theme";
|
|
3
|
+
export interface ComboBoxItemProps extends ListBoxItemProps, ComboBoxItemVariantProps {
|
|
4
|
+
/**
|
|
5
|
+
* Description for the item, if any
|
|
6
|
+
*/
|
|
7
|
+
description?: React.ReactNode;
|
|
8
|
+
classNames?: SlotsToClasses<ComboBoxItemSlots>;
|
|
9
|
+
}
|
|
10
|
+
export declare const ComboBoxItem: import("../system/utils").InternalForwardRefRenderFunction<import("../system/types").As, ComboBoxItemProps, never>;
|
|
11
|
+
//# sourceMappingURL=combo-box-item.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"combo-box-item.d.ts","sourceRoot":"","sources":["../../../src/combo-box/combo-box-item.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAS7D,OAAO,KAAK,EACV,iBAAiB,EACjB,wBAAwB,EACxB,cAAc,EACf,MAAM,sBAAsB,CAAA;AAM7B,MAAM,WAAW,iBACf,SAAQ,gBAAgB,EACtB,wBAAwB;IAC1B;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,UAAU,CAAC,EAAE,cAAc,CAAC,iBAAiB,CAAC,CAAA;CAC/C;AAED,eAAO,MAAM,YAAY,oHAgEvB,CAAA"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import type { ContextValue } from "react-aria-components";
|
|
2
|
+
import type { ComboBoxVariantProps } from "@opengovsg/oui-theme";
|
|
3
|
+
export declare const ComboBoxVariantContext: import("react").Context<ContextValue<ComboBoxVariantProps, any>>, useComboBoxVariantContext: () => ContextValue<ComboBoxVariantProps, any>;
|
|
4
|
+
//# sourceMappingURL=combo-box-variant-context.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"combo-box-variant-context.d.ts","sourceRoot":"","sources":["../../../src/combo-box/combo-box-variant-context.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEzD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AAIhE,eAAO,MAAO,sBAAsB,oEAAE,yBAAyB,+CAO3D,CAAA"}
|