@opengovsg/oui 0.0.51 → 0.0.52
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/button/button.cjs +1 -0
- package/dist/cjs/search-field/search-field.cjs +44 -34
- package/dist/esm/button/button.js +1 -0
- package/dist/esm/search-field/search-field.js +45 -35
- package/dist/types/button/button.d.ts.map +1 -1
- package/dist/types/search-field/search-field.d.ts +4 -0
- package/dist/types/search-field/search-field.d.ts.map +1 -1
- package/package.json +4 -4
|
@@ -23,6 +23,7 @@ function SearchField(originalProps) {
|
|
|
23
23
|
inputProps,
|
|
24
24
|
classNames,
|
|
25
25
|
clearIcon,
|
|
26
|
+
actionElement,
|
|
26
27
|
...props
|
|
27
28
|
},
|
|
28
29
|
variantProps
|
|
@@ -50,40 +51,49 @@ function SearchField(originalProps) {
|
|
|
50
51
|
children: label
|
|
51
52
|
}
|
|
52
53
|
),
|
|
53
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
{
|
|
57
|
-
|
|
58
|
-
className: styles.
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
54
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
55
|
+
"div",
|
|
56
|
+
{
|
|
57
|
+
className: styles.fieldWrapper({ className: classNames?.fieldWrapper }),
|
|
58
|
+
children: [
|
|
59
|
+
/* @__PURE__ */ jsxRuntime.jsxs(field.FieldGroup, { className: styles.group({ className: classNames?.group }), children: [
|
|
60
|
+
searchIcon !== null && (searchIcon === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
61
|
+
search.default,
|
|
62
|
+
{
|
|
63
|
+
"aria-hidden": true,
|
|
64
|
+
className: styles.searchIcon({
|
|
65
|
+
className: classNames?.searchIcon
|
|
66
|
+
})
|
|
67
|
+
}
|
|
68
|
+
) : searchIcon),
|
|
69
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
70
|
+
input.Input,
|
|
71
|
+
{
|
|
72
|
+
size: variantProps.size,
|
|
73
|
+
variant: "unstyled",
|
|
74
|
+
className: styles.input({ className: classNames?.input }),
|
|
75
|
+
...inputProps
|
|
76
|
+
}
|
|
77
|
+
),
|
|
78
|
+
clearIcon !== null && /* @__PURE__ */ jsxRuntime.jsx(
|
|
79
|
+
button.Button,
|
|
80
|
+
{
|
|
81
|
+
isIconOnly: true,
|
|
82
|
+
isAttached: true,
|
|
83
|
+
variant: "clear",
|
|
84
|
+
color: "sub",
|
|
85
|
+
size: variantProps.size,
|
|
86
|
+
className: styles.clearButton({
|
|
87
|
+
className: classNames?.clearButton
|
|
88
|
+
}),
|
|
89
|
+
children: clearIcon ?? /* @__PURE__ */ jsxRuntime.jsx(x.default, { "aria-hidden": true })
|
|
90
|
+
}
|
|
91
|
+
)
|
|
92
|
+
] }),
|
|
93
|
+
actionElement && /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.ButtonContext.Provider, { value: {}, children: actionElement })
|
|
94
|
+
]
|
|
95
|
+
}
|
|
96
|
+
),
|
|
87
97
|
description && /* @__PURE__ */ jsxRuntime.jsx(field.Description, { size: variantProps.size, children: description }),
|
|
88
98
|
/* @__PURE__ */ jsxRuntime.jsx(field.FieldError, { size: variantProps.size, children: errorMessage })
|
|
89
99
|
]
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { useLocalizedStringFormatter } from 'react-aria';
|
|
4
|
-
import { SearchField as SearchField$1 } from 'react-aria-components';
|
|
4
|
+
import { SearchField as SearchField$1, ButtonContext } from 'react-aria-components';
|
|
5
5
|
import { searchFieldStyles, composeRenderProps } from '@opengovsg/oui-theme';
|
|
6
6
|
import { Button } from '../button/button.js';
|
|
7
7
|
import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
|
|
@@ -21,6 +21,7 @@ function SearchField(originalProps) {
|
|
|
21
21
|
inputProps,
|
|
22
22
|
classNames,
|
|
23
23
|
clearIcon,
|
|
24
|
+
actionElement,
|
|
24
25
|
...props
|
|
25
26
|
},
|
|
26
27
|
variantProps
|
|
@@ -48,40 +49,49 @@ function SearchField(originalProps) {
|
|
|
48
49
|
children: label
|
|
49
50
|
}
|
|
50
51
|
),
|
|
51
|
-
/* @__PURE__ */ jsxs(
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
{
|
|
55
|
-
|
|
56
|
-
className: styles.
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
52
|
+
/* @__PURE__ */ jsxs(
|
|
53
|
+
"div",
|
|
54
|
+
{
|
|
55
|
+
className: styles.fieldWrapper({ className: classNames?.fieldWrapper }),
|
|
56
|
+
children: [
|
|
57
|
+
/* @__PURE__ */ jsxs(FieldGroup, { className: styles.group({ className: classNames?.group }), children: [
|
|
58
|
+
searchIcon !== null && (searchIcon === void 0 ? /* @__PURE__ */ jsx(
|
|
59
|
+
Search,
|
|
60
|
+
{
|
|
61
|
+
"aria-hidden": true,
|
|
62
|
+
className: styles.searchIcon({
|
|
63
|
+
className: classNames?.searchIcon
|
|
64
|
+
})
|
|
65
|
+
}
|
|
66
|
+
) : searchIcon),
|
|
67
|
+
/* @__PURE__ */ jsx(
|
|
68
|
+
Input,
|
|
69
|
+
{
|
|
70
|
+
size: variantProps.size,
|
|
71
|
+
variant: "unstyled",
|
|
72
|
+
className: styles.input({ className: classNames?.input }),
|
|
73
|
+
...inputProps
|
|
74
|
+
}
|
|
75
|
+
),
|
|
76
|
+
clearIcon !== null && /* @__PURE__ */ jsx(
|
|
77
|
+
Button,
|
|
78
|
+
{
|
|
79
|
+
isIconOnly: true,
|
|
80
|
+
isAttached: true,
|
|
81
|
+
variant: "clear",
|
|
82
|
+
color: "sub",
|
|
83
|
+
size: variantProps.size,
|
|
84
|
+
className: styles.clearButton({
|
|
85
|
+
className: classNames?.clearButton
|
|
86
|
+
}),
|
|
87
|
+
children: clearIcon ?? /* @__PURE__ */ jsx(X, { "aria-hidden": true })
|
|
88
|
+
}
|
|
89
|
+
)
|
|
90
|
+
] }),
|
|
91
|
+
actionElement && /* @__PURE__ */ jsx(ButtonContext.Provider, { value: {}, children: actionElement })
|
|
92
|
+
]
|
|
93
|
+
}
|
|
94
|
+
),
|
|
85
95
|
description && /* @__PURE__ */ jsx(Description, { size: variantProps.size, children: description }),
|
|
86
96
|
/* @__PURE__ */ jsx(FieldError, { size: variantProps.size, children: errorMessage })
|
|
87
97
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/button/button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,WAAW,IAAI,eAAe,EAC9B,WAAW,EACZ,MAAM,uBAAuB,CAAA;AAK9B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAQ9D,MAAM,WAAW,WAAY,SAAQ,eAAe,EAAE,kBAAkB;IACtE;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;OAEG;IACH,YAAY,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC,CAAA;IACnD;;OAEG;IACH,UAAU,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC,CAAA;IACjD;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC,CAAA;IAE9C;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;;OAGG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC,CAAA;IAErD;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IAElC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/button/button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,WAAW,IAAI,eAAe,EAC9B,WAAW,EACZ,MAAM,uBAAuB,CAAA;AAK9B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAQ9D,MAAM,WAAW,WAAY,SAAQ,eAAe,EAAE,kBAAkB;IACtE;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;OAEG;IACH,YAAY,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC,CAAA;IACnD;;OAEG;IACH,UAAU,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC,CAAA;IACjD;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC,CAAA;IAE9C;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;;OAGG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC,CAAA;IAErD;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IAElC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM,2GAyFlB,CAAA"}
|
|
@@ -2,6 +2,10 @@ import type { SearchFieldProps as AriaSearchFieldProps, ValidationResult } from
|
|
|
2
2
|
import type { SearchFieldSlots, SearchFieldVariantProps, SlotsToClasses } from "@opengovsg/oui-theme";
|
|
3
3
|
import type { InputProps } from "../input";
|
|
4
4
|
export interface SearchFieldProps extends AriaSearchFieldProps, SearchFieldVariantProps {
|
|
5
|
+
/**
|
|
6
|
+
* The element to display on the right side of the search field. This can be used to add a search button or filter button.
|
|
7
|
+
*/
|
|
8
|
+
actionElement?: React.ReactNode;
|
|
5
9
|
label?: React.ReactNode;
|
|
6
10
|
description?: React.ReactNode;
|
|
7
11
|
errorMessage?: React.ReactNode | ((validation: ValidationResult) => React.ReactNode);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"search-field.d.ts","sourceRoot":"","sources":["../../../src/search-field/search-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,IAAI,oBAAoB,EACxC,gBAAgB,EACjB,MAAM,uBAAuB,CAAA;
|
|
1
|
+
{"version":3,"file":"search-field.d.ts","sourceRoot":"","sources":["../../../src/search-field/search-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,IAAI,oBAAoB,EACxC,gBAAgB,EACjB,MAAM,uBAAuB,CAAA;AAQ9B,OAAO,KAAK,EACV,gBAAgB,EAChB,uBAAuB,EACvB,cAAc,EACf,MAAM,sBAAsB,CAAA;AAG7B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAO1C,MAAM,WAAW,gBACf,SAAQ,oBAAoB,EAC1B,uBAAuB;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,YAAY,CAAC,EACT,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,UAAU,EAAE,gBAAgB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;IACvD;yCACqC;IACrC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAA;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAA;IAChC,UAAU,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAA;IAE7C;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B;AAED,wBAAgB,WAAW,CAAC,aAAa,EAAE,gBAAgB,2CAyF1D"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@opengovsg/oui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.52",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"type": "module",
|
|
@@ -50,10 +50,10 @@
|
|
|
50
50
|
"storybook": "10.1.10",
|
|
51
51
|
"tsx": "^4.21.0",
|
|
52
52
|
"typescript": "5.7.3",
|
|
53
|
+
"@opengovsg/oui-theme": "0.0.52",
|
|
53
54
|
"@oui/chromatic": "0.0.0",
|
|
54
|
-
"@oui/prettier-config": "0.0.0",
|
|
55
55
|
"@oui/eslint-config": "0.0.0",
|
|
56
|
-
"@
|
|
56
|
+
"@oui/prettier-config": "0.0.0",
|
|
57
57
|
"@oui/typescript-config": "0.0.0"
|
|
58
58
|
},
|
|
59
59
|
"dependencies": {
|
|
@@ -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.52"
|
|
94
94
|
},
|
|
95
95
|
"scripts": {
|
|
96
96
|
"build": "tsx ../../tooling/build-scripts/main.ts --dts --clean",
|