@telus-uds/components-base 1.66.0 → 1.67.1

package/lib-module/MultiSelectFilter/MultiSelectFilter.js

@@ -24,7 +24,6 @@ const {
   Col,
   Row
 } = FlexGrid;
-
 const selectSubTitleTokens = _ref => {
   let {
     subtitleColor
@@ -33,7 +32,6 @@ const selectSubTitleTokens = _ref => {
     color: subtitleColor
   };
 };
-
 const selectDividerToknes = _ref2 => {
   let {
     dividerColor,
@@ -48,7 +46,6 @@ const selectDividerToknes = _ref2 => {
     weight
   };
 };
-
 const MultiSelectFilter = _ref3 => {
   let {
     label,
@@ -87,9 +84,7 @@ const MultiSelectFilter = _ref3 => {
   const [maxWidth, setMaxWidth] = useState(false);
   const themeTokens = useThemeTokens('ButtonDropdown', tokens, variant);
   const getItemTokens = useThemeTokensCallback('ButtonDropdown', tokens, variant);
-
   const getButtonTokens = buttonState => selectTokens('Button', getItemTokens(buttonState));
-
   const getCopy = useCopy({
     dictionary,
     copy
@@ -116,48 +111,42 @@ const MultiSelectFilter = _ref3 => {
     subHeaderLineHeight,
     minHeight,
     minWidth
-  } = useThemeTokens('MultiSelectFilter', tokens, { ...variant,
+  } = useThemeTokens('MultiSelectFilter', tokens, {
+    ...variant,
     maxHeight,
     maxWidth
   }, {
     viewport
   });
   const uniqueFields = ['id', 'label'];
-
   if (!containUniqueFields(items, uniqueFields)) {
     throw new Error(`MultiSelectFilter items must have unique ${uniqueFields.join(', ')}`);
-  } // Pass an object of relevant component state as first argument for any passed-in press handlers
-
-
+  }
+  // Pass an object of relevant component state as first argument for any passed-in press handlers
   const pressHandlers = getPressHandlersWithArgs(rest, [{
     id,
     label,
     currentValues
   }]);
-
   const handleChange = event => {
     if (pressHandlers.onPress) pressHandlers === null || pressHandlers === void 0 ? void 0 : pressHandlers.onPress(event);
     setIsOpen(!isOpen);
   };
-
   const onApply = e => {
     setValues(e);
     setIsOpen(false);
     onConfirm(e);
   };
-
   const onClear = () => {
     setCheckedIds(() => []);
     setValues([]);
     setIsOpen(false);
     onCancel();
   };
-
   const onClose = () => {
     setIsOpen(false);
     onCancel();
   };
-
   const {
     align,
     offsets
@@ -213,7 +202,8 @@ const MultiSelectFilter = _ref3 => {
       onClose: onClose,
       children: [/*#__PURE__*/_jsx(Row, {
         children: /*#__PURE__*/_jsx(Typography, {
-          tokens: { ...headerStyles,
+          tokens: {
+            ...headerStyles,
             lineHeight: headerLineHeight
           },
           children: getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())
@@ -223,7 +213,8 @@ const MultiSelectFilter = _ref3 => {
           space: 5
         }), /*#__PURE__*/_jsx(Row, {
           children: /*#__PURE__*/_jsx(Typography, {
-            tokens: { ...subeHeaderStyles,
+            tokens: {
+              ...subeHeaderStyles,
               lineHeight: subHeaderLineHeight
             },
             children: subtitle
@@ -247,7 +238,8 @@ const MultiSelectFilter = _ref3 => {
           }, i))
         })
       }), /*#__PURE__*/_jsx(Divider, {
-        variant: selectDividerToknes({ ...themeTokens,
+        variant: selectDividerToknes({
+          ...themeTokens,
           width: 'full'
         }),
         space: 4
@@ -288,7 +280,8 @@ const MultiSelectFilter = _ref3 => {
       maxWidthSize: maxWidthSize,
       minHeight: minHeight,
       minWidth: minWidth,
-      tokens: { ...tokens,
+      tokens: {
+        ...tokens,
         maxWidth
       },
       copy: copy,
@@ -298,7 +291,8 @@ const MultiSelectFilter = _ref3 => {
         children: /*#__PURE__*/_jsx(View, {
           style: styles.textContainerStyle,
           children: /*#__PURE__*/_jsx(Typography, {
-            tokens: { ...headerStyles,
+            tokens: {
+              ...headerStyles,
               lineHeight: headerLineHeight
             },
             children: getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())
@@ -309,7 +303,8 @@ const MultiSelectFilter = _ref3 => {
           space: 5
         }), /*#__PURE__*/_jsx(Row, {
           children: /*#__PURE__*/_jsx(Typography, {
-            tokens: { ...subeHeaderStyles,
+            tokens: {
+              ...subeHeaderStyles,
               lineHeight: subHeaderLineHeight
             },
             children: subtitle
@@ -333,7 +328,8 @@ const MultiSelectFilter = _ref3 => {
           }, i))
         })
       }), /*#__PURE__*/_jsx(Divider, {
-        variant: selectDividerToknes({ ...themeTokens,
+        variant: selectDividerToknes({
+          ...themeTokens,
           width: 'full'
         }),
         space: 4
@@ -369,14 +365,14 @@ const MultiSelectFilter = _ref3 => {
     })]
   });
 };
-
 MultiSelectFilter.displayName = 'MultiSelectFilter';
 const styles = StyleSheet.create({
   textContainerStyle: {
     marginRight: 52
   }
-}); // If a language dictionary entry is provided, it must contain every key
+});
 
+// If a language dictionary entry is provided, it must contain every key
 const dictionaryContentShape = PropTypes.shape({
   filterByLabel: PropTypes.string.isRequired,
   applyButtonLabel: PropTypes.string.isRequired,
@@ -387,28 +383,23 @@ MultiSelectFilter.propTypes = {
    * The text displayed to the user in a ButtonDropdown.
    */
   label: PropTypes.string.isRequired,
-
   /**
    * The text for the subtitle
    */
   subtitle: PropTypes.string,
-
   /**
    * An optional unique string may be provided to identify the ButtonDropdown.
    * If not provided, the label is used.
    */
   id: PropTypes.string,
-
   /**
    * Sets the variant for ButtonDropdown element.
    */
   variant: variantProp.propType,
-
   /**
    * Sets the tokens for MultiSelectFilter element.
    */
   tokens: getTokensPropType('MultiSelectFilter'),
-
   /**
    * The options a user may select.
    */
@@ -417,14 +408,12 @@ MultiSelectFilter.propTypes = {
      * The text displayed to the user with a checkbox, describing this option.
      */
     label: PropTypes.string.isRequired,
-
     /**
      * An optional unique string may be provided to identify this option.
      * If not provided, the label is used.
      */
     id: PropTypes.string
   })),
-
   /**
    * If the selected item(s) in the checkbox group(s) are to be controlled externally by
    * a parent component, pass an array of strings as well as an `onChange` handler.
@@ -432,45 +421,37 @@ MultiSelectFilter.propTypes = {
    * expects its state to be handled via `onChange` and so doesn't handle it itself.
    */
   values: PropTypes.arrayOf(PropTypes.string),
-
   /**
    * If `values` is not passed, making the MultiSelectFilter an "uncontrolled" component
    * managing its own selected state, a default set of selections may be provided.
    * Changing the `initialValues` does not change the user's selections.
    */
   initialValues: PropTypes.arrayOf(PropTypes.string),
-
   /**
    * If provided, sets a maximum number of items a user may select at once.
    */
   maxValues: PropTypes.number,
-
   /**
    * If provided sets maxHeight to be active
    */
   maxHeight: PropTypes.bool,
-
   /**
    * If provided, this function is called when the current selection is changed
    * and is passed an array of the `id`s of all currently selected `items`.
    */
   onChange: PropTypes.func,
-
   /**
    * If provided, this function is called when the selection is confirmed.
    */
   onConfirm: PropTypes.func,
-
   /**
    * If provided, this function is called when `MultiSelectFilter` is closed.
    * */
   onCancel: PropTypes.func,
-
   /**
    * Select English or French copy for the accessible label.
    */
   copy: PropTypes.oneOf(['en', 'fr']),
-
   /**
    * Custom dictionary containing the labels
    */
@@ -478,19 +459,16 @@ MultiSelectFilter.propTypes = {
     en: dictionaryContentShape,
     fr: dictionaryContentShape
   }),
-
   /**
    * If true, the ButtonDropdown cannot be selected by the user and simply show their current state.
    */
   readOnly: PropTypes.string,
-
   /**
    * If true, the MultiSelectFilter cannot be interacted with, ButtonDropdown is
    * set as `disabled` and if the theme supports `inactive` appearances rules, these
    * are applied.
    */
   inactive: PropTypes.string,
-
   /**
    * Sets the maximum number of items in one column. If number of items are more
    * than the `rowLimit`, they will be rendered in 2 columns.

package/lib-module/Notification/Notification.js

@@ -11,14 +11,13 @@ import { useViewport } from '../ViewportProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
-const selectContainerStyles = tokens => ({ ...tokens
+const selectContainerStyles = tokens => ({
+  ...tokens
 });
-
-const selectTextStyles = (tokens, themeOptions) => applyTextStyles({ ...selectTokens('Typography', tokens),
+const selectTextStyles = (tokens, themeOptions) => applyTextStyles({
+  ...selectTokens('Typography', tokens),
   themeOptions
 });
-
 const selectIconProps = _ref => {
   let {
     iconSize,
@@ -29,7 +28,6 @@ const selectIconProps = _ref => {
     color: iconColor
   };
 };
-
 const selectIconContainerStyles = _ref2 => {
   let {
     iconGap
@@ -39,7 +37,6 @@ const selectIconContainerStyles = _ref2 => {
     placeContent: 'center'
   };
 };
-
 const selectDismissIconProps = _ref3 => {
   let {
     dismissIconSize,
@@ -50,7 +47,6 @@ const selectDismissIconProps = _ref3 => {
     color: dismissIconColor
   };
 };
-
 const selectDismissButtonContainerStyles = _ref4 => {
   let {
     dismissButtonGap
@@ -60,10 +56,10 @@ const selectDismissButtonContainerStyles = _ref4 => {
     placeContent: 'center'
   };
 };
-
 const selectContentContainerStyle = maxWidth => ({
   width: maxWidth || '100%'
 });
+
 /**
  * A banner that highlights important messages:
  * - Status message to show there is an error or outage of services
@@ -115,8 +111,6 @@ const selectContentContainerStyle = maxWidth => ({
  * Use full-width `Notifications` to show system-based messages coming from the application, not in response to user action.
  * Show system notifications at the top of the page, below the navigation, and expands the full-width of the viewport
  */
-
-
 const Notification = /*#__PURE__*/forwardRef((_ref5, ref) => {
   let {
     children,
@@ -141,11 +135,9 @@ const Notification = /*#__PURE__*/forwardRef((_ref5, ref) => {
     themeOptions
   } = useTheme();
   const contentMaxWidth = useResponsiveProp(themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth);
-
   if (isDismissed) {
     return null;
   }
-
   const textStyles = selectTextStyles(themeTokens, themeOptions);
   const content = wrapStringsInText(typeof children === 'function' ? children({
     textStyles,
@@ -158,9 +150,7 @@ const Notification = /*#__PURE__*/forwardRef((_ref5, ref) => {
     dismissIcon: DismissIconComponent,
     dismissIconColor
   } = themeTokens;
-
   const onDismissPress = () => setIsDismissed(true);
-
   return /*#__PURE__*/_jsx(View, {
     ref: ref,
     style: [staticStyles.container, selectContainerStyles(themeTokens)],
@@ -171,7 +161,8 @@ const Notification = /*#__PURE__*/forwardRef((_ref5, ref) => {
         style: staticStyles.contentContainer,
         children: [IconComponent && /*#__PURE__*/_jsx(View, {
           style: selectIconContainerStyles(themeTokens),
-          children: /*#__PURE__*/_jsx(IconComponent, { ...selectIconProps(themeTokens)
+          children: /*#__PURE__*/_jsx(IconComponent, {
+            ...selectIconProps(themeTokens)
           })
         }), content && typeof content === 'function' ? content({
           textStyles,
@@ -189,7 +180,8 @@ const Notification = /*#__PURE__*/forwardRef((_ref5, ref) => {
             inverse: dismissIconColor === '#ffffff',
             size: 'small'
           },
-          children: () => /*#__PURE__*/_jsx(DismissIconComponent, { ...selectDismissIconProps(themeTokens)
+          children: () => /*#__PURE__*/_jsx(DismissIconComponent, {
+            ...selectDismissIconProps(themeTokens)
           })
         })
       })]
@@ -197,23 +189,20 @@ const Notification = /*#__PURE__*/forwardRef((_ref5, ref) => {
   });
 });
 Notification.displayName = 'Notification';
-Notification.propTypes = { ...selectedSystemPropTypes,
-
+Notification.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Content of the `Notification`.
    */
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func]),
-
   /**
    * Use `system` prop to set the visual style of the notification and denote an announcement from the system or application
    */
   system: PropTypes.bool,
-
   /**
    * Use the `dismissible` prop to allow users to dismiss the Notification at any time.
    */
   dismissible: PropTypes.bool,
-
   /**
    * Select English or French copy for the accessible label of the dismiss button.
    */

package/lib-module/Pagination/PageButton.js

@@ -22,9 +22,7 @@ const PageButton = /*#__PURE__*/forwardRef((_ref, ref) => {
     dictionary,
     copy
   });
-
   const getButtonTokens = buttonState => selectTokens('Button', getTokens(buttonState));
-
   const activeProps = isActive ? {
     selected: true,
     ...a11yProps.nonFocusableProps,
@@ -56,18 +54,16 @@ const PageButton = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
 });
 PageButton.displayName = 'PageButton';
-PageButton.propTypes = { ...linkProps.types,
-
+PageButton.propTypes = {
+  ...linkProps.types,
   /**
    * To set custom label for the button
    */
   label: PropTypes.string,
-
   /**
    * To set `PageButton` to active state
    */
   isActive: PropTypes.bool,
-
   /**
    * To change the language for labels
    */

package/lib-module/Pagination/Pagination.js

@@ -12,7 +12,6 @@ import SideButton from './SideButton';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
 const selectTextStyles = (_ref, themeOptions) => {
   let {
     color,
@@ -30,7 +29,6 @@ const selectTextStyles = (_ref, themeOptions) => {
     themeOptions
   });
 };
-
 const Pagination = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
     children,
@@ -94,14 +92,14 @@ const Pagination = /*#__PURE__*/forwardRef((_ref2, ref) => {
       borderColor
     }
   });
-
   if (items.length === 0) {
     return null;
-  } // TODO: replace with a spacing component when https://github.com/telus/universal-design-system/pull/531 is implemented
-  // concatenate all items to easily wrap them in identical spacing components
-
+  }
 
-  const buttons = [showPrevious && /*#__PURE__*/_jsx(SideButton, { ...previousItemProps,
+  // TODO: replace with a spacing component when https://github.com/telus/universal-design-system/pull/531 is implemented
+  // concatenate all items to easily wrap them in identical spacing components
+  const buttons = [showPrevious && /*#__PURE__*/_jsx(SideButton, {
+    ...previousItemProps,
     direction: "previous",
     copy: copy,
     variant: sideButtonVariant,
@@ -112,12 +110,13 @@ const Pagination = /*#__PURE__*/forwardRef((_ref2, ref) => {
     const buttonLabel = `${itemIndex + 1}`;
     const itemProps = getItemProps(itemIndex);
     const ItemLinkRouter = itemProps.LinkRouter ?? LinkRouter;
-    const itemLinkRouterProps = { ...linkRouterProps,
+    const itemLinkRouterProps = {
+      ...linkRouterProps,
       ...itemProps.linkRouterProps
     };
-
     if (shouldRenderButton(itemIndex)) {
-      return /*#__PURE__*/_createElement(PageButton, { ...itemProps,
+      return /*#__PURE__*/_createElement(PageButton, {
+        ...itemProps,
         LinkRouter: ItemLinkRouter,
         linkRouterProps: itemLinkRouterProps,
         label: buttonLabel,
@@ -126,21 +125,22 @@ const Pagination = /*#__PURE__*/forwardRef((_ref2, ref) => {
         key: buttonLabel
       });
     }
-
     if (shouldRenderEllipsis(itemIndex)) {
       return /*#__PURE__*/_jsx(View, {
-        style: { ...ellipisContainerStyles.container
+        style: {
+          ...ellipisContainerStyles.container
         },
         children: /*#__PURE__*/_jsx(Text, {
-          style: { ...ellipsisTextStyles
+          style: {
+            ...ellipsisTextStyles
           },
           children: "..."
         })
       }, "...");
     }
-
     return null;
-  }), showNext && /*#__PURE__*/_jsx(SideButton, { ...nextItemProps,
+  }), showNext && /*#__PURE__*/_jsx(SideButton, {
+    ...nextItemProps,
     direction: "next",
     copy: copy,
     variant: sideButtonVariant,
@@ -149,7 +149,8 @@ const Pagination = /*#__PURE__*/forwardRef((_ref2, ref) => {
     linkRouterProps: linkRouterProps
   })];
   return /*#__PURE__*/_jsx(View, {
-    style: { ...staticStyles.container
+    style: {
+      ...staticStyles.container
     },
     ref: ref,
     ...selectProps(rest),
@@ -163,7 +164,8 @@ const Pagination = /*#__PURE__*/forwardRef((_ref2, ref) => {
         borderBottomWidth,
         ...staticStyles.container
       },
-      children: buttons // keep the keys in-line with the page numbers regardless of which buttons are actually rendered
+      children: buttons
+      // keep the keys in-line with the page numbers regardless of which buttons are actually rendered
       .map((element, index) => [element, `page-${index + 1}`]).filter(_ref3 => {
         let [element] = _ref3;
         return element !== null;
@@ -180,22 +182,20 @@ const Pagination = /*#__PURE__*/forwardRef((_ref2, ref) => {
 Pagination.displayName = 'Pagination';
 PageButton.displayName = 'PageButton';
 Pagination.PageButton = PageButton;
-Pagination.propTypes = { ...selectedSystemPropTypes,
+Pagination.propTypes = {
+  ...selectedSystemPropTypes,
   ...withLinkRouter.propTypes,
   children: componentPropType('PageButton'),
-
   /**
    * To change the language for labels
    */
   copy: copyPropTypes,
   variant: variantProp.propType,
   tokens: getTokensPropType('Pagination'),
-
   /**
    * When passed as `{{ compact: true }}`, `Pagination` does not render labels along side buttons
    */
   sideButtonVariant: variantProp.propType,
-
   /**
    * Custom tokens for `PaginationSideButton`
    */

package/lib-module/Pagination/SideButton.js

@@ -7,12 +7,12 @@ import { useThemeTokensCallback } from '../ThemeProvider';
 import { useViewport } from '../ViewportProvider';
 import { copyPropTypes, hrefAttrsProp, linkProps, selectTokens, withLinkRouter } from '../utils';
 import dictionary from './dictionary';
-import useCopy from '../utils/useCopy'; // We need to drop the icon here since it gets rendered via children and not
+import useCopy from '../utils/useCopy';
+
+// We need to drop the icon here since it gets rendered via children and not
 // `ButtonBase` in order to tap into the state of the button; `displayLabel` flag
 // is also not needed
-
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const selectButtonTokens = _ref => {
   let {
     icon: _,
@@ -21,7 +21,6 @@ const selectButtonTokens = _ref => {
   } = _ref;
   return selectTokens('Button', rest);
 };
-
 const selectIconTokens = (_ref2, direction) => {
   let {
     color,
@@ -34,7 +33,6 @@ const selectIconTokens = (_ref2, direction) => {
     translateX: iconDisplace * (direction === 'previous' ? -1 : 1)
   };
 };
-
 const directionToSide = {
   previous: 'left',
   next: 'right'
@@ -64,11 +62,8 @@ const SideButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
     icon,
     displayLabel
   } = getTokens(tokens, buttonVariant);
-
   const getButtonTokens = buttonState => selectButtonTokens(getTokens(buttonState));
-
   const getIconTokens = buttonState => selectIconTokens(getTokens(buttonState), direction);
-
   const label = direction === 'previous' ? getCopy('previousText') : getCopy('nextText');
   const accessibilityLabel = direction === 'previous' ? getCopy('previousLabel') : getCopy('nextLabel');
   const accessibilityRole = href !== undefined ? 'link' : 'button';

package/lib-module/Pagination/usePagination.js

@@ -15,7 +15,6 @@ function usePagination(_ref) {
 
   const getItemProps = index => {
     var _items$index;
-
     const {
       onPress,
       href,
@@ -31,33 +30,31 @@ function usePagination(_ref) {
       tokens
     };
   };
-
   const windowSize = truncateAbove > 4 ? 3 : 1;
   const truncateEnabled = items.length > truncateAbove;
   const truncateWindowStart = windowSize;
-  const truncateWindowEnd = items.length - 1 - windowSize; // basically how many items next to the currently active one do we want to render
+  const truncateWindowEnd = items.length - 1 - windowSize;
 
+  // basically how many items next to the currently active one do we want to render
   const activeWindowStart = activeItemIndex - (windowSize - 1) / 2;
   const activeWindowEnd = activeItemIndex + (windowSize - 1) / 2;
   const isFirstActive = activeItemIndex === 0;
-  const isLastActive = activeItemIndex === items.length - 1; // start truncating when the active item is within the truncate window
+  const isLastActive = activeItemIndex === items.length - 1;
 
+  // start truncating when the active item is within the truncate window
   const isLeftTruncated = truncateEnabled && activeItemIndex >= truncateWindowStart;
   const isRightTruncated = truncateEnabled && activeItemIndex <= truncateWindowEnd;
-
   function shouldRenderEllipsis(itemIndex) {
     const isNextToFirst = itemIndex === 1;
     const isNextToLast = itemIndex === items.length - 2;
     return isLeftTruncated && isNextToFirst || isRightTruncated && isNextToLast;
   }
-
   function shouldRenderButton(itemIndex) {
     const isFirst = itemIndex === 0;
     const isLast = itemIndex === items.length - 1;
     const isInActiveWindow = itemIndex >= activeWindowStart && itemIndex <= activeWindowEnd;
     return isFirst || isLast || isInActiveWindow || !isLeftTruncated && itemIndex <= truncateWindowStart || !isRightTruncated && itemIndex >= truncateWindowEnd;
   }
-
   return {
     showPrevious: !isFirstActive,
     showNext: !isLastActive,
@@ -69,5 +66,4 @@ function usePagination(_ref) {
     previousItemProps: getItemProps(activeItemIndex - 1)
   };
 }
-
 export default usePagination;