@telus-uds/components-base 1.84.0 → 1.85.0

package/lib-module/HorizontalScroll/ScrollViewEnd.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback, useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import ScrollView from "react-native-web/dist/exports/ScrollView";
 import debounce from 'lodash.debounce';
@@ -12,16 +12,16 @@ const DEBOUNCE_MS = 100;
  * so we need to work around it with debouncing on `onScroll`. See:
  * https://github.com/necolas/react-native-web/issues/1021
  */
-const ScrollViewEnd = /*#__PURE__*/forwardRef((_ref, ref) => {
+const ScrollViewEnd = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     onScrollEnd,
-    onScroll,
+    onScroll = null,
     ...props
   } = _ref;
   // Return debounced function directly from useCallback so it has .cancel method etc.
   // Linter complains this stops it automatically scanning the deps, but we can check them manually.
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const debounceScrollEnd = useCallback(debounce(event => onScrollEnd(event), DEBOUNCE_MS), [onScrollEnd]);
+  const debounceScrollEnd = React.useCallback(debounce(event => onScrollEnd(event), DEBOUNCE_MS), [onScrollEnd]);
 
   // Call any onScroll handler immediately, and any onScrollEnd handler after 100ms of no scrolling
   const handleScroll = event => {
@@ -30,7 +30,7 @@ const ScrollViewEnd = /*#__PURE__*/forwardRef((_ref, ref) => {
   };
 
   // Cancel any lingering debounce timeouts on dismount
-  useEffect(() => debounceScrollEnd.cancel);
+  React.useEffect(() => debounceScrollEnd.cancel);
   return /*#__PURE__*/_jsx(ScrollView, {
     ref: ref,
     ...props,
@@ -43,7 +43,4 @@ ScrollViewEnd.propTypes = {
   onScrollEnd: PropTypes.func.isRequired,
   onScroll: PropTypes.func
 };
-ScrollViewEnd.defaultProps = {
-  onScroll: null
-};
 export default ScrollViewEnd;

package/lib-module/HorizontalScroll/ScrollViewEnd.native.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import ScrollView from "react-native-web/dist/exports/ScrollView";
 /**
@@ -7,7 +7,7 @@ import ScrollView from "react-native-web/dist/exports/ScrollView";
  * React Native has two scroll end handlers, we want to treat them both the same.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const ScrollViewEnd = /*#__PURE__*/forwardRef((_ref, ref) => {
+const ScrollViewEnd = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     onScrollEnd,
     ...props

package/lib-module/Icon/Icon.js

@@ -1,11 +1,11 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import Platform from "react-native-web/dist/exports/Platform";
 import View from "react-native-web/dist/exports/View";
 import PropTypes from 'prop-types';
 import { useThemeTokens } from '../ThemeProvider';
 import { getTokensPropType, scaleWithText, variantProp } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const Icon = /*#__PURE__*/forwardRef((_ref, ref) => {
+const Icon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     icon: IconComponent,
     accessibilityLabel,

package/lib-module/Icon/IconText.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
 import View from "react-native-web/dist/exports/View";
@@ -15,7 +15,7 @@ import { spacingProps } from '../utils';
  *  - within a container with `flexDirection: 'row'`
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const IconText = /*#__PURE__*/forwardRef((_ref, ref) => {
+const IconText = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var _iconProps$tokens, _iconProps$tokens2;
   let {
     space,

package/lib-module/IconButton/IconButton.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Pressable from "react-native-web/dist/exports/Pressable";
 import Platform from "react-native-web/dist/exports/Platform";
@@ -114,7 +114,7 @@ const selectInnerStyle = (_ref2, password) => {
  * based on these to an outer border and a base Card component. Not intended to be used in
  * apps or sites directly: build themed components on top of this.
  */
-const IconButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
+const IconButton = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     tokens,
     variant = {},

package/lib-module/InputLabel/InputLabel.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Text from "react-native-web/dist/exports/Text";
 import View from "react-native-web/dist/exports/View";
@@ -40,7 +40,7 @@ const selectGapStyles = _ref2 => {
     marginRight: gap
   };
 };
-const InputLabel = /*#__PURE__*/forwardRef((_ref3, ref) => {
+const InputLabel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     copy = 'en',
     label,

package/lib-module/InputLabel/LabelContent.js

@@ -1,7 +1,7 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { jsx as _jsx } from "react/jsx-runtime";
-const LabelContent = /*#__PURE__*/forwardRef((_ref, ref) => {
+const LabelContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     forId

package/lib-module/InputLabel/LabelContent.native.js

@@ -1,8 +1,8 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View"; // Since there's no equivalent for web's <label> element we're simply rendering whatever is passed to this component.
 import { jsx as _jsx } from "react/jsx-runtime";
-const LabelContent = /*#__PURE__*/forwardRef((_ref, ref) => {
+const LabelContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children
   } = _ref;

package/lib-module/InputSupports/InputSupports.js

@@ -1,13 +1,14 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import InputLabel from '../InputLabel';
 import Feedback from '../Feedback';
 import StackView from '../StackView';
 import { useThemeTokens } from '../ThemeProvider';
 import useInputSupports from './useInputSupports';
+import { getTokensPropType } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const InputSupports = /*#__PURE__*/forwardRef((_ref, ref) => {
+const InputSupports = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     copy = 'en',
@@ -84,7 +85,7 @@ InputSupports.propTypes = {
   /**
    * Additional tokens to override the default feedback tokens.
    */
-  feedbackTokens: PropTypes.objectOf(PropTypes.string),
+  feedbackTokens: getTokensPropType('Feedback'),
   /**
    * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
    */

package/lib-module/Link/ChevronLink.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeTokensCallback } from '../ThemeProvider';
 import { selectTokens, getTokensPropType, linkProps } from '../utils';
@@ -11,7 +11,7 @@ import LinkBase from './LinkBase';
  * ChevronLink is not intended to be deeply themable; variants passed to ChevronLink are forwarded to Link.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const ChevronLink = /*#__PURE__*/forwardRef((_ref, ref) => {
+const ChevronLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     direction = 'right',
     children,

package/lib-module/Link/InlinePressable.js

@@ -1,9 +1,12 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import Pressable from "react-native-web/dist/exports/Pressable";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import PropTypes from 'prop-types';
+
 /**
  * @typedef {import('react-native').PressableProps} PressableProps
  */
+
 /**
  * InlinePressable is an alternative to React Native's Pressable that works better when nested
  * inline inside Text. It accepts the same props as React Native's Pressable.
@@ -12,10 +15,8 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
  *
  * @param {PressableProps} PressableProps
  */
-// React Native exports prop Types but not propTypes, use JSDoc types here rather than duplicate RN
-// eslint-disable-next-line react/prop-types
 import { jsx as _jsx } from "react/jsx-runtime";
-const InlinePressable = /*#__PURE__*/forwardRef((_ref, ref) => {
+const InlinePressable = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     inlineFlex = true,
@@ -30,6 +31,11 @@ const InlinePressable = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
 });
 InlinePressable.displayName = 'InlinePressable';
+InlinePressable.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  inlineFlex: PropTypes.bool,
+  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.func])
+};
 const staticStyles = StyleSheet.create({
   inline: {
     // Stop Pressable defaulting to (block) flex

package/lib-module/Link/InlinePressable.native.js

@@ -1,10 +1,13 @@
 /* eslint-disable camelcase */
-import React, { forwardRef, useState } from 'react';
+import React from 'react';
 import Text from "react-native-web/dist/exports/Text";
 import TouchableWithoutFeedback from "react-native-web/dist/exports/TouchableWithoutFeedback";
+import PropTypes from 'prop-types';
+
 /**
  * @typedef {import('react-native').PressableProps} PressableProps
  */
+
 // TouchableWithoutFeedback and Pressable have similar but not identical props APIs
 import { jsx as _jsx } from "react/jsx-runtime";
 const pressablePropsToTouchable = _ref => {
@@ -40,19 +43,17 @@ const pressablePropsToTouchable = _ref => {
  *
  * @param {PressableProps} PressableProps
  */
-// React Native exports prop Types but not propTypes, use JSDoc types here rather than duplicate RN
-// eslint-disable-next-line react/prop-types
-const InlinePressable = /*#__PURE__*/forwardRef((_ref2, ref) => {
+const InlinePressable = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     onPress,
     children,
     style,
     ...rest
   } = _ref2;
-  const [isFocused, setIsFocused] = useState(false);
+  const [isFocused, setIsFocused] = React.useState(false);
   const handleFocus = () => setIsFocused(true);
   const handleBlur = () => setIsFocused(false);
-  const [isPressed, setIsPressed] = useState(false);
+  const [isPressed, setIsPressed] = React.useState(false);
   const handlePressIn = () => setIsPressed(true);
   const handlePressOut = () => setIsPressed(false);
   const pressState = {
@@ -78,4 +79,9 @@ const InlinePressable = /*#__PURE__*/forwardRef((_ref2, ref) => {
   });
 });
 InlinePressable.displayName = 'InlinePressable';
+InlinePressable.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.func]),
+  onPress: PropTypes.func
+};
 export default InlinePressable;

package/lib-module/Link/Link.js

@@ -1,8 +1,8 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import { useThemeTokensCallback } from '../ThemeProvider';
 import LinkBase from './LinkBase';
 import { jsx as _jsx } from "react/jsx-runtime";
-const Link = /*#__PURE__*/forwardRef((_ref, ref) => {
+const Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     href,
     children,

package/lib-module/Link/LinkBase.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Text from "react-native-web/dist/exports/Text";
 import Platform from "react-native-web/dist/exports/Platform";
@@ -131,7 +131,7 @@ const selectIconTokens = _ref5 => {
  *   dropped in favour of investigating if a full-featured CSS-in-JS package could or
  *   should be used more widely (e.g. styled components)
  */
-const LinkBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
+const LinkBase = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
     href,
     icon,

package/lib-module/Link/TextButton.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeTokensCallback } from '../ThemeProvider';
 import LinkBase from './LinkBase';
@@ -10,7 +10,7 @@ import { variantProp } from '../utils';
  * take place on the current page, or for navigation within an app.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const TextButton = /*#__PURE__*/forwardRef((_ref, ref) => {
+const TextButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     onPress,
     children,

package/lib-module/List/List.js

@@ -1,6 +1,7 @@
-import React, { cloneElement, forwardRef, Children } from 'react';
+import React from 'react';
 import View from "react-native-web/dist/exports/View";
 import Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import PropTypes from 'prop-types';
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -16,7 +17,7 @@ const isListItem = element => {
  * An unordered List component has a child a ListItem that
  * allows icon, dividers and customized typography
  */
-const List = /*#__PURE__*/forwardRef((_ref, ref) => {
+const List = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     showDivider,
@@ -28,12 +29,12 @@ const List = /*#__PURE__*/forwardRef((_ref, ref) => {
     }),
     ...rest
   } = _ref;
-  const items = Children.map(children, (child, index) => {
+  const items = React.Children.map(children, (child, index) => {
     // Pass ListItem-specific props to children (by name so teams can add their own ListItems)
     if (isListItem(child)) {
-      return /*#__PURE__*/cloneElement(child, {
+      return /*#__PURE__*/React.cloneElement(child, {
         showDivider,
-        isLastItem: index + 1 === Children.count(children),
+        isLastItem: index + 1 === React.Children.count(children),
         tokens,
         variant,
         ...child.props
@@ -43,15 +44,18 @@ const List = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
   return /*#__PURE__*/_jsx(View, {
     ref: ref,
-    style: {
-      flexShrink: 1,
-      flex: 1
-    },
+    style: styles.list,
     accessibilityRole: accessibilityRole,
     ...selectProps(rest),
     children: items
   });
 });
+const styles = StyleSheet.create({
+  list: {
+    flex: 1,
+    flexShrink: 1
+  }
+});
 List.displayName = 'List';
 List.propTypes = {
   ...selectedSystemPropTypes,

package/lib-module/List/ListItem.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import ListItemBase from './ListItemBase';
 import { useThemeTokens } from '../ThemeProvider';
 import { variantProp } from '../utils';
@@ -7,7 +7,7 @@ import { variantProp } from '../utils';
  * ListItem is responsible for rendering icon or a bullet as side item
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const ListItem = /*#__PURE__*/forwardRef((_ref, ref) => {
+const ListItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     tokens,
     variant,

package/lib-module/List/ListItemBase.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import View from "react-native-web/dist/exports/View";
 import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
@@ -36,7 +36,7 @@ const selectDividerStyles = _ref2 => {
 /**
  * ListItem is responsible for rendering icon or a bullet as side item
  */
-const ListItemBase = /*#__PURE__*/forwardRef((_ref3, ref) => {
+const ListItemBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     tokens,
     icon,
@@ -86,7 +86,7 @@ const ListItemBase = /*#__PURE__*/forwardRef((_ref3, ref) => {
   };
   return /*#__PURE__*/_jsx(View, {
     ref: ref,
-    style: [staticStyles.itemContainer, getContainerStyle()],
+    style: [staticStyles.container, getContainerStyle()],
     accessibilityRole: accessibilityRole,
     ...selectProps(rest),
     children: typeof children === 'function' ? children({
@@ -96,10 +96,7 @@ const ListItemBase = /*#__PURE__*/forwardRef((_ref3, ref) => {
       iconSize,
       isLastItem
     }) : /*#__PURE__*/_jsxs(View, {
-      style: [{
-        flex: 1,
-        flexDirection: 'row'
-      }],
+      style: staticStyles.container,
       children: [/*#__PURE__*/_jsx(ListItemMark, {
         tokens: {
           ...tokens,
@@ -126,7 +123,8 @@ const ListItemBase = /*#__PURE__*/forwardRef((_ref3, ref) => {
 });
 ListItemBase.displayName = 'ListItem';
 const staticStyles = StyleSheet.create({
-  itemContainer: {
+  container: {
+    flex: 1,
     flexDirection: 'row'
   },
   titleAndContentContainer: {

package/lib-module/List/ListItemContent.js

@@ -38,7 +38,7 @@ const selectItemTextStyles = (_ref, themeOptions) => {
  * It's the responsibility of themes to make sure that these text tokens align the first line of
  * text nicely against the bullet or icon rendered by ListIconMark.
  */
-const ListItemContent = _ref2 => {
+const ListItemContent = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     tokens,
     children
@@ -52,11 +52,13 @@ const ListItemContent = _ref2 => {
       textDecorationLine: tokens.itemUnderline,
       textDecorationColor: tokens.itemFontColor
     }],
+    ref: ref,
     children: wrapStringsInText(children, {
       style: textStyles
     })
   });
-};
+});
+ListItemContent.displayName = 'ListItemContent';
 const staticStyles = StyleSheet.create({
   wrap: {
     flex: 1,

package/lib-module/List/ListItemMark.js

@@ -60,7 +60,7 @@ const selectBulletContainerStyles = _ref4 => {
  * It's the responsibility of themes to make sure that the supplied tokens align the
  * icon or bullet nicely against the first line of text in a ListIconContent.
  */
-const ListItemMark = _ref5 => {
+const ListItemMark = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     icon,
     iconColor,
@@ -88,6 +88,7 @@ const ListItemMark = _ref5 => {
   const itemBulletPositioningStyles = selectBulletPositioningStyles(themeTokens);
   return /*#__PURE__*/_jsx(View, {
     style: [sideItemContainerStyles, itemBulletContainerStyles],
+    ref: ref,
     children: /*#__PURE__*/_jsx(View, {
       style: [staticStyles.bulletPositioning, itemBulletPositioningStyles],
       testID: "unordered-item-bullet",
@@ -99,7 +100,8 @@ const ListItemMark = _ref5 => {
       })
     })
   });
-};
+});
+ListItemMark.displayName = 'ListItemMark';
 ListItemMark.propTypes = {
   tokens: PropTypes.shape(tokenTypes).isRequired,
   /**

package/lib-module/List/PressableListItemBase.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import ABBPropTypes from 'airbnb-prop-types';
 import Pressable from "react-native-web/dist/exports/Pressable";
@@ -36,7 +36,7 @@ const selectPressableStyles = _ref => {
     })
   };
 };
-const PressableListItemBase = /*#__PURE__*/forwardRef((_ref2, ref) => {
+const PressableListItemBase = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     href,
     tokens,

package/lib-module/Listbox/GroupControl.js

@@ -19,7 +19,7 @@ const styles = StyleSheet.create({
     boxSizing: 'border-box'
   }
 });
-const GroupControl = _ref => {
+const GroupControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     expanded,
     pressed,
@@ -73,6 +73,7 @@ const GroupControl = _ref => {
       paddingTop: groupPaddingTop - groupBorderWidth,
       paddingBottom: groupPaddingBottom - groupBorderWidth
     }],
+    ref: ref,
     children: [/*#__PURE__*/_jsx(Text, {
       children: label
     }), /*#__PURE__*/_jsx(Spacer, {
@@ -88,7 +89,8 @@ const GroupControl = _ref => {
       }
     })]
   });
-};
+});
+GroupControl.displayName = 'GroupControl';
 GroupControl.propTypes = {
   id: PropTypes.string,
   expanded: PropTypes.bool,

package/lib-module/Listbox/Listbox.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
@@ -19,7 +19,7 @@ const styles = StyleSheet.create({
   }
 });
 const getInitialOpen = (items, selectedId) => items.filter(item => item.items && item.items.some(nestedItem => (nestedItem.id ?? nestedItem.label) === selectedId)).map(item => item.id ?? item.label);
-const Listbox = /*#__PURE__*/forwardRef((_ref, ref) => {
+const Listbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     items = [],
     firstItemRef = null,
@@ -34,7 +34,7 @@ const Listbox = /*#__PURE__*/forwardRef((_ref, ref) => {
     tokens
   } = _ref;
   const initialOpen = getInitialOpen(items, defaultSelectedId);
-  const [selectedId, setSelectedId] = useState(defaultSelectedId);
+  const [selectedId, setSelectedId] = React.useState(defaultSelectedId);
   const {
     minHeight,
     minWidth
@@ -42,10 +42,10 @@ const Listbox = /*#__PURE__*/forwardRef((_ref, ref) => {
 
   // We need to keep track of each item's ref in order to be able to
   // focus on a specific item via keyboard navigation
-  const itemRefs = useRef([]);
+  const itemRefs = React.useRef([]);
   if (firstItemRef !== null && firstItemRef !== void 0 && firstItemRef.current) itemRefs.current[0] = firstItemRef.current;
-  const [focusedIndex, setFocusedIndex] = useState(0);
-  const handleKeydown = useCallback(event => {
+  const [focusedIndex, setFocusedIndex] = React.useState(0);
+  const handleKeydown = React.useCallback(event => {
     const nextItemRef = itemRefs.current[focusedIndex + 1];
     const prevItemRef = itemRefs.current[focusedIndex - 1];
     if (event.key === 'ArrowUp' || event.shiftKey && event.key === 'Tab') {
@@ -77,7 +77,7 @@ const Listbox = /*#__PURE__*/forwardRef((_ref, ref) => {
   }, [focusedIndex, onClose, parentRef, firstItemRef]);
 
   // Add listeners for mouse clicks outside and for key presses
-  useEffect(() => {
+  React.useEffect(() => {
     if (Platform.OS === 'web') {
       window.addEventListener('click', onClose);
       window.addEventListener('keydown', handleKeydown);

package/lib-module/Listbox/ListboxContext.js

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React from 'react';
 const ListboxContext = /*#__PURE__*/React.createContext({});
-const useListboxContext = () => useContext(ListboxContext);
+const useListboxContext = () => React.useContext(ListboxContext);
 export { ListboxContext, useListboxContext };

package/lib-module/Listbox/ListboxGroup.js

@@ -1,5 +1,5 @@
 /* eslint-disable react-native-a11y/has-valid-accessibility-role */
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
@@ -26,7 +26,7 @@ const getAccessibilityRole = () => Platform.select({
   android: 'none',
   web: 'listitem'
 });
-const ListboxGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
+const ListboxGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     id,
     label,

package/lib-module/Listbox/ListboxItem.js

@@ -1,5 +1,4 @@
-/* eslint-disable react/require-default-props */
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
@@ -20,7 +19,7 @@ const styles = StyleSheet.create({
     paddingLeft: 24
   }
 });
-const ListboxItem = /*#__PURE__*/forwardRef((_ref, ref) => {
+const ListboxItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     href,
     label,

package/lib-module/Listbox/ListboxOverlay.js

@@ -1,5 +1,4 @@
-/* eslint-disable react/require-default-props */
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
@@ -24,7 +23,7 @@ const staticStyles = StyleSheet.create({
 });
 const paddingVertical = 0;
 const paddingHorizontal = 0;
-const DropdownOverlay = /*#__PURE__*/forwardRef((_ref, ref) => {
+const DropdownOverlay = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     isReady = false,

package/lib-module/Listbox/PressableItem.js

@@ -1,5 +1,4 @@
-/* eslint-disable react/require-default-props */
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Pressable from "react-native-web/dist/exports/Pressable";
 import Text from "react-native-web/dist/exports/Text";
@@ -51,7 +50,7 @@ const getItemStyles = _ref => {
     justifyContent: 'center'
   };
 };
-const PressableItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
+const PressableItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     href,