@telus-uds/components-base 1.8.1 → 1.8.4

package/lib-module/List/List.js

@@ -11,24 +11,31 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * allows icon, dividers and customized typography
  */
 
-const List = /*#__PURE__*/forwardRef(({
-  children,
-  showDivider,
-  tokens,
-  variant,
-  ...rest
-}, ref) => {
-  const accessibilityRole = Platform.select({
-    web: 'list',
-    default: 'none'
-  });
+const List = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    showDivider,
+    tokens,
+    variant,
+    accessibilityRole = Platform.select({
+      web: 'list',
+      default: undefined
+    }),
+    ...rest
+  } = _ref;
   const items = Children.map(children, (child, index) => {
-    if (child.type.name === ListItem.name) {
+    var _child$type, _child$type2;
+
+    // Pass ListItem-specific props to children (by name so teams can add their own ListItems)
+    const isListItem = componentName => Boolean(componentName === ListItem.displayName);
+
+    if (isListItem(child === null || child === void 0 ? void 0 : (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) || isListItem(child === null || child === void 0 ? void 0 : (_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.name)) {
       return /*#__PURE__*/cloneElement(child, {
         showDivider,
         isLastItem: index + 1 === Children.count(children),
         tokens,
-        variant
+        variant,
+        ...child.props
       });
     }
 

package/lib-module/List/ListItem.js

@@ -10,93 +10,122 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
-const selectBulletStyles = ({
-  itemBulletWidth,
-  itemBulletHeight,
-  itemBulletColor
-}) => ({
-  width: itemBulletWidth,
-  height: itemBulletHeight,
-  borderRadius: itemBulletHeight / 2,
-  backgroundColor: itemBulletColor
-});
+const selectBulletStyles = _ref => {
+  let {
+    itemBulletWidth,
+    itemBulletHeight,
+    itemBulletColor
+  } = _ref;
+  return {
+    width: itemBulletWidth,
+    height: itemBulletHeight,
+    borderRadius: itemBulletHeight / 2,
+    backgroundColor: itemBulletColor
+  };
+};
 
-const selectBulletContainerStyles = ({
-  itemBulletContainerWidth,
-  itemBulletContainerAlign
-}) => ({
-  width: itemBulletContainerWidth,
-  alignItems: itemBulletContainerAlign
-});
+const selectBulletContainerStyles = _ref2 => {
+  let {
+    itemBulletContainerWidth,
+    itemBulletContainerAlign
+  } = _ref2;
+  return {
+    width: itemBulletContainerWidth,
+    alignItems: itemBulletContainerAlign
+  };
+};
 
-const selectItemIconTokens = ({
-  itemIconSize,
-  itemIconColor
-}) => ({
-  size: itemIconSize,
-  color: itemIconColor
-});
+const selectItemIconTokens = _ref3 => {
+  let {
+    itemIconSize,
+    itemIconColor
+  } = _ref3;
+  return {
+    size: itemIconSize,
+    color: itemIconColor
+  };
+};
 
-const selectSideItemContainerStyles = ({
-  listGutter,
-  iconMarginTop
-}) => ({
-  marginTop: iconMarginTop,
-  marginRight: listGutter
-}); // Align bullets with the top line of text the same way icons are aligned
+const selectSideItemContainerStyles = _ref4 => {
+  let {
+    listGutter,
+    iconMarginTop
+  } = _ref4;
+  return {
+    marginTop: iconMarginTop,
+    marginRight: listGutter
+  };
+}; // Align bullets with the top line of text the same way icons are aligned
 
 
-const selectBulletPositioningStyles = ({
-  itemIconSize
-}) => ({
-  width: itemIconSize,
-  height: itemIconSize
-});
+const selectBulletPositioningStyles = _ref5 => {
+  let {
+    itemIconSize
+  } = _ref5;
+  return {
+    width: itemIconSize,
+    height: itemIconSize
+  };
+};
 
-const selectItemStyles = ({
-  itemFontWeight,
-  itemFontSize,
-  itemLineHeight,
-  itemFontName
-}) => applyTextStyles({
-  fontWeight: itemFontWeight,
-  fontSize: itemFontSize,
-  lineHeight: itemLineHeight,
-  fontName: itemFontName
-});
+const selectItemStyles = _ref6 => {
+  let {
+    itemFontWeight,
+    itemFontSize,
+    itemLineHeight,
+    itemFontName
+  } = _ref6;
+  return applyTextStyles({
+    fontWeight: itemFontWeight,
+    fontSize: itemFontSize,
+    lineHeight: itemLineHeight,
+    fontName: itemFontName
+  });
+};
 
-const selectItemBlockStyles = ({
-  interItemMargin
-}) => ({
-  marginBottom: interItemMargin
-});
+const selectItemBlockStyles = _ref7 => {
+  let {
+    interItemMargin
+  } = _ref7;
+  return {
+    marginBottom: interItemMargin
+  };
+};
 
-const selectDividerStyles = ({
-  dividerColor,
-  dividerSize,
-  interItemMarginWithDivider
-}) => ({
-  borderBottomWidth: dividerSize,
-  borderColor: dividerColor,
-  marginBottom: interItemMarginWithDivider,
-  paddingBottom: interItemMarginWithDivider
-});
+const selectDividerStyles = _ref8 => {
+  let {
+    dividerColor,
+    dividerSize,
+    interItemMarginWithDivider
+  } = _ref8;
+  return {
+    borderBottomWidth: dividerSize,
+    borderColor: dividerColor,
+    marginBottom: interItemMarginWithDivider,
+    paddingBottom: interItemMarginWithDivider
+  };
+};
 /**
  * ListItem is responsible for rendering icon or a bullet as side item
  */
 
 
-const ListItem = /*#__PURE__*/forwardRef(({
-  tokens,
-  variant,
-  icon,
-  iconColor,
-  iconSize,
-  showDivider,
-  children,
-  isLastItem,
-  ...rest
-}, ref) => {
+const ListItem = /*#__PURE__*/forwardRef((_ref9, ref) => {
+  let {
+    tokens,
+    variant,
+    icon,
+    iconColor,
+    iconSize,
+    showDivider,
+    children,
+    isLastItem,
+    accessibilityRole = Platform.select({
+      web: 'listitem',
+      default: undefined
+    }),
+    ...rest
+  } = _ref9;
   const themeTokens = useThemeTokens('List', tokens, variant);
   const itemStyles = selectItemStyles(themeTokens);
   const itemBlockStyles = selectItemBlockStyles(themeTokens);
@@ -106,10 +135,6 @@ const ListItem = /*#__PURE__*/forwardRef(({
   const itemBulletPositioningStyles = selectBulletPositioningStyles(themeTokens);
   const iconTokens = selectItemIconTokens(themeTokens);
   const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens);
-  const accessibilityRole = Platform.select({
-    web: 'listitem',
-    default: 'item'
-  });
 
   const renderItem = () => /*#__PURE__*/_jsx(View, {
     style: staticStyles.wrap,

package/lib-module/Modal/Modal.js

@@ -14,57 +14,69 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
-const selectContainerStyles = ({
-  containerPaddingLeft,
-  containerPaddingRight,
-  containerPaddingTop,
-  containerPaddingBottom,
-  maxWidth,
-  height
-}) => ({
-  height,
-  maxWidth,
-  paddingLeft: containerPaddingLeft,
-  paddingRight: containerPaddingRight,
-  paddingTop: containerPaddingTop,
-  paddingBottom: containerPaddingBottom
-});
+const selectContainerStyles = _ref => {
+  let {
+    containerPaddingLeft,
+    containerPaddingRight,
+    containerPaddingTop,
+    containerPaddingBottom,
+    maxWidth,
+    height
+  } = _ref;
+  return {
+    height,
+    maxWidth,
+    paddingLeft: containerPaddingLeft,
+    paddingRight: containerPaddingRight,
+    paddingTop: containerPaddingTop,
+    paddingBottom: containerPaddingBottom
+  };
+};
 
-const selectModalStyles = ({
-  backgroundColor,
-  borderRadius,
-  height,
-  paddingLeft,
-  paddingRight,
-  paddingTop,
-  paddingBottom,
-  shadow
-}) => ({
-  backgroundColor,
-  borderRadius,
-  height,
-  paddingLeft,
-  paddingRight,
-  paddingTop,
-  paddingBottom,
-  ...applyShadowToken(shadow)
-});
+const selectModalStyles = _ref2 => {
+  let {
+    backgroundColor,
+    borderRadius,
+    height,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+    shadow
+  } = _ref2;
+  return {
+    backgroundColor,
+    borderRadius,
+    height,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+    ...applyShadowToken(shadow)
+  };
+};
 
-const selectBackdropStyles = ({
-  backdropColor,
-  backdropOpacity
-}) => ({
-  backgroundColor: backdropColor,
-  opacity: backdropOpacity
-});
+const selectBackdropStyles = _ref3 => {
+  let {
+    backdropColor,
+    backdropOpacity
+  } = _ref3;
+  return {
+    backgroundColor: backdropColor,
+    opacity: backdropOpacity
+  };
+};
 
-const selectCloseButtonContainerStyles = ({
-  paddingRight,
-  paddingTop
-}) => ({
-  paddingRight,
-  paddingTop
-});
+const selectCloseButtonContainerStyles = _ref4 => {
+  let {
+    paddingRight,
+    paddingTop
+  } = _ref4;
+  return {
+    paddingRight,
+    paddingTop
+  };
+};
 /**
  * A modal window is a secondary window that opens on top of the main one.
  * Users have to interact with it before they can carry out their task and return to the main window.
@@ -81,17 +93,18 @@ const selectCloseButtonContainerStyles = ({
  */
 
 
-const Modal = /*#__PURE__*/forwardRef(({
-  children,
-  isOpen,
-  onClose,
-  maxWidth,
-  tokens,
-  variant,
-  copy,
-  closeButton,
-  ...rest
-}, ref) => {
+const Modal = /*#__PURE__*/forwardRef((_ref5, ref) => {
+  let {
+    children,
+    isOpen,
+    onClose,
+    maxWidth,
+    tokens,
+    variant,
+    copy,
+    closeButton,
+    ...rest
+  } = _ref5;
   const viewport = useViewport();
   const themeTokens = useThemeTokens('Modal', tokens, variant, {
     viewport,
@@ -203,6 +216,7 @@ const staticStyles = StyleSheet.create({
   closeButtonContainer: {
     position: 'absolute',
     top: 0,
-    right: 0
+    right: 0,
+    zIndex: 1
   }
 });

package/lib-module/Notification/Notification.js

@@ -16,33 +16,45 @@ const selectContainerStyles = tokens => ({ ...tokens
 
 const selectTextStyles = tokens => applyTextStyles(selectTokens('Typography', tokens));
 
-const selectIconProps = ({
-  iconSize,
-  iconColor
-}) => ({
-  size: iconSize,
-  color: iconColor
-});
+const selectIconProps = _ref => {
+  let {
+    iconSize,
+    iconColor
+  } = _ref;
+  return {
+    size: iconSize,
+    color: iconColor
+  };
+};
 
-const selectIconContainerStyles = ({
-  iconGap
-}) => ({
-  paddingRight: iconGap
-});
+const selectIconContainerStyles = _ref2 => {
+  let {
+    iconGap
+  } = _ref2;
+  return {
+    paddingRight: iconGap
+  };
+};
 
-const selectDismissIconProps = ({
-  dismissIconSize,
-  dismissIconColor
-}) => ({
-  size: dismissIconSize,
-  color: dismissIconColor
-});
+const selectDismissIconProps = _ref3 => {
+  let {
+    dismissIconSize,
+    dismissIconColor
+  } = _ref3;
+  return {
+    size: dismissIconSize,
+    color: dismissIconColor
+  };
+};
 
-const selectDismissButtonContainerStyles = ({
-  dismissButtonGap
-}) => ({
-  paddingLeft: dismissButtonGap
-});
+const selectDismissButtonContainerStyles = _ref4 => {
+  let {
+    dismissButtonGap
+  } = _ref4;
+  return {
+    paddingLeft: dismissButtonGap
+  };
+};
 /**
  * A banner that highlights important messages:
  * - Status message to show there is an error or outage of services
@@ -96,15 +108,16 @@ const selectDismissButtonContainerStyles = ({
  */
 
 
-const Notification = /*#__PURE__*/forwardRef(({
-  children,
-  system,
-  dismissible,
-  copy = 'en',
-  tokens,
-  variant,
-  ...rest
-}, ref) => {
+const Notification = /*#__PURE__*/forwardRef((_ref5, ref) => {
+  let {
+    children,
+    system,
+    dismissible,
+    copy = 'en',
+    tokens,
+    variant,
+    ...rest
+  } = _ref5;
   const [isDismissed, setIsDismissed] = useState(false);
   const themeTokens = useThemeTokens('Notification', tokens, variant, {
     system

package/lib-module/Pagination/PageButton.js

@@ -6,16 +6,17 @@ import { a11yProps, copyPropTypes, getTokensPropType, hrefAttrsProp, linkProps,
 import useCopy from '../utils/useCopy';
 import dictionary from './dictionary';
 import { jsx as _jsx } from "react/jsx-runtime";
-const PageButton = /*#__PURE__*/forwardRef(({
-  label,
-  onPress,
-  href,
-  isActive,
-  copy,
-  variant,
-  tokens,
-  ...props
-}, ref) => {
+const PageButton = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    label,
+    onPress,
+    href,
+    isActive,
+    copy,
+    variant,
+    tokens,
+    ...props
+  } = _ref;
   const getTokens = useThemeTokensCallback('PaginationPageButton', tokens, variant);
   const getCopy = useCopy({
     dictionary,
@@ -32,8 +33,8 @@ const PageButton = /*#__PURE__*/forwardRef(({
     key: 'active-item'
   } : {};
   const accessibilityRole = href !== undefined ? 'link' : 'button';
-  const activeLabel = isActive ? ` ${getCopy('currentLabel')}` : '';
-  const accessibilityLabel = `${getCopy('goToLabel')} ${label}${activeLabel}`;
+  const activeLabel = isActive ? " ".concat(getCopy('currentLabel')) : '';
+  const accessibilityLabel = "".concat(getCopy('goToLabel'), " ").concat(label).concat(activeLabel);
   const {
     hrefAttrs,
     rest

package/lib-module/Pagination/Pagination.js

@@ -12,31 +12,35 @@ import SideButton from './SideButton';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
-const selectTextStyles = ({
-  color,
-  fontName,
-  fontSize,
-  fontWeight,
-  lineHeight
-}) => applyTextStyles({
-  color,
-  fontName,
-  fontSize,
-  fontWeight,
-  lineHeight
-});
+const selectTextStyles = _ref => {
+  let {
+    color,
+    fontName,
+    fontSize,
+    fontWeight,
+    lineHeight
+  } = _ref;
+  return applyTextStyles({
+    color,
+    fontName,
+    fontSize,
+    fontWeight,
+    lineHeight
+  });
+};
 
-const Pagination = /*#__PURE__*/forwardRef(({
-  children,
-  copy = 'en',
-  variant,
-  tokens,
-  sideButtonVariant,
-  sideButtonTokens,
-  LinkRouter,
-  linkRouterProps,
-  ...rest
-}, ref) => {
+const Pagination = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    children,
+    copy = 'en',
+    variant,
+    tokens,
+    sideButtonVariant,
+    sideButtonTokens,
+    LinkRouter,
+    linkRouterProps,
+    ...rest
+  } = _ref2;
   const viewport = useViewport();
   const {
     truncateAbove,
@@ -75,9 +79,11 @@ const Pagination = /*#__PURE__*/forwardRef(({
     LinkRouter: LinkRouter,
     linkRouterProps: linkRouterProps
   }), ...items.map((_child, itemIndex) => {
-    const buttonLabel = `${itemIndex + 1}`;
+    var _itemProps$LinkRouter;
+
+    const buttonLabel = "".concat(itemIndex + 1);
     const itemProps = getItemProps(itemIndex);
-    const ItemLinkRouter = itemProps.LinkRouter ?? LinkRouter;
+    const ItemLinkRouter = (_itemProps$LinkRouter = itemProps.LinkRouter) !== null && _itemProps$LinkRouter !== void 0 ? _itemProps$LinkRouter : LinkRouter;
     const itemLinkRouterProps = { ...linkRouterProps,
       ...itemProps.linkRouterProps
     };
@@ -113,12 +119,19 @@ const Pagination = /*#__PURE__*/forwardRef(({
     ref: ref,
     ...selectProps(rest),
     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(([element]) => element !== null).map(([element, key]) => /*#__PURE__*/_jsx(Box, {
-      right: gap,
-      children: element
-    }, key))
+    .map((element, index) => [element, "page-".concat(index + 1)]).filter(_ref3 => {
+      let [element] = _ref3;
+      return element !== null;
+    }).map(_ref4 => {
+      let [element, key] = _ref4;
+      return /*#__PURE__*/_jsx(Box, {
+        right: gap,
+        children: element
+      }, key);
+    })
   });
 });
+Pagination.displayName = 'Pagination';
 PageButton.displayName = 'PageButton';
 Pagination.PageButton = PageButton;
 Pagination.propTypes = { ...selectedSystemPropTypes,