@telus-uds/components-base 2.3.0 → 2.5.0

package/lib/Tabs/TabsItem.js

@@ -142,9 +142,9 @@ const TabsItem = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
       const scrollEnd = itemPositions.scrollOffset + itemPositions.containerWidth;
       if (
       // is off the right edge, or
-      scrollEnd && (position === null || position === void 0 ? void 0 : position.end) > scrollEnd ||
+      scrollEnd && position?.end > scrollEnd ||
       // is off the left edge
-      typeof (position === null || position === void 0 ? void 0 : position.start) === 'number' && position.start < itemPositions.scrollOffset) {
+      typeof position?.start === 'number' && position.start < itemPositions.scrollOffset) {
         itemPositions.scrollTo(position.start);
       }
     }

package/lib/TextInput/TextArea.js

@@ -61,10 +61,6 @@ const TextArea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   } = selectProps(rest);
   const inputProps = {
     ...selectedProps,
-    variant: {
-      ...variant,
-      validation: supportsProps.validation
-    },
     multiline: true,
     onContentSizeChange: onHeightChange,
     height: inputHeight,
@@ -72,6 +68,7 @@ const TextArea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   };
   return /*#__PURE__*/_jsx(InputSupports, {
     ...supportsProps,
+    inputValue: selectedProps?.value,
     children: _ref3 => {
       let {
         inputId,
@@ -79,9 +76,13 @@ const TextArea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       } = _ref3;
       return /*#__PURE__*/_jsx(TextInputBase, {
         ref: ref,
-        ...inputProps,
         nativeID: inputId,
-        ...props
+        ...props,
+        ...inputProps,
+        variant: {
+          ...variant,
+          validation: props.validation
+        }
       });
     }
   });

package/lib/TextInput/TextInput.js

@@ -38,16 +38,13 @@ const TextInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   } = selectProps(rest);
   const inputProps = {
     ...selectedProps,
-    tokens,
-    variant: {
-      ...variant,
-      validation: supportsProps.validation
-    }
+    tokens
   };
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(InputSupports, {
       nativeID: nativeID,
       ...supportsProps,
+      inputValue: selectedProps?.value,
       children: _ref2 => {
         let {
           inputId,
@@ -57,7 +54,11 @@ const TextInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           ref: ref,
           nativeID: inputId,
           ...propsFromInputSupports,
-          ...inputProps
+          ...inputProps,
+          variant: {
+            ...variant,
+            validation: propsFromInputSupports.validation
+          }
         });
       }
     }), rest.children]

package/lib/TextInput/TextInputBase.js

@@ -37,6 +37,9 @@ const selectInputStyles = function (_ref, themeOptions, inactive, type) {
   let buttonSize = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
   let buttonsGapSize = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 0;
   let isPassword = arguments.length > 7 ? arguments[7] : undefined;
+  let iconLeftWidth = arguments.length > 8 ? arguments[8] : undefined;
+  let iconLeftGap = arguments.length > 9 ? arguments[9] : undefined;
+  let direction = arguments.length > 10 ? arguments[10] : undefined;
   // Subtract border width from padding so overall input width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
   const offsetBorder = value => typeof value === 'number' ? Math.max(0, value - borderWidth) : value;
@@ -63,6 +66,15 @@ const selectInputStyles = function (_ref, themeOptions, inactive, type) {
       resize: minHeight !== maxHeight ? 'vertical' : 'none' // does nothing for an input, only needed for textarea
     }
   });
+  const getPaddingLeft = () => {
+    if (type === 'card') {
+      return offsetBorder(paddingLeft + 34);
+    }
+    if (direction === 'left') {
+      return offsetBorder(iconLeftWidth + iconLeftGap + staticStyles.iconLeftContainer.paddingLeft);
+    }
+    return offsetBorder(paddingLeft);
+  };
   const buttonSpacing = isPassword ? buttonsGapSize : -buttonsGapSize;
   const adjustedPaddingRight = paddingRight + (buttonCount ? 1 : 0) * (buttonSize + buttonSpacing);
   const adjustedPaddingWithButtons = buttonCount > 1 ? paddingRight : adjustedPaddingRight;
