@telus-uds/components-base 1.8.1 → 1.8.4

package/lib/Select/Picker.native.js

@@ -28,39 +28,47 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 // styling of the native input is very limited, most of the styles have to be applied to an additional View
-const selectAndroidInputStyles = ({
-  height = 0,
-  paddingBottom = 0,
-  paddingTop = 0,
-  borderWidth = 0,
-  color
-}) => ({
-  height: height - paddingTop - paddingBottom - 2 * borderWidth,
-  color
-}); // the native input has a side padding of 8px, which can't be adjusted, so we have to account for that in the container
-
-
-const selectAndroidContainerStyles = ({
-  paddingLeft = 0,
-  paddingRight = 0,
-  ...rest
-}) => ({
-  paddingLeft: paddingLeft > 8 ? paddingLeft - 8 : 0,
-  paddingRight: paddingRight > 8 ? paddingRight - 8 : 0,
-  ...rest
-});
+const selectAndroidInputStyles = _ref => {
+  let {
+    height = 0,
+    paddingBottom = 0,
+    paddingTop = 0,
+    borderWidth = 0,
+    color
+  } = _ref;
+  return {
+    height: height - paddingTop - paddingBottom - 2 * borderWidth,
+    color
+  };
+}; // the native input has a side padding of 8px, which can't be adjusted, so we have to account for that in the container
+
+
+const selectAndroidContainerStyles = _ref2 => {
+  let {
+    paddingLeft = 0,
+    paddingRight = 0,
+    ...rest
+  } = _ref2;
+  return {
+    paddingLeft: paddingLeft > 8 ? paddingLeft - 8 : 0,
+    paddingRight: paddingRight > 8 ? paddingRight - 8 : 0,
+    ...rest
+  };
+};
+
+const Picker = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+  let {
+    value,
+    onChange,
+    onFocus,
+    onBlur,
+    style,
+    inactive,
+    children,
+    placeholder,
+    ...rest
+  } = _ref3;
 
