@telus-uds/components-base 1.60.0 → 1.62.0

package/lib-module/Listbox/GroupControl.js

@@ -0,0 +1,102 @@
+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 { useThemeTokens } from '../ThemeProvider';
+import Icon from '../Icon';
+import Spacer from '../Spacer';
+import { useListboxContext } from './ListboxContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const styles = StyleSheet.create({
+  controlWrapper: {
+    width: '100%',
+    flex: 1,
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    boxSizing: 'border-box'
+  }
+});
+
+const GroupControl = _ref => {
+  let {
+    expanded,
+    pressed,
+    hover,
+    focus,
+    label,
+    id
+  } = _ref;
+  const {
+    selectedId,
+    setSelectedId
+  } = useListboxContext();
+  const tokens = useThemeTokens('Listbox', {}, {}, {
+    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;
+  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
+    }],
+    children: [/*#__PURE__*/_jsx(Text, {
+      children: label
+    }), /*#__PURE__*/_jsx(Spacer, {
+      space: 1,
+      direction: "row"
+    }), /*#__PURE__*/_jsx(Icon, {
+      icon: tokens.groupIcon,
+      tokens: {
+        color: tokens.groupColor
+      },
+      variant: {
+        size: 'micro'
+      }
+    })]
+  });
+};
+
+GroupControl.propTypes = {
+  id: PropTypes.string,
+  expanded: PropTypes.bool,
+  pressed: PropTypes.bool,
+  hover: PropTypes.bool,
+  focus: PropTypes.bool,
+  label: PropTypes.string
+};
+export default GroupControl;

package/lib-module/Listbox/Listbox.js

@@ -0,0 +1,172 @@
+import React, { useCallback, useEffect, useRef, useState } 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 = _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(() => {
+    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,
+      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 = 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: 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.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/lib-module/Listbox/ListboxGroup.js

@@ -0,0 +1,117 @@
+/* eslint-disable react-native-a11y/has-valid-accessibility-role */
+import React, { forwardRef } 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 { 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 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(View, {
+    id: "test",
+    style: styles.groupWrapper,
+    accessibilityRole: "listitem",
+    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

@@ -0,0 +1,71 @@
+/* eslint-disable react/require-default-props */
+import React, { forwardRef } 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
+  }
+});
+const ListboxItem = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    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 /*#__PURE__*/_jsx(View, {
+    style: [styles.itemContainer, isChild && styles.childContainer],
+    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

@@ -0,0 +1,80 @@
+/* eslint-disable react/require-default-props */
+import React, { forwardRef } 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 '@gorhom/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__*/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

@@ -21,7 +21,6 @@ const getItemStyles = _ref => {
     itemPaddingRight,
     itemBackgroundColor,
     itemColor,
-    itemDisplay,
     itemOutline,
     itemTextDecoration,
     itemBorderLeftColor,
@@ -43,7 +42,6 @@ const getItemStyles = _ref => {
     width: '100%',
     backgroundColor: itemBackgroundColor,
     color: itemColor,
-    display: itemDisplay,
     outline: itemOutline,
     textDecoration: itemTextDecoration,
     borderLeft: `${itemBorderLeftWidth}px solid ${itemBorderLeftColor}`,

package/lib-module/Listbox/index.js

@@ -1,2 +1,2 @@
-export * from './ListboxContext';
-export { default as PressableItem } from './PressableItem';
+import Listbox from './Listbox';
+export default Listbox;

package/lib-module/SideNav/Item.js

@@ -116,13 +116,13 @@ Item.propTypes = { ...selectedSystemPropTypes,
   children: PropTypes.node.isRequired,
 
   /**
-   *
+   * @ignore
    * Set internally in `SideNav` render function - used to keep track of active item.
    */
   itemId: PropTypes.string,
 
   /**
-   *
+   * @ignore
    * Set internally in `SideNav` render function - used to keep track of expanded items groups.
    */
   groupId: PropTypes.string,
@@ -136,27 +136,19 @@ Item.propTypes = { ...selectedSystemPropTypes,
   hrefAttrs: PropTypes.shape(hrefAttrsProp.types),
 
   /**
-   *
+   * @ignore
    * Set internally in `SideNav` render function.
    */
   isActive: PropTypes.bool,
 
   /**
-   *
+   * @ignore
    * Set internally in `SideNav.ItemsGroup` render function. Used to mark expanded `ItemsGroup` parent.
    */
   isExpanded: PropTypes.bool,
-  tokens: getTokensPropType('SideNavItem'),
-  variant: variantProp.propType,
-
-  /**
-   * Accesibility Role
-   */
   accessibilityRole: PropTypes.string,
-
-  /**
-   * test ID
-   */
-  testID: PropTypes.number
+  testID: PropTypes.number,
+  tokens: getTokensPropType('SideNavItem'),
+  variant: variantProp.propType
 };
 export default Item;

package/lib-module/TextInput/TextInputBase.js

@@ -269,7 +269,12 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
       variant: {
         compact: true,
         password: true,
-        inactive: !!variant.inactive
+        inactive: variant.inactive,
+        size: 'large'
+      },
+      tokens: {
+        width: 40,
+        height: 40
       }
     }, !showPassword ? 'hide' : 'show'));
   }
@@ -347,6 +352,8 @@ export default TextInputBase;
 const staticStyles = StyleSheet.create({
   buttonsContainer: {
     position: 'absolute',
+    flexDirection: 'row',
+    alignItems: 'center',
     right: 0,
     top: 0,
     bottom: 0,

package/lib-module/Tooltip/Tooltip.js

@@ -123,6 +123,7 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref6, ref) => {
     content,
     position = 'auto',
     copy = 'en',
+    onPress = () => {},
     tokens,
     variant,
     inline = false,
@@ -163,7 +164,10 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref6, ref) => {
   });
   const themeTokens = useThemeTokens('Tooltip', tokens, variant);
 
-  const toggleIsOpen = () => setIsOpen(!isOpen);
+  const toggleIsOpen = () => {
+    onPress();
+    setIsOpen(!isOpen);
+  };
 
   const close = () => setIsOpen(false);
 

package/lib-module/Tooltip/Tooltip.native.js

@@ -150,6 +150,7 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref6, ref) => {
     content,
     position = 'auto',
     copy = 'en',
+    onPress = () => {},
     tokens,
     variant,
     inline = false,
@@ -180,7 +181,10 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref6, ref) => {
     return () => subscription === null || subscription === void 0 ? void 0 : subscription.remove();
   });
 
-  const toggleIsOpen = () => setIsOpen(!isOpen);
+  const toggleIsOpen = () => {
+    onPress();
+    setIsOpen(!isOpen);
+  };
 
   const close = () => setIsOpen(false);
 

package/lib-module/Tooltip/shared.js

@@ -26,6 +26,11 @@ const propTypes = {
    * Display tooltip icon button as an inline element.
    */
   inline: PropTypes.bool,
+
+  /**
+   * Callback function triggered when the tooltip is pressed.
+   */
+  onPress: PropTypes.func,
   tokens: getTokensPropType('Tooltip'),
   variant: variantProp.propType
 };