@@ -73,7 +85,7 @@ const selectInputStyles = function (_ref, themeOptions, inactive, type) {
     borderWidth,
     borderColor,
     borderRadius,
-    paddingLeft: type === 'card' ? offsetBorder(paddingLeft + 34) : offsetBorder(paddingLeft),
+    paddingLeft: getPaddingLeft(),
     paddingRight: icon ? offsetBorder(paddingWithIcon) : offsetBorder(adjustedPaddingWithButtons),
     paddingTop: offsetBorder(paddingTop),
     paddingBottom: offsetBorder(paddingBottom),
@@ -123,20 +135,26 @@ const selectIconContainerStyles = (_ref4, buttonCount) => {
     paddingBottom
   };
 };
-const selectLeftIconContainerStyles = _ref5 => {
+const selectIconCardLeftContainerStyles = _ref5 => {
   let {
     leftIconPaddingBottom
   } = _ref5;
   return {
-    // not tokenizing paddingLeft as it remains same across brands for now
-    paddingLeft: 10,
     paddingBottom: leftIconPaddingBottom
   };
 };
-const selectButtonsContainerStyle = _ref6 => {
+const selectIconLeftContainerStyles = _ref6 => {
   let {
-    buttonsPaddingRight
+    iconLeftPaddingBottom
   } = _ref6;
+  return {
+    paddingBottom: iconLeftPaddingBottom
+  };
+};
+const selectButtonsContainerStyle = _ref7 => {
+  let {
+    buttonsPaddingRight
+  } = _ref7;
   return {
     paddingRight: buttonsPaddingRight
   };
@@ -180,7 +198,7 @@ const getIcon = function () {
     testID: selectedIcon.testID
   });
 };
-const TextInputBase = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
+const TextInputBase = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   let {
     buttons = [],
     copy = 'en',
@@ -201,8 +219,9 @@ const TextInputBase = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
     variant = {},
     type,
     onKeyPress,
+    direction,
     ...rest
-  } = _ref7;
+  } = _ref8;
   const [isFocused, setIsFocused] = React.useState(false);
   const [showPassword, setShowPassword] = React.useState(false);
   const handleFocus = event => {
@@ -243,7 +262,7 @@ const TextInputBase = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   } = variant;
   const isNumeric = numeric || type === 'card' || type === 'number';
   const isPassword = password || type === 'password';
