@telus-uds/components-base 2.4.0 → 2.5.0

package/lib/ExpandCollapseMini/ExpandCollapseMiniControl.js

@@ -0,0 +1,126 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Platform from "react-native-web/dist/exports/Platform";
+import { Link } from '../Link';
+import { useThemeTokens } from '../ThemeProvider';
+import { htmlAttrs, viewProps, selectSystemProps } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps]);
+
+// The ExpandCollapseControl has all the appropriate role, a11y, press handling etc
+// and a more appropriate press area, defer interaction handling to it.
+const presentationOnly = {
+  accessibilityRole: null,
+  // Treat as regular flow content with the Control
+  pointerEvents: 'none',
+  // Stop RNW from stopping clicks from bubbling to Control
+  focusable: false // Stop RNW from setting tabIndex={0}: focus goes to Control only
+};
+const selectLinkTokens = _ref => {
+  let {
+    color,
+    textLine,
+    lineHeight,
+    fontSize
+  } = _ref;
+  return {
+    color,
+    textLine,
+    blockLineHeight: lineHeight,
+    blockFontSize: fontSize
+  };
+};
+const ExpandCollapseMiniControl = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  let {
+    pressableState,
+    collapseTitle,
+    expandTitle = collapseTitle,
+    iconPosition = 'right',
+    tokens,
+    variant = {},
+    ...rest
+  } = _ref2;
+  const {
+    expanded,
+    hover,
+    focus
+  } = pressableState || {};
+  // we only want focus outline when focusing, if user is pressing we don't want the border.
+  const {
+    outerBorderColor
+  } = useThemeTokens('Link', {}, {}, {
+    focus: Platform.OS !== 'web' ? expanded : focus
+  });
+  const {
+    size,
+    icon,
+    ...themeTokens
+  } = useThemeTokens('ExpandCollapseMiniControl', tokens, variant, {
+    expanded,
+    focus
+  });
+
+  // Choose hover styles when any part of Control is hoverred
+  const appearance = {
+    ...variant,
+    hover
+  };
+  const getTokens = linkState => {
+    const {
+      hover: linkHover
+    } = linkState || {};
+    const isHovered = hover || linkHover;
+    if (Platform.OS !== 'web') {
+      return {
+        iconTranslateY: -1
+      };
+    }
+    if (isHovered) {
+      // Include vertical icon animation on hover alongside built-in Link theme, the size is size4
+      return {
+        iconTranslateY: (expanded ? -1 : 1) * size
+      };
+    }
+    return {};
+  };
+  return /*#__PURE__*/_jsx(Link, {
+    variant: appearance,
+    icon: icon,
+    iconPosition: iconPosition,
+    tokens: linkState => ({
+      ...getTokens(linkState),
+      ...selectLinkTokens(themeTokens),
+      outerBorderColor
+    }),
+    ref: ref,
+    ...presentationOnly,
+    ...selectProps(rest),
+    children: expanded ? expandTitle : collapseTitle
+  });
+});
+ExpandCollapseMiniControl.displayName = 'ExpandCollapseMiniControl';
+ExpandCollapseMiniControl.propTypes = {
+  ...selectedSystemPropTypes,
+  ...Link.propTypes,
+  /**
+   * Optional function to call on pressing the panel's control, in addition to opening or closing the panel
+   */
+  onPress: PropTypes.func,
+  /**
+   * ExpandCollapseMiniControl title when expanded
+   */
+  expandTitle: PropTypes.string.isRequired,
+  /**
+   * ExpandCollapseMiniControl title when collapsed
+   */
+  collapseTitle: PropTypes.string.isRequired,
+  /**
+   * React Native's `Pressable`'s state object
+   */
+  pressableState: PropTypes.object,
+  /**
+   * Optional variant object to override the default theme tokens
+   */
+  variant: PropTypes.object
+};
+export default ExpandCollapseMiniControl;

package/lib/ExpandCollapseMini/index.js

@@ -0,0 +1,2 @@
+import ExpandCollapseMini from './ExpandCollapseMini';
+export default ExpandCollapseMini;

package/lib/Footnote/Footnote.js

