@telus-uds/components-base 1.8.1 → 1.8.4

package/lib-module/Tabs/TabsItem.js

@@ -17,56 +17,65 @@ const {
   getItemPositionLayoutHandler
 } = horizontalScrollUtils;
 
-const selectHighlightBarStyles = ({
-  highlightColor,
-  highlightBarBorderRadius = 0,
-  highlightBarBorderWidth = 0,
-  highlightBarHeight = 0
-}) => ({
-  backgroundColor: highlightColor,
-  borderColor: highlightColor,
-  height: highlightBarHeight + highlightBarBorderWidth * 2,
-  borderRadius: highlightBarBorderRadius,
-  borderWidth: highlightBarBorderWidth,
-  bottom: -1 * (highlightBarHeight + highlightBarBorderWidth),
-  left: -1 * highlightBarBorderWidth,
-  right: -1 * highlightBarBorderWidth,
-  zIndex: 1 + highlightBarBorderWidth
-});
+const selectHighlightBarStyles = _ref => {
+  let {
+    highlightColor,
+    highlightBarBorderRadius = 0,
+    highlightBarBorderWidth = 0,
+    highlightBarHeight = 0
+  } = _ref;
+  return {
+    backgroundColor: highlightColor,
+    borderColor: highlightColor,
+    height: highlightBarHeight + highlightBarBorderWidth * 2,
+    borderRadius: highlightBarBorderRadius,
+    borderWidth: highlightBarBorderWidth,
+    bottom: -1 * (highlightBarHeight + highlightBarBorderWidth),
+    left: -1 * highlightBarBorderWidth,
+    right: -1 * highlightBarBorderWidth,
+    zIndex: 1 + highlightBarBorderWidth
+  };
+};
 
-const selectHighlightTriangleStyles = ({
-  highlightColor,
-  highlightTriangleSize
-}) => ({
-  container: {
-    bottom: 0 - highlightTriangleSize * 2
-  },
-  triangle: {
-    height: 0,
-    width: 0,
-    borderWidth: highlightTriangleSize,
-    borderTopColor: highlightColor,
-    borderBottomColor: 'transparent',
-    borderLeftColor: 'transparent',
-    borderRightColor: 'transparent'
-  }
-});
+const selectHighlightTriangleStyles = _ref2 => {
+  let {
+    highlightColor,
+    highlightTriangleSize
+  } = _ref2;
+  return {
+    container: {
+      bottom: 0 - highlightTriangleSize * 2
+    },
+    triangle: {
+      height: 0,
+      width: 0,
+      borderWidth: highlightTriangleSize,
+      borderTopColor: highlightColor,
+      borderBottomColor: 'transparent',
+      borderLeftColor: 'transparent',
+      borderRightColor: 'transparent'
+    }
+  };
+};
 
-const selectContainerStyles = ({
-  backgroundColor,
-  borderColor,
-  borderWidth = 0,
-  borderRadius,
-  paddingHorizontal = 0,
-  paddingVertical = 0
-}) => ({
-  backgroundColor,
-  borderColor,
-  borderWidth,
-  borderRadius,
-  paddingHorizontal: paddingHorizontal - borderWidth,
-  paddingVertical: paddingVertical - borderWidth
-});
+const selectContainerStyles = _ref3 => {
+  let {
+    backgroundColor,
+    borderColor,
+    borderWidth = 0,
+    borderRadius,
+    paddingHorizontal = 0,
+    paddingVertical = 0
+  } = _ref3;
+  return {
+    backgroundColor,
+    borderColor,
+    borderWidth,
+    borderRadius,
+    paddingHorizontal: paddingHorizontal - borderWidth,
+    paddingVertical: paddingVertical - borderWidth
+  };
+};
 /**
  * Item within a Tabs component representing one tab of content. May be rendered as a link
  * or as a "menuitem" button depending on whether 'href' is passed.
@@ -75,23 +84,22 @@ const selectContainerStyles = ({
  */
 
 
