@telus-uds/components-base 2.4.0 → 2.5.0

package/CHANGELOG.md

@@ -1,12 +1,25 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 10 Jan 2025 21:41:25 GMT and should not be manually modified.
+This log was last generated on Wed, 22 Jan 2025 21:06:14 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.5.0
+
+Wed, 22 Jan 2025 21:06:14 GMT
+
+### Minor changes
+
+- `Carousel`: hide the progress bar when rendering a 'single' item (guillermo.peitzner@telus.com)
+- `ExpandCollapseMini`: add component (guillermo.peitzner@telus.com)
+
+### Patches
+
+- `Autocomplete`: fix displacement when selecting an item (guillermo.peitzner@telus.com)
+
 ## 2.4.0
 
-Fri, 10 Jan 2025 21:41:25 GMT
+Fri, 10 Jan 2025 21:49:25 GMT
 
 ### Minor changes
 

package/lib/A11yInfoProvider/index.js

@@ -35,8 +35,8 @@ const A11yInfoProvider = /*#__PURE__*/React.forwardRef((_ref, _) => {
     }
     return () => {
       // From react-native 0.65, AccessibilityInfo.removeEventListener is deprecated for `remove` on addEventListener return value
-      if (typeof (motionSubscription === null || motionSubscription === void 0 ? void 0 : motionSubscription.remove) === 'function') {
-        motionSubscription === null || motionSubscription === void 0 || motionSubscription.remove();
+      if (typeof motionSubscription?.remove === 'function') {
+        motionSubscription?.remove();
       } else if (typeof AccessibilityInfo.removeEventListener === 'function') {
         AccessibilityInfo.removeEventListener('reduceMotionChanged', setReduceMotionEnabled);
       }

package/lib/Autocomplete/Autocomplete.js

@@ -68,14 +68,13 @@ const highlight = function () {
   let text = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   let color = arguments.length > 2 ? arguments[2] : undefined;
   return items.reduce((acc, item) => {
-    var _Array$from;
-    const matches = (_Array$from = Array.from(matchAll(item.label.toLowerCase(), text.toLowerCase().replace(/[/\-\\^$*+?.()|[\]{}]/g, '\\$&')))) === null || _Array$from === void 0 ? void 0 : _Array$from.map(_ref => {
+    const matches = Array.from(matchAll(item.label.toLowerCase(), text.toLowerCase().replace(/[/\-\\^$*+?.()|[\]{}]/g, '\\$&')))?.map(_ref => {
       let {
         index
       } = _ref;
       return index;
     });
-    if (matches !== null && matches !== void 0 && matches.length) {
+    if (matches?.length) {
       return [...acc, {
         ...item,
         label: highlightAllMatches(item.label, text, matches, color)
@@ -85,7 +84,6 @@ const highlight = function () {
   }, []);
 };
 const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  var _ref3;
   let {
     children,
     copy = 'en',
@@ -134,7 +132,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
 
   // Setting up the overlay
   const openOverlayRef = React.useRef();
-  const [isExpanded, setIsExpanded] = React.useState(((_ref3 = value ?? initialValue) === null || _ref3 === void 0 ? void 0 : _ref3.length) >= minToSuggestion);
+  const [isExpanded, setIsExpanded] = React.useState((value ?? initialValue)?.length >= minToSuggestion);
   const [isFocused, setisFocused] = React.useState(false);
   const [sourceLayout, setSourceLayout] = React.useState(null);
 
@@ -179,8 +177,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   useSafeLayoutEffect(() => {
     if (Platform.OS === 'web') {
       const updateInputWidth = () => {
-        var _inputRef$current;
-        setInputWidth((inputRef === null || inputRef === void 0 || (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.clientWidth) + 4); // adding back all the input borders / outlines
+        setInputWidth(inputRef?.current?.clientWidth + 4); // adding back all the input borders / outlines
         setIsExpanded(false); // close the suggestions while the input is changing
       };
       const throttledUpdateInputWidth = throttle(updateInputWidth, 100, {
@@ -192,53 +189,50 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
         Dimensions.removeEventListener('change', throttledUpdateInputWidth);
       };
     }
-    setInputWidth(sourceLayout === null || sourceLayout === void 0 ? void 0 : sourceLayout.width);
+    setInputWidth(sourceLayout?.width);
     return () => {};
   }, [inputRef, sourceLayout]);
   const handleMeasure = event => {
     onTargetLayout(event);
     if (Platform.OS !== 'web') {
-      var _inputRef$current2;
-      inputRef === null || inputRef === void 0 || (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.measureInWindow((x, y, width) => {
+      inputRef?.current?.measureInWindow((x, y, width) => {
         setInputWidth(width);
       });
     }
   };
   const handleChange = newValue => {
-    onChange === null || onChange === void 0 || onChange(newValue || '');
+    onChange?.(newValue || '');
     setCurrentValue(newValue);
-    setIsExpanded((newValue === null || newValue === void 0 ? void 0 : newValue.length) >= minToSuggestion);
+    setIsExpanded(newValue?.length >= minToSuggestion);
     if (!isControlled && initialItems !== undefined) {
-      setCurrentItems(initialItems.filter(_ref4 => {
-        var _label$toLowerCase;
+      setCurrentItems(initialItems.filter(_ref3 => {
         let {
           label
-        } = _ref4;
-        return label === null || label === void 0 || (_label$toLowerCase = label.toLowerCase()) === null || _label$toLowerCase === void 0 ? void 0 : _label$toLowerCase.includes(newValue === null || newValue === void 0 ? void 0 : newValue.toLowerCase());
+        } = _ref3;
+        return label?.toLowerCase()?.includes(newValue?.toLowerCase());
       }));
     }
   };
   const handleSelect = selectedId => {
-    var _ref5;
-    onSelect === null || onSelect === void 0 || onSelect(selectedId);
+    onSelect?.(selectedId);
     const {
       label: newValue,
       nested,
       title
-    } = (_ref5 = isControlled ? items : currentItems) === null || _ref5 === void 0 ? void 0 : _ref5.find(_ref6 => {
+    } = (isControlled ? items : currentItems)?.find(_ref4 => {
       let {
         id
-      } = _ref6;
+      } = _ref4;
       return id === selectedId;
     });
     if (title) return;
     if (!nested) {
       setNestedSelectedValue(null);
-      onChange === null || onChange === void 0 || onChange(newValue);
+      onChange?.(newValue);
       setIsExpanded(false);
     }
     setCurrentValue(newValue);
-    if (!isControlled && inputRef !== null && inputRef !== void 0 && inputRef.current) inputRef.current.value = newValue;
+    if (!isControlled && inputRef?.current) inputRef.current.value = newValue;
     if (nested) setNestedSelectedValue(newValue);
     inputRef.current.focus();
   };
@@ -287,11 +281,10 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     };
   }, [inputRef]);
   const handleClose = event => {
-    var _openOverlayRef$curre, _openOverlayRef$curre2;
-    if (event.type === 'keydown' && (event.key === 'Escape' || event.key === '27') || event.type === 'click' && !(openOverlayRef !== null && openOverlayRef !== void 0 && (_openOverlayRef$curre = openOverlayRef.current) !== null && _openOverlayRef$curre !== void 0 && _openOverlayRef$curre.contains(event.target)) || event.type === 'touchstart' && openOverlayRef !== null && openOverlayRef !== void 0 && openOverlayRef.current && event.touches[0].target && !(openOverlayRef !== null && openOverlayRef !== void 0 && (_openOverlayRef$curre2 = openOverlayRef.current) !== null && _openOverlayRef$curre2 !== void 0 && _openOverlayRef$curre2.contains(event.touches[0].target))) {
+    if (event.type === 'keydown' && (event.key === 'Escape' || event.key === '27') || event.type === 'click' && !openOverlayRef?.current?.contains(event.target) || event.type === 'touchstart' && openOverlayRef?.current && event.touches[0].target && !openOverlayRef?.current?.contains(event.touches[0].target)) {
       setIsExpanded(false);
       setNestedSelectedValue(null);
-    } else if (event.type === 'keydown' && (event.key === 'ArrowDown' || event.key === 'Tab') && isExpanded && !isLoading && targetRef !== null && targetRef !== void 0 && targetRef.current) {
+    } else if (event.type === 'keydown' && (event.key === 'ArrowDown' || event.key === 'Tab') && isExpanded && !isLoading && targetRef?.current) {
       event.preventDefault();
       targetRef.current.focus();
     }
@@ -309,11 +302,11 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       ...selectedProps,
       validation: validation,
       ref: ref,
-      children: _ref7 => {
+      children: _ref5 => {
         let {
           inputId,
           ...props
-        } = _ref7;
+        } = _ref5;
         if (typeof children === 'function') return children({
           inputId,
           inputRef,
@@ -388,13 +381,10 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
           parentRef: inputRef,
           ref: targetRef
         })
-      }), (targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) && /*#__PURE__*/_jsx(View
+      }), targetRef?.current && /*#__PURE__*/_jsx(View
       // This catches and shifts focus to other interactive elements.
       , {
-        onFocus: () => {
-          var _targetRef$current;
-          return targetRef === null || targetRef === void 0 || (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.focus();
-        },
+        onFocus: () => targetRef?.current?.focus(),
         tabIndex: 0
       })]
     })]

package/lib/Autocomplete/Suggestions.js

@@ -25,7 +25,7 @@ const Suggestions = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       ...rest
     };
   });
-  if (items !== null && items !== void 0 && items.length) return /*#__PURE__*/_jsxs(_Fragment, {
+  if (items?.length) return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(A11yText, {
       accessibilityLiveRegion: "polite",
       text: hasResults

package/lib/BaseProvider/HydrationContext.js

@@ -5,11 +5,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const HydrationContext = /*#__PURE__*/React.createContext();
 const isSSR = typeof window === 'undefined';
 const hasWebStyleTag = () => {
-  var _document;
   if (isSSR || Platform.OS !== 'web' || typeof document !== 'object') {
     return false;
   }
-  return Boolean((_document = document) === null || _document === void 0 ? void 0 : _document.getElementById('react-native-stylesheet'));
+  return Boolean(document?.getElementById('react-native-stylesheet'));
 };
 
 /**

package/lib/BaseProvider/index.js

@@ -1,4 +1,3 @@
-var _ThemeProvider$propTy;
 import React from 'react';
 import PropTypes from 'prop-types';
 import { PortalProvider } from '@gorhom/portal';
@@ -32,7 +31,7 @@ const BaseProvider = /*#__PURE__*/React.forwardRef((_ref, _) => {
 BaseProvider.displayName = 'BaseProvider';
 BaseProvider.propTypes = {
   children: PropTypes.node.isRequired,
-  defaultTheme: (_ThemeProvider$propTy = ThemeProvider.propTypes) === null || _ThemeProvider$propTy === void 0 ? void 0 : _ThemeProvider$propTy.defaultTheme,
+  defaultTheme: ThemeProvider.propTypes?.defaultTheme,
   themeOptions: PropTypes.shape({
     forceAbsoluteFontSizing: PropTypes.bool,
     forceZIndex: PropTypes.bool

package/lib/Button/ButtonDropdown.js

@@ -87,7 +87,7 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   }]);
   const handlePress = event => {
     if (!inactive) {
-      if (pressHandlers.onPress) pressHandlers === null || pressHandlers === void 0 || pressHandlers.onPress(event);
+      if (pressHandlers.onPress) pressHandlers?.onPress(event);
       setIsOpen(!isOpen, event);
     }
   };

package/lib/Card/Card.js

@@ -101,7 +101,6 @@ const getInputProps = _ref2 => {
  * depending on what you are trying to achieve.
  */
 const Card = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
-  var _interactiveCard$vari, _interactiveCard$vari2;
   let {
     children,
     tokens,
@@ -124,12 +123,12 @@ const Card = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   const themeTokens = useTokens('Card', tokens, variant, !enableMediaQueryStyleSheet && {
     viewport
   });
-  const selected = interactiveCard === null || interactiveCard === void 0 || (_interactiveCard$vari = interactiveCard.variant) === null || _interactiveCard$vari === void 0 ? void 0 : _interactiveCard$vari.selected;
-  const inactive = interactiveCard === null || interactiveCard === void 0 || (_interactiveCard$vari2 = interactiveCard.variant) === null || _interactiveCard$vari2 === void 0 ? void 0 : _interactiveCard$vari2.inactive;
-  const selectionType = interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.selectionType;
-  const getThemeTokens = useThemeTokensCallback('Card', interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.tokens, {
+  const selected = interactiveCard?.variant?.selected;
+  const inactive = interactiveCard?.variant?.inactive;
+  const selectionType = interactiveCard?.selectionType;
+  const getThemeTokens = useThemeTokensCallback('Card', interactiveCard?.tokens, {
     interactive: true,
-    ...((interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.variant) || {})
+    ...(interactiveCard?.variant || {})
   });
   // When interactive area is present, spacing tokens should only be applied
   // to individual Card sections, not Card as a whole
@@ -202,7 +201,7 @@ const Card = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
             ...props,
             tokens: {
               ...checkboxTokens,
-              ...(props === null || props === void 0 ? void 0 : props.tokens)
+              ...props?.tokens
             }
           })
         });
@@ -213,7 +212,7 @@ const Card = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
             ...props,
             tokens: {
               ...radioTokens,
-              ...(props === null || props === void 0 ? void 0 : props.tokens)
+              ...props?.tokens
             }
           })
         });
@@ -233,13 +232,13 @@ const Card = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(CardBase, {
       ref: ref,
-      tokens: interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? restOfTokens : cardStyles,
+      tokens: interactiveCard?.body ? restOfTokens : cardStyles,
       backgroundImage: backgroundImage,
       dataSet: mediaIds && {
         media: mediaIds
       },
       ...selectProps(rest),
-      children: interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: interactiveCard?.body ? /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(PressableCardBase, {
           ref: ref,
           tokens: getThemeTokens,
@@ -256,7 +255,7 @@ const Card = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
               selected,
               interactive: true,
               isControl: true
-            }, interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.tokens);
+            }, interactiveCard?.tokens);
             return /*#__PURE__*/_jsxs(_Fragment, {
               children: [renderInputPerSelectionType(getInputProps({
                 id,
@@ -264,10 +263,10 @@ const Card = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
                 boxBackgroundColor,
                 checkBackgroundColor,
                 isControlled: true,
-                isChecked: selected || (cardState === null || cardState === void 0 ? void 0 : cardState.hover),
+                isChecked: selected || cardState?.hover,
                 isInactive: inactive,
                 onPress
-              })), typeof (interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.body) === 'function' ? interactiveCard.body(cardState) : interactiveCard.body]
+              })), typeof interactiveCard?.body === 'function' ? interactiveCard.body(cardState) : interactiveCard.body]
             });
           }
         }), children && selectionType !== SelectionType.None ? renderNoSelectionView() : null]

package/lib/Card/CardBase.js

@@ -87,7 +87,7 @@ const CardBase = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       alt: alt,
       source: imageSourceViewport,
       imageStyle: {
-        borderRadius: (cardStyle === null || cardStyle === void 0 ? void 0 : cardStyle.borderRadius) - (cardStyle === null || cardStyle === void 0 ? void 0 : cardStyle.borderWidth)
+        borderRadius: cardStyle?.borderRadius - cardStyle?.borderWidth
       },
       resizeMode: backgroundImageResizeMode,
       style: styles.imageBackground,

package/lib/Card/PressableCardBase.js

@@ -80,7 +80,7 @@ const PressableCardBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   });
   const handleKeyDown = event => {
     // The expected keyboard shortcut for selecting a focused item is the Space key
-    if ((event === null || event === void 0 ? void 0 : event.key) === ' ') handleChange(event);
+    if (event?.key === ' ') handleChange(event);
   };
   return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,

package/lib/CardGroup/CardGroup.js

@@ -79,7 +79,7 @@ const CardGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     } else {
       multipleInputValues.toggleOneValue(cardId, event);
     }
