@telus-uds/components-web 1.7.0 → 1.9.0

package/lib-module/IconButton/IconButton.js

@@ -0,0 +1,52 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { IconButton as IconButtonBase, useThemeTokens } from '@telus-uds/components-base';
+import { jsx as _jsx } from "react/jsx-runtime";
+const IconButton = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    icon,
+    action,
+    tokens,
+    variant = {},
+    ...iconButtonProps
+  } = _ref;
+  const variantWithAction = action && !variant.action ? { ...variant,
+    action
+  } : variant;
+  const {
+    icon: themeIcon
+  } = useThemeTokens('IconButton', tokens, variantWithAction);
+  return (
+    /*#__PURE__*/
+    // If we want the arrow icons to have directional animation instead of scale, we can pass
+    // either appropriate iconTransateX/Y here, or define and pass variants like { direction: 'left' }
+    // which have theme rules that set `iconTranslateX` tokens in the theme rules and unset `iconScale`.
+    _jsx(IconButtonBase, {
+      ref: ref,
+      ...iconButtonProps,
+      tokens: tokens,
+      variant: variant,
+      icon: icon ?? themeIcon
+    })
+  );
+});
+const multiBrandIconNames = ['add', 'subtract', 'close', 'play', 'moveUp', 'moveDown', 'moveLeft', 'moveRight', 'expand'];
+IconButton.displayName = 'IconButton';
+
+const propsWithoutIcon = _ref2 => {
+  let {
+    icon,
+    ...props
+  } = _ref2;
+  return props;
+};
+
+IconButton.propTypes = { ...propsWithoutIcon(IconButtonBase.propTypes),
+  // eslint-disable-next-line react/require-default-props
+  action: PropTypes.oneOf(multiBrandIconNames),
+  icon: PropTypes.func
+};
+IconButton.defaultProps = {
+  icon: null
+};
+export default IconButton;

package/lib-module/IconButton/index.js

@@ -0,0 +1,2 @@
+import IconButton from './IconButton';
+export default IconButton;

package/lib-module/Listbox/GroupControl.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { Icon, Spacer, useThemeTokens } from '@telus-uds/components-base';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const StyledControlWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "GroupControl__StyledControlWrapper",
+  componentId: "components-web__sc-1r7ts3q-0"
+})(_ref => {
+  let {
+    focus,
+    tokens
+  } = _ref;
+  return {
+    fontFamily: `${tokens.groupFontName}${tokens.groupFontWeight}normal`,
+    fontSize: tokens.groupFontSize,
+    color: tokens.groupColor,
+    textDecoration: tokens.itemTextDecoration,
+    backgroundColor: tokens.groupBackgroundColor,
+    outline: tokens.itemOutline,
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'space-between',
+    ...(focus ? {
+      border: `${tokens.groupBorderWidth} solid ${tokens.groupBorderColor}`,
+      borderRadius: tokens.groupBorderRadius,
+      paddingLeft: `calc(${tokens.groupPaddingLeft}px - ${tokens.groupBorderWidth}px)`,
+      paddingRight: `calc(${tokens.groupPaddingRight}px - ${tokens.groupBorderWidth}px)`,
+      paddingTop: `calc(${tokens.groupPaddingTop}px - ${tokens.groupBorderWidth}px)`,
+      paddingBottom: `calc(${tokens.groupPaddingBottom}px - ${tokens.groupBorderWidth}px)`
+    } : {
+      paddingLeft: tokens.groupPaddingLeft,
+      paddingRight: tokens.groupPaddingRight,
+      paddingTop: tokens.groupPaddingTop,
+      paddingBottom: tokens.groupPaddingBottom
+    })
+  };
+});
+
+const GroupControl = _ref2 => {
+  let {
+    expanded,
+    pressed,
+    hover,
+    focus,
+    current,
+    label
+  } = _ref2;
+  const tokens = useThemeTokens('ListBox', {}, {}, {
+    expanded,
+    pressed,
+    hover,
+    current,
+    focus
+  });
+  return /*#__PURE__*/_jsxs(StyledControlWrapper, {
+    focus,
+    tokens,
+    children: [label, /*#__PURE__*/_jsx(Spacer, {
+      space: 1,
+      direction: "row"
+    }), /*#__PURE__*/_jsx(Icon, {
+      icon: tokens.groupIcon,
+      variant: {
+        size: 'micro'
+      }
+    })]
+  });
+};
+
+GroupControl.propTypes = {
+  expanded: PropTypes.bool,
+  pressed: PropTypes.bool,
+  hover: PropTypes.bool,
+  focus: PropTypes.bool,
+  current: PropTypes.bool,
+  label: PropTypes.string
+};
+export default GroupControl;

