@telus-uds/components-base 3.7.0 → 3.8.0

package/lib/cjs/Card/Card.js

@@ -133,6 +133,7 @@ const Card = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   const selected = interactiveCard?.variant?.selected;
   const inactive = interactiveCard?.variant?.inactive;
   const selectionType = interactiveCard?.selectionType;
+  const isControl = interactiveCard?.variant?.isControl === true;
   const getThemeTokens = (0, _ThemeProvider.useThemeTokensCallback)('Card', interactiveCard?.tokens, {
     interactive: true,
     ...(interactiveCard?.variant || {})
@@ -200,6 +201,9 @@ const Card = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     cardStyles = themeTokens;
   }
   const renderInputPerSelectionType = props => {
+    if (!isControl) {
+      return null;
+    }
     switch (selectionType) {
       case SelectionType.Checkbox:
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
@@ -227,17 +231,8 @@ const Card = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         return null;
     }
   };
-  const renderNoSelectionView = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-    style: {
-      paddingTop,
-      paddingBottom,
-      paddingLeft,
-      paddingRight
-    },
-    children: children
-  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.default, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CardBase.default, {
       ref: ref,
       tokens: interactiveCard?.body ? restOfTokens : cardStyles,
       backgroundImage: backgroundImage,
@@ -245,41 +240,39 @@ const Card = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         media: mediaIds
       },
       ...selectProps(rest),
-      children: interactiveCard?.body ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PressableCardBase.default, {
-          ref: ref,
-          tokens: getThemeTokens,
-          dataSet: dataSet,
-          onPress: onPress,
-          href: interactiveCard?.href,
-          hrefAttrs: interactiveCard?.hrefAttrs,
-          ...selectProps(rest),
-          children: cardState => {
-            const {
-              iconColor: checkColor,
-              inputBackgroundColor: boxBackgroundColor,
-              iconBackgroundColor: checkBackgroundColor
-            } = getThemeTokens({
-              ...cardState,
-              selected,
-              interactive: true,
-              isControl: true
-            }, interactiveCard?.tokens);
-            return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-              children: [renderInputPerSelectionType(getInputProps({
-                id,
-                checkColor,
-                boxBackgroundColor,
-                checkBackgroundColor,
-                isControlled: true,
-                isChecked: selected || cardState?.hover,
-                isInactive: inactive,
-                onPress
-              })), typeof interactiveCard?.body === 'function' ? interactiveCard.body(cardState) : interactiveCard.body]
-            });
-          }
-        }), children && selectionType !== SelectionType.None ? renderNoSelectionView() : null]
-      }) : children
+      children: [interactiveCard?.body && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PressableCardBase.default, {
+        ref: ref,
+        tokens: getThemeTokens,
+        dataSet: dataSet,
+        onPress: onPress,
+        href: interactiveCard?.href,
+        hrefAttrs: interactiveCard?.hrefAttrs,
+        ...selectProps(rest),
+        children: cardState => {
+          const {
+            iconColor: checkColor,
+            inputBackgroundColor: boxBackgroundColor,
+            iconBackgroundColor: checkBackgroundColor
+          } = getThemeTokens({
+            ...cardState,
+            selected,
+            interactive: true,
+            isControl
+          }, interactiveCard?.tokens);
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [renderInputPerSelectionType(getInputProps({
+              id,
+              checkColor,
+              boxBackgroundColor,
+              checkBackgroundColor,
+              isControlled: true,
+              isChecked: selected || cardState?.hover,
+              isInactive: inactive,
+              onPress
+            })), typeof interactiveCard?.body === 'function' ? interactiveCard.body(cardState) : interactiveCard.body]
+          });
+        }
+      }), children]
     })
   });
 });

package/lib/cjs/Card/PressableCardBase.js

@@ -133,7 +133,10 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
           setFocused(false);
           setPressed(false);
         },
