@telus-uds/components-base 1.94.0 → 1.96.0

package/lib/TabBar/TabBar.js

@@ -0,0 +1,133 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _TabBarItem = _interopRequireDefault(require("./TabBarItem"));
+var _ThemeProvider = require("../ThemeProvider");
+var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const selectTabBarContainerStyles = _ref => {
+  let {
+    paddingTop,
+    paddingBottom,
+    borderTopWidth,
+    borderTopColor,
+    backgroundColor
+  } = _ref;
+  return {
+    paddingTop,
+    paddingBottom,
+    borderTopWidth,
+    borderTopColor,
+    backgroundColor
+  };
+};
+const selectTabBarItemContainerStyles = _ref2 => {
+  let {
+    paddingLeft,
+    paddingRight,
+    gap
+  } = _ref2;
+  return {
+    paddingLeft,
+    paddingRight,
+    gap
+  };
+};
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+
+/**
+ * TabBar component renders a navigation bar with multiple TabBarItems.
+ * It allows users to switch between different views or sections.
+ *
+ * @component
+ * @example
+ * const items = [
+ *   { id: '1', label: 'Home', icon: <HomeIcon />, iconActive: <HomeActiveIcon /> },
+ *   { id: '2', label: 'Profile', icon: <ProfileIcon />, iconActive: <ProfileActiveIcon /> },
+ * ]
+ * return (
+ *   <TabBar
+ *     items={items}
+ *     initiallySelectedItem="1"
+ *     onChange={(itemId) => console.log(itemId)}
+ *   />
+ * )
+ */
+
+const TabBar = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+  let {
+    items = [],
+    initiallySelectedItem = '0',
+    onChange,
+    variant,
+    tokens,
+    ...rest
+  } = _ref3;
+  const [isSelected, setIsSelected] = _react.default.useState(initiallySelectedItem);
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('TabBar', tokens, variant);
+  const handlePress = itemId => {
+    setIsSelected(itemId);
+    onChange === null || onChange === void 0 ? void 0 : onChange(itemId);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    style: [styles.tabBar, selectTabBarContainerStyles(themeTokens)],
+    ...selectProps(rest),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: [styles.tabBarItem, selectTabBarItemContainerStyles(themeTokens)],
+      children: items.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabBarItem.default, {
+        label: item.label,
+        href: item.href,
+        isSelected: isSelected === item.id,
+        icon: item.icon,
+        iconActive: item.iconActive,
+        onPress: () => handlePress(item.id),
+        id: `tab-item-${index}`,
+        accessibilityRole: "tablist"
+      }, item.id))
+    })
+  });
+});
+TabBar.displayName = 'TabBar';
+TabBar.propTypes = {
+  ...selectedSystemPropTypes,
+  /** Array of TabBarItems to be displayed in TabBar */
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.string.isRequired,
+    icon: _propTypes.default.node,
+    iconActive: _propTypes.default.node,
+    label: _propTypes.default.string.isRequired,
+    href: _propTypes.default.string
+  })).isRequired,
+  /** Id of the initially selected item. */
+  initiallySelectedItem: _propTypes.default.number,
+  /** Callback function to handle item selection change. */
+  onChange: _propTypes.default.func,
+  /** Variant of TabBar for styling purposes. */
+  variant: _utils.variantProp.propType,
+  /** Tokens for theming and styling. */
+  tokens: (0, _utils.getTokensPropType)('TabBar')
+};
+const styles = _StyleSheet.default.create({
+  tabBar: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  tabBarItem: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '100%'
+  }
+});
+var _default = TabBar;
+exports.default = _default;

package/lib/TabBar/TabBarItem.js

