@telus-uds/components-base 0.0.2-prerelease.6 → 1.0.0

package/__tests__/utils/children.test.jsx

@@ -0,0 +1,128 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { render } from '@testing-library/react-native'
+import { Text, View } from 'react-native'
+
+import { wrapStringsInText } from '../../src/utils'
+import A11yText from '../../src/A11yText'
+
+const TestComponent = ({ children }) => (
+  <View testID="wrapper">{wrapStringsInText(children, { testID: 'text' })}</View>
+)
+TestComponent.propTypes = {
+  children: PropTypes.node
+}
+
+describe('wrapStringsInText', () => {
+  it('combines adjacent strings into one text', () => {
+    const secondString = 'Second string'
+    const { queryAllByTestId } = render(
+      <TestComponent>
+        First string
+        {secondString}
+        Third string
+      </TestComponent>
+    )
+    expect(queryAllByTestId('text')).toHaveLength(1)
+  })
+  it('combines adjacent strings and numbers into one `Text`', () => {
+    const { queryAllByTestId } = render(
+      <TestComponent>
+        First string
+        {12345}
+        Third string
+      </TestComponent>
+    )
+    expect(queryAllByTestId('text')).toHaveLength(1)
+  })
+  it('combines adjacent strings, numbers and A11yText into one `Text`', () => {
+    const { queryAllByTestId } = render(
+      <TestComponent>
+        First string
+        <A11yText text="Some inserted A11yText" />
+        Third string
+      </TestComponent>
+    )
+    expect(queryAllByTestId('text')).toHaveLength(1)
+  })
+  it('combines clusters seperated by another component into multiple `Text`s', () => {
+    const { queryAllByTestId } = render(
+      <TestComponent>
+        First string
+        {12345}
+        Third string
+        <View />
+        Fourth string
+        <A11yText text="Some inserted A11yText" />
+        Fifth string
+        <View />
+        Sixth string
+        {12345}
+        <A11yText text="Some inserted A11yText" />
+        Seventh string
+      </TestComponent>
+    )
+    expect(queryAllByTestId('text')).toHaveLength(3)
+  })
+  it('does not wrap elements that do not need wrapping', () => {
+    const { getByTestId, queryAllByTestId } = render(
+      <TestComponent>
+        Unwrapped text
+        {12345}
+        <View>
+          <Text>
+            Wrapped text inside View
+            {12345}
+          </Text>
+        </View>
+        More unwrapped text
+        {12345}
+        <Text>
+          Wrapped text separate from above unwrapped text
+          {12345}
+        </Text>
+      </TestComponent>
+    )
+    expect(queryAllByTestId('text')).toHaveLength(2)
+    expect(getByTestId('wrapper').children.map((child) => child.type)).toEqual([
+      Text,
+      View,
+      Text,
+      Text
+    ])
+  })
+  it('does not wrap a singular A11yText in `Text`', () => {
+    const { queryAllByTestId } = render(
+      <TestComponent>
+        <A11yText text="Some inserted A11yText" />
+      </TestComponent>
+    )
+    expect(queryAllByTestId('text')).toHaveLength(0)
+  })
+  it('does not wrap an A11yText in `Text` if it is sandwiched by non-text', () => {
+    const { queryAllByTestId } = render(
+      <TestComponent>
+        First string
+        {12345}
+        Third string
+        <View />
+        <A11yText text="Some inserted A11yText" />
+        <View />
+        Sixth string
+        {12345}
+        <A11yText text="Some inserted A11yText" />
+        Seventh string
+      </TestComponent>
+    )
+    expect(queryAllByTestId('text')).toHaveLength(2)
+  })
+  it('does not double-wrap already wrapped `Text`', () => {
+    const { queryAllByTestId } = render(
+      <TestComponent>
+        <Text>Already wrapped</Text>
+        <Text>Also already wrapped</Text>
+      </TestComponent>
+    )
+    expect(queryAllByTestId('text')).toHaveLength(0)
+  })
+})

package/__tests__/utils/input.test.js

