@opengovsg/oui 0.0.0-snapshot-20250813090518 → 0.0.0-snapshot-20250813172831
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/badge/badge.cjs +4 -4
- package/dist/cjs/badge/use-badge.cjs +6 -6
- package/dist/cjs/banner/banner.cjs +4 -4
- package/dist/cjs/button/button.cjs +4 -4
- package/dist/cjs/calendar/calendar-bottom-content.cjs +2 -2
- package/dist/cjs/calendar/calendar-header.cjs +2 -2
- package/dist/cjs/calendar/calendar-month-day-selector.cjs +4 -4
- package/dist/cjs/calendar/calendar.cjs +4 -4
- package/dist/cjs/calendar/hooks/use-calendar-selectors.cjs +4 -4
- package/dist/cjs/calendar/utils.cjs +3 -3
- package/dist/cjs/checkbox/checkbox.cjs +1 -1
- package/dist/cjs/combo-box/combo-box-fuzzy.cjs +6 -6
- package/dist/cjs/combo-box/combo-box-item.cjs +2 -2
- package/dist/cjs/combo-box/combo-box.cjs +5 -5
- package/dist/cjs/date-field/date-field.cjs +4 -4
- package/dist/cjs/date-picker/date-picker.cjs +6 -7
- package/dist/cjs/date-range-picker/date-range-picker.cjs +8 -8
- package/dist/cjs/govt-banner/govt-banner.cjs +3 -3
- package/dist/cjs/hooks/use-callback-ref.cjs +4 -4
- package/dist/cjs/hooks/use-controllable-state.cjs +2 -2
- package/dist/cjs/index.cjs +20 -9
- package/dist/cjs/input/input.cjs +2 -2
- package/dist/cjs/menu/menu.cjs +7 -7
- package/dist/cjs/node_modules/.pnpm/@react-aria_focus@3.20.5_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/focus/dist/useFocusRing.cjs +45 -0
- package/dist/cjs/node_modules/.pnpm/@react-aria_interactions@3.25.3_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/interactions/dist/context.cjs +21 -0
- package/dist/cjs/node_modules/.pnpm/@react-aria_interactions@3.25.3_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/interactions/dist/textSelection.cjs +72 -0
- package/dist/cjs/node_modules/.pnpm/@react-aria_interactions@3.25.3_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/interactions/dist/useFocus.cjs +60 -0
- package/dist/cjs/node_modules/.pnpm/@react-aria_interactions@3.25.3_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/interactions/dist/useFocusVisible.cjs +210 -0
- package/dist/cjs/node_modules/.pnpm/@react-aria_interactions@3.25.3_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/interactions/dist/useFocusWithin.cjs +100 -0
- package/dist/cjs/node_modules/.pnpm/@react-aria_interactions@3.25.3_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/interactions/dist/useHover.cjs +152 -0
- package/dist/cjs/node_modules/.pnpm/@react-aria_interactions@3.25.3_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/interactions/dist/usePress.cjs +676 -0
- package/dist/cjs/node_modules/.pnpm/@react-aria_interactions@3.25.3_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/interactions/dist/utils.cjs +160 -0
- package/dist/cjs/node_modules/.pnpm/@swc_helpers@0.5.17/node_modules/@swc/helpers/esm/_check_private_redeclaration.cjs +9 -0
- package/dist/cjs/node_modules/.pnpm/@swc_helpers@0.5.17/node_modules/@swc/helpers/esm/_class_apply_descriptor_get.cjs +9 -0
- package/dist/cjs/node_modules/.pnpm/@swc_helpers@0.5.17/node_modules/@swc/helpers/esm/_class_apply_descriptor_set.cjs +16 -0
- package/dist/cjs/node_modules/.pnpm/@swc_helpers@0.5.17/node_modules/@swc/helpers/esm/_class_extract_field_descriptor.cjs +9 -0
- package/dist/cjs/node_modules/.pnpm/@swc_helpers@0.5.17/node_modules/@swc/helpers/esm/_class_private_field_get.cjs +11 -0
- package/dist/cjs/node_modules/.pnpm/@swc_helpers@0.5.17/node_modules/@swc/helpers/esm/_class_private_field_init.cjs +10 -0
- package/dist/cjs/node_modules/.pnpm/@swc_helpers@0.5.17/node_modules/@swc/helpers/esm/_class_private_field_set.cjs +12 -0
- package/dist/cjs/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/Icon.cjs +4 -4
- package/dist/cjs/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/createLucideIcon.cjs +3 -3
- package/dist/cjs/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevrons-right.cjs +22 -0
- package/dist/cjs/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/ellipsis.cjs +23 -0
- package/dist/cjs/pagination/hooks/use-pagination.cjs +117 -0
- package/dist/cjs/pagination/index.cjs +17 -0
- package/dist/cjs/pagination/pagination-cursor.cjs +18 -0
- package/dist/cjs/pagination/pagination-item.cjs +18 -0
- package/dist/cjs/pagination/pagination.cjs +263 -0
- package/dist/cjs/pagination/use-pagination-item.cjs +87 -0
- package/dist/cjs/pagination/use-pagination.cjs +251 -0
- package/dist/cjs/range-calendar/range-calendar.cjs +7 -7
- package/dist/cjs/ripple/use-ripple.cjs +4 -4
- package/dist/cjs/select/select.cjs +5 -5
- package/dist/cjs/spinner/use-spinner.cjs +3 -3
- package/dist/cjs/system/react-utils/context.cjs +3 -3
- package/dist/cjs/system/react-utils/dom-props.cjs +186 -0
- package/dist/cjs/system/react-utils/filter-dom-props.cjs +46 -0
- package/dist/cjs/system/react-utils/index.cjs +2 -0
- package/dist/cjs/system/react-utils/refs.cjs +3 -3
- package/dist/cjs/system/utils.cjs +3 -3
- package/dist/cjs/tabs/tabs.cjs +2 -2
- package/dist/cjs/tag-field/tag-field-item.cjs +2 -2
- package/dist/cjs/tag-field/tag-field-list.cjs +4 -4
- package/dist/cjs/tag-field/tag-field-root.cjs +14 -14
- package/dist/cjs/tag-field/tag-field-state-context.cjs +2 -2
- package/dist/cjs/tag-field/tag-field-tag-list.cjs +3 -3
- package/dist/cjs/tag-field/tag-field-trigger.cjs +2 -2
- package/dist/cjs/tag-field/tag-field.cjs +5 -5
- package/dist/cjs/tag-field/use-tag-field-state.cjs +6 -6
- package/dist/cjs/tag-field/use-tag-field.cjs +4 -4
- package/dist/cjs/text-area/text-area.cjs +2 -2
- package/dist/cjs/text-area-field/text-area-field.cjs +1 -1
- package/dist/cjs/text-field/text-field.cjs +1 -1
- package/dist/cjs/toggle/toggle.cjs +3 -3
- package/dist/esm/banner/banner.js +1 -1
- package/dist/esm/button/button.js +1 -1
- package/dist/esm/calendar/calendar-month-day-selector.js +2 -2
- package/dist/esm/checkbox/checkbox.js +1 -1
- package/dist/esm/combo-box/combo-box.js +2 -2
- package/dist/esm/date-field/date-field.js +1 -1
- package/dist/esm/date-picker/date-picker.js +4 -5
- package/dist/esm/date-range-picker/date-range-picker.js +5 -5
- package/dist/esm/index.js +8 -3
- package/dist/esm/menu/menu.js +1 -1
- package/dist/esm/node_modules/.pnpm/@react-aria_focus@3.20.5_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/focus/dist/useFocusRing.js +43 -0
- package/dist/esm/node_modules/.pnpm/@react-aria_interactions@3.25.3_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/interactions/dist/context.js +19 -0
- package/dist/esm/node_modules/.pnpm/@react-aria_interactions@3.25.3_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/interactions/dist/textSelection.js +69 -0
- package/dist/esm/node_modules/.pnpm/@react-aria_interactions@3.25.3_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/interactions/dist/useFocus.js +58 -0
- package/dist/esm/node_modules/.pnpm/@react-aria_interactions@3.25.3_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/interactions/dist/useFocusVisible.js +205 -0
- package/dist/esm/node_modules/.pnpm/@react-aria_interactions@3.25.3_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/interactions/dist/useFocusWithin.js +98 -0
- package/dist/esm/node_modules/.pnpm/@react-aria_interactions@3.25.3_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/interactions/dist/useHover.js +150 -0
- package/dist/esm/node_modules/.pnpm/@react-aria_interactions@3.25.3_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/interactions/dist/usePress.js +674 -0
- package/dist/esm/node_modules/.pnpm/@react-aria_interactions@3.25.3_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/interactions/dist/utils.js +155 -0
- package/dist/esm/node_modules/.pnpm/@swc_helpers@0.5.17/node_modules/@swc/helpers/esm/_check_private_redeclaration.js +7 -0
- package/dist/esm/node_modules/.pnpm/@swc_helpers@0.5.17/node_modules/@swc/helpers/esm/_class_apply_descriptor_get.js +7 -0
- package/dist/esm/node_modules/.pnpm/@swc_helpers@0.5.17/node_modules/@swc/helpers/esm/_class_apply_descriptor_set.js +14 -0
- package/dist/esm/node_modules/.pnpm/@swc_helpers@0.5.17/node_modules/@swc/helpers/esm/_class_extract_field_descriptor.js +7 -0
- package/dist/esm/node_modules/.pnpm/@swc_helpers@0.5.17/node_modules/@swc/helpers/esm/_class_private_field_get.js +9 -0
- package/dist/esm/node_modules/.pnpm/@swc_helpers@0.5.17/node_modules/@swc/helpers/esm/_class_private_field_init.js +8 -0
- package/dist/esm/node_modules/.pnpm/@swc_helpers@0.5.17/node_modules/@swc/helpers/esm/_class_private_field_set.js +10 -0
- package/dist/esm/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevrons-right.js +17 -0
- package/dist/esm/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/ellipsis.js +18 -0
- package/dist/esm/pagination/hooks/use-pagination.js +114 -0
- package/dist/esm/pagination/index.js +6 -0
- package/dist/esm/pagination/pagination-cursor.js +16 -0
- package/dist/esm/pagination/pagination-item.js +16 -0
- package/dist/esm/pagination/pagination.js +261 -0
- package/dist/esm/pagination/use-pagination-item.js +85 -0
- package/dist/esm/pagination/use-pagination.js +248 -0
- package/dist/esm/range-calendar/range-calendar.js +1 -1
- package/dist/esm/select/select.js +3 -3
- package/dist/esm/system/react-utils/dom-props.js +183 -0
- package/dist/esm/system/react-utils/filter-dom-props.js +44 -0
- package/dist/esm/system/react-utils/index.js +1 -0
- package/dist/esm/tag-field/tag-field.js +3 -3
- package/dist/esm/text-area-field/text-area-field.js +1 -1
- package/dist/esm/text-field/text-field.js +1 -1
- package/dist/types/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/pagination/hooks/use-pagination.d.ts +51 -0
- package/dist/types/pagination/hooks/use-pagination.d.ts.map +1 -0
- package/dist/types/pagination/index.d.ts +7 -0
- package/dist/types/pagination/index.d.ts.map +1 -0
- package/dist/types/pagination/pagination-cursor.d.ts +9 -0
- package/dist/types/pagination/pagination-cursor.d.ts.map +1 -0
- package/dist/types/pagination/pagination-item.d.ts +5 -0
- package/dist/types/pagination/pagination-item.d.ts.map +1 -0
- package/dist/types/pagination/pagination.d.ts +5 -0
- package/dist/types/pagination/pagination.d.ts.map +1 -0
- package/dist/types/pagination/use-pagination-item.d.ts +51 -0
- package/dist/types/pagination/use-pagination-item.d.ts.map +1 -0
- package/dist/types/pagination/use-pagination.d.ts +353 -0
- package/dist/types/pagination/use-pagination.d.ts.map +1 -0
- package/dist/types/system/react-utils/context.d.ts.map +1 -1
- package/dist/types/system/react-utils/dom-props.d.ts +3 -0
- package/dist/types/system/react-utils/dom-props.d.ts.map +1 -0
- package/dist/types/system/react-utils/filter-dom-props.d.ts +39 -0
- package/dist/types/system/react-utils/filter-dom-props.d.ts.map +1 -0
- package/dist/types/system/react-utils/index.d.ts +1 -0
- package/dist/types/system/react-utils/index.d.ts.map +1 -1
- package/package.json +6 -4
|
@@ -3,11 +3,11 @@
|
|
|
3
3
|
'use strict';
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var react = require('react');
|
|
6
|
+
var $670gB$react = require('react');
|
|
7
7
|
var reactAriaComponents = require('react-aria-components');
|
|
8
8
|
var ouiTheme = require('@opengovsg/oui-theme');
|
|
9
9
|
|
|
10
|
-
const TextArea = react.forwardRef(
|
|
10
|
+
const TextArea = $670gB$react.forwardRef(
|
|
11
11
|
({ size, variant, isDisabled, ...props }, ref) => {
|
|
12
12
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
13
13
|
reactAriaComponents.TextArea,
|
|
@@ -5,8 +5,8 @@
|
|
|
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 field = require('../field/field.cjs');
|
|
9
8
|
var textArea = require('../text-area/text-area.cjs');
|
|
9
|
+
var field = require('../field/field.cjs');
|
|
10
10
|
|
|
11
11
|
function TextAreaField({
|
|
12
12
|
label,
|
|
@@ -5,8 +5,8 @@
|
|
|
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 field = require('../field/field.cjs');
|
|
9
8
|
var input = require('../input/input.cjs');
|
|
9
|
+
var field = require('../field/field.cjs');
|
|
10
10
|
|
|
11
11
|
function TextField({
|
|
12
12
|
label,
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
'use strict';
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var react = require('react');
|
|
6
|
+
var $670gB$react = require('react');
|
|
7
7
|
var reactAria = require('react-aria');
|
|
8
8
|
var reactAriaComponents = require('react-aria-components');
|
|
9
9
|
var ouiTheme = require('@opengovsg/oui-theme');
|
|
@@ -20,12 +20,12 @@ const Toggle = ({
|
|
|
20
20
|
ouiTheme.toggleStyles.variantKeys
|
|
21
21
|
);
|
|
22
22
|
const slots = ouiTheme.toggleStyles(variantProps);
|
|
23
|
-
const clonedThumbIcon = react.useCallback(
|
|
23
|
+
const clonedThumbIcon = $670gB$react.useCallback(
|
|
24
24
|
(renderProps) => {
|
|
25
25
|
const baseProps = {
|
|
26
26
|
className: slots.thumbIcon({ className: classNames?.thumbIcon })
|
|
27
27
|
};
|
|
28
|
-
return typeof thumbIcon === "function" ? thumbIcon(reactAria.mergeProps(baseProps, renderProps)) : thumbIcon && react.cloneElement(thumbIcon, baseProps);
|
|
28
|
+
return typeof thumbIcon === "function" ? thumbIcon(reactAria.mergeProps(baseProps, renderProps)) : thumbIcon && $670gB$react.cloneElement(thumbIcon, baseProps);
|
|
29
29
|
},
|
|
30
30
|
[classNames?.thumbIcon, slots, thumbIcon]
|
|
31
31
|
);
|
|
@@ -5,9 +5,9 @@ import { useMemo, useRef } from 'react';
|
|
|
5
5
|
import { useMessageFormatter, useDisclosure } from 'react-aria';
|
|
6
6
|
import { useDisclosureState } from 'react-stately';
|
|
7
7
|
import { bannerStyles } from '@opengovsg/oui-theme';
|
|
8
|
-
import { Button } from '../button/button.js';
|
|
9
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';
|
|
10
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
|
+
import { Button } from '../button/button.js';
|
|
11
11
|
import X from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/x.js';
|
|
12
12
|
|
|
13
13
|
const i18nStrings = {
|
|
@@ -5,9 +5,9 @@ import { forwardRef, useMemo } from 'react';
|
|
|
5
5
|
import { chain } from '@react-aria/utils';
|
|
6
6
|
import { Button as Button$1, composeRenderProps } from 'react-aria-components';
|
|
7
7
|
import { buttonStyles } from '@opengovsg/oui-theme';
|
|
8
|
-
import { Ripple } from '../ripple/ripple.js';
|
|
9
8
|
import { useRipple } from '../ripple/use-ripple.js';
|
|
10
9
|
import { Spinner } from '../spinner/spinner.js';
|
|
10
|
+
import { Ripple } from '../ripple/ripple.js';
|
|
11
11
|
|
|
12
12
|
const Button = forwardRef(
|
|
13
13
|
({
|
|
@@ -4,11 +4,11 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
4
4
|
import { useContext } from 'react';
|
|
5
5
|
import { CalendarDate } from '@internationalized/date';
|
|
6
6
|
import { Group } from 'react-aria-components';
|
|
7
|
-
import { Select } from '../select/select.js';
|
|
8
|
-
import { SelectItem } from '../select/select-item.js';
|
|
9
7
|
import { AgnosticCalendarStateContext } from './agnostic-calendar-state-context.js';
|
|
10
8
|
import { useCalendarStyleContext } from './calendar-style-context.js';
|
|
11
9
|
import { useCalendarSelectors } from './hooks/use-calendar-selectors.js';
|
|
10
|
+
import { Select } from '../select/select.js';
|
|
11
|
+
import { SelectItem } from '../select/select-item.js';
|
|
12
12
|
import { useCalendarI18n } from './hooks/use-calendar-i18n.js';
|
|
13
13
|
|
|
14
14
|
const CalendarMonthDaySelector = () => {
|
|
@@ -3,11 +3,11 @@
|
|
|
3
3
|
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
|
-
import { Label, Description, FieldError } from '../field/field.js';
|
|
7
6
|
import { mapPropsVariants } from '../system/utils.js';
|
|
8
7
|
import { useCheckboxGroupStyleContext, CheckboxGroupStyleContext } from './checkbox-group-style-context.js';
|
|
9
8
|
import Minus from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/minus.js';
|
|
10
9
|
import Check from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.js';
|
|
10
|
+
import { Label, Description, FieldError } from '../field/field.js';
|
|
11
11
|
|
|
12
12
|
const Checkbox = ({
|
|
13
13
|
classNames,
|
|
@@ -5,13 +5,13 @@ import { useMemo, useCallback } from 'react';
|
|
|
5
5
|
import { useMessageFormatter } from 'react-aria';
|
|
6
6
|
import { ListLayout, Provider, ComboBox as ComboBox$1, Input, Button, Virtualizer, ListBox } from 'react-aria-components';
|
|
7
7
|
import { listBoxItemStyles, cn, comboBoxStyles, composeTailwindRenderProps, composeRenderProps, comboBoxClearButtonStyles } from '@opengovsg/oui-theme';
|
|
8
|
-
import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
|
|
9
|
-
import { Popover } from '../popover/popover.js';
|
|
10
8
|
import { mapPropsVariants } from '../system/utils.js';
|
|
11
9
|
import { ComboBoxVariantContext } from './combo-box-variant-context.js';
|
|
10
|
+
import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
|
|
12
11
|
import ChevronUp from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-up.js';
|
|
13
12
|
import ChevronDown from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.js';
|
|
14
13
|
import X from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/x.js';
|
|
14
|
+
import { Popover } from '../popover/popover.js';
|
|
15
15
|
|
|
16
16
|
const calculateEstimatedRowHeight = (size) => {
|
|
17
17
|
switch (size) {
|
|
@@ -4,8 +4,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
4
4
|
import { useMemo } from 'react';
|
|
5
5
|
import { DateField as DateField$1, DateInput as DateInput$1, DateSegment } from 'react-aria-components';
|
|
6
6
|
import { dateFieldStyles, composeTailwindRenderProps, dateInputStyles, composeRenderProps } from '@opengovsg/oui-theme';
|
|
7
|
-
import { Label, Description, FieldError } from '../field/field.js';
|
|
8
7
|
import { mapPropsVariants } from '../system/utils.js';
|
|
8
|
+
import { Label, Description, FieldError } from '../field/field.js';
|
|
9
9
|
|
|
10
10
|
function DateField(originalProps) {
|
|
11
11
|
const [
|
|
@@ -4,14 +4,13 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
4
4
|
import { useMemo } from 'react';
|
|
5
5
|
import { DatePicker as DatePicker$1, Dialog } from 'react-aria-components';
|
|
6
6
|
import { datePickerStyles, composeTailwindRenderProps } from '@opengovsg/oui-theme';
|
|
7
|
-
import {
|
|
8
|
-
import { Calendar as Calendar$1 } from '../calendar/calendar.js';
|
|
9
|
-
import '@internationalized/date';
|
|
7
|
+
import { mapPropsVariants } from '../system/utils.js';
|
|
10
8
|
import { DateInput } from '../date-field/date-field.js';
|
|
9
|
+
import Calendar from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/calendar.js';
|
|
10
|
+
import { Calendar as Calendar$1 } from '../calendar/calendar.js';
|
|
11
11
|
import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
|
|
12
|
+
import { Button } from '../button/button.js';
|
|
12
13
|
import { Popover } from '../popover/popover.js';
|
|
13
|
-
import { mapPropsVariants } from '../system/utils.js';
|
|
14
|
-
import Calendar from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/calendar.js';
|
|
15
14
|
|
|
16
15
|
function DatePicker(originalProps) {
|
|
17
16
|
const [
|
|
@@ -5,13 +5,13 @@ import { useMemo } from 'react';
|
|
|
5
5
|
import { CalendarDate } from '@internationalized/date';
|
|
6
6
|
import { DateRangePicker as DateRangePicker$1, Dialog } from 'react-aria-components';
|
|
7
7
|
import { dateRangePickerStyles, composeTailwindRenderProps } from '@opengovsg/oui-theme';
|
|
8
|
-
import { Button } from '../button/button.js';
|
|
9
|
-
import { DateInput } from '../date-field/date-field.js';
|
|
10
|
-
import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
|
|
11
|
-
import { Popover } from '../popover/popover.js';
|
|
12
|
-
import { RangeCalendar } from '../range-calendar/range-calendar.js';
|
|
13
8
|
import { mapPropsVariants } from '../system/utils.js';
|
|
14
9
|
import Calendar from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/calendar.js';
|
|
10
|
+
import { RangeCalendar } from '../range-calendar/range-calendar.js';
|
|
11
|
+
import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
|
|
12
|
+
import { DateInput } from '../date-field/date-field.js';
|
|
13
|
+
import { Button } from '../button/button.js';
|
|
14
|
+
import { Popover } from '../popover/popover.js';
|
|
15
15
|
|
|
16
16
|
function DateRangePicker(originalProps) {
|
|
17
17
|
const [
|
package/dist/esm/index.js
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
export { TextArea } from './text-area/text-area.js';
|
|
3
|
+
export { TextAreaField } from './text-area-field/text-area-field.js';
|
|
2
4
|
export { useControllableState } from './hooks/use-controllable-state.js';
|
|
3
5
|
export { Button } from './button/button.js';
|
|
4
6
|
export { GovtBanner } from './govt-banner/govt-banner.js';
|
|
@@ -11,8 +13,6 @@ export { SkipNavLink } from './skip-nav-link/skip-nav-link.js';
|
|
|
11
13
|
export { Input } from './input/input.js';
|
|
12
14
|
export { TextField } from './text-field/text-field.js';
|
|
13
15
|
export { Description, FieldError, FieldGroup, Label } from './field/field.js';
|
|
14
|
-
export { TextArea } from './text-area/text-area.js';
|
|
15
|
-
export { TextAreaField } from './text-area-field/text-area-field.js';
|
|
16
16
|
export { ComboBox, ComboBoxEmptyState } from './combo-box/combo-box.js';
|
|
17
17
|
export { ComboBoxFuzzy } from './combo-box/combo-box-fuzzy.js';
|
|
18
18
|
export { ComboBoxItem } from './combo-box/combo-box-item.js';
|
|
@@ -24,10 +24,10 @@ export { Select } from './select/select.js';
|
|
|
24
24
|
export { SelectItem } from './select/select-item.js';
|
|
25
25
|
export { SelectVariantContext, useSelectVariantContext } from './select/select-variant-context.js';
|
|
26
26
|
export { Badge } from './badge/badge.js';
|
|
27
|
+
export { CalendarDate } from '@internationalized/date';
|
|
27
28
|
export { Calendar, CalendarStateWrapper } from './calendar/calendar.js';
|
|
28
29
|
export { CalendarStyleContext, useCalendarStyleContext } from './calendar/calendar-style-context.js';
|
|
29
30
|
export { getEraFormat, useGenerateLocalizedMonths, useGenerateLocalizedYears, useLocalizedMonthYear } from './calendar/utils.js';
|
|
30
|
-
export { CalendarDate } from '@internationalized/date';
|
|
31
31
|
export { RangeCalendar, RangeCalendarCell, RangeCalendarStateWrapper } from './range-calendar/range-calendar.js';
|
|
32
32
|
export { Menu, MenuItem, MenuSection, MenuSeparator, MenuTrigger, MenuVariantContext, SubmenuTrigger, useMenuVariantContext } from './menu/menu.js';
|
|
33
33
|
export { Popover } from './popover/popover.js';
|
|
@@ -37,3 +37,8 @@ export { DatePicker } from './date-picker/date-picker.js';
|
|
|
37
37
|
export { DateRangePicker } from './date-range-picker/date-range-picker.js';
|
|
38
38
|
export { Checkbox, CheckboxGroup } from './checkbox/checkbox.js';
|
|
39
39
|
export { CheckboxGroupStyleContext, useCheckboxGroupStyleContext } from './checkbox/checkbox-group-style-context.js';
|
|
40
|
+
export { PaginationItemType } from './pagination/hooks/use-pagination.js';
|
|
41
|
+
export { Pagination } from './pagination/pagination.js';
|
|
42
|
+
export { PaginationCursor } from './pagination/pagination-cursor.js';
|
|
43
|
+
export { PaginationItem } from './pagination/pagination-item.js';
|
|
44
|
+
export { CURSOR_TRANSITION_TIMEOUT, usePagination } from './pagination/use-pagination.js';
|
package/dist/esm/menu/menu.js
CHANGED
|
@@ -4,11 +4,11 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
|
4
4
|
import { forwardRef, useMemo, useCallback } from 'react';
|
|
5
5
|
import { useContextProps, MenuItem as MenuItem$1, composeRenderProps, Provider, Menu as Menu$1, MenuSection as MenuSection$1, Header, Collection, MenuTrigger as MenuTrigger$1, SubmenuTrigger as SubmenuTrigger$1, Separator } from 'react-aria-components';
|
|
6
6
|
import { listBoxItemStyles, menuItemStyles, menuStyles, menuSectionStyles, menuDividerStyles } from '@opengovsg/oui-theme';
|
|
7
|
-
import { Popover } from '../popover/popover.js';
|
|
8
7
|
import { forwardRefGeneric, mapPropsVariants } from '../system/utils.js';
|
|
9
8
|
import Check from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.js';
|
|
10
9
|
import ChevronRight from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-right.js';
|
|
11
10
|
import { createContext } from '../system/react-utils/context.js';
|
|
11
|
+
import { Popover } from '../popover/popover.js';
|
|
12
12
|
|
|
13
13
|
const [MenuVariantContext, useMenuVariantContext] = createContext({
|
|
14
14
|
name: "MenuVariantContext",
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { useFocus as $a1ea59d68270f0dd$export$f8168d8dd8fd66e6 } from '../../../../../@react-aria_interactions@3.25.3_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/interactions/dist/useFocus.js';
|
|
2
|
+
import { isFocusVisible as $507fabe10e71c6fb$export$b9b3dfddab17db27, useFocusVisibleListener as $507fabe10e71c6fb$export$ec71b4b83ac08ec3 } from '../../../../../@react-aria_interactions@3.25.3_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/interactions/dist/useFocusVisible.js';
|
|
3
|
+
import { useFocusWithin as $9ab94262bd0047c7$export$420e68273165f4ec } from '../../../../../@react-aria_interactions@3.25.3_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/interactions/dist/useFocusWithin.js';
|
|
4
|
+
import { useRef, useState, useCallback } from 'react';
|
|
5
|
+
|
|
6
|
+
function $f7dceffc5ad7768b$export$4e328f61c538687f(props = {}) {
|
|
7
|
+
let { autoFocus: autoFocus = false, isTextInput: isTextInput, within: within } = props;
|
|
8
|
+
let state = (useRef)({
|
|
9
|
+
isFocused: false,
|
|
10
|
+
isFocusVisible: autoFocus || ($507fabe10e71c6fb$export$b9b3dfddab17db27)()
|
|
11
|
+
});
|
|
12
|
+
let [isFocused, setFocused] = (useState)(false);
|
|
13
|
+
let [isFocusVisibleState, setFocusVisible] = (useState)(()=>state.current.isFocused && state.current.isFocusVisible);
|
|
14
|
+
let updateState = (useCallback)(()=>setFocusVisible(state.current.isFocused && state.current.isFocusVisible), []);
|
|
15
|
+
let onFocusChange = (useCallback)((isFocused)=>{
|
|
16
|
+
state.current.isFocused = isFocused;
|
|
17
|
+
setFocused(isFocused);
|
|
18
|
+
updateState();
|
|
19
|
+
}, [
|
|
20
|
+
updateState
|
|
21
|
+
]);
|
|
22
|
+
($507fabe10e71c6fb$export$ec71b4b83ac08ec3)((isFocusVisible)=>{
|
|
23
|
+
state.current.isFocusVisible = isFocusVisible;
|
|
24
|
+
updateState();
|
|
25
|
+
}, [], {
|
|
26
|
+
isTextInput: isTextInput
|
|
27
|
+
});
|
|
28
|
+
let { focusProps: focusProps } = ($a1ea59d68270f0dd$export$f8168d8dd8fd66e6)({
|
|
29
|
+
isDisabled: within,
|
|
30
|
+
onFocusChange: onFocusChange
|
|
31
|
+
});
|
|
32
|
+
let { focusWithinProps: focusWithinProps } = ($9ab94262bd0047c7$export$420e68273165f4ec)({
|
|
33
|
+
isDisabled: !within,
|
|
34
|
+
onFocusWithinChange: onFocusChange
|
|
35
|
+
});
|
|
36
|
+
return {
|
|
37
|
+
isFocused: isFocused,
|
|
38
|
+
isFocusVisible: isFocusVisibleState,
|
|
39
|
+
focusProps: within ? focusWithinProps : focusProps
|
|
40
|
+
};
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
export { $f7dceffc5ad7768b$export$4e328f61c538687f as useFocusRing };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import $670gB$react from 'react';
|
|
2
|
+
|
|
3
|
+
/*
|
|
4
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
5
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
6
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
7
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
8
|
+
*
|
|
9
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
10
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
11
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
12
|
+
* governing permissions and limitations under the License.
|
|
13
|
+
*/
|
|
14
|
+
const $ae1eeba8b9eafd08$export$5165eccb35aaadb5 = ($670gB$react).createContext({
|
|
15
|
+
register: ()=>{}
|
|
16
|
+
});
|
|
17
|
+
$ae1eeba8b9eafd08$export$5165eccb35aaadb5.displayName = 'PressResponderContext';
|
|
18
|
+
|
|
19
|
+
export { $ae1eeba8b9eafd08$export$5165eccb35aaadb5 as PressResponderContext };
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { isIOS, getOwnerDocument, runAfterTransition } from '@react-aria/utils';
|
|
2
|
+
|
|
3
|
+
/*
|
|
4
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
5
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
6
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
7
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
8
|
+
*
|
|
9
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
10
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
11
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
12
|
+
* governing permissions and limitations under the License.
|
|
13
|
+
*/
|
|
14
|
+
// Note that state only matters here for iOS. Non-iOS gets user-select: none applied to the target element
|
|
15
|
+
// rather than at the document level so we just need to apply/remove user-select: none for each pressed element individually
|
|
16
|
+
let $14c0b72509d70225$var$state = 'default';
|
|
17
|
+
let $14c0b72509d70225$var$savedUserSelect = '';
|
|
18
|
+
let $14c0b72509d70225$var$modifiedElementMap = new WeakMap();
|
|
19
|
+
function $14c0b72509d70225$export$16a4697467175487(target) {
|
|
20
|
+
if ((isIOS)()) {
|
|
21
|
+
if ($14c0b72509d70225$var$state === 'default') {
|
|
22
|
+
const documentObject = (getOwnerDocument)(target);
|
|
23
|
+
$14c0b72509d70225$var$savedUserSelect = documentObject.documentElement.style.webkitUserSelect;
|
|
24
|
+
documentObject.documentElement.style.webkitUserSelect = 'none';
|
|
25
|
+
}
|
|
26
|
+
$14c0b72509d70225$var$state = 'disabled';
|
|
27
|
+
} else if (target instanceof HTMLElement || target instanceof SVGElement) {
|
|
28
|
+
// If not iOS, store the target's original user-select and change to user-select: none
|
|
29
|
+
// Ignore state since it doesn't apply for non iOS
|
|
30
|
+
let property = 'userSelect' in target.style ? 'userSelect' : 'webkitUserSelect';
|
|
31
|
+
$14c0b72509d70225$var$modifiedElementMap.set(target, target.style[property]);
|
|
32
|
+
target.style[property] = 'none';
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
function $14c0b72509d70225$export$b0d6fa1ab32e3295(target) {
|
|
36
|
+
if ((isIOS)()) {
|
|
37
|
+
// If the state is already default, there's nothing to do.
|
|
38
|
+
// If it is restoring, then there's no need to queue a second restore.
|
|
39
|
+
if ($14c0b72509d70225$var$state !== 'disabled') return;
|
|
40
|
+
$14c0b72509d70225$var$state = 'restoring';
|
|
41
|
+
// There appears to be a delay on iOS where selection still might occur
|
|
42
|
+
// after pointer up, so wait a bit before removing user-select.
|
|
43
|
+
setTimeout(()=>{
|
|
44
|
+
// Wait for any CSS transitions to complete so we don't recompute style
|
|
45
|
+
// for the whole page in the middle of the animation and cause jank.
|
|
46
|
+
(runAfterTransition)(()=>{
|
|
47
|
+
// Avoid race conditions
|
|
48
|
+
if ($14c0b72509d70225$var$state === 'restoring') {
|
|
49
|
+
const documentObject = (getOwnerDocument)(target);
|
|
50
|
+
if (documentObject.documentElement.style.webkitUserSelect === 'none') documentObject.documentElement.style.webkitUserSelect = $14c0b72509d70225$var$savedUserSelect || '';
|
|
51
|
+
$14c0b72509d70225$var$savedUserSelect = '';
|
|
52
|
+
$14c0b72509d70225$var$state = 'default';
|
|
53
|
+
}
|
|
54
|
+
});
|
|
55
|
+
}, 300);
|
|
56
|
+
} else if (target instanceof HTMLElement || target instanceof SVGElement) // If not iOS, restore the target's original user-select if any
|
|
57
|
+
// Ignore state since it doesn't apply for non iOS
|
|
58
|
+
{
|
|
59
|
+
if (target && $14c0b72509d70225$var$modifiedElementMap.has(target)) {
|
|
60
|
+
let targetOldUserSelect = $14c0b72509d70225$var$modifiedElementMap.get(target);
|
|
61
|
+
let property = 'userSelect' in target.style ? 'userSelect' : 'webkitUserSelect';
|
|
62
|
+
if (target.style[property] === 'none') target.style[property] = targetOldUserSelect;
|
|
63
|
+
if (target.getAttribute('style') === '') target.removeAttribute('style');
|
|
64
|
+
$14c0b72509d70225$var$modifiedElementMap.delete(target);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
export { $14c0b72509d70225$export$16a4697467175487 as disableTextSelection, $14c0b72509d70225$export$b0d6fa1ab32e3295 as restoreTextSelection };
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { useSyntheticBlurEvent as $8a9cb279dc87e130$export$715c682d09d639cc } from './utils.js';
|
|
2
|
+
import { useCallback } from 'react';
|
|
3
|
+
import { getOwnerDocument, getActiveElement, getEventTarget } from '@react-aria/utils';
|
|
4
|
+
|
|
5
|
+
/*
|
|
6
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
7
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
8
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
9
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
10
|
+
*
|
|
11
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
12
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
13
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
14
|
+
* governing permissions and limitations under the License.
|
|
15
|
+
*/ // Portions of the code in this file are based on code from react.
|
|
16
|
+
// Original licensing for the following can be found in the
|
|
17
|
+
// NOTICE file in the root directory of this source tree.
|
|
18
|
+
// See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
function $a1ea59d68270f0dd$export$f8168d8dd8fd66e6(props) {
|
|
23
|
+
let { isDisabled: isDisabled, onFocus: onFocusProp, onBlur: onBlurProp, onFocusChange: onFocusChange } = props;
|
|
24
|
+
const onBlur = (useCallback)((e)=>{
|
|
25
|
+
if (e.target === e.currentTarget) {
|
|
26
|
+
if (onBlurProp) onBlurProp(e);
|
|
27
|
+
if (onFocusChange) onFocusChange(false);
|
|
28
|
+
return true;
|
|
29
|
+
}
|
|
30
|
+
}, [
|
|
31
|
+
onBlurProp,
|
|
32
|
+
onFocusChange
|
|
33
|
+
]);
|
|
34
|
+
const onSyntheticFocus = ($8a9cb279dc87e130$export$715c682d09d639cc)(onBlur);
|
|
35
|
+
const onFocus = (useCallback)((e)=>{
|
|
36
|
+
// Double check that document.activeElement actually matches e.target in case a previously chained
|
|
37
|
+
// focus handler already moved focus somewhere else.
|
|
38
|
+
const ownerDocument = (getOwnerDocument)(e.target);
|
|
39
|
+
const activeElement = ownerDocument ? (getActiveElement)(ownerDocument) : (getActiveElement)();
|
|
40
|
+
if (e.target === e.currentTarget && activeElement === (getEventTarget)(e.nativeEvent)) {
|
|
41
|
+
if (onFocusProp) onFocusProp(e);
|
|
42
|
+
if (onFocusChange) onFocusChange(true);
|
|
43
|
+
onSyntheticFocus(e);
|
|
44
|
+
}
|
|
45
|
+
}, [
|
|
46
|
+
onFocusChange,
|
|
47
|
+
onFocusProp,
|
|
48
|
+
onSyntheticFocus
|
|
49
|
+
]);
|
|
50
|
+
return {
|
|
51
|
+
focusProps: {
|
|
52
|
+
onFocus: !isDisabled && (onFocusProp || onFocusChange || onBlurProp) ? onFocus : undefined,
|
|
53
|
+
onBlur: !isDisabled && (onBlurProp || onFocusChange) ? onBlur : undefined
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
export { $a1ea59d68270f0dd$export$f8168d8dd8fd66e6 as useFocus };
|
|
@@ -0,0 +1,205 @@
|
|
|
1
|
+
import { ignoreFocusEvent as $8a9cb279dc87e130$export$fda7da73ab5d4c48 } from './utils.js';
|
|
2
|
+
import { getOwnerWindow, getOwnerDocument, isVirtualClick, isMac } from '@react-aria/utils';
|
|
3
|
+
import { useEffect } from 'react';
|
|
4
|
+
|
|
5
|
+
/*
|
|
6
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
7
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
8
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
9
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
10
|
+
*
|
|
11
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
12
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
13
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
14
|
+
* governing permissions and limitations under the License.
|
|
15
|
+
*/ // Portions of the code in this file are based on code from react.
|
|
16
|
+
// Original licensing for the following can be found in the
|
|
17
|
+
// NOTICE file in the root directory of this source tree.
|
|
18
|
+
// See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
let $507fabe10e71c6fb$var$currentModality = null;
|
|
24
|
+
let $507fabe10e71c6fb$var$changeHandlers = new Set();
|
|
25
|
+
let $507fabe10e71c6fb$export$d90243b58daecda7 = new Map(); // We use a map here to support setting event listeners across multiple document objects.
|
|
26
|
+
let $507fabe10e71c6fb$var$hasEventBeforeFocus = false;
|
|
27
|
+
let $507fabe10e71c6fb$var$hasBlurredWindowRecently = false;
|
|
28
|
+
// Only Tab or Esc keys will make focus visible on text input elements
|
|
29
|
+
const $507fabe10e71c6fb$var$FOCUS_VISIBLE_INPUT_KEYS = {
|
|
30
|
+
Tab: true,
|
|
31
|
+
Escape: true
|
|
32
|
+
};
|
|
33
|
+
function $507fabe10e71c6fb$var$triggerChangeHandlers(modality, e) {
|
|
34
|
+
for (let handler of $507fabe10e71c6fb$var$changeHandlers)handler(modality, e);
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* Helper function to determine if a KeyboardEvent is unmodified and could make keyboard focus styles visible.
|
|
38
|
+
*/ function $507fabe10e71c6fb$var$isValidKey(e) {
|
|
39
|
+
// Control and Shift keys trigger when navigating back to the tab with keyboard.
|
|
40
|
+
return !(e.metaKey || !(isMac)() && e.altKey || e.ctrlKey || e.key === 'Control' || e.key === 'Shift' || e.key === 'Meta');
|
|
41
|
+
}
|
|
42
|
+
function $507fabe10e71c6fb$var$handleKeyboardEvent(e) {
|
|
43
|
+
$507fabe10e71c6fb$var$hasEventBeforeFocus = true;
|
|
44
|
+
if ($507fabe10e71c6fb$var$isValidKey(e)) {
|
|
45
|
+
$507fabe10e71c6fb$var$currentModality = 'keyboard';
|
|
46
|
+
$507fabe10e71c6fb$var$triggerChangeHandlers('keyboard', e);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
function $507fabe10e71c6fb$var$handlePointerEvent(e) {
|
|
50
|
+
$507fabe10e71c6fb$var$currentModality = 'pointer';
|
|
51
|
+
if (e.type === 'mousedown' || e.type === 'pointerdown') {
|
|
52
|
+
$507fabe10e71c6fb$var$hasEventBeforeFocus = true;
|
|
53
|
+
$507fabe10e71c6fb$var$triggerChangeHandlers('pointer', e);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
function $507fabe10e71c6fb$var$handleClickEvent(e) {
|
|
57
|
+
if ((isVirtualClick)(e)) {
|
|
58
|
+
$507fabe10e71c6fb$var$hasEventBeforeFocus = true;
|
|
59
|
+
$507fabe10e71c6fb$var$currentModality = 'virtual';
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
function $507fabe10e71c6fb$var$handleFocusEvent(e) {
|
|
63
|
+
// Firefox fires two extra focus events when the user first clicks into an iframe:
|
|
64
|
+
// first on the window, then on the document. We ignore these events so they don't
|
|
65
|
+
// cause keyboard focus rings to appear.
|
|
66
|
+
if (e.target === window || e.target === document || ($8a9cb279dc87e130$export$fda7da73ab5d4c48) || !e.isTrusted) return;
|
|
67
|
+
// If a focus event occurs without a preceding keyboard or pointer event, switch to virtual modality.
|
|
68
|
+
// This occurs, for example, when navigating a form with the next/previous buttons on iOS.
|
|
69
|
+
if (!$507fabe10e71c6fb$var$hasEventBeforeFocus && !$507fabe10e71c6fb$var$hasBlurredWindowRecently) {
|
|
70
|
+
$507fabe10e71c6fb$var$currentModality = 'virtual';
|
|
71
|
+
$507fabe10e71c6fb$var$triggerChangeHandlers('virtual', e);
|
|
72
|
+
}
|
|
73
|
+
$507fabe10e71c6fb$var$hasEventBeforeFocus = false;
|
|
74
|
+
$507fabe10e71c6fb$var$hasBlurredWindowRecently = false;
|
|
75
|
+
}
|
|
76
|
+
function $507fabe10e71c6fb$var$handleWindowBlur() {
|
|
77
|
+
if ($8a9cb279dc87e130$export$fda7da73ab5d4c48) return;
|
|
78
|
+
// When the window is blurred, reset state. This is necessary when tabbing out of the window,
|
|
79
|
+
// for example, since a subsequent focus event won't be fired.
|
|
80
|
+
$507fabe10e71c6fb$var$hasEventBeforeFocus = false;
|
|
81
|
+
$507fabe10e71c6fb$var$hasBlurredWindowRecently = true;
|
|
82
|
+
}
|
|
83
|
+
/**
|
|
84
|
+
* Setup global event listeners to control when keyboard focus style should be visible.
|
|
85
|
+
*/ function $507fabe10e71c6fb$var$setupGlobalFocusEvents(element) {
|
|
86
|
+
if (typeof window === 'undefined' || typeof document === 'undefined' || $507fabe10e71c6fb$export$d90243b58daecda7.get((getOwnerWindow)(element))) return;
|
|
87
|
+
const windowObject = (getOwnerWindow)(element);
|
|
88
|
+
const documentObject = (getOwnerDocument)(element);
|
|
89
|
+
// Programmatic focus() calls shouldn't affect the current input modality.
|
|
90
|
+
// However, we need to detect other cases when a focus event occurs without
|
|
91
|
+
// a preceding user event (e.g. screen reader focus). Overriding the focus
|
|
92
|
+
// method on HTMLElement.prototype is a bit hacky, but works.
|
|
93
|
+
let focus = windowObject.HTMLElement.prototype.focus;
|
|
94
|
+
windowObject.HTMLElement.prototype.focus = function() {
|
|
95
|
+
$507fabe10e71c6fb$var$hasEventBeforeFocus = true;
|
|
96
|
+
focus.apply(this, arguments);
|
|
97
|
+
};
|
|
98
|
+
documentObject.addEventListener('keydown', $507fabe10e71c6fb$var$handleKeyboardEvent, true);
|
|
99
|
+
documentObject.addEventListener('keyup', $507fabe10e71c6fb$var$handleKeyboardEvent, true);
|
|
100
|
+
documentObject.addEventListener('click', $507fabe10e71c6fb$var$handleClickEvent, true);
|
|
101
|
+
// Register focus events on the window so they are sure to happen
|
|
102
|
+
// before React's event listeners (registered on the document).
|
|
103
|
+
windowObject.addEventListener('focus', $507fabe10e71c6fb$var$handleFocusEvent, true);
|
|
104
|
+
windowObject.addEventListener('blur', $507fabe10e71c6fb$var$handleWindowBlur, false);
|
|
105
|
+
if (typeof PointerEvent !== 'undefined') {
|
|
106
|
+
documentObject.addEventListener('pointerdown', $507fabe10e71c6fb$var$handlePointerEvent, true);
|
|
107
|
+
documentObject.addEventListener('pointermove', $507fabe10e71c6fb$var$handlePointerEvent, true);
|
|
108
|
+
documentObject.addEventListener('pointerup', $507fabe10e71c6fb$var$handlePointerEvent, true);
|
|
109
|
+
} else if (process.env.NODE_ENV === 'test') {
|
|
110
|
+
documentObject.addEventListener('mousedown', $507fabe10e71c6fb$var$handlePointerEvent, true);
|
|
111
|
+
documentObject.addEventListener('mousemove', $507fabe10e71c6fb$var$handlePointerEvent, true);
|
|
112
|
+
documentObject.addEventListener('mouseup', $507fabe10e71c6fb$var$handlePointerEvent, true);
|
|
113
|
+
}
|
|
114
|
+
// Add unmount handler
|
|
115
|
+
windowObject.addEventListener('beforeunload', ()=>{
|
|
116
|
+
$507fabe10e71c6fb$var$tearDownWindowFocusTracking(element);
|
|
117
|
+
}, {
|
|
118
|
+
once: true
|
|
119
|
+
});
|
|
120
|
+
$507fabe10e71c6fb$export$d90243b58daecda7.set(windowObject, {
|
|
121
|
+
focus: focus
|
|
122
|
+
});
|
|
123
|
+
}
|
|
124
|
+
const $507fabe10e71c6fb$var$tearDownWindowFocusTracking = (element, loadListener)=>{
|
|
125
|
+
const windowObject = (getOwnerWindow)(element);
|
|
126
|
+
const documentObject = (getOwnerDocument)(element);
|
|
127
|
+
if (loadListener) documentObject.removeEventListener('DOMContentLoaded', loadListener);
|
|
128
|
+
if (!$507fabe10e71c6fb$export$d90243b58daecda7.has(windowObject)) return;
|
|
129
|
+
windowObject.HTMLElement.prototype.focus = $507fabe10e71c6fb$export$d90243b58daecda7.get(windowObject).focus;
|
|
130
|
+
documentObject.removeEventListener('keydown', $507fabe10e71c6fb$var$handleKeyboardEvent, true);
|
|
131
|
+
documentObject.removeEventListener('keyup', $507fabe10e71c6fb$var$handleKeyboardEvent, true);
|
|
132
|
+
documentObject.removeEventListener('click', $507fabe10e71c6fb$var$handleClickEvent, true);
|
|
133
|
+
windowObject.removeEventListener('focus', $507fabe10e71c6fb$var$handleFocusEvent, true);
|
|
134
|
+
windowObject.removeEventListener('blur', $507fabe10e71c6fb$var$handleWindowBlur, false);
|
|
135
|
+
if (typeof PointerEvent !== 'undefined') {
|
|
136
|
+
documentObject.removeEventListener('pointerdown', $507fabe10e71c6fb$var$handlePointerEvent, true);
|
|
137
|
+
documentObject.removeEventListener('pointermove', $507fabe10e71c6fb$var$handlePointerEvent, true);
|
|
138
|
+
documentObject.removeEventListener('pointerup', $507fabe10e71c6fb$var$handlePointerEvent, true);
|
|
139
|
+
} else if (process.env.NODE_ENV === 'test') {
|
|
140
|
+
documentObject.removeEventListener('mousedown', $507fabe10e71c6fb$var$handlePointerEvent, true);
|
|
141
|
+
documentObject.removeEventListener('mousemove', $507fabe10e71c6fb$var$handlePointerEvent, true);
|
|
142
|
+
documentObject.removeEventListener('mouseup', $507fabe10e71c6fb$var$handlePointerEvent, true);
|
|
143
|
+
}
|
|
144
|
+
$507fabe10e71c6fb$export$d90243b58daecda7.delete(windowObject);
|
|
145
|
+
};
|
|
146
|
+
function $507fabe10e71c6fb$export$2f1888112f558a7d(element) {
|
|
147
|
+
const documentObject = (getOwnerDocument)(element);
|
|
148
|
+
let loadListener;
|
|
149
|
+
if (documentObject.readyState !== 'loading') $507fabe10e71c6fb$var$setupGlobalFocusEvents(element);
|
|
150
|
+
else {
|
|
151
|
+
loadListener = ()=>{
|
|
152
|
+
$507fabe10e71c6fb$var$setupGlobalFocusEvents(element);
|
|
153
|
+
};
|
|
154
|
+
documentObject.addEventListener('DOMContentLoaded', loadListener);
|
|
155
|
+
}
|
|
156
|
+
return ()=>$507fabe10e71c6fb$var$tearDownWindowFocusTracking(element, loadListener);
|
|
157
|
+
}
|
|
158
|
+
// Server-side rendering does not have the document object defined
|
|
159
|
+
// eslint-disable-next-line no-restricted-globals
|
|
160
|
+
if (typeof document !== 'undefined') $507fabe10e71c6fb$export$2f1888112f558a7d();
|
|
161
|
+
function $507fabe10e71c6fb$export$b9b3dfddab17db27() {
|
|
162
|
+
return $507fabe10e71c6fb$var$currentModality !== 'pointer';
|
|
163
|
+
}
|
|
164
|
+
const $507fabe10e71c6fb$var$nonTextInputTypes = new Set([
|
|
165
|
+
'checkbox',
|
|
166
|
+
'radio',
|
|
167
|
+
'range',
|
|
168
|
+
'color',
|
|
169
|
+
'file',
|
|
170
|
+
'image',
|
|
171
|
+
'button',
|
|
172
|
+
'submit',
|
|
173
|
+
'reset'
|
|
174
|
+
]);
|
|
175
|
+
/**
|
|
176
|
+
* If this is attached to text input component, return if the event is a focus event (Tab/Escape keys pressed) so that
|
|
177
|
+
* focus visible style can be properly set.
|
|
178
|
+
*/ function $507fabe10e71c6fb$var$isKeyboardFocusEvent(isTextInput, modality, e) {
|
|
179
|
+
let document1 = (getOwnerDocument)(e === null || e === void 0 ? void 0 : e.target);
|
|
180
|
+
const IHTMLInputElement = typeof window !== 'undefined' ? (getOwnerWindow)(e === null || e === void 0 ? void 0 : e.target).HTMLInputElement : HTMLInputElement;
|
|
181
|
+
const IHTMLTextAreaElement = typeof window !== 'undefined' ? (getOwnerWindow)(e === null || e === void 0 ? void 0 : e.target).HTMLTextAreaElement : HTMLTextAreaElement;
|
|
182
|
+
const IHTMLElement = typeof window !== 'undefined' ? (getOwnerWindow)(e === null || e === void 0 ? void 0 : e.target).HTMLElement : HTMLElement;
|
|
183
|
+
const IKeyboardEvent = typeof window !== 'undefined' ? (getOwnerWindow)(e === null || e === void 0 ? void 0 : e.target).KeyboardEvent : KeyboardEvent;
|
|
184
|
+
// For keyboard events that occur on a non-input element that will move focus into input element (aka ArrowLeft going from Datepicker button to the main input group)
|
|
185
|
+
// we need to rely on the user passing isTextInput into here. This way we can skip toggling focus visiblity for said input element
|
|
186
|
+
isTextInput = isTextInput || document1.activeElement instanceof IHTMLInputElement && !$507fabe10e71c6fb$var$nonTextInputTypes.has(document1.activeElement.type) || document1.activeElement instanceof IHTMLTextAreaElement || document1.activeElement instanceof IHTMLElement && document1.activeElement.isContentEditable;
|
|
187
|
+
return !(isTextInput && modality === 'keyboard' && e instanceof IKeyboardEvent && !$507fabe10e71c6fb$var$FOCUS_VISIBLE_INPUT_KEYS[e.key]);
|
|
188
|
+
}
|
|
189
|
+
function $507fabe10e71c6fb$export$ec71b4b83ac08ec3(fn, deps, opts) {
|
|
190
|
+
$507fabe10e71c6fb$var$setupGlobalFocusEvents();
|
|
191
|
+
(useEffect)(()=>{
|
|
192
|
+
let handler = (modality, e)=>{
|
|
193
|
+
// We want to early return for any keyboard events that occur inside text inputs EXCEPT for Tab and Escape
|
|
194
|
+
if (!$507fabe10e71c6fb$var$isKeyboardFocusEvent(!!(opts === null || opts === void 0 ? void 0 : opts.isTextInput), modality, e)) return;
|
|
195
|
+
fn($507fabe10e71c6fb$export$b9b3dfddab17db27());
|
|
196
|
+
};
|
|
197
|
+
$507fabe10e71c6fb$var$changeHandlers.add(handler);
|
|
198
|
+
return ()=>{
|
|
199
|
+
$507fabe10e71c6fb$var$changeHandlers.delete(handler);
|
|
200
|
+
};
|
|
201
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
202
|
+
}, deps);
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
export { $507fabe10e71c6fb$export$2f1888112f558a7d as addWindowFocusTracking, $507fabe10e71c6fb$export$d90243b58daecda7 as hasSetupGlobalListeners, $507fabe10e71c6fb$export$b9b3dfddab17db27 as isFocusVisible, $507fabe10e71c6fb$export$ec71b4b83ac08ec3 as useFocusVisibleListener };
|