@telus-uds/components-base 1.66.0 → 1.67.1

package/lib/utils/useSafeLayoutEffect.js

@@ -4,35 +4,30 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("react");
-
 var _HydrationContext = require("../BaseProvider/HydrationContext");
-
 const isSSR = typeof window === 'undefined';
-
 const noop = () => {};
+
 /**
  * useSafeLayoutEffect is a alternative to useLayoutEffect that avoids SSR hydration problems:
  *  - In a client-side render, it uses useLayoutEffect to avoid flashing the pre-render UI to the user.
  *  - During hydration from SSR, the provided function is skipped to avoid mismatches from server content.
  *  - In SSR, it is a no-op function to avoid warnings about using useLayoutEffect in SSR
  */
-
-
 const useSafeLayoutEffect = isSSR ? noop // avoid React's fussy warnings by ensuring to never call useLayoutEffect on server
 : function (fn) {
   let deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  const isHydrating = (0, _HydrationContext.useHydrationContext)(); // Callback updates and effect re-runs when deps array content changes, like useEffect.
+  const isHydrating = (0, _HydrationContext.useHydrationContext)();
 
+  // Callback updates and effect re-runs when deps array content changes, like useEffect.
   /* eslint-disable-next-line react-hooks/exhaustive-deps */
-
   const callback = (0, _react.useCallback)(fn, deps);
   (0, _react.useLayoutEffect)(() => {
     // Do nothing before hydrating server-generated content, like useEffect. When hydration completes,
     // useHydrationContext provides false, re-rendering this hook and re-running the effect.
-    if (isHydrating) return noop; // If there's no hydration in progress, behave like useLayoutEffect.
-
+    if (isHydrating) return noop;
+    // If there's no hydration in progress, behave like useLayoutEffect.
     return callback();
   }, [isHydrating, callback]);
 };

package/lib/utils/useScrollBlocking.js

@@ -4,26 +4,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("react");
-
 const addScrollBlocking = (preventScrolling, stopPropagation, ref) => {
   var _ref$current;
-
   document.body.addEventListener('touchmove', preventScrolling, {
     passive: false
   });
   (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.addEventListener('touchmove', stopPropagation);
   document.body.style.overflow = 'hidden';
 };
-
 const removeScrollBlocking = (preventScrolling, stopPropagation, ref) => {
   var _ref$current2;
-
   document.body.removeEventListener('touchmove', preventScrolling);
   (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.removeEventListener('touchmove', stopPropagation);
   document.body.style.overflow = 'inherit';
 };
+
 /**
  * Disables scrolling when passed `true` or an array where all items are `true`.
  *
@@ -33,8 +29,6 @@ const removeScrollBlocking = (preventScrolling, stopPropagation, ref) => {
  * @param {boolean | boolean[]} conditionProps
  * @returns
  */
-
-
 const useScrollBlocking = conditionProps => {
   // useRef refs are null on first render and don't trigger a re-render when they get their
   // element. Force re-run when ref mounts to ensure the stopPropagation listener is attached.
@@ -49,18 +43,16 @@ const useScrollBlocking = conditionProps => {
   const stopPropagation = (0, _react.useCallback)(event => event.stopPropagation(), []);
   (0, _react.useEffect)(() => {
     const cleanup = () => removeScrollBlocking(preventScrolling, stopPropagation, ref);
-
     if (conditionsMet) {
       addScrollBlocking(preventScrolling, stopPropagation, ref);
     } else {
       cleanup();
     }
-
-    return cleanup; // preventScrolling and stopPropagation are stable callbacks with no deps, so this
+    return cleanup;
+    // preventScrolling and stopPropagation are stable callbacks with no deps, so this
     // will re-run when conditionsMet or refIsMounted flip between true and false.
   }, [preventScrolling, conditionsMet, stopPropagation, refIsMounted]);
   return callbackRef;
 };
-
 var _default = useScrollBlocking;
 exports.default = _default;

package/lib/utils/useScrollBlocking.native.js

@@ -4,8 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 // This is a no-op to emphasize that the original hook is web-only
 var _default = () => {};
-
 exports.default = _default;

package/lib/utils/useSpacingScale.js

@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _ViewportProvider = require("../ViewportProvider");
-
 var _ThemeProvider = require("../ThemeProvider");
-
 var _useResponsiveProp = require("./useResponsiveProp");
-
 /**
  * @typedef {import('@telus-uds/system-constants/viewports').Viewport} Viewport
  * @typedef {import('./props/spacingProps.js').SpacingValue} SpacingValue
@@ -18,6 +14,7 @@ var _useResponsiveProp = require("./useResponsiveProp");
  * @typedef {import('./props/spacingProps.js').SpacingObject} SpacingObject
  * @typedef {import('./props/spacingProps.js').SpacingOptions} SpacingOptions
  */
+
 const resolveSpacingOptions = space => {
   if (!(space !== null && space !== void 0 && space.options)) return {};
   const {
@@ -25,7 +22,9 @@ const resolveSpacingOptions = space => {
     variant,
     subtract = 0
   } = space.options;
-  const overridden = typeof size === 'number'; // Might need an option that adapts the size value by current user's system font scale, so that
+  const overridden = typeof size === 'number';
+
+  // Might need an option that adapts the size value by current user's system font scale, so that
   // meaningful spacing between items doesn't disappear on the highest a11y font scale settings.
   // https://github.com/telus/universal-design-system/issues/583
 
@@ -38,6 +37,7 @@ const resolveSpacingOptions = space => {
     subtract
   };
 };
+
 /**
  * Pass a {@link SpacingValue}, which is one of:
  *
@@ -107,8 +107,6 @@ const resolveSpacingOptions = space => {
  * @param {SpacingValue} [spaceValue] - a {@link SpacingIndex} number, or a {@link SpacingObject}
  * @returns {number}
  */
-
-
 const useSpacingScale = spaceValue => {
   // In future, may need to consider window height as well as width, particularly for native apps,
   // e.g. to ensure designs don't look lost on large, tall, not-so-wide portrait screens.
@@ -128,6 +126,5 @@ const useSpacingScale = spaceValue => {
   });
   return Math.max(size - subtract, 0);
 };
-
 var _default = useSpacingScale;
 exports.default = _default;

package/lib/utils/useUniqueId.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("react");
-
 let id = 0;
-
 function useUniqueId() {
   let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   const [uniqueId] = (0, _react.useState)(() => {
@@ -17,6 +14,5 @@ function useUniqueId() {
   });
   return uniqueId;
 }
-
 var _default = useUniqueId;
 exports.default = _default;

package/lib/utils/withLinkRouter.js

@@ -4,21 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _hasOwnProperty = _interopRequireDefault(require("./hasOwnProperty"));
-
 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; }
-
 /**
  * Higher-order component that has no effect unless an additional prop `LinkRouter` is passed.
  * This may be used to provide custom wrappers for integrations with third party libraries.
@@ -46,15 +38,15 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * <Link href={href} LinkRouter={LinkLinkRouter} linkRouterProps={{ to, options }}>Some link</Link>
  * <IconButton icon={SomeIcon} LinkRouter={LinkLinkRouter} linkRouterProps={{ to, options }} ref={iconRef} />
  * ```
- */
-const withLinkRouter = Component => {
+ */const withLinkRouter = Component => {
   const wrappedComponent = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     let {
       LinkRouter,
       linkRouterProps,
       ...props
     } = _ref;
-    if (!LinkRouter) return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, { ...props,
+    if (!LinkRouter) return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
+      ...props,
       ref: ref
     });
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(LinkRouter, {
@@ -63,23 +55,27 @@ const withLinkRouter = Component => {
       ref: ref,
       ...props
     });
-  }); // Ensure the returned component has appropriate outer properties set:
+  });
 
+  // Ensure the returned component has appropriate outer properties set:
   /* eslint-disable-next-line react/forbid-foreign-prop-types */
-
   const {
     displayName,
     name,
     propTypes,
     ...otherProperties
-  } = Component; // Apply unique component name as a displayName
+  } = Component;
 