@@ -1,6 +1,6 @@
 import { renderHook, act } from '@testing-library/react-hooks'
 
-import { useInputValue, useMultipleInputValues } from '../../lib/utils'
+import { useInputValue, useMultipleInputValues } from '../../src/utils'
 
 /**
  * Tests for errors thrown on incorrect props usage
@@ -90,6 +90,17 @@ describe('useInputValue (uncontrolled)', () => {
     expect(result.current.currentValue).toBe('some value')
   })
 
+  it('Changes currentValue based on old value when `setValue` is passed a function', () => {
+    const { result } = renderHook(() => useInputValue({ initialValue: 1 }))
+    expect(result.current.currentValue).toBe(1)
+
+    act(() => result.current.setValue((oldValue) => oldValue + 1))
+    expect(result.current.currentValue).toBe(2)
+
+    act(() => result.current.setValue((oldValue) => oldValue + 2))
+    expect(result.current.currentValue).toBe(4)
+  })
+
   it('Sets currentValue to initialValue if provided, which may be changed', () => {
     const { result } = renderHook(() => useInputValue({ initialValue: 'first value' }))
     expect(result.current.currentValue).toBe('first value')
@@ -210,6 +221,29 @@ describe('useMultipleInputValues (uncontrolled)', () => {
     expect(result.current.currentValues).toEqual(['second value', 'third value'])
   })
 
+  it('Replaces values on calling setValues', () => {
+    const { result } = renderHook(() =>
+      useMultipleInputValues({
+        initialValues: ['first value', 'second value', 'third value']
+      })
+    )
+    act(() => result.current.setValues(['new value', 'another value']))
+    expect(result.current.currentValues).toEqual(['new value', 'another value'])
+  })
+
+  it('Replaces values based on old values on passing function to setValues', () => {
+    const { result } = renderHook(() =>
+      useMultipleInputValues({
+        initialValues: [1, 2, 3, 4]
+      })
+    )
+    act(() => result.current.setValues((oldValues) => oldValues.map((value) => value + 1)))
+    expect(result.current.currentValues).toEqual([2, 3, 4, 5])
+
+    act(() => result.current.setValues((oldValues) => oldValues.map((value) => value + 2)))
+    expect(result.current.currentValues).toEqual([4, 5, 6, 7])
+  })
+
   it('Empties values on calling unsetValues', () => {
     const { result } = renderHook(() =>
       useMultipleInputValues({
@@ -237,6 +271,18 @@ describe('useInputValue (controlled)', () => {
     expect(onChange.mock.calls[0][0]).toEqual('second value')
   })
 
+  it('Calls `onChange` with result from old value when `setValue` is passed a function', () => {
+    const onChange = jest.fn((arg) => arg)
+    const { result } = renderHook(() => useInputValue({ value: 1, onChange }))
+    expect(result.current.currentValue).toBe(1)
+    expect(onChange).toHaveBeenCalledTimes(0)
+
+    act(() => result.current.setValue((oldValue) => oldValue + 1))
+    expect(result.current.currentValue).toBe(1)
+    expect(onChange).toHaveBeenCalledTimes(1)
+    expect(onChange.mock.calls[0][0]).toEqual(2)
+  })
+
   it('Returns updated `currentValue` when non-undefined `value` prop changes', () => {
     const onChange = () => {}
     const { result, rerender } = renderHook(({ value }) => useInputValue({ value, onChange }), {
@@ -296,6 +342,18 @@ describe('useMultipleInputValues (controlled)', () => {
     expect(onChange.mock.calls[0][0]).toEqual(['second value', 'third value'])
   })
 
+  it('Calls `onChange` with results from old values when `setValues` is passed a function', () => {
+    const onChange = jest.fn((arg) => arg)
+    const { result } = renderHook(() => useMultipleInputValues({ values: [1, 2, 3, 4], onChange }))
+    expect(result.current.currentValues).toEqual([1, 2, 3, 4])
+    expect(onChange).toHaveBeenCalledTimes(0)
+
+    act(() => result.current.setValues((oldValues) => oldValues.map((value) => value + 1)))
+    expect(result.current.currentValues).toEqual([1, 2, 3, 4])
+    expect(onChange).toHaveBeenCalledTimes(1)
+    expect(onChange.mock.calls[0][0]).toEqual([2, 3, 4, 5])
+  })
+
   it('Calls onChange with an empty array on calling unsetValues', () => {
     const onChange = jest.fn((arg) => arg)
     const { result, rerender } = renderHook(

package/__tests__/utils/semantics.test.jsx

@@ -0,0 +1,43 @@
+import { Platform } from 'react-native'
+
+import { getA11yPropsFromHtmlTag, tagsToRoles, supportedTags } from '../../src'
+
+// Note that currently all tests run as ios so only native logic can be tested here
+// until cross-platform tests are set up. See issue:
+// https://github.com/telus/universal-design-system/issues/319
+
+// As a temporary measure, there are tests on web-context HTML output for Box component
+// in @telus-uds/ds-allium which test the actual output when the tags are rendered.
+
+// These tests will therefore just test the values returned in a native context.
+describe('getA11yPropsFromHtmlTag', () => {
+  it.each(Object.entries(tagsToRoles))(
+    'responds to tag "%s" with accessibilityRole "%s"',
+    (tag, role) => {
+      expect(getA11yPropsFromHtmlTag(tag)).toEqual({ accessibilityRole: role })
+    }
+  )
+
+  it.each([
+    [1, 'h1'],
+    [2, 'h2'],
+    [3, 'h3'],
+    [4, 'h4'],
+    [5, 'h5'],
+    [6, 'h6']
+  ])('returns accessibility role "header" and level "%s" for header tag "%s"', (level, tag) => {
+    expect(getA11yPropsFromHtmlTag(tag)).toEqual({
+      accessibilityRole: 'header',
+      accessibilityLevel: level
+    })
+  })
+
+  if (Platform.OS !== 'web') {
+    it.each(supportedTags.map((tag) => [tag]))(
+      'responds to tag "%s" and an arbitrary nativeRole with given nativeRole override',
+      (tag) => {
+        expect(getA11yPropsFromHtmlTag(tag, 'link')).toEqual({ accessibilityRole: 'link' })
+      }
+    )
+  }
+})

package/__tests__/utils/useCopy.test.js

@@ -14,18 +14,29 @@ describe('useCopy hook', () => {
   it('returns a correct english translation', () => {
     const { result } = renderHook(() => useCopy({ dictionary, copy: 'en' }))
 
-    expect(result.current('translation key')).toBe('english version')
+    const getCopy = result.current
+    expect(getCopy('translation key')).toBe('english version')
   })
 
   it('returns a correct french translation', () => {
     const { result } = renderHook(() => useCopy({ dictionary, copy: 'fr' }))
 
-    expect(result.current('translation key')).toBe('french version')
+    const getCopy = result.current
+    expect(getCopy('translation key')).toBe('french version')
   })
 
   it('returns undefined when no translation is found', () => {
     const { result } = renderHook(() => useCopy({ dictionary, copy: 'en' }))
 
-    expect(result.current('non-existing key')).toBe(undefined)
+    const getCopy = result.current
+    expect(getCopy('non-existing key')).toBe(undefined)
+  })
+
+  it('allows for overriding the entire dictionary with a copy object (ignoring the dictionary argument)', () => {
+    const { result } = renderHook(() => useCopy({ dictionary, copy: dictionary.en }))
+
+    const getCopy = result.current
+    expect(getCopy('non-existing key')).toBe(undefined)
+    expect(getCopy('translation key')).toBe('english version')
   })
 })

package/babel.config.js

@@ -0,0 +1,20 @@
+module.exports = {
+  env: {
+    /*
+     * we actually want this setup to be used whenever we're not in `test` but
+     * babel merges plugins array rather than replacing so we can't set it as a
+     * default. However the default BABEL_ENV value is development (jest sets it
+     * to test)
+     */
+    development: {
+      presets: ['@babel/preset-env', ['@babel/preset-react', { runtime: 'automatic' }]],
+      plugins: [['react-native-web', { commonjs: true }]]
+    },
+    /*
+     * jest is testing for just ios at the moment, use a preset which best matches that env
+     */
+    test: {
+      presets: ['module:metro-react-native-babel-preset']
+    }
+  }
+}

