@telus-uds/components-base 0.0.2-prerelease.5 → 0.0.2-prerelease.9

package/lib/A11yText/index.js

@@ -1,39 +1,60 @@
-import React from 'react';
-import { Platform, StyleSheet, View } from 'react-native';
-import PropTypes from 'prop-types';
-import { a11yProps } from '../utils/propTypes';
+"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"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _propTypes2 = require("../utils/propTypes");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 /**
  * A11yText is a zero-size invisible element that adds text to be read by screen readers.
  *
  * It should be used to add selectable screen-reader-only text to the main document flow,
  * as a sibling to blocks of text like paragraphs and interactive elements like buttons.
  */
-
 const A11yText = ({
   text,
   heading,
   ...rest
 }) => {
-  const a11y = a11yProps.select({
+  const a11y = _propTypes2.a11yProps.select({
     // On iOS, needs `accessible` to be true to be focusable without non-a11y content.
     // On Web, `accessible` causes RNW to set attributes that may make the element be treated as a group.
     // On Android, may cause this to be skipped when with `<Text>` siblings in an `accessible` View,
     // see https://github.com/facebook/react-native/issues/30851#issuecomment-790165489
-    accessible: Platform.OS === 'ios',
+    accessible: _Platform.default.OS === 'ios',
     accessibilityLabel: text,
     accessibilityRole: heading ? 'header' : 'text',
     ...rest
   });
-  return /*#__PURE__*/React.createElement(View, Object.assign({
-    style: styles.invisible
-  }, a11y));
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: styles.invisible,
+    ...a11y
+  });
 };
 
 A11yText.propTypes = {
-  text: PropTypes.string.isRequired,
-  heading: PropTypes.bool
+  text: _propTypes.default.string.isRequired,
+  heading: _propTypes.default.bool
 };
