@telus-uds/components-base 1.62.0 → 1.63.0

package/CHANGELOG.md

@@ -1,12 +1,29 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 15 Sep 2023 20:56:52 GMT and should not be manually modified.
+This log was last generated on Wed, 04 Oct 2023 18:37:04 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.63.0
+
+Wed, 04 Oct 2023 18:37:04 GMT
+
+### Minor changes
+
+- new logic for autocomplete when has nested items (mauricio.batresmontejo@telus.com)
+- update components base imports (evander.owusu@telus.com)
+
+## 1.62.1
+
+Wed, 27 Sep 2023 20:47:22 GMT
+
+### Patches
+
+- Clicking on any clickable area should bubble event to relevant `Pressable` element (shahzaibkhalidmalik@outlook.com)
+
 ## 1.62.0
 
-Fri, 15 Sep 2023 20:56:52 GMT
+Fri, 15 Sep 2023 21:02:27 GMT
 
 ### Minor changes
 

package/lib/Autocomplete/Autocomplete.js

@@ -154,7 +154,8 @@ const Autocomplete = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
 
   const isControlled = value !== undefined; // We need to store current items for uncontrolled usage
 
-  const [currentItems, setCurrentItems] = (0, _react.useState)(initialItems); // We need to store the current value as well to be able to highlight it
+  const [currentItems, setCurrentItems] = (0, _react.useState)(initialItems);
+  const [otherItems, setOtherItems] = (0, _react.useState)(items); // We need to store the current value as well to be able to highlight it
 
   const [currentValue, setCurrentValue] = (0, _react.useState)(value ?? initialValue);
   const inputTokens = {
@@ -164,7 +165,9 @@ const Autocomplete = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   const openOverlayRef = (0, _react.useRef)();
   const [isExpanded, setIsExpanded] = (0, _react.useState)(((_ref3 = value ?? initialValue) === null || _ref3 === void 0 ? void 0 : _ref3.length) >= minToSuggestion);
   const [isFocused, setisFocused] = (0, _react.useState)(false);
-  const [sourceLayout, setSourceLayout] = (0, _react.useState)(null);
+  const [sourceLayout, setSourceLayout] = (0, _react.useState)(null); // When it's nested, selected value
+
+  const [nestedSelectedValue, setNestedSelectedValue] = (0, _react.useState)(null);
   const {
     supportsProps,
     ...selectedProps
@@ -262,22 +265,49 @@ const Autocomplete = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(selectedId);
     const {
       label: newValue,
-      nested
+      nested,
+      title
     } = (_ref5 = isControlled ? items : currentItems) === null || _ref5 === void 0 ? void 0 : _ref5.find(_ref6 => {
       let {
         id
       } = _ref6;
       return id === selectedId;
     });
+    if (title) return;
 
     if (!nested) {
+      setNestedSelectedValue(null);
       onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
       setIsExpanded(false);
     }
 
     setCurrentValue(newValue);
     if (!isControlled && inputRef !== null && inputRef !== void 0 && inputRef.current) inputRef.current.value = newValue;
+    if (nested) setNestedSelectedValue(newValue);
   };
+  /**
+   * When an item that is nested equal "true" is selected this useEffect is executed.
+   * The nested item is added to the item list at the top, the if validates it doesn't exist
+   * within the list, if doesn't exist the nested item is added to the top of the list,
+   * the nested item is added with an id equal "0"
+   */
+
+
+  (0, _react.useEffect)(() => {
+    if (nestedSelectedValue && !items.find(item => item.id === 0)) {
+      const tmpItems = [...items];
+      tmpItems.unshift({
+        label: nestedSelectedValue,
+        title: true,
+        id: 0
+      });
+      setOtherItems(tmpItems.map(item => {
+        return { ...item,
+          nestedChild: item.id !== 0
+        };
+      }));
+    }
+  }, [nestedSelectedValue, items]);
 
   const handleClose = event => {
     var _openOverlayRef$curre, _openOverlayRef$curre2;
@@ -285,6 +315,7 @@ const Autocomplete = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     if (event.type === 'keydown') {
       if (event.key === 'Escape' || event.key === 27) {
         setIsExpanded(false);
+        setNestedSelectedValue(null);
       } else if (event.key === 'ArrowDown' && isExpanded && !isLoading && targetRef !== null && targetRef !== void 0 && targetRef.current) {
         targetRef.current.focus();
       }
@@ -295,6 +326,7 @@ const Autocomplete = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     } else if (_Platform.default.OS === 'web') {
       // needed for dropdown to be collapsed when clicking outside on web
       setIsExpanded(false);
+      setNestedSelectedValue(null);
     }
   };
 
@@ -369,7 +401,7 @@ const Autocomplete = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Suggestions.default, {
           hasResults: getCopy('hasResults'),
           id: "autocomplete",
-          items: itemsToShow,
+          items: nestedSelectedValue ? itemsToSuggest(highlight(otherItems, nestedSelectedValue, resultsTextColor)) : itemsToShow,
           noResults: helpTextToShow,
           onClose: handleClose,
           onSelect: handleSelect,

package/lib/Button/ButtonDropdown.js

@@ -176,6 +176,7 @@ ButtonDropdown.propTypes = { ..._utils.a11yProps.types,
   ..._utils.focusHandlerProps.types,
   ..._propTypes2.default,
   children: _propTypes2.textAndA11yText,
+  tokens: (0, _utils.getTokensPropType)('ButtonDropdown'),
 
   /**
    * Callback called when a controlled ButtonDropdown gets interacted with.

package/lib/Icon/Icon.js

@@ -32,6 +32,7 @@ const Icon = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     variant,
     tokens,
     scalesWithText = false,
+    style = {},
     dataSet
   } = _ref;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Icon', tokens, variant);
@@ -48,7 +49,8 @@ const Icon = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       // TODO: systematise animations.
       // https://github.com/telus/universal-design-system/issues/487
       transition: 'transform 200ms, color 200ms',
-      transform: [themeTokens.scale ? `scale(${themeTokens.scale})` : '', themeTokens.translateX ? `translateX(${themeTokens.translateX}px)` : '', themeTokens.translateY ? `translateY(${themeTokens.translateY}px)` : ''].filter(exists => exists).join(' ')
+      transform: [themeTokens.scale ? `scale(${themeTokens.scale})` : '', themeTokens.translateX ? `translateX(${themeTokens.translateX}px)` : '', themeTokens.translateY ? `translateY(${themeTokens.translateY}px)` : ''].filter(exists => exists).join(' '),
+      ...style
     },
     dataSet: dataSet,
     children: iconContent
@@ -67,7 +69,18 @@ const iconComponentPropTypes = {
   /**
    * controls whether the icon size should be proportionate to any accessibility-related font scaling.
    */
-  scalesWithText: _propTypes.default.bool
+  scalesWithText: _propTypes.default.bool,
+
+  /**
+   * Custom style object to be applied to the icon component.
+   * This is useful for overriding the default icon style but for cases where desires styles are not available as tokens.
+   *
+   * Note: This prop is only used in web.
+   *
+   * @example
+   * <Icon style={{ color: 'red' }}
+   */
+  style: _propTypes.default.object
 };
 exports.iconComponentPropTypes = iconComponentPropTypes;
 Icon.propTypes = { ...iconComponentPropTypes,

package/lib/Link/LinkBase.js

@@ -225,10 +225,11 @@ const LinkBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
         iconPosition: iconPosition,
         space: iconSpace,
         iconProps: { ...iconProps,
-          tokens: iconTokens
+          tokens: iconTokens,
+          style: staticStyles.bubblePointerEvents
         },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-          style: [textStyles, blockTextStyles, staticStyles.baseline],
+          style: [textStyles, blockTextStyles, staticStyles.baseline, staticStyles.bubblePointerEvents],
           children: typeof children === 'function' ? children(linkState) : children
         })
       });
