@telus-uds/components-base 1.84.0 → 1.85.0

package/lib/Link/TextButton.js

@@ -4,20 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ThemeProvider = require("../ThemeProvider");
 var _LinkBase = _interopRequireDefault(require("./LinkBase"));
 var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
  * `TextButton` is a button that looks like a Link. It uses the same theming and variants as
  * Link but has the accessibility role of a `Button`. It should be used for actions that
  * take place on the current page, or for navigation within an app.
- */const TextButton = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+ */const TextButton = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     onPress,
     children,

package/lib/List/List.js

@@ -4,15 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 const isListItem = element => {
   var _element$type, _element$type2;
@@ -25,7 +24,7 @@ const isListItem = element => {
  * An unordered List component has a child a ListItem that
  * allows icon, dividers and customized typography
  */
-const List = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const List = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
     showDivider,
@@ -37,12 +36,12 @@ const List = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     }),
     ...rest
   } = _ref;
-  const items = _react.Children.map(children, (child, index) => {
+  const items = _react.default.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__*/(0, _react.cloneElement)(child, {
+      return /*#__PURE__*/_react.default.cloneElement(child, {
         showDivider,
-        isLastItem: index + 1 === _react.Children.count(children),
+        isLastItem: index + 1 === _react.default.Children.count(children),
         tokens,
         variant,
         ...child.props
@@ -52,15 +51,18 @@ const List = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
-    style: {
-      flexShrink: 1,
-      flex: 1
-    },
+    style: styles.list,
     accessibilityRole: accessibilityRole,
     ...selectProps(rest),
     children: items
   });
 });
+const styles = _StyleSheet.default.create({
+  list: {
+    flex: 1,
+    flexShrink: 1
+  }
+});
 List.displayName = 'List';
 List.propTypes = {
   ...selectedSystemPropTypes,

package/lib/List/ListItem.js

@@ -4,17 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _ListItemBase = _interopRequireDefault(require("./ListItemBase"));
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
  * ListItem is responsible for rendering icon or a bullet as side item
- */const ListItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+ */const ListItem = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     tokens,
     variant,

package/lib/List/ListItemBase.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
@@ -16,8 +16,6 @@ var _Typography = _interopRequireDefault(require("../Typography"));
 var _ThemeProvider = require("../ThemeProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 const selectItemBlockStyles = _ref => {
   let {
@@ -44,7 +42,7 @@ const selectDividerStyles = _ref2 => {
 /**
  * ListItem is responsible for rendering icon or a bullet as side item
  */
-const ListItemBase = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+const ListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     tokens,
     icon,
@@ -94,7 +92,7 @@ const ListItemBase = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
-    style: [staticStyles.itemContainer, getContainerStyle()],
+    style: [staticStyles.container, getContainerStyle()],
     accessibilityRole: accessibilityRole,
     ...selectProps(rest),
     children: typeof children === 'function' ? children({
@@ -104,10 +102,7 @@ const ListItemBase = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
       iconSize,
       isLastItem
     }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-      style: [{
-        flex: 1,
-        flexDirection: 'row'
-      }],
+      style: staticStyles.container,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemMark.default, {
         tokens: {
           ...tokens,
@@ -134,7 +129,8 @@ const ListItemBase = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
 });
 ListItemBase.displayName = 'ListItem';
 const staticStyles = _StyleSheet.default.create({
-  itemContainer: {
+  container: {
+    flex: 1,
     flexDirection: 'row'
   },
   titleAndContentContainer: {

package/lib/List/ListItemContent.js

@@ -46,7 +46,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.default.forwardRef((_ref2, ref) => {
   let {
     tokens,
     children
@@ -60,11 +60,13 @@ const ListItemContent = _ref2 => {
       textDecorationLine: tokens.itemUnderline,
       textDecorationColor: tokens.itemFontColor
     }],
+    ref: ref,
     children: (0, _utils.wrapStringsInText)(children, {
       style: textStyles
     })
   });
-};
+});
+ListItemContent.displayName = 'ListItemContent';
 const staticStyles = _StyleSheet.default.create({
   wrap: {
     flex: 1,

package/lib/List/ListItemMark.js

@@ -67,7 +67,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.default.forwardRef((_ref5, ref) => {
   let {
     icon,
     iconColor,
@@ -95,6 +95,7 @@ const ListItemMark = _ref5 => {
   const itemBulletPositioningStyles = selectBulletPositioningStyles(themeTokens);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: [sideItemContainerStyles, itemBulletContainerStyles],
+    ref: ref,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: [staticStyles.bulletPositioning, itemBulletPositioningStyles],
       testID: "unordered-item-bullet",
@@ -106,7 +107,8 @@ const ListItemMark = _ref5 => {
       })
     })
   });
-};
+});
+ListItemMark.displayName = 'ListItemMark';
 ListItemMark.propTypes = {
   tokens: _propTypes.default.shape(tokenTypes).isRequired,
   /**

package/lib/List/PressableListItemBase.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
@@ -16,8 +16,6 @@ var _ListItemContent = _interopRequireDefault(require("./ListItemContent"));
 var _ListItemMark = _interopRequireDefault(require("./ListItemMark"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const selectPressableStyles = _ref => {
   let {
     backgroundColor,
@@ -43,7 +41,7 @@ const selectPressableStyles = _ref => {
     })
   };
 };
-const PressableListItemBase = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+const PressableListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     href,
     tokens,

package/lib/Listbox/GroupControl.js

@@ -25,7 +25,7 @@ const styles = _StyleSheet.default.create({
     boxSizing: 'border-box'
   }
 });
-const GroupControl = _ref => {
+const GroupControl = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     expanded,
     pressed,
@@ -79,6 +79,7 @@ const GroupControl = _ref => {
       paddingTop: groupPaddingTop - groupBorderWidth,
       paddingBottom: groupPaddingBottom - groupBorderWidth
     }],
+    ref: ref,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
       children: label
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
@@ -94,7 +95,8 @@ const GroupControl = _ref => {
       }
     })]
   });
-};
+});
+GroupControl.displayName = 'GroupControl';
 GroupControl.propTypes = {
   id: _propTypes.default.string,
   expanded: _propTypes.default.bool,

package/lib/Listbox/Listbox.js

@@ -27,7 +27,7 @@ const styles = _StyleSheet.default.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__*/(0, _react.forwardRef)((_ref, ref) => {
+const Listbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     items = [],
     firstItemRef = null,
@@ -42,7 +42,7 @@ const Listbox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     tokens
   } = _ref;
   const initialOpen = getInitialOpen(items, defaultSelectedId);
-  const [selectedId, setSelectedId] = (0, _react.useState)(defaultSelectedId);
+  const [selectedId, setSelectedId] = _react.default.useState(defaultSelectedId);
   const {
     minHeight,
     minWidth
@@ -50,10 +50,10 @@ const Listbox = /*#__PURE__*/(0, _react.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 = (0, _react.useRef)([]);
+  const itemRefs = _react.default.useRef([]);
   if (firstItemRef !== null && firstItemRef !== void 0 && firstItemRef.current) itemRefs.current[0] = firstItemRef.current;
-  const [focusedIndex, setFocusedIndex] = (0, _react.useState)(0);
-  const handleKeydown = (0, _react.useCallback)(event => {
+  const [focusedIndex, setFocusedIndex] = _react.default.useState(0);
+  const handleKeydown = _react.default.useCallback(event => {
     const nextItemRef = itemRefs.current[focusedIndex + 1];
     const prevItemRef = itemRefs.current[focusedIndex - 1];
     if (event.key === 'ArrowUp' || event.shiftKey && event.key === 'Tab') {
@@ -85,7 +85,7 @@ const Listbox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   }, [focusedIndex, onClose, parentRef, firstItemRef]);
 
   // Add listeners for mouse clicks outside and for key presses
-  (0, _react.useEffect)(() => {
+  _react.default.useEffect(() => {
     if (_Platform.default.OS === 'web') {
       window.addEventListener('click', onClose);
       window.addEventListener('keydown', handleKeydown);

package/lib/Listbox/ListboxContext.js

@@ -4,10 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useListboxContext = exports.ListboxContext = void 0;
-var _react = _interopRequireWildcard(require("react"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const ListboxContext = /*#__PURE__*/_react.default.createContext({});
 exports.ListboxContext = ListboxContext;
-const useListboxContext = () => (0, _react.useContext)(ListboxContext);
+const useListboxContext = () => _react.default.useContext(ListboxContext);
 exports.useListboxContext = useListboxContext;

package/lib/Listbox/ListboxGroup.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
@@ -16,8 +16,6 @@ var _ListboxContext = require("./ListboxContext");
 var _GroupControl = _interopRequireDefault(require("./GroupControl"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /* eslint-disable react-native-a11y/has-valid-accessibility-role */
 
 const styles = _StyleSheet.default.create({
@@ -36,7 +34,7 @@ const getAccessibilityRole = () => _Platform.default.select({
   android: 'none',
   web: 'listitem'
 });
-const ListboxGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const ListboxGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     id,
     label,

package/lib/Listbox/ListboxItem.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
@@ -13,10 +13,6 @@ var _PressableItem = _interopRequireDefault(require("./PressableItem"));
 var _ThemeProvider = require("../ThemeProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-/* eslint-disable react/require-default-props */
-
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.htmlAttrs]);
 const styles = _StyleSheet.default.create({
   itemContainer: {
@@ -30,7 +26,7 @@ const styles = _StyleSheet.default.create({
     paddingLeft: 24
   }
 });
-const ListboxItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const ListboxItem = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     href,
     label,

package/lib/Listbox/ListboxOverlay.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
@@ -14,10 +14,6 @@ var _ThemeProvider = require("../ThemeProvider");
 var _Card = _interopRequireDefault(require("../Card"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-/* eslint-disable react/require-default-props */
-
 const staticStyles = _StyleSheet.default.create({
   positioner: {
     flex: 1,
@@ -34,7 +30,7 @@ const staticStyles = _StyleSheet.default.create({
 });
 const paddingVertical = 0;
 const paddingHorizontal = 0;
-const DropdownOverlay = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const DropdownOverlay = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
     isReady = false,

package/lib/Listbox/PressableItem.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
@@ -12,10 +12,6 @@ var _utils = require("../utils");
 var _ListboxContext = require("./ListboxContext");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-/* eslint-disable react/require-default-props */
-
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.htmlAttrs]);
 const getItemStyles = _ref => {
   let {
@@ -60,7 +56,7 @@ const getItemStyles = _ref => {
     justifyContent: 'center'
   };
 };
-const PressableItem = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+const PressableItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     children,
     href,

package/lib/Modal/Modal.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _TouchableWithoutFeedback = _interopRequireDefault(require("react-native-web/dist/cjs/exports/TouchableWithoutFeedback"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
@@ -22,8 +22,6 @@ var _ModalContent = _interopRequireDefault(require("./ModalContent"));
 var _WebModal = _interopRequireDefault(require("./WebModal"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 const selectContainerStyles = _ref => {
   let {
@@ -105,7 +103,7 @@ const selectScrollViewStyles = () => ({
  * - Don’t use modals to reinforce or repeat information already available in the parent page or view
  * - Don’t use modals consecutively
  */
-const Modal = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
+const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   let {
     children,
     isOpen,
@@ -154,9 +152,9 @@ const Modal = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
   const showCloseButton = closeButton !== null;
 
   // These refs are used to manage focus in the web modal container
-  const focusTrapRef = (0, _react.useRef)(null);
-  const closeButtonRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(() => {
+  const focusTrapRef = _react.default.useRef(null);
+  const closeButtonRef = _react.default.useRef(null);
+  _react.default.useEffect(() => {
     if (_Platform.default.OS === 'web') {
       const handleFocus = () => {
         // If the focus is on the last item of the web modal container, move it to the close button

package/lib/Modal/ModalContent.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
@@ -18,9 +18,7 @@ var _ThemeProvider = require("../ThemeProvider");
 var _ViewportProvider = require("../ViewportProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const ModalContent = _ref => {
+const ModalContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     heading,
     headingLevel = 'h3',
@@ -47,8 +45,8 @@ const ModalContent = _ref => {
   } = (0, _ThemeProvider.useThemeTokens)('Modal', tokens, variant, {
     viewport
   });
-  const [scrollContainerHeight, setScrollContainerHeight] = (0, _react.useState)(0);
-  const [scrollContentHeight, setScrollContentHeight] = (0, _react.useState)(0);
+  const [scrollContainerHeight, setScrollContainerHeight] = _react.default.useState(0);
+  const [scrollContentHeight, setScrollContentHeight] = _react.default.useState(0);
   const handleContainerLayout = _ref2 => {
     let {
       nativeEvent: {
@@ -99,6 +97,7 @@ const ModalContent = _ref => {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     style: styles.modalContent,
+    ref: ref,
     children: [hasHeadingSection && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
       style: headingStyles,
       children: [heading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
@@ -153,7 +152,8 @@ const ModalContent = _ref => {
       }) : null]
     })]
   });
-};
+});
+ModalContent.displayName = 'ModalContent';
 const styles = _StyleSheet.default.create({
   modalContent: {
     flex: 1,

package/lib/Modal/WebModal.js

@@ -8,6 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _Portal = _interopRequireDefault(require("../Portal"));
 var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -21,21 +22,26 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
  * @param {ReactNode} props.children - The content of the modal.
  * @returns {JSX.Element} The rendered WebModal component.
  */
-const WebModal = _ref => {
+const WebModal = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
     ...rest
   } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-    style: staticStyles.container,
-    ...selectProps(rest),
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Portal.default, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-      style: staticStyles.content,
-      accessibilityRole: "dialog",
-      children: children
+      style: staticStyles.container,
+      ...selectProps(rest),
+      ref: ref,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: staticStyles.content,
+        role: "dialog",
+        "aria-modal": true,
+        children: children
+      })
     })
   });
-};
+});
+WebModal.displayName = 'WebModal';
 WebModal.propTypes = {
   ...selectedSystemPropTypes,
   // children to be rendered within the modal
@@ -68,7 +74,8 @@ const staticStyles = _StyleSheet.default.create({
     flexGrow: 1,
     flexShrink: 1,
     flexBasis: 0,
-    zIndex: 1000
+    zIndex: 1000,
+    display: 'flex'
   }
 });
 var _default = WebModal;

package/lib/MultiSelectFilter/ModalOverlay.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
@@ -17,8 +17,6 @@ var _Card = _interopRequireDefault(require("../Card"));
 var _IconButton = _interopRequireDefault(require("../IconButton"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const staticStyles = _StyleSheet.default.create({
   positioner: {
     flex: 1,
@@ -62,7 +60,7 @@ const selectPaddingContainerStyles = _ref2 => {
     paddingRight
   };
 };
-const ModalOverlay = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+const ModalOverlay = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     children,
     isReady = false,