@telus-uds/components-base 1.8.1 → 1.8.4

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
   };
 
@@ -50,7 +51,7 @@ function applyTextStyles({
   if (fontName) {
     // Don't set undefined font families. May need some validation here that the font is available.
     // Android doesn't recognise font weights natively so apply custom font weights via `fontFamily`.
-    styles.fontFamily = `${fontName}${fontWeight}${fontStyle}`;
+    styles.fontFamily = "".concat(fontName).concat(fontWeight).concat(fontStyle);
   } else if (fontWeight) {
     // If using system default font, apply the font weight directly.
     // Font weight support in Android is limited to 'bold' or anything else === 'normal'.
@@ -89,17 +90,18 @@ 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}`
+    boxShadow: "".concat(insetString).concat(offsetX, "px ").concat(offsetY, "px ").concat(blur, "px ").concat(spread, "px ").concat(color)
   };
   return boxShadow;
 }
@@ -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;

package/lib/ThemeProvider/utils/theme-tokens.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.validateThemeTokensVersion = exports.toArray = exports.getThemeTokens = exports.mergeAppearances = exports.validateThemeTokens = exports.resolveThemeTokens = exports.doesThemeRuleApply = exports.doesThemeConditionApply = exports.getComponentTheme = void 0;
+exports.validateThemeTokensVersion = exports.validateThemeTokens = exports.toArray = exports.resolveThemeTokens = exports.mergeAppearances = exports.getThemeTokens = exports.getComponentTheme = exports.doesThemeRuleApply = exports.doesThemeConditionApply = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -28,19 +28,19 @@ const getComponentTheme = (theme, componentName) => {
   // Give clear and understandable error messages for common dev errors, for example,
   // typo in component name, missing export or accessing old version of theme
   if (!theme) {
-    throw new Error(`Called useTheme's getStyle on "${componentName}" with no theme provided`);
+    throw new Error("Called useTheme's getStyle on \"".concat(componentName, "\" with no theme provided"));
   }
 
   const themeName = ((_theme$metadata = theme.metadata) === null || _theme$metadata === void 0 ? void 0 : _theme$metadata.name) || '';
 
   if (!theme.components) {
-    throw new Error(`Theme "${themeName}" has no components defined (looking for "${componentName}")`);
+    throw new Error("Theme \"".concat(themeName, "\" has no components defined (looking for \"").concat(componentName, "\")"));
   }
 
   const componentTheme = theme.components[componentName];
 
   if (!componentTheme) {
-    throw new Error(`Theme "${themeName}" does not have styles for component "${componentName}"`);
+    throw new Error("Theme \"".concat(themeName, "\" does not have styles for component \"").concat(componentName, "\""));
   }
 
   return componentTheme;
@@ -48,9 +48,12 @@ const getComponentTheme = (theme, componentName) => {
 
 exports.getComponentTheme = getComponentTheme;
 
-const doesThemeConditionApply = ([key, value], appearances) => {
+const doesThemeConditionApply = (_ref, appearances) => {
+  var _appearances$key;
+
+  let [key, value] = _ref;
   // use null rather than undefined so we can serialise the value in themes
-  const appearanceValue = appearances[key] ?? null;
+  const appearanceValue = (_appearances$key = appearances[key]) !== null && _appearances$key !== void 0 ? _appearances$key : null;
   return Array.isArray(value) ? value.includes(appearanceValue) : value === appearanceValue;
 };
 
@@ -77,12 +80,18 @@ const doesThemeRuleApply = (rule, appearances) => Object.entries(rule.if).every(
 
 exports.doesThemeRuleApply = doesThemeRuleApply;
 
-const resolveThemeTokens = (defaultTokens, appearances = {}, tokenOverrides) => {
+const resolveThemeTokens = function (defaultTokens) {
+  let appearances = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  let tokenOverrides = arguments.length > 2 ? arguments[2] : undefined;
+
   const resolve = tokens => typeof tokens === 'function' ? tokens(appearances) : tokens;
 
   if (!tokenOverrides) return resolve(defaultTokens);
-  return Object.entries(resolve(tokenOverrides)).reduce((mergedTokens, [tokenName, tokenValue]) => tokenValue === undefined ? mergedTokens : { ...mergedTokens,
-    [tokenName]: tokenValue
+  return Object.entries(resolve(tokenOverrides)).reduce((mergedTokens, _ref2) => {
+    let [tokenName, tokenValue] = _ref2;
+    return tokenValue === undefined ? mergedTokens : { ...mergedTokens,
+      [tokenName]: tokenValue
+    };
   }, resolve(defaultTokens));
 };
 /**
@@ -122,9 +131,13 @@ const validateThemeTokens = (themeTokens, validator, componentName) => {
 
 exports.validateThemeTokens = validateThemeTokens;
 
-const mergeAppearances = (variants = {}, states) => states ? { ...states,
-  ...variants
-} : variants;
+const mergeAppearances = function () {
+  let variants = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let states = arguments.length > 1 ? arguments[1] : undefined;
+  return states ? { ...states,
+    ...variants
+  } : variants;
+};
 /**
  * Get a set of theme tokens by applying a theme's component rules based on a component's variants and state.
  *
@@ -140,10 +153,13 @@ const mergeAppearances = (variants = {}, states) => states ? { ...states,
 
 exports.mergeAppearances = mergeAppearances;
 
-const getThemeTokens = ({
-  rules = [],
-  tokens: defaultThemeTokens = {}
-}, tokensProp, variants = {}, states) => {
+const getThemeTokens = function (_ref3, tokensProp) {
+  let {
+    rules = [],
+    tokens: defaultThemeTokens = {}
+  } = _ref3;
+  let variants = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  let states = arguments.length > 3 ? arguments[3] : undefined;
   const appearances = mergeAppearances(variants, states); // TODO: if in dev mode, validate the appearances and provided propTokens
   // Get the theme's default tokens set and merge tokens from applicable theme rules over it
 
@@ -178,11 +194,7 @@ const validateThemeTokensVersion = theme => {
   const actualThemeTokensVersion = theme === null || theme === void 0 ? void 0 : (_theme$metadata2 = theme.metadata) === null || _theme$metadata2 === void 0 ? void 0 : _theme$metadata2.themeTokensVersion;
 
   if (!(0, _satisfies.default)(actualThemeTokensVersion, expectedThemeTokensVersion)) {
-    throw new Error(`Invalid UDS token schema version detected.
-
-The UDS base components ${_package.default.name} v${_package.default.version} are only compatible with UDS themes that are built with @telus-uds/system-theme-tokens version that is semver compatible with ${expectedThemeTokensVersion}. The current theme was built with @telus-uds/system-theme-tokens v${actualThemeTokensVersion}.
-
-If you see this error than most likely you have attempted to install ${_package.default.name} and a UDS theme manually because you are building a multi-brand application. If you are building a single brand application, consider installing the brand specific design system package such as @telus-uds/ds-allium. For more information, see https://github.com/telus/universal-design-system/blob/main/packages/docs-uds/docs/multi-brand-usage.md`);
+    throw new Error("Invalid UDS token schema version detected.\n\nThe UDS base components ".concat(_package.default.name, " v").concat(_package.default.version, " are only compatible with UDS themes that are built with @telus-uds/system-theme-tokens version that is semver compatible with ").concat(expectedThemeTokensVersion, ". The current theme was built with @telus-uds/system-theme-tokens v").concat(actualThemeTokensVersion, ".\n\nIf you see this error than most likely you have attempted to install ").concat(_package.default.name, " and a UDS theme manually because you are building a multi-brand application. If you are building a single brand application, consider installing the brand specific design system package such as @telus-uds/ds-allium. For more information, see https://github.com/telus/universal-design-system/blob/main/packages/docs-uds/docs/multi-brand-usage.md"));
   }
 };