@@ -0,0 +1,184 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _utils = require("../utils");
+var _ThemeProvider = require("../ThemeProvider");
+var _Typography = _interopRequireDefault(require("../Typography"));
+var _Spacer = _interopRequireDefault(require("../Spacer"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const selectTypographyStyles = (_ref, isSelected) => {
+  let {
+    fontWeight,
+    color,
+    lineHeight,
+    fontName,
+    activeColor
+  } = _ref;
+  return {
+    fontWeight,
+    color: isSelected ? activeColor : color,
+    lineHeight,
+    fontName
+  };
+};
+const selectIconContainerStyles = _ref2 => {
+  let {
+    paddingTop,
+    paddingBottom
+  } = _ref2;
+  return {
+    paddingTop,
+    paddingBottom,
+    alignItems: 'center'
+  };
+};
+const selectIconStyles = (_ref3, isSelected) => {
+  let {
+    iconSize,
+    iconColor,
+    activeColor
+  } = _ref3;
+  return {
+    size: iconSize,
+    color: isSelected ? activeColor : iconColor
+  };
+};
+const selectContainerStyles = _ref4 => {
+  let {
+    borderRadius,
+    backgroundColor
+  } = _ref4;
+  return {
+    borderRadius,
+    backgroundColor,
+    alignSelf: 'center',
+    alignItems: 'center'
+  };
+};
+const TabBarItem = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
+  let {
+    href,
+    variant,
+    tokens,
+    label,
+    isSelected,
+    id,
+    onPress,
+    icon: IconComponent,
+    iconActive: IconActiveComponent,
+    accessibilityRole = 'tab'
+  } = _ref5;
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('TabBarItem', tokens, variant);
+  const getPressableStyle = _ref6 => {
+    let {
+      pressed,
+      focused,
+      hovered
+    } = _ref6;
+    const resolvedTokens = (0, _utils.resolvePressableTokens)(getTokens, {
+      pressed,
+      focused,
+      hovered
+    }, {
+      isSelected
+    });
+    return {
+      ...resolvedTokens,
+      outline: 'none' // removes the default browser :focus outline
+    };
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+    ref: ref,
+    href: href,
+    nativeID: id,
+    onPress: onPress,
+    style: _ref7 => {
+      let {
+        pressed,
+        focused,
+        hovered
+      } = _ref7;
+      return [styles.flexContainer, getPressableStyle({
+        pressed,
+        focused,
+        hovered
+      })];
+    },
+    accessibilityRole: accessibilityRole,
+    testID: id,
+    children: pressableState => {
+      const resolvedTokens = getPressableStyle(pressableState);
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+        style: selectContainerStyles(resolvedTokens),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: [selectIconContainerStyles(resolvedTokens), styles.iconContainer],
+          children: isSelected ? IconActiveComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconActiveComponent, {
+            ...selectIconStyles(resolvedTokens, isSelected)
+          }) : IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
+            ...selectIconStyles(resolvedTokens)
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+          space: 1
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          variant: {
+            size: 'micro'
+          },
+          tokens: selectTypographyStyles(resolvedTokens, isSelected),
+          align: "center",
+          children: label
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+          space: 1
+        })]
+      });
+    }
+  });
+});
+TabBarItem.displayName = 'TabBarItem';
+TabBarItem.propTypes = {
+  /** The icon to be displayed when the item is not selected. */
+  icon: _propTypes.default.elementType,
+  /** The icon to be displayed when the item is selected. */
+  iconActive: _propTypes.default.elementType,
+  /** Tokens for theming and styling the TabBarItem. */
+  tokens: (0, _utils.getTokensPropType)('TabBarItem'),
+  /** Variant of the TabBarItem for styling purposes. */
+  variant: _utils.variantProp.propType,
+  /** Callback function to handle press events. */
+  onPress: _propTypes.default.func,
+  /** URL to navigate to when the item is pressed. */
+  href: _propTypes.default.string,
+  /** Indicates whether the item is selected. */
+  isSelected: _propTypes.default.bool,
+  /** Unique identifier for the item. */
+  id: _propTypes.default.string,
+  /** Label text for the item. */
+  label: _propTypes.default.string.isRequired,
+  /** Accessibility role for the item. */
+  accessibilityRole: _propTypes.default.string
+};
+const styles = _StyleSheet.default.create({
+  flexContainer: {
+    flex: 1,
+    alignItems: 'center'
+  },
+  iconContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    minWidth: 44,
+    minHeight: 40,
+    aspectRatio: 1.1
+  }
+});
+var _default = TabBarItem;
+exports.default = _default;

