@telus-uds/components-base 1.8.1 → 1.8.4

package/lib-module/Card/PressableCardBase.js

@@ -18,17 +18,18 @@ export const selectPressableCardTokens = tokens => Object.fromEntries(tokenKeys.
  * apps or sites directly: build themed components on top of this.
  */
 
-const PressableCardBase = /*#__PURE__*/forwardRef(({
-  children,
-  tokens,
-  checked,
-  validation,
-  inactive,
-  href,
-  hrefAttrs,
-  accessibilityRole = href ? 'link' : undefined,
-  ...rawRest
-}, ref) => {
+const PressableCardBase = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    tokens,
+    checked,
+    validation,
+    inactive,
+    href,
+    hrefAttrs,
+    accessibilityRole = href ? 'link' : undefined,
+    ...rawRest
+  } = _ref;
   const {
     onPress,
     ...rest

package/lib-module/Checkbox/Checkbox.js

@@ -16,71 +16,83 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, 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,
-  ...applyShadowToken(inputShadow),
-  ...Platform.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,
+    ...applyShadowToken(inputShadow),
+    ...Platform.select({
+      web: {
+        outlineStyle: 'solid',
+        outlineColor: inputOutlineColor,
+        outlineWidth: inputOutlineWidth
+      }
+    })
+  };
+};
 
-const selectLabelStyles = ({
-  labelColor,
-  labelFontName,
-  labelFontSize,
-  labelFontWeight,
-  labelMarginLeft,
-  labelLineHeight
-}) => ({
-  marginLeft: labelMarginLeft,
-  ...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,
+    ...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.
  *
@@ -118,21 +130,22 @@ const selectFeedbackTokens = ({
  */
 
 
-const Checkbox = /*#__PURE__*/forwardRef(({
-  checked,
-  defaultChecked,
-  error = false,
-  feedback,
-  id,
-  inactive,
-  label,
-  name,
-  onChange,
-  tokens,
-  value,
-  variant,
-  ...rest
-}, ref) => {
+const Checkbox = /*#__PURE__*/forwardRef((_ref5, ref) => {
+  let {
+    checked,
+    defaultChecked,
+    error = false,
+    feedback,
+    id,
+    inactive,
+    label,
+    name,
+    onChange,
+    tokens,
+    value,
+    variant,
+    ...rest
+  } = _ref5;
   const {
     currentValue: isChecked,
     setValue: setIsChecked,
@@ -173,7 +186,7 @@ const Checkbox = /*#__PURE__*/forwardRef(({
   };
 
   const uniqueId = useUniqueId('checkbox');
-  const inputId = id ?? uniqueId;
+  const inputId = id !== null && id !== void 0 ? id : uniqueId;
   return /*#__PURE__*/_jsx(View, {
     style: staticStyles.wrapper,
     ref: ref,
@@ -190,11 +203,12 @@ const Checkbox = /*#__PURE__*/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-module/Checkbox/CheckboxGroup.js

@@ -58,24 +58,25 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, f
  * ```
  */
 
-const CheckboxGroup = /*#__PURE__*/forwardRef(({
-  tokens,
-  radioTokens,
-  variant,
-  items = [],
-  legend,
-  tooltip,
-  hint,
-  validation,
-  feedback,
-  initialCheckedIds,
-  checkedIds,
-  onChange,
-  readOnly,
-  name: inputGroupName,
-  inactive,
-  ...rest
-}, ref) => {
+const CheckboxGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    tokens,
+    radioTokens,
+    variant,
+    items = [],
+    legend,
+    tooltip,
+    hint,
+    validation,
+    feedback,
+    initialCheckedIds,
+    checkedIds,
+    onChange,
+    readOnly,
+    name: inputGroupName,
+    inactive,
+    ...rest
+  } = _ref;
   const viewport = useViewport();
   const {
     space,
@@ -95,17 +96,18 @@ const CheckboxGroup = /*#__PURE__*/forwardRef(({
   const uniqueFields = ['id', 'label'];
 
   if (!containUniqueFields(items, uniqueFields)) {
-    throw new Error(`CheckboxGroup items must have unique ${uniqueFields.join(', ')}`);
+    throw new Error("CheckboxGroup items must have unique ".concat(uniqueFields.join(', ')));
   }
 
-  const checkboxes = items.map(({
-    label,
-    id,
-    onChange: itemOnChange,
-    ref: itemRef,
-    ...itemRest
-  }, index) => {
-    const checkboxId = id || `Checkbox[${index}]`;
+  const checkboxes = items.map((_ref2, index) => {
+    let {
+      label,
+      id,
+      onChange: itemOnChange,
+      ref: itemRef,
+      ...itemRest
+    } = _ref2;
+    const checkboxId = id || "Checkbox[".concat(index, "]");
 
     const handleChange = (newCheckedState, event) => {
       if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event);

package/lib-module/Checkbox/CheckboxInput.js

@@ -5,16 +5,18 @@ import PropTypes from 'prop-types';
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
-const CheckboxInput = /*#__PURE__*/forwardRef(({
-  checked,
-  defaultChecked,
-  disabled,
-  id,
-  isControlled,
-  name,
-  onChange,
-  value
-}, ref) => {
+const CheckboxInput = /*#__PURE__*/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-module/Divider/Divider.js

@@ -52,13 +52,14 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * For accessibility purposes a divider component will be described with ARIA attributes, i.e. `role="separator"` and `aria-orientation="vertical/horizontal"`.
  */
 
-const Divider = /*#__PURE__*/forwardRef(({
-  variant,
-  vertical = false,
-  space,
-  tokens,
-  ...rest
-}, ref) => {
+const Divider = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    variant,
+    vertical = false,
+    space,
+    tokens,
+    ...rest
+  } = _ref;
   const {
     color,
     width
@@ -97,9 +98,9 @@ const Divider = /*#__PURE__*/forwardRef(({
   };
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Spacer, { ...spacerProps,
-      testID: testID ? `${testID}-Spacer-before` : undefined
+      testID: testID ? "".concat(testID, "-Spacer-before") : undefined
     }), divider, /*#__PURE__*/_jsx(Spacer, { ...spacerProps,
-      testID: testID ? `${testID}-Spacer-after` : undefined
+      testID: testID ? "".concat(testID, "-Spacer-after") : undefined
     })]
   });
 });

package/lib-module/ExpandCollapse/Control.js

@@ -9,19 +9,20 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, 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,
@@ -37,10 +38,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
@@ -54,15 +56,16 @@ function selectIconTokens(tokens) {
   };
 }
 
-const ExpandCollapseControl = /*#__PURE__*/forwardRef(({
-  onPress,
-  isExpanded,
-  children,
-  tokens,
-  accessibilityRole = 'button',
-  variant,
-  ...rest
-}, ref) => {
+const ExpandCollapseControl = /*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+    onPress,
+    isExpanded,
+    children,
+    tokens,
+    accessibilityRole = 'button',
+    variant,
+    ...rest
+  } = _ref3;
   const getTokens = useThemeTokensCallback('ExpandCollapseControl', tokens, variant);
   const selectedProps = selectProps({ ...rest,
     accessibilityRole
@@ -71,16 +74,19 @@ const ExpandCollapseControl = /*#__PURE__*/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-module/ExpandCollapse/ExpandCollapse.js

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

package/lib-module/ExpandCollapse/Panel.js

@@ -1,7 +1,6 @@
 import React, { forwardRef, useState } from 'react';
 import Animated from "react-native-web/dist/exports/Animated";
 import Platform from "react-native-web/dist/exports/Platform";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import View from "react-native-web/dist/exports/View";
 import PropTypes from 'prop-types';
 import ExpandCollapseControl from './Control';
@@ -13,17 +12,20 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 
 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.
@@ -36,18 +38,19 @@ const selectContainerStyles = ({
  */
 
 
-const ExpandCollapsePanel = /*#__PURE__*/forwardRef(({
-  openIds = [],
-  panelId,
-  onToggle,
-  onPress,
-  control,
-  controlTokens,
-  children,
-  tokens,
-  variant,
-  ...rest
-}, ref) => {
+const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    openIds = [],
+    panelId,
+    onToggle,
+    onPress,
+    control,
+    controlTokens,
+    children,
+    tokens,
+    variant,
+    ...rest
+  } = _ref2;
   const [containerHeight, setContainerHeight] = useState(null);
   const isExpanded = openIds.includes(panelId);
   const selectedProps = selectProps(rest);
@@ -79,13 +82,7 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef(({
     containerHeight,
     isExpanded,
     tokens: themeTokens
-  }); // on web we can hide the contents until we have the container measured and avoid occasional jitter
-  // this won't work on native platforms
-
-  const overflowContainerStyles = containerHeight === null && Platform.OS === 'web' ? {
-    height: 0,
-    visibility: 'hidden'
-  } : undefined;
+  });
   const focusabilityProps = isExpanded ? {} : a11yProps.nonFocusableProps;
   return /*#__PURE__*/_jsxs(View, {
     ref: ref,
@@ -97,7 +94,7 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef(({
       children: control
     }), /*#__PURE__*/_jsx(Animated.View, {
       ref: animatedRef,
-      style: [overflowContainerStyles, animatedStyles, staticStyles.itemsContainer],
+      style: animatedStyles,
       ...focusabilityProps,
       children: /*#__PURE__*/_jsx(View, {
         onLayout: onContainerLayout,
@@ -151,9 +148,4 @@ ExpandCollapsePanel.propTypes = { ...selectedSystemPropTypes,
    */
   controlTokens: getTokensPropType('ExpandCollapseControl')
 };
-const staticStyles = StyleSheet.create({
-  itemsContainer: {
-    overflow: 'hidden'
-  }
-});
 export default ExpandCollapsePanel;