@telus-uds/components-base 1.8.0 → 1.8.3

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,84 +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)(({
-  copy = 'en',
-  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 {

package/lib/ToggleSwitch/ToggleSwitchGroup.js

@@ -35,31 +35,32 @@ 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.viewProps]);
-const ToggleSwitchGroup = /*#__PURE__*/(0, _react.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.default.select({
-    web: 'group',
-    default: 'none'
-  }),
-  toggleSwitchTokens,
-  validation,
-  ...rest
-}, ref) => {
+const ToggleSwitchGroup = /*#__PURE__*/(0, _react.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.default.select({
+      web: 'group',
+      default: 'none'
+    }),
+    toggleSwitchTokens,
+    validation,
+    ...rest
+  } = _ref;
   const viewport = (0, _ViewportProvider.useViewport)();
   const {
     space,
@@ -88,15 +89,16 @@ const ToggleSwitchGroup = /*#__PURE__*/(0, _react.forwardRef)(({
     throw new Error(`ToggleSwitchGroup items must have unique ${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/Tooltip/Backdrop.js

@@ -42,9 +42,10 @@ function removePortalNode(nodeId) {
  */
 
 
-function Backdrop({
-  children
-}) {
+function Backdrop(_ref) {
+  let {
+    children
+  } = _ref;
   const [portalNode, setPortalNode] = (0, _react.useState)();
   (0, _react.useEffect)(() => {
     const nodeId = `tooltip-backdrop-${Date.now()}`;

package/lib/Tooltip/Backdrop.native.js

@@ -27,10 +27,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * approach is that a press on the Backdrop will actually stop the press event from propagating,
  * i.e. anything rendered beneath the Backdrop can't be pressed until the Backdrop is closed.
  */
-function Backdrop({
-  onPress,
-  children
-}) {
+function Backdrop(_ref) {
+  let {
+    onPress,
+    children
+  } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.default, {
     transparent: true,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TouchableWithoutFeedback.default, {

package/lib/Tooltip/Tooltip.js

@@ -45,35 +45,42 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 
-const selectTooltipStyles = ({
-  backgroundColor,
-  paddingTop,
-  paddingBottom,
-  paddingLeft,
-  paddingRight,
-  borderRadius
-}) => ({
-  backgroundColor,
-  paddingTop,
-  paddingBottom,
-  paddingLeft,
-  paddingRight,
-  borderRadius
-});
+const selectTooltipStyles = _ref => {
+  let {
+    backgroundColor,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    borderRadius
+  } = _ref;
+  return {
+    backgroundColor,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    borderRadius
+  };
+};
 
-const selectTooltipShadowStyles = ({
-  shadow,
-  borderRadius
-}) => ({
-  borderRadius,
-  ...(0, _ThemeProvider.applyShadowToken)(shadow)
-});
+const selectTooltipShadowStyles = _ref2 => {
+  let {
+    shadow,
+    borderRadius
+  } = _ref2;
+  return {
+    borderRadius,
+    ...(0, _ThemeProvider.applyShadowToken)(shadow)
+  };
+};
 
-const selectTooltipPositionStyles = ({
-  top,
-  left,
-  width
-}) => {
+const selectTooltipPositionStyles = _ref3 => {
+  let {
+    top,
+    left,
+    width
+  } = _ref3;
   return {
     top,
     left,
@@ -81,16 +88,18 @@ const selectTooltipPositionStyles = ({
   };
 };
 
-const selectArrowStyles = ({
-  backgroundColor,
-  arrowWidth,
-  arrowBorderRadius,
-  shadow
-}, {
-  position,
-  width: tooltipWidth,
-  height: tooltipHeight
-}) => {
+const selectArrowStyles = (_ref4, _ref5) => {
+  let {
+    backgroundColor,
+    arrowWidth,
+    arrowBorderRadius,
+    shadow
+  } = _ref4;
+  let {
+    position,
+    width: tooltipWidth,
+    height: tooltipHeight
+  } = _ref5;
   // the arrow width is actually a diagonal of the rectangle that we'll use as a tip
   const rectangleSide = Math.sqrt(arrowWidth * arrowWidth / 2); // position the arrow at the side and center of the tooltip - this happens before rotation
   // so we use the rectangle size as basis
@@ -163,15 +172,16 @@ const defaultControl = (pressableState, variant) => /*#__PURE__*/(0, _jsxRuntime
  */
 
 
-const Tooltip = /*#__PURE__*/(0, _react.forwardRef)(({
-  children,
-  content,
-  position = 'auto',
-  copy = 'en',
-  tokens,
-  variant,
-  ...rest
-}, ref) => {
+const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
+  let {
+    children,
+    content,
+    position = 'auto',
+    copy = 'en',
+    tokens,
+    variant,
+    ...rest
+  } = _ref6;
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
   const controlRef = (0, _react.useRef)();
   const [controlLayout, setControlLayout] = (0, _react.useState)(null);
@@ -188,9 +198,10 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)(({
     arrowOffset
   } = themeTokens;
   (0, _react.useEffect)(() => {
-    const subscription = _Dimensions.default.addEventListener('change', ({
-      window
-    }) => {
+    const subscription = _Dimensions.default.addEventListener('change', _ref7 => {
+      let {
+        window
+      } = _ref7;
       setWindowDimensions(window);
     });
 
@@ -201,24 +212,29 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)(({
 
   const close = () => setIsOpen(false);
 
-  const getPressableState = ({
-    pressed,
-    hovered,
-    focused
-  }) => ({
-    pressed,
-    hover: hovered,
-    focus: focused
-  });
+  const getPressableState = _ref8 => {
+    let {
+      pressed,
+      hovered,
+      focused
+    } = _ref8;
+    return {
+      pressed,
+      hover: hovered,
+      focus: focused
+    };
+  };
 
-  const onTooltipLayout = ({
-    nativeEvent: {
-      layout: {
-        width,
-        height
+  const onTooltipLayout = _ref9 => {
+    let {
+      nativeEvent: {
+        layout: {
+          width,
+          height
+        }
       }
-    }
-  }) => {
+    } = _ref9;
+
     if (tooltipDimensions === null || tooltipDimensions.width !== width || tooltipDimensions.height !== height) {
       setTooltipDimensions({
         width: _Platform.default.select({

package/lib/Tooltip/getTooltipPosition.js

@@ -56,9 +56,12 @@ function invertPosition(position) {
 }
 
 function findRectByPosition(position, rectsArray) {
-  return rectsArray.find(({
-    position: rectPosition
-  }) => rectPosition === position);
+  return rectsArray.find(_ref => {
+    let {
+      position: rectPosition
+    } = _ref;
+    return rectPosition === position;
+  });
 }
 /**
  * Used for absolute positioning of the tooltip. Since the tooltip is always centered relatively
@@ -70,13 +73,14 @@ function findRectByPosition(position, rectsArray) {
  */
 
 
-function getTooltipPosition(position, {
-  controlLayout,
-  tooltipDimensions,
-  windowDimensions,
-  arrowWidth = 0,
-  arrowOffset = 0
-}) {
+function getTooltipPosition(position, _ref2) {
+  let {
+    controlLayout,
+    tooltipDimensions,
+    windowDimensions,
+    arrowWidth = 0,
+    arrowOffset = 0
+  } = _ref2;
   const {
     width: controlWidth,
     height: controlHeight,
@@ -146,9 +150,12 @@ function getTooltipPosition(position, {
     }
   }
 
-  const inWindow = boundingRects.filter(({
-    overflow
-  }) => overflow === 0); // pick the first position that fits in window
+  const inWindow = boundingRects.filter(_ref3 => {
+    let {
+      overflow
+    } = _ref3;
+    return overflow === 0;
+  }); // pick the first position that fits in window
   // (these are sorted clockwise which makes them show where one would expect them to be)
 
   if (inWindow.length > 0) {
@@ -157,11 +164,15 @@ function getTooltipPosition(position, {
   // the least overflowing and normalize its position to fit within window bounds
 
 
-  boundingRects.sort(({
-    overflow: overflowA
-  }, {
-    overflow: overflowB
-  }) => overflowA - overflowB);
+  boundingRects.sort((_ref4, _ref5) => {
+    let {
+      overflow: overflowA
+    } = _ref4;
+    let {
+      overflow: overflowB
+    } = _ref5;
+    return overflowA - overflowB;
+  });
   const leastOverflowing = boundingRects[0]; // prefer 'below' over 'above', since we can always expand the document downwards,
   // and 'above' might cause issues on small viewports with large tooltips