package/lib/TabBar/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _TabBar = _interopRequireDefault(require("./TabBar"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = _TabBar.default;
+exports.default = _default;

package/lib/TextInput/TextInputBase.js

@@ -48,7 +48,8 @@ const selectInputStyles = function (_ref, themeOptions, inactive, type) {
   // jump around if the border width changes (avoiding NaN and negative padding)
   const offsetBorder = value => typeof value === 'number' ? Math.max(0, value - borderWidth) : value;
   const textStyles = (0, _ThemeProvider.applyTextStyles)({
-    fontName,
+    fontName: isPassword ? undefined : fontName,
+    // In this case, we don't want to apply the fontName to the input if it's a password because Monotype don't have support for the masked characters in mobile.
     fontSize,
     lineHeight,
     fontWeight,

package/lib/Tooltip/getTooltipPosition.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-function normalizePosition(position) {
+function getAbsolutePosition(position) {
   const {
     left,
     right,
@@ -15,7 +15,7 @@ function normalizePosition(position) {
   } = position;
 
   // adjust the coordinates so that it fits within the window
-  const normalized = {
+  const finalPosition = {
     left: Math.max(0, left),
     right: Math.max(0, right),
     top: Math.max(0, top),
@@ -25,15 +25,14 @@ function normalizePosition(position) {
   const getAbsoluteDiff = (value1, value2) => Math.abs(Math.abs(value1) - Math.abs(value2));
 
   // adjust the width by whatever has been subtracted from left or right
-  normalized.width = width - Math.abs(getAbsoluteDiff(left, normalized.left) - getAbsoluteDiff(right, normalized.right));
-  if (normalized.top !== top) {
-    normalized.bottom += normalized.top - top;
+  finalPosition.width = width - Math.abs(getAbsoluteDiff(left, finalPosition.left) - getAbsoluteDiff(right, finalPosition.right));
+  if (finalPosition.top !== top) {
+    finalPosition.bottom += finalPosition.top - top;
   }
-  const isNormalized = normalized.right !== right || normalized.left !== left || normalized.top !== top;
   return {
-    ...normalized,
+    ...finalPosition,
     ...rest,
-    isNormalized
+    isNormalized: false
   };
 }
 function invertPosition(position) {
@@ -172,7 +171,7 @@ function getTooltipPosition(position, _ref2) {
 
   // prefer 'below' over 'above', since we can always expand the document downwards,
   // and 'above' might cause issues on small viewports with large tooltips
-  return normalizePosition(leastOverflowing.position === 'above' ? findRectByPosition('below', boundingRects) : leastOverflowing);
+  return getAbsolutePosition(leastOverflowing.position === 'above' ? findRectByPosition('below', boundingRects) : leastOverflowing);
 }
 var _default = getTooltipPosition;
 exports.default = _default;

package/lib/Typography/Typography.js

@@ -8,6 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../ThemeProvider/utils");
 var _utils2 = require("../utils");
@@ -45,9 +46,22 @@ const selectTextStyles = (_ref, themeOptions) => {
     gradient
   });
 };
+const HALF_FONT_SIZE = 2;
+const QUARTER_FONT_SIZE = 4;
+const selectMobileSubSupStyles = (_ref2, type) => {
+  let {
+    fontSize
+  } = _ref2;
+  return {
+    fontSize: fontSize / HALF_FONT_SIZE,
+    lineHeight: fontSize,
+    position: 'relative',
+    top: type === 'sub' ? fontSize / QUARTER_FONT_SIZE : -fontSize / QUARTER_FONT_SIZE
+  };
+};
 
 // General-purpose flexible theme-neutral base component for text
-const Typography = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const Typography = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     children,
     variant,
@@ -60,7 +74,7 @@ const Typography = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     dataSet,
     strikeThrough = false,
     ...rest
-  } = _ref2;
+  } = _ref3;
   const viewport = (0, _ViewportProvider.useViewport)();
   const {
     themeOptions
@@ -107,8 +121,8 @@ const Typography = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let textStyles;
   let mediaIds;
   if (enableMediaQueryStyleSheet) {
-    const transformedThemeTokens = Object.entries(themeTokens).reduce((acc, _ref3) => {
-      let [vp, viewportTokens] = _ref3;
+    const transformedThemeTokens = Object.entries(themeTokens).reduce((acc, _ref4) => {
+      let [vp, viewportTokens] = _ref4;
       acc[vp] = selectTextStyles({
         textAlign: align,
         textDecorationLine,
@@ -142,22 +156,31 @@ const Typography = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     ...selectContainerProps(rest)
   };
   const resetTagStyling = child => {
-    if (typeof child === 'object' && ((child === null || child === void 0 ? void 0 : child.type) === 'sub' || (child === null || child === void 0 ? void 0 : child.type) === 'sup')) {
-      var _child$props;
-      const childStyles = (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.style) || {};
-      const supFontSize = childStyles.fontSize ?? themeTokens.superScriptFontSize;
-      const sanitizedChild = /*#__PURE__*/_react.default.cloneElement(child, {
-        style: {
-          ...childStyles,
-          ...(supFontSize ? {
-            fontSize: supFontSize
-          } : {}),
-          lineHeight: 0
-        }
-      });
-      return sanitizedChild;
+    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')) {
+      return child;
     }
-    return child;
+    const childStyles = (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.style) || {};
+    const supFontSize = childStyles.fontSize ?? themeTokens.superScriptFontSize;
+    const isMobile = _Platform.default.OS === 'ios' || _Platform.default.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 defaultStyles = !isMobile && isSubSup ? {
+      fontSize: supFontSize,
+      lineHeight: 0
+    } : {};
+    const sanitizedChild = /*#__PURE__*/_react.default.cloneElement(isMobile && isSubSup ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+        style: [childStyles, mobileStyles],
+        children: child.props.children
+      })
+    }) : child, {
+      style: {
+        ...childStyles,
+        ...defaultStyles
+      }
+    });
+    return sanitizedChild;
   };
   const sanitizeChildren = () => {
     if (Array.isArray(children)) {

package/lib/index.js

@@ -19,6 +19,7 @@ var _exportNames = {
   CheckboxCard: true,
   CheckboxCardGroup: true,
   ColourToggle: true,
+  DownloadApp: true,
   Divider: true,
   ExpandCollapse: true,
   Accordion: true,
@@ -58,6 +59,7 @@ var _exportNames = {
   Status: true,
   StepTracker: true,
   Tabs: true,
+  TabBar: true,
   Tags: true,
   Timeline: true,
   Tooltip: true,
@@ -80,6 +82,7 @@ var _exportNames = {
   applyOuterBorder: true,
   applyTextStyles: true,
   applyShadowToken: true,
+  useResponsiveThemeTokens: true,
   Portal: true
 };
 Object.defineProperty(exports, "A11yInfoProvider", {
@@ -178,6 +181,12 @@ Object.defineProperty(exports, "Divider", {
     return _Divider.default;
   }
 });
+Object.defineProperty(exports, "DownloadApp", {
+  enumerable: true,
+  get: function () {
+    return _DownloadApp.default;
+  }
+});
 Object.defineProperty(exports, "ExpandCollapse", {
   enumerable: true,
   get: function () {
@@ -418,6 +427,12 @@ Object.defineProperty(exports, "StepTracker", {
     return _StepTracker.default;
   }
 });
+Object.defineProperty(exports, "TabBar", {
+  enumerable: true,
+  get: function () {
+    return _TabBar.default;
+  }
+});
 Object.defineProperty(exports, "Tabs", {
   enumerable: true,
   get: function () {
@@ -514,6 +529,12 @@ Object.defineProperty(exports, "useHydrationContext", {
     return _HydrationContext.useHydrationContext;
   }
 });
+Object.defineProperty(exports, "useResponsiveThemeTokens", {
+  enumerable: true,
+  get: function () {
+    return _ThemeProvider.useResponsiveThemeTokens;
+  }
+});
 Object.defineProperty(exports, "useSetTheme", {
   enumerable: true,
   get: function () {
@@ -593,6 +614,7 @@ Object.keys(_Checkbox).forEach(function (key) {
 var _CheckboxCard = _interopRequireDefault(require("./CheckboxCard"));
 var _CheckboxCardGroup = _interopRequireDefault(require("./CheckboxCardGroup"));
 var _ColourToggle = _interopRequireDefault(require("./ColourToggle"));
+var _DownloadApp = _interopRequireDefault(require("./DownloadApp"));
 var _Divider = _interopRequireDefault(require("./Divider"));
 var _ExpandCollapse = _interopRequireWildcard(require("./ExpandCollapse"));
 var _Feedback = _interopRequireDefault(require("./Feedback"));
@@ -696,6 +718,7 @@ Object.keys(_StackView).forEach(function (key) {
 var _Status = _interopRequireDefault(require("./Status"));
 var _StepTracker = _interopRequireDefault(require("./StepTracker"));
 var _Tabs = _interopRequireDefault(require("./Tabs"));
+var _TabBar = _interopRequireDefault(require("./TabBar"));
 var _Tags = _interopRequireDefault(require("./Tags"));
 var _TextInput = require("./TextInput");
 Object.keys(_TextInput).forEach(function (key) {

package/lib-module/Autocomplete/Autocomplete.js

@@ -106,6 +106,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     validation,
     value,
     helpText = '',
+    loadingLabel,
     ...rest
   } = _ref2;
   const {
@@ -138,6 +139,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
 
   // When it's nested, selected value
   const [nestedSelectedValue, setNestedSelectedValue] = React.useState(null);
+  const [isInputVisible, setIsInputVisible] = React.useState(true);
   const {
     supportsProps,
     ...selectedProps
@@ -263,6 +265,27 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       }));
     }
   }, [nestedSelectedValue, items]);
+  React.useEffect(() => {
+    if (Platform.OS === 'ios' || Platform.OS === 'android') {
+      return undefined;
+    }
+    const observer = new IntersectionObserver(entries => {
+      const [entry] = entries;
+      setIsInputVisible(entry.isIntersecting);
+      if (!entry.isIntersecting) {
+        setIsExpanded(false);
+      }
+    });
+    const currentInputRef = inputRef.current;
+    if (currentInputRef) {
+      observer.observe(currentInputRef);
+    }
+    return () => {
+      if (currentInputRef) {
+        observer.unobserve(currentInputRef);
+      }
+    };
+  }, [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))) {
@@ -319,7 +342,19 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
           readOnly: readOnly,
           ref: inputRef,
           ...(Platform.OS !== 'web' ? {
-            onLayout: event => setSourceLayout(event.nativeEvent.layout)
+            onLayout: event => {
+              setSourceLayout(event.nativeEvent.layout);
+              const {
+                y,
+                height
+              } = event.nativeEvent.layout;
+              if (y >= 0 && height > 0) {
+                setIsInputVisible(true);
+              } else {
+                setIsInputVisible(false);
+                setIsExpanded(false);
+              }
+            }
           } : {}),
           tokens: inputTokens,
           validation: validation,
@@ -332,7 +367,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
           })
         });
       }
-    }), (isExpanded || hintExpansionEnabled) && /*#__PURE__*/_jsxs(_Fragment, {
+    }), (isExpanded || hintExpansionEnabled) && isInputVisible && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(Listbox.Overlay, {
         overlaidPosition: overlaidPosition,
         isReady: isReady,
@@ -341,7 +376,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
         onLayout: handleMeasure,
         ref: openOverlayRef,
         children: isLoading ? /*#__PURE__*/_jsx(Loading, {
-          label: getCopy('loading')
+          label: loadingLabel ?? getCopy('loading')
         }) : /*#__PURE__*/_jsx(Suggestions, {
           hasResults: getCopy('hasResults'),
           id: "autocomplete",

package/lib-module/Card/CardBase.js

@@ -24,6 +24,7 @@ const selectStyles = _ref => {
     paddingTop,
     minWidth,
     shadow,
+    backgroundGradient,
     gradient
   } = _ref;
   return {
@@ -43,6 +44,9 @@ const selectStyles = _ref => {
       backgroundOrigin: `border-box`,
       boxShadow: `inset 0 1000px white`,
       border: `${borderWidth}px solid transparent`
+    } : {}),
+    ...(backgroundGradient && Platform.OS === 'web' ? {
+      backgroundImage: `linear-gradient(${backgroundGradient.angle}deg, ${backgroundGradient.stops[0].color}, ${backgroundGradient.stops[1].color})`
     } : {})
   };
 };