@telus-uds/components-base 3.22.0 → 3.24.0

package/lib/esm/Listbox/GroupControl.js

@@ -1,15 +1,16 @@
 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 Text from "react-native-web/dist/exports/Text";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import { useThemeTokens } from '../ThemeProvider';
 import Icon from '../Icon';
 import Spacer from '../Spacer';
 import { useListboxContext } from './ListboxContext';
+import { variantProp } from '../utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = StyleSheet.create({
-  controlWrapper: {
+  container: {
     width: '100%',
     flex: 1,
     alignItems: 'center',
@@ -18,6 +19,34 @@ const styles = StyleSheet.create({
     boxSizing: 'border-box'
   }
 });
+const selectTextStyles = tokens => ({
+  color: tokens.groupColor,
+  fontFamily: `${tokens.groupFontName}${tokens.groupFontWeight}normal`,
+  fontSize: tokens.groupFontSize,
+  fontWeight: tokens.groupFontWeight
+});
+const selectContainerStyles = tokens => ({
+  fontFamily: `${tokens.groupFontName}${tokens.groupFontWeight}normal`,
+  fontSize: tokens.groupFontSize,
+  color: tokens.groupColor,
+  textDecoration: tokens.itemTextDecoration,
+  backgroundColor: tokens.groupBackgroundColor,
+  outline: tokens.itemOutline,
+  minHeight: tokens.groupHeight,
+  borderRadius: tokens.groupBorderRadius,
+  paddingLeft: tokens.groupPaddingLeft - tokens.groupBorderLeftWidth,
+  paddingRight: tokens.groupPaddingRight - tokens.groupBorderRightWidth,
+  paddingTop: tokens.groupPaddingTop - tokens.groupBorderTopWidth,
+  paddingBottom: tokens.groupPaddingBottom - tokens.groupBorderBottomWidth,
+  borderLeftWidth: tokens.groupBorderLeftWidth,
+  borderLeftColor: tokens.groupBorderLeftColor,
+  borderRightWidth: tokens.groupBorderRightWidth,
+  borderRightColor: tokens.groupBorderRightColor,
+  borderTopWidth: tokens.groupBorderTopWidth,
+  borderTopColor: tokens.groupBorderTopColor,
+  borderBottomWidth: tokens.groupBorderBottomWidth,
+  borderBottomColor: tokens.groupBorderBottomColor
+});
 const GroupControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     expanded,
@@ -25,65 +54,35 @@ const GroupControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     hover,
     focus,
     label,
-    id
+    id,
+    variant = {}
   } = _ref;
   const {
     selectedId,
     setSelectedId
   } = useListboxContext();
