@telus-uds/components-base 1.60.0 → 1.61.0

package/lib/Listbox/GroupControl.js

@@ -0,0 +1,121 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+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 _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _Spacer = _interopRequireDefault(require("../Spacer"));
+
+var _ListboxContext = require("./ListboxContext");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const styles = _StyleSheet.default.create({
+  controlWrapper: {
+    width: '100%',
+    flex: 1,
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    boxSizing: 'border-box'
+  }
+});
+
+const GroupControl = _ref => {
+  let {
+    expanded,
+    pressed,
+    hover,
+    focus,
+    label,
+    id
+  } = _ref;
+  const {
+    selectedId,
+    setSelectedId
+  } = (0, _ListboxContext.useListboxContext)();
+  const tokens = (0, _ThemeProvider.useThemeTokens)('Listbox', {}, {}, {
+    expanded,
+    pressed,
+    hover,
+    current: selectedId === id && id !== undefined,
+    focus
+  });
+  const {
+    groupFontName,
+    groupFontWeight,
+    groupFontSize,
+    groupColor,
+    groupBackgroundColor,
+    groupBorderColor,
+    groupBorderWidth,
+    groupBorderRadius,
+    groupPaddingLeft,
+    groupPaddingRight,
+    groupPaddingTop,
+    groupPaddingBottom,
+    itemTextDecoration,
+    itemOutline,
+    groupHeight
+  } = tokens;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    onPress: () => setSelectedId(id),
+    style: [styles.controlWrapper, {
+      fontFamily: `${groupFontName}${groupFontWeight}normal`,
+      fontSize: groupFontSize,
+      color: groupColor,
+      textDecoration: itemTextDecoration,
+      backgroundColor: groupBackgroundColor,
+      outline: itemOutline,
+      height: groupHeight,
+      border: `${groupBorderWidth}px solid ${groupBorderColor}`,
+      borderRadius: groupBorderRadius,
+      paddingLeft: groupPaddingLeft - groupBorderWidth,
+      paddingRight: groupPaddingRight - groupBorderWidth,
+      paddingTop: groupPaddingTop - groupBorderWidth,
+      paddingBottom: groupPaddingBottom - groupBorderWidth
+    }],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+      children: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+      space: 1,
+      direction: "row"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      icon: tokens.groupIcon,
+      tokens: {
+        color: tokens.groupColor
+      },
+      variant: {
+        size: 'micro'
+      }
+    })]
+  });
+};
+
+GroupControl.propTypes = {
+  id: _propTypes.default.string,
+  expanded: _propTypes.default.bool,
+  pressed: _propTypes.default.bool,
+  hover: _propTypes.default.bool,
+  focus: _propTypes.default.bool,
+  label: _propTypes.default.string
+};
+var _default = GroupControl;
+exports.default = _default;

package/lib/Listbox/Listbox.js

