@opengovsg/oui 0.0.13 → 0.0.15

package/dist/cjs/toggle/toggle.cjs

@@ -3,7 +3,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
+var $670gB$react = require('react');
 var reactAria = require('react-aria');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
@@ -20,12 +20,12 @@ const Toggle = ({
     ouiTheme.toggleStyles.variantKeys
   );
   const slots = ouiTheme.toggleStyles(variantProps);
-  const clonedThumbIcon = react.useCallback(
+  const clonedThumbIcon = $670gB$react.useCallback(
     (renderProps) => {
       const baseProps = {
         className: slots.thumbIcon({ className: classNames?.thumbIcon })
       };
-      return typeof thumbIcon === "function" ? thumbIcon(reactAria.mergeProps(baseProps, renderProps)) : thumbIcon && react.cloneElement(thumbIcon, baseProps);
+      return typeof thumbIcon === "function" ? thumbIcon(reactAria.mergeProps(baseProps, renderProps)) : thumbIcon && $670gB$react.cloneElement(thumbIcon, baseProps);
     },
     [classNames?.thumbIcon, slots, thumbIcon]
   );

package/dist/esm/checkbox/checkbox-group-style-context.js

@@ -0,0 +1,13 @@
+"use strict";
+"use client";
+import { createContext } from '../system/react-utils/context.js';
+
+const [CheckboxGroupStyleContext, useCheckboxGroupStyleContext] = createContext({
+  name: "CheckboxGroupStyleContext",
+  strict: false,
+  defaultValue: {
+    size: "md"
+  }
+});
+
+export { CheckboxGroupStyleContext, useCheckboxGroupStyleContext };

package/dist/esm/checkbox/checkbox.js

@@ -0,0 +1,91 @@
+"use strict";
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Checkbox as Checkbox$1, composeRenderProps, Provider, CheckboxGroup as CheckboxGroup$1 } from 'react-aria-components';
+import { checkboxStyles, checkboxGroupStyles } from '@opengovsg/oui-theme';
+import { Label, Description, FieldError } from '../field/field.js';
+import { mapPropsVariants } from '../system/utils.js';
+import { useCheckboxGroupStyleContext, CheckboxGroupStyleContext } from './checkbox-group-style-context.js';
+import Minus from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/minus.js';
+import Check from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.js';
+
+const Checkbox = ({
+  classNames,
+  className,
+  ...originalProps
+}) => {
+  const [props, variants] = mapPropsVariants(
+    originalProps,
+    checkboxStyles.variantKeys
+  );
+  const { size } = useCheckboxGroupStyleContext();
+  const styles = checkboxStyles({ size, ...variants });
+  return /* @__PURE__ */ jsx(
+    Checkbox$1,
+    {
+      ...props,
+      isDisabled: variants.isDisabled,
+      isInvalid: variants.isInvalid,
+      isSelected: variants.isSelected,
+      className: composeRenderProps(
+        className ?? classNames?.base,
+        (className2, renderProps) => styles.base({ ...renderProps, className: className2 })
+      ),
+      children: ({ isSelected, isIndeterminate, ...renderProps }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: styles.box({
+              isSelected: isSelected || isIndeterminate,
+              ...renderProps,
+              className: classNames?.box
+            }),
+            children: isIndeterminate ? /* @__PURE__ */ jsx(
+              Minus,
+              {
+                "aria-hidden": true,
+                className: styles.icon({ className: classNames?.icon })
+              }
+            ) : isSelected ? /* @__PURE__ */ jsx(
+              Check,
+              {
+                "aria-hidden": true,
+                className: styles.icon({ className: classNames?.icon })
+              }
+            ) : null
+          }
+        ),
+        props.children
+      ] })
+    }
+  );
+};
+function CheckboxGroup({
+  description,
+  errorMessage,
+  classNames,
+  size,
+  ...props
+}) {
+  const context = {
+    size
+  };
+  return /* @__PURE__ */ jsx(Provider, { values: [[CheckboxGroupStyleContext, context]], children: /* @__PURE__ */ jsxs(
+    CheckboxGroup$1,
+    {
+      ...props,
+      className: composeRenderProps(
+        props.className ?? classNames?.base,
+        (className, renderProps) => checkboxGroupStyles({ ...renderProps, size, className })
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Label, { size, className: classNames?.label, children: props.label }),
+        props.children,
+        description && /* @__PURE__ */ jsx(Description, { size, className: classNames?.description, children: description }),
+        /* @__PURE__ */ jsx(FieldError, { size, classNames: classNames?.error, children: errorMessage })
+      ]
+    }
+  ) });
+}
+
+export { Checkbox, CheckboxGroup };

