@telus-uds/components-base 1.8.0 → 1.8.3

package/lib/Tags/Tags.js

@@ -42,58 +42,62 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.pressProps, _utils.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.default.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.default.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__*/(0, _react.forwardRef)(({
-  variant,
-  tokens,
-  items = [],
-  values,
-  initialValues,
-  maxValues,
-  onChange,
-  readOnly = false,
-  inactive = false,
-  accessibilityRole = _Platform.default.select({
-    web: 'group',
-    default: 'none'
-  }),
-  ...rest
-}, ref) => {
+const Tags = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
+    variant,
+    tokens,
+    items = [],
+    values,
+    initialValues,
+    maxValues,
+    onChange,
+    readOnly = false,
+    inactive = false,
+    accessibilityRole = _Platform.default.select({
+      web: 'group',
+      default: 'none'
+    }),
+    ...rest
+  } = _ref2;
   const viewport = (0, _ViewportProvider.useViewport)();
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Tags', tokens, variant, {
     viewport
@@ -134,12 +138,13 @@ const Tags = /*#__PURE__*/(0, _react.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 = (0, _pressability.getPressHandlersWithArgs)(rest, [{
@@ -169,10 +174,11 @@ const Tags = /*#__PURE__*/(0, _react.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/TextInput/TextArea.js

@@ -53,21 +53,24 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
  * It is a more usable and accessible option than the HTML `placeholder` attribute.
  */
 
-const TextArea = /*#__PURE__*/(0, _react.forwardRef)(({
-  tokens,
-  variant = {},
-  ...rest
-}, ref) => {
+const TextArea = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    tokens,
+    variant = {},
+    ...rest
+  } = _ref;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('TextArea', tokens, variant);
   const [inputHeight, setInputHeight] = (0, _react.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.default.OS === 'web') {
       setInputHeight(height);
@@ -88,15 +91,18 @@ const TextArea = /*#__PURE__*/(0, _react.forwardRef)(({
     tokens: themeTokens
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, { ...supportsProps,
-    children: ({
-      inputId,
-      ...props
-    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
-      ref: ref,
-      ...inputProps,
-      nativeID: inputId,
-      ...props
-    })
+    children: _ref3 => {
+      let {
+        inputId,
+        ...props
+      } = _ref3;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
+        ref: ref,
+        ...inputProps,
+        nativeID: inputId,
+        ...props
+      });
+    }
   });
 });
 TextArea.displayName = 'TextArea';

package/lib/TextInput/TextInput.js

@@ -45,12 +45,14 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
  * their implementation on the web.
  */
 
-const TextInput = /*#__PURE__*/(0, _react.forwardRef)(({
-  tokens,
-  variant = {},
-  pattern,
-  ...rest
-}, ref) => {
+const TextInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    tokens,
+    variant = {},
+    pattern,
+    ...rest
+  } = _ref;
+
   _react.default.useEffect(() => {
     if (_Platform.default.OS === 'web' && pattern && ref.current) {
       // eslint-disable-next-line no-param-reassign
@@ -69,15 +71,18 @@ const TextInput = /*#__PURE__*/(0, _react.forwardRef)(({
     }
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, { ...supportsProps,
-    children: ({
-      inputId,
-      ...props
-    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
-      ref: ref,
-      ...inputProps,
-      nativeID: inputId,
-      ...props
-    })
+    children: _ref2 => {
+      let {
+        inputId,
+        ...props
+      } = _ref2;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
+        ref: ref,
+        ...inputProps,
+        nativeID: inputId,
+        ...props
+      });
+    }
   });
 });
 TextInput.displayName = 'TextInput';

package/lib/TextInput/TextInputBase.js

@@ -31,27 +31,29 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.textInputHandlerProps, _utils.textInputProps, _utils.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;
@@ -102,52 +104,62 @@ const selectInputStyles = ({
   };
 };
 
-const selectOuterBorderStyles = ({
-  outerBackgroundColor,
-  outerBorderWidth,
-  outerBorderColor,
-  borderRadius
-}) => ({
-  background: outerBackgroundColor,
-  ...(0, _ThemeProvider.applyOuterBorder)({
-    outerBorderColor,
+const selectOuterBorderStyles = _ref2 => {
+  let {
+    outerBackgroundColor,
     outerBorderWidth,
+    outerBorderColor,
     borderRadius
-  })
-});
+  } = _ref2;
+  return {
+    background: outerBackgroundColor,
+    ...(0, _ThemeProvider.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__*/(0, _react.forwardRef)(({
-  value,
-  height,
-  initialValue,
-  inactive,
-  readOnly,
-  onChange,
-  onChangeText,
-  onFocus,
-  onBlur,
-  onMouseOver,
-  onMouseOut,
-  tokens,
-  variant = {},
-  ...rest
-}, ref) => {
+const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
+  let {
+    value,
+    height,
+    initialValue,
+    inactive,
+    readOnly,
+    onChange,
+    onChangeText,
+    onFocus,
+    onBlur,
+    onMouseOver,
+    onMouseOut,
+    tokens,
+    variant = {},
+    ...rest
+  } = _ref5;
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
 
   const handleFocus = event => {

package/lib/TextInput/index.js

@@ -3,16 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "TextInput", {
+Object.defineProperty(exports, "TextArea", {
   enumerable: true,
   get: function () {
-    return _TextInput.default;
+    return _TextArea.default;
   }
 });
-Object.defineProperty(exports, "TextArea", {
+Object.defineProperty(exports, "TextInput", {
   enumerable: true,
   get: function () {
-    return _TextArea.default;
+    return _TextInput.default;
   }
 });
 

package/lib/ThemeProvider/ThemeProvider.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.ThemeSetterContext = exports.ThemeContext = exports.uninitialisedError = void 0;
+exports.uninitialisedError = exports.default = exports.ThemeSetterContext = exports.ThemeContext = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -26,10 +26,11 @@ exports.ThemeContext = ThemeContext;
 const ThemeSetterContext = /*#__PURE__*/(0, _react.createContext)(uninitialisedError);
 exports.ThemeSetterContext = ThemeSetterContext;
 
-const ThemeProvider = ({
-  children,
-  defaultTheme
-}) => {
+const ThemeProvider = _ref => {
+  let {
+    children,
+    defaultTheme
+  } = _ref;
   const [theme, setTheme] = (0, _react.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/ThemeProvider/index.js

@@ -7,19 +7,19 @@ var _exportNames = {
   useTheme: true,
   useSetTheme: true
 };
-Object.defineProperty(exports, "useTheme", {
+exports.default = void 0;
+Object.defineProperty(exports, "useSetTheme", {
   enumerable: true,
   get: function () {
-    return _useTheme.default;
+    return _useSetTheme.default;
   }
 });
-Object.defineProperty(exports, "useSetTheme", {
+Object.defineProperty(exports, "useTheme", {
   enumerable: true,
   get: function () {
-    return _useSetTheme.default;
+    return _useTheme.default;
   }
 });
-exports.default = void 0;
 
 var _ThemeProvider = _interopRequireDefault(require("./ThemeProvider"));
 

package/lib/ThemeProvider/useSetTheme.js

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

package/lib/ThemeProvider/useThemeTokens.js

@@ -45,7 +45,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @param {AppearanceSet} [states] - optional object containing current theme appearances dictated by user action or context
  * @returns {TokensSet} - the currently-applicable resolved set of theme tokens to apply
  */
-const useThemeTokens = (componentName, tokens = {}, variants = {}, states = {}) => {
+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 = (0, _useTheme.default)();
   const componentTheme = (0, _utils.getComponentTheme)(theme, componentName);
   const themeTokens = (0, _utils.getThemeTokens)(componentTheme, tokens, variants, states);
@@ -107,7 +110,9 @@ const useThemeTokens = (componentName, tokens = {}, variants = {}, states = {})
 
 exports.useThemeTokens = useThemeTokens;
 
-const useThemeTokensCallback = (componentName, tokens = {}, variants = {}) => {
+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 = (0, _useTheme.default)();
   const componentTheme = (0, _utils.getComponentTheme)(theme, componentName);
   const getThemeTokensCallback = (0, _react.useCallback)((states, tokenOverrides) => {

package/lib/ThemeProvider/utils/styles.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.applyTextStyles = applyTextStyles;
+exports.applyOuterBorder = void 0;
 exports.applyShadowToken = applyShadowToken;
+exports.applyTextStyles = applyTextStyles;
 exports.verticalAlignRow = verticalAlignRow;
-exports.applyOuterBorder = void 0;
 
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 
@@ -19,16 +19,17 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * don't map directly to cross-platform design token values.
  */
 // Make design tokens fit React Native's text styles' specific requirements and quirks
-function applyTextStyles({
-  fontSize,
-  fontScaleCap,
-  lineHeight,
-  letterSpacing,
-  fontWeight = '400',
-  fontName,
-  fontStyle = 'normal',
-  ...rest
-}) {
+function applyTextStyles(_ref) {
+  let {
+    fontSize,
+    fontScaleCap,
+    lineHeight,
+    letterSpacing,
+    fontWeight = '400',
+    fontName,
+    fontStyle = 'normal',
+    ...rest
+  } = _ref;
   const styles = { ...rest
   };
 
@@ -89,14 +90,15 @@ function applyShadowToken(shadowToken) {
   return applyShadow();
 }
 
-function applyWebShadow({
-  inset,
-  color = '',
-  offsetX = 0,
-  offsetY = 0,
-  blur = 0,
-  spread = 0
-}) {
+function applyWebShadow(_ref2) {
+  let {
+    inset,
+    color = '',
+    offsetX = 0,
+    offsetY = 0,
+    blur = 0,
+    spread = 0
+  } = _ref2;
   const insetString = inset ? 'inset ' : '';
   const boxShadow = {
     boxShadow: `${insetString}${offsetX}px ${offsetY}px ${blur}px ${spread}px ${color}`
@@ -128,14 +130,15 @@ function applyAndroidShadow(shadowToken) {
   return {};
 }
 
-function applyIosShadow({
-  inset,
-  color,
-  offsetX,
-  offsetY,
-  spread,
-  blur
-}) {
+function applyIosShadow(_ref3) {
+  let {
+    inset,
+    color,
+    offsetX,
+    offsetY,
+    spread,
+    blur
+  } = _ref3;
   // React Native iOS doesn't support inset shadows.
   // TODO: maybe use a library or workaround for inset shadows. This is a sizable task and would
   // involve changing component implementations to use a custom view, can't be done with styles alone.
@@ -167,7 +170,8 @@ const verticalAlignToFlexRowAlign = {
   bottom: 'flex-end'
 };
 
-function verticalAlignRow(verticalAlign, reverse = false) {
+function verticalAlignRow(verticalAlign) {
+  let reverse = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   return {
     flexDirection: reverse ? 'row-reverse' : 'row',
     alignItems: verticalAlignToFlexRowAlign[verticalAlign]
@@ -179,17 +183,20 @@ function verticalAlignRow(verticalAlign, reverse = false) {
  */
 
 
-const applyOuterBorder = ({
-  outerBorderColor,
-  outerBorderWidth = 0,
-  outerBorderGap = 0,
-  borderRadius = 0
-}) => ({
-  margin: 0 - outerBorderWidth - outerBorderGap,
-  padding: outerBorderGap,
-  borderRadius: borderRadius + outerBorderGap + outerBorderWidth,
-  borderWidth: outerBorderWidth,
-  borderColor: outerBorderColor
-});
+const applyOuterBorder = _ref4 => {
+  let {
+    outerBorderColor,
+    outerBorderWidth = 0,
+    outerBorderGap = 0,
+    borderRadius = 0
+  } = _ref4;
+  return {
+    margin: 0 - outerBorderWidth - outerBorderGap,
+    padding: outerBorderGap,
+    borderRadius: borderRadius + outerBorderGap + outerBorderWidth,
+    borderWidth: outerBorderWidth,
+    borderColor: outerBorderColor
+  };
+};
 
 exports.applyOuterBorder = applyOuterBorder;