@telus-uds/components-base 1.7.1 → 1.8.2

package/lib/index.js

@@ -56,34 +56,46 @@ var _exportNames = {
   applyTextStyles: true,
   applyShadowToken: true
 };
+Object.defineProperty(exports, "A11yInfoProvider", {
+  enumerable: true,
+  get: function () {
+    return _A11yInfoProvider.default;
+  }
+});
 Object.defineProperty(exports, "A11yText", {
   enumerable: true,
   get: function () {
     return _A11yText.default;
   }
 });
+Object.defineProperty(exports, "Accordion", {
+  enumerable: true,
+  get: function () {
+    return _ExpandCollapse.Accordion;
+  }
+});
 Object.defineProperty(exports, "ActivityIndicator", {
   enumerable: true,
   get: function () {
     return _ActivityIndicator.default;
   }
 });
-Object.defineProperty(exports, "Box", {
+Object.defineProperty(exports, "BaseProvider", {
   enumerable: true,
   get: function () {
-    return _Box.default;
+    return _BaseProvider.default;
   }
 });
-Object.defineProperty(exports, "Card", {
+Object.defineProperty(exports, "Box", {
   enumerable: true,
   get: function () {
-    return _Card.default;
+    return _Box.default;
   }
 });
-Object.defineProperty(exports, "PressableCardBase", {
+Object.defineProperty(exports, "Card", {
   enumerable: true,
   get: function () {
-    return _Card.PressableCardBase;
+    return _Card.default;
   }
 });
 Object.defineProperty(exports, "Checkbox", {
@@ -104,12 +116,6 @@ Object.defineProperty(exports, "ExpandCollapse", {
     return _ExpandCollapse.default;
   }
 });
-Object.defineProperty(exports, "Accordion", {
-  enumerable: true,
-  get: function () {
-    return _ExpandCollapse.Accordion;
-  }
-});
 Object.defineProperty(exports, "Feedback", {
   enumerable: true,
   get: function () {
@@ -158,16 +164,16 @@ Object.defineProperty(exports, "List", {
     return _List.default;
   }
 });
-Object.defineProperty(exports, "ListItem", {
+Object.defineProperty(exports, "ListBase", {
   enumerable: true,
   get: function () {
-    return _List.ListItem;
+    return _List.ListBase;
   }
 });
-Object.defineProperty(exports, "ListBase", {
+Object.defineProperty(exports, "ListItem", {
   enumerable: true,
   get: function () {
-    return _List.ListBase;
+    return _List.ListItem;
   }
 });
 Object.defineProperty(exports, "Modal", {
@@ -188,6 +194,12 @@ Object.defineProperty(exports, "Pagination", {
     return _Pagination.default;
   }
 });
+Object.defineProperty(exports, "PressableCardBase", {
+  enumerable: true,
+  get: function () {
+    return _Card.PressableCardBase;
+  }
+});
 Object.defineProperty(exports, "Progress", {
   enumerable: true,
   get: function () {
@@ -260,6 +272,12 @@ Object.defineProperty(exports, "Tags", {
     return _Tags.default;
   }
 });
+Object.defineProperty(exports, "ThemeProvider", {
+  enumerable: true,
+  get: function () {
+    return _ThemeProvider.default;
+  }
+});
 Object.defineProperty(exports, "Tooltip", {
   enumerable: true,
   get: function () {
@@ -278,22 +296,10 @@ Object.defineProperty(exports, "Typography", {
     return _Typography.default;
   }
 });
-Object.defineProperty(exports, "A11yInfoProvider", {
-  enumerable: true,
-  get: function () {
-    return _A11yInfoProvider.default;
-  }
-});
-Object.defineProperty(exports, "useA11yInfo", {
-  enumerable: true,
-  get: function () {
-    return _A11yInfoProvider.useA11yInfo;
-  }
-});
-Object.defineProperty(exports, "BaseProvider", {
+Object.defineProperty(exports, "ViewportContext", {
   enumerable: true,
   get: function () {
-    return _BaseProvider.default;
+    return _ViewportProvider.ViewportContext;
   }
 });
 Object.defineProperty(exports, "ViewportProvider", {
@@ -302,64 +308,58 @@ Object.defineProperty(exports, "ViewportProvider", {
     return _ViewportProvider.default;
   }
 });
-Object.defineProperty(exports, "useViewport", {
-  enumerable: true,
-  get: function () {
-    return _ViewportProvider.useViewport;
-  }
-});
-Object.defineProperty(exports, "ViewportContext", {
+Object.defineProperty(exports, "applyOuterBorder", {
   enumerable: true,
   get: function () {
-    return _ViewportProvider.ViewportContext;
+    return _ThemeProvider.applyOuterBorder;
   }
 });
-Object.defineProperty(exports, "ThemeProvider", {
+Object.defineProperty(exports, "applyShadowToken", {
   enumerable: true,
   get: function () {
-    return _ThemeProvider.default;
+    return _ThemeProvider.applyShadowToken;
   }
 });
-Object.defineProperty(exports, "useTheme", {
+Object.defineProperty(exports, "applyTextStyles", {
   enumerable: true,
   get: function () {
-    return _ThemeProvider.useTheme;
+    return _ThemeProvider.applyTextStyles;
   }
 });
-Object.defineProperty(exports, "useSetTheme", {
+Object.defineProperty(exports, "getThemeTokens", {
   enumerable: true,
   get: function () {
-    return _ThemeProvider.useSetTheme;
+    return _ThemeProvider.getThemeTokens;
   }
 });
-Object.defineProperty(exports, "useThemeTokens", {
+Object.defineProperty(exports, "useA11yInfo", {
   enumerable: true,
   get: function () {
-    return _ThemeProvider.useThemeTokens;
+    return _A11yInfoProvider.useA11yInfo;
   }
 });
-Object.defineProperty(exports, "getThemeTokens", {
+Object.defineProperty(exports, "useSetTheme", {
   enumerable: true,
   get: function () {
-    return _ThemeProvider.getThemeTokens;
+    return _ThemeProvider.useSetTheme;
   }
 });
-Object.defineProperty(exports, "applyOuterBorder", {
+Object.defineProperty(exports, "useTheme", {
   enumerable: true,
   get: function () {
-    return _ThemeProvider.applyOuterBorder;
+    return _ThemeProvider.useTheme;
   }
 });
-Object.defineProperty(exports, "applyTextStyles", {
+Object.defineProperty(exports, "useThemeTokens", {
   enumerable: true,
   get: function () {
-    return _ThemeProvider.applyTextStyles;
+    return _ThemeProvider.useThemeTokens;
   }
 });
-Object.defineProperty(exports, "applyShadowToken", {
+Object.defineProperty(exports, "useViewport", {
   enumerable: true,
   get: function () {
-    return _ThemeProvider.applyShadowToken;
+    return _ViewportProvider.useViewport;
   }
 });
 

package/lib/utils/a11y/semantics.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getA11yPropsFromHtmlTag = exports.getHeadingLevel = exports.textTags = exports.layoutTags = exports.supportedTags = exports.headingTags = exports.tagsToRoles = void 0;
+exports.textTags = exports.tagsToRoles = exports.supportedTags = exports.layoutTags = exports.headingTags = exports.getHeadingLevel = exports.getA11yPropsFromHtmlTag = void 0;
 
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 
@@ -58,7 +58,10 @@ const rolesToTags =
 
 }; // Invert React Native Web's mapping, so a tag gets the role that gets that tag
 
-const tagsToRoles = Object.fromEntries(Object.entries(rolesToTags).map(([key, value]) => [value, key]));
+const tagsToRoles = Object.fromEntries(Object.entries(rolesToTags).map(_ref => {
+  let [key, value] = _ref;
+  return [value, key];
+}));
 /**
  * Heading HTML tags map to the "heading" accessibilityRole in native apps, which is similar
  * to headings on web but without the expectation of a hierarchy of headings within one screen.

package/lib/utils/a11y/textSize.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getMaxFontMultiplier = exports.scaleWithText = void 0;
+exports.scaleWithText = exports.getMaxFontMultiplier = void 0;
 
 var _PixelRatio = _interopRequireDefault(require("react-native-web/dist/cjs/exports/PixelRatio"));
 
@@ -18,7 +18,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @param {number} [value] - the value to multiply; defaults to system default font size
  * @param {number} [maxScale] - the maximum multiplier to apply; defaults to no maximum
  */
-const scaleWithText = (value, maxScale = Infinity) => {
+const scaleWithText = function (value) {
+  let maxScale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Infinity;
   if (!value) return value;
   const scale = Math.min(_PixelRatio.default.getFontScale(), maxScale) || 1;
   return value * scale;
@@ -37,10 +38,11 @@ const scaleWithText = (value, maxScale = Infinity) => {
 
 exports.scaleWithText = scaleWithText;
 
-const getMaxFontMultiplier = ({
-  fontSize,
-  fontScaleCap
-}) => {
+const getMaxFontMultiplier = _ref => {
+  let {
+    fontSize,
+    fontScaleCap
+  } = _ref;
   if (_Platform.default.OS === 'web' || !fontScaleCap || !fontSize) return undefined;
   if (fontScaleCap <= fontSize) return 1;
   return fontScaleCap / fontSize;

package/lib/utils/animation/useVerticalExpandAnimation.js

@@ -17,19 +17,31 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 // TODO: systematise animations
 // https://github.com/telus/universal-design-system/issues/487
-function useVerticalExpandAnimation({
-  containerHeight,
-  isExpanded,
-  tokens
-}) {
+function useVerticalExpandAnimation(_ref) {
+  let {
+    containerHeight,
+    isExpanded,
+    tokens
+  } = _ref;
+  const [isAnimating, setIsAnimating] = (0, _react.useState)(false);
   const expandAnimatedValue = (0, _react.useRef)(new _Animated.default.Value(0)).current;
+  const elementRef = (0, _react.useRef)(null);
   const {
     expandDuration,
     collapseDuration
-  } = tokens;
+  } = tokens; // Treat as animating from when expanded state changes, until animation completes
+
+  (0, _react.useEffect)(() => setIsAnimating(true), [isExpanded]);
   (0, _react.useEffect)(() => {
+    const onComplete = () => !isExpanded && setIsAnimating(false);
+
     if (_Platform.default.OS === 'web') {
-      return;
+      if (!elementRef.current) return () => {}; // React Native Web does not pass `onTransitionEnd` through, must attach manually.
+      // https://github.com/necolas/react-native-web/pull/1713
+
+      const element = elementRef.current;
+      element.addEventListener('transitionend', onComplete);
+      return () => element.removeEventListener('transitionend', onComplete);
     }
 
     const animationConfig = {
@@ -39,25 +51,27 @@ function useVerticalExpandAnimation({
       useNativeDriver: false
     };
 
-    _Animated.default.timing(expandAnimatedValue, animationConfig).start();
-  }, [isExpanded, expandAnimatedValue, containerHeight, expandDuration, collapseDuration]);
-  let containerStyles; // don't visually collapse the container until we have it measured
+    const animation = _Animated.default.timing(expandAnimatedValue, animationConfig);
+
+    animation.start(onComplete);
+    return () => animation.stop();
+  }, [isExpanded, expandAnimatedValue, containerHeight, expandDuration, collapseDuration]); // Without `visibility: 'hidden', descendents are focusable on web even when collapsed
+
+  const containerStyles = !isExpanded && !isAnimating ? {
+    visibility: 'hidden'
+  } : {}; // don't visually collapse the container until we have it measured
 
   if (containerHeight !== null) {
     if (_Platform.default.OS === 'web') {
       const transitionDuration = isExpanded ? expandDuration : collapseDuration;
-      containerStyles = {
-        transition: `height ${transitionDuration}ms ease-in-out`,
-        height: isExpanded ? containerHeight : 0
-      };
+      containerStyles.transition = `height ${transitionDuration}ms ease-in-out`;
+      containerStyles.height = isExpanded ? containerHeight : 0;
     } else {
-      containerStyles = {
-        height: expandAnimatedValue
-      };
+      containerStyles.height = expandAnimatedValue;
     }
   }
 
-  return containerStyles;
+  return [containerStyles, elementRef];
 }
 
 var _default = useVerticalExpandAnimation;

package/lib/utils/children.js

@@ -104,7 +104,8 @@ const wrapChild = (child, wrappedText) => {
  */
 
 
-const wrapStringsInText = (children, textProps = {}) => {
+const wrapStringsInText = function (children) {
+  let textProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   const childrenArray = unpackFragment(_react.Children.toArray(children)); // Group adjacent wrapable children together in one Text element to create as few Text elements
   // as possible, e.g. give <X>Text {someString}</X> one Text, same as <X>{`Text ${someString}`}</X>
 

package/lib/utils/index.js

@@ -13,6 +13,12 @@ var _exportNames = {
   withLinkRouter: true,
   containUniqueFields: true
 };
+Object.defineProperty(exports, "containUniqueFields", {
+  enumerable: true,
+  get: function () {
+    return _containUniqueFields.default;
+  }
+});
 Object.defineProperty(exports, "info", {
   enumerable: true,
   get: function () {
@@ -31,16 +37,16 @@ Object.defineProperty(exports, "useHash", {
     return _useHash.default;
   }
 });
-Object.defineProperty(exports, "useSpacingScale", {
+Object.defineProperty(exports, "useResponsiveProp", {
   enumerable: true,
   get: function () {
-    return _useSpacingScale.default;
+    return _useResponsiveProp.default;
   }
 });
-Object.defineProperty(exports, "useResponsiveProp", {
+Object.defineProperty(exports, "useSpacingScale", {
   enumerable: true,
   get: function () {
-    return _useResponsiveProp.default;
+    return _useSpacingScale.default;
   }
 });
 Object.defineProperty(exports, "useUniqueId", {
@@ -55,12 +61,6 @@ Object.defineProperty(exports, "withLinkRouter", {
     return _withLinkRouter.default;
   }
 });
-Object.defineProperty(exports, "containUniqueFields", {
-  enumerable: true,
-  get: function () {
-    return _containUniqueFields.default;
-  }
-});
 
 var _a11y = require("./a11y");
 

package/lib/utils/input.js

@@ -12,15 +12,17 @@ var _react = require("react");
  */
 const pluralHooks = ['useMultipleInputValues'];
 
-const validateProps = ({
-  value,
-  onChange,
-  readOnly,
-  initialValue
-}, {
-  isCurrentlyControlled,
-  isControlled
-}, hookName) => {
+const validateProps = (_ref, _ref2, hookName) => {
+  let {
+    value,
+    onChange,
+    readOnly,
+    initialValue
+  } = _ref;
+  let {
+    isCurrentlyControlled,
+    isControlled
+  } = _ref2;
   const s = pluralHooks.includes(hookName) ? 's' : '';
 
   const usageError = error => {
@@ -76,7 +78,9 @@ Consumers of this hook must be one of:
  */
 
 
-const useInputValue = (props = {}, hookName = 'useInputValue') => {
+const useInputValue = function () {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let hookName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'useInputValue';
   const isCurrentlyControlled = props.value !== undefined;
   const [isControlled] = (0, _react.useState)(isCurrentlyControlled);
   validateProps(props, {
@@ -143,13 +147,14 @@ const useInputValue = (props = {}, hookName = 'useInputValue') => {
 
 exports.useInputValue = useInputValue;
 
-const useMultipleInputValues = ({
-  values,
-  initialValues,
-  maxValues,
-  onChange,
-  readOnly
-} = {}) => {
+const useMultipleInputValues = function () {
+  let {
+    values,
+    initialValues,
+    maxValues,
+    onChange,
+    readOnly
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     currentValue,
     setValue,

package/lib/utils/pressability.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getPressHandlersWithArgs = exports.resolvePressableTokens = exports.resolvePressableState = exports.getCursorStyle = void 0;
+exports.resolvePressableTokens = exports.resolvePressableState = exports.getPressHandlersWithArgs = exports.getCursorStyle = void 0;
 
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 
@@ -30,11 +30,12 @@ const shouldUseCursor = ['checkbox', 'radio', 'switch'];
  * @returns
  */
 
-const getCursorStyle = ({
-  inactive,
-  disabled,
-  accessibilityRole
-}) => {
+const getCursorStyle = _ref => {
+  let {
+    inactive,
+    disabled,
+    accessibilityRole
+  } = _ref;
   if (_Platform.default.OS !== 'web') return undefined;
   if (inactive || disabled) return staticStyles.notAllowed;
   if (shouldUseCursor.includes(accessibilityRole)) return staticStyles.pointer;
@@ -58,15 +59,19 @@ const getCursorStyle = ({
 
 exports.getCursorStyle = getCursorStyle;
 
-const resolvePressableState = ({
-  pressed = false,
-  focused = false,
-  hovered = false
-} = {}, additionalState) => ({ ...additionalState,
-  focus: focused,
-  hover: hovered,
-  pressed
-});
+const resolvePressableState = function () {
+  let {
+    pressed = false,
+    focused = false,
+    hovered = false
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let additionalState = arguments.length > 1 ? arguments[1] : undefined;
+  return { ...additionalState,
+    focus: focused,
+    hover: hovered,
+    pressed
+  };
+};
 /**
  * Takes a UDS `tokens` prop and, if it is a function, resolves it based on a state
  * object passed from the React Native `Pressable` component and optional extra properties.
@@ -106,14 +111,23 @@ const staticStyles = _StyleSheet.default.create(_Platform.default.select({
  */
 
 
-const getPressHandlersWithArgs = (pressableProps = {}, args = []) => {
+const getPressHandlersWithArgs = function () {
+  let pressableProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   // Allow handlers to be passed down for blur, hover, focus, pressIn, etc
-  const pressHandlers = Object.fromEntries(Object.entries(_pressProps.default.selectHandlers(pressableProps)).map(([key, handler]) => ({
-    [key]: (...defaultArgs) => {
-      // Pass each handler data on this button and current selection
-      handler(...args, ...defaultArgs);
-    }
-  })));
+  const pressHandlers = Object.fromEntries(Object.entries(_pressProps.default.selectHandlers(pressableProps)).map(_ref2 => {
+    let [key, handler] = _ref2;
+    return {
+      [key]: function () {
+        for (var _len = arguments.length, defaultArgs = new Array(_len), _key = 0; _key < _len; _key++) {
+          defaultArgs[_key] = arguments[_key];
+        }
+
+        // Pass each handler data on this button and current selection
+        handler(...args, ...defaultArgs);
+      }
+    };
+  }));
   return pressHandlers;
 };
 

package/lib/utils/props/clickProps.js

@@ -28,7 +28,8 @@ var _default = {
    * web-oriented tooling that injects web-oriented event handlers directly. For example, for
    * to support use with NextJS's 'next/link' component, which injects `onClick` prop into its child.
    */
-  toPressProps: props => Object.fromEntries(Object.entries(props).map(([originalName, value]) => {
+  toPressProps: props => Object.fromEntries(Object.entries(props).map(_ref => {
+    let [originalName, value] = _ref;
     const translatedName = clickHandlerMapping[originalName];
     return translatedName ? [translatedName, value] : [originalName, value];
   }))

package/lib/utils/props/getPropSelector.js

@@ -7,7 +7,10 @@ exports.default = getPropSelector;
 
 function getPropSelector(propTypes, regexp) {
   const keys = Object.keys(propTypes);
-  return props => Object.entries(props).reduce((items, [key, value]) => keys.includes(key) || regexp && regexp.test(key) ? { ...items,
-    [key]: value
-  } : items, {});
+  return props => Object.entries(props).reduce((items, _ref) => {
+    let [key, value] = _ref;
+    return keys.includes(key) || regexp && regexp.test(key) ? { ...items,
+      [key]: value
+    } : items;
+  }, {});
 }

package/lib/utils/props/handlerProps.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.textInputHandlerProps = exports.focusHandlerProps = void 0;
+exports.textInputHandlerProps = exports.focusHandlerProps = exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -21,13 +21,16 @@ const focusHandlerProps = {
      */
     onFocus: _propTypes.default.func
   },
-  select: ({
-    onBlur,
-    onFocus
-  }) => ({
-    onBlur,
-    onFocus
-  })
+  select: _ref => {
+    let {
+      onBlur,
+      onFocus
+    } = _ref;
+    return {
+      onBlur,
+      onFocus
+    };
+  }
 };
 exports.focusHandlerProps = focusHandlerProps;
 const textInputHandlerProps = {
@@ -52,17 +55,20 @@ const textInputHandlerProps = {
      */
     onSubmitEditing: _propTypes.default.func
   },
-  select: ({
-    onChange,
-    onChangeText,
-    onSubmit,
-    onSubmitEditing
-  }) => ({
-    onChange,
-    onChangeText,
-    onSubmit,
-    onSubmitEditing
-  })
+  select: _ref2 => {
+    let {
+      onChange,
+      onChangeText,
+      onSubmit,
+      onSubmitEditing
+    } = _ref2;
+    return {
+      onChange,
+      onChangeText,
+      onSubmit,
+      onSubmitEditing
+    };
+  }
 };
 exports.textInputHandlerProps = textInputHandlerProps;
 var _default = {

package/lib/utils/props/hrefAttrsProp.js

@@ -24,18 +24,21 @@ var _default = {
    * Takes a props object, bundles any hrefAttrs props present into one object
    * and returns that keyed as `hrefAttrs` and non-hrefAttrs props keyed as `rest`
    */
-  bundle: ({
-    download,
-    rel,
-    target,
-    ...rest
-  }) => ({
-    hrefAttrs: {
+  bundle: _ref => {
+    let {
       download,
       rel,
-      target
-    },
-    rest
-  })
+      target,
+      ...rest
+    } = _ref;
+    return {
+      hrefAttrs: {
+        download,
+        rel,
+        target
+      },
+      rest
+    };
+  }
 };
 exports.default = _default;