-  const element = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
+  const element = inputRef?.current;
   React.useEffect(() => {
     if (Platform.OS === 'web' && pattern && element) {
       // React Native Web doesn't support `pattern`, so we have to attach it via a ref,
@@ -252,9 +271,8 @@ const TextInputBase = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
     }
   }, [element, pattern]);
   const handleChangeText = event => {
-    var _event$nativeEvent, _event$target;
-    const text = ((_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : _event$nativeEvent.text) || ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value);
-    let filteredText = isNumeric ? text === null || text === void 0 ? void 0 : text.replace(/[^\d]/g, '') : text;
+    const text = event.nativeEvent?.text || event.target?.value;
+    let filteredText = isNumeric ? text?.replace(/[^\d]/g, '') : text;
     if (type === 'card' && filteredText) {
       const formattedValue = filteredText.replace(/[^a-zA-Z0-9]/g, '');
       const regex = new RegExp(`([a-zA-Z0-9]{4})(?=[a-zA-Z0-9])`, 'g');
@@ -271,10 +289,9 @@ const TextInputBase = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   };
   const themeTokens = useThemeTokens('TextInput', tokens, variant, states);
   const handleClear = event => {
-    var _inputRef$current;
-    onClear === null || onClear === void 0 || onClear(event);
+    onClear?.(event);
     resetValue(event);
-    inputRef === null || inputRef === void 0 || (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+    inputRef?.current?.focus();
   };
   const handleShowOrHide = () => {
     if (!variant.inactive) setShowPassword(!showPassword);
@@ -288,16 +305,18 @@ const TextInputBase = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
     defaultCreditIcon,
     amexIcon,
     visaIcon,
-    masterCardIcon
+    masterCardIcon,
+    iconLeftGap
   } = themeTokens;
   const buttonsGapSize = useSpacingScale(buttonsGap);
   const getCopy = useCopy({
     dictionary,
     copy
   });
-  const textInputButtons = buttons;
+  const textInputButtons = direction === 'left' ? buttons.filter(button => button && button.key !== 'submitIcon') : buttons;
+  const submitIcon = direction === 'left' ? buttons.find(button => button && button.key === 'submitIcon') : null;
   if (onClear && isDirty) {
-    textInputButtons === null || textInputButtons === void 0 || textInputButtons.unshift(/*#__PURE__*/_jsx(IconButton, {
+    textInputButtons?.unshift(/*#__PURE__*/_jsx(IconButton, {
       accessibilityLabel: getCopy('clearButtonAccessibilityLabel'),
       icon: ClearButtonIcon,
       onPress: handleClear,
@@ -307,7 +326,7 @@ const TextInputBase = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
     }, "clear"));
   }
   if (isPassword) {
-    textInputButtons === null || textInputButtons === void 0 || textInputButtons.unshift(/*#__PURE__*/_jsx(IconButton, {
+    textInputButtons?.unshift(/*#__PURE__*/_jsx(IconButton, {
       accessibilityLabel: showPassword ? getCopy('hidePasswordAccessibilityLabel') : getCopy('showPasswordAccessibilityLabel'),
       icon: !showPassword ? passwordShowButtonIcon : passwordHideButtonIcon,
       onPress: handleShowOrHide,
@@ -339,15 +358,20 @@ const TextInputBase = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   const {
     themeOptions
   } = useTheme();
+  const iconLeftWidth = submitIcon ? submitIcon.props.tokens.size ?? 0 : 0;
   const nativeInputStyle = selectInputStyles({
     ...themeTokens,
     height
-  }, themeOptions, inactive, type, buttons === null || buttons === void 0 ? void 0 : buttons.length, themeTokens.buttonSize, buttonsGapSize, isPassword);
+  }, themeOptions, inactive, type, buttons?.length, themeTokens.buttonSize, buttonsGapSize, isPassword, iconLeftWidth, iconLeftGap, direction);
+  const shouldShowSubmitIcon = submitIcon && direction === 'left' && !inactive;
   return /*#__PURE__*/_jsxs(View, {
     style: selectOuterBorderStyles(themeTokens),
-    children: [type === 'card' && /*#__PURE__*/_jsx(View, {
+    children: [shouldShowSubmitIcon && /*#__PURE__*/_jsx(View, {
+      style: [staticStyles.iconLeftContainer, selectIconLeftContainerStyles(themeTokens)],
+      children: submitIcon
+    }), type === 'card' && /*#__PURE__*/_jsx(View, {
       pointerEvents: "none",
-      style: [staticStyles.leftIconContainer, selectLeftIconContainerStyles(themeTokens)],
+      style: [staticStyles.iconCardLeftContainer, selectIconCardLeftContainerStyles(themeTokens)],
       children: getIcon(currentValue, {
         defaultCreditIcon,
         amexIcon,
@@ -367,11 +391,11 @@ const TextInputBase = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
       style: [staticStyles.rightIconContainer, selectIconContainerStyles({
         ...themeTokens,
         buttonsGapSize
-      }, buttons === null || buttons === void 0 ? void 0 : buttons.length)],
+      }, buttons?.length)],
       children: /*#__PURE__*/_jsx(IconComponent, {
         ...selectIconTokens(themeTokens)
       })
-    }), (buttons === null || buttons === void 0 ? void 0 : buttons.length) > 0 && !inactive && /*#__PURE__*/_jsx(View, {
+    }), buttons?.length > 0 && !inactive && /*#__PURE__*/_jsx(View, {
       style: [staticStyles.buttonsContainer, selectButtonsContainerStyle(themeTokens)],
       children: /*#__PURE__*/_jsx(StackView, {
         direction: "row",
@@ -425,7 +449,15 @@ const staticStyles = StyleSheet.create({
     right: 0,
     bottom: 0
   },
-  leftIconContainer: {
+  iconCardLeftContainer: {
+    paddingLeft: 10,
+    position: 'absolute',
+    left: 0,
+    bottom: 0,
+    zIndex: 1
+  },
+  iconLeftContainer: {
+    paddingLeft: 10,
     position: 'absolute',
     left: 0,
     bottom: 0,

package/lib/ThemeProvider/utils/theme-tokens.js

@@ -13,13 +13,12 @@ import pkg from '../../../package.json';
  */
 
 export const getComponentTheme = (theme, componentName) => {
-  var _theme$metadata;
   // Give clear and understandable error messages for common dev errors, for example,
   // typo in component name, missing export or accessing old version of theme
   if (!theme) {
     throw new Error(`Called useTheme's getStyle on "${componentName}" with no theme provided`);
   }
-  const themeName = ((_theme$metadata = theme.metadata) === null || _theme$metadata === void 0 ? void 0 : _theme$metadata.name) || '';
+  const themeName = theme.metadata?.name || '';
   if (!theme.components) {
     throw new Error(`Theme "${themeName}" has no components defined (looking for "${componentName}")`);
   }
@@ -147,9 +146,8 @@ export const toArray = strOrArr => Array.isArray(strOrArr) ? strOrArr : [strOrAr
  * @param {object} theme - UDS theme built for react-native
  */
 export const validateThemeTokensVersion = theme => {
-  var _theme$metadata2;
   const expectedThemeTokensVersion = pkg.dependencies['@telus-uds/system-theme-tokens'];
-  const actualThemeTokensVersion = theme === null || theme === void 0 || (_theme$metadata2 = theme.metadata) === null || _theme$metadata2 === void 0 ? void 0 : _theme$metadata2.themeTokensVersion;
+  const actualThemeTokensVersion = theme?.metadata?.themeTokensVersion;
   if (!semVerSatisfies(actualThemeTokensVersion, expectedThemeTokensVersion)) {
     throw new Error(`Invalid UDS token schema version detected.
 

package/lib/Timeline/Timeline.js

@@ -117,10 +117,9 @@ const Timeline = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
     ref: ref,
     style: selectTimelineContainerStyle(themeTokens),
     children: children.map((child, index) => {
-      var _child$props;
       const accessibilityRole = Platform.OS !== 'android' ? 'listitem' : undefined;
       const childrenProps = {
-        ...getA11yPropsFromHtmlTag(childrenTag, (child === null || child === void 0 || (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.accessibilityRole) || accessibilityRole)
+        ...getA11yPropsFromHtmlTag(childrenTag, child?.props?.accessibilityRole || accessibilityRole)
       };
       return /*#__PURE__*/_jsxs(View, {
         style: selectLineItemContainer(themeTokens)

package/lib/Tooltip/Tooltip.native.js

@@ -186,7 +186,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
       } = _ref8;
       setWindowDimensions(window);
     });
-    return () => subscription === null || subscription === void 0 ? void 0 : subscription.remove();
+    return () => subscription?.remove();
   });
   const toggleIsOpen = () => {
     onPress();
@@ -245,7 +245,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
     setIsOpen(false);
   }, [windowDimensions]);
   React.useEffect(() => {
-    if (tooltipPosition !== null && !(tooltipPosition !== null && tooltipPosition !== void 0 && tooltipPosition.isNormalized) || !isOpen || controlLayout === null || tooltipDimensions == null) {
+    if (tooltipPosition !== null && !tooltipPosition?.isNormalized || !isOpen || controlLayout === null || tooltipDimensions == null) {
       return;
     }
     const updatedPosition = getTooltipPosition(position, {
@@ -257,7 +257,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
     });
 
     // avoid ending up in an infinite normalization loop
-    if (tooltipPosition !== null && tooltipPosition !== void 0 && tooltipPosition.isNormalized && updatedPosition.isNormalized) {
+    if (tooltipPosition?.isNormalized && updatedPosition.isNormalized) {
       return;
     }
     setTooltipPosition(updatedPosition);
@@ -322,7 +322,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
         ref: ref,
         style: [staticStyles.tooltip, selectTooltipShadowStyles(themeTokens),
         // applied separately so that it doesn't cover the arrow
-        selectToolTipSizeStyles(themeTokens), tooltipPosition && selectTooltipPositionStyles(tooltipPosition), (tooltipPosition === null || (tooltipPosition === null || tooltipPosition === void 0 ? void 0 : tooltipPosition.isNormalized)) && staticStyles.tooltipHidden // visually hide the tooltip until we have a final measurement
+        selectToolTipSizeStyles(themeTokens), tooltipPosition && selectTooltipPositionStyles(tooltipPosition), (tooltipPosition === null || tooltipPosition?.isNormalized) && staticStyles.tooltipHidden // visually hide the tooltip until we have a final measurement
         ],
         onLayout: onTooltipLayout,
         accessibilityRole: "alert",

package/lib/Typography/Typography.js

@@ -162,15 +162,14 @@ const Typography = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     ...selectContainerProps(rest)
   };
   const resetTagStyling = child => {
-    var _child$props;
-    if (typeof child !== 'object' || !((child === null || child === void 0 ? void 0 : child.type) === 'sub' || (child === null || child === void 0 ? void 0 : child.type) === 'sup')) {
+    if (typeof child !== 'object' || !(child?.type === 'sub' || child?.type === 'sup')) {
       return child;
     }
-    const childStyles = (child === null || child === void 0 || (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.style) || {};
+    const childStyles = child?.props?.style || {};
     const supFontSize = childStyles.fontSize ?? themeTokens.superScriptFontSize;
     const isMobile = Platform.OS === 'ios' || Platform.OS === 'android';
-    const isSubSup = (child === null || child === void 0 ? void 0 : child.type) === 'sub' || (child === null || child === void 0 ? void 0 : child.type) === 'sup';
-    const mobileStyles = isMobile && isSubSup ? selectMobileSubSupStyles(themeTokens, child === null || child === void 0 ? void 0 : child.type) : {};
+    const isSubSup = child?.type === 'sub' || child?.type === 'sup';
+    const mobileStyles = isMobile && isSubSup ? selectMobileSubSupStyles(themeTokens, child?.type) : {};
     const defaultStyles = !isMobile && isSubSup ? {
       fontSize: supFontSize,
       lineHeight: 0

package/lib/Validator/Validator.js

@@ -83,21 +83,20 @@ const Validator = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     if (typeof onChange === 'function') onChange(code, singleCodes);
   };
   const handleChangeCodeValues = (event, codeId, nextIndex) => {
-    var _codeReferences$codeI, _event$nativeEvent, _event$target, _codeElement$value;
-    const codeElement = (_codeReferences$codeI = codeReferences[codeId]) === null || _codeReferences$codeI === void 0 ? void 0 : _codeReferences$codeI.current;
-    const val = ((_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : _event$nativeEvent.value) || ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value);
+    const codeElement = codeReferences[codeId]?.current;
+    const val = event.nativeEvent?.value || event.target?.value;
     if (Number(val).toString() === 'NaN') {
       codeElement.value = singleCodes[codeId] ?? '';
       return;
     }
-    handleSingleCodes(codeId, (codeElement === null || codeElement === void 0 ? void 0 : codeElement.value) ?? singleCodes[codeId], 'success');
+    handleSingleCodes(codeId, codeElement?.value ?? singleCodes[codeId], 'success');
     handleChangeCode();
     if (nextIndex === validatorsLength) {
       codeElement.blur();
       changeDataMasking(codeElement);
       return;
     }
-    if ((codeElement === null || codeElement === void 0 || (_codeElement$value = codeElement.value) === null || _codeElement$value === void 0 ? void 0 : _codeElement$value.length) > 0) {
+    if (codeElement?.value?.length > 0) {
       codeReferences[prefix + nextIndex].current.focus();
       changeDataMasking(codeElement);
     }
@@ -121,10 +120,7 @@ const Validator = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
         ref: codeReferences[codeId] ?? null,
         validation: strValidation || singleCodes[codeId + sufixValidation],
         tokens: selectCodeTextInputTokens(themeTokens),
-        onFocus: () => {
-          var _codeReferences$codeI2;
-          return ((_codeReferences$codeI2 = codeReferences[codeId]) === null || _codeReferences$codeI2 === void 0 || (_codeReferences$codeI2 = _codeReferences$codeI2.current) === null || _codeReferences$codeI2 === void 0 ? void 0 : _codeReferences$codeI2.select()) ?? null;
-        },
+        onFocus: () => codeReferences[codeId]?.current?.select() ?? null,
         onKeyPress: event => handleKeyPress(event, i, i - 1),
         onMouseOver: handleMouseOver,
         onMouseOut: handleMouseOut,
@@ -176,10 +172,9 @@ const Validator = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     return () => {
       if (Platform.oldValue === 'web') {
         for (let i = 0; i < validatorsLength; i += 1) {
-          var _codeReferences, _codeReferences2, _codeReferences3;
-          (_codeReferences = codeReferences[prefix + i]) === null || _codeReferences === void 0 || (_codeReferences = _codeReferences.current) === null || _codeReferences === void 0 || _codeReferences.removeEventListener('paste', handlePasteCode);
-          (_codeReferences2 = codeReferences[prefix + i]) === null || _codeReferences2 === void 0 || (_codeReferences2 = _codeReferences2.current) === null || _codeReferences2 === void 0 || _codeReferences2.removeEventListener('copy', handleCopy);
-          (_codeReferences3 = codeReferences[prefix + i]) === null || _codeReferences3 === void 0 || (_codeReferences3 = _codeReferences3.current) === null || _codeReferences3 === void 0 || _codeReferences3.removeEventListener('input', event => handleChangeCodeValues(event, prefix + i, i + 1));
+          codeReferences[prefix + i]?.current?.removeEventListener('paste', handlePasteCode);
+          codeReferences[prefix + i]?.current?.removeEventListener('copy', handleCopy);
+          codeReferences[prefix + i]?.current?.removeEventListener('input', event => handleChangeCodeValues(event, prefix + i, i + 1));
         }
       }
     };
@@ -187,7 +182,7 @@ const Validator = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   return /*#__PURE__*/_jsx(InputSupports, {
     ...supportsProps,
     feedbackProps: {
-      ...(rest === null || rest === void 0 ? void 0 : rest.feedbackProps),
+      ...rest?.feedbackProps,
       showFeedbackIcon: true
     },
     children: /*#__PURE__*/_jsx(StackView, {

package/lib/ViewportProvider/useViewportListener.js

@@ -23,7 +23,7 @@ const useViewportListener = setViewport => {
     };
     const listener = Dimensions.addEventListener('change', onChange);
     return () => {
-      if (typeof (listener === null || listener === void 0 ? void 0 : listener.remove) === 'function') {
+      if (typeof listener?.remove === 'function') {
         // Can't just return listener.remove because listener.emitter disappears, causing an internal error.
         // See https://github.com/facebook/react-native/issues/34508
         listener.remove();

package/lib/index.js

@@ -18,6 +18,7 @@ export { default as ColourToggle } from './ColourToggle';
 export { default as DownloadApp } from './DownloadApp';
 export { default as Divider } from './Divider';
 export { default as ExpandCollapse, Accordion } from './ExpandCollapse';
+export { default as ExpandCollapseMini } from './ExpandCollapseMini';
 export { default as Feedback } from './Feedback';
 export { default as Fieldset } from './Fieldset';
 export { default as FlexGrid } from './FlexGrid';

package/lib/utils/children.js

@@ -36,22 +36,18 @@ import A11yText from '../A11yText';
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 export const unpackFragment = child => {
-  var _child$props;
   // If this level is a set of top-level siblings rather than one child, check each in turn
   if (React.Children.count(child) > 1) return React.Children.map(child, unpackFragment);
 
   // When a fragment is found, unpack its children to the top level and check them
-  if ((child === null || child === void 0 ? void 0 : child.type) === React.Fragment) return unpackFragment((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.children);
+  if (child?.type === React.Fragment) return unpackFragment(child.props?.children);
 
   // Stop unpacking as soon as any non-fragment child is found
   return child;
 };
 const isStringOrNumber = child => typeof child === 'string' || typeof child === 'number';
 // Wrap an A11yText with neighouring text strings so it doesn't split them into multiple <Text>s
-const isWrapable = child => {
-  var _child$type;
-  return isStringOrNumber(child) || child.type === A11yText || ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.name) === 'FootnoteLink';
-};
+const isWrapable = child => isStringOrNumber(child) || child.type === A11yText || child.type?.name === 'FootnoteLink';
 const combineKeys = childrenArray => childrenArray.reduce((newKey, child) => `${newKey}${child.key || ''}`, '');
 
 // Group wrappable children for one `<Text>` parent, merging adjacent text nodes

package/lib/utils/input.js

@@ -97,7 +97,7 @@ export const useInputValue = function () {
     const newValue = typeof arg === 'function' ? arg(valueRef.current.value) : arg;
     if (!isControlled) {
       setOwnValue(newValue);
-      if (inputRef !== null && inputRef !== void 0 && inputRef.current) inputRef.current.value = newValue ?? '';
+      if (inputRef?.current) inputRef.current.value = newValue ?? '';
     }
     // Call onChange handler if there's something for it to handle (event or a changed value)
     if (onChange && (event || valueRef.current.value !== newValue)) onChange(newValue, event);

package/lib/utils/props/componentPropType.js

@@ -10,7 +10,6 @@
 export default function componentPropType(passedName) {
   const passedNames = typeof passedName === 'string' ? [passedName] : passedName;
   const checkProp = (props, propName, componentName) => {
-    var _props$propName$type, _props$propName$type2;
     if (props[propName] === undefined || props[propName] === null) {
       return undefined;
     }
@@ -19,7 +18,7 @@ export default function componentPropType(passedName) {
       // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean
       return props[propName].map((_, index) => checkProp(props[propName], index, componentName)).find(Boolean);
     }
-    const nameInProp = ((_props$propName$type = props[propName].type) === null || _props$propName$type === void 0 ? void 0 : _props$propName$type.displayName) || ((_props$propName$type2 = props[propName].type) === null || _props$propName$type2 === void 0 ? void 0 : _props$propName$type2.name);
+    const nameInProp = props[propName].type?.displayName || props[propName].type?.name;
     if (!nameInProp || !passedNames.includes(nameInProp)) {
       const propDescription = nameInProp ? `Component ${nameInProp}` : typeof props[propName];
       return new Error(`${componentName}: ${propDescription} was passed to \`${propName}\` prop; should be ${passedNames.join(' or ')}`);

package/lib/utils/props/inputSupportsProps.js

@@ -37,7 +37,15 @@ export default {
     /**
      * Use to visually mark an input as valid or invalid.
      */
-    validation: PropTypes.oneOf(['error', 'success'])
+    validation: PropTypes.oneOf(['error', 'success']),
+    /**
+     * The text value from an input field.
+     */
+    inputValue: PropTypes.string,
+    /**
+     * Max number of characters allowed id an input text.
+     */
+    maxCharacterAllowed: PropTypes.number
   },
   select: _ref => {
     let {
@@ -49,7 +57,9 @@ export default {
       feedbackTokens,
       feedbackProps,
       tooltip,
-      validation
+      validation,
+      inputValue,
+      maxCharacterAllowed
     } = _ref;
     return {
       supportsProps: {
@@ -61,7 +71,9 @@ export default {
         feedbackTokens,
         feedbackProps,
         tooltip,
-        validation
+        validation,
+        inputValue,
+        maxCharacterAllowed
       }
     };
   }

package/lib/utils/props/selectSystemProps.js

@@ -2,7 +2,7 @@
 // those props merged into one object
 export default function selectSystemProps(systemPropHelpers) {
   const selectProps = props => systemPropHelpers.reduce((acc, propHelper) => {
-    if (typeof (propHelper === null || propHelper === void 0 ? void 0 : propHelper.select) !== 'function') {
+    if (typeof propHelper?.select !== 'function') {
       throw new Error(`An invalid system prop helper has been passed to 'selectSystemProps': prop selector ('.select') is missing in ${propHelper}`);
     }
     return {
@@ -11,7 +11,7 @@ export default function selectSystemProps(systemPropHelpers) {
     };
   }, {});
   const selectedPropTypes = systemPropHelpers.reduce((acc, propHelper) => {
-    if (!(propHelper !== null && propHelper !== void 0 && propHelper.types)) {
+    if (!propHelper?.types) {
       throw new Error(`An invalid system prop helper has been passed to 'selectSystemProps': types selector ('.types') is missing in ${propHelper}`);
     }
     return {

package/lib/utils/ssr-media-query/create-stylesheet/create-stylesheet-mobile.js

@@ -10,7 +10,7 @@ const createStyleSheet = stylesWithQuery => {
   let cleanStyles;
   const ids = {};
   Object.keys(stylesWithQuery).forEach(key => {
-    if (!(stylesWithQuery !== null && stylesWithQuery !== void 0 && stylesWithQuery[key])) return;
+    if (!stylesWithQuery?.[key]) return;
     const mediaQueriesAndPseudoClasses = Object.keys(stylesWithQuery[key]).filter(isMediaOrPseudo);
     cleanStyles = JSON.parse(JSON.stringify(stylesWithQuery));
     mediaQueriesAndPseudoClasses.forEach(str => {

package/lib/utils/ssr-media-query/create-stylesheet/index.js

@@ -11,10 +11,9 @@ const createStyleSheet = stylesWithQuery => {
   let ids = {};
   const cleanStyles = deepClone(stylesWithQuery);
   Object.keys(stylesWithQuery).forEach(key => {
-    if (!(stylesWithQuery !== null && stylesWithQuery !== void 0 && stylesWithQuery[key])) return;
+    if (!stylesWithQuery?.[key]) return;
     const mediaQueriesAndPseudoClasses = Object.keys(stylesWithQuery[key]).filter(isMediaOrPseudo);
     mediaQueriesAndPseudoClasses.forEach(query => {
-      var _ids;
       const sanitizedStyle = sanitizeStyle(stylesWithQuery[key][query]);
       const css = createDeclarationBlock(sanitizedStyle);
       const stringHash = `rnmq-${hash(`${key}${query}${css}`)}`;
@@ -23,7 +22,7 @@ const createStyleSheet = stylesWithQuery => {
       delete cleanStyles[key][query];
       ids = {
         ...ids,
-        [key]: `${(_ids = ids) !== null && _ids !== void 0 && _ids[key] ? `${ids[key]} ` : ''}${stringHash}`
+        [key]: `${ids?.[key] ? `${ids[key]} ` : ''}${stringHash}`
       };
     });
   });

package/lib/utils/ssr-media-query/utils/inject.js

@@ -12,14 +12,12 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
   })();
 }
 export const hasCss = (id, text) => {
-  var _rules$id$text, _rules$id$text$includ;
-  return !!rules[id] && !!((_rules$id$text = rules[id].text) !== null && _rules$id$text !== void 0 && (_rules$id$text$includ = _rules$id$text.includes) !== null && _rules$id$text$includ !== void 0 && _rules$id$text$includ.call(_rules$id$text, text));
+  return !!rules[id] && !!rules[id].text?.includes?.(text);
 };
 export const addCss = (id, text) => {
   if (!hasCss(id, text)) {
-    var _rules$id;
-    rules[id] = (rules === null || rules === void 0 ? void 0 : rules[id]) || {};
-    rules[id].text = (((_rules$id = rules[id]) === null || _rules$id === void 0 ? void 0 : _rules$id.text) || '') + text;
+    rules[id] = rules?.[id] || {};
+    rules[id].text = (rules[id]?.text || '') + text;
     if (styleSheet) {
       styleSheet.insertRule(text, Object.keys(rules).length - 1);
     }

package/lib/utils/useHash.js

@@ -1,8 +1,5 @@
 import { useEffect, useState } from 'react';
-const doAction = (action, event) => {
-  var _window;
-  return typeof action === 'function' && action((_window = window) === null || _window === void 0 || (_window = _window.location) === null || _window === void 0 ? void 0 : _window.hash, event);
-};
+const doAction = (action, event) => typeof action === 'function' && action(window?.location?.hash, event);
 
 /**
  * @typedef {import('react').SyntheticEvent} SyntheticEvent