@telus-uds/components-base 3.7.1 → 3.9.0

package/CHANGELOG.md

@@ -1,12 +1,44 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Mon, 05 May 2025 21:28:44 GMT and should not be manually modified.
+This log was last generated on Tue, 10 Jun 2025 20:18:03 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.9.0
+
+Tue, 10 Jun 2025 20:18:03 GMT
+
+### Minor changes
+
+- `ToggleSwitch`: update UI for mobile devices (guillermo.peitzner@telus.com)
+- `MultiSelectFilter`: preservation of original case (uppercase/lowercase) for label when using custom dictionary prop enabled" (35577399+JoshHC@users.noreply.github.com)
+- Bump @telus-uds/system-theme-tokens to v4.7.0
+
+### Patches
+
+- `MultiSelectFilter`: add containerBorderColor token (sergio.ramirez@telus.com)
+- `Validator`: concatenation and 6-digit limit bugs fixed (35577399+JoshHC@users.noreply.github.com)
+
+## 3.8.0
+
+Fri, 23 May 2025 15:15:58 GMT
+
+### Minor changes
+
+- `ActivityIndicator`: new `Spinner` functionalities added because it will be deprecated soon (35577399+JoshHC@users.noreply.github.com)
+- `MultiSelectFilter`: close the overlay box when we click outside (sergio.ramirez@telus.com)
+- `Notification`: feature variant added for allium, koodo and pm (35577399+JoshHC@users.noreply.github.com)
+- Bump @telus-uds/system-theme-tokens to v4.6.0
+
+### Patches
+
+- `List`: fix itemIconColor token override (guillermo.peitzner@telus.com)
+- `ExpandCollapseMini`: quiet variant fixed (35577399+JoshHC@users.noreply.github.com)
+- `Card`: The inability to activate radio selection in `InteractiveCard` has been fixed (35577399+JoshHC@users.noreply.github.com)
+
 ## 3.7.1
 
-Mon, 05 May 2025 21:28:44 GMT
+Mon, 05 May 2025 21:30:13 GMT
 
 ### Patches
 

package/lib/cjs/ActivityIndicator/FullScreenIndicator.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+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 _StackView = _interopRequireDefault(require("../StackView"));
+var _Typography = _interopRequireDefault(require("../Typography"));
+var _RenderActivityIndicator = _interopRequireDefault(require("./RenderActivityIndicator"));
+var _shared = require("./shared");
+var _sharedProptypes = require("./sharedProptypes");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const FullScreenIndicator = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    variantProps,
+    label,
+    labelPosition,
+    labelMapping,
+    backgroundColor,
+    showLabel
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: [staticStyles.fullScreenOverlay, {
+      backgroundColor
+    }],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+      space: showLabel ? _shared.SPACE_WITH_LABEL : _shared.SPACE_WITHOUT_LABEL,
+      tokens: {
+        alignItems: 'center'
+      },
+      direction: labelMapping[labelPosition],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderActivityIndicator.default, {
+        ...variantProps,
+        ref: ref,
+        label: label
+      }), showLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        children: label
+      })]
+    })
+  });
+});
+FullScreenIndicator.displayName = 'FullScreenIndicator';
+const staticStyles = _StyleSheet.default.create({
+  fullScreenOverlay: {
+    ..._Platform.default.select({
+      web: {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100vw',
+        height: '100vh',
+        zIndex: _shared.BACKDROP_Z_INDEX,
+        justifyContent: 'center',
+        alignItems: 'center'
+      },
+      default: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        justifyContent: 'center',
+        alignItems: 'center',
+        ...(_Platform.default.OS === 'android' ? {
+          elevation: 5
+        } : {
+          zIndex: _shared.BACKDROP_Z_INDEX
+        })
+      }
+    })
+  }
+});
+FullScreenIndicator.propTypes = {
+  /**
+   * Shared props
+   * */
+  ..._sharedProptypes.activityIndicatorCommonProps,
+  /**
+   * Background color for overlay
+   * */
+  backgroundColor: _propTypes.default.string.isRequired
+};
+var _default = exports.default = FullScreenIndicator;

