@telus-uds/components-base 1.65.0 → 1.67.0

package/lib-module/List/ListItemBase.js

@@ -11,7 +11,6 @@ import { useThemeTokens } from '../ThemeProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
 const selectItemBlockStyles = _ref => {
   let {
     interItemMargin
@@ -20,7 +19,6 @@ const selectItemBlockStyles = _ref => {
     marginBottom: interItemMargin
   };
 };
-
 const selectDividerStyles = _ref2 => {
   let {
     dividerColor,
@@ -34,11 +32,10 @@ const selectDividerStyles = _ref2 => {
     paddingBottom: interItemMarginWithDivider
   };
 };
+
 /**
  * ListItem is responsible for rendering icon or a bullet as side item
  */
-
-
 const ListItemBase = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
     tokens,
@@ -70,7 +67,6 @@ const ListItemBase = /*#__PURE__*/forwardRef((_ref3, ref) => {
     size: 'h4',
     bold: true
   });
-
   if (title) {
     adjustedIconMarginTop = (fontSize * lineHeightRatio - itemIconSize) / 2;
   }
@@ -79,20 +75,15 @@ const ListItemBase = /*#__PURE__*/forwardRef((_ref3, ref) => {
    * add extra margin on the bottom, if "showDivider" is true it should add a divider
    * and custom margin and padding, otherwise just adds a margin to the bottom
    */
-
-
   const getContainerStyle = () => {
     if (isLastItem) {
       return undefined;
     }
-
     if (showDivider) {
       return dividerStyles;
     }
-
     return itemBlockStyles;
   };
-
   return /*#__PURE__*/_jsx(View, {
     ref: ref,
     style: [staticStyles.itemContainer, getContainerStyle()],
@@ -110,7 +101,8 @@ const ListItemBase = /*#__PURE__*/forwardRef((_ref3, ref) => {
         flexDirection: 'row'
       }],
       children: [/*#__PURE__*/_jsx(ListItemMark, {
-        tokens: { ...tokens,
+        tokens: {
+          ...tokens,
           iconMarginTop: adjustedIconMarginTop
         },
         icon: icon,
@@ -142,32 +134,28 @@ const staticStyles = StyleSheet.create({
     flexShrink: 1
   }
 });
-ListItemBase.propTypes = { ...selectedSystemPropTypes,
+ListItemBase.propTypes = {
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('List'),
   variant: variantProp.propType,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
-
   /**
    * Renders side item icon
    */
   icon: PropTypes.elementType,
-
   /**
    * Will set display icon color
    */
   iconColor: PropTypes.string,
-
   /**
    * Allow the user define the icon size if not defined the theme's file
    */
   iconSize: PropTypes.number,
-
   /**
    * @ignore
    * Defined by parent if it's last item on the list
    */
   isLastItem: PropTypes.bool,
-
   /**
    * @ignore
    * In case it is not the last item allow display divider

package/lib-module/List/ListItemContent.js

@@ -12,7 +12,6 @@ export const tokenTypes = {
   itemFontName: PropTypes.string.isRequired,
   itemFontColor: PropTypes.string
 };
-
 const selectItemTextStyles = (_ref, themeOptions) => {
   let {
     itemFontWeight,
@@ -30,6 +29,7 @@ const selectItemTextStyles = (_ref, themeOptions) => {
     themeOptions
   });
 };
+
 /**
  * Subcomponent used within ListItem and similar components for rendering content that fills
  * and wraps available space in a { flexDirection: row } container alongside a ListIconMark,
@@ -38,8 +38,6 @@ const selectItemTextStyles = (_ref, themeOptions) => {
  * It's the responsibility of themes to make sure that these text tokens align the first line of
  * text nicely against the bullet or icon rendered by ListIconMark.
  */
-
-
 const ListItemContent = _ref2 => {
   let {
     tokens,
@@ -59,7 +57,6 @@ const ListItemContent = _ref2 => {
     })
   });
 };
-
 const staticStyles = StyleSheet.create({
   wrap: {
     flex: 1

package/lib-module/List/ListItemMark.js

@@ -10,7 +10,6 @@ export const tokenTypes = {
   listGutter: PropTypes.number.isRequired,
   iconMarginTop: PropTypes.number.isRequired
 };
-
 const selectItemIconTokens = _ref => {
   let {
     itemIconSize,
@@ -21,7 +20,6 @@ const selectItemIconTokens = _ref => {
     color: itemIconColor
   };
 };
-
 const selectSideItemContainerStyles = _ref2 => {
   let {
     listGutter,
@@ -31,9 +29,9 @@ const selectSideItemContainerStyles = _ref2 => {
     marginTop: iconMarginTop,
     marginRight: listGutter
   };
-}; // Align bullets with the top line of text the same way icons are aligned
-
+};
 
+// Align bullets with the top line of text the same way icons are aligned
 const selectBulletPositioningStyles = _ref3 => {
   let {
     itemIconSize
@@ -43,7 +41,6 @@ const selectBulletPositioningStyles = _ref3 => {
     height: itemIconSize
   };
 };
-
 const selectBulletStyles = _ref4 => {
   let {
     itemBulletWidth,
@@ -57,7 +54,6 @@ const selectBulletStyles = _ref4 => {
     backgroundColor: itemBulletColor
   };
 };
-
 const selectBulletContainerStyles = _ref5 => {
   let {
     itemBulletContainerWidth,
@@ -68,6 +64,7 @@ const selectBulletContainerStyles = _ref5 => {
     alignItems: itemBulletContainerAlign
   };
 };
+
 /**
  * Subcomponent used within ListItem and similar components for rendering bullets or icons
  * that sit alongside a ListIconContent in a { flexDirection: row } container.
@@ -75,8 +72,6 @@ const selectBulletContainerStyles = _ref5 => {
  * It's the responsibility of themes to make sure that the supplied tokens align the
  * icon or bullet nicely against the first line of text in a ListIconContent.
  */
-
-
 const ListItemMark = _ref6 => {
   let {
     icon,
@@ -84,12 +79,9 @@ const ListItemMark = _ref6 => {
     iconSize,
     tokens = {}
   } = _ref6;
-
   const IconComponent = icon || /*#__PURE__*/_jsx(_Fragment, {});
-
   const themeTokens = typeof tokens === 'function' ? tokens() : tokens;
   const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens);
-
   if (icon) {
     const iconTokens = selectItemIconTokens(themeTokens);
     return /*#__PURE__*/_jsx(View, {
@@ -100,7 +92,6 @@ const ListItemMark = _ref6 => {
       })
     });
   }
-
   const itemBulletContainerStyles = selectBulletContainerStyles(themeTokens);
   const itemBulletStyles = selectBulletStyles(themeTokens);
   const itemBulletPositioningStyles = selectBulletPositioningStyles(themeTokens);
@@ -115,20 +106,16 @@ const ListItemMark = _ref6 => {
     })
   });
 };
-
 ListItemMark.propTypes = {
   tokens: PropTypes.shape(tokenTypes).isRequired,
-
   /**
    * Renders side item icon
    */
   icon: PropTypes.elementType,
-
   /**
    * Will set display icon color
    */
   iconColor: PropTypes.string,
-
   /**
    * Allow the user define the icon size
    */

package/lib-module/List/PressableListItemBase.js

@@ -11,7 +11,6 @@ import ListItemMark from './ListItemMark';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 const selectPressableStyles = _ref => {
   let {
     backgroundColor,
@@ -37,7 +36,6 @@ const selectPressableStyles = _ref => {
     })
   };
 };
-
 const PressableListItemBase = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
     href,
@@ -68,13 +66,10 @@ const PressableListItemBase = /*#__PURE__*/forwardRef((_ref2, ref) => {
       let {
         isLastItem
       } = _ref3;
-
       const getTokens = pressableState => resolvePressableTokens(tokens, pressableState, {
         last: isLastItem
       });
-
       const getPressableStyle = pressableState => [staticStyles.itemContainer, selectPressableStyles(getTokens(pressableState))];
-
       return /*#__PURE__*/_jsx(Pressable, {
         onPress: handlePress,
         href: href,
@@ -104,7 +99,8 @@ const staticStyles = StyleSheet.create({
     flex: 1
   }
 });
-PressableListItemBase.propTypes = { ...withLinkRouter.propTypes,
+PressableListItemBase.propTypes = {
+  ...withLinkRouter.propTypes,
   href: PropTypes.string,
   onPress: PropTypes.func,
   // eslint-disable-next-line react/forbid-prop-types

package/lib-module/Listbox/GroupControl.js

@@ -19,7 +19,6 @@ const styles = StyleSheet.create({
     boxSizing: 'border-box'
   }
 });
-
 const GroupControl = _ref => {
   let {
     expanded,
@@ -90,7 +89,6 @@ const GroupControl = _ref => {
     })]
   });
 };
-
 GroupControl.propTypes = {
   id: PropTypes.string,
   expanded: PropTypes.bool,

package/lib-module/Listbox/Listbox.js

@@ -18,9 +18,7 @@ const styles = StyleSheet.create({
     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 = [],
@@ -40,25 +38,23 @@ const Listbox = _ref => {
   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
+  } = 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();
@@ -66,15 +62,15 @@ const Listbox = _ref => {
       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$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
+  }, [focusedIndex, onClose, parentRef]);
 
+  // Add listeners for mouse clicks outside and for key presses
   useEffect(() => {
     if (Platform.OS === 'web') {
       window.addEventListener('click', onClose);
@@ -86,7 +82,6 @@ const Listbox = _ref => {
         window.removeEventListener('touchstart', onClose);
       };
     }
-
     return () => {};
   }, [onClose, handleKeydown]);
   return /*#__PURE__*/_jsx(ListboxContext.Provider, {
@@ -109,14 +104,15 @@ const Listbox = _ref => {
             label,
             items: nestedItems
           } = item;
-          const itemId = id ?? label; // Give the list of refs.
+          const itemId = id ?? label;
 
+          // Give the list of refs.
           const itemRef = ref => {
             itemRefs.current[index] = ref;
             return ref;
           };
-
-          return nestedItems ? /*#__PURE__*/_createElement(ListboxGroup, { ...item,
+          return nestedItems ? /*#__PURE__*/_createElement(ListboxGroup, {
+            ...item,
             expandProps: expandProps,
             LinkRouter: LinkRouter,
             itemRouterProps: itemRouterProps,
@@ -124,7 +120,8 @@ const Listbox = _ref => {
             nextItemRef: itemRefs.current[index + 1] ?? null,
             ref: index === 0 ? firstItemRef : itemRef,
             key: itemId
-          }) : /*#__PURE__*/_createElement(ListboxItem, { ...item,
+          }) : /*#__PURE__*/_createElement(ListboxItem, {
+            ...item,
             key: itemId,
             id: itemId,
             LinkRouter: LinkRouter,
@@ -138,31 +135,26 @@ const Listbox = _ref => {
     })
   });
 };
-
-Listbox.propTypes = { ...withLinkRouter.propTypes,
+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
    */

package/lib-module/Listbox/ListboxContext.js

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

package/lib-module/Listbox/ListboxGroup.js

@@ -34,8 +34,9 @@ const ListboxGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
   } = _ref;
   const {
     selectedId
-  } = useListboxContext(); // TODO: implement keyboard navigation via refs for grouped items separately here
+  } = useListboxContext();
 
+  // TODO: implement keyboard navigation via refs for grouped items separately here
   return /*#__PURE__*/_jsx(View, {
     id: "test",
     style: styles.groupWrapper,
@@ -52,7 +53,8 @@ const ListboxGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
         borderColor: 'transparent',
         textLine: 'none',
         borderWidth: 0
-      } // TODO refactor
+      }
+      // TODO refactor
       // eslint-disable-next-line react/no-unstable-nested-components
       ,
       control: controlProps => /*#__PURE__*/_jsx(GroupControl, {
@@ -98,7 +100,8 @@ const ListboxGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
 });
 ListboxGroup.displayName = 'ListboxGroup';
-ListboxGroup.propTypes = { ...withLinkRouter.propTypes,
+ListboxGroup.propTypes = {
+  ...withLinkRouter.propTypes,
   label: PropTypes.string,
   items: PropTypes.arrayOf(PropTypes.shape({
     href: PropTypes.string,
@@ -108,7 +111,6 @@ ListboxGroup.propTypes = { ...withLinkRouter.propTypes,
   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.
    */

package/lib-module/Listbox/ListboxItem.js

@@ -63,7 +63,8 @@ const ListboxItem = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
 });
 ListboxItem.displayName = 'ListboxItem';
-ListboxItem.propTypes = { ...selectedSystemPropTypes,
+ListboxItem.propTypes = {
+  ...selectedSystemPropTypes,
   ...withLinkRouter.propTypes,
   href: PropTypes.string,
   isChild: PropTypes.bool,

package/lib-module/Listbox/ListboxOverlay.js

@@ -14,8 +14,8 @@ const staticStyles = StyleSheet.create({
     // 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
@@ -53,17 +53,16 @@ const DropdownOverlay = /*#__PURE__*/forwardRef((_ref, ref) => {
     })
   });
 });
-
 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
+      children: /*#__PURE__*/_jsx(Overlay, {
+        ...props
       })
     });
   };
 };
-
 DropdownOverlay.displayName = 'DropdownOverlay';
 DropdownOverlay.propTypes = {
   children: PropTypes.node.isRequired,

package/lib-module/Listbox/PressableItem.js

@@ -8,7 +8,6 @@ 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,
@@ -52,7 +51,6 @@ const getItemStyles = _ref => {
     justifyContent: 'center'
   };
 };
-
 const PressableItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
     children,
@@ -71,7 +69,6 @@ const PressableItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
     selectedId,
     setSelectedId
   } = useListboxContext();
-
   const selectTextStyles = _ref3 => {
     let {
       groupFontName,
@@ -87,7 +84,6 @@ const PressableItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
       lineHeight: lineHeight * itemFontSize
     };
   };
-
   const resolveButtonTokens = pressableState => {
     const themeTokens = resolvePressableTokens(tokens, pressableState, {
       isChild,
@@ -95,7 +91,6 @@ const PressableItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
     });
     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);
@@ -105,7 +100,6 @@ const PressableItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
       prevItemRef.current.focus();
     }
   };
-
   return /*#__PURE__*/_jsx(Pressable, {
     isChild: isChild,
     style: pressableState => getItemStyles(resolveButtonTokens(pressableState)),
@@ -134,7 +128,8 @@ const PressableItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
   });
 });
 PressableItem.displayName = 'PressableItem';
-PressableItem.propTypes = { ...selectedSystemPropTypes,
+PressableItem.propTypes = {
+  ...selectedSystemPropTypes,
   href: PropTypes.string,
   isChild: PropTypes.bool,
   children: PropTypes.node.isRequired,