@@ -0,0 +1,198 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(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 _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _utils = require("../utils");
+
+var _ExpandCollapse = _interopRequireDefault(require("../ExpandCollapse"));
+
+var _ListboxGroup = _interopRequireDefault(require("./ListboxGroup"));
+
+var _ListboxItem = _interopRequireDefault(require("./ListboxItem"));
+
+var _ListboxContext = require("./ListboxContext");
+
+var _ListboxOverlay = _interopRequireDefault(require("./ListboxOverlay"));
+
+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 styles = _StyleSheet.default.create({
+  list: {
+    padding: 0,
+    margin: 0
+  }
+});
+
+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 = _ref => {
+  let {
+    items = [],
+    firstItemRef = null,
+    // focus will be moved to this one once within the menu
+    parentRef = null,
+    // to return focus to after leaving the last menu item
+    selectedId: defaultSelectedId,
+    LinkRouter,
+    itemRouterProps,
+    onClose,
+    variant,
+    tokens
+  } = _ref;
+  const initialOpen = getInitialOpen(items, defaultSelectedId);
+  const [selectedId, setSelectedId] = (0, _react.useState)(defaultSelectedId);
+  const {
+    minHeight,
+    minWidth
+  } = (0, _ThemeProvider.useThemeTokens)('Listbox', variant, tokens); // 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)([]);
+  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 nextItemRef = itemRefs.current[focusedIndex + 1];
+    const prevItemRef = itemRefs.current[focusedIndex - 1];
+
+    if (event.key === 'ArrowUp' || event.shiftKey && event.key === 'Tab') {
+      var _parentRef$current;
+
+      // Move the focus to the previous item or to the parent one if on the first
+      if (prevItemRef) {
+        event.preventDefault();
+        prevItemRef.focus();
+      } else if (parentRef) (_parentRef$current = parentRef.current) === null || _parentRef$current === void 0 ? void 0 : _parentRef$current.focus();
+
+      setFocusedIndex(focusedIndex - 1);
+    } else if ((event.key === 'ArrowDown' || event.key === 'Tab') && nextItemRef) {
+      event.preventDefault();
+      setFocusedIndex(focusedIndex + 1);
+      nextItemRef.focus();
+    } else if (event.key === 'Escape') {
+      var _parentRef$current2, _parentRef$current3;
+
+      // Close the dropdown
+      parentRef === null || parentRef === void 0 ? void 0 : (_parentRef$current2 = parentRef.current) === null || _parentRef$current2 === void 0 ? void 0 : _parentRef$current2.click(); // Return focus to the dropdown control after leaving the last item
+
+      parentRef === null || parentRef === void 0 ? void 0 : (_parentRef$current3 = parentRef.current) === null || _parentRef$current3 === void 0 ? void 0 : _parentRef$current3.focus();
+      if (onClose) onClose(event);
+    }
+  }, [focusedIndex, onClose, parentRef]); // Add listeners for mouse clicks outside and for key presses
+
+  (0, _react.useEffect)(() => {
+    if (_Platform.default.OS === 'web') {
+      window.addEventListener('click', onClose);
+      window.addEventListener('keydown', handleKeydown);
+      window.addEventListener('touchstart', onClose);
+      return () => {
+        window.removeEventListener('click', onClose);
+        window.removeEventListener('keydown', handleKeydown);
+        window.removeEventListener('touchstart', onClose);
+      };
+    }
+
+    return () => {};
+  }, [onClose, handleKeydown]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListboxContext.ListboxContext.Provider, {
+    value: {
+      selectedId,
+      setSelectedId
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default, {
+      initialOpen: initialOpen,
+      maxOpen: 1,
+      children: expandProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: [styles.list, {
+          minHeight,
+          minWidth
+        }],
+        role: "listbox",
+        children: items.map((item, index) => {
+          const {
+            id,
+            label,
+            items: nestedItems
+          } = item;
+          const itemId = id ?? label; // Give the list of refs.
+
+          const itemRef = ref => {
+            itemRefs.current[index] = ref;
+            return ref;
+          };
+
+          return nestedItems ? /*#__PURE__*/(0, _react.createElement)(_ListboxGroup.default, { ...item,
+            expandProps: expandProps,
+            LinkRouter: LinkRouter,
+            itemRouterProps: itemRouterProps,
+            prevItemRef: itemRefs.current[index - 1] ?? null,
+            nextItemRef: itemRefs.current[index + 1] ?? null,
+            ref: index === 0 ? firstItemRef : itemRef,
+            key: itemId
+          }) : /*#__PURE__*/(0, _react.createElement)(_ListboxItem.default, { ...item,
+            key: itemId,
+            id: itemId,
+            LinkRouter: LinkRouter,
+            itemRouterProps: itemRouterProps,
+            prevItemRef: itemRefs.current[index - 1] ?? null,
+            nextItemRef: itemRefs.current[index + 1] ?? null,
+            ref: index === 0 ? firstItemRef : itemRef
+          });
+        })
+      })
+    })
+  });
+};
+
+Listbox.propTypes = { ..._utils.withLinkRouter.propTypes,
+
+  /**
+   * Focus will be moved to the item with this ref once within the menu.
+   */
+  firstItemRef: _propTypes.default.object,
+
+  /**
+   * Focus will be returned to the dropdown control with this ref after leaving
+   * the last menu item.
+   */
+  parentRef: _propTypes.default.object,
+
+  /**
+   * `Listbox` items
+   */
+  items: _propTypes.default.array,
+
+  /**
+   * To select an item by default
+   */
+  selectedId: _propTypes.default.string,
+
+  /**
+   * onClose event
+   */
+  onClose: _propTypes.default.func,
+  tokens: (0, _utils.getTokensPropType)('Listbox')
+};
+Listbox.Overlay = _ListboxOverlay.default;
+var _default = Listbox;
+exports.default = _default;