-const Picker = /*#__PURE__*/(0, _react.forwardRef)(({
-  value,
-  onChange,
-  onFocus,
-  onBlur,
-  style,
-  inactive,
-  children,
-  placeholder,
-  ...rest
-}, ref) => {
   // ungroup items, since there's no way to support groups on native
   const flatChildren = _react.Children.toArray(children).flatMap(child => {
     if (child.type === _Group.default) {
@@ -70,12 +78,15 @@ const Picker = /*#__PURE__*/(0, _react.forwardRef)(({
     return child;
   });
 
-  const items = flatChildren.map(({
-    props
-  }) => ({
-    label: props.children,
-    value: props.value
-  })); // Unlike other input components, react-native-picker-select doesn't pass an event to its change fn.
+  const items = flatChildren.map(_ref4 => {
+    let {
+      props
+    } = _ref4;
+    return {
+      label: props.children,
+      value: props.value
+    };
+  }); // Unlike other input components, react-native-picker-select doesn't pass an event to its change fn.
 
   const handleChange = (newValue, index) => {
     if (onChange) onChange(newValue, {

package/lib/Select/Select.js

@@ -33,26 +33,28 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.inputSupportsProps, _utils.viewProps]);
 
-const selectInputStyles = ({
-  backgroundColor,
-  color,
-  borderWidth = 0,
-  borderColor,
-  borderRadius,
-  paddingTop,
-  paddingBottom,
-  paddingLeft = 0,
-  paddingRight,
-  fontName,
-  fontSize,
-  fontWeight,
-  lineHeight,
-  icon,
-  iconSize = 0,
-  validationIcon,
-  validationIconSize = 0,
-  height
-}, inactive) => {
+const selectInputStyles = (_ref, inactive) => {
+  let {
+    backgroundColor,
+    color,
+    borderWidth = 0,
+    borderColor,
+    borderRadius,
+    paddingTop,
+    paddingBottom,
+    paddingLeft = 0,
+    paddingRight,
+    fontName,
+    fontSize,
+    fontWeight,
+    lineHeight,
+    icon,
+    iconSize = 0,
+    validationIcon,
+    validationIconSize = 0,
+    height
+  } = _ref;
+
   // Subtract border width from padding so overall input width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
   const offsetBorder = value => typeof value === 'number' ? Math.max(0, value - borderWidth) : value;
@@ -104,53 +106,68 @@ const selectInputStyles = ({
   };
 };
 
-const selectOuterBorderStyles = ({
-  outerBackgroundColor,
-  outerBorderWidth,
-  outerBorderColor,
-  borderRadius
-}) => ({
-  background: outerBackgroundColor,
-  ...(0, _ThemeProvider.applyOuterBorder)({
-    outerBorderColor,
+const selectOuterBorderStyles = _ref2 => {
+  let {
+    outerBackgroundColor,
     outerBorderWidth,
+    outerBorderColor,
     borderRadius
-  })
-});
+  } = _ref2;
+  return {
+    background: outerBackgroundColor,
+    ...(0, _ThemeProvider.applyOuterBorder)({
+      outerBorderColor,
+      outerBorderWidth,
+      borderRadius
+    })
+  };
+};
 
-const selectIconTokens = ({
-  iconSize,
-  iconColor
-}) => ({
-  size: iconSize,
-  color: iconColor
-});
+const selectIconTokens = _ref3 => {
+  let {
+    iconSize,
+    iconColor
+  } = _ref3;
+  return {
+    size: iconSize,
+    color: iconColor
+  };
+};
 
-const selectIconContainerStyles = ({
-  paddingRight,
-  paddingBottom
-}) => ({
-  paddingRight,
-  paddingBottom
-});
+const selectIconContainerStyles = _ref4 => {
+  let {
+    paddingRight,
+    paddingBottom
+  } = _ref4;
+  return {
+    paddingRight,
+    paddingBottom
+  };
+};
 
-const selectValidationIconTokens = ({
-  validationIconSize,
-  validationIconColor
-}) => ({
-  size: validationIconSize,
-  color: validationIconColor
-});
+const selectValidationIconTokens = _ref5 => {
+  let {
+    validationIconSize,
+    validationIconColor
+  } = _ref5;
+  return {
+    size: validationIconSize,
+    color: validationIconColor
+  };
+};
 
-const selectValidationIconContainerStyles = ({
-  icon,
-  iconSize = 0,
-  paddingRight = 0,
-  paddingBottom
-}) => ({
-  paddingRight: icon ? paddingRight + iconSize : paddingRight,
-  paddingBottom
-});
+const selectValidationIconContainerStyles = _ref6 => {
+  let {
+    icon,
+    iconSize = 0,
+    paddingRight = 0,
+    paddingBottom
+  } = _ref6;
+  return {
+    paddingRight: icon ? paddingRight + iconSize : paddingRight,
+    paddingBottom
+  };
+};
 /**
  * A basic form single-choice select component. Use in forms or individually to receive user's input.
  *
@@ -185,20 +202,21 @@ const selectValidationIconContainerStyles = ({
  */
 
 
-const Select = /*#__PURE__*/(0, _react.forwardRef)(({
-  value,
-  initialValue,
-  onChange,
-  children,
-  inactive,
-  readOnly,
-  placeholder,
-  validation,
-  tokens,
-  variant,
-  testID,
-  ...rest
-}, ref) => {
+const Select = /*#__PURE__*/(0, _react.forwardRef)((_ref7, ref) => {
+  let {
+    value,
+    initialValue,
+    onChange,
+    children,
+    inactive,
+    readOnly,
+    placeholder,
+    validation,
+    tokens,
+    variant,
+    testID,
+    ...rest
+  } = _ref7;
   const {
     currentValue,
     setValue
@@ -236,44 +254,47 @@ const Select = /*#__PURE__*/(0, _react.forwardRef)(({
   } = themeTokens;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, { ...supportsProps,
     ...selectedProps,
-    children: ({
-      inputId,
-      ...props
-    }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-      style: selectOuterBorderStyles(themeTokens),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker.default, {
-        ref: ref,
-        style: selectInputStyles(themeTokens, inactive),
-        onFocus: handleFocus,
-        onBlur: handleBlur,
-        onMouseOver: handleMouseOver,
-        onMouseOut: handleMouseOut,
-        onChange: setValue,
-        value: currentValue,
-        inactive: inactive,
-        placeholder: placeholder !== undefined ? {
-          label: placeholder,
-          value: ''
-        } : undefined,
-        ...props,
-        nativeID: inputId,
-        testID: testID,
-        children: children
-      }), ValidationIconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        pointerEvents: "none",
-        style: [staticStyles.iconContainer, selectValidationIconContainerStyles(themeTokens)],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ValidationIconComponent, { ...selectValidationIconTokens(themeTokens)
-        })
-      }), IconComponent && _Platform.default.OS !== 'android' &&
-      /*#__PURE__*/
-      // we can't hide the default caret of a native picker on android
-      (0, _jsxRuntime.jsx)(_View.default, {
-        pointerEvents: "none",
-        style: [staticStyles.iconContainer, selectIconContainerStyles(themeTokens)],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...selectIconTokens(themeTokens)
-        })
-      })]
-    })
+    children: _ref8 => {
+      let {
+        inputId,
+        ...props
+      } = _ref8;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+        style: selectOuterBorderStyles(themeTokens),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker.default, {
+          ref: ref,
+          style: selectInputStyles(themeTokens, inactive),
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          onMouseOver: handleMouseOver,
+          onMouseOut: handleMouseOut,
+          onChange: setValue,
+          value: currentValue,
+          inactive: inactive,
+          placeholder: placeholder !== undefined ? {
+            label: placeholder,
+            value: ''
+          } : undefined,
+          ...props,
+          nativeID: inputId,
+          testID: testID,
+          children: children
+        }), ValidationIconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          pointerEvents: "none",
+          style: [staticStyles.iconContainer, selectValidationIconContainerStyles(themeTokens)],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ValidationIconComponent, { ...selectValidationIconTokens(themeTokens)
+          })
+        }), IconComponent && _Platform.default.OS !== 'android' &&
+        /*#__PURE__*/
+        // we can't hide the default caret of a native picker on android
+        (0, _jsxRuntime.jsx)(_View.default, {
+          pointerEvents: "none",
+          style: [staticStyles.iconContainer, selectIconContainerStyles(themeTokens)],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...selectIconTokens(themeTokens)
+          })
+        })]
+      });
+    }
   });
 });
 Select.displayName = 'Select';

