@telus-uds/components-base 1.8.0 → 1.8.3

package/lib/TooltipButton/TooltipButton.js

@@ -23,24 +23,30 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 
-const selectInnerContainerStyles = ({
-  borderRadius,
-  width
-}) => ({
-  borderRadius,
-  width
-});
+const selectInnerContainerStyles = _ref => {
+  let {
+    borderRadius,
+    width
+  } = _ref;
+  return {
+    borderRadius,
+    width
+  };
+};
 
-const selectIconTokens = ({
-  iconSize,
-  iconColor
-  /* iconScale = 1 */
+const selectIconTokens = _ref2 => {
+  let {
+    iconSize,
+    iconColor
+    /* iconScale = 1 */
 
-}) => ({
-  size: iconSize,
-  color: iconColor // scale: iconScale TODO re-enable with icon component
+  } = _ref2;
+  return {
+    size: iconSize,
+    color: iconColor // scale: iconScale TODO re-enable with icon component
 
-});
+  };
+};
 /**
  * `TooltipButton` is a helper component used as a default control for the `Tooltip` component.
  * In fact though, it isn't actually a pressable - it's meant to be used as pressable's content.
@@ -48,12 +54,13 @@ const selectIconTokens = ({
  */
 
 
-const TooltipButton = ({
-  pressableState,
-  tokens,
-  variant,
-  ...rest
-}) => {
+const TooltipButton = _ref3 => {
+  let {
+    pressableState,
+    tokens,
+    variant,
+    ...rest
+  } = _ref3;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('TooltipButton', tokens, variant, pressableState);
   const {
     icon: IconComponent

package/lib/Typography/Typography.js

@@ -35,39 +35,43 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const [selectContainerProps, selectedContainerPropTypes] = (0, _utils2.selectSystemProps)([_utils2.a11yProps, _utils2.viewProps]);
 const [selectTextProps, selectedTextPropTypes] = (0, _utils2.selectSystemProps)([_utils2.textProps]);
 
-const selectTextStyles = ({
-  fontWeight,
-  fontSize,
-  color,
-  lineHeight,
-  fontName,
-  textAlign,
-  textTransform,
-  letterSpacing
-}) => (0, _utils.applyTextStyles)({
-  fontWeight,
-  fontSize,
-  color,
-  lineHeight,
-  fontName,
-  textAlign,
-  textTransform,
-  letterSpacing
-}); // General-purpose flexible theme-neutral base component for text
-
-
-const Typography = /*#__PURE__*/(0, _react.forwardRef)(({
-  children,
-  variant,
-  heading,
-  tag = typeof heading === 'string' ? heading : undefined,
-  accessibilityRole = heading === true ? 'header' : undefined,
-  block = false,
-  align = undefined,
-  tokens,
-  dataSet,
-  ...rest
-}, ref) => {
+const selectTextStyles = _ref => {
+  let {
+    fontWeight,
+    fontSize,
+    color,
+    lineHeight,
+    fontName,
+    textAlign,
+    textTransform,
+    letterSpacing
+  } = _ref;
+  return (0, _utils.applyTextStyles)({
+    fontWeight,
+    fontSize,
+    color,
+    lineHeight,
+    fontName,
+    textAlign,
+    textTransform,
+    letterSpacing
+  });
+}; // General-purpose flexible theme-neutral base component for text
+
+
+const Typography = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
+    children,
+    variant,
+    heading,
+    tag = typeof heading === 'string' ? heading : undefined,
+    accessibilityRole = heading === true ? 'header' : undefined,
+    block = false,
+    align = undefined,
+    tokens,
+    dataSet,
+    ...rest
+  } = _ref2;
   const viewport = (0, _ViewportProvider.useViewport)();
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Typography', tokens, variant, {
     viewport

package/lib/ViewportProvider/ViewportProvider.js

@@ -26,9 +26,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * Provides an up-to-date viewport value from system-constants, available via the `useViewport` hook
  */
-const ViewportProvider = ({
-  children
-}) => {
+const ViewportProvider = _ref => {
+  let {
+    children
+  } = _ref;
   // Default to the smallest viewport for mobile-first SSR. On client side, this is updated
   // by useViewportListener in a layout effect before anything is shown to the user.
   const [viewport, setViewport] = (0, _react.useState)(_systemConstants.viewports.keys[0]);

package/lib/ViewportProvider/useViewportListener.js

@@ -38,9 +38,12 @@ const useViewportListenerCSR = setViewport => {
   (0, _react.useLayoutEffect)(() => {
     setViewport(lookupViewport());
 
-    const onChange = ({
-      window
-    }) => setViewport(_systemConstants.viewports.select(window.width));
+    const onChange = _ref => {
+      let {
+        window
+      } = _ref;
+      return setViewport(_systemConstants.viewports.select(window.width));
+    };
 
     const listener = _Dimensions.default.addEventListener('change', onChange); // From RN 0.65.0, Dimensions.removeEventListener is deprecated for `remove` on addEventListener return value;
     // however, that is not available in RN <=0.64.X, therefore not in any Expo release as of 2021 (Expo SDK 43).

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,11 +17,12 @@ 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);

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;
 };