@telus-uds/components-base 1.8.1 → 1.8.4

package/lib-module/ThemeProvider/utils/styles.js

@@ -5,16 +5,17 @@
 import Platform from "react-native-web/dist/exports/Platform";
 import { fontBasePixels } from '@telus-uds/system-constants'; // Make design tokens fit React Native's text styles' specific requirements and quirks
 
-export function applyTextStyles({
-  fontSize,
-  fontScaleCap,
-  lineHeight,
-  letterSpacing,
-  fontWeight = '400',
-  fontName,
-  fontStyle = 'normal',
-  ...rest
-}) {
+export function applyTextStyles(_ref) {
+  let {
+    fontSize,
+    fontScaleCap,
+    lineHeight,
+    letterSpacing,
+    fontWeight = '400',
+    fontName,
+    fontStyle = 'normal',
+    ...rest
+  } = _ref;
   const styles = { ...rest
   };
 
@@ -36,7 +37,7 @@ export 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'.
@@ -72,17 +73,18 @@ export 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;
 }
@@ -111,14 +113,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.
@@ -149,7 +152,8 @@ const verticalAlignToFlexRowAlign = {
   middle: 'center',
   bottom: 'flex-end'
 };
-export function verticalAlignRow(verticalAlign, reverse = false) {
+export function verticalAlignRow(verticalAlign) {
+  let reverse = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   return {
     flexDirection: reverse ? 'row-reverse' : 'row',
     alignItems: verticalAlignToFlexRowAlign[verticalAlign]
@@ -160,15 +164,18 @@ export function verticalAlignRow(verticalAlign, reverse = false) {
  * that matches the border radius of any inner border.
  */
 
-export const applyOuterBorder = ({
-  outerBorderColor,
-  outerBorderWidth = 0,
-  outerBorderGap = 0,
-  borderRadius = 0
-}) => ({
-  margin: 0 - outerBorderWidth - outerBorderGap,
-  padding: outerBorderGap,
-  borderRadius: borderRadius + outerBorderGap + outerBorderWidth,
-  borderWidth: outerBorderWidth,
-  borderColor: outerBorderColor
-});
+export 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
+  };
+};

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

@@ -17,26 +17,29 @@ export 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;
 };
-export const doesThemeConditionApply = ([key, value], appearances) => {
+export 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;
 };
 export const doesThemeRuleApply = (rule, appearances) => Object.entries(rule.if).every(condition => doesThemeConditionApply(condition, appearances));
@@ -57,12 +60,18 @@ export const doesThemeRuleApply = (rule, appearances) => Object.entries(rule.if)
  * @returns {TokensSet} - object containing resolved tokens with overrides applied
  */
 
-export const resolveThemeTokens = (defaultTokens, appearances = {}, tokenOverrides) => {
+export 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));
 };
 /**
@@ -95,9 +104,13 @@ export const validateThemeTokens = (themeTokens, validator, componentName) => {
  * @returns {AppearanceSet}
  */
 
-export const mergeAppearances = (variants = {}, states) => states ? { ...states,
-  ...variants
-} : variants;
+export 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.
  *
