@telus-uds/components-web 2.17.2 → 2.19.0

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