@@ -287,6 +288,12 @@ const staticStyles = _StyleSheet.default.create({
   },
   baseline: {
     alignSelf: 'baseline'
+  },
+  bubblePointerEvents: { ..._Platform.default.select({
+      web: {
+        pointerEvents: 'none'
+      }
+    })
   }
 });
 

package/lib/Listbox/Listbox.js

@@ -165,6 +165,7 @@ const Listbox = _ref => {
 };
 
 Listbox.propTypes = { ..._utils.withLinkRouter.propTypes,
+  tokens: (0, _utils.getTokensPropType)('Listbox'),
 
   /**
    * Focus will be moved to the item with this ref once within the menu.
@@ -190,8 +191,7 @@ Listbox.propTypes = { ..._utils.withLinkRouter.propTypes,
   /**
    * onClose event
    */
-  onClose: _propTypes.default.func,
-  tokens: (0, _utils.getTokensPropType)('Listbox')
+  onClose: _propTypes.default.func
 };
 Listbox.Overlay = _ListboxOverlay.default;
 var _default = Listbox;

package/lib/Listbox/ListboxItem.js

@@ -37,6 +37,9 @@ const styles = _StyleSheet.default.create({
   },
   childContainer: {
     paddingLeft: 16
+  },
+  nestedChildContainer: {
+    paddingLeft: 24
   }
 });
 