package/lib/cjs/ActivityIndicator/InlineIndicator.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+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 _StackView = _interopRequireDefault(require("../StackView"));
+var _Typography = _interopRequireDefault(require("../Typography"));
+var _RenderActivityIndicator = _interopRequireDefault(require("./RenderActivityIndicator"));
+var _sharedProptypes = require("./sharedProptypes");
+var _shared = require("./shared");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const InlineIndicator = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    variantProps,
+    label,
+    labelPosition,
+    labelMapping,
+    showLabel
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: staticStyles.container,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+      space: showLabel ? _shared.SPACE_WITH_LABEL : _shared.SPACE_WITHOUT_LABEL,
+      direction: labelMapping[labelPosition],
+      tokens: {
+        alignItems: 'center'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderActivityIndicator.default, {
+        ...variantProps,
+        ref: ref,
+        label: label
+      }), showLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        children: label
+      })]
+    })
+  });
+});
+InlineIndicator.displayName = 'InlineIndicator';
+const staticStyles = _StyleSheet.default.create({
+  container: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    display: _Platform.default.OS === 'web' ? 'inline-flex' : 'flex',
+    alignSelf: 'flex-start'
+  }
+});
+InlineIndicator.propTypes = {
+  /**
+   * Shared props
+   * */
+  ..._sharedProptypes.activityIndicatorCommonProps,
+  /**
+   * Whether the indicator sits inline with text/other elements
+   * */
+  inline: _propTypes.default.bool
+};
+var _default = exports.default = InlineIndicator;

package/lib/cjs/ActivityIndicator/OverlayIndicator.js

@@ -0,0 +1,156 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _StackView = _interopRequireDefault(require("../StackView"));
+var _Typography = _interopRequireDefault(require("../Typography"));
+var _RenderActivityIndicator = _interopRequireDefault(require("./RenderActivityIndicator"));
+var _shared = require("./shared");
+var _sharedProptypes = require("./sharedProptypes");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const recursiveMap = (nodeChildren, fn) => _react.default.Children.map(nodeChildren, child => {
+  if (! /*#__PURE__*/_react.default.isValidElement(child)) return child;
+  if (child.props?.children) {
+    return fn(/*#__PURE__*/_react.default.cloneElement(child, {
+      children: recursiveMap(child.props.children, fn)
+    }));
+  }
+  return fn(child);
+});
+const OverlayIndicator = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    variantProps,
+    label,
+    labelPosition,
+    labelMapping,
+    children,
+    inline,
+    showLabel,
+    isActive = true
+  } = _ref;
+  const safeChildren = _Platform.default.OS === 'web' && isActive ? recursiveMap(children, c => /*#__PURE__*/_react.default.isValidElement(c) ? /*#__PURE__*/_react.default.cloneElement(c, {
+    role: 'presentation'
+  }) : c) : children;
+
+  // inline + children
+  if (inline && children) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      style: [staticStyles.container, _Platform.default.OS === 'web' && staticStyles.inlineContainer],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: staticStyles.backdropContainer,
+        children: safeChildren
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: staticStyles.buttonOverlaySpinner,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderActivityIndicator.default, {
+          ...variantProps,
+          ref: ref,
+          label: label
+        })
+      })]
+    });
+  }
+
+  // overlay
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    style: staticStyles.container,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: staticStyles.backdropContainer,
+      children: safeChildren
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: [staticStyles.overlayContainer, _Platform.default.OS === 'web' && staticStyles.webOverlayContainer],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+        space: showLabel ? _shared.SPACE_WITH_LABEL : _shared.SPACE_WITHOUT_LABEL,
+        tokens: {
+          alignItems: 'center'
+        },
+        direction: labelMapping[labelPosition],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderActivityIndicator.default, {
+          ...variantProps,
+          ref: ref,
+          label: label
+        }), showLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          children: label
+        })]
+      })
+    })]
+  });
+});
+OverlayIndicator.displayName = 'OverlayIndicator';
+const staticStyles = _StyleSheet.default.create({
+  container: {
+    position: 'relative'
+  },
+  inlineContainer: {
+    display: 'inline-flex'
+  },
+  backdropContainer: {
+    opacity: _shared.BACKDROP_OPACITY
+  },
+  overlayContainer: {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    ..._Platform.default.select({
+      ios: {
+        zIndex: _shared.BACKDROP_Z_INDEX
+      },
+      android: {
+        elevation: 5
+      }
+    })
+  },
+  webOverlayContainer: {
+    transform: [{
+      translateX: '-50%'
+    }, {
+      translateY: '-50%'
+    }],
+    zIndex: _shared.BACKDROP_Z_INDEX
+  },
+  buttonOverlaySpinner: {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    ..._Platform.default.select({
+      web: {
+        transform: 'translate(-50%, -50%)',
+        zIndex: _shared.BACKDROP_Z_INDEX
+      },
+      default: {
+        transform: [{
+          translateX: -0.5
+        }, {
+          translateY: -0.5
+        }],
+        zIndex: _shared.BACKDROP_Z_INDEX
+      }
+    })
+  }
+});
+OverlayIndicator.propTypes = {
+  /**
+   * Shared props
+   * */
+  ..._sharedProptypes.activityIndicatorCommonProps,
+  /**
+   * Background color for overlay
+   * */
+  inline: _propTypes.default.bool,
+  /**
+   * Children on which the overlay is drawn
+   * */
+  children: _propTypes.default.node,
+  /**
+   * Controls whether the overlay is active and should apply the presentation role
+   * */
+  isActive: _propTypes.default.bool
+};
+var _default = exports.default = OverlayIndicator;

