@telus-uds/components-base 2.3.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/InputLabel/InputLabel.js

@@ -49,6 +49,8 @@ const InputLabel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     tooltip,
     tokens,
     variant,
+    characterCount,
+    maxCharacterAllowed,
     ...rest
   } = _ref3;
   const themeTokens = useThemeTokens('InputLabel', tokens, variant);
@@ -81,11 +83,26 @@ const InputLabel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
           content: tooltip,
           copy: copy
         })
+      }), maxCharacterAllowed && isHintInline && /*#__PURE__*/_jsxs(Text, {
+        style: [selectHintStyles({
+          ...themeTokens
+        }), staticStyles.characterCountlabel],
+        children: [characterCount, "/", maxCharacterAllowed]
       })]
-    }), hint && !isHintInline && /*#__PURE__*/_jsx(Text, {
+    }), hint && !maxCharacterAllowed && !isHintInline && /*#__PURE__*/_jsx(Text, {
       style: [selectHintStyles(themeTokens), staticStyles.hintBelow],
       nativeID: hintId,
       children: hint
+    }), hint && maxCharacterAllowed && !isHintInline && /*#__PURE__*/_jsxs(View, {
+      style: staticStyles.container,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [selectHintStyles(themeTokens), staticStyles.flexHintBelow],
+        nativeID: hintId,
+        children: hint
+      }), /*#__PURE__*/_jsxs(Text, {
+        style: [selectHintStyles(themeTokens), staticStyles.characterCountlabel],
+        children: [characterCount, "/", maxCharacterAllowed]
+      })]
     })]
   });
 });
@@ -120,6 +137,14 @@ InputLabel.propTypes = {
    * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
    */
   tooltip: PropTypes.string,
+  /**
+   * Current number of characterts of an input text.
+   */
+  characterCount: PropTypes.number,
+  /**
+   * Max number of characters that allows an input text.
+   */
+  maxCharacterAllowed: PropTypes.number,
   tokens: getTokensPropType('InputLabel'),
   variant: variantProp.propType
 };
