@telus-uds/components-base 2.4.0 → 2.5.0

package/lib/Select/Picker.js

@@ -39,8 +39,8 @@ const Picker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       style: style,
       onMouseOver: onMouseOver,
       onMouseOut: () => {
-        onMouseOut === null || onMouseOut === void 0 || onMouseOut();
-        onClose === null || onClose === void 0 || onClose();
+        onMouseOut?.();
+        onClose?.();
       },
       onFocus: onFocus,
       onBlur: onBlur,

package/lib/StackView/StackWrap.js

@@ -6,10 +6,7 @@ import StackWrapGap from './StackWrapGap';
 
 // In Jest/CI/SSR, global CSS isn't always available and doesn't always have .supports method
 import { jsx as _jsx } from "react/jsx-runtime";
-const cssSupports = (property, value) => {
-  var _window$CSS;
-  return Platform.OS === 'web' && typeof window !== 'undefined' && typeof ((_window$CSS = window.CSS) === null || _window$CSS === void 0 ? void 0 : _window$CSS.supports) === 'function' && window.CSS.supports(property, value);
-};
+const cssSupports = (property, value) => Platform.OS === 'web' && typeof window !== 'undefined' && typeof window.CSS?.supports === 'function' && window.CSS.supports(property, value);
 
 // CSS.supports needs an example of the type of value you intend to use.
 // Will be an integer appended `px` after hooks and JSX styles are resolved.

package/lib/StackView/getStackedContent.js