package/lib/Listbox/ListboxGroup.js

@@ -0,0 +1,142 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(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 _utils = require("../utils");
+
+var _ExpandCollapse = _interopRequireDefault(require("../ExpandCollapse"));
+
+var _ListboxItem = _interopRequireDefault(require("./ListboxItem"));
+
+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({
+  groupWrapper: {
+    margin: 0,
+    padding: 0,
+    overflow: 'hidden'
+  },
+  list: {
+    margin: 0,
+    padding: 0
+  }
+});
+
+const ListboxGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    id,
+    label,
+    items,
+    LinkRouter,
+    linkRouterProps,
+    expandProps,
+    onLastItemBlur,
+    nextItemRef,
+    prevItemRef
+  } = _ref;
+  const {
+    selectedId
+  } = (0, _ListboxContext.useListboxContext)(); // TODO: implement keyboard navigation via refs for grouped items separately here
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    id: "test",
+    style: styles.groupWrapper,
+    accessibilityRole: "listitem",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default.Panel, {
+      panelId: id ?? label,
+      controlTokens: {
+        icon: null,
+        paddingLeft: 0,
+        paddingRight: 0,
+        paddingTop: 0,
+        paddingBottom: 0,
+        backgroundColor: 'transparent',
+        borderColor: 'transparent',
+        textLine: 'none',
+        borderWidth: 0
+      } // TODO refactor
+      // eslint-disable-next-line react/no-unstable-nested-components
+      ,
+      control: controlProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupControl.default, {
+        id: id ?? label,
+        ...controlProps,
+        label: label
+      }),
+      ...expandProps,
+      tokens: {
+        contentPaddingLeft: 0,
+        contentPaddingRight: 0,
+        contentPaddingTop: 0,
+        contentPaddingBottom: 0,
+        borderColor: 'transparent',
+        borderRadius: 0,
+        borderWidth: 0,
+        marginBottom: 0
+      },
+      controlRef: ref,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: styles.list,
+        children: items.map((item, index) => {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListboxItem.default, {
+            id: item.id ?? item.label,
+            ...item,
+            selected: item.id && item.id === selectedId || item.label && item.label === selectedId,
+            isChild: true,
+            LinkRouter: LinkRouter,
+            linkRouterProps: linkRouterProps,
+            ...(index === 0 && {
+              prevItemRef
+            }),
+            ...(index === items.length - 1 && {
+              nextItemRef
+            }),
+            ...(index === items.length - 1 && {
+              onBlur: onLastItemBlur
+            })
+          }, item.label);
+        })
+      })
+    })
+  });
+});
+ListboxGroup.displayName = 'ListboxGroup';
+ListboxGroup.propTypes = { ..._utils.withLinkRouter.propTypes,
+  label: _propTypes.default.string,
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+    href: _propTypes.default.string,
+    label: _propTypes.default.string,
+    current: _propTypes.default.bool
+  })),
+  expandProps: _propTypes.default.object,
+  nextItemRef: _propTypes.default.object,
+  prevItemRef: _propTypes.default.object,
+
+  /**
+   * Use this callback to redirect the focus after it leaves the last item of the group.
+   */
+  onLastItemBlur: _propTypes.default.func
+};
+var _default = ListboxGroup;
+exports.default = _default;