-const styles = StyleSheet.create({
+
+const styles = _StyleSheet.default.create({
   invisible: {
     // Without width or height it is not shown
     minHeight: 1,
@@ -46,4 +67,6 @@ const styles = StyleSheet.create({
     top: -1
   }
 });
-export default A11yText;
+
+var _default = A11yText;
+exports.default = _default;

package/lib/ActivityIndicator/Spinner.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _shared = require("./shared");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const SVG_RADIUS = 20;
+const SVG_CIRCUMFERENCE = SVG_RADIUS * 2 * Math.PI;
+const MIN_SVG_LENGTH = _shared.MIN_STROKE_ANGLE / 360 * SVG_CIRCUMFERENCE;
+const MAX_SVG_LENGTH = (1 - _shared.MIN_EMPTY_ANGLE / 360) * SVG_CIRCUMFERENCE;
+const animationProps = {
+  begin: '0s',
+  dur: "".concat(_shared.DURATION, "ms"),
+  fill: 'freeze',
+  repeatCount: 'indefinite'
+};
+const bezierProps = {
+  calcMode: 'spline',
+  keyTimes: '0; 0.5; 1',
+  keySplines: "".concat(_shared.BEZIER.join(', '), " ; ").concat(_shared.BEZIER.join(', '))
+}; // We're using svg rather than css here to define the animation to avoid needing to introduce css injection mechanism
+// It's possible to replicate this functionality with RNW animations, but it snags on chrome at least, see https://github.com/telus/universal-design-system/pull/477 for details.
+
+const Spinner = ({
+  size,
+  color,
+  thickness,
+  label
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+  width: "".concat(size, "px"),
+  height: "".concat(size, "px"),
+  viewBox: "0 0 48 48",
+  "aria-valuetext": label,
+  role: "progressbar",
+  "aria-busy": true,
+  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("animateTransform", {
+      attributeName: "transform",
+      type: "rotate",
+      values: "-180 24 24;".concat(360 + _shared.MIN_STROKE_ANGLE - 180, " 24 24"),
+      ...animationProps
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("circle", {
+      fill: "none",
+      stroke: color,
+      strokeWidth: thickness * 48 / size,
+      strokeLinecap: "round",
+      cx: "24",
+      cy: "24",
+      r: "20",
+      strokeDasharray: [MIN_SVG_LENGTH, SVG_CIRCUMFERENCE],
+      strokeDashoffset: 0,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("animate", {
+        attributeName: "stroke-dashoffset",
+        values: "0;-10;".concat(MIN_SVG_LENGTH - SVG_CIRCUMFERENCE),
+        ...animationProps,
+        ...bezierProps
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("animate", {
+        attributeName: "stroke-dasharray",
+        values: "".concat(MIN_SVG_LENGTH, ", 200;").concat(MAX_SVG_LENGTH, ", 200;").concat(MIN_SVG_LENGTH, ", 200"),
+        ...animationProps,
+        ...bezierProps
+      })]
+    })]
+  })
+});
+
+Spinner.propTypes = _shared.propTypes;
+var _default = Spinner;
+exports.default = _default;

package/lib/ActivityIndicator/Spinner.native.js

@@ -1,8 +1,28 @@
-import React from 'react';
-import { Animated, Easing, StyleSheet, View } from 'react-native';
-import { DURATION, MIN_EMPTY_ANGLE, MIN_STROKE_ANGLE, BEZIER, propTypes } from './shared';
-const ea = MIN_EMPTY_ANGLE / 2;
-const sa = MIN_STROKE_ANGLE / 2;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Animated"));
+
+var _Easing = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Easing"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _shared = require("./shared");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const ea = _shared.MIN_EMPTY_ANGLE / 2;
+const sa = _shared.MIN_STROKE_ANGLE / 2;
 
 const Spinner = ({
   size,
@@ -12,113 +32,127 @@ const Spinner = ({
 }) => {
   const {
     current: timer
-  } = React.useRef(new Animated.Value(0));
-  React.useLayoutEffect(() => {
-    const loop = Animated.timing(timer, {
-      duration: DURATION,
-      easing: Easing.linear,
+  } = _react.default.useRef(new _Animated.default.Value(0));
+
+  _react.default.useLayoutEffect(() => {
+    const loop = _Animated.default.timing(timer, {
+      duration: _shared.DURATION,
+      easing: _Easing.default.linear,
       // Animated.loop does not work if useNativeDriver is true on web
       useNativeDriver: true,
       toValue: 1,
       isInteraction: false
     });
-    Animated.loop(loop).start();
+
+    _Animated.default.loop(loop).start();
   }, [timer]);
-  const frames = 60 * DURATION / 1000;
-  const easing = Easing.bezier(...BEZIER);
+
+  const frames = 60 * _shared.DURATION / 1000;
+
+  const easing = _Easing.default.bezier(..._shared.BEZIER);
+
   const containerStyle = {
     width: size,
     height: size / 2,
     overflow: 'hidden'
   }; // Credit to https://github.com/n4kz/react-native-indicators and https://github.com/callstack/react-native-paper for this
 
-  return /*#__PURE__*/React.createElement(View, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: [styles.container],
     accessible: true,
     accessibilityLabel: label,
     accessibilityRole: "progressbar",
     accessibilityState: {
       busy: true
-    }
-  }, /*#__PURE__*/React.createElement(Animated.View, {
-    style: [{
-      width: size,
-      height: size
-    }],
-    collapsable: false
-  }, [0, 1].map(index => {
-    const inputRange = Array.from(new Array(frames), (_, frameIndex) => frameIndex / (frames - 1));
-    const outputRange = Array.from(new Array(frames), (_, frameIndex) => {
-      let progress = 2 * frameIndex / (frames - 1);
-      const rotation = index ? +(360 - sa) : -(180 - sa);
-
-      if (progress > 1.0) {
-        progress = 2.0 - progress;
-      }
-
-      const direction = index ? -1 : +1;
-      return `${direction * (180 - (sa + ea)) * easing(progress) + rotation}deg`;
-    });
-    const layerStyle = {
-      width: size,
-      height: size,
-      transform: [{
-        rotate: timer.interpolate({
-          inputRange: [0, 1],
-          outputRange: [`${0 + ea + sa}deg`, `${2 * 360 + ea + sa}deg`]
-        })
-      }]
-    };
-    const viewportStyle = {
-      width: size,
-      height: size,
-      transform: [{
-        translateY: index ? -size / 2 : 0
-      }, {
-        rotate: timer.interpolate({
-          inputRange,
-          outputRange
-        })
-      }]
-    };
-    const offsetStyle = index ? {
-      top: size / 2
-    } : null;
-    const lineStyle = {
-      width: size,
-      height: size,
-      borderColor: color,
-      borderWidth: thickness,
-      borderRadius: size / 2
-    };
-    return /*#__PURE__*/React.createElement(Animated.View, {
-      key: index,
-      style: [styles.layer]
-    }, /*#__PURE__*/React.createElement(Animated.View, {
-      style: layerStyle
-    }, /*#__PURE__*/React.createElement(Animated.View, {
-      style: [containerStyle, offsetStyle],
-      collapsable: false
-    }, /*#__PURE__*/React.createElement(Animated.View, {
-      style: viewportStyle
-    }, /*#__PURE__*/React.createElement(Animated.View, {
-      style: containerStyle,
-      collapsable: false
-    }, /*#__PURE__*/React.createElement(Animated.View, {
-      style: lineStyle
-    }))))));
-  })));
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
+      style: [{
+        width: size,
+        height: size
+      }],
+      collapsable: false,
+      children: [0, 1].map(index => {
+        const inputRange = Array.from(new Array(frames), (_, frameIndex) => frameIndex / (frames - 1));
+        const outputRange = Array.from(new Array(frames), (_, frameIndex) => {
+          let progress = 2 * frameIndex / (frames - 1);
+          const rotation = index ? +(360 - sa) : -(180 - sa);
+
+          if (progress > 1.0) {
+            progress = 2.0 - progress;
+          }
+
+          const direction = index ? -1 : +1;
+          return "".concat(direction * (180 - (sa + ea)) * easing(progress) + rotation, "deg");
+        });
+        const layerStyle = {
+          width: size,
+          height: size,
+          transform: [{
+            rotate: timer.interpolate({
+              inputRange: [0, 1],
+              outputRange: ["".concat(0 + ea + sa, "deg"), "".concat(2 * 360 + ea + sa, "deg")]
+            })
+          }]
+        };
+        const viewportStyle = {
+          width: size,
+          height: size,
+          transform: [{
+            translateY: index ? -size / 2 : 0
+          }, {
+            rotate: timer.interpolate({
+              inputRange,
+              outputRange
+            })
+          }]
+        };
+        const offsetStyle = index ? {
+          top: size / 2
+        } : null;
+        const lineStyle = {
+          width: size,
+          height: size,
+          borderColor: color,
+          borderWidth: thickness,
+          borderRadius: size / 2
+        };
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
+          style: [styles.layer],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
+            style: layerStyle,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
+              style: [containerStyle, offsetStyle],
+              collapsable: false,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
+                style: viewportStyle,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
+                  style: containerStyle,
+                  collapsable: false,
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
+                    style: lineStyle
+                  })
+                })
+              })
+            })
+          })
+        }, index);
+      })
+    })
+  });
 };
 