@@ -45,6 +48,7 @@ const ListboxItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     href,
     label,
     isChild = false,
+    nestedChild,
     onBlur,
     nextItemRef,
     prevItemRef,
@@ -64,7 +68,7 @@ const ListboxItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     isChild
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-    style: [styles.itemContainer, isChild && styles.childContainer],
+    style: [styles.itemContainer, isChild && styles.childContainer, nestedChild && styles.nestedChildContainer],
     role: "option",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PressableItem.default, {
       href: href,
@@ -89,7 +93,8 @@ ListboxItem.propTypes = { ...selectedSystemPropTypes,
   label: _propTypes.default.node.isRequired,
   nextItemRef: _propTypes.default.object,
   prevItemRef: _propTypes.default.object,
-  onPress: _propTypes.default.func
+  onPress: _propTypes.default.func,
+  nestedChild: _propTypes.default.bool
 };
 
 var _default = (0, _utils.withLinkRouter)(ListboxItem);

package/lib/MultiSelectFilter/MultiSelectFilter.js

@@ -439,9 +439,9 @@ MultiSelectFilter.propTypes = {
   variant: _utils.variantProp.propType,
 
   /**
-   * Sets the tokens for ButtonDropdown element.
+   * Sets the tokens for MultiSelectFilter element.
    */
-  tokens: (0, _utils.getTokensPropType)('ButtonDropdown'),
+  tokens: (0, _utils.getTokensPropType)('MultiSelectFilter'),
 
   /**
    * The options a user may select.

package/lib/Tooltip/Tooltip.js

@@ -153,6 +153,7 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     tokens,
     variant,
     inline = false,
+    nativeID,
     ...rest
   } = _ref6;
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
@@ -265,6 +266,7 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
       hitSlop: pressableHitSlop,
       accessibilityLabel: getCopy('a11yText'),
       accessibilityRole: "button",
+      nativeID: nativeID,
       children: typeof control === 'function' ? pressableState => control(getPressableState(pressableState), variant) : control
     }), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
       ref: floating,

package/lib/Tooltip/Tooltip.native.js

@@ -182,6 +182,7 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     tokens,
     variant,
     inline = false,
+    nativeID,
     ...rest
   } = _ref6;
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
@@ -317,6 +318,7 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
       hitSlop: pressableHitSlop,
       accessibilityLabel: getCopy('a11yText'),
       accessibilityRole: "button",
+      nativeID: nativeID,
       children: typeof control === 'function' ? pressableState => control(getPressableState(pressableState), variant) : control
     }), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Backdrop.default, {
       onPress: close,

package/lib/Tooltip/shared.js

@@ -42,6 +42,11 @@ const propTypes = {
    * Callback function triggered when the tooltip is pressed.
    */
   onPress: _propTypes.default.func,
+
+  /**
+   * The `id` of the tooltip button.
+   */
+  nativeID: _propTypes.default.string,
   tokens: (0, _utils.getTokensPropType)('Tooltip'),
   variant: _utils.variantProp.propType
 };

package/lib/TooltipButton/TooltipButton.js

@@ -9,6 +9,10 @@ var _react = _interopRequireDefault(require("react"));
 
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _ThemeProvider = require("../ThemeProvider");
@@ -69,7 +73,7 @@ const TooltipButton = _ref3 => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: [(0, _ThemeProvider.applyOuterBorder)(themeTokens), themeTokens.outerBorderWidth && {
       margin: -themeTokens.outerBorderWidth
-    }],
+    }, staticStyles.bubblePointerEvents],
     ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: selectInnerContainerStyles(themeTokens),
