@telus-uds/components-base 1.7.1 → 1.8.2

package/lib/Button/ButtonLink.js

@@ -27,13 +27,15 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * `ButtonLink` is a component with the semantics and behaviour of a link, but with the visual appearance of a button.
  * ButtonLink is a block-level component and should not be used inline.
  */
-const ButtonLink = /*#__PURE__*/(0, _react.forwardRef)(({
-  accessibilityRole = 'link',
-  tokens,
-  variant,
-  dataSet,
-  ...props
-}, ref) => {
+const ButtonLink = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    accessibilityRole = 'link',
+    tokens,
+    variant,
+    dataSet,
+    ...props
+  } = _ref;
+
   const {
     hrefAttrs,
     rest

package/lib/Button/index.js

@@ -9,16 +9,16 @@ Object.defineProperty(exports, "Button", {
     return _Button.default;
   }
 });
-Object.defineProperty(exports, "ButtonLink", {
+Object.defineProperty(exports, "ButtonGroup", {
   enumerable: true,
   get: function () {
-    return _ButtonLink.default;
+    return _ButtonGroup.default;
   }
 });
-Object.defineProperty(exports, "ButtonGroup", {
+Object.defineProperty(exports, "ButtonLink", {
   enumerable: true,
   get: function () {
-    return _ButtonGroup.default;
+    return _ButtonLink.default;
   }
 });
 

package/lib/Button/propTypes.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.textAndA11yText = void 0;
+exports.textAndA11yText = exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 

package/lib/Card/Card.js

@@ -73,13 +73,14 @@ const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_p
  * depending on what you are trying to achieve.
  */
 
-const Card = ({
-  children,
-  tokens,
-  variant,
-  dataSet,
-  ...rest
-}) => {
+const Card = _ref => {
+  let {
+    children,
+    tokens,
+    variant,
+    dataSet,
+    ...rest
+  } = _ref;
   const viewport = (0, _ViewportProvider.useViewport)();
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Card', tokens, variant, {
     viewport

package/lib/Card/CardBase.js

@@ -27,43 +27,47 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.viewProps]); // Ensure explicit selection of tokens
 
-const selectStyles = ({
-  flex,
-  backgroundColor,
-  borderColor,
-  borderRadius,
-  borderWidth,
-  paddingBottom,
-  paddingLeft,
-  paddingRight,
-  paddingTop,
-  minWidth,
-  shadow
-}) => ({
-  flex,
-  backgroundColor,
-  borderColor,
-  borderRadius,
-  borderWidth,
-  paddingBottom,
-  paddingLeft,
-  paddingRight,
-  paddingTop,
-  minWidth,
-  ...(0, _ThemeProvider.applyShadowToken)(shadow)
-});
+const selectStyles = _ref => {
+  let {
+    flex,
+    backgroundColor,
+    borderColor,
+    borderRadius,
+    borderWidth,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    minWidth,
+    shadow
+  } = _ref;
+  return {
+    flex,
+    backgroundColor,
+    borderColor,
+    borderRadius,
+    borderWidth,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    minWidth,
+    ...(0, _ThemeProvider.applyShadowToken)(shadow)
+  };
+};
 /**
  * A themeless base component for Card which components can apply theme tokens to. Not
  * intended to be used in apps or sites directly: build themed components on top of this.
  */
 
 
-const CardBase = /*#__PURE__*/(0, _react.forwardRef)(({
-  children,
-  tokens,
-  dataSet,
-  ...rest
-}, ref) => {
+const CardBase = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
+    children,
+    tokens,
+    dataSet,
+    ...rest
+  } = _ref2;
   const cardStyle = selectStyles(typeof tokens === 'function' ? tokens() : tokens);
   const props = selectProps(rest);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {

package/lib/Card/PressableCardBase.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.selectPressableCardTokens = void 0;
+exports.selectPressableCardTokens = exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -43,17 +43,19 @@ const selectPressableCardTokens = tokens => Object.fromEntries(tokenKeys.map(key
 
 
 exports.selectPressableCardTokens = selectPressableCardTokens;
-const PressableCardBase = /*#__PURE__*/(0, _react.forwardRef)(({
-  children,
-  tokens,
-  checked,
-  validation,
-  inactive,
-  href,
-  hrefAttrs,
-  accessibilityRole = href ? 'link' : undefined,
-  ...rawRest
-}, ref) => {
+const PressableCardBase = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    tokens,
+    checked,
+    validation,
+    inactive,
+    href,
+    hrefAttrs,
+    accessibilityRole = href ? 'link' : undefined,
+    ...rawRest
+  } = _ref;
+
   const {
     onPress,
     ...rest

package/lib/Checkbox/Checkbox.js

@@ -43,71 +43,83 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
 
-const selectInputStyles = ({
-  iconBackgroundColor,
-  inputBorderColor,
-  inputBorderRadius,
-  inputBorderWidth,
-  inputBackgroundColor,
-  inputHeight,
-  inputOutlineColor,
-  inputOutlineWidth,
-  inputShadow,
-  inputWidth
-}, isChecked) => ({
-  borderColor: inputBorderColor,
-  borderWidth: inputBorderWidth,
-  borderRadius: inputBorderRadius,
-  backgroundColor: isChecked ? iconBackgroundColor : inputBackgroundColor,
-  height: inputHeight,
-  width: inputWidth,
-  ...(0, _ThemeProvider.applyShadowToken)(inputShadow),
-  ..._Platform.default.select({
-    web: {
-      outlineStyle: 'solid',
-      outlineColor: inputOutlineColor,
-      outlineWidth: inputOutlineWidth
-    }
-  })
-});
+const selectInputStyles = (_ref, isChecked) => {
+  let {
+    iconBackgroundColor,
+    inputBorderColor,
+    inputBorderRadius,
+    inputBorderWidth,
+    inputBackgroundColor,
+    inputHeight,
+    inputOutlineColor,
+    inputOutlineWidth,
+    inputShadow,
+    inputWidth
+  } = _ref;
+  return {
+    borderColor: inputBorderColor,
+    borderWidth: inputBorderWidth,
+    borderRadius: inputBorderRadius,
+    backgroundColor: isChecked ? iconBackgroundColor : inputBackgroundColor,
+    height: inputHeight,
+    width: inputWidth,
+    ...(0, _ThemeProvider.applyShadowToken)(inputShadow),
+    ..._Platform.default.select({
+      web: {
+        outlineStyle: 'solid',
+        outlineColor: inputOutlineColor,
+        outlineWidth: inputOutlineWidth
+      }
+    })
+  };
+};
 
-const selectLabelStyles = ({
-  labelColor,
-  labelFontName,
-  labelFontSize,
-  labelFontWeight,
-  labelMarginLeft,
-  labelLineHeight
-}) => ({
-  marginLeft: labelMarginLeft,
-  ...(0, _ThemeProvider.applyTextStyles)({
-    color: labelColor,
-    fontName: labelFontName,
-    fontWeight: labelFontWeight,
-    fontSize: labelFontSize,
-    lineHeight: labelLineHeight
-  })
-});
+const selectLabelStyles = _ref2 => {
+  let {
+    labelColor,
+    labelFontName,
+    labelFontSize,
+    labelFontWeight,
+    labelMarginLeft,
+    labelLineHeight
+  } = _ref2;
+  return {
+    marginLeft: labelMarginLeft,
+    ...(0, _ThemeProvider.applyTextStyles)({
+      color: labelColor,
+      fontName: labelFontName,
+      fontWeight: labelFontWeight,
+      fontSize: labelFontSize,
+      lineHeight: labelLineHeight
+    })
+  };
+};
 
-const selectIconTokens = ({
-  icon,
-  iconColor,
-  iconSize
-}) => ({
-  icon,
-  color: iconColor,
-  size: iconSize
-});
+const selectIconTokens = _ref3 => {
+  let {
+    icon,
+    iconColor,
+    iconSize
+  } = _ref3;
+  return {
+    icon,
+    color: iconColor,
+    size: iconSize
+  };
+};
 
-const selectFeedbackTokens = ({
-  feedbackMarginBottom,
-  feedbackMarginTop,
-  feedbackPosition
-}) => ({
-  feedbackPosition,
-  feedbackMarginBottom,
-  feedbackMarginTop
-});
+const selectFeedbackTokens = _ref4 => {
+  let {
+    feedbackMarginBottom,
+    feedbackMarginTop,
+    feedbackPosition
+  } = _ref4;
+  return {
+    feedbackPosition,
+    feedbackMarginBottom,
+    feedbackMarginTop
+  };
+};
 /**
  * Basic Checkbox component.
  *
@@ -145,21 +157,22 @@ const selectFeedbackTokens = ({
  */
 
 
-const Checkbox = /*#__PURE__*/(0, _react.forwardRef)(({
-  checked,
-  defaultChecked,
-  error = false,
-  feedback,
-  id,
-  inactive,
-  label,
-  name,
-  onChange,
-  tokens,
-  value,
-  variant,
-  ...rest
-}, ref) => {
+const Checkbox = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
+  let {
+    checked,
+    defaultChecked,
+    error = false,
+    feedback,
+    id,
+    inactive,
+    label,
+    name,
+    onChange,
+    tokens,
+    value,
+    variant,
+    ...rest
+  } = _ref5;
   const {
     currentValue: isChecked,
     setValue: setIsChecked,
@@ -218,11 +231,12 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)(({
           disabled: inactive
         },
         ...selectProps(rest),
-        children: ({
-          focused: focus,
-          hovered: hover,
-          pressed
-        }) => {
+        children: _ref6 => {
+          let {
+            focused: focus,
+            hovered: hover,
+            pressed
+          } = _ref6;
           const {
             icon: IconComponent,
             ...stateTokens

package/lib/Checkbox/CheckboxGroup.js

@@ -81,24 +81,25 @@ const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([
  * ```
  */
 
-const CheckboxGroup = /*#__PURE__*/(0, _react.forwardRef)(({
-  tokens,
-  radioTokens,
-  variant,
-  items = [],
-  legend,
-  tooltip,
-  hint,
-  validation,
-  feedback,
-  initialCheckedIds,
-  checkedIds,
-  onChange,
-  readOnly,
-  name: inputGroupName,
-  inactive,
-  ...rest
-}, ref) => {
+const CheckboxGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    tokens,
+    radioTokens,
+    variant,
+    items = [],
+    legend,
+    tooltip,
+    hint,
+    validation,
+    feedback,
+    initialCheckedIds,
+    checkedIds,
+    onChange,
+    readOnly,
+    name: inputGroupName,
+    inactive,
+    ...rest
+  } = _ref;
   const viewport = (0, _ViewportProvider.useViewport)();
   const {
     space,
@@ -121,13 +122,14 @@ const CheckboxGroup = /*#__PURE__*/(0, _react.forwardRef)(({
     throw new Error(`CheckboxGroup items must have unique ${uniqueFields.join(', ')}`);
   }
 
-  const checkboxes = items.map(({
-    label,
-    id,
-    onChange: itemOnChange,
-    ref: itemRef,
-    ...itemRest
-  }, index) => {
+  const checkboxes = items.map((_ref2, index) => {
+    let {
+      label,
+      id,
+      onChange: itemOnChange,
+      ref: itemRef,
+      ...itemRest
+    } = _ref2;
     const checkboxId = id || `Checkbox[${index}]`;
 
     const handleChange = (newCheckedState, event) => {
@@ -236,18 +238,18 @@ CheckboxGroup.propTypes = { ...selectedSystemPropTypes,
   onChange: _propTypes.default.func,
 
   /**
-   * If true, the radio cards cannot be selected by the user and simply show their current state.
+   * If true, the checkboxes cannot be selected by the user and simply show their current state.
    */
   readOnly: _propTypes.default.bool,
 
   /**
-   * If true, the checkbox cannot be interacted with, elements are set as `disabled` and if the
+   * If true, the checkboxes cannot be interacted with, elements are set as `disabled` and if the
    * theme supports `inactive` appearances rules, these are applied.
    */
   inactive: _propTypes.default.bool,
 
   /**
-   * On Web, this is passed to the `name` attribute of the fieldset and each radio input.
+   * On Web, this is passed to the `name` attribute of the fieldset and each checkbox input.
    */
   name: _propTypes.default.string
 };

package/lib/Checkbox/CheckboxInput.js

@@ -20,16 +20,18 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * On Web we need to include an actual input but hide it.
  */
-const CheckboxInput = /*#__PURE__*/(0, _react.forwardRef)(({
-  checked,
-  defaultChecked,
-  disabled,
-  id,
-  isControlled,
-  name,
-  onChange,
-  value
-}, ref) => {
+const CheckboxInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    checked,
+    defaultChecked,
+    disabled,
+    id,
+    isControlled,
+    name,
+    onChange,
+    value
+  } = _ref;
+
   const handleClick = event => {
     // Cancel the click dispatched via the label tag, since it's already wrapped
     // in <Pressable>

package/lib/Divider/Divider.js

@@ -72,13 +72,14 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
  * For accessibility purposes a divider component will be described with ARIA attributes, i.e. `role="separator"` and `aria-orientation="vertical/horizontal"`.
  */
 
-const Divider = /*#__PURE__*/(0, _react.forwardRef)(({
-  variant,
-  vertical = false,
-  space,
-  tokens,
-  ...rest
-}, ref) => {
+const Divider = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    variant,
+    vertical = false,
+    space,
+    tokens,
+    ...rest
+  } = _ref;
   const {
     color,
     width

package/lib/ExpandCollapse/Control.js

@@ -27,19 +27,20 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 
-function selectContainerStyles({
-  backgroundColor,
-  borderColor,
-  borderWidth,
-  borderStyle,
-  paddingLeft,
-  paddingRight,
-  paddingTop,
-  paddingBottom,
-  justifyContent,
-  verticalAlign,
-  iconPosition
-}) {
+function selectContainerStyles(_ref) {
+  let {
+    backgroundColor,
+    borderColor,
+    borderWidth,
+    borderStyle,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+    justifyContent,
+    verticalAlign,
+    iconPosition
+  } = _ref;
   return {
     backgroundColor,
     borderTopColor: borderColor,
@@ -55,10 +56,11 @@ function selectContainerStyles({
 } // TODO: use stack / spacer when available
 
 
-function selectIconContainerStyles({
-  iconGap,
-  iconPosition
-}) {
+function selectIconContainerStyles(_ref2) {
+  let {
+    iconGap,
+    iconPosition
+  } = _ref2;
   const paddingSide = iconPosition === 'right' ? 'paddingLeft' : 'paddingRight';
   return {
     [paddingSide]: iconGap
@@ -72,15 +74,16 @@ function selectIconTokens(tokens) {
   };
 }
 
-const ExpandCollapseControl = /*#__PURE__*/(0, _react.forwardRef)(({
-  onPress,
-  isExpanded,
-  children,
-  tokens,
-  accessibilityRole = 'button',
-  variant,
-  ...rest
-}, ref) => {
+const ExpandCollapseControl = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+  let {
+    onPress,
+    isExpanded,
+    children,
+    tokens,
+    accessibilityRole = 'button',
+    variant,
+    ...rest
+  } = _ref3;
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ExpandCollapseControl', tokens, variant);
   const selectedProps = selectProps({ ...rest,
     accessibilityRole
@@ -89,16 +92,19 @@ const ExpandCollapseControl = /*#__PURE__*/(0, _react.forwardRef)(({
     expanded: isExpanded
   };
 
-  const getControlState = ({
-    pressed,
-    hovered,
-    focused
-  }) => ({
-    pressed,
-    hover: hovered,
-    focus: focused,
-    expanded: isExpanded
-  });
+  const getControlState = _ref4 => {
+    let {
+      pressed,
+      hovered,
+      focused
+    } = _ref4;
+    return {
+      pressed,
+      hover: hovered,
+      focus: focused,
+      expanded: isExpanded
+    };
+  };
 
   const getControlTokens = pressableState => getTokens(getControlState(pressableState));
 

package/lib/ExpandCollapse/ExpandCollapse.js

@@ -41,16 +41,17 @@ function selectBorderStyles(tokens) {
  */
 
 
-const ExpandCollapse = /*#__PURE__*/(0, _react.forwardRef)(({
-  children,
-  tokens,
-  variant,
-  maxOpen,
-  open,
-  initialOpen,
-  onChange,
-  ...rest
-}, ref) => {
+const ExpandCollapse = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    tokens,
+    variant,
+    maxOpen,
+    open,
+    initialOpen,
+    onChange,
+    ...rest
+  } = _ref;
   const {
     currentValues: openIds,
     toggleOneValue: onToggle,