-Spinner.propTypes = propTypes;
-const styles = StyleSheet.create({
+Spinner.propTypes = _shared.propTypes;
+
+const styles = _StyleSheet.default.create({
   container: {
     flexGrow: 0,
     flexShrink: 0
   },
-  layer: { ...StyleSheet.absoluteFillObject,
+  layer: { ..._StyleSheet.default.absoluteFillObject,
     justifyContent: 'center',
     alignItems: 'center'
   }
 });
-export default Spinner;
+
+var _default = Spinner;
+exports.default = _default;

package/lib/ActivityIndicator/index.js

@@ -1,13 +1,28 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useThemeTokens } from '../ThemeProvider';
-import { getTokensPropType, variantProp } from '../utils/propTypes';
-import Spinner from './Spinner';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _propTypes2 = require("../utils/propTypes");
+
+var _Spinner = _interopRequireDefault(require("./Spinner"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 /**
  * `ActivityIndicator` renders a visual loading state.
  * It does not handle positioning or layout of that visual loader.
  */
-
 const ActivityIndicator = ({
   variant,
   tokens,
@@ -17,8 +32,8 @@ const ActivityIndicator = ({
     size,
     color,
     thickness
-  } = useThemeTokens('ActivityIndicator', tokens, variant);
-  return /*#__PURE__*/React.createElement(Spinner, {
+  } = (0, _ThemeProvider.useThemeTokens)('ActivityIndicator', tokens, variant);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
     size: size,
     color: color,
     thickness: thickness,
@@ -27,12 +42,13 @@ const ActivityIndicator = ({
 };
 
 ActivityIndicator.propTypes = {
-  variant: variantProp.propType,
-  tokens: getTokensPropType('ActivityIndicator'),
+  variant: _propTypes2.variantProp.propType,
+  tokens: (0, _propTypes2.getTokensPropType)('ActivityIndicator'),
 
   /**
    * A visually hidden accessible label describing the action taking place
    */
-  label: PropTypes.string.isRequired
+  label: _propTypes.default.string.isRequired
 };
-export default ActivityIndicator;
+var _default = ActivityIndicator;
+exports.default = _default;

package/lib/ActivityIndicator/shared.js

@@ -1,12 +1,27 @@
-import PropTypes from 'prop-types'; // these could be specified by the theme
-
-export const DURATION = 1800;
-export const MIN_EMPTY_ANGLE = 60;
-export const MIN_STROKE_ANGLE = 30;
-export const BEZIER = [0.42, 0.0, 0.58, 1.0];
-export const propTypes = {
-  color: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-  size: PropTypes.number.isRequired,
-  thickness: PropTypes.number.isRequired
-};
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.BEZIER = exports.MIN_STROKE_ANGLE = exports.MIN_EMPTY_ANGLE = exports.DURATION = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// these could be specified by the theme
+const DURATION = 1800;
+exports.DURATION = DURATION;
+const MIN_EMPTY_ANGLE = 60;
+exports.MIN_EMPTY_ANGLE = MIN_EMPTY_ANGLE;
+const MIN_STROKE_ANGLE = 30;
+exports.MIN_STROKE_ANGLE = MIN_STROKE_ANGLE;
+const BEZIER = [0.42, 0.0, 0.58, 1.0];
+exports.BEZIER = BEZIER;
+const propTypes = {
+  color: _propTypes.default.string.isRequired,
+  label: _propTypes.default.string.isRequired,
+  size: _propTypes.default.number.isRequired,
+  thickness: _propTypes.default.number.isRequired
+};
+exports.propTypes = propTypes;

package/lib/BaseProvider/index.js

@@ -1,18 +1,41 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import A11yInfoProvider from '../A11yInfoProvider';
-import ViewportProvider from '../ViewportProvider';
-import ThemeProvider from '../ThemeProvider';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _A11yInfoProvider = _interopRequireDefault(require("../A11yInfoProvider"));
+
+var _ViewportProvider = _interopRequireDefault(require("../ViewportProvider"));
+
+var _ThemeProvider = _interopRequireDefault(require("../ThemeProvider"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _ThemeProvider$propTy;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const BaseProvider = ({
   defaultTheme,
   children
-}) => /*#__PURE__*/React.createElement(A11yInfoProvider, null, /*#__PURE__*/React.createElement(ViewportProvider, null, /*#__PURE__*/React.createElement(ThemeProvider, {
-  defaultTheme: defaultTheme
-}, children)));
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_A11yInfoProvider.default, {
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ViewportProvider.default, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ThemeProvider.default, {
+      defaultTheme: defaultTheme,
+      children: children
+    })
+  })
+});
 
 BaseProvider.propTypes = {
-  defaultTheme: ThemeProvider.propTypes?.defaultTheme,
-  children: PropTypes.node.isRequired
+  defaultTheme: (_ThemeProvider$propTy = _ThemeProvider.default.propTypes) === null || _ThemeProvider$propTy === void 0 ? void 0 : _ThemeProvider$propTy.defaultTheme,
+  children: _propTypes.default.node.isRequired
 };
-export default BaseProvider;
+var _default = BaseProvider;
+exports.default = _default;