@telus-uds/components-web 2.17.2 → 2.19.0

package/lib-module/Listbox/Listbox.js

@@ -1,158 +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 } from '@telus-uds/components-base';
-import ListboxGroup from './ListboxGroup';
-import ListboxItem from './ListboxItem';
-import DropdownOverlay from './ListboxOverlay';
-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: defaultSelectedId,
-    LinkRouter,
-    itemRouterProps,
-    onClose,
-    variant,
-    tokens
-  } = _ref;
-  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 !== 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(ListboxContext.Provider, {
-    value: {
-      selectedId,
-      setSelectedId
-    },
-    children: /*#__PURE__*/_jsx(ExpandCollapse, {
-      initialOpen: initialOpen,
-      maxOpen: 1,
-      children: expandProps => /*#__PURE__*/_jsx(StyledList, {
-        role: "listbox",
-        style: {
-          minHeight,
-          minWidth
-        },
-        children: 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 ? /*#__PURE__*/_createElement(ListboxGroup, { ...item,
-            expandProps: expandProps,
-            LinkRouter: LinkRouter,
-            itemRouterProps: itemRouterProps,
-            prevItemRef: itemRefs.current[index - 1] ?? null,
-            nextItemRef: itemRefs.current[index + 1] ?? null,
-            ref: 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: 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,
-
-  /**
-   * `Listbox` items
-   */
-  items: PropTypes.array,
-
-  /**
-   * To select an item by default
-   */
-  selectedId: PropTypes.string
-};
-Listbox.Overlay = DropdownOverlay;
-export default Listbox;

package/lib-module/Listbox/ListboxGroup.js

@@ -1,122 +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';
-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,
-    LinkRouter,
-    linkRouterProps,
-    expandProps,
-    onLastItemBlur,
-    nextItemRef,
-    prevItemRef
-  } = _ref;
-  const {
-    selectedId
-  } = useListboxContext(); // 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',
-        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: 'none',
-        contentPaddingRight: 'none',
-        contentPaddingTop: 'none',
-        contentPaddingBottom: 'none',
-        borderColor: 'transparent',
-        borderRadius: 0,
-        borderWidth: 0,
-        marginBottom: 0
-      },
-      controlRef: ref,
-      children: /*#__PURE__*/_jsx(StyledList, {
-        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-module/Listbox/ListboxItem.js

@@ -1,77 +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';
-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 ListboxItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
-  let {
-    href,
-    label,
-    isChild = false,
-    onBlur,
-    nextItemRef,
-    prevItemRef,
-    tokens,
-    variant = {},
-    LinkRouter,
-    linkRouterProps,
-    id,
-    onPress = () => {},
-    ...rest
-  } = _ref2;
-  const selectedProps = selectProps({
-    href,
-    ...rest
-  });
-  const getTokens = useThemeTokensCallback('Listbox', tokens, variant, {
-    isChild
-  });
-  return /*#__PURE__*/_jsx(StyledItemContainer, {
-    isChild: isChild,
-    ...selectedProps,
-    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
-};
-export default withLinkRouter(ListboxItem);

package/lib-module/Listbox/ListboxOverlay.js

@@ -1,69 +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 from "react-native-web/dist/exports/View";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import WebPortal from '../WebPortal';
-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(WebPortal, {
-    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/index.js

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