@telus-uds/components-base 1.60.0 → 1.62.0

package/lib/IconButton/IconButton.js

@@ -31,9 +31,17 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
+// function to get the dimentionals of the conditionals
+const getPasswordDimensions = (password, width, height) => {
+  return password ? {
+    width,
+    height
+  } : {};
+};
+
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 
-const selectOuterStyle = _ref => {
+const selectOuterStyle = (_ref, password) => {
   let {
     backgroundColor,
     outerBorderWidth,
@@ -44,7 +52,9 @@ const selectOuterStyle = _ref => {
     borderTopRightRadius,
     borderBottomLeftRadius,
     borderBottomRightRadius,
-    shadow
+    shadow,
+    width,
+    height
   } = _ref;
   return [{
     backgroundColor,
@@ -59,10 +69,13 @@ const selectOuterStyle = _ref => {
       outerBorderColor,
       outerBorderGap
     }),
+    ...getPasswordDimensions(password, width, height),
     ..._Platform.default.select({
       web: {
         outline: 'none',
-        display: 'inline-flex'
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center'
       }
     })
   }, staticStyles.outer];
@@ -71,7 +84,7 @@ const selectOuterStyle = _ref => {
 const calculatePadding = (padding, borderWidth) => padding && Math.max(0, padding - borderWidth); // Stable size as border changes
 
 
-const selectInnerStyle = _ref2 => {
+const selectInnerStyle = (_ref2, password) => {
   let {
     borderColor,
     borderWidth,
@@ -88,7 +101,9 @@ const selectInnerStyle = _ref2 => {
     paddingLeft,
     paddingRight,
     paddingTop,
-    paddingBottom
+    paddingBottom,
+    width,
+    height
   } = _ref2;
   return {
     // Inner borders animate with the icon and should be treated like a themable feature of the icon
@@ -110,9 +125,13 @@ const selectInnerStyle = _ref2 => {
     paddingBottom: calculatePadding(paddingBottom, borderBottomWidth),
     ..._Platform.default.select({
       web: {
-        pointerEvents: 'none'
+        pointerEvents: 'none',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center'
       }
-    })
+    }),
+    ...getPasswordDimensions(password, width, height)
   };
 };
 /**
@@ -158,7 +177,7 @@ const IconButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
 
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('IconButton', tokens, variant);
 
-  const getOuterStyle = pressableState => selectOuterStyle(getTokens((0, _utils.resolvePressableState)(pressableState)));
+  const getOuterStyle = pressableState => selectOuterStyle(getTokens((0, _utils.resolvePressableState)(pressableState), variant.password));
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     ref: ref,
@@ -171,7 +190,7 @@ const IconButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     children: pressableState => {
       const themeTokens = getTokens((0, _utils.resolvePressableState)(pressableState));
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        style: selectInnerStyle(themeTokens),
+        style: selectInnerStyle(themeTokens, variant.password),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
           icon: IconComponent || themeTokens.icon,
           title: selectedProps.accessibilityLabel,

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;