-        style: staticStyles.container,
+        style: {
+          ...staticStyles.container,
+          textDecoration: 'none'
+        },
         ...(hrefAttrs || {}),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.default, {
           tokens: getCardTokens({

package/lib/cjs/ExpandCollapseMini/ExpandCollapseMiniControl.js

@@ -45,7 +45,7 @@ const ExpandCollapseMiniControl = /*#__PURE__*/_react.default.forwardRef((_ref,
   const isFocusVisible = _Platform.default.OS === 'web' ? focus && !pressed && !hover : expanded;
   const linkTokens = (0, _ThemeProvider.useThemeTokens)('Link', {}, {
     ...variant,
-    quiet: expanded ?? quiet
+    quiet
   }, {
     focus: isFocusVisible,
     hover,

package/lib/cjs/List/ListItemMark.js

@@ -9,6 +9,7 @@ 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 _Icon = _interopRequireDefault(require("../Icon"));
+var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const tokenTypes = exports.tokenTypes = {
@@ -60,6 +61,7 @@ const selectBulletContainerStyles = _ref4 => {
     alignItems: itemBulletContainerAlign
   };
 };
+const getIconColorVariants = iconVariants => iconVariants?.filter(variant => variant[0] === 'color').map(variant => variant[1]);
 
 /**
  * Subcomponent used within ListItem and similar components for rendering bullets or icons
@@ -78,6 +80,10 @@ const ListItemMark = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   const themeTokens = typeof tokens === 'function' ? tokens() : tokens;
   const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens);
   const bulletContainerStyles = selectBulletContainerStyles(themeTokens);
+
+  // TODO: Remove it when iconColor custom colors are deprecated.
+  const iconVariants = (0, _utils.useVariants)('Icon');
+  const iconColorVariants = getIconColorVariants(iconVariants);
   if (icon) {
     const iconTokens = selectItemIconTokens(themeTokens);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
@@ -85,10 +91,15 @@ const ListItemMark = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
         icon: icon,
         tokens: {
-          size: iconSize ?? iconTokens.size
+          size: iconSize ?? iconTokens.size,
+          ...((iconColor && !iconColorVariants?.includes(iconColor) || !iconColor) && {
+            color: iconColor && !iconColorVariants?.includes(iconColor) ? iconColor : iconTokens.color
+          })
         },
         variant: {
-          color: iconColor ?? iconTokens.color
+          ...(iconColorVariants?.includes(iconColor) && {
+            color: iconColor
+          })
         }
       })
     });

package/lib/cjs/MultiSelectFilter/ModalOverlay.js

@@ -16,6 +16,7 @@ var _ThemeProvider = require("../ThemeProvider");
 var _dictionary = _interopRequireDefault(require("./dictionary"));
 var _Card = _interopRequireDefault(require("../Card"));
 var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _useDetectOutsideClick = _interopRequireDefault(require("../utils/useDetectOutsideClick"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const staticStyles = _StyleSheet.default.create({
@@ -96,13 +97,16 @@ const ModalOverlay = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     tokens,
     copy,
     onClose,
-    enableFullscreen = false
+    enableFullscreen = false,
+    dismissWhenPressedOutside = false
   } = _ref2;
   const viewport = (0, _ViewportProvider.useViewport)();
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Modal', tokens, variant, {
     viewport,
     maxWidth: false
   });
+  const containerRef = _react.default.useRef(ref || null);
+  (0, _useDetectOutsideClick.default)(containerRef, onClose, dismissWhenPressedOutside);
   const containerWidthHeight = {
     minWidth: tokens.maxWidth ? maxWidthSize : minWidth,
     minHeight: maxHeight ? maxHeightSize : minHeight,
@@ -119,7 +123,7 @@ const ModalOverlay = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   const closeLabel = getCopy('closeButton');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_portal.Portal, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-      ref: ref,
+      ref: containerRef,
       onLayout: onLayout,
       style: [overlaidPosition, containerWidthHeight, staticStyles.positioner, !isReady && staticStyles.hidden, selectContainerStyle(enableFullscreen, themeTokens)],
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.default, {
@@ -157,6 +161,11 @@ ModalOverlay.propTypes = {
   tokens: (0, _utils.getTokensPropType)('Modal'),
   copy: _utils.copyPropTypes,
   onClose: _propTypes.default.func,
-  enableFullscreen: _propTypes.default.bool
+  enableFullscreen: _propTypes.default.bool,
+  /**
+   * If true, clicking outside the content will trigger the a close callback, dismissing the content.
+   * @deprecated This parameter will be removed in the next major release; detection will be always enabled by default.
+   */
+  dismissWhenPressedOutside: _propTypes.default.bool
 };
 var _default = exports.default = ModalOverlay;

package/lib/cjs/MultiSelectFilter/MultiSelectFilter.js

@@ -92,6 +92,7 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
     inactive = false,
     rowLimit = 12,
     dictionary = _dictionary.default,
+    dismissWhenPressedOutside = false,
     ...rest
   } = _ref3;
   const viewport = (0, _ViewportProvider.useViewport)();
@@ -403,8 +404,9 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
         })]
       })
     }), isOpen && viewport !== 'xs' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalOverlay.default, {
-      overlaidPosition: overlaidPosition,
+      dismissWhenPressedOutside: dismissWhenPressedOutside,
       onClose: onClose,
+      overlaidPosition: overlaidPosition,
       maxHeight: items.length > MAX_ITEMS_THRESHOLD ? true : maxHeight,
       maxHeightSize: maxHeightSize,
       maxWidthSize: maxWidthSize,
@@ -548,6 +550,11 @@ MultiSelectFilter.propTypes = {
    * Sets the maximum number of items in one column. If number of items are more
    * than the `rowLimit`, they will be rendered in 2 columns.
    */
-  rowLimit: _propTypes.default.number
+  rowLimit: _propTypes.default.number,
+  /**
+   * If true, clicking outside the content will trigger the a close callback, dismissing the content.
+   * @deprecated This parameter will be removed in the next major release; detection will be always enabled by default.
+   */
+  dismissWhenPressedOutside: _propTypes.default.bool
 };
 var _default = exports.default = MultiSelectFilter;

package/lib/cjs/utils/index.js

@@ -20,7 +20,8 @@ var _exportNames = {
   transformGradient: true,
   convertFromMegaByteToByte: true,
   formatImageSource: true,
-  getSpacingScale: true
+  getSpacingScale: true,
+  useVariants: true
 };
 Object.defineProperty(exports, "BaseView", {
   enumerable: true,
@@ -118,6 +119,12 @@ Object.defineProperty(exports, "useUniqueId", {
     return _useUniqueId.default;
   }
 });
+Object.defineProperty(exports, "useVariants", {
+  enumerable: true,
+  get: function () {
+    return _useVariants.default;
+  }
+});
 Object.defineProperty(exports, "withLinkRouter", {
   enumerable: true,
   get: function () {
@@ -248,6 +255,7 @@ var _transformGradient = require("./transformGradient");
 var _convertFromMegaByteToByte = _interopRequireDefault(require("./convertFromMegaByteToByte"));
 var _formatImageSource = _interopRequireDefault(require("./formatImageSource"));
 var _getSpacingScale = _interopRequireDefault(require("./getSpacingScale"));
+var _useVariants = _interopRequireDefault(require("./useVariants"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/cjs/utils/useDetectOutsideClick.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Hook to detect clicks outside of a ref, only on web.
+ *
+ * @param {React.RefObject<HTMLElement>} ref
+ *   Reference to the element you want to “protect.”
+ * @param {() => void} onOutside
+ *   Callback invoked when a click occurs outside that ref.
+ * @param {boolean} [enabled=true]
+ *   Flag to enable or disable the outside-click detection at runtime.
+ *   @deprecated Will be removed in next major release; detection will always be enabled.
+ */
+
+function useDetectOutsideClick(ref, onOutside) {
+  let enabled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  _react.default.useEffect(() => {
+    if (!enabled || _Platform.default.OS !== 'web') {
+      return undefined;
+    }
+    const handleClickOutside = e => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        onOutside();
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [ref, onOutside, enabled]);
+}
+var _default = exports.default = useDetectOutsideClick;

package/lib/cjs/utils/useVariants.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _ThemeProvider = require("../ThemeProvider");
+/**
+ * Generates a label string for a variant based on the provided key and value.
+ *
+ * @param {string} key - The name of the variant.
+ * @param {*} value - The value of the variant. If it's a string, it will be appended to the key.
+ * @returns {string} The formatted variant label (e.g., "color: red" or "size").
+ */
+const getVariantLabel = (key, value) => `${key}${typeof value === 'string' ? `: ${value}` : ''}`;
+
+/**
+ * Retrieves the variant options for a given component from the theme.
+ *
+ * @param {string} componentName - The name of the component to get variants for.
+ * @returns {Array<Array>} An array of variant tuples. Each tuple contains:
+ *   - {string|undefined} The variant key (e.g., 'size', 'color', or undefined for default).
+ *   - {string|undefined} The variant value (e.g., 'small', 'primary', or undefined for default).
+ *   - {string} The human-readable label for the variant.
+ *   Returns [['default', {}]] if no componentName is provided.
+ * @throws {Error} If the theme does not define appearances for the given component.
+ */
+const useVariants = componentName => {
+  const theme = (0, _ThemeProvider.useTheme)();
+  if (!componentName) return [['default', {}]];
+  const {
+    appearances
+  } = (0, _ThemeProvider.getComponentTheme)(theme, componentName);
+  if (!appearances) {
+    throw new Error(`Theme ${theme.metadata?.name} does not have any appearances set for ${componentName}`);
+  }
+  const variants = Object.entries(appearances).reduce((pairs, _ref) => {
+    let [key, {
+      values,
+      type
+    } = {}] = _ref;
+    return type === 'variant' ? [...pairs, ...values.map(value => [key, value, getVariantLabel(key, value)])] : pairs;
+  }, [[undefined, undefined, 'default style']]);
+  return variants;
+};
+var _default = exports.default = useVariants;

package/lib/esm/ActivityIndicator/FullScreenIndicator.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Platform from "react-native-web/dist/exports/Platform";
+import PropTypes from 'prop-types';
+import StackView from '../StackView';
+import Typography from '../Typography';
+import RenderActivityIndicator from './RenderActivityIndicator';
+import { BACKDROP_Z_INDEX, SPACE_WITH_LABEL, SPACE_WITHOUT_LABEL } from './shared';
+import { activityIndicatorCommonProps } from './sharedProptypes';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const FullScreenIndicator = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    variantProps,
+    label,
+    labelPosition,
+    labelMapping,
+    backgroundColor,
+    showLabel
+  } = _ref;
+  return /*#__PURE__*/_jsx(View, {
+    style: [staticStyles.fullScreenOverlay, {
+      backgroundColor
+    }],
+    children: /*#__PURE__*/_jsxs(StackView, {
+      space: showLabel ? SPACE_WITH_LABEL : SPACE_WITHOUT_LABEL,
+      tokens: {
+        alignItems: 'center'
+      },
+      direction: labelMapping[labelPosition],
+      children: [/*#__PURE__*/_jsx(RenderActivityIndicator, {
+        ...variantProps,
+        ref: ref,
+        label: label
+      }), showLabel && /*#__PURE__*/_jsx(Typography, {
+        children: label
+      })]
+    })
+  });
+});
+FullScreenIndicator.displayName = 'FullScreenIndicator';
+const staticStyles = StyleSheet.create({
+  fullScreenOverlay: {
+    ...Platform.select({
+      web: {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100vw',
+        height: '100vh',
+        zIndex: BACKDROP_Z_INDEX,
+        justifyContent: 'center',
+        alignItems: 'center'
+      },
+      default: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        justifyContent: 'center',
+        alignItems: 'center',
+        ...(Platform.OS === 'android' ? {
+          elevation: 5
+        } : {
+          zIndex: BACKDROP_Z_INDEX
+        })
+      }
+    })
+  }
+});
+FullScreenIndicator.propTypes = {
+  /**
+   * Shared props
+   * */
+  ...activityIndicatorCommonProps,
+  /**
+   * Background color for overlay
+   * */
+  backgroundColor: PropTypes.string.isRequired
+};
+export default FullScreenIndicator;

package/lib/esm/ActivityIndicator/InlineIndicator.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Platform from "react-native-web/dist/exports/Platform";
+import PropTypes from 'prop-types';
+import StackView from '../StackView';
+import Typography from '../Typography';
+import RenderActivityIndicator from './RenderActivityIndicator';
+import { activityIndicatorCommonProps } from './sharedProptypes';
+import { SPACE_WITH_LABEL, SPACE_WITHOUT_LABEL } from './shared';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const InlineIndicator = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    variantProps,
+    label,
+    labelPosition,
+    labelMapping,
+    showLabel
+  } = _ref;
+  return /*#__PURE__*/_jsx(View, {
+    style: staticStyles.container,
+    children: /*#__PURE__*/_jsxs(StackView, {
+      space: showLabel ? SPACE_WITH_LABEL : SPACE_WITHOUT_LABEL,
+      direction: labelMapping[labelPosition],
+      tokens: {
+        alignItems: 'center'
+      },
+      children: [/*#__PURE__*/_jsx(RenderActivityIndicator, {
+        ...variantProps,
+        ref: ref,
+        label: label
+      }), showLabel && /*#__PURE__*/_jsx(Typography, {
+        children: label
+      })]
+    })
+  });
+});
+InlineIndicator.displayName = 'InlineIndicator';
+const staticStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    display: Platform.OS === 'web' ? 'inline-flex' : 'flex',
+    alignSelf: 'flex-start'
+  }
+});
+InlineIndicator.propTypes = {
+  /**
+   * Shared props
+   * */
+  ...activityIndicatorCommonProps,
+  /**
+   * Whether the indicator sits inline with text/other elements
+   * */
+  inline: PropTypes.bool
+};
+export default InlineIndicator;