-    return itemOnChange === null || itemOnChange === void 0 ? void 0 : itemOnChange(checked, event);
+    return itemOnChange?.(checked, event);
   }, [singleInputValue, multipleInputValues, singleSelection]);
   return /*#__PURE__*/_jsx(Fieldset, {
     copy: copy,
@@ -116,7 +116,7 @@ const CardGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
               paddingBottom,
               paddingLeft,
               paddingRight,
-              ...(interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.tokens)
+              ...interactiveCard?.tokens
             },
             variant: {
               isControl: true,
@@ -127,7 +127,7 @@ const CardGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           },
           ...selectItemProps(itemRest),
           ...props,
-          children: card === null || card === void 0 ? void 0 : card.body
+          children: card?.body
         }, cardId);
       })
     })

package/lib/Carousel/Carousel.js

@@ -407,14 +407,13 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     }
   }, [pan, springConfig, handleAnimationEnd, transitionDuration, isAutoPlayEnabled, enablePeeking, enableDisplayMultipleItemsPerSlide]);
   const stopAutoplay = React.useCallback(() => {
-    if (autoPlayRef !== null && autoPlayRef !== void 0 && autoPlayRef.current) {
-      clearTimeout(autoPlayRef === null || autoPlayRef === void 0 ? void 0 : autoPlayRef.current);
+    if (autoPlayRef?.current) {
+      clearTimeout(autoPlayRef?.current);
     }
   }, []);
   const triggerRefocus = React.useCallback(() => {
     if (refocus && Platform.OS === 'web') {
-      var _firstFocusRef$curren;
-      (_firstFocusRef$curren = firstFocusRef.current) === null || _firstFocusRef$curren === void 0 || _firstFocusRef$curren.focus({
+      firstFocusRef.current?.focus({
         preventScroll: true,
         focusVisible: false
       });
@@ -630,8 +629,8 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   // Related discussion - https://github.com/telus/universal-design-system/issues/1549
   const previousNextIconButtonVariants = {
     size: previousNextIconSize,
-    raised: !(variant !== null && variant !== void 0 && variant.inverse) && true,
-    inverse: variant === null || variant === void 0 ? void 0 : variant.inverse
+    raised: !variant?.inverse && true,
+    inverse: variant?.inverse
   };
   const getCopyWithPlaceholders = React.useCallback(copyKey => {
     const copyText = getCopy(copyKey).replace(/%\{title\}/g, title).replace(/%\{itemLabel\}/g, itemLabel).replace(/%\{stepNumber\}/g, activeIndex + 1).replace(/%\{stepCount\}/g, totalItems);

package/lib/Carousel/CarouselStepTracker/CarouselStepTracker.js

@@ -37,6 +37,9 @@ const CarouselStepTracker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   };
   const steps = Array.from(Array(totalItems)).map((_, index) => String(index));
   if (enableDisplayMultipleItemsPerSlide) {
+    if (totalItems === 1) {
+      return null;
+    }
     return /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(Spacer, {
         space: 4

package/lib/Carousel/CarouselTabs/CarouselTabs.js

@@ -1,4 +1,3 @@
-var _CarouselTabs$propTyp, _CarouselTabs$propTyp2;
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useResponsiveProp } from '../../utils';
@@ -46,5 +45,5 @@ CarouselTabs.propTypes = {
 };
 // CarouselTabs doesn't require `children` prop, it uses `items` instead.
 // eslint-disable-next-line react/forbid-foreign-prop-types
-if ((_CarouselTabs$propTyp = CarouselTabs.propTypes) !== null && _CarouselTabs$propTyp !== void 0 && _CarouselTabs$propTyp.children) (_CarouselTabs$propTyp2 = CarouselTabs.propTypes) === null || _CarouselTabs$propTyp2 === void 0 || delete _CarouselTabs$propTyp2.children;
+if (CarouselTabs.propTypes?.children) delete CarouselTabs.propTypes?.children;
 export default CarouselTabs;

package/lib/Carousel/CarouselTabs/CarouselTabsPanel.js

@@ -24,7 +24,7 @@ const CarouselTabsPanel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   // Get current select tab style
   React.useEffect(() => {
     const [selectedVariantIsInverse] = items.filter((_, index) => index === activeIndex);
-    setIsInverse(selectedVariantIsInverse === null || selectedVariantIsInverse === void 0 ? void 0 : selectedVariantIsInverse.inverse);
+    setIsInverse(selectedVariantIsInverse?.inverse);
   }, [items, activeIndex]);
 
   // TODO: figure out a better cross-brand way to specify subcomponent variants.

package/lib/Carousel/CarouselTabs/CarouselTabsPanelItem.js

@@ -87,7 +87,7 @@ const CarouselTabsPanelItem = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   } = selectPressProps(rest);
   const handleKeyDown = event => {
     // Allow using the spacebar for navigation
-    if ((event === null || event === void 0 ? void 0 : event.key) === ' ') onPress(event);
+    if (event?.key === ' ') onPress(event);
   };
   return /*#__PURE__*/_jsx(Pressable, {
     onPress: onPress,

package/lib/Carousel/CarouselThumbnail.js

@@ -47,7 +47,7 @@ const CarouselThumbnail = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   const handlePress = () => goTo(index);
   const handleKeyDown = event => {
     // Allow using the spacebar for navigation
-    if ((event === null || event === void 0 ? void 0 : event.key) === ' ') goTo(index);
+    if (event?.key === ' ') goTo(index);
   };
   const {
     borderWidth,

package/lib/Checkbox/Checkbox.js

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

package/lib/ColourToggle/ColourToggle.js

@@ -42,7 +42,7 @@ const ColourToggle = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         const colourBubbleId = id || `ColourBubble[${index}]`;
         const handleChangeColour = event => {
           setCurrentColourId(id);
-          onChange === null || onChange === void 0 || onChange(event, {
+          onChange?.(event, {
             id,
             colourHexCode,
             colourName

package/lib/ExpandCollapseMini/ExpandCollapseMini.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ExpandCollapse from '../ExpandCollapse';
+import { getTokensPropType } from '../utils';
+import ExpandCollapseMiniControl from './ExpandCollapseMiniControl';
+import { jsx as _jsx } from "react/jsx-runtime";
+const ExpandCollapseMini = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    onToggle = () => {},
+    tokens = {},
+    nativeID,
+    initialOpen = false,
+    ...rest
+  } = _ref;
+  const expandCollapeMiniPanelId = 'ExpandCollapseMiniPanel';
+  const handleChange = (openPanels, event) => {
+    if (typeof onToggle === 'function') {
+      const isOpen = openPanels.length > 0;
+      onToggle(event, isOpen);
+    }
+  };
+  return /*#__PURE__*/_jsx(ExpandCollapse, {
+    onChange: handleChange,
+    tokens: tokens,
+    initialOpen: initialOpen ? [expandCollapeMiniPanelId] : [],
+    children: expandProps => /*#__PURE__*/_jsx(ExpandCollapse.Panel, {
+      ...expandProps,
+      panelId: expandCollapeMiniPanelId,
+      variant: {
+        mini: true
+      },
+      controlTokens: {
+        // Remove unwanted look and feel from ExpandCollapse(background pressed, focus border and text underline)
+        icon: null,
+        borderColor: 'transparent',
+        textLine: 'none',
+        backgroundColor: 'transparent'
+      }
+      // TODO refactor
+      // eslint-disable-next-line react/no-unstable-nested-components
+      ,
+      control: pressableState => /*#__PURE__*/_jsx(ExpandCollapseMiniControl, {
+        pressableState: pressableState,
+        ...rest
+      }),
+      controlRef: ref,
+      nativeID: nativeID,
+      children: children
+    })
+  });
+});
+ExpandCollapseMini.displayName = 'ExpandCollapseMini';
+ExpandCollapseMini.propTypes = {
+  ...ExpandCollapseMiniControl.propTypes,
+  /**
+   * Function to call on pressing the panel's control, which should open or close the panel.
+   */
+  onToggle: PropTypes.func,
+  /**
+   * ID for DOM element on web
+   */
+  nativeID: PropTypes.string,
+  /**
+   * Children nodes that can be added
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Controls if the panel and the content is opened by default on the first load
+   */
+  initialOpen: PropTypes.bool,
+  /**
+   * Optional variant object to override the default theme tokens
+   */
+  tokens: getTokensPropType('ExpandCollapseMini')
+};
+export default ExpandCollapseMini;