@telus-uds/components-base 2.0.0 → 2.0.2

package/lib/List/PressableListItemBase.js

@@ -1,41 +1,18 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(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"));
-
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-
-var _utils = require("../utils");
-
-var _ListItemBase = _interopRequireDefault(require("./ListItemBase"));
-
-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; }
-
+import React from 'react';
+import PropTypes from 'prop-types';
+import ABBPropTypes from 'airbnb-prop-types';
+import Pressable from "react-native-web/dist/exports/Pressable";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Platform from "react-native-web/dist/exports/Platform";
+import { resolvePressableTokens, clickProps, linkProps, hrefAttrsProp, selectTokens, withLinkRouter } from '../utils';
+import ListItemBase from './ListItemBase';
+import ListItemContent from './ListItemContent';
+import ListItemMark from './ListItemMark';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const selectPressableStyles = _ref => {
   let {
     backgroundColor,
+    itemFontColor,
     paddingLeft,
     paddingRight,
     paddingTop,
@@ -44,20 +21,20 @@ const selectPressableStyles = _ref => {
   } = _ref;
   return {
     backgroundColor,
+    itemFontColor,
     paddingLeft,
     paddingRight,
     paddingTop,
     paddingBottom,
     marginBottom: interItemMargin,
-    ..._Platform.default.select({
+    ...Platform.select({
       web: {
         outline: 'none'
       }
     })
   };
 };
-
-const PressableListItemBase = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+const PressableListItemBase = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     href,
     tokens,
@@ -66,24 +43,20 @@ const PressableListItemBase = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =
     listItemRef,
     ...rest
   } = _ref2;
-
   const {
     onPress,
     ...props
-  } = _utils.clickProps.toPressProps(rest);
-
+  } = clickProps.toPressProps(rest);
   const {
     hrefAttrs,
     rest: listItemProps
-  } = _utils.hrefAttrsProp.bundle(props);
-
-  const handlePress = _utils.linkProps.handleHref({
+  } = hrefAttrsProp.bundle(props);
+  const handlePress = linkProps.handleHref({
     href,
     onPress
   });
-
-  const listItemTokens = (0, _utils.selectTokens)('List', typeof tokens === 'function' ? tokens() : tokens);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemBase.default, {
+  const listItemTokens = selectTokens('List', typeof tokens === 'function' ? tokens() : tokens);
+  return /*#__PURE__*/_jsx(ListItemBase, {
     ref: listItemRef,
     tokens: listItemTokens,
     ...listItemProps,
@@ -91,14 +64,11 @@ const PressableListItemBase = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =
       let {
         isLastItem
       } = _ref3;
-
-      const getTokens = pressableState => (0, _utils.resolvePressableTokens)(tokens, pressableState, {
+      const getTokens = pressableState => resolvePressableTokens(tokens, pressableState, {
         last: isLastItem
       });
-
       const getPressableStyle = pressableState => [staticStyles.itemContainer, selectPressableStyles(getTokens(pressableState))];
-
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+      return /*#__PURE__*/_jsx(Pressable, {
         onPress: handlePress,
         href: href,
         hrefAttrs: hrefAttrs,
@@ -106,11 +76,11 @@ const PressableListItemBase = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =
         ref: ref,
         children: pressableState => {
           const themeTokens = getTokens(pressableState);
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemMark.default, {
+          return /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(ListItemMark, {
               icon: icon,
               tokens: themeTokens
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemContent.default, {
+            }), /*#__PURE__*/_jsx(ListItemContent, {
               tokens: themeTokens,
               children: typeof children === 'function' ? children(pressableState) : children
             })]
@@ -121,24 +91,20 @@ const PressableListItemBase = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =
   });
 });
 PressableListItemBase.displayName = 'PressableListItemBase';
-
-const staticStyles = _StyleSheet.default.create({
+const staticStyles = StyleSheet.create({
   itemContainer: {
     flexDirection: 'row',
     flex: 1
   }
 });
-
-PressableListItemBase.propTypes = { ..._utils.withLinkRouter.propTypes,
-  href: _propTypes.default.string,
-  onPress: _propTypes.default.func,
+PressableListItemBase.propTypes = {
+  ...withLinkRouter.propTypes,
+  href: PropTypes.string,
+  onPress: PropTypes.func,
   // eslint-disable-next-line react/forbid-prop-types
-  tokens: _propTypes.default.any,
-  icon: _propTypes.default.elementType,
-  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-  listItemRef: _airbnbPropTypes.default.ref()
+  tokens: PropTypes.any,
+  icon: PropTypes.elementType,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  listItemRef: ABBPropTypes.ref()
 };
-
-var _default = (0, _utils.withLinkRouter)(PressableListItemBase);
-
-exports.default = _default;
+export default withLinkRouter(PressableListItemBase);

package/lib/List/index.js

@@ -1,28 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "ListBase", {
-  enumerable: true,
-  get: function () {
-    return _List.default;
-  }
-});
-Object.defineProperty(exports, "ListItem", {
-  enumerable: true,
-  get: function () {
-    return _ListItem.default;
-  }
-});
-exports.default = void 0;
-
-var _List = _interopRequireDefault(require("./List"));
-
-var _ListItem = _interopRequireDefault(require("./ListItem"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-_List.default.Item = _ListItem.default;
-var _default = _List.default;
-exports.default = _default;
+import List from './List';
+import ListItem from './ListItem';
+List.Item = ListItem;
+export { List as ListBase, ListItem };
+export default List;

package/lib/Listbox/GroupControl.js

@@ -0,0 +1,105 @@
+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";
+import Text from "react-native-web/dist/exports/Text";
+import { useThemeTokens } from '../ThemeProvider';
+import Icon from '../Icon';
+import Spacer from '../Spacer';
+import { useListboxContext } from './ListboxContext';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const styles = StyleSheet.create({
+  controlWrapper: {
+    width: '100%',
+    flex: 1,
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    boxSizing: 'border-box'
+  }
+});
+const GroupControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    expanded,
+    pressed,
+    hover,
+    focus,
+    label,
+    id
+  } = _ref;
+  const {
+    selectedId,
+    setSelectedId
+  } = useListboxContext();
+  const tokens = 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;
+  const getTextStyles = () => ({
+    color: groupColor
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    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
+    }],
+    ref: ref,
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: getTextStyles(),
+      children: label
+    }), /*#__PURE__*/_jsx(Spacer, {
+      space: 1,
+      direction: "row"
+    }), /*#__PURE__*/_jsx(Icon, {
+      icon: tokens.groupIcon,
+      tokens: {
+        color: tokens.groupColor
+      },
+      variant: {
+        size: 'micro'
+      }
+    })]
+  });
+});
+GroupControl.displayName = 'GroupControl';
+GroupControl.propTypes = {
+  id: PropTypes.string,
+  expanded: PropTypes.bool,
+  pressed: PropTypes.bool,
+  hover: PropTypes.bool,
+  focus: PropTypes.bool,
+  label: PropTypes.string
+};
+export default GroupControl;

package/lib/Listbox/Listbox.js

@@ -0,0 +1,171 @@
+import React, { createElement as _createElement } 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";
+import Platform from "react-native-web/dist/exports/Platform";
+import { useThemeTokens } from '../ThemeProvider';
+import { withLinkRouter, getTokensPropType } from '../utils';
+import ExpandCollapse from '../ExpandCollapse';
+import ListboxGroup from './ListboxGroup';
+import ListboxItem from './ListboxItem';
+import { ListboxContext } from './ListboxContext';
+import DropdownOverlay from './ListboxOverlay';
+import { jsx as _jsx } from "react/jsx-runtime";
+const styles = StyleSheet.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 = /*#__PURE__*/React.forwardRef((_ref, 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] = React.useState(defaultSelectedId);
+  const {
+    minHeight,
+    minWidth
+  } = 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 = React.useRef([]);
+  if (firstItemRef !== null && firstItemRef !== void 0 && firstItemRef.current) itemRefs.current[0] = firstItemRef.current;
+  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') {
+      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 || _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 || (_parentRef$current2 = parentRef.current) === null || _parentRef$current2 === void 0 || _parentRef$current2.click();
+      // Return focus to the dropdown control after leaving the last item
+      parentRef === null || parentRef === void 0 || (_parentRef$current3 = parentRef.current) === null || _parentRef$current3 === void 0 || _parentRef$current3.focus();
+      if (onClose) onClose(event);
+    } else if (!nextItemRef && firstItemRef) {
+      var _firstItemRef$current;
+      // If the last item is focused, move the focus to the first one
+      event.preventDefault();
+      setFocusedIndex(0);
+      (_firstItemRef$current = firstItemRef.current) === null || _firstItemRef$current === void 0 || _firstItemRef$current.focus();
+    }
+  }, [focusedIndex, onClose, parentRef, firstItemRef]);
+
+  // Add listeners for mouse clicks outside and for key presses
+  React.useEffect(() => {
+    if (Platform.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__*/_jsx(ListboxContext.Provider, {
+    value: {
+      selectedId,
+      setSelectedId
+    },
+    children: /*#__PURE__*/_jsx(ExpandCollapse, {
+      initialOpen: initialOpen,
+      maxOpen: 1,
+      ref: ref,
+      children: expandProps => /*#__PURE__*/_jsx(View, {
+        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 = currentItemRef => {
+            itemRefs.current[index] = currentItemRef;
+            return currentItemRef;
+          };
+          return nestedItems ? /*#__PURE__*/_createElement(ListboxGroup, {
+            ...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__*/_createElement(ListboxItem, {
+            ...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.displayName = 'Listbox';
+Listbox.propTypes = {
+  ...withLinkRouter.propTypes,
+  tokens: getTokensPropType('Listbox'),
+  /**
+   * Focus will be moved to the item with this ref once within the menu.
+   */
+  firstItemRef: PropTypes.object,
+  /**
+   * Focus will be returned to the dropdown control with this ref after leaving
+   * the last menu item.
+   */
+  parentRef: PropTypes.object,
+  /**
+   * `Listbox` items
+   */
+  items: PropTypes.array,
+  /**
+   * To select an item by default
+   */
+  selectedId: PropTypes.string,
+  /**
+   * onClose event
+   */
+  onClose: PropTypes.func
+};
+Listbox.Overlay = DropdownOverlay;
+export default Listbox;

package/lib/Listbox/ListboxContext.js

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

package/lib/Listbox/ListboxGroup.js

@@ -0,0 +1,125 @@
+/* eslint-disable react-native-a11y/has-valid-accessibility-role */
+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";
+import Platform from "react-native-web/dist/exports/Platform";
+import { withLinkRouter } from '../utils';
+import ExpandCollapse from '../ExpandCollapse';
+import ListboxItem from './ListboxItem';
+import { useListboxContext } from './ListboxContext';
+import GroupControl from './GroupControl';
+import { jsx as _jsx } from "react/jsx-runtime";
+const styles = StyleSheet.create({
+  groupWrapper: {
+    margin: 0,
+    padding: 0,
+    overflow: 'hidden'
+  },
+  list: {
+    margin: 0,
+    padding: 0
+  }
+});
+const getAccessibilityRole = () => Platform.select({
+  ios: 'listitem',
+  android: 'none',
+  web: 'listitem'
+});
+const ListboxGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    id,
+    label,
+    items,
+    LinkRouter,
+    linkRouterProps,
+    expandProps,
+    onLastItemBlur,
+    nextItemRef,
+    prevItemRef
+  } = _ref;
+  const {
+    selectedId
+  } = useListboxContext();
+
+  // TODO: implement keyboard navigation via refs for grouped items separately here
+  return /*#__PURE__*/_jsx(View, {
+    id: "test",
+    style: styles.groupWrapper,
+    accessibilityRole: getAccessibilityRole(),
+    children: /*#__PURE__*/_jsx(ExpandCollapse.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__*/_jsx(GroupControl, {
+        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__*/_jsx(View, {
+        style: styles.list,
+        children: items.map((item, index) => {
+          return /*#__PURE__*/_jsx(ListboxItem, {
+            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 = {
+  ...withLinkRouter.propTypes,
+  label: PropTypes.string,
+  items: PropTypes.arrayOf(PropTypes.shape({
+    href: PropTypes.string,
+    label: PropTypes.string,
+    current: PropTypes.bool
+  })),
+  expandProps: PropTypes.object,
+  nextItemRef: PropTypes.object,
+  prevItemRef: PropTypes.object,
+  /**
+   * Use this callback to redirect the focus after it leaves the last item of the group.
+   */
+  onLastItemBlur: PropTypes.func
+};
+export default ListboxGroup;

package/lib/Listbox/ListboxItem.js

@@ -0,0 +1,76 @@
+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";
+import { selectSystemProps, withLinkRouter, htmlAttrs } from '../utils';
+import PressableItem from './PressableItem';
+import { useThemeTokensCallback } from '../ThemeProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const styles = StyleSheet.create({
+  itemContainer: {
+    display: 'flex',
+    margin: 0
+  },
+  childContainer: {
+    paddingLeft: 16
+  },
+  nestedChildContainer: {
+    paddingLeft: 24
+  }
+});
+const ListboxItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    href,
+    label,
+    isChild = false,
+    nestedChild,
+    onBlur,
+    nextItemRef,
+    prevItemRef,
+    tokens,
+    variant = {},
+    LinkRouter,
+    linkRouterProps,
+    id,
+    onPress = () => {},
+    ...rest
+  } = _ref;
+  const selectedProps = selectProps({
+    href,
+    ...rest
+  });
+  const getTokens = useThemeTokensCallback('Listbox', tokens, variant, {
+    isChild
+  });
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.itemContainer, isChild && styles.childContainer, nestedChild && styles.nestedChildContainer],
+    role: "option",
+    children: /*#__PURE__*/_jsx(PressableItem, {
+      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,
+  ...withLinkRouter.propTypes,
+  href: PropTypes.string,
+  isChild: PropTypes.bool,
+  label: PropTypes.node.isRequired,
+  nextItemRef: PropTypes.object,
+  prevItemRef: PropTypes.object,
+  onPress: PropTypes.func,
+  nestedChild: PropTypes.bool
+};
+export default withLinkRouter(ListboxItem);