@telus-uds/components-web 2.18.0 → 2.19.0

package/src/Listbox/Listbox.jsx

@@ -1,169 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
-import PropTypes from 'prop-types'
-import styled from 'styled-components'
-import {
-  ExpandCollapse,
-  useThemeTokens,
-  withLinkRouter,
-  ListboxContext,
-  getTokensPropType
-} from '@telus-uds/components-base'
-import ListboxGroup from './ListboxGroup'
-import ListboxItem from './ListboxItem'
-import DropdownOverlay from './ListboxOverlay'
-
-const StyledList = styled.ul({
-  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 = ({
-  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
-}) => {
-  const initialOpen = getInitialOpen(items, defaultSelectedId)
-
-  const [selectedId, setSelectedId] = 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 = useRef([])
-  if (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')) {
-        // 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?.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') {
-        // Close the dropdown
-        parentRef?.current?.click()
-        // Return focus to the dropdown control after leaving the last item
-        parentRef?.current?.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 (
-    <ListboxContext.Provider value={{ selectedId, setSelectedId }}>
-      <ExpandCollapse initialOpen={initialOpen} maxOpen={1}>
-        {(expandProps) => (
-          <StyledList role="listbox" style={{ minHeight, minWidth }}>
-            {items.map((item, index) => {
-              const { id, label, items: nestedItems } = item
-              const itemId = id ?? label
-
-              // 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 ? (
-                <ListboxGroup
-                  {...item}
-                  expandProps={expandProps}
-                  LinkRouter={LinkRouter}
-                  itemRouterProps={itemRouterProps}
-                  prevItemRef={itemRefs.current[index - 1] ?? null}
-                  nextItemRef={itemRefs.current[index + 1] ?? null}
-                  ref={itemRef}
-                  key={itemId}
-                />
-              ) : (
-                <ListboxItem
-                  {...item}
-                  key={itemId}
-                  id={itemId}
-                  LinkRouter={LinkRouter}
-                  itemRouterProps={itemRouterProps}
-                  prevItemRef={itemRefs.current[index - 1] ?? null}
-                  nextItemRef={itemRefs.current[index + 1] ?? null}
-                  ref={itemRef}
-                />
-              )
-            })}
-          </StyledList>
-        )}
-      </ExpandCollapse>
-    </ListboxContext.Provider>
-  )
-}
-
-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,
-  /**
-   * `Listbox` items
-   */
-  items: PropTypes.array,
-  /**
-   * To select an item by default
-   */
-  selectedId: PropTypes.string,
-  /**
-   * onClose event
-   */
-  onClose: PropTypes.func,
-  tokens: getTokensPropType('Listbox')
-}
-
-Listbox.Overlay = DropdownOverlay
-
-export default Listbox

package/src/Listbox/ListboxGroup.jsx

@@ -1,125 +0,0 @@
-/* eslint-disable react/require-default-props */
-import React, { forwardRef } from 'react'
-import PropTypes from 'prop-types'
-import { ExpandCollapse, withLinkRouter, useListboxContext } from '@telus-uds/components-base'
-import styled from 'styled-components'
-import ListboxItem from './ListboxItem'
-import GroupControl from './GroupControl'
-
-const StyledGroupWrapper = styled.li({
-  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 = styled.ul({
-  margin: 0,
-  padding: 0,
-  listStyle: 'none'
-})
-
-const ListboxGroup = forwardRef(
-  (
-    {
-      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 (
-      <StyledGroupWrapper role="option">
-        <ExpandCollapse.Panel
-          panelId={id ?? label}
-          controlTokens={{
-            icon: null,
-            paddingLeft: 'none',
-            paddingRight: 'none',
-            paddingTop: 'none',
-            paddingBottom: 'none',
-            backgroundColor: 'transparent',
-            borderColor: 'transparent',
-            textLine: 'none',
-            borderWidth: 0
-          }}
-          // TODO refactor
-          // eslint-disable-next-line react/no-unstable-nested-components
-          control={(controlProps) => (
-            <GroupControl id={id ?? label} {...controlProps} label={label} />
-          )}
-          {...expandProps}
-          tokens={{
-            contentPaddingLeft: 'none',
-            contentPaddingRight: 'none',
-            contentPaddingTop: 'none',
-            contentPaddingBottom: 'none',
-            borderColor: 'transparent',
-            borderRadius: 0,
-            borderWidth: 0,
-            marginBottom: 0
-          }}
-          controlRef={ref}
-        >
-          <StyledList>
-            {items.map((item, index) => {
-              return (
-                <ListboxItem
-                  key={item.label}
-                  id={item.id ?? item.label}
-                  {...item}
-                  selected={
-                    (item.id && item.id === selectedId) || (item.label && item.label === selectedId)
-                  }
-                  isChild
-                  LinkRouter={LinkRouter}
-                  linkRouterProps={linkRouterProps}
-                  {...(index === 0 && { prevItemRef })}
-                  {...(index === items.length - 1 && { nextItemRef })}
-                  {...(index === items.length - 1 && { onBlur: onLastItemBlur })}
-                />
-              )
-            })}
-          </StyledList>
-        </ExpandCollapse.Panel>
-      </StyledGroupWrapper>
-    )
-  }
-)
-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/src/Listbox/ListboxItem.jsx

@@ -1,80 +0,0 @@
-/* eslint-disable react/require-default-props */
-import React, { forwardRef } from 'react'
-import PropTypes from 'prop-types'
-import styled from 'styled-components'
-import {
-  selectSystemProps,
-  withLinkRouter,
-  useThemeTokensCallback,
-  PressableItem
-} from '@telus-uds/components-base'
-import { htmlAttrs } from '../utils'
-
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
-
-const StyledItemContainer = styled.li({
-  display: 'flex',
-  paddingLeft: ({ isChild }) => (isChild ? '16px' : '0px'),
-  '&&&': {
-    // Docusaurus applies aggressively high-specificity margin on `li`
-    margin: 0
-  }
-})
-
-const ListboxItem = forwardRef(
-  (
-    {
-      href,
-      label,
-      isChild = false,
-      onBlur,
-      nextItemRef,
-      prevItemRef,
-      tokens,
-      variant = {},
-      LinkRouter,
-      linkRouterProps,
-      id,
-      onPress = () => {},
-
-      ...rest
-    },
-    ref
-  ) => {
-    const selectedProps = selectProps({ href, ...rest })
-
-    const getTokens = useThemeTokensCallback('Listbox', tokens, variant, { isChild })
-    return (
-      <StyledItemContainer isChild={isChild} {...selectedProps} role="option">
-        <PressableItem
-          href={href}
-          isChild={isChild}
-          onPress={onPress}
-          onBlur={onBlur}
-          nextItemRef={nextItemRef}
-          prevItemRef={prevItemRef}
-          ref={ref}
-          tokens={getTokens}
-          selectedProps={selectedProps}
-          id={id}
-        >
-          {label}
-        </PressableItem>
-      </StyledItemContainer>
-    )
-  }
-)
-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
-}
-
-export default withLinkRouter(ListboxItem)

package/src/Listbox/ListboxOverlay.jsx

@@ -1,72 +0,0 @@
-/* eslint-disable react/require-default-props */
-import React, { forwardRef } from 'react'
-import { Card, useThemeTokens } from '@telus-uds/components-base'
-import PropTypes from 'prop-types'
-import { View, StyleSheet } from 'react-native-web'
-import WebPortal from '../WebPortal'
-
-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 = forwardRef(
-  ({ children, isReady = false, overlaidPosition, maxWidth, minWidth, onLayout }, ref) => {
-    const systemTokens = useThemeTokens('Listbox', {}, {})
-
-    return (
-      <WebPortal>
-        <View
-          ref={ref}
-          onLayout={onLayout}
-          style={[
-            overlaidPosition,
-            { maxWidth, minWidth },
-            staticStyles.positioner,
-            !isReady && staticStyles.hidden
-          ]}
-        >
-          <Card
-            tokens={{
-              shadow: systemTokens.shadow,
-              paddingBottom: paddingVertical,
-              paddingTop: paddingVertical,
-              paddingLeft: paddingHorizontal,
-              paddingRight: paddingHorizontal
-            }}
-          >
-            {children}
-          </Card>
-        </View>
-      </WebPortal>
-    )
-  }
-)
-
-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/src/Listbox/index.js

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