-  wrappedComponent.displayName = Component.displayName || Component.name; // Apply proptypes including wrapper props - is safely { ...undefined, ...undefined } in prod
+  // Apply unique component name as a displayName
+  wrappedComponent.displayName = Component.displayName || Component.name;
 
-  wrappedComponent.propTypes = { ...Component.propTypes,
+  // Apply proptypes including wrapper props - is safely { ...undefined, ...undefined } in prod
+  wrappedComponent.propTypes = {
+    ...Component.propTypes,
     ...withLinkRouter.propTypes
-  }; // Forward any other properties explicitly set e.g. Component.SubComponent
+  };
 
+  // Forward any other properties explicitly set e.g. Component.SubComponent
   Object.keys(otherProperties).forEach(key => {
     // Skip internal React properties from wrappedComponent's forwardRef (render, $$typeof, etc)
     if ((0, _hasOwnProperty.default)(Component, key) && !(0, _hasOwnProperty.default)(wrappedComponent, key)) {
@@ -88,7 +84,6 @@ const withLinkRouter = Component => {
   });
   return wrappedComponent;
 };
-
 withLinkRouter.propTypes = {
   LinkRouter: _propTypes.default.elementType,
   linkRouterProps: _propTypes.default.object

package/lib-module/A11yInfoProvider/index.js

@@ -5,7 +5,6 @@ import Platform from "react-native-web/dist/exports/Platform";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ScreenReaderContext = /*#__PURE__*/createContext(false);
 const ReducedMotionContext = /*#__PURE__*/createContext(false);
-
 const A11yInfoProvider = _ref => {
   let {
     children
@@ -18,22 +17,20 @@ const A11yInfoProvider = _ref => {
       // and "...after the Jest environment has been torn down" errors, so skip them.
       return () => {};
     }
-
     const motionSubscription = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduceMotionEnabled);
-
     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`
-      // https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/AccessibilityInfo/index.js#L14
+      const [initialReduceMotionEnabled, initialScreenReaderEnabled] = await Promise.all([AccessibilityInfo.isReduceMotionEnabled(), AccessibilityInfo.isScreenReaderEnabled()]);
 
-      setScreenReaderEnabled(Platform.OS !== 'web' && !!initialScreenReaderEnabled); // RNW does support isReduceMotionEnabled looking for 'prefers-reduced-motion' state
+      // 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
       setReduceMotionEnabled(!!initialReduceMotionEnabled);
     };
-
     if (AccessibilityInfo.isReduceMotionEnabled && AccessibilityInfo.isScreenReaderEnabled) {
       setInitialA11yInfo();
     }
-
     return () => {
       // From react-native 0.65, AccessibilityInfo.removeEventListener is deprecated for `remove` on addEventListener return value
       if (typeof (motionSubscription === null || motionSubscription === void 0 ? void 0 : motionSubscription.remove) === 'function') {
@@ -51,7 +48,6 @@ const A11yInfoProvider = _ref => {
     })
   });
 };
-
 A11yInfoProvider.propTypes = {
   children: PropTypes.node.isRequired
 };

package/lib-module/A11yText/index.js

@@ -6,13 +6,13 @@ import PropTypes from 'prop-types';
 import { a11yProps, selectSystemProps, viewProps } from '../utils/props';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+
 /**
  * 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 = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     text,
@@ -36,13 +36,12 @@ const A11yText = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
 });
 A11yText.displayName = 'A11yText';
-A11yText.propTypes = { ...selectedSystemPropTypes,
-
+A11yText.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Text to be read by screen readers
    */
   text: PropTypes.string.isRequired,
-
   /**
    * Whether text should be rendered as a heading
    */

package/lib-module/ActivityIndicator/Spinner.js

@@ -18,9 +18,9 @@ const bezierProps = {
   calcMode: 'spline',
   keyTimes: '0; 0.5; 1',
   keySplines: `${BEZIER.join(', ')} ; ${BEZIER.join(', ')}`
-}; // We're using svg rather than css here to define the animation to avoid needing to introduce css injection mechanism
+};
+// 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__*/forwardRef((_ref, ref) => {
   let {
     size,

package/lib-module/ActivityIndicator/Spinner.native.js

@@ -41,8 +41,9 @@ const Spinner = /*#__PURE__*/forwardRef((_ref, ref) => {
     height: size / (reduceMotion ? 1.5 : 2),
     overflow: 'hidden'
   };
-  const animationFrequency = reduceMotion ? [0] : [0, 1]; // Credit to https://github.com/n4kz/react-native-indicators and https://github.com/callstack/react-native-paper for this
+  const animationFrequency = reduceMotion ? [0] : [0, 1];
 
+  // Credit to https://github.com/n4kz/react-native-indicators and https://github.com/callstack/react-native-paper for this
   return /*#__PURE__*/_jsx(View, {
     ref: ref,
     style: [styles.container],
@@ -63,11 +64,9 @@ const Spinner = /*#__PURE__*/forwardRef((_ref, ref) => {
         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`;
         });
@@ -79,7 +78,6 @@ const Spinner = /*#__PURE__*/forwardRef((_ref, ref) => {
           width: size,
           height: size
         };
-
         if (!reduceMotion) {
           layerStyle.transform = [{
             rotate: timer.interpolate({
@@ -96,7 +94,6 @@ const Spinner = /*#__PURE__*/forwardRef((_ref, ref) => {
             })
           }];
         }
-
         const offsetStyle = index ? {
           top: size / 2
         } : null;
@@ -138,7 +135,8 @@ const styles = StyleSheet.create({
     flexGrow: 0,
     flexShrink: 0
   },
-  layer: { ...StyleSheet.absoluteFillObject,
+  layer: {
+    ...StyleSheet.absoluteFillObject,
     justifyContent: 'center',
     alignItems: 'center'
   }

package/lib-module/ActivityIndicator/index.js

@@ -3,13 +3,12 @@ import PropTypes from 'prop-types';
 import { useThemeTokens } from '../ThemeProvider';
 import { getTokensPropType, variantProp } from '../utils/props';
 import Spinner from './Spinner';
+
 /**
  * `ActivityIndicator` renders a visual loading state.
  * It does not handle positioning or layout of that visual loader.
  */
-
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const ActivityIndicator = _ref => {
   let {
     variant,
@@ -30,16 +29,13 @@ const ActivityIndicator = _ref => {
     isStatic: isStatic
   });
 };
-
 ActivityIndicator.propTypes = {
   variant: variantProp.propType,
   tokens: getTokensPropType('ActivityIndicator'),
-
   /**
    * A visually hidden accessible label describing the action taking place
    */
   label: PropTypes.string.isRequired,
-
   /**
    * If true, it should render a static spinner
    */

package/lib-module/ActivityIndicator/shared.js

@@ -1,5 +1,6 @@
-import PropTypes from 'prop-types'; // these could be specified by the theme
+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;