package/dist/esm/checkbox/index.js

@@ -0,0 +1,3 @@
+"use strict";
+export { Checkbox, CheckboxGroup } from './checkbox.js';
+export { CheckboxGroupStyleContext, useCheckboxGroupStyleContext } from './checkbox-group-style-context.js';

package/dist/esm/date-picker/date-picker.js

@@ -4,12 +4,13 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { DatePicker as DatePicker$1, Dialog } from 'react-aria-components';
 import { datePickerStyles, composeTailwindRenderProps } from '@opengovsg/oui-theme';
+import { Calendar as Calendar$1 } from '../calendar/calendar.js';
+import '@internationalized/date';
+import { DateInput } from '../date-field/date-field.js';
 import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
 import { Popover } from '../popover/popover.js';
 import { mapPropsVariants } from '../system/utils.js';
-import { DateInput } from '../date-field/date-field.js';
 import Calendar from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/calendar.js';
-import { Calendar as Calendar$1 } from '../calendar/calendar.js';
 import { Button } from '../button/button.js';
 
 function DatePicker(originalProps) {

package/dist/esm/date-range-picker/date-range-picker.js

@@ -5,12 +5,12 @@ import { useMemo } from 'react';
 import { CalendarDate } from '@internationalized/date';
 import { DateRangePicker as DateRangePicker$1, Dialog } from 'react-aria-components';
 import { dateRangePickerStyles, composeTailwindRenderProps } from '@opengovsg/oui-theme';
+import { DateInput } from '../date-field/date-field.js';
 import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
 import { Popover } from '../popover/popover.js';
 import { RangeCalendar } from '../range-calendar/range-calendar.js';
 import { mapPropsVariants } from '../system/utils.js';
 import Calendar from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/calendar.js';
-import { DateInput } from '../date-field/date-field.js';
 import { Button } from '../button/button.js';
 
 function DateRangePicker(originalProps) {

package/dist/esm/index.js

@@ -12,26 +12,33 @@ export { TextField } from './text-field/text-field.js';
 export { Description, FieldError, FieldGroup, Label } from './field/field.js';
 export { TextArea } from './text-area/text-area.js';
 export { TextAreaField } from './text-area-field/text-area-field.js';
+export { ComboBox, ComboBoxEmptyState } from './combo-box/combo-box.js';
+export { ComboBoxFuzzy } from './combo-box/combo-box-fuzzy.js';
+export { ComboBoxItem } from './combo-box/combo-box-item.js';
+export { ComboBoxVariantContext, useComboBoxVariantContext } from './combo-box/combo-box-variant-context.js';
 export { TagField } from './tag-field/tag-field.js';
 export { TagFieldItem } from './tag-field/tag-field-item.js';
 export { Select } from './select/select.js';
 export { SelectItem } from './select/select-item.js';
 export { SelectVariantContext, useSelectVariantContext } from './select/select-variant-context.js';
+export { Calendar, CalendarStateWrapper } from './calendar/calendar.js';
+export { CalendarStyleContext, useCalendarStyleContext } from './calendar/calendar-style-context.js';
+export { getEraFormat, useGenerateLocalizedMonths, useGenerateLocalizedYears, useLocalizedMonthYear } from './calendar/utils.js';
+export { CalendarDate } from '@internationalized/date';
 export { RangeCalendar, RangeCalendarCell, RangeCalendarStateWrapper } from './range-calendar/range-calendar.js';
 export { Menu, MenuItem, MenuSection, MenuSeparator, MenuTrigger, MenuVariantContext, SubmenuTrigger, useMenuVariantContext } from './menu/menu.js';
 export { Popover } from './popover/popover.js';
 export { Tab, TabList, TabPanel, Tabs, TabsVariantContext, useTabsVariantContext } from './tabs/tabs.js';
+export { DateField, DateInput } from './date-field/date-field.js';
+export { DatePicker } from './date-picker/date-picker.js';
 export { DateRangePicker } from './date-range-picker/date-range-picker.js';
+export { Checkbox, CheckboxGroup } from './checkbox/checkbox.js';
+export { CheckboxGroupStyleContext, useCheckboxGroupStyleContext } from './checkbox/checkbox-group-style-context.js';
+export { Pagination } from './pagination/pagination.js';
+export { PaginationCursor } from './pagination/pagination-cursor.js';
+export { PaginationItem } from './pagination/pagination-item.js';
+export { PaginationItemType } from './pagination/hooks/use-pagination.js';
+export { CURSOR_TRANSITION_TIMEOUT, usePagination } from './pagination/use-pagination.js';
 export { Button } from './button/button.js';
-export { ComboBox, ComboBoxEmptyState } from './combo-box/combo-box.js';
-export { ComboBoxFuzzy } from './combo-box/combo-box-fuzzy.js';
-export { ComboBoxItem } from './combo-box/combo-box-item.js';
-export { ComboBoxVariantContext, useComboBoxVariantContext } from './combo-box/combo-box-variant-context.js';
 export { Banner } from './banner/banner.js';
 export { Badge } from './badge/badge.js';
-export { CalendarDate } from '@internationalized/date';
-export { Calendar, CalendarStateWrapper } from './calendar/calendar.js';
-export { CalendarStyleContext, useCalendarStyleContext } from './calendar/calendar-style-context.js';
-export { getEraFormat, useGenerateLocalizedMonths, useGenerateLocalizedYears, useLocalizedMonthYear } from './calendar/utils.js';
-export { DateField, DateInput } from './date-field/date-field.js';
-export { DatePicker } from './date-picker/date-picker.js';

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

@@ -0,0 +1,43 @@
+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';
+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';
+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';
+import { useRef, useState, useCallback } from 'react';
+
+function $f7dceffc5ad7768b$export$4e328f61c538687f(props = {}) {
+    let { autoFocus: autoFocus = false, isTextInput: isTextInput, within: within } = props;
+    let state = (useRef)({
+        isFocused: false,
+        isFocusVisible: autoFocus || ($507fabe10e71c6fb$export$b9b3dfddab17db27)()
+    });
+    let [isFocused, setFocused] = (useState)(false);
+    let [isFocusVisibleState, setFocusVisible] = (useState)(()=>state.current.isFocused && state.current.isFocusVisible);
+    let updateState = (useCallback)(()=>setFocusVisible(state.current.isFocused && state.current.isFocusVisible), []);
+    let onFocusChange = (useCallback)((isFocused)=>{
+        state.current.isFocused = isFocused;
+        setFocused(isFocused);
+        updateState();
+    }, [
+        updateState
+    ]);
+    ($507fabe10e71c6fb$export$ec71b4b83ac08ec3)((isFocusVisible)=>{
+        state.current.isFocusVisible = isFocusVisible;
+        updateState();
+    }, [], {
+        isTextInput: isTextInput
+    });
+    let { focusProps: focusProps } = ($a1ea59d68270f0dd$export$f8168d8dd8fd66e6)({
+        isDisabled: within,
+        onFocusChange: onFocusChange
+    });
+    let { focusWithinProps: focusWithinProps } = ($9ab94262bd0047c7$export$420e68273165f4ec)({
+        isDisabled: !within,
+        onFocusWithinChange: onFocusChange
+    });
+    return {
+        isFocused: isFocused,
+        isFocusVisible: isFocusVisibleState,
+        focusProps: within ? focusWithinProps : focusProps
+    };
+}
+
+export { $f7dceffc5ad7768b$export$4e328f61c538687f as useFocusRing };

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

@@ -0,0 +1,19 @@
+import $670gB$react from 'react';
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+const $ae1eeba8b9eafd08$export$5165eccb35aaadb5 = ($670gB$react).createContext({
+    register: ()=>{}
+});
+$ae1eeba8b9eafd08$export$5165eccb35aaadb5.displayName = 'PressResponderContext';
+
+export { $ae1eeba8b9eafd08$export$5165eccb35aaadb5 as PressResponderContext };

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

@@ -0,0 +1,69 @@
+import { isIOS, getOwnerDocument, runAfterTransition } from '@react-aria/utils';
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+// Note that state only matters here for iOS. Non-iOS gets user-select: none applied to the target element
+// rather than at the document level so we just need to apply/remove user-select: none for each pressed element individually
+let $14c0b72509d70225$var$state = 'default';
+let $14c0b72509d70225$var$savedUserSelect = '';
+let $14c0b72509d70225$var$modifiedElementMap = new WeakMap();
+function $14c0b72509d70225$export$16a4697467175487(target) {
+    if ((isIOS)()) {
+        if ($14c0b72509d70225$var$state === 'default') {
+            const documentObject = (getOwnerDocument)(target);
+            $14c0b72509d70225$var$savedUserSelect = documentObject.documentElement.style.webkitUserSelect;
+            documentObject.documentElement.style.webkitUserSelect = 'none';
+        }
+        $14c0b72509d70225$var$state = 'disabled';
+    } else if (target instanceof HTMLElement || target instanceof SVGElement) {
+        // If not iOS, store the target's original user-select and change to user-select: none
+        // Ignore state since it doesn't apply for non iOS
+        let property = 'userSelect' in target.style ? 'userSelect' : 'webkitUserSelect';
+        $14c0b72509d70225$var$modifiedElementMap.set(target, target.style[property]);
+        target.style[property] = 'none';
+    }
+}
+function $14c0b72509d70225$export$b0d6fa1ab32e3295(target) {
+    if ((isIOS)()) {
+        // If the state is already default, there's nothing to do.
+        // If it is restoring, then there's no need to queue a second restore.
+        if ($14c0b72509d70225$var$state !== 'disabled') return;
+        $14c0b72509d70225$var$state = 'restoring';
+        // There appears to be a delay on iOS where selection still might occur
+        // after pointer up, so wait a bit before removing user-select.
+        setTimeout(()=>{
+            // Wait for any CSS transitions to complete so we don't recompute style
+            // for the whole page in the middle of the animation and cause jank.
+            (runAfterTransition)(()=>{
+                // Avoid race conditions
+                if ($14c0b72509d70225$var$state === 'restoring') {
+                    const documentObject = (getOwnerDocument)(target);
+                    if (documentObject.documentElement.style.webkitUserSelect === 'none') documentObject.documentElement.style.webkitUserSelect = $14c0b72509d70225$var$savedUserSelect || '';
+                    $14c0b72509d70225$var$savedUserSelect = '';
+                    $14c0b72509d70225$var$state = 'default';
+                }
+            });
+        }, 300);
+    } else if (target instanceof HTMLElement || target instanceof SVGElement) // If not iOS, restore the target's original user-select if any
+    // Ignore state since it doesn't apply for non iOS
+    {
+        if (target && $14c0b72509d70225$var$modifiedElementMap.has(target)) {
+            let targetOldUserSelect = $14c0b72509d70225$var$modifiedElementMap.get(target);
+            let property = 'userSelect' in target.style ? 'userSelect' : 'webkitUserSelect';
+            if (target.style[property] === 'none') target.style[property] = targetOldUserSelect;
+            if (target.getAttribute('style') === '') target.removeAttribute('style');
+            $14c0b72509d70225$var$modifiedElementMap.delete(target);
+        }
+    }
+}
+
+export { $14c0b72509d70225$export$16a4697467175487 as disableTextSelection, $14c0b72509d70225$export$b0d6fa1ab32e3295 as restoreTextSelection };

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

@@ -0,0 +1,58 @@
+import { useSyntheticBlurEvent as $8a9cb279dc87e130$export$715c682d09d639cc } from './utils.js';
+import { useCallback } from 'react';
+import { getOwnerDocument, getActiveElement, getEventTarget } from '@react-aria/utils';
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ // Portions of the code in this file are based on code from react.
+// Original licensing for the following can be found in the
+// NOTICE file in the root directory of this source tree.
+// See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
+
+
+
+function $a1ea59d68270f0dd$export$f8168d8dd8fd66e6(props) {
+    let { isDisabled: isDisabled, onFocus: onFocusProp, onBlur: onBlurProp, onFocusChange: onFocusChange } = props;
+    const onBlur = (useCallback)((e)=>{
+        if (e.target === e.currentTarget) {
+            if (onBlurProp) onBlurProp(e);
+            if (onFocusChange) onFocusChange(false);
+            return true;
+        }
+    }, [
+        onBlurProp,
+        onFocusChange
+    ]);
+    const onSyntheticFocus = ($8a9cb279dc87e130$export$715c682d09d639cc)(onBlur);
+    const onFocus = (useCallback)((e)=>{
+        // Double check that document.activeElement actually matches e.target in case a previously chained
+        // focus handler already moved focus somewhere else.
+        const ownerDocument = (getOwnerDocument)(e.target);
+        const activeElement = ownerDocument ? (getActiveElement)(ownerDocument) : (getActiveElement)();
+        if (e.target === e.currentTarget && activeElement === (getEventTarget)(e.nativeEvent)) {
+            if (onFocusProp) onFocusProp(e);
+            if (onFocusChange) onFocusChange(true);
+            onSyntheticFocus(e);
+        }
+    }, [
+        onFocusChange,
+        onFocusProp,
+        onSyntheticFocus
+    ]);
+    return {
+        focusProps: {
+            onFocus: !isDisabled && (onFocusProp || onFocusChange || onBlurProp) ? onFocus : undefined,
+            onBlur: !isDisabled && (onBlurProp || onFocusChange) ? onBlur : undefined
+        }
+    };
+}
+
+export { $a1ea59d68270f0dd$export$f8168d8dd8fd66e6 as useFocus };

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

@@ -0,0 +1,205 @@
+import { ignoreFocusEvent as $8a9cb279dc87e130$export$fda7da73ab5d4c48 } from './utils.js';
+import { getOwnerWindow, getOwnerDocument, isVirtualClick, isMac } from '@react-aria/utils';
+import { useEffect } from 'react';
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ // Portions of the code in this file are based on code from react.
+// Original licensing for the following can be found in the
+// NOTICE file in the root directory of this source tree.
+// See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
+
+
+
+
+let $507fabe10e71c6fb$var$currentModality = null;
+let $507fabe10e71c6fb$var$changeHandlers = new Set();
+let $507fabe10e71c6fb$export$d90243b58daecda7 = new Map(); // We use a map here to support setting event listeners across multiple document objects.
+let $507fabe10e71c6fb$var$hasEventBeforeFocus = false;
+let $507fabe10e71c6fb$var$hasBlurredWindowRecently = false;
+// Only Tab or Esc keys will make focus visible on text input elements
+const $507fabe10e71c6fb$var$FOCUS_VISIBLE_INPUT_KEYS = {
+    Tab: true,
+    Escape: true
+};
+function $507fabe10e71c6fb$var$triggerChangeHandlers(modality, e) {
+    for (let handler of $507fabe10e71c6fb$var$changeHandlers)handler(modality, e);
+}
+/**
+ * Helper function to determine if a KeyboardEvent is unmodified and could make keyboard focus styles visible.
+ */ function $507fabe10e71c6fb$var$isValidKey(e) {
+    // Control and Shift keys trigger when navigating back to the tab with keyboard.
+    return !(e.metaKey || !(isMac)() && e.altKey || e.ctrlKey || e.key === 'Control' || e.key === 'Shift' || e.key === 'Meta');
+}
+function $507fabe10e71c6fb$var$handleKeyboardEvent(e) {
+    $507fabe10e71c6fb$var$hasEventBeforeFocus = true;
+    if ($507fabe10e71c6fb$var$isValidKey(e)) {
+        $507fabe10e71c6fb$var$currentModality = 'keyboard';
+        $507fabe10e71c6fb$var$triggerChangeHandlers('keyboard', e);
+    }
+}
+function $507fabe10e71c6fb$var$handlePointerEvent(e) {
+    $507fabe10e71c6fb$var$currentModality = 'pointer';
+    if (e.type === 'mousedown' || e.type === 'pointerdown') {
+        $507fabe10e71c6fb$var$hasEventBeforeFocus = true;
+        $507fabe10e71c6fb$var$triggerChangeHandlers('pointer', e);
+    }
+}
+function $507fabe10e71c6fb$var$handleClickEvent(e) {
+    if ((isVirtualClick)(e)) {
+        $507fabe10e71c6fb$var$hasEventBeforeFocus = true;
+        $507fabe10e71c6fb$var$currentModality = 'virtual';
+    }
+}
+function $507fabe10e71c6fb$var$handleFocusEvent(e) {
+    // Firefox fires two extra focus events when the user first clicks into an iframe:
+    // first on the window, then on the document. We ignore these events so they don't
+    // cause keyboard focus rings to appear.
+    if (e.target === window || e.target === document || ($8a9cb279dc87e130$export$fda7da73ab5d4c48) || !e.isTrusted) return;
+    // If a focus event occurs without a preceding keyboard or pointer event, switch to virtual modality.
+    // This occurs, for example, when navigating a form with the next/previous buttons on iOS.
+    if (!$507fabe10e71c6fb$var$hasEventBeforeFocus && !$507fabe10e71c6fb$var$hasBlurredWindowRecently) {
+        $507fabe10e71c6fb$var$currentModality = 'virtual';
+        $507fabe10e71c6fb$var$triggerChangeHandlers('virtual', e);
+    }
+    $507fabe10e71c6fb$var$hasEventBeforeFocus = false;
+    $507fabe10e71c6fb$var$hasBlurredWindowRecently = false;
+}
+function $507fabe10e71c6fb$var$handleWindowBlur() {
+    if ($8a9cb279dc87e130$export$fda7da73ab5d4c48) return;
+    // When the window is blurred, reset state. This is necessary when tabbing out of the window,
+    // for example, since a subsequent focus event won't be fired.
+    $507fabe10e71c6fb$var$hasEventBeforeFocus = false;
+    $507fabe10e71c6fb$var$hasBlurredWindowRecently = true;
+}
+/**
+ * Setup global event listeners to control when keyboard focus style should be visible.
+ */ function $507fabe10e71c6fb$var$setupGlobalFocusEvents(element) {
+    if (typeof window === 'undefined' || typeof document === 'undefined' || $507fabe10e71c6fb$export$d90243b58daecda7.get((getOwnerWindow)(element))) return;
+    const windowObject = (getOwnerWindow)(element);
+    const documentObject = (getOwnerDocument)(element);
+    // Programmatic focus() calls shouldn't affect the current input modality.
+    // However, we need to detect other cases when a focus event occurs without
+    // a preceding user event (e.g. screen reader focus). Overriding the focus
+    // method on HTMLElement.prototype is a bit hacky, but works.
+    let focus = windowObject.HTMLElement.prototype.focus;
+    windowObject.HTMLElement.prototype.focus = function() {
+        $507fabe10e71c6fb$var$hasEventBeforeFocus = true;
+        focus.apply(this, arguments);
+    };
+    documentObject.addEventListener('keydown', $507fabe10e71c6fb$var$handleKeyboardEvent, true);
+    documentObject.addEventListener('keyup', $507fabe10e71c6fb$var$handleKeyboardEvent, true);
+    documentObject.addEventListener('click', $507fabe10e71c6fb$var$handleClickEvent, true);
+    // Register focus events on the window so they are sure to happen
+    // before React's event listeners (registered on the document).
+    windowObject.addEventListener('focus', $507fabe10e71c6fb$var$handleFocusEvent, true);
+    windowObject.addEventListener('blur', $507fabe10e71c6fb$var$handleWindowBlur, false);
+    if (typeof PointerEvent !== 'undefined') {
+        documentObject.addEventListener('pointerdown', $507fabe10e71c6fb$var$handlePointerEvent, true);
+        documentObject.addEventListener('pointermove', $507fabe10e71c6fb$var$handlePointerEvent, true);
+        documentObject.addEventListener('pointerup', $507fabe10e71c6fb$var$handlePointerEvent, true);
+    } else if (process.env.NODE_ENV === 'test') {
+        documentObject.addEventListener('mousedown', $507fabe10e71c6fb$var$handlePointerEvent, true);
+        documentObject.addEventListener('mousemove', $507fabe10e71c6fb$var$handlePointerEvent, true);
+        documentObject.addEventListener('mouseup', $507fabe10e71c6fb$var$handlePointerEvent, true);
+    }
+    // Add unmount handler
+    windowObject.addEventListener('beforeunload', ()=>{
+        $507fabe10e71c6fb$var$tearDownWindowFocusTracking(element);
+    }, {
+        once: true
+    });
+    $507fabe10e71c6fb$export$d90243b58daecda7.set(windowObject, {
+        focus: focus
+    });
+}
+const $507fabe10e71c6fb$var$tearDownWindowFocusTracking = (element, loadListener)=>{
+    const windowObject = (getOwnerWindow)(element);
+    const documentObject = (getOwnerDocument)(element);
+    if (loadListener) documentObject.removeEventListener('DOMContentLoaded', loadListener);
+    if (!$507fabe10e71c6fb$export$d90243b58daecda7.has(windowObject)) return;
+    windowObject.HTMLElement.prototype.focus = $507fabe10e71c6fb$export$d90243b58daecda7.get(windowObject).focus;
+    documentObject.removeEventListener('keydown', $507fabe10e71c6fb$var$handleKeyboardEvent, true);
+    documentObject.removeEventListener('keyup', $507fabe10e71c6fb$var$handleKeyboardEvent, true);
+    documentObject.removeEventListener('click', $507fabe10e71c6fb$var$handleClickEvent, true);
+    windowObject.removeEventListener('focus', $507fabe10e71c6fb$var$handleFocusEvent, true);
+    windowObject.removeEventListener('blur', $507fabe10e71c6fb$var$handleWindowBlur, false);
+    if (typeof PointerEvent !== 'undefined') {
+        documentObject.removeEventListener('pointerdown', $507fabe10e71c6fb$var$handlePointerEvent, true);
+        documentObject.removeEventListener('pointermove', $507fabe10e71c6fb$var$handlePointerEvent, true);
+        documentObject.removeEventListener('pointerup', $507fabe10e71c6fb$var$handlePointerEvent, true);
+    } else if (process.env.NODE_ENV === 'test') {
+        documentObject.removeEventListener('mousedown', $507fabe10e71c6fb$var$handlePointerEvent, true);
+        documentObject.removeEventListener('mousemove', $507fabe10e71c6fb$var$handlePointerEvent, true);
+        documentObject.removeEventListener('mouseup', $507fabe10e71c6fb$var$handlePointerEvent, true);
+    }
+    $507fabe10e71c6fb$export$d90243b58daecda7.delete(windowObject);
+};
+function $507fabe10e71c6fb$export$2f1888112f558a7d(element) {
+    const documentObject = (getOwnerDocument)(element);
+    let loadListener;
+    if (documentObject.readyState !== 'loading') $507fabe10e71c6fb$var$setupGlobalFocusEvents(element);
+    else {
+        loadListener = ()=>{
+            $507fabe10e71c6fb$var$setupGlobalFocusEvents(element);
+        };
+        documentObject.addEventListener('DOMContentLoaded', loadListener);
+    }
+    return ()=>$507fabe10e71c6fb$var$tearDownWindowFocusTracking(element, loadListener);
+}
+// Server-side rendering does not have the document object defined
+// eslint-disable-next-line no-restricted-globals
+if (typeof document !== 'undefined') $507fabe10e71c6fb$export$2f1888112f558a7d();
+function $507fabe10e71c6fb$export$b9b3dfddab17db27() {
+    return $507fabe10e71c6fb$var$currentModality !== 'pointer';
+}
+const $507fabe10e71c6fb$var$nonTextInputTypes = new Set([
+    'checkbox',
+    'radio',
+    'range',
+    'color',
+    'file',
+    'image',
+    'button',
+    'submit',
+    'reset'
+]);
+/**
+ * If this is attached to text input component, return if the event is a focus event (Tab/Escape keys pressed) so that
+ * focus visible style can be properly set.
+ */ function $507fabe10e71c6fb$var$isKeyboardFocusEvent(isTextInput, modality, e) {
+    let document1 = (getOwnerDocument)(e === null || e === void 0 ? void 0 : e.target);
+    const IHTMLInputElement = typeof window !== 'undefined' ? (getOwnerWindow)(e === null || e === void 0 ? void 0 : e.target).HTMLInputElement : HTMLInputElement;
+    const IHTMLTextAreaElement = typeof window !== 'undefined' ? (getOwnerWindow)(e === null || e === void 0 ? void 0 : e.target).HTMLTextAreaElement : HTMLTextAreaElement;
+    const IHTMLElement = typeof window !== 'undefined' ? (getOwnerWindow)(e === null || e === void 0 ? void 0 : e.target).HTMLElement : HTMLElement;
+    const IKeyboardEvent = typeof window !== 'undefined' ? (getOwnerWindow)(e === null || e === void 0 ? void 0 : e.target).KeyboardEvent : KeyboardEvent;
+    // 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)
+    // we need to rely on the user passing isTextInput into here. This way we can skip toggling focus visiblity for said input element
+    isTextInput = isTextInput || document1.activeElement instanceof IHTMLInputElement && !$507fabe10e71c6fb$var$nonTextInputTypes.has(document1.activeElement.type) || document1.activeElement instanceof IHTMLTextAreaElement || document1.activeElement instanceof IHTMLElement && document1.activeElement.isContentEditable;
+    return !(isTextInput && modality === 'keyboard' && e instanceof IKeyboardEvent && !$507fabe10e71c6fb$var$FOCUS_VISIBLE_INPUT_KEYS[e.key]);
+}
+function $507fabe10e71c6fb$export$ec71b4b83ac08ec3(fn, deps, opts) {
+    $507fabe10e71c6fb$var$setupGlobalFocusEvents();
+    (useEffect)(()=>{
+        let handler = (modality, e)=>{
+            // We want to early return for any keyboard events that occur inside text inputs EXCEPT for Tab and Escape
+            if (!$507fabe10e71c6fb$var$isKeyboardFocusEvent(!!(opts === null || opts === void 0 ? void 0 : opts.isTextInput), modality, e)) return;
+            fn($507fabe10e71c6fb$export$b9b3dfddab17db27());
+        };
+        $507fabe10e71c6fb$var$changeHandlers.add(handler);
+        return ()=>{
+            $507fabe10e71c6fb$var$changeHandlers.delete(handler);
+        };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, deps);
+}
+
+export { $507fabe10e71c6fb$export$2f1888112f558a7d as addWindowFocusTracking, $507fabe10e71c6fb$export$d90243b58daecda7 as hasSetupGlobalListeners, $507fabe10e71c6fb$export$b9b3dfddab17db27 as isFocusVisible, $507fabe10e71c6fb$export$ec71b4b83ac08ec3 as useFocusVisibleListener };