package/lib/cjs/ActivityIndicator/RenderActivityIndicator.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Spinner = _interopRequireDefault(require("./Spinner"));
+var _Dots = _interopRequireDefault(require("./Dots"));
+var _shared = require("./shared");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Return <Dots/> or <Spinner/> based on `variant?.dots`.
+ * Reused in all the variants of the component.
+ */const RenderActivityIndicator = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    variant = {},
+    dotSize,
+    size,
+    color,
+    indicatorBackgroundColor,
+    thickness,
+    label,
+    isStatic
+  } = _ref;
+  const {
+    dots,
+    style
+  } = variant || {};
+  const isDots = dots === true || style === _shared.DOTS_STYLE;
+  return isDots ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dots.default, {
+    ref: ref,
+    size: dotSize,
+    color: color,
+    indicatorBackgroundColor: indicatorBackgroundColor,
+    label: label,
+    isStatic: isStatic
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+    ref: ref,
+    size: size,
+    color: color,
+    indicatorBackgroundColor: indicatorBackgroundColor,
+    thickness: thickness,
+    label: label,
+    isStatic: isStatic
+  });
+});
+RenderActivityIndicator.displayName = 'RenderActivityIndicator';
+RenderActivityIndicator.propTypes = {
+  /**
+   * ActivityIndicator variants
+   * */
+  variant: _propTypes.default.shape({
+    dots: _propTypes.default.bool,
+    style: _propTypes.default.oneOf([_shared.DOTS_STYLE])
+  }),
+  /**
+   * Size of the dots
+   * */
+  dotSize: _propTypes.default.number,
+  /**
+   * Size of the spinner
+   * */
+  size: _propTypes.default.number,
+  /**
+   * Primary color
+   * */
+  color: _propTypes.default.string,
+  /**
+   * Secondary color (background) of the indicator
+   * */
+  indicatorBackgroundColor: _propTypes.default.string,
+  /**
+   * Thickness of the indicator
+   * */
+  thickness: _propTypes.default.number,
+  /**
+   * Label for the ActivityIndicator
+   * */
+  label: _propTypes.default.string,
+  /**
+   * if true, there's no animation for ActivityIndicator
+   * */
+  isStatic: _propTypes.default.bool
+};
+var _default = exports.default = RenderActivityIndicator;