package/jest.config.js

@@ -1,10 +1,13 @@
 const preset = require('react-native/jest-preset')
-const displayName = require('./package.json').name.split('@telus-uds/').pop()
+const name = require('./package.json').name.split('@telus-uds/').pop()
 
 // cherry-pick the bits of the preset we want to avoid it overriding the fix we have on L14
 module.exports = {
   haste: preset.haste,
-  displayName,
+  displayName: {
+    name,
+    color: 'blue'
+  },
   setupFiles: preset.setupFiles,
   transform: {
     // Use babel-jest instead of react-native/jest/preprocessor.js so that the coverage report is correct as per:
@@ -21,7 +24,9 @@ module.exports = {
   moduleNameMapper: {
     '.+\\.(otf|svg|png|jpg)$': 'identity-obj-proxy'
   },
-  transformIgnorePatterns: preset.transformIgnorePatterns,
+  transformIgnorePatterns: [
+    'node_modules/(?!(jest-)?react-native|@react-native|@react-native-community|@react-native-picker)'
+  ],
   // Count everything in src when calculating coverage
   collectCoverageFrom: ['src/**/*.{js,jsx}']
 }

package/lib/A11yInfoProvider/index.js

@@ -1,58 +1,86 @@
-import React, { createContext, useContext, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import { AccessibilityInfo, Platform } from 'react-native';
-const ScreenReaderContext = /*#__PURE__*/createContext(false);
-const ReducedMotionContext = /*#__PURE__*/createContext(false);
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useA11yInfo = exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _AccessibilityInfo = _interopRequireDefault(require("react-native-web/dist/cjs/exports/AccessibilityInfo"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const ScreenReaderContext = /*#__PURE__*/(0, _react.createContext)(false);
+const ReducedMotionContext = /*#__PURE__*/(0, _react.createContext)(false);
 
 const A11yInfoProvider = ({
   children
 }) => {
-  const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false);
-  const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);
-  useEffect(() => {
+  const [reduceMotionEnabled, setReduceMotionEnabled] = (0, _react.useState)(false);
+  const [screenReaderEnabled, setScreenReaderEnabled] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
     if (process.env.NODE_ENV === 'test') {
       // On Jest these effects do nothing but can cause `act` state change warnings
       // and "...after the Jest environment has been torn down" errors, so skip them.
       return () => {};
     }
 
-    AccessibilityInfo.addEventListener('reduceMotionChanged', setReduceMotionEnabled);
-    AccessibilityInfo.addEventListener('screenReaderChanged', setScreenReaderEnabled);
+    _AccessibilityInfo.default.addEventListener('reduceMotionChanged', setReduceMotionEnabled);
+
+    _AccessibilityInfo.default.addEventListener('screenReaderChanged', setScreenReaderEnabled);
 
     const setInitialA11yInfo = async () => {
-      const [initialReduceMotionEnabled, initialScreenReaderEnabled] = await Promise.all([AccessibilityInfo.isReduceMotionEnabled(), AccessibilityInfo.isScreenReaderEnabled()]); // Browsers can't detect screen readers; in RNW isScreenReaderEnabled() is always `true`
+      const [initialReduceMotionEnabled, initialScreenReaderEnabled] = await Promise.all([_AccessibilityInfo.default.isReduceMotionEnabled(), _AccessibilityInfo.default.isScreenReaderEnabled()]); // Browsers can't detect screen readers; in RNW isScreenReaderEnabled() is always `true`
       // https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/AccessibilityInfo/index.js#L14
 
-      setScreenReaderEnabled(Platform.OS !== 'web' && !!initialScreenReaderEnabled); // RNW does support isReduceMotionEnabled looking for 'prefers-reduced-motion' state
+      setScreenReaderEnabled(_Platform.default.OS !== 'web' && !!initialScreenReaderEnabled); // RNW does support isReduceMotionEnabled looking for 'prefers-reduced-motion' state
 
       setReduceMotionEnabled(!!initialReduceMotionEnabled);
     };
 
-    if (AccessibilityInfo.isReduceMotionEnabled && AccessibilityInfo.isScreenReaderEnabled) {
+    if (_AccessibilityInfo.default.isReduceMotionEnabled && _AccessibilityInfo.default.isScreenReaderEnabled) {
       setInitialA11yInfo();
     }
 
     return () => {
-      AccessibilityInfo.removeEventListener('reduceMotionChanged', setReduceMotionEnabled);
-      AccessibilityInfo.removeEventListener('screenReaderChanged', setScreenReaderEnabled);
+      _AccessibilityInfo.default.removeEventListener('reduceMotionChanged', setReduceMotionEnabled);
+
+      _AccessibilityInfo.default.removeEventListener('screenReaderChanged', setScreenReaderEnabled);
     };
   }, []);
-  return /*#__PURE__*/React.createElement(ReducedMotionContext.Provider, {
-    value: reduceMotionEnabled
-  }, /*#__PURE__*/React.createElement(ScreenReaderContext.Provider, {
-    value: screenReaderEnabled
-  }, children));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ReducedMotionContext.Provider, {
+    value: reduceMotionEnabled,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ScreenReaderContext.Provider, {
+      value: screenReaderEnabled,
+      children: children
+    })
+  });
 };
 
 A11yInfoProvider.propTypes = {
-  children: PropTypes.node.isRequired
+  children: _propTypes.default.node.isRequired
 };
-export default A11yInfoProvider;
-export const useA11yInfo = () => {
-  const screenReaderEnabled = useContext(ScreenReaderContext);
-  const reduceMotionEnabled = useContext(ReducedMotionContext);
+var _default = A11yInfoProvider;
+exports.default = _default;
+
+const useA11yInfo = () => {
+  const screenReaderEnabled = (0, _react.useContext)(ScreenReaderContext);
+  const reduceMotionEnabled = (0, _react.useContext)(ReducedMotionContext);
   return {
     reduceMotionEnabled,
     screenReaderEnabled
   };
-};
+};
+
+exports.useA11yInfo = useA11yInfo;

package/lib/A11yText/index.js

@@ -1,39 +1,65 @@
-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 = _interopRequireWildcard(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 }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 /**
  * 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 = ({
+const A11yText = /*#__PURE__*/(0, _react.forwardRef)(({
   text,
   heading,
   ...rest
-}) => {
-  const a11y = a11yProps.select({
+}, ref) => {
+  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,
+    ref: ref,
+    ...a11y
+  });
+});
+A11yText.displayName = 'A11yText';
 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 +72,6 @@ const styles = StyleSheet.create({
     top: -1
   }
 });
-export default A11yText;
+
+var _default = A11yText;
+exports.default = _default;

package/lib/ActivityIndicator/Spinner.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _shared = require("./shared");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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: `${_shared.DURATION}ms`,
+  fill: 'freeze',
+  repeatCount: 'indefinite'
+};
+const bezierProps = {
+  calcMode: 'spline',
+  keyTimes: '0; 0.5; 1',
+  keySplines: `${_shared.BEZIER.join(', ')} ; ${_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 = /*#__PURE__*/(0, _react.forwardRef)(({
+  size,
+  color,
+  thickness,
+  label
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+  ref: ref,
+  width: `${size}px`,
+  height: `${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;${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;${MIN_SVG_LENGTH - SVG_CIRCUMFERENCE}`,
+        ...animationProps,
+        ...bezierProps
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("animate", {
+        attributeName: "stroke-dasharray",
+        values: `${MIN_SVG_LENGTH}, 200;${MAX_SVG_LENGTH}, 200;${MIN_SVG_LENGTH}, 200`,
+        ...animationProps,
+        ...bezierProps
+      })]
+    })]
+  })
+}));
+Spinner.displayName = 'Spinner';
+Spinner.propTypes = _shared.propTypes;
+var _default = Spinner;
+exports.default = _default;