package/lib/Listbox/ListboxItem.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(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 _utils = require("../utils");
+
+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: {
+    display: 'flex',
+    margin: 0
+  },
+  childContainer: {
+    paddingLeft: 16
+  }
+});
+
+const ListboxItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    href,
+    label,
+    isChild = false,
+    onBlur,
+    nextItemRef,
+    prevItemRef,
+    tokens,
+    variant = {},
+    LinkRouter,
+    linkRouterProps,
+    id,
+    onPress = () => {},
+    ...rest
+  } = _ref;
+  const selectedProps = selectProps({
+    href,
+    ...rest
+  });
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Listbox', tokens, variant, {
+    isChild
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: [styles.itemContainer, isChild && styles.childContainer],
+    role: "option",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PressableItem.default, {
+      href: href,
+      isChild: isChild,
+      onPress: onPress,
+      onBlur: onBlur,
+      nextItemRef: nextItemRef,
+      prevItemRef: prevItemRef,
+      ref: ref,
+      tokens: getTokens,
+      selectedProps: selectedProps,
+      id: id,
+      children: label
+    })
+  });
+});
+ListboxItem.displayName = 'ListboxItem';
+ListboxItem.propTypes = { ...selectedSystemPropTypes,
+  ..._utils.withLinkRouter.propTypes,
+  href: _propTypes.default.string,
+  isChild: _propTypes.default.bool,
+  label: _propTypes.default.node.isRequired,
+  nextItemRef: _propTypes.default.object,
+  prevItemRef: _propTypes.default.object,
+  onPress: _propTypes.default.func
+};
+
+var _default = (0, _utils.withLinkRouter)(ListboxItem);
+
+exports.default = _default;

package/lib/Listbox/ListboxOverlay.js

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(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 _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _portal = require("@gorhom/portal");
+
+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,
+    // Grow to maxWidth when possible, shrink when not possible
+    position: 'absolute',
+    zIndex: 1000000000000000 // Position on top of all the other overlays, including backdrops and modals
+
+  },
+  hidden: {
+    // Use opacity not visibility to hide the dropdown during positioning
+    // so on web, children may be focused from the first render
+    opacity: 0
+  }
+});
+
+const paddingVertical = 0;
+const paddingHorizontal = 0;
+const DropdownOverlay = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    isReady = false,
+    overlaidPosition,
+    maxWidth,
+    minWidth,
+    onLayout
+  } = _ref;
+  const systemTokens = (0, _ThemeProvider.useThemeTokens)('Listbox', {}, {});
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    onLayout: onLayout,
+    style: [overlaidPosition, {
+      maxWidth,
+      minWidth
+    }, staticStyles.positioner, !isReady && staticStyles.hidden],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.default, {
+      tokens: {
+        shadow: systemTokens.shadow,
+        paddingBottom: paddingVertical,
+        paddingTop: paddingVertical,
+        paddingLeft: paddingHorizontal,
+        paddingRight: paddingHorizontal
+      },
+      children: children
+    })
+  });
+});
+
+const withPortal = Overlay => {
+  // eslint-disable-next-line react/display-name, react/no-multi-comp
+  return props => {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_portal.Portal, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Overlay, { ...props
+      })
+    });
+  };
+};
+
+DropdownOverlay.displayName = 'DropdownOverlay';
+DropdownOverlay.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  isReady: _propTypes.default.bool,
+  overlaidPosition: _propTypes.default.shape({
+    top: _propTypes.default.number,
+    left: _propTypes.default.number,
+    width: _propTypes.default.number
+  }),
+  maxWidth: _propTypes.default.number,
+  minWidth: _propTypes.default.number,
+  onLayout: _propTypes.default.func
+};
+
+var _default = _Platform.default.OS === 'web' ? withPortal(DropdownOverlay) : DropdownOverlay;
+
+exports.default = _default;

package/lib/Listbox/PressableItem.js

@@ -40,7 +40,6 @@ const getItemStyles = _ref => {
     itemPaddingRight,
     itemBackgroundColor,
     itemColor,
-    itemDisplay,
     itemOutline,
     itemTextDecoration,
     itemBorderLeftColor,
@@ -62,7 +61,6 @@ const getItemStyles = _ref => {
     width: '100%',
     backgroundColor: itemBackgroundColor,
     color: itemColor,
-    display: itemDisplay,
     outline: itemOutline,
     textDecoration: itemTextDecoration,
     borderLeft: `${itemBorderLeftWidth}px solid ${itemBorderLeftColor}`,