@telus-uds/components-base 1.96.0 → 1.97.1

package/lib-module/Listbox/Listbox.js

@@ -1,172 +0,0 @@
-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 { 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 { createElement as _createElement } from "react";
-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 ? 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);
-    } 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 ? 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-module/Listbox/ListboxContext.js

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

package/lib-module/Listbox/ListboxGroup.js

@@ -1,125 +0,0 @@
-/* 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-module/Listbox/ListboxItem.js

@@ -1,76 +0,0 @@
-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);

package/lib-module/Listbox/ListboxOverlay.js

@@ -1,78 +0,0 @@
-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 Portal from '../Portal';
-import { useThemeTokens } from '../ThemeProvider';
-import Card from '../Card';
-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: 1000000000000000 // 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__*/React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    isReady = false,
-    overlaidPosition,
-    maxWidth,
-    minWidth,
-    onLayout
-  } = _ref;
-  const systemTokens = useThemeTokens('Listbox', {}, {});
-  return /*#__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
-    })
-  });
-});
-const withPortal = Overlay => {
-  // eslint-disable-next-line react/display-name, react/no-multi-comp
-  return props => {
-    return /*#__PURE__*/_jsx(Portal, {
-      children: /*#__PURE__*/_jsx(Overlay, {
-        ...props
-      })
-    });
-  };
-};
-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 Platform.OS === 'web' ? withPortal(DropdownOverlay) : DropdownOverlay;

package/lib-module/Listbox/PressableItem.js

@@ -1,140 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Pressable from "react-native-web/dist/exports/Pressable";
-import Text from "react-native-web/dist/exports/Text";
-import { selectSystemProps, resolvePressableTokens, htmlAttrs } from '../utils';
-import { useListboxContext } from './ListboxContext';
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const getItemStyles = _ref => {
-  let {
-    groupFontName,
-    groupFontWeight,
-    itemFontSize,
-    itemPaddingTop,
-    itemPaddingBottom,
-    itemPaddingLeft,
-    itemBorderLeftWidth,
-    itemPaddingRight,
-    itemBackgroundColor,
-    itemColor,
-    itemOutline,
-    itemTextDecoration,
-    itemBorderLeftColor,
-    itemBorderRightWidth,
-    itemBorderRightColor,
-    itemBorderTopWidth,
-    itemBorderTopColor,
-    itemBorderBottomWidth,
-    itemBorderBottomColor,
-    itemBorderRadius
-  } = _ref;
-  return {
-    fontFamily: `${groupFontName}${groupFontWeight}normal`,
-    fontSize: itemFontSize,
-    paddingTop: itemPaddingTop - itemBorderTopWidth,
-    paddingBottom: itemPaddingBottom - itemBorderBottomWidth,
-    paddingLeft: itemPaddingLeft - itemBorderLeftWidth,
-    paddingRight: itemPaddingRight - itemBorderRightWidth,
-    width: '100%',
-    backgroundColor: itemBackgroundColor,
-    color: itemColor,
-    outline: itemOutline,
-    textDecoration: itemTextDecoration,
-    borderLeft: `${itemBorderLeftWidth}px solid ${itemBorderLeftColor}`,
-    borderRight: `${itemBorderRightWidth}px solid ${itemBorderRightColor}`,
-    borderTop: `${itemBorderTopWidth}px solid ${itemBorderTopColor}`,
-    borderBottom: `${itemBorderBottomWidth}px solid ${itemBorderBottomColor}`,
-    borderRadius: itemBorderRadius,
-    justifyContent: 'center'
-  };
-};
-const PressableItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  let {
-    children,
-    href,
-    isChild = false,
-    onBlur,
-    onPress,
-    tabIndex = 0,
-    nextItemRef,
-    prevItemRef,
-    tokens,
-    id,
-    ...rest
-  } = _ref2;
-  const {
-    selectedId,
-    setSelectedId
-  } = useListboxContext();
-  const selectTextStyles = _ref3 => {
-    let {
-      groupFontName,
-      groupFontWeight,
-      itemFontSize,
-      itemColor,
-      lineHeight
-    } = _ref3;
-    return {
-      fontFamily: `${groupFontName}${groupFontWeight}normal`,
-      fontSize: itemFontSize,
-      color: itemColor,
-      lineHeight: lineHeight * itemFontSize
-    };
-  };
-  const resolveButtonTokens = pressableState => {
-    const themeTokens = resolvePressableTokens(tokens, pressableState, {
-      isChild,
-      current: id === selectedId && id !== undefined
-    });
-    return themeTokens;
-  };
-  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.current.focus();
-    } else if ((event === null || event === void 0 ? void 0 : event.key) === 'ArrowUp' && prevItemRef !== null && prevItemRef !== void 0 && prevItemRef.current) {
-      prevItemRef.current.focus();
-    }
-  };
-  return /*#__PURE__*/_jsx(Pressable, {
-    isChild: isChild,
-    style: pressableState => getItemStyles(resolveButtonTokens(pressableState)),
-    onBlur: onBlur,
-    onClick: onPress,
-    onKeyPress: handleKeyPress,
-    ref: ref,
-    tabIndex: tabIndex,
-    ...(href && {
-      href
-    }),
-    ...(onPress && {
-      onClick: onPress
-    }),
-    ...selectProps(rest),
-    onPress: () => {
-      setSelectedId(id);
-      onPress();
-    },
-    children: pressableState => {
-      return /*#__PURE__*/_jsxs(Text, {
-        style: selectTextStyles(resolveButtonTokens(pressableState)),
-        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

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