package/lib/cjs/ActivityIndicator/index.js

@@ -6,45 +6,85 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _utils = require("../utils");
 var _ThemeProvider = require("../ThemeProvider");
 var _props = require("../utils/props");
-var _Spinner = _interopRequireDefault(require("./Spinner"));
-var _Dots = _interopRequireDefault(require("./Dots"));
+var _FullScreenIndicator = _interopRequireDefault(require("./FullScreenIndicator"));
+var _OverlayIndicator = _interopRequireDefault(require("./OverlayIndicator"));
+var _InlineIndicator = _interopRequireDefault(require("./InlineIndicator"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const labelMapping = {
+  top: 'column-reverse',
+  bottom: 'column',
+  left: 'row-reverse',
+  right: 'row'
+};
+
 /**
  * `ActivityIndicator` renders a visual loading state.
  * It does not handle positioning or layout of that visual loader.
- */const ActivityIndicator = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+ */
+const ActivityIndicator = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     variant,
     tokens,
     label,
-    isStatic = false
+    labelPosition = 'bottom',
+    showLabel = true,
+    inline = false,
+    fullScreen = false,
+    overlay = false,
+    isStatic = false,
+    children,
+    fullScreenBackgroundColor
   } = _ref;
   const {
     size,
     dotSize,
     color,
     indicatorBackgroundColor,
+    fullScreenOverlayBackground,
     thickness
   } = (0, _ThemeProvider.useThemeTokens)('ActivityIndicator', tokens, variant);
-  return variant?.dots ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dots.default, {
-    ref: ref,
-    size: dotSize,
-    color: color,
-    indicatorBackgroundColor: indicatorBackgroundColor,
-    label: label,
-    isStatic: isStatic
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
-    ref: ref,
-    size: size,
-    color: color,
-    indicatorBackgroundColor: indicatorBackgroundColor,
-    thickness: thickness,
-    label: label,
-    isStatic: isStatic
-  });
+  (0, _utils.useScrollBlocking)([_Platform.default.OS === 'web' && fullScreen]);
+  const variantProps = {
+    variant,
+    dotSize,
+    size,
+    color,
+    indicatorBackgroundColor,
+    thickness,
+    isStatic
+  };
+  const visibleLabel = showLabel && !!label;
+  const commonProps = {
+    ref,
+    variantProps,
+    label,
+    labelPosition,
+    labelMapping,
+    showLabel: visibleLabel
+  };
+  switch (true) {
+    case fullScreen:
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullScreenIndicator.default, {
+        ...commonProps,
+        backgroundColor: fullScreenBackgroundColor || fullScreenOverlayBackground
+      });
+    case overlay:
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_OverlayIndicator.default, {
+        ...commonProps,
+        inline: inline,
+        isActive: overlay,
+        children: children
+      });
+    default:
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InlineIndicator.default, {
+        ...commonProps
+      });
+  }
 });
 ActivityIndicator.displayName = 'ActivityIndicator';
 ActivityIndicator.propTypes = {
@@ -53,10 +93,38 @@ ActivityIndicator.propTypes = {
   /**
    * A visually hidden accessible label describing the action taking place
    */
-  label: _propTypes.default.string.isRequired,
+  label: _propTypes.default.string,
+  /**
+   * If true, it should render a static ActivityIndicator
+   */
+  isStatic: _propTypes.default.bool,
+  /**
+   * Position of the label relative to ActivityIndicator
+   */
+  labelPosition: _propTypes.default.oneOf(['top', 'bottom', 'left', 'right']),
+  /**
+   * show or hide the label
+   */
+  showLabel: _propTypes.default.bool,
+  /**
+   * If true, the ActivityIndicator will be displayed in full screen mode
+   */
+  fullScreen: _propTypes.default.bool,
+  /**
+   * If true, the ActivityIndicator will be displayed inline
+   */
+  inline: _propTypes.default.bool,
+  /**
+   * If true, the ActivityIndicator will be displayed in overlay mode
+   */
+  overlay: _propTypes.default.bool,
+  /**
+   * Children to be rendered inside ActivityIndicator
+   */
+  children: _propTypes.default.node,
   /**
-   * If true, it should render a static spinner
+   * Background color of the full screen overlay
    */
-  isStatic: _propTypes.default.bool
+  fullScreenBackgroundColor: _propTypes.default.string
 };
 var _default = exports.default = ActivityIndicator;

package/lib/cjs/ActivityIndicator/shared.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.propTypes = exports.UNDERSHOOT_FACTOR = exports.SVG_SIZE = exports.SVG_RADIUS = exports.SVG_CIRCUMFERENCE = exports.SVG_CENTER = exports.SPINNER_ROTATION_DEGREES = exports.SPINNER_RADIUS = exports.SPINNER_KEYTIMES = exports.SPINNER_DASHOFFSET_FACTOR = exports.SPINNER_DASHARRAY_MIN = exports.SPINNER_DASHARRAY_MAX = exports.SPINNER_DASHARRAY_HALF = exports.ROTATION_TRANSFORM = exports.OVERSHOOT_FACTOR = exports.DURATION = exports.DOT_FADEOUT_OUTPUT_RANGE = exports.DOT_FADEOUT_INPUT_RANGE = exports.DOTS_TOTAL_ANIMATION_DURATION = exports.DOTS_SPACING_X = exports.DOTS_PADDING_FACTOR = exports.DOTS_JUMP_HEIGHT_FACTOR = exports.DOTS_FADEOUT_VALUES = exports.DOTS_FADEOUT_KEYTIMES = exports.DOTS_BASE_Y_FACTOR = exports.DOTS_ANIMATION_DURATION = exports.DOT3_COLOR_KEYTIMES = exports.DOT3_ANIMATION_KEYTIMES = exports.DOT3_ANIMATION_INPUT_RANGE = exports.DOT2_COLOR_KEYTIMES = exports.DOT2_ANIMATION_KEYTIMES = exports.DOT2_ANIMATION_INPUT_RANGE = exports.DOT1_COLOR_KEYTIMES = exports.DOT1_ANIMATION_KEYTIMES = exports.DOT1_ANIMATION_INPUT_RANGE = exports.BOUNCY_CURVE = void 0;
+exports.propTypes = exports.UNDERSHOOT_FACTOR = exports.SVG_SIZE = exports.SVG_RADIUS = exports.SVG_CIRCUMFERENCE = exports.SVG_CENTER = exports.SPINNER_ROTATION_DEGREES = exports.SPINNER_RADIUS = exports.SPINNER_KEYTIMES = exports.SPINNER_DASHOFFSET_FACTOR = exports.SPINNER_DASHARRAY_MIN = exports.SPINNER_DASHARRAY_MAX = exports.SPINNER_DASHARRAY_HALF = exports.SPACE_WITH_LABEL = exports.SPACE_WITHOUT_LABEL = exports.ROTATION_TRANSFORM = exports.OVERSHOOT_FACTOR = exports.DURATION = exports.DOT_FADEOUT_OUTPUT_RANGE = exports.DOT_FADEOUT_INPUT_RANGE = exports.DOTS_TOTAL_ANIMATION_DURATION = exports.DOTS_STYLE = exports.DOTS_SPACING_X = exports.DOTS_PADDING_FACTOR = exports.DOTS_JUMP_HEIGHT_FACTOR = exports.DOTS_FADEOUT_VALUES = exports.DOTS_FADEOUT_KEYTIMES = exports.DOTS_BASE_Y_FACTOR = exports.DOTS_ANIMATION_DURATION = exports.DOT3_COLOR_KEYTIMES = exports.DOT3_ANIMATION_KEYTIMES = exports.DOT3_ANIMATION_INPUT_RANGE = exports.DOT2_COLOR_KEYTIMES = exports.DOT2_ANIMATION_KEYTIMES = exports.DOT2_ANIMATION_INPUT_RANGE = exports.DOT1_COLOR_KEYTIMES = exports.DOT1_ANIMATION_KEYTIMES = exports.DOT1_ANIMATION_INPUT_RANGE = exports.BOUNCY_CURVE = exports.BACKDROP_Z_INDEX = exports.BACKDROP_OPACITY = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // Spinner
@@ -56,6 +56,17 @@ const DOT_FADEOUT_OUTPUT_RANGE = exports.DOT_FADEOUT_OUTPUT_RANGE = [1, 1, 0, 0]
 const DOT1_ANIMATION_INPUT_RANGE = exports.DOT1_ANIMATION_INPUT_RANGE = [0, 0.1, 0.2, 1];
 const DOT2_ANIMATION_INPUT_RANGE = exports.DOT2_ANIMATION_INPUT_RANGE = [0, 0.3, 0.4, 0.5, 1];
 const DOT3_ANIMATION_INPUT_RANGE = exports.DOT3_ANIMATION_INPUT_RANGE = [0, 0.6, 0.7, 0.8, 1];
+
+// Backdrop
+const BACKDROP_OPACITY = exports.BACKDROP_OPACITY = 0.06;
+const BACKDROP_Z_INDEX = exports.BACKDROP_Z_INDEX = 1400;
+
+// Space
+const SPACE_WITH_LABEL = exports.SPACE_WITH_LABEL = 3;
+const SPACE_WITHOUT_LABEL = exports.SPACE_WITHOUT_LABEL = 0;
+
+// Style
+const DOTS_STYLE = exports.DOTS_STYLE = 'dots';
 const propTypes = exports.propTypes = {
   color: _propTypes.default.string.isRequired,
   baseColor: _propTypes.default.string,

package/lib/cjs/ActivityIndicator/sharedProptypes.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.activityIndicatorVariantProps = exports.activityIndicatorCommonProps = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * PropTypes for the 3 variants of the ActivityIndicator:
+ *   - InlineIndicator
+ *   - OverlayIndicator
+ *   - FullScreenIndicator
+ */
+const activityIndicatorVariantProps = exports.activityIndicatorVariantProps = _propTypes.default.shape({
+  /**
+   * Indicates the variant style for the ActivityIndicator
+   * */
+  variant: _propTypes.default.object,
+  /**
+   * Size of the dots
+   * */
+  dotSize: _propTypes.default.number,
+  /**
+   * Size of the ActivityIndicator Spinner
+   * */
+  size: _propTypes.default.number,
+  /**
+   * Primary color (Spinner)
+   * */
+  color: _propTypes.default.string,
+  /**
+   * Secondary color (background) of the indicator
+   * */
+  indicatorBackgroundColor: _propTypes.default.string,
+  /**
+   * Thickness of the ActivityIndicator Spinner
+   * */
+  thickness: _propTypes.default.number,
+  /**
+   * Indicates if the ActivityIndicator is static
+   * (not animated)
+   * */
+  isStatic: _propTypes.default.bool
+}).isRequired;
+const activityIndicatorCommonProps = exports.activityIndicatorCommonProps = {
+  /**
+   * Props used by RenderActivityIndicator
+   * */
+  variantProps: activityIndicatorVariantProps,
+  /**
+   * Shows or hide the label
+   * */
+  showLabel: _propTypes.default.bool,
+  /**
+   * A visually hidden accessible label describing the action taking place
+   */
+  label: _propTypes.default.string,
+  /**
+   * Position of the label relative to ActivityIndicator
+   */
+  labelPosition: _propTypes.default.oneOf(['top', 'bottom', 'left', 'right']),
+  /**
+   * Map of flex-direction position for label
+   * */
+  labelMapping: _propTypes.default.object.isRequired
+};