@@ -206,8 +206,8 @@ const Footnote = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
               style: [selectFootnoteHeaderContentStyle(themeTokens), staticStyles.headerContent],
               children: [/*#__PURE__*/_jsx(Typography, {
                 tokens: {
-                  fontSize: themeTokens === null || themeTokens === void 0 ? void 0 : themeTokens.headerFontSize,
-                  lineHeight: themeTokens === null || themeTokens === void 0 ? void 0 : themeTokens.headerLineHeight
+                  fontSize: themeTokens?.headerFontSize,
+                  lineHeight: themeTokens?.headerLineHeight
                 },
                 variant: {
                   size: 'h4'
@@ -219,9 +219,9 @@ const Footnote = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
                 children: /*#__PURE__*/_jsx(View, {
                   style: [selectFootnoteCloseButtonStyle(themeTokens), staticStyles.closeButton],
                   children: /*#__PURE__*/_jsx(Icon, {
-                    icon: themeTokens === null || themeTokens === void 0 ? void 0 : themeTokens.closeIcon,
+                    icon: themeTokens?.closeIcon,
                     tokens: {
-                      size: themeTokens === null || themeTokens === void 0 ? void 0 : themeTokens.closeButtonIconSize
+                      size: themeTokens?.closeButtonIconSize
                     }
                   })
                 })

package/lib/HorizontalScroll/HorizontalScroll.js

@@ -74,8 +74,7 @@ const HorizontalScroll = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const showPreviousButton = scrollOffset > 0;
   const scrollRef = React.useRef(null);
   const scrollTo = targetX => {
-    var _scrollRef$current;
-    if (typeof ((_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollTo) === 'function') {
+    if (typeof scrollRef.current?.scrollTo === 'function') {
       const x = getItemPositionScrollTarget(targetX, scrollMax, itemPositions.positions, buttonClearance);
       scrollRef.current.scrollTo({
         x,

package/lib/Icon/Icon.js

@@ -22,7 +22,7 @@ const Icon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     size: size,
     color: themeTokens.color
   });
-  const paddingStyles = variant !== null && variant !== void 0 && variant.padding ? {
+  const paddingStyles = variant?.padding ? {
     padding: themeTokens.width,
     width: themeTokens.size + themeTokens.width * 2,
     // sets the diameter of the circle which is the size of the icon plus twice the general padding established to obtain a perfect circle

package/lib/Icon/IconText.js

@@ -18,7 +18,6 @@ import { spacingProps } from '../utils';
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const IconText = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  var _iconProps$tokens, _iconProps$tokens2;
   let {
     space,
     iconPosition = 'left',
@@ -35,8 +34,8 @@ const IconText = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 
   // Inline images on Android are always baseline-aligned which makes them look misaligned - offset it.
   // See abandoned issue https://github.com/facebook/react-native/issues/6529
-  const size = (iconProps === null || iconProps === void 0 || (_iconProps$tokens = iconProps.tokens) === null || _iconProps$tokens === void 0 ? void 0 : _iconProps$tokens.size) ?? 0;
-  const valueTranslateY = iconProps === null || iconProps === void 0 || (_iconProps$tokens2 = iconProps.tokens) === null || _iconProps$tokens2 === void 0 ? void 0 : _iconProps$tokens2.translateY;
+  const size = iconProps?.tokens?.size ?? 0;
+  const valueTranslateY = iconProps?.tokens?.translateY;
   /**
    * These calculations were carried out using a set of linear equations to calculate that the
    * position of the icon "->"" is aligned to the first line of the tooltip text on IOS and Android.

package/lib/IconButton/IconButton.js

@@ -134,13 +134,12 @@ const IconButton = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     accessibilityRole
   });
   const handlePress = () => {
-    var _ref$current;
     linkProps.handleHref({
       href,
       onPress
     })({
       nativeEvent: {
-        target: ref === null || ref === void 0 || (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.id
+        target: ref?.current?.id
       }
     });
   };

package/lib/InputSupports/InputSupports.js

@@ -31,8 +31,8 @@ const InputSupports = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     dictionary,
     copy
   });
-  const maxCharsReachedErrorMessage = (inputValue === null || inputValue === void 0 ? void 0 : inputValue.length) > maxCharacterAllowed ? getCopy('maxCharsMessage').replace(/%\{charCount\}/g, maxCharacterAllowed) : '';
-  const feedbackValidation = (inputValue === null || inputValue === void 0 ? void 0 : inputValue.length) > maxCharacterAllowed ? 'error' : validation;
+  const maxCharsReachedErrorMessage = inputValue?.length > maxCharacterAllowed ? getCopy('maxCharsMessage').replace(/%\{charCount\}/g, maxCharacterAllowed) : '';
+  const feedbackValidation = inputValue?.length > maxCharacterAllowed ? 'error' : validation;
   const {
     inputId,
     hintId,
@@ -46,7 +46,7 @@ const InputSupports = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     nativeID,
     copy,
     maxCharacterAllowed,
-    charactersCount: maxCharacterAllowed - (inputValue === null || inputValue === void 0 ? void 0 : inputValue.length)
+    charactersCount: maxCharacterAllowed - inputValue?.length
   });
   return /*#__PURE__*/_jsxs(StackView, {
     space: space,
@@ -59,7 +59,7 @@ const InputSupports = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       hintId: hintId,
       tooltip: tooltip,
       forId: inputId,
-      characterCount: inputValue === null || inputValue === void 0 ? void 0 : inputValue.length,
+      characterCount: inputValue?.length,
       maxCharacterAllowed: maxCharacterAllowed
     }), typeof children === 'function' ? children({
       inputId,

package/lib/Link/LinkBase.js

@@ -87,7 +87,8 @@ const selectIconTokens = _ref5 => {
     color,
     iconSize,
     blockFontSize,
-    iconTranslateX
+    iconTranslateX,
+    iconTranslateY
   } = _ref5;
   /**
    * These calculations were carried out using a set of linear equations to calculate that the
@@ -95,11 +96,11 @@ const selectIconTokens = _ref5 => {
    * The base equation is: X/4 + Y/4 - 4 - |X - Y| = Z
    * where X = blockFontSize, Y = iconSize and Z = translateY
    */
-  const translateY = blockFontSize / 4 + iconSize / 4 - 4 - Math.abs(iconSize - blockFontSize);
+  const translateY = iconTranslateY ?? blockFontSize / 4 + iconSize / 4 - 4 - Math.abs(iconSize - blockFontSize);
   return {
     color,
     translateX: iconTranslateX,
-    translateY: translateY < 0 ? 0 : translateY,
+    translateY,
     size: iconSize
   };
 };
@@ -265,6 +266,10 @@ const staticStyles = StyleSheet.create({
       margin: 0,
       marginHorizontal: 2,
       padding: 0
+    }),
+    ...(Platform.OS === 'android' && {
+      paddingHorizontal: 2,
+      paddingTop: 2
     })
   }
 });

package/lib/List/List.js

@@ -7,8 +7,7 @@ import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const isListItem = element => {
-  var _element$type, _element$type2;
-  const elementName = (element === null || element === void 0 || (_element$type = element.type) === null || _element$type === void 0 ? void 0 : _element$type.displayName) || (element === null || element === void 0 || (_element$type2 = element.type) === null || _element$type2 === void 0 ? void 0 : _element$type2.name);
+  const elementName = element?.type?.displayName || element?.type?.name;
   // Match our own ListItem, and also, custom list items
   return Boolean(elementName.match(/Item/));
 };

package/lib/List/ListItemContent.js

@@ -49,7 +49,7 @@ const ListItemContent = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   } = useTheme();
   const textStyles = selectItemTextStyles(tokens, themeOptions);
   return /*#__PURE__*/_jsx(View, {
-    style: [staticStyles.wrap, (tokens === null || tokens === void 0 ? void 0 : tokens.itemUnderline) && {
+    style: [staticStyles.wrap, tokens?.itemUnderline && {
       textDecorationLine: tokens.itemUnderline,
       textDecorationColor: tokens.itemFontColor
     }],

package/lib/Listbox/Listbox.js

@@ -42,36 +42,33 @@ const Listbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   // 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 = React.useRef([]);
-  if (firstItemRef !== null && firstItemRef !== void 0 && firstItemRef.current) itemRefs.current[0] = firstItemRef.current;
+  if (firstItemRef?.current) itemRefs.current[0] = firstItemRef.current;
   const [focusedIndex, setFocusedIndex] = React.useState(0);
   const handleKeydown = React.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 || _parentRef$current.focus();
+      } else if (parentRef) 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 || (_parentRef$current2 = parentRef.current) === null || _parentRef$current2 === void 0 || _parentRef$current2.click();
+      parentRef?.current?.click();
       // Return focus to the dropdown control after leaving the last item
-      parentRef === null || parentRef === void 0 || (_parentRef$current3 = parentRef.current) === null || _parentRef$current3 === void 0 || _parentRef$current3.focus();
+      parentRef?.current?.focus();
       if (onClose) onClose(event);
     } else if (!nextItemRef && firstItemRef) {
-      var _firstItemRef$current;
       // If the last item is focused, move the focus to the first one
       event.preventDefault();
       setFocusedIndex(0);
-      (_firstItemRef$current = firstItemRef.current) === null || _firstItemRef$current === void 0 || _firstItemRef$current.focus();
+      firstItemRef.current?.focus();
     }
   }, [focusedIndex, onClose, parentRef, firstItemRef]);
 

package/lib/Listbox/PressableItem.js

@@ -90,11 +90,11 @@ const PressableItem = /*#__PURE__*/React.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 || onPress(event);
-    } else if ((event === null || event === void 0 ? void 0 : event.key) === 'ArrowDown') {
+    if (['Enter', ' '].includes(event?.key)) {
+      onPress?.(event);
+    } else if (event?.key === 'ArrowDown') {
       nextItemRef.current.focus();
-    } else if ((event === null || event === void 0 ? void 0 : event.key) === 'ArrowUp' && prevItemRef !== null && prevItemRef !== void 0 && prevItemRef.current) {
+    } else if (event?.key === 'ArrowUp' && prevItemRef?.current) {
       prevItemRef.current.focus();
     }
   };

package/lib/Modal/Modal.js

@@ -100,7 +100,6 @@ const selectScrollViewStyles = () => ({
  * - Don’t use modals consecutively
  */
 const Modal = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
-  var _modalContentRef$curr2;
   let {
     children,
     isOpen,
@@ -147,12 +146,11 @@ const Modal = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   };
   const manageFocus = React.useCallback(event => {
     if (event.key === 'Tab') {
-      var _modalBodyRef$current;
-      const focusableElements = Array.from((modalBodyRef === null || modalBodyRef === void 0 || (_modalBodyRef$current = modalBodyRef.current) === null || _modalBodyRef$current === void 0 ? void 0 : _modalBodyRef$current.querySelectorAll(`
+      const focusableElements = Array.from(modalBodyRef?.current?.querySelectorAll(`
       a[href], button, textarea, input, select, 
       [tabindex]:not([tabindex="-1"]),
       [contenteditable="true"]
-    `)) || []);
+    `) || []);
       const firstElement = focusableElements[0];
       const lastElement = focusableElements[focusableElements.length - 1];
       if (event.shiftKey && document.activeElement === firstElement) {
@@ -184,10 +182,9 @@ const Modal = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   }, [manageFocus]);
   React.useEffect(() => {
     if (isOpen) {
-      var _modalContentRef$curr;
-      modalContentRef === null || modalContentRef === void 0 || (_modalContentRef$curr = modalContentRef.current) === null || _modalContentRef$curr === void 0 || _modalContentRef$curr.focus();
+      modalContentRef?.current?.focus();
     }
-  }, [isOpen, modalContentRef === null || modalContentRef === void 0 || (_modalContentRef$curr2 = modalContentRef.current) === null || _modalContentRef$curr2 === void 0 ? void 0 : _modalContentRef$curr2.focus]);
+  }, [isOpen, modalContentRef?.current?.focus]);
   if (!isOpen) {
     return null;
   }

package/lib/MultiSelectFilter/MultiSelectFilter.js

@@ -177,7 +177,7 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     currentValues
   }]);
   const handleChange = event => {
-    if (pressHandlers.onPress) pressHandlers === null || pressHandlers === void 0 || pressHandlers.onPress(event);
+    if (pressHandlers.onPress) pressHandlers?.onPress(event);
     if (isOpen) onOpen();
     setIsOpen(!isOpen);
   };

package/lib/Notification/Notification.js

@@ -66,11 +66,10 @@ const selectDismissButtonContainerStyles = _ref4 => {
 const selectContentContainerStyle = (themeTokens, maxWidth, viewport, system) => ({
   maxWidth: viewport === 'xl' && system === true ? maxWidth : 'auto',
   minWidth: viewport === 'xl' && system === true ? maxWidth : 'auto',
-  paddingRight: themeTokens === null || themeTokens === void 0 ? void 0 : themeTokens.containerPaddingRight,
-  paddingLeft: themeTokens === null || themeTokens === void 0 ? void 0 : themeTokens.containerPaddingLeft
+  paddingRight: themeTokens?.containerPaddingRight,
+  paddingLeft: themeTokens?.containerPaddingLeft
 });
 const getMediaQueryStyles = (themeTokens, themeOptions, mediaIdsRef, dismissible, viewport, system) => {
-  var _themeOptions$content, _themeOptions$content2, _themeOptions$content3, _themeOptions$content4, _themeOptions$content5;
   const transformedSelectContainerStyles = Object.entries(themeTokens).reduce((acc, _ref5) => {
     let [vp, viewportTokens] = _ref5;
     acc[vp] = selectContainerStyles({
@@ -98,19 +97,19 @@ const getMediaQueryStyles = (themeTokens, themeOptions, mediaIdsRef, dismissible
       justifyContent: 'space-between',
       ...createMediaQueryStyles({
         xs: {
-          maxWidth: (themeOptions === null || themeOptions === void 0 || (_themeOptions$content = themeOptions.contentMaxWidth) === null || _themeOptions$content === void 0 ? void 0 : _themeOptions$content.xs) || '100%'
+          maxWidth: themeOptions?.contentMaxWidth?.xs || '100%'
         },
         md: {
-          maxWidth: (themeOptions === null || themeOptions === void 0 || (_themeOptions$content2 = themeOptions.contentMaxWidth) === null || _themeOptions$content2 === void 0 ? void 0 : _themeOptions$content2.md) || '100%'
+          maxWidth: themeOptions?.contentMaxWidth?.md || '100%'
         },
         lg: {
-          maxWidth: (themeOptions === null || themeOptions === void 0 || (_themeOptions$content3 = themeOptions.contentMaxWidth) === null || _themeOptions$content3 === void 0 ? void 0 : _themeOptions$content3.lg) || '100%'
+          maxWidth: themeOptions?.contentMaxWidth?.lg || '100%'
         },
         sm: {
-          maxWidth: (themeOptions === null || themeOptions === void 0 || (_themeOptions$content4 = themeOptions.contentMaxWidth) === null || _themeOptions$content4 === void 0 ? void 0 : _themeOptions$content4.sm) || '100%'
+          maxWidth: themeOptions?.contentMaxWidth?.sm || '100%'
         },
         xl: {
-          maxWidth: (themeOptions === null || themeOptions === void 0 || (_themeOptions$content5 = themeOptions.contentMaxWidth) === null || _themeOptions$content5 === void 0 ? void 0 : _themeOptions$content5.xl) || '100%'
+          maxWidth: themeOptions?.contentMaxWidth?.xl || '100%'
         }
       })
     }
@@ -274,7 +273,6 @@ const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, view
  * Show system notifications at the top of the page, below the navigation, and expands the full-width of the viewport
  */
 const Notification = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
-  var _variant$style;
   let {
     children,
     system,
@@ -293,7 +291,7 @@ const Notification = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   });
 
   // TODO: Remove this once the system style variant is deprecated
-  const isSystemEnabled = system || (variant === null || variant === void 0 || (_variant$style = variant.style) === null || _variant$style === void 0 ? void 0 : _variant$style.includes('system'));
+  const isSystemEnabled = system || variant?.style?.includes('system');
   const {
     themeOptions
   } = useTheme();
@@ -305,7 +303,7 @@ const Notification = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     system: isSystemEnabled,
     viewport
   });
-  const maxWidth = useResponsiveProp(themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth);
+  const maxWidth = useResponsiveProp(themeOptions?.contentMaxWidth);
   const notificationComponentRef = React.useRef({
     containerStyles: {},
     contentContainerStyles: {},
@@ -347,7 +345,7 @@ const Notification = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   } = enableMediaQueryStyleSheet === false ? themeTokens : themeTokens[viewport];
   const onDismissPress = () => {
     setIsDismissed(true);
-    onDismiss === null || onDismiss === void 0 || onDismiss();
+    onDismiss?.();
   };
   return /*#__PURE__*/_jsx(View, {
     ref: ref,

package/lib/OrderedList/OrderedList.js

@@ -16,9 +16,8 @@ const OrderedList = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   // Pass any variants and tokens "OrderedList" receives down to the individual list items.
   const childrenWithParentVariants = React.useMemo(() => {
     const addVariantAndTokensToProps = (child, i, isLastChild) => {
-      var _child$props, _child$props2;
-      const existingChildVariants = ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.variant) ?? {};
-      const existingChildTokens = ((_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.tokens) ?? {};
+      const existingChildVariants = child.props?.variant ?? {};
+      const existingChildTokens = child.props?.tokens ?? {};
       return /*#__PURE__*/React.cloneElement(child, {
         index: start + i,
         isLastChild,

package/lib/Pagination/usePagination.js

@@ -16,14 +16,13 @@ function usePagination(_ref) {
   const activeItemIndex = Math.max(items.findIndex(item => item.props.isActive), 0 // default to the first item if none is marked as active
   );
   const getItemProps = index => {
-    var _items$index;
     const {
       onPress,
       href,
       hrefAttrs,
       variant,
       tokens
-    } = ((_items$index = items[index]) === null || _items$index === void 0 ? void 0 : _items$index.props) ?? {};
+    } = items[index]?.props ?? {};
     return {
       onPress,
       href,

package/lib/PriceLockup/utils/renderFootnoteContent.js

@@ -42,13 +42,13 @@ const renderFootnoteContent = (footnoteMarginTop, bottomTextMarginTop, bottomTex
           bottomTextMarginTop
         }),
         children: [renderTypography(bottomText, bottomTextTypographyTokens, undefined, fontColor), ' ']
-      }), (footnoteLinks === null || footnoteLinks === void 0 ? void 0 : footnoteLinks.length) <= MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/_jsx(View, {
+      }), footnoteLinks?.length <= MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/_jsx(View, {
         style: [staticStyles.footnoteLinkContainer, selectFootnoteLinksStyles({
           bottomLinksMarginLeft
         })],
         children: renderFootnoteLinks(footnoteLinks, themeTokens, onClickFootnote)
       }) : null]
-    }), (footnoteLinks === null || footnoteLinks === void 0 ? void 0 : footnoteLinks.length) > MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/_jsx(View, {
+    }), footnoteLinks?.length > MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/_jsx(View, {
       style: staticStyles.verticalFootnoteLinkContainer,
       children: renderFootnoteLinks(footnoteLinks, themeTokens, onClickFootnote)
     }) : null]

package/lib/PriceLockup/utils/renderFootnoteLinks.js

@@ -11,7 +11,7 @@ const selectFootnoteLinkStyles = (_ref, footnoteLinks) => {
   } = _ref;
   // This is used to apply the proper line height when there is 4 or more footnote links
   const MAX_FOOTNOTE_LINKS_ALLOWED = 3;
-  const lineHeight = (footnoteLinks === null || footnoteLinks === void 0 ? void 0 : footnoteLinks.length) > MAX_FOOTNOTE_LINKS_ALLOWED ? footnoteLinkFontSize * footnoteLinkLineHeight : undefined;
+  const lineHeight = footnoteLinks?.length > MAX_FOOTNOTE_LINKS_ALLOWED ? footnoteLinkFontSize * footnoteLinkLineHeight : undefined;
   return {
     color: footnoteLinkColor,
     fontName: footnoteLinkFontName,
@@ -20,7 +20,7 @@ const selectFootnoteLinkStyles = (_ref, footnoteLinks) => {
     fontSize: footnoteLinkFontSize
   };
 };
-const renderFootnoteLinks = (footnoteLinks, themeTokens, onClickFootnote) => (footnoteLinks === null || footnoteLinks === void 0 ? void 0 : footnoteLinks.length) > 0 ? /*#__PURE__*/_jsx(FootnoteLink, {
+const renderFootnoteLinks = (footnoteLinks, themeTokens, onClickFootnote) => footnoteLinks?.length > 0 ? /*#__PURE__*/_jsx(FootnoteLink, {
   tokens: selectFootnoteLinkStyles(themeTokens, footnoteLinks),
   content: footnoteLinks,
   onClick: onClickFootnote

package/lib/PriceLockup/utils/renderPrice.js

@@ -66,13 +66,13 @@ const renderPrice = (price, rateText, ratePosition, signDirection, currencySymbo
       }), rateText ? /*#__PURE__*/_jsx(Text, {
         style: ratePosition === 'bottom' ? staticStyles.rateTextVerticalPosition : [staticStyles.rateTextPosition, staticStyles.rateTextVerticalPosition],
         children: renderTypography(rateText, rateTypographyTokens, ratePosition, fontColor)
-      }) : null, !bottomText && (footnoteLinks === null || footnoteLinks === void 0 ? void 0 : footnoteLinks.length) <= MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/_jsx(Text, {
+      }) : null, !bottomText && footnoteLinks?.length <= MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/_jsx(Text, {
         style: [footnoteLinkPositionStyles, selectFootnoteLinksStyles({
           bottomLinksMarginLeft
         })],
         children: renderFootnoteLinks(footnoteLinks, themeTokens, onClickFootnote)
       }) : null]
-    }), !bottomText && (footnoteLinks === null || footnoteLinks === void 0 ? void 0 : footnoteLinks.length) > MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/_jsx(View, {
+    }), !bottomText && footnoteLinks?.length > MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/_jsx(View, {
       style: staticStyles.verticalFootnoteLinkContainer,
       children: renderFootnoteLinks(footnoteLinks, themeTokens, onClickFootnote)
     }) : null]

package/lib/ProductCard/ProductCard.js

@@ -35,7 +35,6 @@ const selectProductCardTokens = _ref => {
   };
 };
 const ProductCard = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  var _getCopy;
   let {
     copy = 'en',
     dictionary = defaultDictionary,
@@ -102,7 +101,7 @@ const ProductCard = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     ...selectProps(rest),
     style: [selectProductCardTokens(themeTokens), staticStyles.container],
     ref: ref,
-    children: [image !== null && image !== void 0 && image.src ? /*#__PURE__*/_jsx(View, {
+    children: [image?.src ? /*#__PURE__*/_jsx(View, {
       style: staticStyles.imageContainer,
       children: /*#__PURE__*/_jsx(Image, {
         source: image.src,
@@ -146,7 +145,7 @@ const ProductCard = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
               ...getCopy('primaryPrice'),
               size: "small",
               ratePosition: "bottom"
-            }), (_getCopy = getCopy('secondaryPrice')) !== null && _getCopy !== void 0 && _getCopy.price ? /*#__PURE__*/_jsx(PriceLockup, {
+            }), getCopy('secondaryPrice')?.price ? /*#__PURE__*/_jsx(PriceLockup, {
               ...getCopy('secondaryPrice'),
               size: "small",
               ratePosition: "bottom"

package/lib/Progress/ProgressBarBackground.js

@@ -12,9 +12,9 @@ const ProgressBarBackground = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   } = _ref;
   let source = null;
   // TODO: Remove the `variant?.inactive` & `variant?.negative` to complete the deprecation
-  if (variant !== null && variant !== void 0 && variant.inactive || (variant === null || variant === void 0 ? void 0 : variant.style) === INACTIVE_VARIANT) {
+  if (variant?.inactive || variant?.style === INACTIVE_VARIANT) {
     source = inactiveBackground;
-  } else if (variant !== null && variant !== void 0 && variant.negative || (variant === null || variant === void 0 ? void 0 : variant.style) === NEGATIVE_VARIANT) {
+  } else if (variant?.negative || variant?.style === NEGATIVE_VARIANT) {
     source = negativeBackground;
   } else {
     return null;

package/lib/QuickLinksFeature/QuickLinksFeature.js

@@ -9,8 +9,7 @@ import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const isQuickListItem = element => {
-  var _element$type, _element$type2;
-  const elementName = (element === null || element === void 0 || (_element$type = element.type) === null || _element$type === void 0 ? void 0 : _element$type.displayName) || (element === null || element === void 0 || (_element$type2 = element.type) === null || _element$type2 === void 0 ? void 0 : _element$type2.name);
+  const elementName = element?.type?.displayName || element?.type?.name;
   return Boolean(elementName.match(/QuickLinksFeatureItem/));
 };
 

package/lib/Radio/Radio.js

@@ -145,7 +145,7 @@ const Radio = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   };
   const handleKeyDown = event => {
     // The expected keyboard shortcut for activating a radio is the Space key
-    if ((event === null || event === void 0 ? void 0 : event.key) === ' ') handleChange(event);
+    if (event?.key === ' ') handleChange(event);
   };
   const uniqueId = useUniqueId('radio');
   const inputId = id ?? uniqueId;

package/lib/Search/Search.js

@@ -135,10 +135,9 @@ const Search = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
     }
   };
   const handleClear = event => {
-    var _ref$current;
     setValue('', event);
-    onClear === null || onClear === void 0 || onClear('', event);
-    ref === null || ref === void 0 || (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.focus();
+    onClear?.('', event);
+    ref?.current?.focus();
   };
   const handleFocus = event => {
     if (onFocus !== undefined) onFocus(event);