@opengovsg/oui 0.0.54 → 0.0.56
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/AGENTS.md +63 -0
- package/dist/cjs/avatar/avatar.cjs +1 -1
- package/dist/cjs/button/button.cjs +8 -3
- package/dist/cjs/calendar/calendar-month-day-selector.cjs +1 -1
- package/dist/cjs/calendar/index.cjs +9 -0
- package/dist/cjs/calendar/{hooks/use-calendar-selectors.cjs → use-calendar-selectors.cjs} +1 -1
- package/dist/cjs/combo-box/combo-box-item.cjs +2 -52
- package/dist/cjs/file-dropzone/file-dropzone.cjs +14 -3
- package/dist/cjs/govt-banner/govt-banner.cjs +63 -143
- package/dist/cjs/hooks/use-scroll-position.cjs +6 -6
- package/dist/cjs/index.cjs +21 -10
- package/dist/cjs/list-box/index.cjs +8 -0
- package/dist/cjs/list-box/list-box.cjs +65 -0
- package/dist/cjs/navbar/index.cjs +6 -6
- package/dist/cjs/navbar/{navbar-menu/item.cjs → navbar-menu-item.cjs} +3 -3
- package/dist/cjs/navbar/{navbar-menu/toggle.cjs → navbar-menu-toggle.cjs} +3 -3
- package/dist/cjs/navbar/{navbar-menu/menu.cjs → navbar-menu.cjs} +4 -4
- package/dist/cjs/navbar/navbar.cjs +3 -3
- package/dist/cjs/navbar/use-navbar.cjs +5 -1
- package/dist/cjs/pagination/index.cjs +2 -2
- package/dist/cjs/pagination/pagination.cjs +18 -18
- package/dist/cjs/pagination/use-pagination.cjs +5 -5
- package/dist/cjs/range-calendar/range-calendar.cjs +1 -1
- package/dist/cjs/tag-field/tag-field-list.cjs +1 -8
- package/dist/esm/avatar/avatar.js +1 -1
- package/dist/esm/button/button.js +8 -3
- package/dist/esm/calendar/calendar-month-day-selector.js +1 -1
- package/dist/esm/calendar/index.js +4 -0
- package/dist/esm/calendar/{hooks/use-calendar-selectors.js → use-calendar-selectors.js} +1 -1
- package/dist/esm/combo-box/combo-box-item.js +5 -55
- package/dist/esm/file-dropzone/file-dropzone.js +14 -3
- package/dist/esm/govt-banner/govt-banner.js +64 -144
- package/dist/esm/hooks/use-scroll-position.js +6 -6
- package/dist/esm/index.js +9 -4
- package/dist/esm/list-box/index.js +2 -0
- package/dist/esm/list-box/list-box.js +63 -0
- package/dist/esm/navbar/index.js +3 -3
- package/dist/esm/navbar/{navbar-menu/item.js → navbar-menu-item.js} +3 -3
- package/dist/esm/navbar/{navbar-menu/toggle.js → navbar-menu-toggle.js} +2 -2
- package/dist/esm/navbar/{navbar-menu/menu.js → navbar-menu.js} +4 -4
- package/dist/esm/navbar/navbar.js +1 -1
- package/dist/esm/navbar/use-navbar.js +6 -2
- package/dist/esm/pagination/index.js +1 -1
- package/dist/esm/pagination/pagination.js +1 -1
- package/dist/esm/pagination/use-pagination.js +1 -1
- package/dist/esm/range-calendar/range-calendar.js +1 -1
- package/dist/esm/tag-field/tag-field-list.js +1 -8
- package/dist/types/avatar/avatar-context.d.ts +1 -1
- package/dist/types/avatar/avatar-context.d.ts.map +1 -1
- package/dist/types/avatar/use-img-loading-status.d.ts.map +1 -0
- package/dist/types/button/button.d.ts +10 -0
- package/dist/types/button/button.d.ts.map +1 -1
- package/dist/types/calendar/index.d.ts +4 -0
- package/dist/types/calendar/index.d.ts.map +1 -1
- package/dist/types/calendar/use-calendar-selectors.d.ts.map +1 -0
- package/dist/types/combo-box/combo-box-item.d.ts +3 -10
- package/dist/types/combo-box/combo-box-item.d.ts.map +1 -1
- package/dist/types/file-dropzone/file-dropzone.d.ts.map +1 -1
- package/dist/types/file-dropzone/utils.d.ts.map +1 -1
- package/dist/types/govt-banner/govt-banner.d.ts +5 -14
- package/dist/types/govt-banner/govt-banner.d.ts.map +1 -1
- package/dist/types/hooks/use-scroll-position.d.ts +4 -2
- package/dist/types/hooks/use-scroll-position.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/list-box/index.d.ts +3 -0
- package/dist/types/list-box/index.d.ts.map +1 -0
- package/dist/types/list-box/list-box.d.ts +11 -0
- package/dist/types/list-box/list-box.d.ts.map +1 -0
- package/dist/types/navbar/index.d.ts +6 -6
- package/dist/types/navbar/index.d.ts.map +1 -1
- package/dist/types/navbar/{navbar-menu/i18n.d.ts → navbar-menu-i18n.d.ts} +1 -1
- package/dist/types/navbar/navbar-menu-i18n.d.ts.map +1 -0
- package/dist/types/navbar/{navbar-menu/item.d.ts → navbar-menu-item.d.ts} +3 -3
- package/dist/types/navbar/navbar-menu-item.d.ts.map +1 -0
- package/dist/types/navbar/{navbar-menu/toggle.d.ts → navbar-menu-toggle.d.ts} +1 -1
- package/dist/types/navbar/navbar-menu-toggle.d.ts.map +1 -0
- package/dist/types/navbar/{navbar-menu/menu.d.ts → navbar-menu.d.ts} +3 -3
- package/dist/types/navbar/navbar-menu.d.ts.map +1 -0
- package/dist/types/navbar/use-navbar.d.ts.map +1 -1
- package/dist/types/pagination/index.d.ts +2 -2
- package/dist/types/pagination/index.d.ts.map +1 -1
- package/dist/types/pagination/pagination.d.ts.map +1 -1
- package/dist/types/pagination/{hooks/use-pagination.d.ts → use-pagination-base.d.ts} +1 -1
- package/dist/types/pagination/use-pagination-base.d.ts.map +1 -0
- package/dist/types/pagination/use-pagination-item.d.ts +1 -1
- package/dist/types/pagination/use-pagination-item.d.ts.map +1 -1
- package/dist/types/pagination/use-pagination.d.ts +1 -1
- package/dist/types/pagination/use-pagination.d.ts.map +1 -1
- package/dist/types/tag-field/tag-field-list.d.ts.map +1 -1
- package/package.json +8 -7
- package/dist/cjs/calendar/hooks/index.cjs +0 -8
- package/dist/esm/calendar/hooks/index.js +0 -2
- package/dist/types/avatar/hooks/use-img-loading-status.d.ts.map +0 -1
- package/dist/types/calendar/hooks/index.d.ts +0 -2
- package/dist/types/calendar/hooks/index.d.ts.map +0 -1
- package/dist/types/calendar/hooks/use-calendar-selectors.d.ts.map +0 -1
- package/dist/types/navbar/navbar-menu/i18n.d.ts.map +0 -1
- package/dist/types/navbar/navbar-menu/item.d.ts.map +0 -1
- package/dist/types/navbar/navbar-menu/menu.d.ts.map +0 -1
- package/dist/types/navbar/navbar-menu/toggle.d.ts.map +0 -1
- package/dist/types/pagination/hooks/use-pagination.d.ts.map +0 -1
- /package/dist/cjs/avatar/{hooks/use-img-loading-status.cjs → use-img-loading-status.cjs} +0 -0
- /package/dist/cjs/navbar/{navbar-menu/i18n.cjs → navbar-menu-i18n.cjs} +0 -0
- /package/dist/cjs/pagination/{hooks/use-pagination.cjs → use-pagination-base.cjs} +0 -0
- /package/dist/esm/avatar/{hooks/use-img-loading-status.js → use-img-loading-status.js} +0 -0
- /package/dist/esm/navbar/{navbar-menu/i18n.js → navbar-menu-i18n.js} +0 -0
- /package/dist/esm/pagination/{hooks/use-pagination.js → use-pagination-base.js} +0 -0
- /package/dist/types/avatar/{hooks/use-img-loading-status.d.ts → use-img-loading-status.d.ts} +0 -0
- /package/dist/types/calendar/{hooks/use-calendar-selectors.d.ts → use-calendar-selectors.d.ts} +0 -0
package/AGENTS.md
ADDED
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
# @opengovsg/oui — Agent guide
|
|
2
|
+
|
|
3
|
+
This is the React component package of the OUI design system from Open Government Products Singapore. Components are built on [react-aria-components](https://react-aria.adobe.com/).
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
# pnpm
|
|
9
|
+
pnpm add @opengovsg/oui @opengovsg/oui-theme tailwindcss react-aria-components motion
|
|
10
|
+
|
|
11
|
+
# yarn
|
|
12
|
+
yarn add @opengovsg/oui @opengovsg/oui-theme tailwindcss react-aria-components motion
|
|
13
|
+
|
|
14
|
+
# npm
|
|
15
|
+
npm install @opengovsg/oui @opengovsg/oui-theme tailwindcss react-aria-components motion
|
|
16
|
+
|
|
17
|
+
# bun
|
|
18
|
+
bun add @opengovsg/oui @opengovsg/oui-theme tailwindcss react-aria-components motion
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
Then add `@import "@opengovsg/oui-theme/tailwind.css"` to your Tailwind entrypoint. Full setup: https://oui.open.gov.sg/docs/getting-started/installation
|
|
22
|
+
|
|
23
|
+
## Or install as local source via the shadcn CLI
|
|
24
|
+
|
|
25
|
+
Each component is also distributed as a shadcn-CLI-compatible registry entry, so callers who need to customize beyond what props expose can take local ownership:
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
npx shadcn@latest add https://oui.open.gov.sg/r/<name>.json
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
Component files land in `components/oui/`, shared utilities in `lib/oui/`. From that point on, the file is yours — we don't push updates to it. Full guide: https://oui.open.gov.sg/llm/getting-started/registry.md
|
|
32
|
+
|
|
33
|
+
## Import
|
|
34
|
+
|
|
35
|
+
```tsx
|
|
36
|
+
import { Accordion, Button, TextField } from "@opengovsg/oui"
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
Subpath imports also work (e.g., `import { Button } from "@opengovsg/oui/button"`).
|
|
40
|
+
|
|
41
|
+
## Agent-friendly docs
|
|
42
|
+
|
|
43
|
+
Structured markdown is available at predictable URLs:
|
|
44
|
+
|
|
45
|
+
- **Index**: https://oui.open.gov.sg/llms.txt — list of every component with one-line descriptions
|
|
46
|
+
- **Single-file dump**: https://oui.open.gov.sg/llms-full.txt — all docs concatenated
|
|
47
|
+
- **Per-component**: `https://oui.open.gov.sg/llm/components/<name>.md` — e.g. `/llm/components/button.md`
|
|
48
|
+
- **Setup guides**: `https://oui.open.gov.sg/llm/getting-started/<name>.md` — e.g. `/llm/getting-started/next.md`
|
|
49
|
+
- **Topical guides**: `https://oui.open.gov.sg/llm/guides/<name>.md`
|
|
50
|
+
|
|
51
|
+
Each component doc inlines runnable example source and links to the underlying React Aria primitive — consult those upstream docs for behavioral details (keyboard handling, ARIA semantics, advanced state) not covered by OUI's own docs.
|
|
52
|
+
|
|
53
|
+
## Cross-cutting guides
|
|
54
|
+
|
|
55
|
+
- **Forms**: https://oui.open.gov.sg/llm/guides/forms.md — composition with `<Form>`, validation patterns, React Hook Form + Zod integration, server errors, layout conventions.
|
|
56
|
+
|
|
57
|
+
## Contributing to docs
|
|
58
|
+
|
|
59
|
+
If you're editing component docs, follow the rubric: https://oui.open.gov.sg/llm/contributing/doc-quality-rubric.md
|
|
60
|
+
|
|
61
|
+
## Types
|
|
62
|
+
|
|
63
|
+
Prop types ship as `.d.ts` files in `dist/types/`. TypeScript-aware tooling resolves them automatically.
|
|
@@ -9,7 +9,7 @@ var ouiTheme = require('@opengovsg/oui-theme');
|
|
|
9
9
|
var utils = require('../system/utils.cjs');
|
|
10
10
|
var avatarContext = require('./avatar-context.cjs');
|
|
11
11
|
var avatarGroupContext = require('./avatar-group-context.cjs');
|
|
12
|
-
var useImgLoadingStatus = require('./
|
|
12
|
+
var useImgLoadingStatus = require('./use-img-loading-status.cjs');
|
|
13
13
|
var utils$1 = require('./utils.cjs');
|
|
14
14
|
var refs = require('../system/react-utils/refs.cjs');
|
|
15
15
|
var user = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/user.cjs');
|
|
@@ -32,6 +32,7 @@ const Button = $670gB$react.forwardRef(
|
|
|
32
32
|
spinner: spinnerProp,
|
|
33
33
|
isIconOnly,
|
|
34
34
|
isAttached,
|
|
35
|
+
preserveWidth,
|
|
35
36
|
...props
|
|
36
37
|
}, ref) => {
|
|
37
38
|
const {
|
|
@@ -52,6 +53,7 @@ const Button = $670gB$react.forwardRef(
|
|
|
52
53
|
const spinnerSize = buttonSpinnerSizeMap[size];
|
|
53
54
|
return /* @__PURE__ */ jsxRuntime.jsx(spinner.Spinner, { size: spinnerSize });
|
|
54
55
|
}, [size, spinnerProp]);
|
|
56
|
+
const shouldPreserveWidth = isPending && preserveWidth && !loadingText && !pendingElement;
|
|
55
57
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
56
58
|
reactAriaComponents.Button,
|
|
57
59
|
{
|
|
@@ -75,11 +77,14 @@ const Button = $670gB$react.forwardRef(
|
|
|
75
77
|
ref,
|
|
76
78
|
children: (renderProps) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
77
79
|
children.renderChildren(renderProps, startContent),
|
|
78
|
-
isPending && spinnerPlacement === "start" ? children.renderChildren(renderProps, spinner$1) : null,
|
|
79
|
-
isPending ?
|
|
80
|
+
isPending && !shouldPreserveWidth && spinnerPlacement === "start" ? children.renderChildren(renderProps, spinner$1) : null,
|
|
81
|
+
!isPending ? children.renderChildren(renderProps, children$1) : shouldPreserveWidth ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative inline-flex items-center justify-center", children: [
|
|
82
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "opacity-0", children: children.renderChildren(renderProps, children$1) }),
|
|
83
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 flex items-center justify-center", children: children.renderChildren(renderProps, spinner$1) })
|
|
84
|
+
] }) : null,
|
|
80
85
|
isPending && loadingText ? loadingText : null,
|
|
81
86
|
isPending && pendingElement ? children.renderChildren(renderProps, pendingElement) : null,
|
|
82
|
-
isPending && spinnerPlacement === "end" ? children.renderChildren(renderProps, spinner$1) : null,
|
|
87
|
+
isPending && !shouldPreserveWidth && spinnerPlacement === "end" ? children.renderChildren(renderProps, spinner$1) : null,
|
|
83
88
|
children.renderChildren(renderProps, endContent),
|
|
84
89
|
!disableRipple && /* @__PURE__ */ jsxRuntime.jsx(ripple.Ripple, { onClear: onClearRipple, ripples })
|
|
85
90
|
] })
|
|
@@ -12,7 +12,7 @@ var selectItem = require('../select/select-item.cjs');
|
|
|
12
12
|
var agnosticCalendarStateContext = require('./agnostic-calendar-state-context.cjs');
|
|
13
13
|
var calendarStyleContext = require('./calendar-style-context.cjs');
|
|
14
14
|
var i18n = require('./i18n.cjs');
|
|
15
|
-
var useCalendarSelectors = require('./
|
|
15
|
+
var useCalendarSelectors = require('./use-calendar-selectors.cjs');
|
|
16
16
|
|
|
17
17
|
const CalendarMonthDaySelector = () => {
|
|
18
18
|
const { slots, size, classNames } = calendarStyleContext.useCalendarStyleContext();
|
|
@@ -1,15 +1,24 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
|
+
var agnosticCalendarStateContext = require('./agnostic-calendar-state-context.cjs');
|
|
4
5
|
var calendar = require('./calendar.cjs');
|
|
6
|
+
var calendarBottomContent = require('./calendar-bottom-content.cjs');
|
|
7
|
+
var calendarGridHeader = require('./calendar-grid-header.cjs');
|
|
8
|
+
var calendarHeader = require('./calendar-header.cjs');
|
|
5
9
|
var calendarStyleContext = require('./calendar-style-context.cjs');
|
|
6
10
|
var utils = require('./utils.cjs');
|
|
7
11
|
var date = require('@internationalized/date');
|
|
8
12
|
|
|
9
13
|
|
|
10
14
|
|
|
15
|
+
exports.AgnosticCalendarStateContext = agnosticCalendarStateContext.AgnosticCalendarStateContext;
|
|
16
|
+
exports.useAgnosticCalendarStateContext = agnosticCalendarStateContext.useAgnosticCalendarStateContext;
|
|
11
17
|
exports.Calendar = calendar.Calendar;
|
|
12
18
|
exports.CalendarStateWrapper = calendar.CalendarStateWrapper;
|
|
19
|
+
exports.CalendarBottomContent = calendarBottomContent.CalendarBottomContent;
|
|
20
|
+
exports.CalendarGridHeader = calendarGridHeader.CalendarGridHeader;
|
|
21
|
+
exports.CalendarHeader = calendarHeader.CalendarHeader;
|
|
13
22
|
exports.CalendarStyleContext = calendarStyleContext.CalendarStyleContext;
|
|
14
23
|
exports.useCalendarStyleContext = calendarStyleContext.useCalendarStyleContext;
|
|
15
24
|
exports.getEraFormat = utils.getEraFormat;
|
|
@@ -3,9 +3,8 @@
|
|
|
3
3
|
'use strict';
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var $670gB$react = require('react');
|
|
7
6
|
var reactAriaComponents = require('react-aria-components');
|
|
8
|
-
var
|
|
7
|
+
var listBox = require('../list-box/list-box.cjs');
|
|
9
8
|
var utils = require('../system/utils.cjs');
|
|
10
9
|
var comboBoxVariantContext = require('./combo-box-variant-context.cjs');
|
|
11
10
|
|
|
@@ -15,56 +14,7 @@ const ComboBoxItem = utils.forwardRef(function ComboBoxItem2(originalProps, ref)
|
|
|
15
14
|
ref,
|
|
16
15
|
comboBoxVariantContext.ComboBoxVariantContext
|
|
17
16
|
);
|
|
18
|
-
|
|
19
|
-
{ className, description, children, classNames, ...props },
|
|
20
|
-
variantProps
|
|
21
|
-
] = utils.mapPropsVariants(originalProps, ouiTheme.listBoxItemStyles.variantKeys);
|
|
22
|
-
const styles = ouiTheme.listBoxItemStyles(variantProps);
|
|
23
|
-
const defaultTextValue = $670gB$react.useMemo(() => {
|
|
24
|
-
if (props.textValue) {
|
|
25
|
-
return props.textValue;
|
|
26
|
-
}
|
|
27
|
-
if (typeof children === "string") {
|
|
28
|
-
return children;
|
|
29
|
-
}
|
|
30
|
-
return void 0;
|
|
31
|
-
}, [children, props.textValue]);
|
|
32
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
33
|
-
reactAriaComponents.ListBoxItem,
|
|
34
|
-
{
|
|
35
|
-
textValue: defaultTextValue,
|
|
36
|
-
...props,
|
|
37
|
-
className: reactAriaComponents.composeRenderProps(
|
|
38
|
-
className ?? classNames?.container,
|
|
39
|
-
(className2, renderProps) => styles.container({ ...renderProps, className: className2 })
|
|
40
|
-
),
|
|
41
|
-
children: (renderProps) => {
|
|
42
|
-
if (typeof children === "function") {
|
|
43
|
-
return children(renderProps);
|
|
44
|
-
}
|
|
45
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
46
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
47
|
-
reactAriaComponents.Text,
|
|
48
|
-
{
|
|
49
|
-
className: styles.label({ className: classNames?.label }),
|
|
50
|
-
slot: "label",
|
|
51
|
-
children
|
|
52
|
-
}
|
|
53
|
-
),
|
|
54
|
-
description && /* @__PURE__ */ jsxRuntime.jsx(
|
|
55
|
-
reactAriaComponents.Text,
|
|
56
|
-
{
|
|
57
|
-
className: styles.description({
|
|
58
|
-
className: classNames?.description
|
|
59
|
-
}),
|
|
60
|
-
slot: "description",
|
|
61
|
-
children: description
|
|
62
|
-
}
|
|
63
|
-
)
|
|
64
|
-
] });
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
);
|
|
17
|
+
return /* @__PURE__ */ jsxRuntime.jsx(listBox.ListBoxItem, { ref, ...originalProps });
|
|
68
18
|
});
|
|
69
19
|
|
|
70
20
|
exports.ComboBoxItem = ComboBoxItem;
|
|
@@ -3,11 +3,11 @@
|
|
|
3
3
|
'use strict';
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var reactDropzone = require('react-dropzone');
|
|
7
6
|
var $670gB$react = require('react');
|
|
8
7
|
var form = require('@react-stately/form');
|
|
9
8
|
var reactAria = require('react-aria');
|
|
10
9
|
var reactAriaComponents = require('react-aria-components');
|
|
10
|
+
var reactDropzone = require('react-dropzone');
|
|
11
11
|
var ouiTheme = require('@opengovsg/oui-theme');
|
|
12
12
|
var field = require('../field/field.cjs');
|
|
13
13
|
var useControllableState = require('../hooks/use-controllable-state.cjs');
|
|
@@ -90,7 +90,11 @@ const FileDropzone = (originalProps) => {
|
|
|
90
90
|
(file) => {
|
|
91
91
|
const errors = [];
|
|
92
92
|
if (maxFileSizeByType.length > 0) {
|
|
93
|
-
const limit = utils$1.resolveMaxFileSize(
|
|
93
|
+
const limit = utils$1.resolveMaxFileSize(
|
|
94
|
+
file.type,
|
|
95
|
+
maxFileSizeByType,
|
|
96
|
+
maxFileSize
|
|
97
|
+
);
|
|
94
98
|
if (limit !== Number.POSITIVE_INFINITY && file.size > limit) {
|
|
95
99
|
errors.push({
|
|
96
100
|
code: reactDropzone.ErrorCode.FileTooLarge,
|
|
@@ -198,7 +202,14 @@ const FileDropzone = (originalProps) => {
|
|
|
198
202
|
return `Minimum file size: ${utils$1.formatBytes(minFileSize, 2, fileSizeBase)}`;
|
|
199
203
|
}
|
|
200
204
|
return null;
|
|
201
|
-
}, [
|
|
205
|
+
}, [
|
|
206
|
+
maxFileSize,
|
|
207
|
+
maxFileSizeByType,
|
|
208
|
+
minFileSize,
|
|
209
|
+
showFileSizeText,
|
|
210
|
+
fileSizeBase,
|
|
211
|
+
fileSizeTextOverride
|
|
212
|
+
]);
|
|
202
213
|
const triggerFileSelector = $670gB$react.useCallback(() => {
|
|
203
214
|
if (isDisabled || isReadOnly) return;
|
|
204
215
|
dropzoneState.inputRef.current?.click();
|
|
@@ -46,7 +46,7 @@ function GovtBanner({
|
|
|
46
46
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
47
47
|
"svg",
|
|
48
48
|
{
|
|
49
|
-
className: slots.crest(
|
|
49
|
+
className: slots.crest(),
|
|
50
50
|
version: "1.1",
|
|
51
51
|
viewBox: "0 0 32 32",
|
|
52
52
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -60,163 +60,83 @@ function GovtBanner({
|
|
|
60
60
|
]
|
|
61
61
|
}
|
|
62
62
|
),
|
|
63
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
64
|
-
"
|
|
65
|
-
{
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
"[NOTE: THIS IS A ",
|
|
71
|
-
environment.toUpperCase(),
|
|
72
|
-
" WEBSITE]"
|
|
73
|
-
] }) : null,
|
|
74
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
75
|
-
"button",
|
|
76
|
-
{
|
|
77
|
-
className: slots.identifyButton({
|
|
78
|
-
className: classNames?.identifyButton
|
|
79
|
-
}),
|
|
80
|
-
"data-focus-visible": ouiTheme.dataAttr(isFocusVisible),
|
|
81
|
-
ref: triggerRef,
|
|
82
|
-
type: "button",
|
|
83
|
-
...reactAria.mergeProps(buttonProps, focusProps),
|
|
84
|
-
children: [
|
|
85
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: slots.link({ className: classNames?.link }), children: "How to identify" }),
|
|
86
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
87
|
-
chevronDown.default,
|
|
88
|
-
{
|
|
89
|
-
className: slots.chevron({ className: classNames?.chevron })
|
|
90
|
-
}
|
|
91
|
-
)
|
|
92
|
-
]
|
|
93
|
-
}
|
|
94
|
-
)
|
|
95
|
-
]
|
|
96
|
-
}
|
|
97
|
-
)
|
|
98
|
-
]
|
|
99
|
-
}
|
|
100
|
-
),
|
|
101
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { ref: panelRef, ...panelProps, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: slots.panel({ className: classNames?.panel }), children: [
|
|
102
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
103
|
-
"div",
|
|
104
|
-
{
|
|
105
|
-
className: slots.panelGroup({
|
|
106
|
-
className: classNames?.panelGroup
|
|
107
|
-
}),
|
|
108
|
-
children: [
|
|
109
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
110
|
-
landmark.default,
|
|
111
|
-
{
|
|
112
|
-
className: slots.panelIcon({ className: classNames?.panelIcon })
|
|
113
|
-
}
|
|
114
|
-
),
|
|
63
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: slots.mainContent(), children: [
|
|
64
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "A Singapore Government Agency Website" }),
|
|
65
|
+
environment ? /* @__PURE__ */ jsxRuntime.jsxs("b", { children: [
|
|
66
|
+
"[NOTE: THIS IS A ",
|
|
67
|
+
environment.toUpperCase(),
|
|
68
|
+
" WEBSITE]"
|
|
69
|
+
] }) : null,
|
|
115
70
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
116
|
-
"
|
|
71
|
+
"button",
|
|
117
72
|
{
|
|
118
|
-
className: slots.
|
|
119
|
-
|
|
120
|
-
|
|
73
|
+
className: slots.identifyButton(),
|
|
74
|
+
"data-focus-visible": ouiTheme.dataAttr(isFocusVisible),
|
|
75
|
+
ref: triggerRef,
|
|
76
|
+
type: "button",
|
|
77
|
+
...reactAria.mergeProps(buttonProps, focusProps),
|
|
121
78
|
children: [
|
|
122
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
123
|
-
|
|
124
|
-
{
|
|
125
|
-
className: slots.panelHeader({
|
|
126
|
-
className: classNames?.panelHeader
|
|
127
|
-
}),
|
|
128
|
-
children: "Official website links end with .gov.sg"
|
|
129
|
-
}
|
|
130
|
-
),
|
|
131
|
-
/* @__PURE__ */ jsxRuntime.jsxs("article", { children: [
|
|
132
|
-
"Government agencies communicate via ",
|
|
133
|
-
/* @__PURE__ */ jsxRuntime.jsx("b", { children: ".gov.sg" }),
|
|
134
|
-
" websites (e.g. go.gov.sg/open).",
|
|
135
|
-
" ",
|
|
136
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
137
|
-
"a",
|
|
138
|
-
{
|
|
139
|
-
className: slots.link({ className: classNames?.link }),
|
|
140
|
-
href: "https://www.gov.sg/trusted-sites#govsites",
|
|
141
|
-
rel: "noreferrer",
|
|
142
|
-
target: "_blank",
|
|
143
|
-
children: [
|
|
144
|
-
"Trusted websites",
|
|
145
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
146
|
-
externalLink.default,
|
|
147
|
-
{
|
|
148
|
-
"aria-hidden": true,
|
|
149
|
-
className: slots.inlineIcon({
|
|
150
|
-
className: ouiTheme.twMerge("ml-0.5", classNames?.inlineIcon)
|
|
151
|
-
})
|
|
152
|
-
}
|
|
153
|
-
)
|
|
154
|
-
]
|
|
155
|
-
}
|
|
156
|
-
)
|
|
157
|
-
] })
|
|
79
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: slots.link(), children: "How to identify" }),
|
|
80
|
+
/* @__PURE__ */ jsxRuntime.jsx(chevronDown.default, { className: slots.chevron() })
|
|
158
81
|
]
|
|
159
82
|
}
|
|
160
83
|
)
|
|
161
|
-
]
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
}),
|
|
170
|
-
children: [
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
}
|
|
176
|
-
),
|
|
84
|
+
] })
|
|
85
|
+
]
|
|
86
|
+
}
|
|
87
|
+
),
|
|
88
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { ref: panelRef, ...panelProps, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: slots.panel(), children: [
|
|
89
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: slots.panelGroup(), children: [
|
|
90
|
+
/* @__PURE__ */ jsxRuntime.jsx(landmark.default, { className: slots.panelIcon() }),
|
|
91
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: slots.panelSection(), children: [
|
|
92
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: slots.panelHeader(), children: "Official website links end with .gov.sg" }),
|
|
93
|
+
/* @__PURE__ */ jsxRuntime.jsxs("article", { children: [
|
|
94
|
+
"Government agencies communicate via ",
|
|
95
|
+
/* @__PURE__ */ jsxRuntime.jsx("b", { children: ".gov.sg" }),
|
|
96
|
+
" websites (e.g. go.gov.sg/open).",
|
|
97
|
+
" ",
|
|
177
98
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
178
|
-
"
|
|
99
|
+
"a",
|
|
179
100
|
{
|
|
180
|
-
className: slots.
|
|
181
|
-
|
|
182
|
-
|
|
101
|
+
className: slots.link(),
|
|
102
|
+
href: "https://www.gov.sg/trusted-sites#govsites",
|
|
103
|
+
rel: "noreferrer",
|
|
104
|
+
target: "_blank",
|
|
183
105
|
children: [
|
|
106
|
+
"Trusted websites",
|
|
184
107
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
185
|
-
|
|
108
|
+
externalLink.default,
|
|
186
109
|
{
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
}),
|
|
190
|
-
children: "Secure websites use HTTPS"
|
|
110
|
+
"aria-hidden": true,
|
|
111
|
+
className: slots.inlineIcon({ className: "ml-0.5" })
|
|
191
112
|
}
|
|
192
|
-
)
|
|
193
|
-
/* @__PURE__ */ jsxRuntime.jsxs("article", { children: [
|
|
194
|
-
"Look for a ",
|
|
195
|
-
/* @__PURE__ */ jsxRuntime.jsx("b", { children: "lock" }),
|
|
196
|
-
" ",
|
|
197
|
-
/* @__PURE__ */ jsxRuntime.jsxs("span", { "aria-hidden": true, children: [
|
|
198
|
-
"(",
|
|
199
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
200
|
-
lock.default,
|
|
201
|
-
{
|
|
202
|
-
className: slots.inlineIcon({
|
|
203
|
-
className: classNames?.inlineIcon
|
|
204
|
-
})
|
|
205
|
-
}
|
|
206
|
-
),
|
|
207
|
-
")"
|
|
208
|
-
] }),
|
|
209
|
-
" ",
|
|
210
|
-
"or ",
|
|
211
|
-
/* @__PURE__ */ jsxRuntime.jsx("b", { children: "https://" }),
|
|
212
|
-
" as an added precaution. Share sensitive information only on official, secure websites."
|
|
213
|
-
] })
|
|
113
|
+
)
|
|
214
114
|
]
|
|
215
115
|
}
|
|
216
116
|
)
|
|
217
|
-
]
|
|
218
|
-
}
|
|
219
|
-
)
|
|
117
|
+
] })
|
|
118
|
+
] })
|
|
119
|
+
] }),
|
|
120
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: slots.panelGroup(), children: [
|
|
121
|
+
/* @__PURE__ */ jsxRuntime.jsx(lock.default, { className: slots.panelIcon() }),
|
|
122
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: slots.panelSection(), children: [
|
|
123
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: slots.panelHeader(), children: "Secure websites use HTTPS" }),
|
|
124
|
+
/* @__PURE__ */ jsxRuntime.jsxs("article", { children: [
|
|
125
|
+
"Look for a ",
|
|
126
|
+
/* @__PURE__ */ jsxRuntime.jsx("b", { children: "lock" }),
|
|
127
|
+
" ",
|
|
128
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { "aria-hidden": true, children: [
|
|
129
|
+
"(",
|
|
130
|
+
/* @__PURE__ */ jsxRuntime.jsx(lock.default, { className: slots.inlineIcon() }),
|
|
131
|
+
")"
|
|
132
|
+
] }),
|
|
133
|
+
" ",
|
|
134
|
+
"or ",
|
|
135
|
+
/* @__PURE__ */ jsxRuntime.jsx("b", { children: "https://" }),
|
|
136
|
+
" as an added precaution. Share sensitive information only on official, secure websites."
|
|
137
|
+
] })
|
|
138
|
+
] })
|
|
139
|
+
] })
|
|
220
140
|
] }) })
|
|
221
141
|
]
|
|
222
142
|
}
|
|
@@ -12,19 +12,19 @@ function getScrollPosition(element) {
|
|
|
12
12
|
return { x: element.scrollLeft, y: element.scrollTop };
|
|
13
13
|
}
|
|
14
14
|
const useScrollPosition = (props) => {
|
|
15
|
-
const {
|
|
15
|
+
const { element, delay = 30, callback, isEnabled } = props;
|
|
16
16
|
const position = $670gB$react.useRef(
|
|
17
|
-
isEnabled ? getScrollPosition(
|
|
17
|
+
isEnabled ? getScrollPosition(element) : { x: 0, y: 0 }
|
|
18
18
|
);
|
|
19
19
|
const throttleTimeout = $670gB$react.useRef(null);
|
|
20
20
|
const handler = $670gB$react.useCallback(() => {
|
|
21
|
-
const currPos = getScrollPosition(
|
|
21
|
+
const currPos = getScrollPosition(element);
|
|
22
22
|
if (typeof callback === "function") {
|
|
23
23
|
callback({ prevPos: position.current, currPos });
|
|
24
24
|
}
|
|
25
25
|
position.current = currPos;
|
|
26
26
|
throttleTimeout.current = null;
|
|
27
|
-
}, [callback,
|
|
27
|
+
}, [callback, element]);
|
|
28
28
|
$670gB$react.useEffect(() => {
|
|
29
29
|
if (!isEnabled) return;
|
|
30
30
|
const handleScroll = () => {
|
|
@@ -37,7 +37,7 @@ const useScrollPosition = (props) => {
|
|
|
37
37
|
handler();
|
|
38
38
|
}
|
|
39
39
|
};
|
|
40
|
-
const target =
|
|
40
|
+
const target = element || window;
|
|
41
41
|
target.addEventListener("scroll", handleScroll);
|
|
42
42
|
return () => {
|
|
43
43
|
target.removeEventListener("scroll", handleScroll);
|
|
@@ -46,7 +46,7 @@ const useScrollPosition = (props) => {
|
|
|
46
46
|
throttleTimeout.current = null;
|
|
47
47
|
}
|
|
48
48
|
};
|
|
49
|
-
}, [
|
|
49
|
+
}, [element, delay, handler, isEnabled]);
|
|
50
50
|
return position.current;
|
|
51
51
|
};
|
|
52
52
|
|
package/dist/cjs/index.cjs
CHANGED
|
@@ -9,7 +9,7 @@ var ripple = require('./ripple/ripple.cjs');
|
|
|
9
9
|
var useRipple = require('./ripple/use-ripple.cjs');
|
|
10
10
|
var spinner = require('./spinner/spinner.cjs');
|
|
11
11
|
var useSpinner = require('./spinner/use-spinner.cjs');
|
|
12
|
-
var toggle
|
|
12
|
+
var toggle = require('./toggle/toggle.cjs');
|
|
13
13
|
var skipNavLink = require('./skip-nav-link/skip-nav-link.cjs');
|
|
14
14
|
var input = require('./input/input.cjs');
|
|
15
15
|
var textField = require('./text-field/text-field.cjs');
|
|
@@ -27,11 +27,16 @@ var select = require('./select/select.cjs');
|
|
|
27
27
|
var selectItem = require('./select/select-item.cjs');
|
|
28
28
|
var selectVariantContext = require('./select/select-variant-context.cjs');
|
|
29
29
|
var badge = require('./badge/badge.cjs');
|
|
30
|
+
var agnosticCalendarStateContext = require('./calendar/agnostic-calendar-state-context.cjs');
|
|
30
31
|
var calendar = require('./calendar/calendar.cjs');
|
|
32
|
+
var calendarBottomContent = require('./calendar/calendar-bottom-content.cjs');
|
|
33
|
+
var calendarGridHeader = require('./calendar/calendar-grid-header.cjs');
|
|
34
|
+
var calendarHeader = require('./calendar/calendar-header.cjs');
|
|
31
35
|
var calendarStyleContext = require('./calendar/calendar-style-context.cjs');
|
|
32
36
|
var utils$1 = require('./calendar/utils.cjs');
|
|
33
37
|
var date = require('@internationalized/date');
|
|
34
38
|
var rangeCalendar = require('./range-calendar/range-calendar.cjs');
|
|
39
|
+
var listBox = require('./list-box/list-box.cjs');
|
|
35
40
|
var menu = require('./menu/menu.cjs');
|
|
36
41
|
var popover = require('./popover/popover.cjs');
|
|
37
42
|
var tabs = require('./tabs/tabs.cjs');
|
|
@@ -43,7 +48,7 @@ var checkboxGroupStyleContext = require('./checkbox/checkbox-group-style-context
|
|
|
43
48
|
var pagination = require('./pagination/pagination.cjs');
|
|
44
49
|
var paginationCursor = require('./pagination/pagination-cursor.cjs');
|
|
45
50
|
var paginationItem = require('./pagination/pagination-item.cjs');
|
|
46
|
-
var
|
|
51
|
+
var usePaginationBase = require('./pagination/use-pagination-base.cjs');
|
|
47
52
|
var usePagination = require('./pagination/use-pagination.cjs');
|
|
48
53
|
var fileDropzone = require('./file-dropzone/file-dropzone.cjs');
|
|
49
54
|
var fileInfo = require('./file-dropzone/file-info.cjs');
|
|
@@ -59,9 +64,9 @@ var toast = require('./toast/toast.cjs');
|
|
|
59
64
|
var navbar = require('./navbar/navbar.cjs');
|
|
60
65
|
var navbarBrand = require('./navbar/navbar-brand.cjs');
|
|
61
66
|
var navbarContent = require('./navbar/navbar-content.cjs');
|
|
62
|
-
var
|
|
63
|
-
var
|
|
64
|
-
var
|
|
67
|
+
var navbarMenu = require('./navbar/navbar-menu.cjs');
|
|
68
|
+
var navbarMenuItem = require('./navbar/navbar-menu-item.cjs');
|
|
69
|
+
var navbarMenuToggle = require('./navbar/navbar-menu-toggle.cjs');
|
|
65
70
|
var navbarItem = require('./navbar/navbar-item.cjs');
|
|
66
71
|
var useNavbar = require('./navbar/use-navbar.cjs');
|
|
67
72
|
var navbarContext = require('./navbar/navbar-context.cjs');
|
|
@@ -97,7 +102,7 @@ exports.Ripple = ripple.Ripple;
|
|
|
97
102
|
exports.useRipple = useRipple.useRipple;
|
|
98
103
|
exports.Spinner = spinner.Spinner;
|
|
99
104
|
exports.useSpinner = useSpinner.useSpinner;
|
|
100
|
-
exports.Toggle = toggle
|
|
105
|
+
exports.Toggle = toggle.Toggle;
|
|
101
106
|
exports.SkipNavLink = skipNavLink.SkipNavLink;
|
|
102
107
|
exports.Input = input.Input;
|
|
103
108
|
exports.TextField = textField.TextField;
|
|
@@ -122,8 +127,13 @@ exports.SelectItem = selectItem.SelectItem;
|
|
|
122
127
|
exports.SelectVariantContext = selectVariantContext.SelectVariantContext;
|
|
123
128
|
exports.useSelectVariantContext = selectVariantContext.useSelectVariantContext;
|
|
124
129
|
exports.Badge = badge.Badge;
|
|
130
|
+
exports.AgnosticCalendarStateContext = agnosticCalendarStateContext.AgnosticCalendarStateContext;
|
|
131
|
+
exports.useAgnosticCalendarStateContext = agnosticCalendarStateContext.useAgnosticCalendarStateContext;
|
|
125
132
|
exports.Calendar = calendar.Calendar;
|
|
126
133
|
exports.CalendarStateWrapper = calendar.CalendarStateWrapper;
|
|
134
|
+
exports.CalendarBottomContent = calendarBottomContent.CalendarBottomContent;
|
|
135
|
+
exports.CalendarGridHeader = calendarGridHeader.CalendarGridHeader;
|
|
136
|
+
exports.CalendarHeader = calendarHeader.CalendarHeader;
|
|
127
137
|
exports.CalendarStyleContext = calendarStyleContext.CalendarStyleContext;
|
|
128
138
|
exports.useCalendarStyleContext = calendarStyleContext.useCalendarStyleContext;
|
|
129
139
|
exports.getEraFormat = utils$1.getEraFormat;
|
|
@@ -137,6 +147,7 @@ Object.defineProperty(exports, "CalendarDate", {
|
|
|
137
147
|
exports.RangeCalendar = rangeCalendar.RangeCalendar;
|
|
138
148
|
exports.RangeCalendarCell = rangeCalendar.RangeCalendarCell;
|
|
139
149
|
exports.RangeCalendarStateWrapper = rangeCalendar.RangeCalendarStateWrapper;
|
|
150
|
+
exports.ListBoxItem = listBox.ListBoxItem;
|
|
140
151
|
exports.Menu = menu.Menu;
|
|
141
152
|
exports.MenuItem = menu.MenuItem;
|
|
142
153
|
exports.MenuSection = menu.MenuSection;
|
|
@@ -164,7 +175,7 @@ exports.useCheckboxGroupStyleContext = checkboxGroupStyleContext.useCheckboxGrou
|
|
|
164
175
|
exports.Pagination = pagination.Pagination;
|
|
165
176
|
exports.PaginationCursor = paginationCursor.PaginationCursor;
|
|
166
177
|
exports.PaginationItem = paginationItem.PaginationItem;
|
|
167
|
-
exports.PaginationItemType =
|
|
178
|
+
exports.PaginationItemType = usePaginationBase.PaginationItemType;
|
|
168
179
|
exports.CURSOR_TRANSITION_TIMEOUT = usePagination.CURSOR_TRANSITION_TIMEOUT;
|
|
169
180
|
exports.usePagination = usePagination.usePagination;
|
|
170
181
|
exports.FileDropzone = fileDropzone.FileDropzone;
|
|
@@ -183,9 +194,9 @@ exports.Toaster = toast.Toaster;
|
|
|
183
194
|
exports.Navbar = navbar.Navbar;
|
|
184
195
|
exports.NavbarBrand = navbarBrand.NavbarBrand;
|
|
185
196
|
exports.NavbarContent = navbarContent.NavbarContent;
|
|
186
|
-
exports.NavbarMenu =
|
|
187
|
-
exports.NavbarMenuItem =
|
|
188
|
-
exports.NavbarMenuToggle =
|
|
197
|
+
exports.NavbarMenu = navbarMenu.NavbarMenu;
|
|
198
|
+
exports.NavbarMenuItem = navbarMenuItem.NavbarMenuItem;
|
|
199
|
+
exports.NavbarMenuToggle = navbarMenuToggle.NavbarMenuToggle;
|
|
189
200
|
exports.NavbarItem = navbarItem.NavbarItem;
|
|
190
201
|
exports.useNavbar = useNavbar.useNavbar;
|
|
191
202
|
exports.NavbarProvider = navbarContext.NavbarProvider;
|