@@ -110,10 +123,13 @@ export const mergeAppearances = (variants = {}, states) => states ? { ...states,
  * @returns {object} Set of resolved theme tokens
  */
 
-export const getThemeTokens = ({
-  rules = [],
-  tokens: defaultThemeTokens = {}
-}, tokensProp, variants = {}, states) => {
+export 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
 
@@ -142,10 +158,6 @@ export 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 (!semVerSatisfies(actualThemeTokensVersion, expectedThemeTokensVersion)) {
-    throw new Error(`Invalid UDS token schema version detected.
-
-The UDS base components ${pkg.name} v${pkg.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 ${pkg.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(pkg.name, " v").concat(pkg.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(pkg.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"));
   }
 };

package/lib-module/ToggleSwitch/ToggleSwitch.js

@@ -19,84 +19,100 @@ const selectButtonTokens = tokens => selectTokens('Button', { ...tokens,
 }); // 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,
-  ...applyShadowToken(switchShadow),
-  ...Platform.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,
+    ...applyShadowToken(switchShadow),
+    ...Platform.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__*/forwardRef(({
-  copy = 'en',
-  value,
-  initialValue,
-  onChange,
-  id,
-  label,
-  inactive,
-  tokens,
-  tooltip,
-  variant,
-  accessibilityRole = 'switch',
-  accessibilityLabel = label,
-  ...rest
-}, ref) => {
+const ToggleSwitch = /*#__PURE__*/forwardRef((_ref6, ref) => {
+  let {
+    copy = 'en',
+    value,
+    initialValue,
+    onChange,
+    id,
+    label,
+    inactive,
+    tokens,
+    tooltip,
+    variant,
+    accessibilityRole = 'switch',
+    accessibilityLabel = label,
+    ...rest
+  } = _ref6;
   const getTokens = useThemeTokensCallback('ToggleSwitch', tokens, variant);
   const themeTokens = getTokens();
   const {
@@ -113,7 +129,7 @@ const ToggleSwitch = /*#__PURE__*/forwardRef(({
   const getButtonTokens = buttonState => selectButtonTokens(getTokens(buttonState));
 
   const uniqueId = useUniqueId('toggleSwitch');
-  const inputId = id ?? uniqueId;
+  const inputId = id !== null && id !== void 0 ? id : uniqueId;
   return /*#__PURE__*/_jsxs(StackView, {
     space: 2,
     direction: "row",

package/lib-module/ToggleSwitch/ToggleSwitchGroup.js

@@ -11,31 +11,32 @@ import { a11yProps, containUniqueFields, focusHandlerProps, getTokensPropType, s
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
-const ToggleSwitchGroup = /*#__PURE__*/forwardRef(({
-  copy = 'en',
-  variant,
-  tokens,
-  items = [],
-  values,
-  initialValues,
-  maxValues = 1,
-  onChange,
-  readOnly = false,
-  inactive = false,
-  feedback,
-  hint,
-  tooltip,
-  legend,
-  name: inputGroupName,
-  accessibilityRole = maxValues === 1 ? 'radiogroup' // radiogroup is cross-platform; only web aria has generic groups
-  : Platform.select({
-    web: 'group',
-    default: 'none'
-  }),
-  toggleSwitchTokens,
-  validation,
-  ...rest
-}, ref) => {
+const ToggleSwitchGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    copy = 'en',
+    variant,
+    tokens,
+    items = [],
+    values,
+    initialValues,
+    maxValues = 1,
+    onChange,
+    readOnly = false,
+    inactive = false,
+    feedback,
+    hint,
+    tooltip,
+    legend,
+    name: inputGroupName,
+    accessibilityRole = maxValues === 1 ? 'radiogroup' // radiogroup is cross-platform; only web aria has generic groups
+    : Platform.select({
+      web: 'group',
+      default: 'none'
+    }),
+    toggleSwitchTokens,
+    validation,
+    ...rest
+  } = _ref;
   const viewport = useViewport();
   const {
     space,
@@ -61,18 +62,19 @@ const ToggleSwitchGroup = /*#__PURE__*/forwardRef(({
   const uniqueFields = ['id', 'label'];
 
   if (!containUniqueFields(items, uniqueFields)) {
-    throw new Error(`ToggleSwitchGroup items must have unique ${uniqueFields.join(', ')}`);
+    throw new Error("ToggleSwitchGroup items must have unique ".concat(uniqueFields.join(', ')));
   }
 
-  const toggleSwitches = items.map(({
-    label,
-    id = label,
-    accessibilityLabel = label,
-    onChange: itemOnChange,
-    ref: itemRef,
-    tooltip: itemTooltip,
-    ...itemRest
-  }, index) => {
+  const toggleSwitches = items.map((_ref2, index) => {
+    let {
+      label,
+      id = label,
+      accessibilityLabel = label,
+      onChange: itemOnChange,
+      ref: itemRef,
+      tooltip: itemTooltip,
+      ...itemRest
+    } = _ref2;
     const isSelected = currentValues.includes(id);
 
     const handleChange = (newCheckedState, event) => {

package/lib-module/Tooltip/Backdrop.js

@@ -8,15 +8,7 @@ function createPortalNode(nodeId) {
   // this way the backdrop stays in place when scrolling the window - that's why we need to
   // position it at the scroll position when rendering
 
-  node.style.cssText = `
-  position: absolute; 
-  top: ${window.scrollY}px;
-  left: ${window.scrollX}px; 
-  right: 0; 
-  bottom: 0; 
-  z-index: 9999; 
-  pointer-events: none;
-  `;
+  node.style.cssText = "\n  position: absolute; \n  top: ".concat(window.scrollY, "px;\n  left: ").concat(window.scrollX, "px; \n  right: 0; \n  bottom: 0; \n  z-index: 9999; \n  pointer-events: none;\n  ");
   document.body.appendChild(node);
   return node;
 }
@@ -31,12 +23,13 @@ function removePortalNode(nodeId) {
  */
 
 
-function Backdrop({
-  children
-}) {
+function Backdrop(_ref) {
+  let {
+    children
+  } = _ref;
   const [portalNode, setPortalNode] = useState();
   useEffect(() => {
-    const nodeId = `tooltip-backdrop-${Date.now()}`;
+    const nodeId = "tooltip-backdrop-".concat(Date.now());
     const node = createPortalNode(nodeId);
     setPortalNode(node);
     return () => {

package/lib-module/Tooltip/Backdrop.native.js

@@ -13,10 +13,11 @@ import PropTypes from 'prop-types';
 
 import { jsx as _jsx } from "react/jsx-runtime";
 
-function Backdrop({
-  onPress,
-  children
-}) {
+function Backdrop(_ref) {
+  let {
+    onPress,
+    children
+  } = _ref;
   return /*#__PURE__*/_jsx(Modal, {
     transparent: true,
     children: /*#__PURE__*/_jsx(TouchableWithoutFeedback, {