package/lib-module/Listbox/Listbox.js

@@ -0,0 +1,142 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { ExpandCollapse, withLinkRouter } from '@telus-uds/components-base';
+import ListboxGroup from './ListboxGroup';
+import ListboxItem from './ListboxItem';
+import DropdownOverlay from './ListboxOverlay';
+import resolveItemSelection from '../NavigationBar/resolveItemSelection';
+import { createElement as _createElement } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const StyledList = /*#__PURE__*/styled.ul.withConfig({
+  displayName: "Listbox__StyledList",
+  componentId: "components-web__sc-1564thh-0"
+})({
+  margin: 0,
+  padding: 0,
+  listStyle: 'none'
+});
+
+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,
+    LinkRouter,
+    itemRouterProps,
+    onClose
+  } = _ref;
+  const initialOpen = getInitialOpen(items, selectedId); // We need to keep track of each item's ref in order to be able to
+  // focus on a specific item via keyboard navigation
+
+  const itemRefs = useRef([]);
+  if (firstItemRef !== null && firstItemRef !== void 0 && firstItemRef.current) itemRefs.current[0] = firstItemRef.current;
+  const [focusedIndex, setFocusedIndex] = useState(0);
+  const handleKeydown = 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
+
+  useEffect(() => {
+    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);
+    };
+  }, [onClose, handleKeydown]);
+  return /*#__PURE__*/_jsx(ExpandCollapse, {
+    initialOpen: initialOpen,
+    maxOpen: 1,
+    children: expandProps => /*#__PURE__*/_jsx(StyledList, {
+      role: "listbox",
+      children: items.map((item, index) => {
+        const {
+          id,
+          label,
+          items: nestedItems
+        } = item;
+        const {
+          itemId,
+          selected
+        } = resolveItemSelection({
+          id,
+          label,
+          items: nestedItems
+        }, selectedId); // Give `firstItemRef` to the first focusable item
+
+        const itemRef = index === 0 && !itemId !== selectedId || index === 1 && items[0].id === selectedId ? firstItemRef : ref => {
+          itemRefs.current[index] = ref;
+          return ref;
+        };
+        return nestedItems ? /*#__PURE__*/_createElement(ListboxGroup, { ...item,
+          selectedId: selectedId,
+          key: itemId,
+          expandProps: expandProps,
+          LinkRouter: LinkRouter,
+          itemRouterProps: itemRouterProps,
+          prevItemRef: itemRefs.current[index - 1] ?? null,
+          nextItemRef: itemRefs.current[index + 1] ?? null,
+          ref: itemRef
+        }) : /*#__PURE__*/_createElement(ListboxItem, { ...item,
+          selected: selected,
+          key: itemId,
+          LinkRouter: LinkRouter,
+          itemRouterProps: itemRouterProps,
+          prevItemRef: itemRefs.current[index - 1] ?? null,
+          nextItemRef: itemRefs.current[index + 1] ?? null,
+          ref: itemRef
+        });
+      })
+    })
+  });
+};
+
+Listbox.propTypes = { ...withLinkRouter.propTypes,
+
+  /**
+   * 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,
+  items: PropTypes.array,
+  selectedId: PropTypes.string
+};
+Listbox.Overlay = DropdownOverlay;
+export default Listbox;

package/lib-module/Listbox/ListboxGroup.js

@@ -0,0 +1,106 @@
+/* eslint-disable react/require-default-props */
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { ExpandCollapse, withLinkRouter } from '@telus-uds/components-base';
+import styled from 'styled-components';
+import ListboxItem from './ListboxItem';
+import GroupControl from './GroupControl';
+import { jsx as _jsx } from "react/jsx-runtime";
+const StyledGroupWrapper = /*#__PURE__*/styled.li.withConfig({
+  displayName: "ListboxGroup__StyledGroupWrapper",
+  componentId: "components-web__sc-3jlyy7-0"
+})({
+  margin: 'none',
+  padding: 'none',
+  display: 'block',
+  overflowY: 'hidden',
+  // Currently the default expand collapse control does not have a focus state and so the browser default is applied.
+  // This hides the outline so that it does not clash with the custom control we provide.
+  '& div[role=button]': {
+    outline: 'none'
+  }
+});
+const StyledList = /*#__PURE__*/styled.ul.withConfig({
+  displayName: "ListboxGroup__StyledList",
+  componentId: "components-web__sc-3jlyy7-1"
+})({
+  margin: 0,
+  padding: 0,
+  listStyle: 'none'
+});
+const ListboxGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    id,
+    label,
+    items,
+    selectedId,
+    LinkRouter,
+    linkRouterProps,
+    expandProps,
+    onLastItemBlur,
+    nextItemRef,
+    prevItemRef
+  } = _ref;
+  // TODO: implement keyboard navigation via refs for grouped items separately here
+  return /*#__PURE__*/_jsx(StyledGroupWrapper, {
+    role: "option",
+    children: /*#__PURE__*/_jsx(ExpandCollapse.Panel, {
+      panelId: id ?? label,
+      controlTokens: {
+        icon: null,
+        paddingLeft: 'none',
+        paddingRight: 'none',
+        paddingTop: 'none',
+        paddingBottom: 'none'
+      } // TODO refactor
+      // eslint-disable-next-line react/no-unstable-nested-components
+      ,
+      control: controlProps => /*#__PURE__*/_jsx(GroupControl, { ...controlProps,
+        label: label
+      }),
+      ...expandProps,
+      tokens: {
+        contentPaddingLeft: 'none',
+        contentPaddingRight: 'none',
+        contentPaddingTop: 'none',
+        contentPaddingBottom: 'none'
+      },
+      controlRef: ref,
+      children: /*#__PURE__*/_jsx(StyledList, {
+        children: items.map((item, index) => /*#__PURE__*/_jsx(ListboxItem, { ...item,
+          selected: item.id === 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-module/Listbox/ListboxItem.js

@@ -0,0 +1,112 @@
+/* eslint-disable react/require-default-props */
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { selectSystemProps, withLinkRouter, useThemeTokens } from '@telus-uds/components-base';
+import { htmlAttrs } from '../utils';
+import PressableItem from './PressableItem';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const StyledItemContainer = /*#__PURE__*/styled.li.withConfig({
+  displayName: "ListboxItem__StyledItemContainer",
+  componentId: "components-web__sc-tlroet-0"
+})({
+  display: 'flex',
+  paddingLeft: _ref => {
+    let {
+      isChild
+    } = _ref;
+    return isChild ? '16px' : '0px';
+  },
+  '&&&': {
+    // Docusaurus applies aggressively high-specificity margin on `li`
+    margin: 0
+  }
+});
+
+const getSelectedItemStyles = _ref2 => {
+  let {
+    tokens
+  } = _ref2;
+  return {
+    display: tokens.itemDisplay,
+    fontFamily: `${tokens.itemFontName}${tokens.itemFontWeight}normal`,
+    fontSize: tokens.itemFontSize,
+    paddingTop: tokens.itemPaddingTop,
+    paddingBottom: tokens.itemPaddingBottom,
+    paddingLeft: tokens.itemPaddingLeft,
+    paddingRight: tokens.itemPaddingRight,
+    color: tokens.itemColor,
+    textDecoration: tokens.itemTextDecoration,
+    backgroundColor: tokens.itemBackgroundColor,
+    outline: tokens.itemOutline,
+    borderWidth: tokens.itemBorderWidth,
+    width: '100%'
+  };
+};
+
+const SelectedItem = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ListboxItem__SelectedItem",
+  componentId: "components-web__sc-tlroet-1"
+})(_ref3 => {
+  let {
+    isChild,
+    tokens
+  } = _ref3;
+  return { ...getSelectedItemStyles({
+      tokens
+    }),
+    borderLeft: isChild ? `${tokens.itemBorderLeftWidth}px solid ${tokens.itemBorderLeftColor}` : 'none'
+  };
+});
+const ListboxItem = /*#__PURE__*/forwardRef((_ref4, ref) => {
+  let {
+    href,
+    label,
+    onPress,
+    selected = false,
+    isChild = false,
+    onBlur,
+    nextItemRef,
+    prevItemRef,
+    tokens,
+    variant = {},
+    ...rest
+  } = _ref4;
+  const selectedProps = selectProps(rest);
+  const systemTokens = useThemeTokens('ListBox', tokens, variant, {
+    isChild
+  });
+  return /*#__PURE__*/_jsx(StyledItemContainer, {
+    isChild: isChild,
+    ...selectedProps,
+    role: "option",
+    children: selected ? /*#__PURE__*/_jsx(SelectedItem, {
+      isChild: isChild,
+      tokens: systemTokens,
+      children: label
+    }) : /*#__PURE__*/_jsx(PressableItem, {
+      href: href,
+      isChild: isChild,
+      onPress: onPress,
+      onBlur: onBlur,
+      nextItemRef: nextItemRef,
+      prevItemRef: prevItemRef,
+      ref: ref,
+      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,
+  selected: PropTypes.bool,
+  reactRouterLinkComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+};
+export default withLinkRouter(ListboxItem);

package/lib-module/Listbox/ListboxOverlay.js

@@ -0,0 +1,68 @@
+/* eslint-disable react/require-default-props */
+import React, { forwardRef } from 'react';
+import { Card, Portal, useThemeTokens } from '@telus-uds/components-base';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import { jsx as _jsx } from "react/jsx-runtime";
+const staticStyles = StyleSheet.create({
+  positioner: {
+    flex: 1,
+    // Grow to maxWidth when possible, shrink when not possible
+    position: 'absolute',
+    zIndex: 10000 // 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__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    isReady = false,
+    overlaidPosition,
+    maxWidth,
+    minWidth,
+    onLayout
+  } = _ref;
+  const systemTokens = useThemeTokens('ListBox', {}, {});
+  return /*#__PURE__*/_jsx(Portal, {
+    children: /*#__PURE__*/_jsx(View, {
+      ref: ref,
+      onLayout: onLayout,
+      style: [overlaidPosition, {
+        maxWidth,
+        minWidth
+      }, staticStyles.positioner, !isReady && staticStyles.hidden],
+      children: /*#__PURE__*/_jsx(Card, {
+        tokens: {
+          shadow: systemTokens.shadow,
+          paddingBottom: paddingVertical,
+          paddingTop: paddingVertical,
+          paddingLeft: paddingHorizontal,
+          paddingRight: paddingHorizontal
+        },
+        children: children
+      })
+    })
+  });
+});
+DropdownOverlay.displayName = 'DropdownOverlay';
+DropdownOverlay.propTypes = {
+  children: PropTypes.node.isRequired,
+  isReady: PropTypes.bool,
+  overlaidPosition: PropTypes.shape({
+    top: PropTypes.number,
+    left: PropTypes.number,
+    width: PropTypes.number
+  }),
+  maxWidth: PropTypes.number,
+  minWidth: PropTypes.number,
+  onLayout: PropTypes.func
+};
+export default DropdownOverlay;

package/lib-module/Listbox/PressableItem.js

@@ -0,0 +1,128 @@
+/* eslint-disable react/require-default-props */
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { selectSystemProps, useThemeTokens } from '@telus-uds/components-base';
+import styled from 'styled-components';
+import { htmlAttrs } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+
+const getItemStyles = _ref => {
+  let {
+    tokens
+  } = _ref;
+  return {
+    fontFamily: `${tokens.groupFontName}${tokens.groupFontWeight}normal`,
+    fontSize: tokens.itemFontSize,
+    paddingTop: tokens.itemPaddingTop,
+    paddingBottom: tokens.itemPaddingBottom,
+    paddingLeft: tokens.itemPaddingLeft,
+    paddingRight: tokens.itemPaddingRight,
+    borderWidth: tokens.itemBorderWidth,
+    width: '100%',
+    backgroundColor: tokens.itemBackgroundColor,
+    color: tokens.groupColor,
+    display: tokens.itemDisplay,
+    outline: tokens.itemOutline,
+    textDecoration: tokens.itemTextDecoration
+  };
+};
+
+const StyledLink = /*#__PURE__*/styled.a.withConfig({
+  displayName: "PressableItem__StyledLink",
+  componentId: "components-web__sc-1h6cvsc-0"
+})(_ref2 => {
+  let {
+    isChild,
+    tokens
+  } = _ref2;
+  return { ...getItemStyles({
+      isChild,
+      tokens
+    }),
+    borderLeft: isChild ? `${tokens.itemBorderWidth}px solid ${tokens.itemBorderBackgroundColor}` : 'none',
+    cursor: 'pointer',
+    [`&:hover, &:focus, &:active`]: {
+      color: tokens.itemColor
+    },
+    '&:hover': {
+      backgroundColor: tokens.groupBackgroundColor
+    },
+    // Highlighting for pressable items that are not links per se
+    // TODO: find a better way to display and style a pressable link
+    '&:hover > div, &:hover > div > span': {
+      color: `${tokens.itemColor} !important`
+    },
+    '&:focus': {
+      border: `${tokens.groupBorderWidth}px solid ${tokens.itemBorderLeftColor}`,
+      borderLeft: isChild && `${tokens.itemBorderWidth}px solid ${tokens.itemBorderLeftColor}`,
+      borderRadius: !isChild && tokens.groupBorderRadius,
+      paddingLeft: !isChild && `calc(${tokens.itemPaddingLeft}px - ${tokens.groupBorderWidth}px)`,
+      paddingRight: `calc(${tokens.itemPaddingRight}px - ${tokens.groupBorderWidth}px)`,
+      paddingTop: `calc(${tokens.itemPaddingTop}px - ${tokens.groupBorderWidth}px)`,
+      paddingBottom: `calc(${tokens.itemPaddingBottom}px - ${tokens.groupBorderWidth}px)`,
+      backgroundColor: tokens.groupBackgroundColor
+    },
+    '&:active': {
+      backgroundColor: tokens.itemBorderBackgroundColor
+    }
+  };
+});
+const PressableItem = /*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+    children,
+    href,
+    isChild = false,
+    onBlur,
+    onPress,
+    tabIndex = 0,
+    nextItemRef,
+    prevItemRef,
+    tokens,
+    variant = {},
+    ...rest
+  } = _ref3;
+
+  const handleKeyPress = event => {
+    if (['Enter', ' '].includes(event === null || event === void 0 ? void 0 : event.key)) {
+      onPress === null || onPress === void 0 ? void 0 : onPress(event);
+    } else if ((event === null || event === void 0 ? void 0 : event.key) === 'ArrowDown' && nextItemRef !== null && nextItemRef !== void 0 && nextItemRef.current) {
+      nextItemRef.current.focus();
+    } else if ((event === null || event === void 0 ? void 0 : event.key) === 'ArrowUp' && prevItemRef !== null && prevItemRef !== void 0 && prevItemRef.current) {
+      prevItemRef.current.focus();
+    }
+  };
+
+  const systemTokens = useThemeTokens('ListBox', tokens, variant, {
+    isChild,
+    hover: true
+  });
+  return /*#__PURE__*/_jsx(StyledLink, {
+    isChild: isChild,
+    tokens: systemTokens,
+    onBlur: onBlur,
+    onClick: onPress,
+    onKeyPress: handleKeyPress,
+    ref: ref,
+    tabIndex: tabIndex,
+    ...(href && {
+      href
+    }),
+    ...(onPress && {
+      onClick: onPress
+    }),
+    ...selectProps(rest),
+    children: children
+  });
+});
+PressableItem.displayName = 'PressableItem';
+PressableItem.propTypes = { ...selectedSystemPropTypes,
+  href: PropTypes.string,
+  isChild: PropTypes.bool,
+  children: PropTypes.node.isRequired,
+  onBlur: PropTypes.func,
+  onPress: PropTypes.func,
+  nextItemRef: PropTypes.object,
+  prevItemRef: PropTypes.object
+};
+export default PressableItem;

package/lib-module/Listbox/index.js

@@ -0,0 +1,2 @@
+import Listbox from './Listbox';
+export default Listbox;