@opengovsg/oui 0.0.6 → 0.0.7
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 +1 -1
- package/dist/cjs/combo-box/combo-box.cjs +1 -1
- package/dist/cjs/field/field.cjs +1 -1
- package/dist/cjs/govt-banner/govt-banner.cjs +1 -1
- package/dist/cjs/index.cjs +2 -0
- package/dist/cjs/input/input.cjs +1 -1
- package/dist/cjs/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.cjs +19 -0
- package/dist/cjs/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevrons-up-down.cjs +22 -0
- package/dist/cjs/select/index.cjs +8 -0
- package/dist/cjs/select/select-item.cjs +63 -0
- package/dist/cjs/select/select-variant-context.cjs +12 -0
- package/dist/cjs/select/select.cjs +103 -0
- package/dist/cjs/spinner/use-spinner.cjs +1 -1
- package/dist/cjs/system/react-utils/context.cjs +1 -5
- package/dist/cjs/tag-field/tag-field-list.cjs +1 -1
- package/dist/cjs/tag-field/tag-field.cjs +1 -1
- package/dist/cjs/tag-field/use-tag-field.cjs +1 -0
- package/dist/cjs/text-area/text-area.cjs +1 -1
- 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 +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 +1 -1
- package/dist/esm/combo-box/combo-box.js +1 -1
- package/dist/esm/field/field.js +1 -1
- package/dist/esm/govt-banner/govt-banner.js +1 -1
- package/dist/esm/index.js +1 -0
- package/dist/esm/input/input.js +1 -1
- package/dist/esm/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.js +14 -0
- package/dist/esm/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevrons-up-down.js +17 -0
- package/dist/esm/select/index.js +2 -0
- package/dist/esm/select/select-item.js +61 -0
- package/dist/esm/select/select-variant-context.js +9 -0
- package/dist/esm/select/select.js +101 -0
- package/dist/esm/spinner/use-spinner.js +1 -1
- package/dist/esm/system/react-utils/context.js +1 -5
- package/dist/esm/tag-field/tag-field-list.js +1 -1
- package/dist/esm/tag-field/tag-field.js +1 -1
- package/dist/esm/tag-field/use-tag-field.js +1 -0
- package/dist/esm/text-area/text-area.js +1 -1
- 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 +1 -1
- package/dist/types/banner/banner.d.ts +4 -3
- package/dist/types/banner/banner.d.ts.map +1 -1
- package/dist/types/button/button.d.ts +2 -11
- package/dist/types/button/button.d.ts.map +1 -1
- package/dist/types/combo-box/combo-box-fuzzy.d.ts +4 -3
- package/dist/types/combo-box/combo-box-fuzzy.d.ts.map +1 -1
- package/dist/types/combo-box/combo-box.d.ts +3 -3
- package/dist/types/combo-box/combo-box.d.ts.map +1 -1
- package/dist/types/field/field.d.ts +2 -2
- package/dist/types/field/field.d.ts.map +1 -1
- package/dist/types/govt-banner/govt-banner.d.ts +1 -1
- package/dist/types/govt-banner/govt-banner.d.ts.map +1 -1
- package/dist/types/index.d.mts +1 -0
- package/dist/types/index.d.ts +1 -0
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/input/input.d.ts +3 -2
- package/dist/types/input/input.d.ts.map +1 -1
- package/dist/types/select/index.d.ts +2 -0
- package/dist/types/select/index.d.ts.map +1 -0
- package/dist/types/select/select-item.d.ts +9 -0
- package/dist/types/select/select-item.d.ts.map +1 -0
- package/dist/types/select/select-variant-context.d.ts +4 -0
- package/dist/types/select/select-variant-context.d.ts.map +1 -0
- package/dist/types/select/select.d.ts +17 -0
- package/dist/types/select/select.d.ts.map +1 -0
- package/dist/types/skip-nav-link/skip-nav-link.d.ts +3 -2
- package/dist/types/skip-nav-link/skip-nav-link.d.ts.map +1 -1
- package/dist/types/spinner/use-spinner.d.ts +1 -1
- package/dist/types/spinner/use-spinner.d.ts.map +1 -1
- package/dist/types/system/react-utils/context.d.ts +1 -5
- package/dist/types/system/react-utils/context.d.ts.map +1 -1
- package/dist/types/system/types.d.ts +1 -1
- package/dist/types/system/types.d.ts.map +1 -1
- package/dist/types/system/utils.d.ts +2 -2
- package/dist/types/system/utils.d.ts.map +1 -1
- package/dist/types/tag-field/tag-field-list.d.ts +6 -6
- package/dist/types/tag-field/tag-field-list.d.ts.map +1 -1
- package/dist/types/tag-field/tag-field-root.d.ts +3 -3
- package/dist/types/tag-field/tag-field-root.d.ts.map +1 -1
- package/dist/types/tag-field/tag-field-state-context.d.ts +2 -2
- package/dist/types/tag-field/tag-field-state-context.d.ts.map +1 -1
- package/dist/types/tag-field/tag-field-tag-list.d.ts +3 -3
- package/dist/types/tag-field/tag-field-tag-list.d.ts.map +1 -1
- package/dist/types/tag-field/tag-field-trigger.d.ts +2 -2
- package/dist/types/tag-field/tag-field-trigger.d.ts.map +1 -1
- package/dist/types/tag-field/tag-field.d.ts +1 -1
- package/dist/types/tag-field/tag-field.d.ts.map +1 -1
- package/dist/types/tag-field/types.d.ts +2 -2
- package/dist/types/tag-field/types.d.ts.map +1 -1
- package/dist/types/tag-field/use-tag-field-state.d.ts +4 -4
- package/dist/types/tag-field/use-tag-field-state.d.ts.map +1 -1
- package/dist/types/tag-field/use-tag-field.d.ts +7 -7
- package/dist/types/tag-field/use-tag-field.d.ts.map +1 -1
- package/dist/types/text-area/text-area.d.ts +3 -2
- package/dist/types/text-area/text-area.d.ts.map +1 -1
- package/dist/types/text-area-field/text-area-field.d.ts +3 -3
- package/dist/types/text-area-field/text-area-field.d.ts.map +1 -1
- package/dist/types/text-field/text-field.d.ts +3 -3
- package/dist/types/text-field/text-field.d.ts.map +1 -1
- package/dist/types/toggle/toggle.d.ts +3 -2
- package/dist/types/toggle/toggle.d.ts.map +1 -1
- package/package.json +4 -4
|
@@ -4,9 +4,9 @@
|
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var react = require('react');
|
|
7
|
-
var ouiTheme = require('@opengovsg/oui-theme');
|
|
8
7
|
var reactAria = require('react-aria');
|
|
9
8
|
var reactStately = require('react-stately');
|
|
9
|
+
var ouiTheme = require('@opengovsg/oui-theme');
|
|
10
10
|
var circleAlert = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/circle-alert.cjs');
|
|
11
11
|
var info = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/info.cjs');
|
|
12
12
|
var button = require('../button/button.cjs');
|
|
@@ -4,9 +4,9 @@
|
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var react = require('react');
|
|
7
|
-
var ouiTheme = require('@opengovsg/oui-theme');
|
|
8
7
|
var utils = require('@react-aria/utils');
|
|
9
8
|
var reactAriaComponents = require('react-aria-components');
|
|
9
|
+
var ouiTheme = require('@opengovsg/oui-theme');
|
|
10
10
|
var useRipple = require('../ripple/use-ripple.cjs');
|
|
11
11
|
var spinner = require('../spinner/spinner.cjs');
|
|
12
12
|
var ripple = require('../ripple/ripple.cjs');
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var react = require('react');
|
|
7
|
-
var ouiTheme = require('@opengovsg/oui-theme');
|
|
8
7
|
var fuzzysort = require('fuzzysort');
|
|
8
|
+
var ouiTheme = require('@opengovsg/oui-theme');
|
|
9
9
|
var comboBox = require('./combo-box.cjs');
|
|
10
10
|
|
|
11
11
|
function HighlightedText({
|
|
@@ -4,9 +4,9 @@
|
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var react = require('react');
|
|
7
|
-
var ouiTheme = require('@opengovsg/oui-theme');
|
|
8
7
|
var reactAria = require('react-aria');
|
|
9
8
|
var reactAriaComponents = require('react-aria-components');
|
|
9
|
+
var ouiTheme = require('@opengovsg/oui-theme');
|
|
10
10
|
var field = require('../field/field.cjs');
|
|
11
11
|
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');
|
|
12
12
|
var chevronDown = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.cjs');
|
package/dist/cjs/field/field.cjs
CHANGED
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
'use strict';
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var ouiTheme = require('@opengovsg/oui-theme');
|
|
7
6
|
var reactAriaComponents = require('react-aria-components');
|
|
7
|
+
var ouiTheme = require('@opengovsg/oui-theme');
|
|
8
8
|
var circleAlert = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/circle-alert.cjs');
|
|
9
9
|
|
|
10
10
|
function Label({ size, className, ...props }) {
|
|
@@ -4,9 +4,9 @@
|
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var react = require('react');
|
|
7
|
-
var ouiTheme = require('@opengovsg/oui-theme');
|
|
8
7
|
var reactAria = require('react-aria');
|
|
9
8
|
var reactStately = require('react-stately');
|
|
9
|
+
var ouiTheme = require('@opengovsg/oui-theme');
|
|
10
10
|
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');
|
|
11
11
|
var landmark = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/landmark.cjs');
|
|
12
12
|
var externalLink = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/external-link.cjs');
|
package/dist/cjs/index.cjs
CHANGED
|
@@ -19,6 +19,7 @@ var comboBox = require('./combo-box/combo-box.cjs');
|
|
|
19
19
|
var comboBoxFuzzy = require('./combo-box/combo-box-fuzzy.cjs');
|
|
20
20
|
var banner = require('./banner/banner.cjs');
|
|
21
21
|
var tagField = require('./tag-field/tag-field.cjs');
|
|
22
|
+
var select = require('./select/select.cjs');
|
|
22
23
|
|
|
23
24
|
|
|
24
25
|
|
|
@@ -45,3 +46,4 @@ exports.ComboBoxItem = comboBox.ComboBoxItem;
|
|
|
45
46
|
exports.ComboBoxFuzzy = comboBoxFuzzy.ComboBoxFuzzy;
|
|
46
47
|
exports.Banner = banner.Banner;
|
|
47
48
|
exports.TagField = tagField.TagField;
|
|
49
|
+
exports.Select = select.Select;
|
package/dist/cjs/input/input.cjs
CHANGED
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var react = require('react');
|
|
7
|
-
var ouiTheme = require('@opengovsg/oui-theme');
|
|
8
7
|
var reactAriaComponents = require('react-aria-components');
|
|
8
|
+
var ouiTheme = require('@opengovsg/oui-theme');
|
|
9
9
|
|
|
10
10
|
const Input = react.forwardRef(
|
|
11
11
|
({ size, variant, isDisabled, ...props }, ref) => {
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var createLucideIcon = require('../createLucideIcon.cjs');
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* @license lucide-react v0.475.0 - ISC
|
|
9
|
+
*
|
|
10
|
+
* This source code is licensed under the ISC license.
|
|
11
|
+
* See the LICENSE file in the root directory of this source tree.
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
const __iconNode = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
|
|
16
|
+
const Check = createLucideIcon.default("Check", __iconNode);
|
|
17
|
+
|
|
18
|
+
exports.__iconNode = __iconNode;
|
|
19
|
+
exports.default = Check;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var createLucideIcon = require('../createLucideIcon.cjs');
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* @license lucide-react v0.475.0 - ISC
|
|
9
|
+
*
|
|
10
|
+
* This source code is licensed under the ISC license.
|
|
11
|
+
* See the LICENSE file in the root directory of this source tree.
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
const __iconNode = [
|
|
16
|
+
["path", { d: "m7 15 5 5 5-5", key: "1hf1tw" }],
|
|
17
|
+
["path", { d: "m7 9 5-5 5 5", key: "sgt6xg" }]
|
|
18
|
+
];
|
|
19
|
+
const ChevronsUpDown = createLucideIcon.default("ChevronsUpDown", __iconNode);
|
|
20
|
+
|
|
21
|
+
exports.__iconNode = __iconNode;
|
|
22
|
+
exports.default = ChevronsUpDown;
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
+
var reactAriaComponents = require('react-aria-components');
|
|
6
|
+
var ouiTheme = require('@opengovsg/oui-theme');
|
|
7
|
+
var utils = require('../system/utils.cjs');
|
|
8
|
+
var selectVariantContext = require('./select-variant-context.cjs');
|
|
9
|
+
var check = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.cjs');
|
|
10
|
+
|
|
11
|
+
const SelectItem = utils.forwardRef(function SelectItem2({ classNames, ...originalProps }, ref) {
|
|
12
|
+
[originalProps, ref] = reactAriaComponents.useContextProps(
|
|
13
|
+
originalProps,
|
|
14
|
+
ref,
|
|
15
|
+
selectVariantContext.SelectVariantContext
|
|
16
|
+
);
|
|
17
|
+
const [props, variantProps] = utils.mapPropsVariants(
|
|
18
|
+
originalProps,
|
|
19
|
+
ouiTheme.selectItemStyles.variantKeys
|
|
20
|
+
);
|
|
21
|
+
const styles = ouiTheme.selectItemStyles(variantProps);
|
|
22
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
23
|
+
reactAriaComponents.ListBoxItem,
|
|
24
|
+
{
|
|
25
|
+
...props,
|
|
26
|
+
ref,
|
|
27
|
+
className: ouiTheme.composeRenderProps(
|
|
28
|
+
props.className ?? classNames?.base,
|
|
29
|
+
(className, renderProps) => styles.base({ className, ...renderProps })
|
|
30
|
+
),
|
|
31
|
+
children: (renderProps) => {
|
|
32
|
+
if (typeof props.children === "function") {
|
|
33
|
+
return props.children(renderProps);
|
|
34
|
+
}
|
|
35
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
36
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
37
|
+
"span",
|
|
38
|
+
{
|
|
39
|
+
className: styles.text({
|
|
40
|
+
className: classNames?.text,
|
|
41
|
+
...renderProps
|
|
42
|
+
}),
|
|
43
|
+
children: props.children
|
|
44
|
+
}
|
|
45
|
+
),
|
|
46
|
+
renderProps.isSelected && /* @__PURE__ */ jsxRuntime.jsx(
|
|
47
|
+
"span",
|
|
48
|
+
{
|
|
49
|
+
"aria-hidden": true,
|
|
50
|
+
className: styles.icon({
|
|
51
|
+
className: classNames?.icon,
|
|
52
|
+
...renderProps
|
|
53
|
+
}),
|
|
54
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(check.default, {})
|
|
55
|
+
}
|
|
56
|
+
)
|
|
57
|
+
] });
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
);
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
exports.SelectItem = SelectItem;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var context = require('../system/react-utils/context.cjs');
|
|
5
|
+
|
|
6
|
+
const [SelectVariantContext, useSelectVariantContext] = context.createContext({
|
|
7
|
+
name: "SelectVariantContext",
|
|
8
|
+
strict: true
|
|
9
|
+
});
|
|
10
|
+
|
|
11
|
+
exports.SelectVariantContext = SelectVariantContext;
|
|
12
|
+
exports.useSelectVariantContext = useSelectVariantContext;
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
'use strict';
|
|
4
|
+
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var react = require('react');
|
|
7
|
+
var reactAriaComponents = require('react-aria-components');
|
|
8
|
+
var ouiTheme = require('@opengovsg/oui-theme');
|
|
9
|
+
var utils = require('../system/utils.cjs');
|
|
10
|
+
var selectVariantContext = require('./select-variant-context.cjs');
|
|
11
|
+
var chevronsUpDown = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevrons-up-down.cjs');
|
|
12
|
+
var field = require('../field/field.cjs');
|
|
13
|
+
var button = require('../button/button.cjs');
|
|
14
|
+
|
|
15
|
+
const calculateEstimatedRowHeight = (size) => {
|
|
16
|
+
switch (size) {
|
|
17
|
+
case "xs":
|
|
18
|
+
return 44;
|
|
19
|
+
case "sm":
|
|
20
|
+
return 44;
|
|
21
|
+
case "md":
|
|
22
|
+
return 48;
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
function Select({
|
|
26
|
+
label,
|
|
27
|
+
description,
|
|
28
|
+
classNames,
|
|
29
|
+
...originalProps
|
|
30
|
+
}) {
|
|
31
|
+
const [_props, variantProps] = utils.mapPropsVariants(
|
|
32
|
+
originalProps,
|
|
33
|
+
ouiTheme.selectStyles.variantKeys
|
|
34
|
+
);
|
|
35
|
+
const { items, children, listLayoutOptions, ...props } = _props;
|
|
36
|
+
const styles = ouiTheme.selectStyles(variantProps);
|
|
37
|
+
const layout = react.useMemo(() => {
|
|
38
|
+
return new reactAriaComponents.ListLayout({
|
|
39
|
+
estimatedRowHeight: calculateEstimatedRowHeight(
|
|
40
|
+
variantProps.size ?? "md"
|
|
41
|
+
),
|
|
42
|
+
...listLayoutOptions
|
|
43
|
+
});
|
|
44
|
+
}, [listLayoutOptions, variantProps.size]);
|
|
45
|
+
return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Provider, { values: [[selectVariantContext.SelectVariantContext, variantProps]], children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
46
|
+
reactAriaComponents.Select,
|
|
47
|
+
{
|
|
48
|
+
className: ouiTheme.composeRenderProps(
|
|
49
|
+
props.className,
|
|
50
|
+
(className, renderProps) => styles.base({ className, ...renderProps })
|
|
51
|
+
),
|
|
52
|
+
...props,
|
|
53
|
+
children: [
|
|
54
|
+
label && /* @__PURE__ */ jsxRuntime.jsx(field.Label, { size: variantProps.size, className: classNames?.label, children: label }),
|
|
55
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
56
|
+
button.Button,
|
|
57
|
+
{
|
|
58
|
+
size: variantProps.size,
|
|
59
|
+
variant: variantProps.variant ?? ouiTheme.selectStyles.defaultVariants.variant,
|
|
60
|
+
color: variantProps.color ?? ouiTheme.selectStyles.defaultVariants.color,
|
|
61
|
+
className: ouiTheme.composeRenderProps(
|
|
62
|
+
classNames?.trigger,
|
|
63
|
+
(className, renderProps) => styles.trigger({ className, ...renderProps })
|
|
64
|
+
),
|
|
65
|
+
children: [
|
|
66
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
67
|
+
reactAriaComponents.SelectValue,
|
|
68
|
+
{
|
|
69
|
+
className: styles.selectedText({
|
|
70
|
+
className: classNames?.selectedText
|
|
71
|
+
})
|
|
72
|
+
}
|
|
73
|
+
),
|
|
74
|
+
/* @__PURE__ */ jsxRuntime.jsx(chevronsUpDown.default, { className: "h-4 w-4" })
|
|
75
|
+
]
|
|
76
|
+
}
|
|
77
|
+
),
|
|
78
|
+
description && /* @__PURE__ */ jsxRuntime.jsx(
|
|
79
|
+
field.Description,
|
|
80
|
+
{
|
|
81
|
+
size: variantProps.size,
|
|
82
|
+
className: classNames?.description,
|
|
83
|
+
children: description
|
|
84
|
+
}
|
|
85
|
+
),
|
|
86
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Popover, { className: styles.popover({ className: classNames?.popover }), children: /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Virtualizer, { layout, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
87
|
+
reactAriaComponents.ListBox,
|
|
88
|
+
{
|
|
89
|
+
items,
|
|
90
|
+
shouldFocusWrap: true,
|
|
91
|
+
className: ouiTheme.composeRenderProps(
|
|
92
|
+
classNames?.list,
|
|
93
|
+
(className, renderProps) => styles.list({ className, ...renderProps })
|
|
94
|
+
),
|
|
95
|
+
children
|
|
96
|
+
}
|
|
97
|
+
) }) })
|
|
98
|
+
]
|
|
99
|
+
}
|
|
100
|
+
) });
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
exports.Select = Select;
|
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
'use strict';
|
|
4
4
|
|
|
5
5
|
var react = require('react');
|
|
6
|
-
var ouiTheme = require('@opengovsg/oui-theme');
|
|
7
6
|
var useDeepCompare = require('use-deep-compare');
|
|
7
|
+
var ouiTheme = require('@opengovsg/oui-theme');
|
|
8
8
|
var utils = require('../system/utils.cjs');
|
|
9
9
|
|
|
10
10
|
const useSpinner = (originalProps) => {
|
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
|
|
4
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
5
|
var react = require('react');
|
|
6
|
-
var ouiTheme = require('@opengovsg/oui-theme');
|
|
7
6
|
var reactAriaComponents = require('react-aria-components');
|
|
7
|
+
var ouiTheme = require('@opengovsg/oui-theme');
|
|
8
8
|
var utils = require('../system/utils.cjs');
|
|
9
9
|
var tagFieldStateContext = require('./tag-field-state-context.cjs');
|
|
10
10
|
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var react = require('react');
|
|
7
|
-
var ouiTheme = require('@opengovsg/oui-theme');
|
|
8
7
|
var reactAriaComponents = require('react-aria-components');
|
|
8
|
+
var ouiTheme = require('@opengovsg/oui-theme');
|
|
9
9
|
var tagFieldList = require('./tag-field-list.cjs');
|
|
10
10
|
var tagFieldRoot = require('./tag-field-root.cjs');
|
|
11
11
|
var tagFieldTagList = require('./tag-field-tag-list.cjs');
|
|
@@ -127,6 +127,7 @@ function useTagField(props, state) {
|
|
|
127
127
|
});
|
|
128
128
|
const { isInvalid, validationErrors, validationDetails } = state.displayValidation;
|
|
129
129
|
const inputProps = getInputProps({
|
|
130
|
+
placeholder: props.placeholder,
|
|
130
131
|
ref: inputRef,
|
|
131
132
|
"aria-label": props["aria-label"],
|
|
132
133
|
"aria-labelledby": props["aria-labelledby"],
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var react = require('react');
|
|
7
|
-
var ouiTheme = require('@opengovsg/oui-theme');
|
|
8
7
|
var reactAriaComponents = require('react-aria-components');
|
|
8
|
+
var ouiTheme = require('@opengovsg/oui-theme');
|
|
9
9
|
|
|
10
10
|
const TextArea = react.forwardRef(
|
|
11
11
|
({ size, variant, isDisabled, ...props }, ref) => {
|
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
'use strict';
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var ouiTheme = require('@opengovsg/oui-theme');
|
|
7
6
|
var reactAriaComponents = require('react-aria-components');
|
|
7
|
+
var ouiTheme = require('@opengovsg/oui-theme');
|
|
8
8
|
var textArea = require('../text-area/text-area.cjs');
|
|
9
9
|
var field = require('../field/field.cjs');
|
|
10
10
|
|
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
'use strict';
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var ouiTheme = require('@opengovsg/oui-theme');
|
|
7
6
|
var reactAriaComponents = require('react-aria-components');
|
|
7
|
+
var ouiTheme = require('@opengovsg/oui-theme');
|
|
8
8
|
var input = require('../input/input.cjs');
|
|
9
9
|
var field = require('../field/field.cjs');
|
|
10
10
|
|
|
@@ -4,9 +4,9 @@
|
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var react = require('react');
|
|
7
|
-
var ouiTheme = require('@opengovsg/oui-theme');
|
|
8
7
|
var reactAria = require('react-aria');
|
|
9
8
|
var reactAriaComponents = require('react-aria-components');
|
|
9
|
+
var ouiTheme = require('@opengovsg/oui-theme');
|
|
10
10
|
var utils = require('../system/utils.cjs');
|
|
11
11
|
|
|
12
12
|
const Toggle = ({
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"use client";
|
|
3
3
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
4
4
|
import { useMemo, useRef } from 'react';
|
|
5
|
-
import { bannerStyles } from '@opengovsg/oui-theme';
|
|
6
5
|
import { useMessageFormatter, useDisclosure } from 'react-aria';
|
|
7
6
|
import { useDisclosureState } from 'react-stately';
|
|
7
|
+
import { bannerStyles } from '@opengovsg/oui-theme';
|
|
8
8
|
import CircleAlert from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/circle-alert.js';
|
|
9
9
|
import Info from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/info.js';
|
|
10
10
|
import { Button } from '../button/button.js';
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"use client";
|
|
3
3
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
4
4
|
import { forwardRef, useMemo } from 'react';
|
|
5
|
-
import { buttonStyles } from '@opengovsg/oui-theme';
|
|
6
5
|
import { chain } from '@react-aria/utils';
|
|
7
6
|
import { Button as Button$1, composeRenderProps } from 'react-aria-components';
|
|
7
|
+
import { buttonStyles } from '@opengovsg/oui-theme';
|
|
8
8
|
import { useRipple } from '../ripple/use-ripple.js';
|
|
9
9
|
import { Spinner } from '../spinner/spinner.js';
|
|
10
10
|
import { Ripple } from '../ripple/ripple.js';
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
"use client";
|
|
3
3
|
import { jsx } from 'react/jsx-runtime';
|
|
4
4
|
import { useDeferredValue, useMemo, useState, useCallback } from 'react';
|
|
5
|
-
import { comboBoxFuzzyHighlightedTextStyles } from '@opengovsg/oui-theme';
|
|
6
5
|
import fuzzysort from 'fuzzysort';
|
|
6
|
+
import { comboBoxFuzzyHighlightedTextStyles } from '@opengovsg/oui-theme';
|
|
7
7
|
import { ComboBox, ComboBoxItem } from './combo-box.js';
|
|
8
8
|
|
|
9
9
|
function HighlightedText({
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"use client";
|
|
3
3
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
4
4
|
import { useMemo, useCallback } from 'react';
|
|
5
|
-
import { comboBoxItemStyles, cn, comboBoxStyles, composeTailwindRenderProps, composeRenderProps, comboBoxClearButtonStyles } from '@opengovsg/oui-theme';
|
|
6
5
|
import { useMessageFormatter } from 'react-aria';
|
|
7
6
|
import { ListLayout, ComboBox as ComboBox$1, Input, Button, Virtualizer, Popover, ListBox, ListBoxItem, Text } from 'react-aria-components';
|
|
7
|
+
import { comboBoxItemStyles, cn, comboBoxStyles, composeTailwindRenderProps, composeRenderProps, comboBoxClearButtonStyles } from '@opengovsg/oui-theme';
|
|
8
8
|
import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
|
|
9
9
|
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
10
|
import ChevronDown from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.js';
|
package/dist/esm/field/field.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
"use client";
|
|
3
3
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
4
|
-
import { labelStyles, descriptionStyles, fieldErrorStyles, composeRenderProps, fieldGroupStyles } from '@opengovsg/oui-theme';
|
|
5
4
|
import { Label as Label$1, Text, FieldError as FieldError$1, Group } from 'react-aria-components';
|
|
5
|
+
import { labelStyles, descriptionStyles, fieldErrorStyles, composeRenderProps, fieldGroupStyles } from '@opengovsg/oui-theme';
|
|
6
6
|
import CircleAlert from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/circle-alert.js';
|
|
7
7
|
|
|
8
8
|
function Label({ size, className, ...props }) {
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"use client";
|
|
3
3
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
4
4
|
import { useRef } from 'react';
|
|
5
|
-
import { govtBannerStyles, dataAttr, twMerge } from '@opengovsg/oui-theme';
|
|
6
5
|
import { useMessageFormatter, useDisclosure, useButton, useFocusRing, mergeProps } from 'react-aria';
|
|
7
6
|
import { useDisclosureState } from 'react-stately';
|
|
7
|
+
import { govtBannerStyles, dataAttr, twMerge } from '@opengovsg/oui-theme';
|
|
8
8
|
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';
|
|
9
9
|
import Landmark from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/landmark.js';
|
|
10
10
|
import ExternalLink from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/external-link.js';
|
package/dist/esm/index.js
CHANGED
|
@@ -17,3 +17,4 @@ export { ComboBox, ComboBoxEmptyState, ComboBoxItem } from './combo-box/combo-bo
|
|
|
17
17
|
export { ComboBoxFuzzy } from './combo-box/combo-box-fuzzy.js';
|
|
18
18
|
export { Banner } from './banner/banner.js';
|
|
19
19
|
export { TagField } from './tag-field/tag-field.js';
|
|
20
|
+
export { Select } from './select/select.js';
|
package/dist/esm/input/input.js
CHANGED
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
"use client";
|
|
3
3
|
import { jsx } from 'react/jsx-runtime';
|
|
4
4
|
import { forwardRef } from 'react';
|
|
5
|
-
import { composeRenderProps, inputStyles } from '@opengovsg/oui-theme';
|
|
6
5
|
import { Input as Input$1 } from 'react-aria-components';
|
|
6
|
+
import { composeRenderProps, inputStyles } from '@opengovsg/oui-theme';
|
|
7
7
|
|
|
8
8
|
const Input = forwardRef(
|
|
9
9
|
({ size, variant, isDisabled, ...props }, ref) => {
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import createLucideIcon from '../createLucideIcon.js';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @license lucide-react v0.475.0 - ISC
|
|
5
|
+
*
|
|
6
|
+
* This source code is licensed under the ISC license.
|
|
7
|
+
* See the LICENSE file in the root directory of this source tree.
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
const __iconNode = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
|
|
12
|
+
const Check = createLucideIcon("Check", __iconNode);
|
|
13
|
+
|
|
14
|
+
export { __iconNode, Check as default };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import createLucideIcon from '../createLucideIcon.js';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @license lucide-react v0.475.0 - ISC
|
|
5
|
+
*
|
|
6
|
+
* This source code is licensed under the ISC license.
|
|
7
|
+
* See the LICENSE file in the root directory of this source tree.
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
const __iconNode = [
|
|
12
|
+
["path", { d: "m7 15 5 5 5-5", key: "1hf1tw" }],
|
|
13
|
+
["path", { d: "m7 9 5-5 5 5", key: "sgt6xg" }]
|
|
14
|
+
];
|
|
15
|
+
const ChevronsUpDown = createLucideIcon("ChevronsUpDown", __iconNode);
|
|
16
|
+
|
|
17
|
+
export { __iconNode, ChevronsUpDown as default };
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
3
|
+
import { useContextProps, ListBoxItem } from 'react-aria-components';
|
|
4
|
+
import { selectItemStyles, composeRenderProps } from '@opengovsg/oui-theme';
|
|
5
|
+
import { forwardRef, mapPropsVariants } from '../system/utils.js';
|
|
6
|
+
import { SelectVariantContext } from './select-variant-context.js';
|
|
7
|
+
import Check from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.js';
|
|
8
|
+
|
|
9
|
+
const SelectItem = forwardRef(function SelectItem2({ classNames, ...originalProps }, ref) {
|
|
10
|
+
[originalProps, ref] = useContextProps(
|
|
11
|
+
originalProps,
|
|
12
|
+
ref,
|
|
13
|
+
SelectVariantContext
|
|
14
|
+
);
|
|
15
|
+
const [props, variantProps] = mapPropsVariants(
|
|
16
|
+
originalProps,
|
|
17
|
+
selectItemStyles.variantKeys
|
|
18
|
+
);
|
|
19
|
+
const styles = selectItemStyles(variantProps);
|
|
20
|
+
return /* @__PURE__ */ jsx(
|
|
21
|
+
ListBoxItem,
|
|
22
|
+
{
|
|
23
|
+
...props,
|
|
24
|
+
ref,
|
|
25
|
+
className: composeRenderProps(
|
|
26
|
+
props.className ?? classNames?.base,
|
|
27
|
+
(className, renderProps) => styles.base({ className, ...renderProps })
|
|
28
|
+
),
|
|
29
|
+
children: (renderProps) => {
|
|
30
|
+
if (typeof props.children === "function") {
|
|
31
|
+
return props.children(renderProps);
|
|
32
|
+
}
|
|
33
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
34
|
+
/* @__PURE__ */ jsx(
|
|
35
|
+
"span",
|
|
36
|
+
{
|
|
37
|
+
className: styles.text({
|
|
38
|
+
className: classNames?.text,
|
|
39
|
+
...renderProps
|
|
40
|
+
}),
|
|
41
|
+
children: props.children
|
|
42
|
+
}
|
|
43
|
+
),
|
|
44
|
+
renderProps.isSelected && /* @__PURE__ */ jsx(
|
|
45
|
+
"span",
|
|
46
|
+
{
|
|
47
|
+
"aria-hidden": true,
|
|
48
|
+
className: styles.icon({
|
|
49
|
+
className: classNames?.icon,
|
|
50
|
+
...renderProps
|
|
51
|
+
}),
|
|
52
|
+
children: /* @__PURE__ */ jsx(Check, {})
|
|
53
|
+
}
|
|
54
|
+
)
|
|
55
|
+
] });
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
);
|
|
59
|
+
});
|
|
60
|
+
|
|
61
|
+
export { SelectItem };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
import { createContext } from '../system/react-utils/context.js';
|
|
3
|
+
|
|
4
|
+
const [SelectVariantContext, useSelectVariantContext] = createContext({
|
|
5
|
+
name: "SelectVariantContext",
|
|
6
|
+
strict: true
|
|
7
|
+
});
|
|
8
|
+
|
|
9
|
+
export { SelectVariantContext, useSelectVariantContext };
|