@@ -81,6 +85,15 @@ const TooltipButton = _ref3 => {
   });
 };
 
+const staticStyles = _StyleSheet.default.create({
+  bubblePointerEvents: { ..._Platform.default.select({
+      web: {
+        pointerEvents: 'none'
+      }
+    })
+  }
+});
+
 TooltipButton.propTypes = { ...selectedSystemPropTypes,
 
   /**

package/lib-module/Autocomplete/Autocomplete.js

@@ -1,5 +1,5 @@
 /* eslint-disable react/require-default-props */
-import React, { forwardRef, useRef, useState } from 'react';
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import Dimensions from "react-native-web/dist/exports/Dimensions";
 import Platform from "react-native-web/dist/exports/Platform";
@@ -123,7 +123,8 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
 
   const isControlled = value !== undefined; // We need to store current items for uncontrolled usage
 
-  const [currentItems, setCurrentItems] = useState(initialItems); // We need to store the current value as well to be able to highlight it
+  const [currentItems, setCurrentItems] = useState(initialItems);
+  const [otherItems, setOtherItems] = useState(items); // We need to store the current value as well to be able to highlight it
 
   const [currentValue, setCurrentValue] = useState(value ?? initialValue);
   const inputTokens = {
@@ -133,7 +134,9 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
   const openOverlayRef = useRef();
   const [isExpanded, setIsExpanded] = useState(((_ref3 = value ?? initialValue) === null || _ref3 === void 0 ? void 0 : _ref3.length) >= minToSuggestion);
   const [isFocused, setisFocused] = useState(false);
-  const [sourceLayout, setSourceLayout] = useState(null);
+  const [sourceLayout, setSourceLayout] = useState(null); // When it's nested, selected value
+
+  const [nestedSelectedValue, setNestedSelectedValue] = useState(null);
   const {
     supportsProps,
     ...selectedProps
@@ -229,22 +232,49 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(selectedId);
     const {
       label: newValue,
-      nested
+      nested,
+      title
     } = (_ref5 = isControlled ? items : currentItems) === null || _ref5 === void 0 ? void 0 : _ref5.find(_ref6 => {
       let {
         id
       } = _ref6;
       return id === selectedId;
     });
+    if (title) return;
 
     if (!nested) {
+      setNestedSelectedValue(null);
       onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
       setIsExpanded(false);
     }
 
     setCurrentValue(newValue);
     if (!isControlled && inputRef !== null && inputRef !== void 0 && inputRef.current) inputRef.current.value = newValue;
+    if (nested) setNestedSelectedValue(newValue);
   };
+  /**
+   * When an item that is nested equal "true" is selected this useEffect is executed.
+   * The nested item is added to the item list at the top, the if validates it doesn't exist
+   * within the list, if doesn't exist the nested item is added to the top of the list,
+   * the nested item is added with an id equal "0"
+   */
+
+
+  useEffect(() => {
+    if (nestedSelectedValue && !items.find(item => item.id === 0)) {
+      const tmpItems = [...items];
+      tmpItems.unshift({
+        label: nestedSelectedValue,
+        title: true,
+        id: 0
+      });
+      setOtherItems(tmpItems.map(item => {
+        return { ...item,
+          nestedChild: item.id !== 0
+        };
+      }));
+    }
+  }, [nestedSelectedValue, items]);
 
   const handleClose = event => {
     var _openOverlayRef$curre, _openOverlayRef$curre2;
@@ -252,6 +282,7 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
     if (event.type === 'keydown') {
       if (event.key === 'Escape' || event.key === 27) {
         setIsExpanded(false);
+        setNestedSelectedValue(null);
       } else if (event.key === 'ArrowDown' && isExpanded && !isLoading && targetRef !== null && targetRef !== void 0 && targetRef.current) {
         targetRef.current.focus();
       }
@@ -262,6 +293,7 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
     } else if (Platform.OS === 'web') {
       // needed for dropdown to be collapsed when clicking outside on web
       setIsExpanded(false);
+      setNestedSelectedValue(null);
     }
   };
 
@@ -336,7 +368,7 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
         }) : /*#__PURE__*/_jsx(Suggestions, {
           hasResults: getCopy('hasResults'),
           id: "autocomplete",
-          items: itemsToShow,
+          items: nestedSelectedValue ? itemsToSuggest(highlight(otherItems, nestedSelectedValue, resultsTextColor)) : itemsToShow,
           noResults: helpTextToShow,
           onClose: handleClose,
           onSelect: handleSelect,

package/lib-module/Button/ButtonDropdown.js

@@ -6,7 +6,7 @@ import View from "react-native-web/dist/exports/View";
 import buttonPropTypes, { textAndA11yText } from './propTypes';
 import ButtonBase from './ButtonBase';
 import { useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps, focusHandlerProps, resolvePressableState, selectTokens, useInputValue } from '../utils';
+import { a11yProps, getTokensPropType, focusHandlerProps, resolvePressableState, selectTokens, useInputValue } from '../utils';
 import Icon from '../Icon';
 import { getStackedContent } from '../StackView';
 import { getPressHandlersWithArgs } from '../utils/pressability';
@@ -151,6 +151,7 @@ ButtonDropdown.propTypes = { ...a11yProps.types,
   ...focusHandlerProps.types,
   ...buttonPropTypes,
   children: textAndA11yText,
+  tokens: getTokensPropType('ButtonDropdown'),
 
   /**
    * Callback called when a controlled ButtonDropdown gets interacted with.

package/lib-module/Icon/Icon.js

@@ -12,6 +12,7 @@ const Icon = /*#__PURE__*/forwardRef((_ref, ref) => {
     variant,
     tokens,
     scalesWithText = false,
+    style = {},
     dataSet
   } = _ref;
   const themeTokens = useThemeTokens('Icon', tokens, variant);
@@ -30,7 +31,8 @@ const Icon = /*#__PURE__*/forwardRef((_ref, ref) => {
       // TODO: systematise animations.
       // https://github.com/telus/universal-design-system/issues/487
       transition: 'transform 200ms, color 200ms',
-      transform: [themeTokens.scale ? `scale(${themeTokens.scale})` : '', themeTokens.translateX ? `translateX(${themeTokens.translateX}px)` : '', themeTokens.translateY ? `translateY(${themeTokens.translateY}px)` : ''].filter(exists => exists).join(' ')
+      transform: [themeTokens.scale ? `scale(${themeTokens.scale})` : '', themeTokens.translateX ? `translateX(${themeTokens.translateX}px)` : '', themeTokens.translateY ? `translateY(${themeTokens.translateY}px)` : ''].filter(exists => exists).join(' '),
+      ...style
     },
     dataSet: dataSet,
     children: iconContent
@@ -49,7 +51,18 @@ export const iconComponentPropTypes = {
   /**
    * controls whether the icon size should be proportionate to any accessibility-related font scaling.
    */
-  scalesWithText: PropTypes.bool
+  scalesWithText: PropTypes.bool,
+
+  /**
+   * Custom style object to be applied to the icon component.
+   * This is useful for overriding the default icon style but for cases where desires styles are not available as tokens.
+   *
+   * Note: This prop is only used in web.
+   *
+   * @example
+   * <Icon style={{ color: 'red' }}
+   */
+  style: PropTypes.object
 };
 Icon.propTypes = { ...iconComponentPropTypes,
 

package/lib-module/Link/LinkBase.js

@@ -197,10 +197,11 @@ const LinkBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
         iconPosition: iconPosition,
         space: iconSpace,
         iconProps: { ...iconProps,
-          tokens: iconTokens
+          tokens: iconTokens,
+          style: staticStyles.bubblePointerEvents
         },
         children: /*#__PURE__*/_jsx(Text, {
-          style: [textStyles, blockTextStyles, staticStyles.baseline],
+          style: [textStyles, blockTextStyles, staticStyles.baseline, staticStyles.bubblePointerEvents],
           children: typeof children === 'function' ? children(linkState) : children
         })
       });
@@ -258,6 +259,12 @@ const staticStyles = StyleSheet.create({
   },
   baseline: {
     alignSelf: 'baseline'
+  },
+  bubblePointerEvents: { ...Platform.select({
+      web: {
+        pointerEvents: 'none'
+      }
+    })
   }
 });
 export default withLinkRouter(LinkBase);

package/lib-module/Listbox/Listbox.js

@@ -140,6 +140,7 @@ const Listbox = _ref => {
 };
 
 Listbox.propTypes = { ...withLinkRouter.propTypes,
+  tokens: getTokensPropType('Listbox'),
 
   /**
    * Focus will be moved to the item with this ref once within the menu.
@@ -165,8 +166,7 @@ Listbox.propTypes = { ...withLinkRouter.propTypes,
   /**
    * onClose event
    */
-  onClose: PropTypes.func,
-  tokens: getTokensPropType('Listbox')
+  onClose: PropTypes.func
 };
 Listbox.Overlay = DropdownOverlay;
 export default Listbox;

package/lib-module/Listbox/ListboxItem.js

@@ -15,6 +15,9 @@ const styles = StyleSheet.create({
   },
   childContainer: {
     paddingLeft: 16
+  },
+  nestedChildContainer: {
+    paddingLeft: 24
   }
 });
 const ListboxItem = /*#__PURE__*/forwardRef((_ref, ref) => {
@@ -22,6 +25,7 @@ const ListboxItem = /*#__PURE__*/forwardRef((_ref, ref) => {
     href,
     label,
     isChild = false,
+    nestedChild,
     onBlur,
     nextItemRef,
     prevItemRef,
@@ -41,7 +45,7 @@ const ListboxItem = /*#__PURE__*/forwardRef((_ref, ref) => {
     isChild
   });
   return /*#__PURE__*/_jsx(View, {
-    style: [styles.itemContainer, isChild && styles.childContainer],
+    style: [styles.itemContainer, isChild && styles.childContainer, nestedChild && styles.nestedChildContainer],
     role: "option",
     children: /*#__PURE__*/_jsx(PressableItem, {
       href: href,
@@ -66,6 +70,7 @@ ListboxItem.propTypes = { ...selectedSystemPropTypes,
   label: PropTypes.node.isRequired,
   nextItemRef: PropTypes.object,
   prevItemRef: PropTypes.object,
-  onPress: PropTypes.func
+  onPress: PropTypes.func,
+  nestedChild: PropTypes.bool
 };
 export default withLinkRouter(ListboxItem);

package/lib-module/MultiSelectFilter/MultiSelectFilter.js

@@ -405,9 +405,9 @@ MultiSelectFilter.propTypes = {
   variant: variantProp.propType,
 
   /**
-   * Sets the tokens for ButtonDropdown element.
+   * Sets the tokens for MultiSelectFilter element.
    */
-  tokens: getTokensPropType('ButtonDropdown'),
+  tokens: getTokensPropType('MultiSelectFilter'),
 
   /**
    * The options a user may select.

package/lib-module/Tooltip/Tooltip.js

@@ -127,6 +127,7 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref6, ref) => {
     tokens,
     variant,
     inline = false,
+    nativeID,
     ...rest
   } = _ref6;
   const [isOpen, setIsOpen] = useState(false);
@@ -239,6 +240,7 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref6, ref) => {
       hitSlop: pressableHitSlop,
       accessibilityLabel: getCopy('a11yText'),
       accessibilityRole: "button",
+      nativeID: nativeID,
       children: typeof control === 'function' ? pressableState => control(getPressableState(pressableState), variant) : control
     }), isOpen && /*#__PURE__*/_jsxs(View, {
       ref: floating,

package/lib-module/Tooltip/Tooltip.native.js

@@ -154,6 +154,7 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref6, ref) => {
     tokens,
     variant,
     inline = false,
+    nativeID,
     ...rest
   } = _ref6;
   const [isOpen, setIsOpen] = useState(false);
@@ -288,6 +289,7 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref6, ref) => {
       hitSlop: pressableHitSlop,
       accessibilityLabel: getCopy('a11yText'),
       accessibilityRole: "button",
+      nativeID: nativeID,
       children: typeof control === 'function' ? pressableState => control(getPressableState(pressableState), variant) : control
     }), isOpen && /*#__PURE__*/_jsx(Backdrop, {
       onPress: close,

package/lib-module/Tooltip/shared.js

@@ -31,6 +31,11 @@ const propTypes = {
    * Callback function triggered when the tooltip is pressed.
    */
   onPress: PropTypes.func,
+
+  /**
+   * The `id` of the tooltip button.
+   */
+  nativeID: PropTypes.string,
   tokens: getTokensPropType('Tooltip'),
   variant: variantProp.propType
 };