@opengovsg/oui 0.0.46 → 0.0.48
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/checkbox/checkbox.cjs +34 -26
- package/dist/cjs/index.cjs +1 -0
- package/dist/cjs/pagination/pagination.cjs +1 -1
- package/dist/cjs/tabs/index.cjs +1 -0
- package/dist/cjs/tabs/tabs.cjs +2 -0
- package/dist/cjs/tag-field/tag-field-list.cjs +25 -5
- package/dist/cjs/tag-field/use-tag-field.cjs +15 -4
- package/dist/cjs/tooltip/tooltip.cjs +7 -9
- package/dist/esm/checkbox/checkbox.js +34 -26
- package/dist/esm/index.js +1 -1
- package/dist/esm/pagination/pagination.js +1 -1
- package/dist/esm/tabs/index.js +1 -1
- package/dist/esm/tabs/tabs.js +3 -2
- package/dist/esm/tag-field/tag-field-list.js +25 -5
- package/dist/esm/tag-field/use-tag-field.js +15 -4
- package/dist/esm/tooltip/tooltip.js +5 -7
- package/dist/types/checkbox/checkbox.d.ts +3 -3
- package/dist/types/checkbox/checkbox.d.ts.map +1 -1
- package/dist/types/system/react-utils/children.d.ts +1 -1
- package/dist/types/system/react-utils/children.d.ts.map +1 -1
- package/dist/types/tabs/tabs.d.ts +1 -0
- package/dist/types/tabs/tabs.d.ts.map +1 -1
- package/dist/types/tag-field/tag-field-list.d.ts +1 -1
- package/dist/types/tag-field/tag-field-list.d.ts.map +1 -1
- package/dist/types/tag-field/types.d.ts +7 -0
- package/dist/types/tag-field/types.d.ts.map +1 -1
- package/dist/types/tag-field/use-tag-field.d.ts +1 -1
- package/dist/types/tag-field/use-tag-field.d.ts.map +1 -1
- package/dist/types/tooltip/tooltip.d.ts.map +1 -1
- package/package.json +3 -3
|
@@ -6,6 +6,7 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
6
6
|
var reactAriaComponents = require('react-aria-components');
|
|
7
7
|
var ouiTheme = require('@opengovsg/oui-theme');
|
|
8
8
|
var field = require('../field/field.cjs');
|
|
9
|
+
var children = require('../system/react-utils/children.cjs');
|
|
9
10
|
var utils = require('../system/utils.cjs');
|
|
10
11
|
var checkboxGroupStyleContext = require('./checkbox-group-style-context.cjs');
|
|
11
12
|
var minus = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/minus.cjs');
|
|
@@ -33,32 +34,39 @@ const Checkbox = ({
|
|
|
33
34
|
className ?? classNames?.base,
|
|
34
35
|
(className2, renderProps) => styles.base({ ...renderProps, className: className2 })
|
|
35
36
|
),
|
|
36
|
-
children: (
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
37
|
+
children: (renderProps) => {
|
|
38
|
+
const { isSelected, isIndeterminate, ...restRenderProps } = renderProps;
|
|
39
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
40
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
41
|
+
"div",
|
|
42
|
+
{
|
|
43
|
+
className: styles.box({
|
|
44
|
+
isSelected: isSelected || isIndeterminate,
|
|
45
|
+
...restRenderProps,
|
|
46
|
+
className: children.renderChildren(renderProps, classNames?.box)
|
|
47
|
+
}),
|
|
48
|
+
children: isIndeterminate ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
49
|
+
minus.default,
|
|
50
|
+
{
|
|
51
|
+
"aria-hidden": true,
|
|
52
|
+
className: styles.icon({
|
|
53
|
+
className: children.renderChildren(renderProps, classNames?.icon)
|
|
54
|
+
})
|
|
55
|
+
}
|
|
56
|
+
) : isSelected ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
57
|
+
check.default,
|
|
58
|
+
{
|
|
59
|
+
"aria-hidden": true,
|
|
60
|
+
className: styles.icon({
|
|
61
|
+
className: children.renderChildren(renderProps, classNames?.icon)
|
|
62
|
+
})
|
|
63
|
+
}
|
|
64
|
+
) : null
|
|
65
|
+
}
|
|
66
|
+
),
|
|
67
|
+
props.children
|
|
68
|
+
] });
|
|
69
|
+
}
|
|
62
70
|
}
|
|
63
71
|
);
|
|
64
72
|
};
|
package/dist/cjs/index.cjs
CHANGED
|
@@ -147,6 +147,7 @@ exports.Popover = popover.Popover;
|
|
|
147
147
|
exports.Tab = tabs.Tab;
|
|
148
148
|
exports.TabList = tabs.TabList;
|
|
149
149
|
exports.TabPanel = tabs.TabPanel;
|
|
150
|
+
exports.TabPanels = tabs.TabPanels;
|
|
150
151
|
exports.Tabs = tabs.Tabs;
|
|
151
152
|
exports.TabsVariantContext = tabs.TabsVariantContext;
|
|
152
153
|
exports.useTabsVariantContext = tabs.useTabsVariantContext;
|
|
@@ -179,7 +179,7 @@ const Pagination = utils.forwardRef((props, ref) => {
|
|
|
179
179
|
paginationItem.PaginationItem,
|
|
180
180
|
{
|
|
181
181
|
className: slots.item({
|
|
182
|
-
class: ouiTheme.cn(classNames?.item, "group")
|
|
182
|
+
class: ouiTheme.cn(classNames?.item, "group/ellipsis")
|
|
183
183
|
}),
|
|
184
184
|
isDisabled: props.isDisabled,
|
|
185
185
|
"data-slot": "item",
|
package/dist/cjs/tabs/index.cjs
CHANGED
|
@@ -8,6 +8,7 @@ var tabs = require('./tabs.cjs');
|
|
|
8
8
|
exports.Tab = tabs.Tab;
|
|
9
9
|
exports.TabList = tabs.TabList;
|
|
10
10
|
exports.TabPanel = tabs.TabPanel;
|
|
11
|
+
exports.TabPanels = tabs.TabPanels;
|
|
11
12
|
exports.Tabs = tabs.Tabs;
|
|
12
13
|
exports.TabsVariantContext = tabs.TabsVariantContext;
|
|
13
14
|
exports.useTabsVariantContext = tabs.useTabsVariantContext;
|
package/dist/cjs/tabs/tabs.cjs
CHANGED
|
@@ -88,10 +88,12 @@ function TabPanel(props) {
|
|
|
88
88
|
}
|
|
89
89
|
);
|
|
90
90
|
}
|
|
91
|
+
const TabPanels = reactAriaComponents.TabPanels;
|
|
91
92
|
|
|
92
93
|
exports.Tab = Tab;
|
|
93
94
|
exports.TabList = TabList;
|
|
94
95
|
exports.TabPanel = TabPanel;
|
|
96
|
+
exports.TabPanels = TabPanels;
|
|
95
97
|
exports.Tabs = Tabs;
|
|
96
98
|
exports.TabsVariantContext = TabsVariantContext;
|
|
97
99
|
exports.useTabsVariantContext = useTabsVariantContext;
|
|
@@ -12,18 +12,18 @@ var tagFieldStateContext = require('./tag-field-state-context.cjs');
|
|
|
12
12
|
const TagFieldListContext = $670gB$react.createContext(null);
|
|
13
13
|
const TagFieldListInner = (props, ref) => {
|
|
14
14
|
[props, ref] = reactAriaComponents.useContextProps(props, ref, TagFieldListContext);
|
|
15
|
-
const { items, getItemProps, highlightedIndex } = $670gB$react.useContext(tagFieldStateContext.TagFieldStateContext);
|
|
15
|
+
const { items, getItemProps, highlightedIndex, itemToKey } = $670gB$react.useContext(tagFieldStateContext.TagFieldStateContext);
|
|
16
16
|
const { slot, rowVirtualizer, itemClassNames, ...rest } = props;
|
|
17
|
-
return /* @__PURE__ */ jsxRuntime.jsx("ul", { slot: slot ?? void 0, ref, ...rest, children: props.children !== void 0 && typeof props.children !== "function" ? props.children : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
17
|
+
return /* @__PURE__ */ jsxRuntime.jsx("ul", { slot: slot ?? void 0, ref, ...rest, children: props.children !== void 0 && typeof props.children !== "function" ? props.children : rowVirtualizer ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
18
18
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
19
19
|
"li",
|
|
20
20
|
{
|
|
21
21
|
"aria-hidden": true,
|
|
22
|
-
style: { height: rowVirtualizer
|
|
22
|
+
style: { height: rowVirtualizer.getTotalSize() }
|
|
23
23
|
},
|
|
24
24
|
"total-size"
|
|
25
25
|
),
|
|
26
|
-
rowVirtualizer
|
|
26
|
+
rowVirtualizer.getVirtualItems().map((virtualRow) => {
|
|
27
27
|
const item = items[virtualRow.index];
|
|
28
28
|
const itemProps = getItemProps({
|
|
29
29
|
item,
|
|
@@ -55,7 +55,27 @@ const TagFieldListInner = (props, ref) => {
|
|
|
55
55
|
}
|
|
56
56
|
);
|
|
57
57
|
})
|
|
58
|
-
] })
|
|
58
|
+
] }) : items.map((item, index) => {
|
|
59
|
+
const itemProps = getItemProps({ item, index });
|
|
60
|
+
const key = itemToKey(item);
|
|
61
|
+
const childProps = {
|
|
62
|
+
item,
|
|
63
|
+
isHighlighted: highlightedIndex === index,
|
|
64
|
+
key,
|
|
65
|
+
classNames: itemClassNames
|
|
66
|
+
};
|
|
67
|
+
if (typeof props.children === "function") {
|
|
68
|
+
return props.children({ ...childProps, itemProps });
|
|
69
|
+
}
|
|
70
|
+
return /* @__PURE__ */ $670gB$react.createElement(
|
|
71
|
+
tagFieldItem.TagFieldItem,
|
|
72
|
+
{
|
|
73
|
+
...childProps,
|
|
74
|
+
...itemProps,
|
|
75
|
+
key
|
|
76
|
+
}
|
|
77
|
+
);
|
|
78
|
+
}) });
|
|
59
79
|
};
|
|
60
80
|
const TagFieldList = utils.forwardRefGeneric(TagFieldListInner);
|
|
61
81
|
|
|
@@ -8,6 +8,10 @@ var downshift = require('downshift');
|
|
|
8
8
|
var lodashEs = require('lodash-es');
|
|
9
9
|
var reactAria = require('react-aria');
|
|
10
10
|
|
|
11
|
+
function useOptionalVirtualizer(isVirtualized, options) {
|
|
12
|
+
const virtualizer = reactVirtual.useVirtualizer(options);
|
|
13
|
+
return isVirtualized ? virtualizer : null;
|
|
14
|
+
}
|
|
11
15
|
function useTagField(props, state) {
|
|
12
16
|
let { buttonRef } = props;
|
|
13
17
|
const {
|
|
@@ -21,7 +25,8 @@ function useTagField(props, state) {
|
|
|
21
25
|
itemToKey,
|
|
22
26
|
itemToText,
|
|
23
27
|
label,
|
|
24
|
-
virtualRowHeight = 40
|
|
28
|
+
virtualRowHeight = 40,
|
|
29
|
+
isVirtualized = true
|
|
25
30
|
} = props;
|
|
26
31
|
const backupBtnRef = $670gB$react.useRef(null);
|
|
27
32
|
buttonRef = buttonRef ?? backupBtnRef;
|
|
@@ -51,7 +56,7 @@ function useTagField(props, state) {
|
|
|
51
56
|
const disabledKeysSet = $670gB$react.useMemo(() => {
|
|
52
57
|
return new Set(disabledKeys);
|
|
53
58
|
}, [disabledKeys]);
|
|
54
|
-
const rowVirtualizer =
|
|
59
|
+
const rowVirtualizer = useOptionalVirtualizer(isVirtualized, {
|
|
55
60
|
count: items.length,
|
|
56
61
|
getScrollElement: () => listBoxRef.current,
|
|
57
62
|
estimateSize: () => virtualRowHeight,
|
|
@@ -78,11 +83,17 @@ function useTagField(props, state) {
|
|
|
78
83
|
},
|
|
79
84
|
isItemDisabled: (item) => isDisabled || isReadOnly || disabledKeysSet.has(itemToKey(item)),
|
|
80
85
|
items,
|
|
81
|
-
scrollIntoView
|
|
86
|
+
// Noop for scrollIntoView if virtualized, as we'll handle it in onHighlightedIndexChange
|
|
87
|
+
scrollIntoView: (node) => {
|
|
88
|
+
if (!isVirtualized) {
|
|
89
|
+
node.scrollIntoView({ block: "nearest" });
|
|
90
|
+
}
|
|
82
91
|
},
|
|
83
92
|
onHighlightedIndexChange: ({ highlightedIndex: highlightedIndex2, type }) => {
|
|
84
93
|
if (type !== downshift.useCombobox.stateChangeTypes.MenuMouseLeave && highlightedIndex2 >= 0) {
|
|
85
|
-
rowVirtualizer
|
|
94
|
+
if (rowVirtualizer) {
|
|
95
|
+
rowVirtualizer.scrollToIndex(highlightedIndex2);
|
|
96
|
+
}
|
|
86
97
|
}
|
|
87
98
|
},
|
|
88
99
|
defaultHighlightedIndex: 0,
|
|
@@ -5,10 +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 children = require('../system/react-utils/children.cjs');
|
|
8
9
|
var utils = require('../system/utils.cjs');
|
|
9
10
|
|
|
10
11
|
function Tooltip(originalProps) {
|
|
11
|
-
const [{ children, showArrow = true, classNames, ...props }, variantProps] = utils.mapPropsVariants(originalProps, ouiTheme.tooltipStyles.variantKeys);
|
|
12
|
+
const [{ children: children$1, showArrow = true, classNames, ...props }, variantProps] = utils.mapPropsVariants(originalProps, ouiTheme.tooltipStyles.variantKeys);
|
|
12
13
|
const styles = ouiTheme.tooltipStyles(variantProps);
|
|
13
14
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
14
15
|
reactAriaComponents.Tooltip,
|
|
@@ -31,17 +32,14 @@ function Tooltip(originalProps) {
|
|
|
31
32
|
width: 8,
|
|
32
33
|
height: 8,
|
|
33
34
|
viewBox: "0 0 8 8",
|
|
34
|
-
className:
|
|
35
|
-
|
|
36
|
-
(
|
|
37
|
-
|
|
38
|
-
...renderProps2
|
|
39
|
-
})
|
|
40
|
-
)(renderProps),
|
|
35
|
+
className: styles.arrow({
|
|
36
|
+
...renderProps,
|
|
37
|
+
className: children.renderChildren(renderProps, classNames?.arrow)
|
|
38
|
+
}),
|
|
41
39
|
children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0 0 L4 4 L8 0" })
|
|
42
40
|
}
|
|
43
41
|
) }),
|
|
44
|
-
children
|
|
42
|
+
children$1
|
|
45
43
|
] })
|
|
46
44
|
}
|
|
47
45
|
);
|
|
@@ -4,6 +4,7 @@ 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
6
|
import { Label, Description, FieldError } from '../field/field.js';
|
|
7
|
+
import { renderChildren } from '../system/react-utils/children.js';
|
|
7
8
|
import { mapPropsVariants } from '../system/utils.js';
|
|
8
9
|
import { useCheckboxGroupStyleContext, CheckboxGroupStyleContext } from './checkbox-group-style-context.js';
|
|
9
10
|
import Minus from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/minus.js';
|
|
@@ -31,32 +32,39 @@ const Checkbox = ({
|
|
|
31
32
|
className ?? classNames?.base,
|
|
32
33
|
(className2, renderProps) => styles.base({ ...renderProps, className: className2 })
|
|
33
34
|
),
|
|
34
|
-
children: (
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
35
|
+
children: (renderProps) => {
|
|
36
|
+
const { isSelected, isIndeterminate, ...restRenderProps } = renderProps;
|
|
37
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
38
|
+
/* @__PURE__ */ jsx(
|
|
39
|
+
"div",
|
|
40
|
+
{
|
|
41
|
+
className: styles.box({
|
|
42
|
+
isSelected: isSelected || isIndeterminate,
|
|
43
|
+
...restRenderProps,
|
|
44
|
+
className: renderChildren(renderProps, classNames?.box)
|
|
45
|
+
}),
|
|
46
|
+
children: isIndeterminate ? /* @__PURE__ */ jsx(
|
|
47
|
+
Minus,
|
|
48
|
+
{
|
|
49
|
+
"aria-hidden": true,
|
|
50
|
+
className: styles.icon({
|
|
51
|
+
className: renderChildren(renderProps, classNames?.icon)
|
|
52
|
+
})
|
|
53
|
+
}
|
|
54
|
+
) : isSelected ? /* @__PURE__ */ jsx(
|
|
55
|
+
Check,
|
|
56
|
+
{
|
|
57
|
+
"aria-hidden": true,
|
|
58
|
+
className: styles.icon({
|
|
59
|
+
className: renderChildren(renderProps, classNames?.icon)
|
|
60
|
+
})
|
|
61
|
+
}
|
|
62
|
+
) : null
|
|
63
|
+
}
|
|
64
|
+
),
|
|
65
|
+
props.children
|
|
66
|
+
] });
|
|
67
|
+
}
|
|
60
68
|
}
|
|
61
69
|
);
|
|
62
70
|
};
|
package/dist/esm/index.js
CHANGED
|
@@ -32,7 +32,7 @@ export { CalendarDate } from '@internationalized/date';
|
|
|
32
32
|
export { RangeCalendar, RangeCalendarCell, RangeCalendarStateWrapper } from './range-calendar/range-calendar.js';
|
|
33
33
|
export { Menu, MenuItem, MenuSection, MenuSeparator, MenuTrigger, MenuVariantContext, SubmenuTrigger, useMenuVariantContext } from './menu/menu.js';
|
|
34
34
|
export { Popover } from './popover/popover.js';
|
|
35
|
-
export { Tab, TabList, TabPanel, Tabs, TabsVariantContext, useTabsVariantContext } from './tabs/tabs.js';
|
|
35
|
+
export { Tab, TabList, TabPanel, TabPanels, Tabs, TabsVariantContext, useTabsVariantContext } from './tabs/tabs.js';
|
|
36
36
|
export { DateField, DateInput } from './date-field/date-field.js';
|
|
37
37
|
export { DatePicker } from './date-picker/date-picker.js';
|
|
38
38
|
export { DateRangePicker } from './date-range-picker/date-range-picker.js';
|
|
@@ -177,7 +177,7 @@ const Pagination = forwardRef((props, ref) => {
|
|
|
177
177
|
PaginationItem,
|
|
178
178
|
{
|
|
179
179
|
className: slots.item({
|
|
180
|
-
class: cn(classNames?.item, "group")
|
|
180
|
+
class: cn(classNames?.item, "group/ellipsis")
|
|
181
181
|
}),
|
|
182
182
|
isDisabled: props.isDisabled,
|
|
183
183
|
"data-slot": "item",
|
package/dist/esm/tabs/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
export { Tab, TabList, TabPanel, Tabs, TabsVariantContext, useTabsVariantContext } from './tabs.js';
|
|
2
|
+
export { Tab, TabList, TabPanel, TabPanels, Tabs, TabsVariantContext, useTabsVariantContext } from './tabs.js';
|
package/dist/esm/tabs/tabs.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"use client";
|
|
3
3
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
4
4
|
import { forwardRef } from 'react';
|
|
5
|
-
import { useContextProps, TabList as TabList$1, composeRenderProps, Tab as Tab$1, Provider, Tabs as Tabs$1, TabPanel as TabPanel$1 } from 'react-aria-components';
|
|
5
|
+
import { useContextProps, TabList as TabList$1, composeRenderProps, Tab as Tab$1, TabPanels as TabPanels$1, Provider, Tabs as Tabs$1, TabPanel as TabPanel$1 } from 'react-aria-components';
|
|
6
6
|
import { tabListStyles, tabStyles, tabsStyles, tabPanelStyles } from '@opengovsg/oui-theme';
|
|
7
7
|
import { forwardRefGeneric, mapPropsVariants } from '../system/utils.js';
|
|
8
8
|
import { createContext } from '../system/react-utils/context.js';
|
|
@@ -86,5 +86,6 @@ function TabPanel(props) {
|
|
|
86
86
|
}
|
|
87
87
|
);
|
|
88
88
|
}
|
|
89
|
+
const TabPanels = TabPanels$1;
|
|
89
90
|
|
|
90
|
-
export { Tab, TabList, TabPanel, Tabs, TabsVariantContext, useTabsVariantContext };
|
|
91
|
+
export { Tab, TabList, TabPanel, TabPanels, Tabs, TabsVariantContext, useTabsVariantContext };
|
|
@@ -10,18 +10,18 @@ import { TagFieldStateContext } from './tag-field-state-context.js';
|
|
|
10
10
|
const TagFieldListContext = createContext(null);
|
|
11
11
|
const TagFieldListInner = (props, ref) => {
|
|
12
12
|
[props, ref] = useContextProps(props, ref, TagFieldListContext);
|
|
13
|
-
const { items, getItemProps, highlightedIndex } = useContext(TagFieldStateContext);
|
|
13
|
+
const { items, getItemProps, highlightedIndex, itemToKey } = useContext(TagFieldStateContext);
|
|
14
14
|
const { slot, rowVirtualizer, itemClassNames, ...rest } = props;
|
|
15
|
-
return /* @__PURE__ */ jsx("ul", { slot: slot ?? void 0, ref, ...rest, children: props.children !== void 0 && typeof props.children !== "function" ? props.children : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
15
|
+
return /* @__PURE__ */ jsx("ul", { slot: slot ?? void 0, ref, ...rest, children: props.children !== void 0 && typeof props.children !== "function" ? props.children : rowVirtualizer ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
16
16
|
/* @__PURE__ */ jsx(
|
|
17
17
|
"li",
|
|
18
18
|
{
|
|
19
19
|
"aria-hidden": true,
|
|
20
|
-
style: { height: rowVirtualizer
|
|
20
|
+
style: { height: rowVirtualizer.getTotalSize() }
|
|
21
21
|
},
|
|
22
22
|
"total-size"
|
|
23
23
|
),
|
|
24
|
-
rowVirtualizer
|
|
24
|
+
rowVirtualizer.getVirtualItems().map((virtualRow) => {
|
|
25
25
|
const item = items[virtualRow.index];
|
|
26
26
|
const itemProps = getItemProps({
|
|
27
27
|
item,
|
|
@@ -53,7 +53,27 @@ const TagFieldListInner = (props, ref) => {
|
|
|
53
53
|
}
|
|
54
54
|
);
|
|
55
55
|
})
|
|
56
|
-
] })
|
|
56
|
+
] }) : items.map((item, index) => {
|
|
57
|
+
const itemProps = getItemProps({ item, index });
|
|
58
|
+
const key = itemToKey(item);
|
|
59
|
+
const childProps = {
|
|
60
|
+
item,
|
|
61
|
+
isHighlighted: highlightedIndex === index,
|
|
62
|
+
key,
|
|
63
|
+
classNames: itemClassNames
|
|
64
|
+
};
|
|
65
|
+
if (typeof props.children === "function") {
|
|
66
|
+
return props.children({ ...childProps, itemProps });
|
|
67
|
+
}
|
|
68
|
+
return /* @__PURE__ */ createElement(
|
|
69
|
+
TagFieldItem,
|
|
70
|
+
{
|
|
71
|
+
...childProps,
|
|
72
|
+
...itemProps,
|
|
73
|
+
key
|
|
74
|
+
}
|
|
75
|
+
);
|
|
76
|
+
}) });
|
|
57
77
|
};
|
|
58
78
|
const TagFieldList = forwardRefGeneric(TagFieldListInner);
|
|
59
79
|
|
|
@@ -6,6 +6,10 @@ import { useMultipleSelection, useCombobox } from 'downshift';
|
|
|
6
6
|
import { omit } from 'lodash-es';
|
|
7
7
|
import { useTextField } from 'react-aria';
|
|
8
8
|
|
|
9
|
+
function useOptionalVirtualizer(isVirtualized, options) {
|
|
10
|
+
const virtualizer = useVirtualizer(options);
|
|
11
|
+
return isVirtualized ? virtualizer : null;
|
|
12
|
+
}
|
|
9
13
|
function useTagField(props, state) {
|
|
10
14
|
let { buttonRef } = props;
|
|
11
15
|
const {
|
|
@@ -19,7 +23,8 @@ function useTagField(props, state) {
|
|
|
19
23
|
itemToKey,
|
|
20
24
|
itemToText,
|
|
21
25
|
label,
|
|
22
|
-
virtualRowHeight = 40
|
|
26
|
+
virtualRowHeight = 40,
|
|
27
|
+
isVirtualized = true
|
|
23
28
|
} = props;
|
|
24
29
|
const backupBtnRef = useRef(null);
|
|
25
30
|
buttonRef = buttonRef ?? backupBtnRef;
|
|
@@ -49,7 +54,7 @@ function useTagField(props, state) {
|
|
|
49
54
|
const disabledKeysSet = useMemo(() => {
|
|
50
55
|
return new Set(disabledKeys);
|
|
51
56
|
}, [disabledKeys]);
|
|
52
|
-
const rowVirtualizer =
|
|
57
|
+
const rowVirtualizer = useOptionalVirtualizer(isVirtualized, {
|
|
53
58
|
count: items.length,
|
|
54
59
|
getScrollElement: () => listBoxRef.current,
|
|
55
60
|
estimateSize: () => virtualRowHeight,
|
|
@@ -76,11 +81,17 @@ function useTagField(props, state) {
|
|
|
76
81
|
},
|
|
77
82
|
isItemDisabled: (item) => isDisabled || isReadOnly || disabledKeysSet.has(itemToKey(item)),
|
|
78
83
|
items,
|
|
79
|
-
scrollIntoView
|
|
84
|
+
// Noop for scrollIntoView if virtualized, as we'll handle it in onHighlightedIndexChange
|
|
85
|
+
scrollIntoView: (node) => {
|
|
86
|
+
if (!isVirtualized) {
|
|
87
|
+
node.scrollIntoView({ block: "nearest" });
|
|
88
|
+
}
|
|
80
89
|
},
|
|
81
90
|
onHighlightedIndexChange: ({ highlightedIndex: highlightedIndex2, type }) => {
|
|
82
91
|
if (type !== useCombobox.stateChangeTypes.MenuMouseLeave && highlightedIndex2 >= 0) {
|
|
83
|
-
rowVirtualizer
|
|
92
|
+
if (rowVirtualizer) {
|
|
93
|
+
rowVirtualizer.scrollToIndex(highlightedIndex2);
|
|
94
|
+
}
|
|
84
95
|
}
|
|
85
96
|
},
|
|
86
97
|
defaultHighlightedIndex: 0,
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
4
4
|
import { TooltipTrigger as TooltipTrigger$1, Tooltip as Tooltip$1, OverlayArrow } from 'react-aria-components';
|
|
5
5
|
import { tooltipStyles, composeRenderProps } from '@opengovsg/oui-theme';
|
|
6
|
+
import { renderChildren } from '../system/react-utils/children.js';
|
|
6
7
|
import { mapPropsVariants } from '../system/utils.js';
|
|
7
8
|
|
|
8
9
|
function Tooltip(originalProps) {
|
|
@@ -29,13 +30,10 @@ function Tooltip(originalProps) {
|
|
|
29
30
|
width: 8,
|
|
30
31
|
height: 8,
|
|
31
32
|
viewBox: "0 0 8 8",
|
|
32
|
-
className:
|
|
33
|
-
|
|
34
|
-
(
|
|
35
|
-
|
|
36
|
-
...renderProps2
|
|
37
|
-
})
|
|
38
|
-
)(renderProps),
|
|
33
|
+
className: styles.arrow({
|
|
34
|
+
...renderProps,
|
|
35
|
+
className: renderChildren(renderProps, classNames?.arrow)
|
|
36
|
+
}),
|
|
39
37
|
children: /* @__PURE__ */ jsx("path", { d: "M0 0 L4 4 L8 0" })
|
|
40
38
|
}
|
|
41
39
|
) }),
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import type { CheckboxGroupProps as AriaCheckboxGroupProps, CheckboxProps as AriaCheckboxProps, ValidationResult } from "react-aria-components";
|
|
2
|
-
import type { CheckboxSlots, FieldErrorSlots, SlotsToClasses, VariantProps } from "@opengovsg/oui-theme";
|
|
1
|
+
import type { CheckboxGroupProps as AriaCheckboxGroupProps, CheckboxProps as AriaCheckboxProps, CheckboxRenderProps, ValidationResult } from "react-aria-components";
|
|
2
|
+
import type { CheckboxSlots, FieldErrorSlots, SlotsToClasses, SlotsToClassesWithRenderProps, VariantProps } from "@opengovsg/oui-theme";
|
|
3
3
|
import { checkboxStyles } from "@opengovsg/oui-theme";
|
|
4
4
|
export interface CheckboxProps extends AriaCheckboxProps, VariantProps<typeof checkboxStyles> {
|
|
5
|
-
classNames?:
|
|
5
|
+
classNames?: SlotsToClassesWithRenderProps<CheckboxSlots, CheckboxRenderProps>;
|
|
6
6
|
}
|
|
7
7
|
export declare const Checkbox: ({ classNames, className, ...originalProps }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
8
|
export interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, "children"> {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/checkbox/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,kBAAkB,IAAI,sBAAsB,EAC5C,aAAa,IAAI,iBAAiB,EAClC,gBAAgB,EACjB,MAAM,uBAAuB,CAAA;AAS9B,OAAO,KAAK,EACV,aAAa,EACb,eAAe,EACf,cAAc,EACd,YAAY,EACb,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAuB,cAAc,EAAE,MAAM,sBAAsB,CAAA;
|
|
1
|
+
{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/checkbox/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,kBAAkB,IAAI,sBAAsB,EAC5C,aAAa,IAAI,iBAAiB,EAClC,mBAAmB,EACnB,gBAAgB,EACjB,MAAM,uBAAuB,CAAA;AAS9B,OAAO,KAAK,EACV,aAAa,EACb,eAAe,EACf,cAAc,EACd,6BAA6B,EAC7B,YAAY,EACb,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAuB,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAU1E,MAAM,WAAW,aACf,SAAQ,iBAAiB,EACvB,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,UAAU,CAAC,EAAE,6BAA6B,CAAC,aAAa,EAAE,mBAAmB,CAAC,CAAA;CAC/E;AAED,eAAO,MAAM,QAAQ,gDAIlB,aAAa,4CAmDf,CAAA;AACD,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,UAAU,CAAC;IAChD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,UAAU,EAAE,gBAAgB,KAAK,MAAM,CAAC,CAAA;IAClE,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,GAAG,MAAM,GAAG,aAAa,CAAC,GAAG;QAC9D,KAAK,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAA;KACxC,CAAA;IACD,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;CAC7B;AAED,wBAAgB,aAAa,CAAC,EAC5B,WAAW,EACX,YAAY,EACZ,UAAU,EACV,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,kBAAkB,2CA8BpB"}
|
|
@@ -8,5 +8,5 @@ export type ChildrenOrFunction<T> = ReactNode | ((values: T) => ReactNode);
|
|
|
8
8
|
*/
|
|
9
9
|
export declare function getValidChildren(children: React.ReactNode): React.ReactElement[];
|
|
10
10
|
export declare const pickChildren: <T = ReactNode>(children: T | undefined, targetChild: React.ElementType) => [T | undefined, T[] | undefined];
|
|
11
|
-
export declare const renderChildren: <T>(renderProps: T, children:
|
|
11
|
+
export declare const renderChildren: <T, S extends ReactNode>(renderProps: T, children: S | ((values: T) => S)) => S;
|
|
12
12
|
//# sourceMappingURL=children.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"children.d.ts","sourceRoot":"","sources":["../../../../src/system/react-utils/children.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,MAAM,MAAM,kBAAkB,CAAC,CAAC,IAAI,SAAS,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,SAAS,CAAC,CAAA;AAE1E;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,GAGnD,KAAK,CAAC,YAAY,EAAE,CAC1B;AAED,eAAO,MAAM,YAAY,GAAI,CAAC,wBAClB,CAAC,GAAG,SAAS,eACV,KAAK,CAAC,WAAW,KAC7B,CAAC,CAAC,GAAG,SAAS,EAAE,CAAC,EAAE,GAAG,SAAS,CAiBjC,CAAA;AAED,eAAO,MAAM,cAAc,GAAI,CAAC,
|
|
1
|
+
{"version":3,"file":"children.d.ts","sourceRoot":"","sources":["../../../../src/system/react-utils/children.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,MAAM,MAAM,kBAAkB,CAAC,CAAC,IAAI,SAAS,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,SAAS,CAAC,CAAA;AAE1E;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,GAGnD,KAAK,CAAC,YAAY,EAAE,CAC1B;AAED,eAAO,MAAM,YAAY,GAAI,CAAC,wBAClB,CAAC,GAAG,SAAS,eACV,KAAK,CAAC,WAAW,KAC7B,CAAC,CAAC,GAAG,SAAS,EAAE,CAAC,EAAE,GAAG,SAAS,CAiBjC,CAAA;AAED,eAAO,MAAM,cAAc,GAAI,CAAC,EAAE,CAAC,SAAS,SAAS,eACtC,CAAC,YACJ,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,CAAC,CAAC,MAOjC,CAAA"}
|
|
@@ -13,4 +13,5 @@ export interface TabProps extends AriaTabProps, TabVariantProps {
|
|
|
13
13
|
}
|
|
14
14
|
export declare const Tab: import("react").ForwardRefExoticComponent<TabProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
15
15
|
export declare function TabPanel(props: TabPanelProps): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
export declare const TabPanels: <T extends object>(props: import("react-aria-components").TabPanelsProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
|
|
16
17
|
//# sourceMappingURL=tabs.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,YAAY,IAAI,gBAAgB,EAChC,QAAQ,IAAI,YAAY,EACxB,SAAS,IAAI,aAAa,EAC1B,YAAY,EACZ,aAAa,EACd,MAAM,uBAAuB,CAAA;
|
|
1
|
+
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,YAAY,IAAI,gBAAgB,EAChC,QAAQ,IAAI,YAAY,EACxB,SAAS,IAAI,aAAa,EAC1B,YAAY,EACZ,aAAa,EACd,MAAM,uBAAuB,CAAA;AAa9B,OAAO,KAAK,EACV,mBAAmB,EACnB,gBAAgB,EAChB,eAAe,EAChB,MAAM,sBAAsB,CAAA;AAW7B,eAAO,MAAO,kBAAkB,gEAAE,qBAAqB,2CAMrD,CAAA;AAEF,MAAM,WAAW,SAAU,SAAQ,aAAa,EAAE,gBAAgB;CAAG;AAErE,wBAAgB,IAAI,CAAC,aAAa,EAAE,SAAS,2CAiB5C;AAED,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,MAAM,CAC5C,SAAQ,gBAAgB,CAAC,CAAC,CAAC,EACzB,mBAAmB;CAAG;AAE1B,eAAO,MAAM,OAAO,GAAsC,CAAC,SAAS,MAAM,6EASjE,MAAO,SAcd,CAAA;AAEF,MAAM,WAAW,QAAS,SAAQ,YAAY,EAAE,eAAe;IAC7D,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC7B;AAED,eAAO,MAAM,GAAG,qGA8Bd,CAAA;AAEF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAS5C;AAED,eAAO,MAAM,SAAS,gFACghpI,MAAO,aAAa,qBAAoB,MAAO,YAAY,OAD3jpI,CAAA"}
|
|
@@ -5,7 +5,7 @@ import type { ContextValue, SlotProps } from "react-aria-components";
|
|
|
5
5
|
import type { TagFieldItemProps } from "./tag-field-item";
|
|
6
6
|
import type { TagFieldListRenderProps } from "./types";
|
|
7
7
|
export interface TagFieldListContextValue extends SlotProps, ReturnType<UseComboboxPropGetters<object>["getMenuProps"]> {
|
|
8
|
-
rowVirtualizer: Virtualizer<HTMLElement, Element
|
|
8
|
+
rowVirtualizer: Virtualizer<HTMLElement, Element> | null;
|
|
9
9
|
}
|
|
10
10
|
export declare const TagFieldListContext: import("react").Context<ContextValue<TagFieldListContextValue, HTMLUListElement>>;
|
|
11
11
|
interface TagFieldListProps<T extends object> extends Partial<TagFieldListContextValue> {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tag-field-list.d.ts","sourceRoot":"","sources":["../../../src/tag-field/tag-field-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAC1D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAA;AACvD,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAIpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AACzD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA;AAKtD,MAAM,WAAW,wBACf,SAAQ,SAAS,EACf,UAAU,CAAC,sBAAsB,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC,CAAC;IAC5D,cAAc,EAAE,WAAW,CAAC,WAAW,EAAE,OAAO,CAAC,CAAA;
|
|
1
|
+
{"version":3,"file":"tag-field-list.d.ts","sourceRoot":"","sources":["../../../src/tag-field/tag-field-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAC1D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAA;AACvD,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAIpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AACzD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA;AAKtD,MAAM,WAAW,wBACf,SAAQ,SAAS,EACf,UAAU,CAAC,sBAAsB,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC,CAAC;IAC5D,cAAc,EAAE,WAAW,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,IAAI,CAAA;CACzD;AAED,eAAO,MAAM,mBAAmB,mFAC+C,CAAA;AAE/E,UAAU,iBAAiB,CAAC,CAAC,SAAS,MAAM,CAC1C,SAAQ,OAAO,CAAC,wBAAwB,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAA;IACnD,QAAQ,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC,CAAA;CAC3E;AAgFD,eAAO,MAAM,YAAY,GA9EE,CAAC,SAAS,MAAM,oFAqB9B,MAAO,SAyD4C,CAAA"}
|
|
@@ -59,6 +59,13 @@ export interface TagFieldProps<T> extends Omit<MultipleSelection, "disallowEmpty
|
|
|
59
59
|
* If provided, virtual row height will be set to given value.
|
|
60
60
|
*/
|
|
61
61
|
virtualRowHeight?: number;
|
|
62
|
+
/**
|
|
63
|
+
* Whether to virtualize the list items.
|
|
64
|
+
* Set to `false` to render items in normal DOM flow (useful for small lists
|
|
65
|
+
* or when absolute positioning conflicts with styling needs).
|
|
66
|
+
* @default true
|
|
67
|
+
*/
|
|
68
|
+
isVirtualized?: boolean;
|
|
62
69
|
/**
|
|
63
70
|
* Whether the tag field menu should close on blur.
|
|
64
71
|
* If not provided, the menu will close on blur when the user clicks outside the tag field.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/tag-field/types.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/tag-field/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,cAAc,EACd,aAAa,EACb,SAAS,EACT,GAAG,EACH,cAAc,EACd,iBAAiB,EACjB,aAAa,EACb,UAAU,EACX,MAAM,qBAAqB,CAAA;AAC5B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAC1D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAA;AACvD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EACV,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,oBAAoB,EACrB,MAAM,sBAAsB,CAAA;AAE7B,MAAM,WAAW,uBAAuB;IACtC,wCAAwC;IACxC,YAAY,EAAE,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,CAAA;IAC7B,uCAAuC;IACvC,UAAU,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,qBAAqB,CAAC,CAAC,CACtC,SAAQ,UAAU,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;IAC7D,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B;AAED,MAAM,WAAW,uBAAuB,CAAC,CAAC;IACxC,IAAI,EAAE,CAAC,CAAA;IACP,GAAG,EAAE,WAAW,CAAC,KAAK,CAAC,CAAA;IACvB,aAAa,EAAE,OAAO,CAAA;IACtB,UAAU,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAA;IAC7C,SAAS,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAA;CACpC;AAGD,MAAM,WAAW,mBAAmB,CAAC,CAAC,CAAE,SAAQ,uBAAuB,CAAC,CAAC,CAAC;CAAG;AAE7E,MAAM,WAAW,aAAa,CAAC,CAAC,CAC9B,SAAQ,IAAI,CACR,iBAAiB,EACf,wBAAwB,GACxB,mBAAmB,GACnB,eAAe,GACf,cAAc,GACd,qBAAqB,CACxB,EACD,SAAS,EACT,aAAa,EACb,UAAU,CAAC,uBAAuB,CAAC,EACnC,cAAc,CAAC,gBAAgB,CAAC,EAChC,cAAc,EACd,aAAa,EACb,oBAAoB;IACtB,UAAU,CAAC,EAAE,cAAc,CAAC,aAAa,CAAC,CAAA;IAC1C,cAAc,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAA;IACjD,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC,CAAC,KAAK,SAAS,CAAA;IACxD,kGAAkG;IAClG,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,OAAO,CAAA;IAClE;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAA;IAChC;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,GAAG,CAAA;IAC5B,kEAAkE;IAClE,YAAY,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,CAAA;IACvB,kEAAkE;IAClE,mBAAmB,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,CAAA;IAC9B,iDAAiD;IACjD,YAAY,CAAC,EAAE,CAAC,EAAE,CAAA;IAClB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,CAAC,EAAE,CAAA;IACX,oJAAoJ;IACpJ,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IACxC,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,KAAK,IAAI,CAAA;IAC5C,oDAAoD;IACpD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,oEAAoE;IACpE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAEvC;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B"}
|
|
@@ -36,7 +36,7 @@ export interface TagFieldAria<T> extends ValidationResult {
|
|
|
36
36
|
descriptionProps: DOMAttributes;
|
|
37
37
|
/** Props for the combo box error message element, if any. */
|
|
38
38
|
errorMessageProps: DOMAttributes;
|
|
39
|
-
rowVirtualizer: Virtualizer<HTMLElement, Element
|
|
39
|
+
rowVirtualizer: Virtualizer<HTMLElement, Element> | null;
|
|
40
40
|
}
|
|
41
41
|
/**
|
|
42
42
|
* Provides the behavior and accessibility implementation for a tag field component.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-tag-field.d.ts","sourceRoot":"","sources":["../../../src/tag-field/use-tag-field.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,SAAS,EACT,gBAAgB,EACjB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAC1D,OAAO,KAAK,EACV,sBAAsB,EACtB,sBAAsB,EACtB,+BAA+B,EAChC,MAAM,WAAW,CAAA;AAClB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAChD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAQ5C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAC5C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAE1D,MAAM,WAAW,mBAAmB,CAAC,CAAC,CACpC,SAAQ,WAAW,CACjB,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,EAClC,WAAW,GAAG,YAAY,CAC3B;IACD,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAA;IAC7C,qCAAqC;IACrC,QAAQ,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAA;IAC5C,gCAAgC;IAChC,UAAU,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IACzC,+DAA+D;IAC/D,SAAS,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAA;CAChD;AAED,MAAM,WAAW,YAAY,CAAC,CAAC,CAAE,SAAQ,gBAAgB;IACvD,mCAAmC;IACnC,UAAU,EAAE,aAAa,CAAA;IACzB,6CAA6C;IAC7C,UAAU,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAA;IACjD,6BAA6B;IAC7B,YAAY,EAAE,UAAU,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAA;IAEnE,wCAAwC;IACxC,aAAa,EAAE,IAAI,CACjB,sBAAsB,CAAC,CAAC,CAAC,EACzB,cAAc,GAAG,kBAAkB,CACpC,GACC,IAAI,CACF,+BAA+B,CAAC,CAAC,CAAC,EAClC,sBAAsB,GAAG,oBAAoB,CAC9C,GAAG;QACF,mCAAmC;QACnC,MAAM,EAAE,OAAO,CAAA;QACf,SAAS,EAAE,OAAO,CAAA;QAClB,UAAU,EAAE,OAAO,CAAA;QACnB,UAAU,EAAE,OAAO,CAAA;KACpB,CAAA;IAEH,0FAA0F;IAC1F,WAAW,EAAE,UAAU,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAA;IAC1E,2DAA2D;IAC3D,gBAAgB,EAAE,aAAa,CAAA;IAC/B,6DAA6D;IAC7D,iBAAiB,EAAE,aAAa,CAAA;IAEhC,cAAc,EAAE,WAAW,CAAC,WAAW,EAAE,OAAO,CAAC,CAAA;
|
|
1
|
+
{"version":3,"file":"use-tag-field.d.ts","sourceRoot":"","sources":["../../../src/tag-field/use-tag-field.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,SAAS,EACT,gBAAgB,EACjB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAC1D,OAAO,KAAK,EACV,sBAAsB,EACtB,sBAAsB,EACtB,+BAA+B,EAChC,MAAM,WAAW,CAAA;AAClB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAChD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAQ5C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAC5C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAE1D,MAAM,WAAW,mBAAmB,CAAC,CAAC,CACpC,SAAQ,WAAW,CACjB,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,EAClC,WAAW,GAAG,YAAY,CAC3B;IACD,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAA;IAC7C,qCAAqC;IACrC,QAAQ,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAA;IAC5C,gCAAgC;IAChC,UAAU,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IACzC,+DAA+D;IAC/D,SAAS,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAA;CAChD;AAED,MAAM,WAAW,YAAY,CAAC,CAAC,CAAE,SAAQ,gBAAgB;IACvD,mCAAmC;IACnC,UAAU,EAAE,aAAa,CAAA;IACzB,6CAA6C;IAC7C,UAAU,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAA;IACjD,6BAA6B;IAC7B,YAAY,EAAE,UAAU,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAA;IAEnE,wCAAwC;IACxC,aAAa,EAAE,IAAI,CACjB,sBAAsB,CAAC,CAAC,CAAC,EACzB,cAAc,GAAG,kBAAkB,CACpC,GACC,IAAI,CACF,+BAA+B,CAAC,CAAC,CAAC,EAClC,sBAAsB,GAAG,oBAAoB,CAC9C,GAAG;QACF,mCAAmC;QACnC,MAAM,EAAE,OAAO,CAAA;QACf,SAAS,EAAE,OAAO,CAAA;QAClB,UAAU,EAAE,OAAO,CAAA;QACnB,UAAU,EAAE,OAAO,CAAA;KACpB,CAAA;IAEH,0FAA0F;IAC1F,WAAW,EAAE,UAAU,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAA;IAC1E,2DAA2D;IAC3D,gBAAgB,EAAE,aAAa,CAAA;IAC/B,6DAA6D;IAC7D,iBAAiB,EAAE,aAAa,CAAA;IAEhC,cAAc,EAAE,WAAW,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,IAAI,CAAA;CACzD;AAUD;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAC3B,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,EAC7B,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,GACtB,YAAY,CAAC,CAAC,CAAC,CA2MjB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/tooltip/tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,YAAY,IAAI,gBAAgB,EAChC,kBAAkB,EAClB,4BAA4B,EAC7B,MAAM,uBAAuB,CAAA;AAO9B,OAAO,KAAK,EACV,6BAA6B,EAC7B,YAAY,EACZ,mBAAmB,EACpB,MAAM,sBAAsB,CAAA;
|
|
1
|
+
{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/tooltip/tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,YAAY,IAAI,gBAAgB,EAChC,kBAAkB,EAClB,4BAA4B,EAC7B,MAAM,uBAAuB,CAAA;AAO9B,OAAO,KAAK,EACV,6BAA6B,EAC7B,YAAY,EACZ,mBAAmB,EACpB,MAAM,sBAAsB,CAAA;AAM7B,MAAM,WAAW,YACf,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,EACxC,mBAAmB;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB,UAAU,CAAC,EAAE,6BAA6B,CAAC,YAAY,EAAE,kBAAkB,CAAC,CAAA;CAC7E;AAED,wBAAgB,OAAO,CAAC,aAAa,EAAE,YAAY,2CA2ClD;AAGD,MAAM,WAAW,mBAAoB,SAAQ,4BAA4B;CAAG;AAE5E,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,2CAExD"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@opengovsg/oui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.48",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"type": "module",
|
|
@@ -50,8 +50,8 @@
|
|
|
50
50
|
"storybook": "10.1.10",
|
|
51
51
|
"tsx": "^4.21.0",
|
|
52
52
|
"typescript": "5.7.3",
|
|
53
|
-
"@opengovsg/oui-theme": "0.0.46",
|
|
54
53
|
"@oui/chromatic": "0.0.0",
|
|
54
|
+
"@opengovsg/oui-theme": "0.0.48",
|
|
55
55
|
"@oui/eslint-config": "0.0.0",
|
|
56
56
|
"@oui/prettier-config": "0.0.0",
|
|
57
57
|
"@oui/typescript-config": "0.0.0"
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
"motion": ">=11.12.0 || >=12.0.0-alpha.1",
|
|
91
91
|
"react": ">= 18",
|
|
92
92
|
"react-aria-components": "^1.14.0",
|
|
93
|
-
"@opengovsg/oui-theme": "0.0.
|
|
93
|
+
"@opengovsg/oui-theme": "0.0.48"
|
|
94
94
|
},
|
|
95
95
|
"scripts": {
|
|
96
96
|
"build": "tsx ../../tooling/build-scripts/main.ts --dts --clean",
|