-const TabsItem = /*#__PURE__*/forwardRef(({
-  href,
-  variant,
-  tokens,
-  selected,
-  itemPositions,
-  index,
-  children,
-  accessibilityRole = href ? 'link' : 'tab',
-  accessibilityState = Platform.OS === 'web' && accessibilityRole === 'link' ? // Web links can't be aria-selected but can be aria-current
-  {
-    current: selected ? 'page' : false
-  } : {
-    selected
-  },
-  ...rawRest
-}, ref) => {
+const TabsItem = /*#__PURE__*/forwardRef((_ref4, ref) => {
+  let {
+    href,
+    variant,
+    tokens,
+    selected,
+    itemPositions,
+    index,
+    children,
+    accessibilityRole,
+    accessibilityCurrent = Platform.OS === 'web' && accessibilityRole === 'link' && selected ? 'page' : undefined,
+    accessibilityState = accessibilityRole === 'tab' ? {
+      selected
+    } : undefined,
+    ...rawRest
+  } = _ref4;
   // Convert onClick etc to onPress etc if used in an integration
   const {
     onPress,
@@ -119,12 +127,13 @@ const TabsItem = /*#__PURE__*/forwardRef(({
   const openHref = href && linkProps.handleHref({
     href
   });
-  const handlePress = onPress || openHref ? (...args) => {
-    if (onPress) onPress(...args);
-    if (openHref) openHref(...args);
+  const handlePress = onPress || openHref ? function () {
+    if (onPress) onPress(...arguments);
+    if (openHref) openHref(...arguments);
   } : undefined;
   const selectedProps = selectProps({
     accessibilityRole,
+    accessibilityCurrent,
     accessibilityState,
     ...rest
   });

package/lib-module/Tags/Tags.js

@@ -15,58 +15,62 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, pressProps, viewProps]);
 
-const selectIconTextTokens = ({
-  icon,
-  iconPosition,
-  iconSpace,
-  iconSize,
-  iconColor,
-  iconBackground,
-  iconBorderRadius,
-  iconAlignSelf,
-  iconPadding,
-  iconTranslateX,
-  iconTranslateY
-}) => ({
-  icon,
-  iconPosition,
-  iconSpace,
-  iconWrapperStyle: {
-    backgroundColor: iconBackground,
-    borderRadius: iconBorderRadius,
-    alignSelf: iconAlignSelf,
-    padding: iconPadding,
-    ...Platform.select({
-      // TODO: https://github.com/telus/universal-design-system/issues/487
-      web: {
-        transition: 'color 200ms, background 200ms'
-      }
-    })
-  },
-  iconTokens: {
-    size: iconSize,
-    color: iconColor,
-    translateX: iconTranslateX,
-    translateY: iconTranslateY
-  }
-});
+const selectIconTextTokens = _ref => {
+  let {
+    icon,
+    iconPosition,
+    iconSpace,
+    iconSize,
+    iconColor,
+    iconBackground,
+    iconBorderRadius,
+    iconAlignSelf,
+    iconPadding,
+    iconTranslateX,
+    iconTranslateY
+  } = _ref;
+  return {
+    icon,
+    iconPosition,
+    iconSpace,
+    iconWrapperStyle: {
+      backgroundColor: iconBackground,
+      borderRadius: iconBorderRadius,
+      alignSelf: iconAlignSelf,
+      padding: iconPadding,
+      ...Platform.select({
+        // TODO: https://github.com/telus/universal-design-system/issues/487
+        web: {
+          transition: 'color 200ms, background 200ms'
+        }
+      })
+    },
+    iconTokens: {
+      size: iconSize,
+      color: iconColor,
+      translateX: iconTranslateX,
+      translateY: iconTranslateY
+    }
+  };
+};
 
-const Tags = /*#__PURE__*/forwardRef(({
-  variant,
-  tokens,
-  items = [],
-  values,
-  initialValues,
-  maxValues,
-  onChange,
-  readOnly = false,
-  inactive = false,
-  accessibilityRole = Platform.select({
-    web: 'group',
-    default: 'none'
-  }),
-  ...rest
-}, ref) => {
+const Tags = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    variant,
+    tokens,
+    items = [],
+    values,
+    initialValues,
+    maxValues,
+    onChange,
+    readOnly = false,
+    inactive = false,
+    accessibilityRole = Platform.select({
+      web: 'group',
+      default: 'none'
+    }),
+    ...rest
+  } = _ref2;
   const viewport = useViewport();
   const themeTokens = useThemeTokens('Tags', tokens, variant, {
     viewport
@@ -98,7 +102,7 @@ const Tags = /*#__PURE__*/forwardRef(({
   const uniqueFields = ['id', 'label'];
 
   if (!containUniqueFields(items, uniqueFields)) {
-    throw new Error(`Tags items must have unique ${uniqueFields.join(', ')}`);
+    throw new Error("Tags items must have unique ".concat(uniqueFields.join(', ')));
   }
 
   return /*#__PURE__*/_jsx(StackWrap, {
@@ -107,12 +111,13 @@ const Tags = /*#__PURE__*/forwardRef(({
     space: space,
     direction: direction,
     tokens: stackTokens,
-    children: items.map(({
-      label,
-      id = label,
-      ref: itemRef,
-      ...itemRest
-    }, index) => {
+    children: items.map((_ref3, index) => {
+      let {
+        label,
+        id = label,
+        ref: itemRef,
+        ...itemRest
+      } = _ref3;
       const isSelected = currentValues.includes(id); // Pass an object of relevant component state as first argument for any passed-in press handlers
 
       const pressHandlers = getPressHandlersWithArgs(rest, [{
@@ -142,10 +147,11 @@ const Tags = /*#__PURE__*/forwardRef(({
         selected: isSelected,
         inactive: inactive,
         ...itemProps,
-        children: ({
-          textStyles,
-          ...buttonState
-        }) => {
+        children: _ref4 => {
+          let {
+            textStyles,
+            ...buttonState
+          } = _ref4;
           // TODO: once Icon/IconButton designs are stable, see if this sort of styling around
           // an icon should go in Icon itself, or possibly via an IconText token set. Related issues:
           // - Icon: https://github.com/telus/universal-design-system/issues/327

package/lib-module/TextInput/TextArea.js

@@ -32,21 +32,24 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, foc
  * It is a more usable and accessible option than the HTML `placeholder` attribute.
  */
 
-const TextArea = /*#__PURE__*/forwardRef(({
-  tokens,
-  variant = {},
-  ...rest
-}, ref) => {
+const TextArea = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    tokens,
+    variant = {},
+    ...rest
+  } = _ref;
   const themeTokens = useThemeTokens('TextArea', tokens, variant);
   const [inputHeight, setInputHeight] = useState(); // adjust the text area's height as new lines are added to the content
 
-  const onHeightChange = ({
-    nativeEvent: {
-      contentSize: {
-        height
+  const onHeightChange = _ref2 => {
+    let {
+      nativeEvent: {
+        contentSize: {
+          height
+        }
       }
-    }
-  }) => {
+    } = _ref2;
+
     // on native this is happens out of the box
     if (Platform.OS === 'web') {
       setInputHeight(height);
@@ -67,15 +70,18 @@ const TextArea = /*#__PURE__*/forwardRef(({
     tokens: themeTokens
   };
   return /*#__PURE__*/_jsx(InputSupports, { ...supportsProps,
-    children: ({
-      inputId,
-      ...props
-    }) => /*#__PURE__*/_jsx(TextInputBase, {
-      ref: ref,
-      ...inputProps,
-      nativeID: inputId,
-      ...props
-    })
+    children: _ref3 => {
+      let {
+        inputId,
+        ...props
+      } = _ref3;
+      return /*#__PURE__*/_jsx(TextInputBase, {
+        ref: ref,
+        ...inputProps,
+        nativeID: inputId,
+        ...props
+      });
+    }
   });
 });
 TextArea.displayName = 'TextArea';

package/lib-module/TextInput/TextInput.js

@@ -25,12 +25,13 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, foc
  * their implementation on the web.
  */
 
-const TextInput = /*#__PURE__*/forwardRef(({
-  tokens,
-  variant = {},
-  pattern,
-  ...rest
-}, ref) => {
+const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    tokens,
+    variant = {},
+    pattern,
+    ...rest
+  } = _ref;
   React.useEffect(() => {
     if (Platform.OS === 'web' && pattern && ref.current) {
       // eslint-disable-next-line no-param-reassign
@@ -48,15 +49,18 @@ const TextInput = /*#__PURE__*/forwardRef(({
     }
   };
   return /*#__PURE__*/_jsx(InputSupports, { ...supportsProps,
-    children: ({
-      inputId,
-      ...props
-    }) => /*#__PURE__*/_jsx(TextInputBase, {
-      ref: ref,
-      ...inputProps,
-      nativeID: inputId,
-      ...props
-    })
+    children: _ref2 => {
+      let {
+        inputId,
+        ...props
+      } = _ref2;
+      return /*#__PURE__*/_jsx(TextInputBase, {
+        ref: ref,
+        ...inputProps,
+        nativeID: inputId,
+        ...props
+      });
+    }
   });
 });
 TextInput.displayName = 'TextInput';

package/lib-module/TextInput/TextInputBase.js

@@ -10,27 +10,29 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, textInputHandlerProps, textInputProps, viewProps]);
 
-const selectInputStyles = ({
-  backgroundColor,
-  color,
-  borderWidth = 0,
-  borderColor,
-  borderRadius,
-  paddingTop = 0,
-  paddingBottom = 0,
-  paddingLeft,
-  paddingRight = 0,
-  fontName,
-  fontSize,
-  fontWeight,
-  lineHeight,
-  icon,
-  iconSize = 0,
-  minLines,
-  maxLines,
-  width,
-  height
-}, inactive) => {
+const selectInputStyles = (_ref, inactive) => {
+  let {
+    backgroundColor,
+    color,
+    borderWidth = 0,
+    borderColor,
+    borderRadius,
+    paddingTop = 0,
+    paddingBottom = 0,
+    paddingLeft,
+    paddingRight = 0,
+    fontName,
+    fontSize,
+    fontWeight,
+    lineHeight,
+    icon,
+    iconSize = 0,
+    minLines,
+    maxLines,
+    width,
+    height
+  } = _ref;
+
   // Subtract border width from padding so overall input width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
   const offsetBorder = value => typeof value === 'number' ? Math.max(0, value - borderWidth) : value;
@@ -79,52 +81,62 @@ const selectInputStyles = ({
   };
 };
 
-const selectOuterBorderStyles = ({
-  outerBackgroundColor,
-  outerBorderWidth,
-  outerBorderColor,
-  borderRadius
-}) => ({
-  background: outerBackgroundColor,
-  ...applyOuterBorder({
-    outerBorderColor,
+const selectOuterBorderStyles = _ref2 => {
+  let {
+    outerBackgroundColor,
     outerBorderWidth,
+    outerBorderColor,
     borderRadius
-  })
-});
+  } = _ref2;
+  return {
+    background: outerBackgroundColor,
+    ...applyOuterBorder({
+      outerBorderColor,
+      outerBorderWidth,
+      borderRadius
+    })
+  };
+};
 
-const selectIconTokens = ({
-  iconSize,
-  iconColor
-}) => ({
-  size: iconSize,
-  color: iconColor
-});
+const selectIconTokens = _ref3 => {
+  let {
+    iconSize,
+    iconColor
+  } = _ref3;
+  return {
+    size: iconSize,
+    color: iconColor
+  };
+};
 
-const selectIconContainerStyles = ({
-  paddingRight,
-  paddingBottom
-}) => ({
-  paddingRight,
-  paddingBottom
-});
+const selectIconContainerStyles = _ref4 => {
+  let {
+    paddingRight,
+    paddingBottom
+  } = _ref4;
+  return {
+    paddingRight,
+    paddingBottom
+  };
+};
 
-const TextInputBase = /*#__PURE__*/forwardRef(({
-  value,
-  height,
-  initialValue,
-  inactive,
-  readOnly,
-  onChange,
-  onChangeText,
-  onFocus,
-  onBlur,
-  onMouseOver,
-  onMouseOut,
-  tokens,
-  variant = {},
-  ...rest
-}, ref) => {
+const TextInputBase = /*#__PURE__*/forwardRef((_ref5, ref) => {
+  let {
+    value,
+    height,
+    initialValue,
+    inactive,
+    readOnly,
+    onChange,
+    onChangeText,
+    onFocus,
+    onBlur,
+    onMouseOver,
+    onMouseOut,
+    tokens,
+    variant = {},
+    ...rest
+  } = _ref5;
   const [isFocused, setIsFocused] = useState(false);
 
   const handleFocus = event => {

package/lib-module/ThemeProvider/ThemeProvider.js

@@ -6,10 +6,11 @@ export const uninitialisedError = new Error('Theme context used outside of Theme
 export const ThemeContext = /*#__PURE__*/createContext(uninitialisedError);
 export const ThemeSetterContext = /*#__PURE__*/createContext(uninitialisedError);
 
-const ThemeProvider = ({
-  children,
-  defaultTheme
-}) => {
+const ThemeProvider = _ref => {
+  let {
+    children,
+    defaultTheme
+  } = _ref;
   const [theme, setTheme] = useState(defaultTheme); // Validate the theme tokens version on every render.
   // This will intentionally break the application when attempting to use an invalid theme.
   // This will surface an incompatibility quickly rather than allowing the potential for strange bugs due to missing or incompatible tokens.

package/lib-module/ThemeProvider/useSetTheme.js

@@ -10,9 +10,12 @@ const useSetTheme = () => {
   } // Merge provided object into current theme
 
 
-  const editTheme = useCallback(newTheme => setTheme((oldTheme = {}) => ({ ...oldTheme,
-    ...newTheme
-  })), [setTheme]);
+  const editTheme = useCallback(newTheme => setTheme(function () {
+    let oldTheme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return { ...oldTheme,
+      ...newTheme
+    };
+  }), [setTheme]);
   return {
     setTheme,
     editTheme

package/lib-module/ThemeProvider/useThemeTokens.js

@@ -34,7 +34,10 @@ import { getComponentTheme, getThemeTokens, resolveThemeTokens, mergeAppearances
  * @returns {TokensSet} - the currently-applicable resolved set of theme tokens to apply
  */
 
-export const useThemeTokens = (componentName, tokens = {}, variants = {}, states = {}) => {
+export const useThemeTokens = function (componentName) {
+  let tokens = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  let variants = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  let states = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
   const theme = useTheme();
   const componentTheme = getComponentTheme(theme, componentName);
   const themeTokens = getThemeTokens(componentTheme, tokens, variants, states);
@@ -93,7 +96,9 @@ export const useThemeTokens = (componentName, tokens = {}, variants = {}, states
  *      e.g. if one theme tokens callback needs to pass certain token overrides to another.
  */
 
-export const useThemeTokensCallback = (componentName, tokens = {}, variants = {}) => {
+export const useThemeTokensCallback = function (componentName) {
+  let tokens = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  let variants = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   const theme = useTheme();
   const componentTheme = getComponentTheme(theme, componentName);
   const getThemeTokensCallback = useCallback((states, tokenOverrides) => {