@@ -129,13 +154,22 @@ const staticStyles = StyleSheet.create({
     flexShrink: 1,
     flexDirection: 'row'
   },
+  characterCountlabel: {
+    marginLeft: 'auto',
+    marginTop: 'auto'
+  },
   label: {
-    flexShrink: 1
+    flexShrink: 1,
+    alignSelf: 'center'
   },
   hintBelow: {
     flexBasis: '100%',
     flexShrink: 0
   },
+  flexHintBelow: {
+    flexBasis: '100%',
+    flexShrink: 1
+  },
   tooltipAlign: {
     alignSelf: 'center',
     justifyContent: 'center'

package/lib/InputSupports/InputSupports.js

@@ -5,7 +5,8 @@ import Feedback from '../Feedback';
 import StackView from '../StackView';
 import { useThemeTokens } from '../ThemeProvider';
 import useInputSupports from './useInputSupports';
-import { getTokensPropType } from '../utils';
+import { getTokensPropType, useCopy } from '../utils';
+import dictionary from './dictionary';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const InputSupports = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
@@ -19,11 +20,19 @@ const InputSupports = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     feedbackProps = {},
     tooltip,
     validation,
+    maxCharacterAllowed,
+    inputValue,
     nativeID
   } = _ref;
   const {
     space
   } = useThemeTokens('InputSupports');
+  const getCopy = useCopy({
+    dictionary,
+    copy
+  });
+  const maxCharsReachedErrorMessage = inputValue?.length > maxCharacterAllowed ? getCopy('maxCharsMessage').replace(/%\{charCount\}/g, maxCharacterAllowed) : '';
+  const feedbackValidation = inputValue?.length > maxCharacterAllowed ? 'error' : validation;
   const {
     inputId,
     hintId,
@@ -34,7 +43,10 @@ const InputSupports = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     hint,
     label,
     validation,
-    nativeID
+    nativeID,
+    copy,
+    maxCharacterAllowed,
+    charactersCount: maxCharacterAllowed - inputValue?.length
   });
   return /*#__PURE__*/_jsxs(StackView, {
     space: space,
@@ -46,14 +58,17 @@ const InputSupports = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       hintPosition: hintPosition,
       hintId: hintId,
       tooltip: tooltip,
-      forId: inputId
+      forId: inputId,
+      characterCount: inputValue?.length,
+      maxCharacterAllowed: maxCharacterAllowed
     }), typeof children === 'function' ? children({
       inputId,
-      ...a11yProps
-    }) : children, feedback ? /*#__PURE__*/_jsx(Feedback, {
+      ...a11yProps,
+      validation: feedbackValidation
+    }) : children, feedback || maxCharsReachedErrorMessage ? /*#__PURE__*/_jsx(Feedback, {
       id: feedbackId,
-      title: feedback,
-      validation: validation,
+      title: feedback || maxCharsReachedErrorMessage,
+      validation: feedbackValidation,
       tokens: feedbackTokens,
       variant: {
         icon: feedbackProps.showFeedbackIcon
@@ -105,6 +120,14 @@ InputSupports.propTypes = {
   /**
    * ID for DOM element on web
    */
-  nativeID: PropTypes.string
+  nativeID: PropTypes.string,
+  /**
+   * The text value of a TextArea or TextInput
+   */
+  inputValue: PropTypes.string,
+  /**
+   * Max number of characters that allows an input text.
+   */
+  maxCharacterAllowed: PropTypes.number
 };
 export default InputSupports;

package/lib/InputSupports/dictionary.js

@@ -0,0 +1,12 @@
+export default {
+  en: {
+    maxCharacters: 'Maximum %{charCount} characters',
+    charactersRemaining: '%{charCount} characters remaining',
+    maxCharsMessage: 'Must not exceed %{charCount} characters'
+  },
+  fr: {
+    maxCharacters: '%{charCount} caractères maximum',
+    charactersRemaining: '%{charCount} caractères restants',
+    maxCharsMessage: 'Ne doit pas dépasser %{charCount} caractères'
+  }
+};

package/lib/InputSupports/useInputSupports.js

@@ -1,4 +1,6 @@
 import useUniqueId from '../utils/useUniqueId';
+import { useCopy } from '../utils';
+import dictionary from './dictionary';
 const joinDefined = array => array.filter(item => item !== undefined).join(' ');
 const useInputSupports = _ref => {
   let {
@@ -6,19 +8,26 @@ const useInputSupports = _ref => {
     feedback,
     validation,
     hint,
-    nativeID
+    nativeID,
+    copy,
+    maxCharacterAllowed,
+    charactersCount
   } = _ref;
+  const getCopy = useCopy({
+    dictionary,
+    copy
+  });
   const hasValidationError = validation === 'error';
   const inputId = useUniqueId('input');
   const hintId = useUniqueId('input-hint');
   const feedbackId = useUniqueId('input-feedback');
   const a11yProps = {
     accessibilityLabel: label,
-    accessibilityHint: joinDefined([!hasValidationError && feedback, hint]),
+    accessibilityHint: joinDefined([!hasValidationError && feedback, hint, maxCharacterAllowed ? getCopy('maxCharacters').replace(/%\{charCount\}/g, maxCharacterAllowed) : undefined]),
     // native only -> replaced with describedBy on web
     accessibilityDescribedBy: joinDefined([!hasValidationError && feedback && feedbackId,
     // feedback receives a11yRole=alert on error, so there's no need to include it here
-    hint && hintId]),
+    hint && hintId, charactersCount ? getCopy('charactersRemaining').replace(/%\{charCount\}/g, charactersCount) : undefined]),
     accessibilityInvalid: hasValidationError
   };
   return {

package/lib/Link/LinkBase.js

@@ -19,20 +19,15 @@ const selectOuterBorderStyles = _ref => {
     borderRadius,
     outerBorderOutline
   } = _ref;
-  return (
-    // A view wrapper with a border on native messes up inline text alignment
-    // so for now make focus styles strictly web-only
-    Platform.OS === 'web' ? {
-      // Allow theme to define outline, or, turn off outline and use border if rounded corners required
-      outline: outerBorderOutline,
-      ...applyOuterBorder({
-        outerBorderColor,
-        outerBorderWidth,
-        outerBorderGap
-      }),
-      borderRadius
-    } : {}
-  );
+  return {
+    outline: outerBorderOutline,
+    ...applyOuterBorder({
+      outerBorderColor,
+      outerBorderWidth,
+      outerBorderGap
+    }),
+    borderRadius
+  };
 };
 const selectTextStyles = _ref2 => {
   let {
@@ -92,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
@@ -100,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
   };
 };
@@ -182,7 +178,7 @@ const LinkBase = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
       const themeTokens = resolveLinkTokens(linkState);
       const outerBorderStyles = selectOuterBorderStyles(themeTokens);
       const decorationStyles = selectDecorationStyles(themeTokens);
-      return [outerBorderStyles, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
+      return [outerBorderStyles, staticStyles.outerBorderStyles, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
     },
     children: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
@@ -264,6 +260,17 @@ const staticStyles = StyleSheet.create({
         pointerEvents: 'none'
       }
     })
+  },
+  outerBorderStyles: {
+    ...(Platform.OS !== 'web' && {
+      margin: 0,
+      marginHorizontal: 2,
+      padding: 0
+    }),
+    ...(Platform.OS === 'android' && {
+      paddingHorizontal: 2,
+      paddingTop: 2
+    })
   }
 });
 export default withLinkRouter(LinkBase);

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;
   }