@@ -109,12 +109,11 @@ const getStackedContent = (children, _ref) => {
  * @returns {ReactChildren}
  */
 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;

package/lib/StepTracker/StepTracker.js

@@ -112,8 +112,7 @@ const StepTracker = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   const stepTrackerLabel = showStepTrackerLabel ? (typeof copy === 'string' ? getCopy(textStepTrackerLabel ?? 1).stepTrackerLabel : getCopy('stepTrackerLabel')).replace('%{stepNumber}', current < steps.length ? current + 1 : steps.length).replace('%{stepCount}', steps.length).replace('%{stepLabel}', current < steps.length ? steps[current] : steps[steps.length - 1]) : getCopy('stepTrackerLabel');
   const getStepLabel = index => {
     if (themeTokens.showStepLabel) {
-      var _getCopy;
-      return (_getCopy = getCopy(index + 1)) === null || _getCopy === void 0 ? void 0 : _getCopy.stepLabel.replace('%{stepNumber}', index + 1);
+      return getCopy(index + 1)?.stepLabel.replace('%{stepNumber}', index + 1);
     }
     return '';
   };

package/lib/TabBar/TabBar.js

@@ -68,7 +68,7 @@ const TabBar = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   const themeTokens = useThemeTokens('TabBar', tokens, variant);
   const handlePress = itemId => {
     setIsSelected(itemId);
-    onChange === null || onChange === void 0 || onChange(itemId);
+    onChange?.(itemId);
   };
   return /*#__PURE__*/_jsx(View, {
     ref: ref,

package/lib/Tabs/Tabs.js

@@ -25,7 +25,7 @@ const getDefaultTabItemAccessibilityRole = parentRole => {
   }
 };
 const getStackViewTokens = variant => {
-  const equalWidth = variant === null || variant === void 0 ? void 0 : variant.equalWidth;
+  const equalWidth = variant?.equalWidth;
   return Platform.select({
     web: {
       justifyContent: equalWidth ? 'space-evenly' : 'flex-start',

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

@@ -68,7 +68,7 @@ const TextArea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   };
   return /*#__PURE__*/_jsx(InputSupports, {
     ...supportsProps,
-    inputValue: selectedProps === null || selectedProps === void 0 ? void 0 : selectedProps.value,
+    inputValue: selectedProps?.value,
     children: _ref3 => {
       let {
         inputId,

package/lib/TextInput/TextInput.js

@@ -44,7 +44,7 @@ const TextInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     children: [/*#__PURE__*/_jsx(InputSupports, {
       nativeID: nativeID,
       ...supportsProps,
-      inputValue: selectedProps === null || selectedProps === void 0 ? void 0 : selectedProps.value,
+      inputValue: selectedProps?.value,
       children: _ref2 => {
         let {
           inputId,

package/lib/TextInput/TextInputBase.js

@@ -262,7 +262,7 @@ const TextInputBase = /*#__PURE__*/React.forwardRef((_ref8, 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,
@@ -271,9 +271,8 @@ const TextInputBase = /*#__PURE__*/React.forwardRef((_ref8, 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');
@@ -290,10 +289,9 @@ const TextInputBase = /*#__PURE__*/React.forwardRef((_ref8, 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);
@@ -318,7 +316,7 @@ const TextInputBase = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   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,
@@ -328,7 +326,7 @@ const TextInputBase = /*#__PURE__*/React.forwardRef((_ref8, 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,
@@ -364,7 +362,7 @@ const TextInputBase = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   const nativeInputStyle = selectInputStyles({
     ...themeTokens,
     height
-  }, themeOptions, inactive, type, buttons === null || buttons === void 0 ? void 0 : buttons.length, themeTokens.buttonSize, buttonsGapSize, isPassword, iconLeftWidth, iconLeftGap, direction);
+  }, 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),
@@ -393,11 +391,11 @@ const TextInputBase = /*#__PURE__*/React.forwardRef((_ref8, 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",

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/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

package/lib/utils/useOverlaidPosition.js

@@ -1,6 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import Dimensions from "react-native-web/dist/exports/Dimensions";
 import Platform from "react-native-web/dist/exports/Platform";
+import debounce from 'lodash.debounce';
+const DEBOUNCE_DELAY = 100;
 const adjustHorizontalToFit = (initialOffset, windowWidth, sourceWidth) => {
   const offset = Math.max(0, initialOffset);
   const otherEdgeOverflow = Math.max(0, offset + sourceWidth - windowWidth);
@@ -157,12 +159,11 @@ const useOverlaidPosition = _ref3 => {
   const readyToShow = Boolean(isShown && sourceRef.current);
   useEffect(() => {
     const handleDimensionsChange = _ref5 => {
-      var _sourceRef$current;
       let {
         window
       } = _ref5;
       const measurementFunction = Platform.OS === 'web' ? 'measureInWindow' : 'measure';
-      (_sourceRef$current = sourceRef.current) === null || _sourceRef$current === void 0 || _sourceRef$current[measurementFunction]((x, y, width, height) => {
+      sourceRef.current?.[measurementFunction]((x, y, width, height) => {
         setWindowDimensions(window);
         setSourceLayout({
           x,
@@ -174,8 +175,7 @@ const useOverlaidPosition = _ref3 => {
     };
     let subscription;
     const unsubscribe = () => {
-      var _subscription;
-      if (typeof ((_subscription = subscription) === null || _subscription === void 0 ? void 0 : _subscription.remove) === 'function') {
+      if (typeof subscription?.remove === 'function') {
         // React Native >=0.65.0
         subscription.remove();
       } else if (typeof Dimensions.remove === 'function') {
@@ -195,6 +195,27 @@ const useOverlaidPosition = _ref3 => {
     }
     return unsubscribe;
   }, [readyToShow]);
+  useEffect(() => {
+    if (Platform.OS !== 'web') {
+      return undefined;
+    }
+    const handleScroll = debounce(() => {
+      sourceRef.current?.measureInWindow((x, y, width, height) => {
+        setWindowDimensions(window);
+        setSourceLayout({
+          x,
+          y,
+          width,
+          height
+        });
+      });
+    }, DEBOUNCE_DELAY);
+    window.addEventListener('scroll', handleScroll);
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+      handleScroll.cancel();
+    };
+  }, [sourceRef]);
   const isReady = Boolean(isShown && sourceLayout && windowDimensions && targetDimensions);
   const overlaidPosition = isReady ? getOverlaidPosition({
     sourceLayout,

package/lib/utils/useScrollBlocking.js

@@ -1,16 +1,14 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 const addScrollBlocking = (preventScrolling, stopPropagation, ref) => {
-  var _ref$current;
   document.body.addEventListener('touchmove', preventScrolling, {
     passive: false
   });
-  (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.addEventListener('touchmove', stopPropagation);
+  ref.current?.addEventListener('touchmove', stopPropagation);
   document.body.style.overflow = 'hidden';
 };
 const removeScrollBlocking = (preventScrolling, stopPropagation, ref) => {
-  var _ref$current2;
   document.body.removeEventListener('touchmove', preventScrolling);
-  (_ref$current2 = ref.current) === null || _ref$current2 === void 0 || _ref$current2.removeEventListener('touchmove', stopPropagation);
+  ref.current?.removeEventListener('touchmove', stopPropagation);
   document.body.style.overflow = 'inherit';
 };
 

package/lib/utils/useSpacingScale.js

@@ -10,7 +10,7 @@ import { resolveResponsiveProp } from './useResponsiveProp';
  */
 
 const resolveSpacingOptions = space => {
-  if (!(space !== null && space !== void 0 && space.options)) return {};
+  if (!space?.options) return {};
   const {
     size,
     variant,
@@ -111,7 +111,7 @@ const useSpacingScale = spaceValue => {
     overridden,
     subtract = 0
   } = resolveSpacingOptions(spaceValue);
-  const space = !overridden && ((spaceValue === null || spaceValue === void 0 ? void 0 : spaceValue.space) ?? resolveResponsiveProp(spaceValue, viewport, 0));
+  const space = !overridden && (spaceValue?.space ?? resolveResponsiveProp(spaceValue, viewport, 0));
   const {
     size
   } = useThemeTokens('spacingScale', tokens, variant, {

package/package.json

@@ -81,6 +81,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "2.4.0",
+  "version": "2.5.0",
   "types": "types/index.d.ts"
 }

package/src/Carousel/CarouselStepTracker/CarouselStepTracker.jsx

@@ -33,6 +33,9 @@ const CarouselStepTracker = React.forwardRef(
     const steps = Array.from(Array(totalItems)).map((_, index) => String(index))
 
     if (enableDisplayMultipleItemsPerSlide) {
+      if (totalItems === 1) {
+        return null
+      }
       return (
         <>
           <Spacer space={4} />