@telus-uds/components-base 1.7.1 → 1.8.2

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;

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"));
 
@@ -48,7 +48,8 @@ const getComponentTheme = (theme, componentName) => {
 
 exports.getComponentTheme = getComponentTheme;
 
-const doesThemeConditionApply = ([key, value], appearances) => {
+const doesThemeConditionApply = (_ref, appearances) => {
+  let [key, value] = _ref;
   // use null rather than undefined so we can serialise the value in themes
   const appearanceValue = appearances[key] ?? null;
   return Array.isArray(value) ? value.includes(appearanceValue) : value === appearanceValue;
@@ -77,12 +78,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 +129,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 +151,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
 

package/lib/ToggleSwitch/ToggleSwitch.js

@@ -43,83 +43,100 @@ const selectButtonTokens = tokens => (0, _utils.selectTokens)('Button', { ...tok
 }); // Map and rename icon-specific tokens to name used within Icon
 
 
-const selectIconTokens = ({
-  iconSize,
-  iconColor
-}) => ({
-  size: iconSize,
-  color: iconColor
-});
+const selectIconTokens = _ref => {
+  let {
+    iconSize,
+    iconColor
+  } = _ref;
+  return {
+    size: iconSize,
+    color: iconColor
+  };
+};
 
-const selectTrackStyles = ({
-  trackBorderWidth,
-  trackBorderColor,
-  trackBorderRadius,
-  width
-}) => ({
-  borderWidth: trackBorderWidth,
-  borderColor: trackBorderColor,
-  borderRadius: trackBorderRadius,
-  width
-});
+const selectTrackStyles = _ref2 => {
+  let {
+    trackBorderWidth,
+    trackBorderColor,
+    trackBorderRadius,
+    width
+  } = _ref2;
+  return {
+    borderWidth: trackBorderWidth,
+    borderColor: trackBorderColor,
+    borderRadius: trackBorderRadius,
+    width
+  };
+};
 
-const selectSwitchStyles = ({
-  switchSize,
-  switchColor,
-  switchBorderWidth,
-  switchBorderColor,
-  switchBorderRadius,
-  switchShadow
-}) => ({
-  width: switchSize,
-  height: switchSize,
-  backgroundColor: switchColor,
-  borderWidth: switchBorderWidth,
-  borderColor: switchBorderColor,
-  borderRadius: switchBorderRadius,
-  ...(0, _ThemeProvider.applyShadowToken)(switchShadow),
-  ..._Platform.default.select({
-    // TODO: https://github.com/telus/universal-design-system/issues/487
-    web: {
-      transition: 'transform 200ms'
-    }
-  })
-});
+const selectSwitchStyles = _ref3 => {
+  let {
+    switchSize,
+    switchColor,
+    switchBorderWidth,
+    switchBorderColor,
+    switchBorderRadius,
+    switchShadow
+  } = _ref3;
+  return {
+    width: switchSize,
+    height: switchSize,
+    backgroundColor: switchColor,
+    borderWidth: switchBorderWidth,
+    borderColor: switchBorderColor,
+    borderRadius: switchBorderRadius,
+    ...(0, _ThemeProvider.applyShadowToken)(switchShadow),
+    ..._Platform.default.select({
+      // TODO: https://github.com/telus/universal-design-system/issues/487
+      web: {
+        transition: 'transform 200ms'
+      }
+    })
+  };
+};
 
-const selectLabelStyles = ({
-  labelMarginLeft
-}) => ({
-  marginLeft: labelMarginLeft
-});
+const selectLabelStyles = _ref4 => {
+  let {
+    labelMarginLeft
+  } = _ref4;
+  return {
+    marginLeft: labelMarginLeft
+  };
+};
 
-const selectLabelTokens = ({
-  labelColor,
-  labelFontName,
-  labelFontSize,
-  labelFontWeight,
-  labelLineHeight
-}) => ({
-  color: labelColor,
-  fontName: labelFontName,
-  fontWeight: labelFontWeight,
-  fontSize: labelFontSize,
-  lineHeight: labelLineHeight
-});
+const selectLabelTokens = _ref5 => {
+  let {
+    labelColor,
+    labelFontName,
+    labelFontSize,
+    labelFontWeight,
+    labelLineHeight
+  } = _ref5;
+  return {
+    color: labelColor,
+    fontName: labelFontName,
+    fontWeight: labelFontWeight,
+    fontSize: labelFontSize,
+    lineHeight: labelLineHeight
+  };
+};
 
-const ToggleSwitch = /*#__PURE__*/(0, _react.forwardRef)(({
-  value,
-  initialValue,
-  onChange,
-  id,
-  label,
-  inactive,
-  tokens,
-  tooltip,
-  variant,
-  accessibilityRole = 'switch',
-  accessibilityLabel = label,
-  ...rest
-}, ref) => {
+const ToggleSwitch = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
+  let {
+    copy = 'en',
+    value,
+    initialValue,
+    onChange,
+    id,
+    label,
+    inactive,
+    tokens,
+    tooltip,
+    variant,
+    accessibilityRole = 'switch',
+    accessibilityLabel = label,
+    ...rest
+  } = _ref6;
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ToggleSwitch', tokens, variant);
   const themeTokens = getTokens();
   const {
@@ -143,6 +160,7 @@ const ToggleSwitch = /*#__PURE__*/(0, _react.forwardRef)(({
     children: [Boolean(label) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: [selectLabelStyles(themeTokens), staticStyles.containText],
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
+        copy: copy,
         forId: inputId,
         label: label,
         tokens: selectLabelTokens(themeTokens),
@@ -191,6 +209,11 @@ const ToggleSwitch = /*#__PURE__*/(0, _react.forwardRef)(({
 });
 ToggleSwitch.displayName = 'ToggleSwitch';
 ToggleSwitch.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Whether the English or French copy will be used (e.g. for accessibility labels).
+   */
+  copy: _propTypes.default.oneOf(['en', 'fr']),
   tokens: (0, _utils.getTokensPropType)('ToggleSwitch'),
   variant: _utils.variantProp.propType,