package/lib/esm/ActivityIndicator/OverlayIndicator.js

@@ -0,0 +1,149 @@
+import React from 'react';
+import View from "react-native-web/dist/exports/View";
+import Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import PropTypes from 'prop-types';
+import StackView from '../StackView';
+import Typography from '../Typography';
+import RenderActivityIndicator from './RenderActivityIndicator';
+import { BACKDROP_Z_INDEX, BACKDROP_OPACITY, SPACE_WITH_LABEL, SPACE_WITHOUT_LABEL } from './shared';
+import { activityIndicatorCommonProps } from './sharedProptypes';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const recursiveMap = (nodeChildren, fn) => React.Children.map(nodeChildren, child => {
+  if (! /*#__PURE__*/React.isValidElement(child)) return child;
+  if (child.props?.children) {
+    return fn(/*#__PURE__*/React.cloneElement(child, {
+      children: recursiveMap(child.props.children, fn)
+    }));
+  }
+  return fn(child);
+});
+const OverlayIndicator = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    variantProps,
+    label,
+    labelPosition,
+    labelMapping,
+    children,
+    inline,
+    showLabel,
+    isActive = true
+  } = _ref;
+  const safeChildren = Platform.OS === 'web' && isActive ? recursiveMap(children, c => /*#__PURE__*/React.isValidElement(c) ? /*#__PURE__*/React.cloneElement(c, {
+    role: 'presentation'
+  }) : c) : children;
+
+  // inline + children
+  if (inline && children) {
+    return /*#__PURE__*/_jsxs(View, {
+      style: [staticStyles.container, Platform.OS === 'web' && staticStyles.inlineContainer],
+      children: [/*#__PURE__*/_jsx(View, {
+        style: staticStyles.backdropContainer,
+        children: safeChildren
+      }), /*#__PURE__*/_jsx(View, {
+        style: staticStyles.buttonOverlaySpinner,
+        children: /*#__PURE__*/_jsx(RenderActivityIndicator, {
+          ...variantProps,
+          ref: ref,
+          label: label
+        })
+      })]
+    });
+  }
+
+  // overlay
+  return /*#__PURE__*/_jsxs(View, {
+    style: staticStyles.container,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: staticStyles.backdropContainer,
+      children: safeChildren
+    }), /*#__PURE__*/_jsx(View, {
+      style: [staticStyles.overlayContainer, Platform.OS === 'web' && staticStyles.webOverlayContainer],
+      children: /*#__PURE__*/_jsxs(StackView, {
+        space: showLabel ? SPACE_WITH_LABEL : SPACE_WITHOUT_LABEL,
+        tokens: {
+          alignItems: 'center'
+        },
+        direction: labelMapping[labelPosition],
+        children: [/*#__PURE__*/_jsx(RenderActivityIndicator, {
+          ...variantProps,
+          ref: ref,
+          label: label
+        }), showLabel && /*#__PURE__*/_jsx(Typography, {
+          children: label
+        })]
+      })
+    })]
+  });
+});
+OverlayIndicator.displayName = 'OverlayIndicator';
+const staticStyles = StyleSheet.create({
+  container: {
+    position: 'relative'
+  },
+  inlineContainer: {
+    display: 'inline-flex'
+  },
+  backdropContainer: {
+    opacity: BACKDROP_OPACITY
+  },
+  overlayContainer: {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    ...Platform.select({
+      ios: {
+        zIndex: BACKDROP_Z_INDEX
+      },
+      android: {
+        elevation: 5
+      }
+    })
+  },
+  webOverlayContainer: {
+    transform: [{
+      translateX: '-50%'
+    }, {
+      translateY: '-50%'
+    }],
+    zIndex: BACKDROP_Z_INDEX
+  },
+  buttonOverlaySpinner: {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    ...Platform.select({
+      web: {
+        transform: 'translate(-50%, -50%)',
+        zIndex: BACKDROP_Z_INDEX
+      },
+      default: {
+        transform: [{
+          translateX: -0.5
+        }, {
+          translateY: -0.5
+        }],
+        zIndex: BACKDROP_Z_INDEX
+      }
+    })
+  }
+});
+OverlayIndicator.propTypes = {
+  /**
+   * Shared props
+   * */
+  ...activityIndicatorCommonProps,
+  /**
+   * Background color for overlay
+   * */
+  inline: PropTypes.bool,
+  /**
+   * Children on which the overlay is drawn
+   * */
+  children: PropTypes.node,
+  /**
+   * Controls whether the overlay is active and should apply the presentation role
+   * */
+  isActive: PropTypes.bool
+};
+export default OverlayIndicator;