-  const tokens = useThemeTokens('Listbox', {}, {}, {
+  const isSecondLevel = variant?.secondLevel === true;
+  const tokens = useThemeTokens('Listbox', variant, {}, {
     expanded,
     pressed,
     hover,
     current: selectedId === id && id !== undefined,
-    focus
-  });
-  const {
-    groupFontName,
-    groupFontWeight,
-    groupFontSize,
-    groupColor,
-    groupBackgroundColor,
-    groupBorderColor,
-    groupBorderWidth,
-    groupBorderRadius,
-    groupPaddingLeft,
-    groupPaddingRight,
-    groupPaddingTop,
-    groupPaddingBottom,
-    itemTextDecoration,
-    itemOutline,
-    groupHeight
-  } = tokens;
-  const getTextStyles = () => ({
-    color: groupColor
+    focus,
+    secondLevel: isSecondLevel
   });
+  const displayIcon = isSecondLevel ? tokens.secondLevelParentIcon : tokens.groupIcon;
   return /*#__PURE__*/_jsxs(View, {
     onPress: () => setSelectedId(id),
-    style: [styles.controlWrapper, {
-      fontFamily: `${groupFontName}${groupFontWeight}normal`,
-      fontSize: groupFontSize,
-      color: groupColor,
-      textDecoration: itemTextDecoration,
-      backgroundColor: groupBackgroundColor,
-      outline: itemOutline,
-      height: groupHeight,
-      border: `${groupBorderWidth}px solid ${groupBorderColor}`,
-      borderRadius: groupBorderRadius,
-      paddingLeft: groupPaddingLeft - groupBorderWidth,
-      paddingRight: groupPaddingRight - groupBorderWidth,
-      paddingTop: groupPaddingTop - groupBorderWidth,
-      paddingBottom: groupPaddingBottom - groupBorderWidth
-    }],
+    style: [styles.container, selectContainerStyles(tokens)],
     ref: ref,
     children: [/*#__PURE__*/_jsx(Text, {
-      style: getTextStyles(),
+      style: selectTextStyles(tokens),
       children: label
     }), /*#__PURE__*/_jsx(Spacer, {
       space: 1,
       direction: "row"
-    }), /*#__PURE__*/_jsx(Icon, {
-      icon: tokens.groupIcon,
+    }), displayIcon && /*#__PURE__*/_jsx(Icon, {
+      icon: displayIcon,
       tokens: {
         color: tokens.groupColor
       },
@@ -100,6 +99,7 @@ GroupControl.propTypes = {
   pressed: PropTypes.bool,
   hover: PropTypes.bool,
   focus: PropTypes.bool,
-  label: PropTypes.string
+  label: PropTypes.string,
+  variant: variantProp.propType
 };
 export default GroupControl;

package/lib/esm/Listbox/Listbox.js

@@ -1,22 +1,30 @@
 import React, { createElement as _createElement } 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 StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import { useThemeTokens } from '../ThemeProvider';
-import { withLinkRouter, getTokensPropType } from '../utils';
+import { withLinkRouter, getTokensPropType, variantProp } from '../utils';
 import ExpandCollapse from '../ExpandCollapse';
 import ListboxGroup from './ListboxGroup';
 import ListboxItem from './ListboxItem';
 import { ListboxContext } from './ListboxContext';
 import DropdownOverlay from './ListboxOverlay';
+import defaultDictionary from './dictionary';
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = StyleSheet.create({
-  list: {
+  container: {
     padding: 0,
-    margin: 0
+    margin: 0,
+    position: 'relative',
+    overflow: 'visible'
   }
 });
+const selectContainerStyles = tokens => ({
+  minHeight: tokens.minHeight,
+  minWidth: tokens.minWidth,
+  backgroundColor: tokens.containerBackgroundColor
+});
 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 {
@@ -29,15 +37,16 @@ const Listbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     LinkRouter,
     itemRouterProps,
     onClose,
+    copy = 'en',
+    dictionary = defaultDictionary,
     variant,
-    tokens
+    tokens,
+    testID
   } = _ref;
   const initialOpen = getInitialOpen(items, defaultSelectedId);
   const [selectedId, setSelectedId] = React.useState(defaultSelectedId);
-  const {
-    minHeight,
-    minWidth
-  } = useThemeTokens('Listbox', variant, tokens);
+  const [activeSecondLevelGroup, setActiveSecondLevelGroup] = React.useState(null);
+  const listboxTokens = useThemeTokens('Listbox', tokens, variant);
 
   // We need to keep track of each item's ref in order to be able to
   // focus on a specific item via keyboard navigation
@@ -86,21 +95,22 @@ const Listbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }
     return () => {};
   }, [onClose, handleKeydown]);
+  const contextValue = {
+    selectedId,
+    setSelectedId,
+    activeSecondLevelGroup,
+    setActiveSecondLevelGroup
+  };
   return /*#__PURE__*/_jsx(ListboxContext.Provider, {
-    value: {
-      selectedId,
-      setSelectedId
-    },
+    value: contextValue,
     children: /*#__PURE__*/_jsx(ExpandCollapse, {
       initialOpen: initialOpen,
       maxOpen: 1,
       ref: ref,
       children: expandProps => /*#__PURE__*/_jsx(View, {
-        style: [styles.list, {
-          minHeight,
-          minWidth
-        }],
-        role: "listbox",
+        style: [styles.container, selectContainerStyles(listboxTokens)],
+        accessibilityRole: "combobox",
+        testID: testID,
         children: items.map((item, index) => {
           const {
             id,
@@ -114,6 +124,9 @@ const Listbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
             itemRefs.current[index] = currentItemRef;
             return currentItemRef;
           };
+          if (!nestedItems && activeSecondLevelGroup) {
+            return null;
+          }
           return nestedItems ? /*#__PURE__*/_createElement(ListboxGroup, {
             ...item,
             expandProps: expandProps,
@@ -122,7 +135,12 @@ const Listbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
             prevItemRef: itemRefs.current[index - 1] ?? null,
             nextItemRef: itemRefs.current[index + 1] ?? null,
             ref: index === 0 ? firstItemRef : itemRef,
-            key: itemId
+            key: itemId,
+            copy: copy,
+            dictionary: dictionary,
+            variant: variant,
+            tokens: tokens,
+            onClose: onClose
           }) : /*#__PURE__*/_createElement(ListboxItem, {
             ...item,
             key: itemId,
@@ -131,7 +149,9 @@ const Listbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
             itemRouterProps: itemRouterProps,
             prevItemRef: itemRefs.current[index - 1] ?? null,
             nextItemRef: itemRefs.current[index + 1] ?? null,
-            ref: index === 0 ? firstItemRef : itemRef
+            ref: index === 0 ? firstItemRef : itemRef,
+            variant: variant,
+            tokens: tokens
           });
         })
       })
@@ -162,7 +182,30 @@ Listbox.propTypes = {
   /**
    * onClose event
    */
-  onClose: PropTypes.func
+  onClose: PropTypes.func,
+  /**
+   * Test ID for testing
+   */
+  testID: PropTypes.string,
+  /**
+   * Select English or French copy
+   */
+  copy: PropTypes.oneOf(['en', 'fr']),
+  /**
+   * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
+   */
+  dictionary: PropTypes.shape({
+    en: PropTypes.shape({
+      closeMenu: PropTypes.string.isRequired
+    }),
+    fr: PropTypes.shape({
+      closeMenu: PropTypes.string.isRequired
+    })
+  }),
+  /**
+   * Listbox variant
+   */
+  variant: variantProp.propType
 };
 Listbox.Overlay = DropdownOverlay;
 export default Listbox;

package/lib/esm/Listbox/ListboxGroup.js

@@ -4,21 +4,36 @@ 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 { withLinkRouter, variantProp, copyPropTypes } from '../utils';
+import { useThemeTokens } from '../ThemeProvider';
 import ExpandCollapse from '../ExpandCollapse';
 import ListboxItem from './ListboxItem';
 import { useListboxContext } from './ListboxContext';
 import GroupControl from './GroupControl';
-import { jsx as _jsx } from "react/jsx-runtime";
+import SecondLevelHeader from './SecondLevelHeader';
+import defaultDictionary from './dictionary';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = StyleSheet.create({
   groupWrapper: {
     margin: 0,
     padding: 0,
-    overflow: 'hidden'
+    overflow: 'visible'
   },
   list: {
     margin: 0,
     padding: 0
+  },
+  secondLevelContainer: {
+    margin: 0,
+    padding: 0,
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  secondLevelList: {
+    margin: 0,
+    padding: 0,
+    width: '100%'
   }
 });
 const getAccessibilityRole = () => Platform.select({
@@ -26,7 +41,15 @@ const getAccessibilityRole = () => Platform.select({
   android: 'none',
   web: 'listitem'
 });
-const ListboxGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const selectSecondLevelContainerStyles = _ref => {
+  let {
+    secondLevelHeaderBackgroundColor
+  } = _ref;
+  return {
+    backgroundColor: secondLevelHeaderBackgroundColor
+  };
+};
+const ListboxGroup = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     id,
     label,
@@ -36,11 +59,79 @@ const ListboxGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     expandProps,
     onLastItemBlur,
     nextItemRef,
-    prevItemRef
-  } = _ref;
+    prevItemRef,
+    copy = 'en',
+    dictionary = defaultDictionary,
+    variant = {},
+    tokens = {},
+    onClose
+  } = _ref2;
   const {
-    selectedId
+    selectedId,
+    activeSecondLevelGroup,
+    setActiveSecondLevelGroup
   } = useListboxContext();
+  const [secondLevelOpen, setSecondLevelOpen] = React.useState(false);
+  const isSecondLevel = variant?.secondLevel === true;
+  const listboxTokens = useThemeTokens('Listbox', variant, tokens);
+  const groupId = id ?? label;
+  const handleGroupClick = React.useCallback(() => {
+    if (isSecondLevel) {
+      setSecondLevelOpen(true);
+      setActiveSecondLevelGroup(groupId);
+    }
+  }, [isSecondLevel, groupId, setActiveSecondLevelGroup]);
+  const handleBackClick = React.useCallback(() => {
+    setSecondLevelOpen(false);
+    setActiveSecondLevelGroup(null);
+  }, [setActiveSecondLevelGroup]);
+  const handleCloseClick = React.useCallback(() => {
+    setSecondLevelOpen(false);
+    setActiveSecondLevelGroup(null);
+    if (onClose) {
+      onClose();
+    }
+  }, [setActiveSecondLevelGroup, onClose]);
+  if (isSecondLevel && activeSecondLevelGroup && activeSecondLevelGroup !== groupId) {
+    return null;
+  }
+  if (isSecondLevel && secondLevelOpen) {
+    return /*#__PURE__*/_jsxs(View, {
+      style: [styles.secondLevelContainer, selectSecondLevelContainerStyles(listboxTokens)],
+      children: [/*#__PURE__*/_jsx(SecondLevelHeader, {
+        label: label,
+        onBack: handleBackClick,
+        onClose: handleCloseClick,
+        copy: copy,
+        dictionary: dictionary,
+        variant: variant,
+        tokens: tokens
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.secondLevelList,
+        children: items && 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: false,
+            LinkRouter: LinkRouter,
+            linkRouterProps: linkRouterProps,
+            variant: variant,
+            tokens: tokens,
+            ...(index === 0 && {
+              prevItemRef
+            }),
+            ...(index === items.length - 1 && {
+              nextItemRef
+            }),
+            ...(index === items.length - 1 && {
+              onBlur: onLastItemBlur
+            })
+          }, item.label);
+        })
+      })]
+    });
+  }
 
   // TODO: implement keyboard navigation via refs for grouped items separately here
   return /*#__PURE__*/_jsx(View, {
@@ -66,9 +157,16 @@ const ListboxGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       control: controlProps => /*#__PURE__*/_jsx(GroupControl, {
         id: id ?? label,
         ...controlProps,
-        label: label
+        label: label,
+        variant: variant
       }),
       ...expandProps,
+      ...(isSecondLevel && {
+        open: false
+      }),
+      ...(isSecondLevel && {
+        onPress: handleGroupClick
+      }),
       tokens: {
         contentPaddingLeft: 0,
         contentPaddingRight: 0,
@@ -77,10 +175,11 @@ const ListboxGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         borderColor: 'transparent',
         borderRadius: 0,
         borderWidth: 0,
-        marginBottom: 0
+        marginBottom: 0,
+        contentPanelBackgroundColor: 'transparent'
       },
       controlRef: ref,
-      children: /*#__PURE__*/_jsx(View, {
+      children: !isSecondLevel && /*#__PURE__*/_jsx(View, {
         style: styles.list,
         children: items.map((item, index) => {
           return /*#__PURE__*/_jsx(ListboxItem, {
@@ -90,6 +189,8 @@ const ListboxGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
             isChild: true,
             LinkRouter: LinkRouter,
             linkRouterProps: linkRouterProps,
+            variant: variant,
+            tokens: tokens,
             ...(index === 0 && {
               prevItemRef
             }),
@@ -108,6 +209,10 @@ const ListboxGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 ListboxGroup.displayName = 'ListboxGroup';
 ListboxGroup.propTypes = {
   ...withLinkRouter.propTypes,
+  /**
+   * Unique identifier for the group
+   */
+  id: PropTypes.string,
   label: PropTypes.string,
   items: PropTypes.arrayOf(PropTypes.shape({
     href: PropTypes.string,
@@ -120,6 +225,33 @@ ListboxGroup.propTypes = {
   /**
    * Use this callback to redirect the focus after it leaves the last item of the group.
    */
-  onLastItemBlur: PropTypes.func
+  onLastItemBlur: PropTypes.func,
+  /**
+   * Select English or French copy
+   */
+  copy: copyPropTypes,
+  /**
+   * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
+   */
+  dictionary: PropTypes.shape({
+    en: PropTypes.shape({
+      closeMenu: PropTypes.string.isRequired
+    }),
+    fr: PropTypes.shape({
+      closeMenu: PropTypes.string.isRequired
+    })
+  }),
+  /**
+   * Variant configuration for secondLevel behavior
+   */
+  variant: variantProp.propType,
+  /**
+   * Custom tokens
+   */
+  tokens: PropTypes.object,
+  /**
+   * Callback when the menu is closed
+   */
+  onClose: PropTypes.func
 };
 export default ListboxGroup;

package/lib/esm/Listbox/ListboxOverlay.js

@@ -30,12 +30,15 @@ const DropdownOverlay = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     maxWidth,
     minWidth,
     onLayout,
-    tokens
+    tokens,
+    testID,
+    variant
   } = _ref;
-  const systemTokens = useThemeTokens('Listbox', {}, {});
+  const systemTokens = useThemeTokens('Listbox', variant, tokens);
   return /*#__PURE__*/_jsx(View, {
     ref: ref,
     onLayout: onLayout,
+    testID: testID,
     style: [overlaidPosition, {
       maxWidth,
       minWidth
@@ -43,11 +46,14 @@ const DropdownOverlay = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     children: /*#__PURE__*/_jsx(Card, {
       tokens: {
         shadow: systemTokens.shadow,
+        borderRadius: systemTokens.borderRadius,
+        ...(Platform.OS === 'web' && {
+          overflowY: 'hidden'
+        }),
         paddingBottom: paddingVertical,
         paddingTop: paddingVertical,
         paddingLeft: paddingHorizontal,
-        paddingRight: paddingHorizontal,
-        ...tokens
+        paddingRight: paddingHorizontal
       },
       children: children
     })
@@ -74,6 +80,8 @@ DropdownOverlay.propTypes = {
   maxWidth: PropTypes.number,
   minWidth: PropTypes.number,
   onLayout: PropTypes.func,
-  tokens: PropTypes.object
+  tokens: PropTypes.object,
+  testID: PropTypes.string,
+  variant: PropTypes.object
 };
 export default Platform.OS === 'web' ? withPortal(DropdownOverlay) : DropdownOverlay;

package/lib/esm/Listbox/PressableItem.js

@@ -41,10 +41,14 @@ const getItemStyles = _ref => {
     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}`,
+    borderLeftWidth: itemBorderLeftWidth,
+    borderLeftColor: itemBorderLeftColor,
+    borderRightWidth: itemBorderRightWidth,
+    borderRightColor: itemBorderRightColor,
+    borderTopWidth: itemBorderTopWidth,
+    borderTopColor: itemBorderTopColor,
+    borderBottomWidth: itemBorderBottomWidth,
+    borderBottomColor: itemBorderBottomColor,
     borderRadius: itemBorderRadius,
     justifyContent: 'center'
   };