package/lib/SideNav/Item.js

@@ -27,18 +27,19 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.linkProps, _utils.viewProps]);
 
-function selectItemStyles({
-  backgroundColor,
-  borderColor,
-  borderWidth,
-  borderStyle,
-  paddingLeft,
-  paddingRight,
-  paddingTop,
-  paddingBottom,
-  justifyContent,
-  verticalAlign
-}) {
+function selectItemStyles(_ref) {
+  let {
+    backgroundColor,
+    borderColor,
+    borderWidth,
+    borderStyle,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+    justifyContent,
+    verticalAlign
+  } = _ref;
   return {
     backgroundColor,
     borderTopColor: borderColor,
@@ -59,20 +60,22 @@ function selectItemStyles({
  */
 
 
-const Item = /*#__PURE__*/(0, _react.forwardRef)(({
-  children,
-  itemId,
-  groupId,
-  onPress,
-  isActive = false,
-  isExpanded = false,
-  tokens,
-  variant,
-  href,
-  accessibilityRole = 'link',
-  testID,
-  ...props
-}, ref) => {
+const Item = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
+    children,
+    itemId,
+    groupId,
+    onPress,
+    isActive = false,
+    isExpanded = false,
+    tokens,
+    variant,
+    href,
+    accessibilityRole = 'link',
+    testID,
+    ...props
+  } = _ref2;
+
   const handlePress = () => onPress(itemId, groupId);
 
   const {
@@ -89,13 +92,16 @@ const Item = /*#__PURE__*/(0, _react.forwardRef)(({
   });
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('SideNavItem', tokens, variant);
 
-  const getAppearanceState = ({
-    hovered
-  }) => ({
-    hover: hovered,
-    active: isActive,
-    expanded: isExpanded
-  });
+  const getAppearanceState = _ref3 => {
+    let {
+      hovered
+    } = _ref3;
+    return {
+      hover: hovered,
+      active: isActive,
+      expanded: isExpanded
+    };
+  };
 
   const getPressableStyle = pressableState => selectItemStyles(getTokens(getAppearanceState(pressableState)));
 

package/lib/SideNav/ItemContent.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectAccentStyles = selectAccentStyles;
 exports.default = void 0;
+exports.selectAccentStyles = selectAccentStyles;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -37,17 +37,20 @@ function selectAccentStyles(tokens) {
  */
 
 
-const ItemContent = ({
-  children,
-  tokens
-}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-    tokens: (0, _utils.selectTokens)('Typography', tokens),
-    children: children
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-    style: [staticStyles.absolute, selectAccentStyles(tokens)]
-  })]
-});
+const ItemContent = _ref => {
+  let {
+    children,
+    tokens
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+      tokens: (0, _utils.selectTokens)('Typography', tokens),
+      children: children
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: [staticStyles.absolute, selectAccentStyles(tokens)]
+    })]
+  });
+};
 
 ItemContent.propTypes = {
   tokens: (0, _utils.getTokensPropType)('SideNavItem'),

package/lib/SideNav/ItemsGroup.js

@@ -35,17 +35,19 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  ## Usage Criteria
  - Use `SideNav.ItemsGroup` with large pages that have multiple sections
  */
-const ItemsGroup = /*#__PURE__*/(0, _react.forwardRef)(({
-  children,
-  label,
-  openGroups,
-  groupId,
-  isActive = false,
-  variant,
-  tokens,
-  itemTokens,
-  onToggle
-}, ref) => {
+const ItemsGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    label,
+    openGroups,
+    groupId,
+    isActive = false,
+    variant,
+    tokens,
+    itemTokens,
+    onToggle
+  } = _ref;
+
   // A SideNav control uses the same style and theme as SideNavItem, with a 'parent' variant,
   // plus control-specific tokens from the SideNavItemsGroup theme (e.g. open/close icon, etc).
   const getAppearance = appearance => ({ ...variant,

package/lib/SideNav/SideNav.js

@@ -42,15 +42,16 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
  - Allow the user to navigate between options frequently and efficiently
  */
 
-const SideNav = /*#__PURE__*/(0, _react.forwardRef)(({
-  children,
-  variant = {},
-  tokens,
-  accordion = true,
-  itemTokens,
-  groupTokens,
-  ...rest
-}, ref) => {
+const SideNav = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    variant = {},
+    tokens,
+    accordion = true,
+    itemTokens,
+    groupTokens,
+    ...rest
+  } = _ref;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('SideNav', tokens, variant);
   const [active, setActive] = (0, _react.useState)({
     groupId: undefined,
@@ -73,19 +74,21 @@ const SideNav = /*#__PURE__*/(0, _react.forwardRef)(({
     maxOpen: accordion ? 1 : null,
     style: selectBorderStyles(themeTokens),
     ...selectProps(rest),
-    children: ({
-      openIds,
-      onToggle
-    }) => {
+    children: _ref2 => {
+      let {
+        openIds,
+        onToggle
+      } = _ref2;
+
       const renderItem = (item, index, groupId) => {
         const {
-          itemId = `item-${index}`,
+          itemId = "item-".concat(index),
           onPress
         } = item.props;
 
-        const handlePress = (...args) => {
-          onItemPress(...args);
-          if (onPress) onPress(...args);
+        const handlePress = function () {
+          onItemPress(...arguments);
+          if (onPress) onPress(...arguments);
         };
 
         return /*#__PURE__*/(0, _react.createElement)(_Item.default, { ...item.props,
@@ -107,7 +110,7 @@ const SideNav = /*#__PURE__*/(0, _react.forwardRef)(({
 
         if (child.type === _ItemsGroup.default) {
           const {
-            groupId = `group-${index}`
+            groupId = "group-".concat(index)
           } = child.props;
           const isGroupActive = active.itemId !== undefined && active.groupId === groupId;