@telus-uds/components-base 1.8.0 → 1.8.3

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) => {

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,

package/lib/ExpandCollapse/Panel.js

@@ -35,17 +35,20 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
 
 const selectGroupStyles = () => {};
 
-const selectContainerStyles = ({
-  contentPaddingLeft,
-  contentPaddingRight,
-  contentPaddingTop,
-  contentPaddingBottom
-}) => ({
-  paddingLeft: contentPaddingLeft,
-  paddingRight: contentPaddingRight,
-  paddingTop: contentPaddingTop,
-  paddingBottom: contentPaddingBottom
-});
+const selectContainerStyles = _ref => {
+  let {
+    contentPaddingLeft,
+    contentPaddingRight,
+    contentPaddingTop,
+    contentPaddingBottom
+  } = _ref;
+  return {
+    paddingLeft: contentPaddingLeft,
+    paddingRight: contentPaddingRight,
+    paddingTop: contentPaddingTop,
+    paddingBottom: contentPaddingBottom
+  };
+};
 /**
  * An item in an `ExpandCollapse` which contains collapsible `children` and a `control` that opens
  * and closes the collapsible children when pressed.
@@ -58,18 +61,19 @@ const selectContainerStyles = ({
  */
 
 
-const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)(({
-  openIds = [],
-  panelId,
-  onToggle,
-  onPress,
-  control,
-  controlTokens,
-  children,
-  tokens,
-  variant,
-  ...rest
-}, ref) => {
+const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
+    openIds = [],
+    panelId,
+    onToggle,
+    onPress,
+    control,
+    controlTokens,
+    children,
+    tokens,
+    variant,
+    ...rest
+  } = _ref2;
   const [containerHeight, setContainerHeight] = (0, _react.useState)(null);
   const isExpanded = openIds.includes(panelId);
   const selectedProps = selectProps(rest);

package/lib/Feedback/Feedback.js

@@ -33,33 +33,45 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
 
 const selectStyles = tokens => (0, _utils.selectTokens)('Feedback', tokens);
 
-const selectTitleTextStyles = ({
-  titleFontSize,
-  ...tokens
-}) => (0, _ThemeProvider.applyTextStyles)((0, _utils.selectTokens)('Typography', { ...tokens,
-  fontSize: titleFontSize
-}));
-
-const selectContentTextStyles = ({
-  contentFontSize,
-  ...tokens
-}) => (0, _ThemeProvider.applyTextStyles)((0, _utils.selectTokens)('Typography', { ...tokens,
-  fontSize: contentFontSize
-}));
-
-const selectIconTokens = ({
-  iconSize,
-  iconColor
-}) => ({
-  size: iconSize,
-  color: iconColor
-});
+const selectTitleTextStyles = _ref => {
+  let {
+    titleFontSize,
+    ...tokens
+  } = _ref;
+  return (0, _ThemeProvider.applyTextStyles)((0, _utils.selectTokens)('Typography', { ...tokens,
+    fontSize: titleFontSize
+  }));
+};
 
-const selectIconContainerStyles = ({
-  iconGap
-}) => ({
-  paddingRight: iconGap
-});
+const selectContentTextStyles = _ref2 => {
+  let {
+    contentFontSize,
+    ...tokens
+  } = _ref2;
+  return (0, _ThemeProvider.applyTextStyles)((0, _utils.selectTokens)('Typography', { ...tokens,
+    fontSize: contentFontSize
+  }));
+};
+
+const selectIconTokens = _ref3 => {
+  let {
+    iconSize,
+    iconColor
+  } = _ref3;
+  return {
+    size: iconSize,
+    color: iconColor
+  };
+};
+
+const selectIconContainerStyles = _ref4 => {
+  let {
+    iconGap
+  } = _ref4;
+  return {
+    paddingRight: iconGap
+  };
+};
 /**
  * A feedback box commonly used with form fields.
  *
@@ -80,15 +92,16 @@ const selectIconContainerStyles = ({
  */
 
 
-const Feedback = /*#__PURE__*/(0, _react.forwardRef)(({
-  title,
-  children,
-  id,
-  validation,
-  tokens,
-  variant,
-  ...rest
-}, ref) => {
+const Feedback = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
+  let {
+    title,
+    children,
+    id,
+    validation,
+    tokens,
+    variant,
+    ...rest
+  } = _ref5;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Feedback', tokens, { ...variant,
     validation
   });