@telus-uds/components-base 1.65.0 → 1.67.0

package/lib-module/Select/Group.js

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { componentPropType } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const Group = _ref => {
   let {
     children,
@@ -13,11 +12,9 @@ const Group = _ref => {
     children: children
   });
 };
-
 export default Group;
 Group.propTypes = {
   children: componentPropType('Item'),
-
   /**
    * The label for the group.
    */

package/lib-module/Select/Group.native.js

@@ -1,17 +1,14 @@
 import PropTypes from 'prop-types';
 import { componentPropType } from '../utils';
-
 const Group = _ref => {
   let {
     children
   } = _ref;
   return children;
 };
-
 export default Group;
 Group.propTypes = {
   children: componentPropType('Item'),
-
   /**
    * The label for the group.
    */

package/lib-module/Select/Item.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const Item = _ref => {
   let {
     children,
@@ -12,11 +11,9 @@ const Item = _ref => {
     children: children
   });
 };
-
 export default Item;
 Item.propTypes = {
   children: PropTypes.string.isRequired,
-
   /**
    * The value of the option
    */

package/lib-module/Select/Item.native.js

@@ -1,3 +1,2 @@
 const Item = () => null;
-
 export default Item;

package/lib-module/Select/Picker.native.js

@@ -5,11 +5,11 @@ import Platform from "react-native-web/dist/exports/Platform";
 import NativePicker from 'react-native-picker-select';
 import { a11yProps, componentPropType } from '../utils';
 import Group from './Group';
-import { ANDROID_HEIGHT_OFFSET, ANDROID_HORIZONTAL_PADDING_OFFSET, ANDROID_DEFAULT_PADDING } from './constants'; // Styling of the native input is very limited, most of the styles have to be applied to an additional View
+import { ANDROID_HEIGHT_OFFSET, ANDROID_HORIZONTAL_PADDING_OFFSET, ANDROID_DEFAULT_PADDING } from './constants';
 
+// Styling of the native input is very limited, most of the styles have to be applied to an additional View
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-
 const selectAndroidInputStyles = _ref => {
   let {
     height = 0,
@@ -21,16 +21,17 @@ const selectAndroidInputStyles = _ref => {
     paddingTop: 0,
     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
-
+};
 
+// 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 = ANDROID_DEFAULT_PADDING,
     paddingRight = ANDROID_DEFAULT_PADDING,
     ...rest
   } = _ref2;
-  return { ...rest,
+  return {
+    ...rest,
     paddingLeft: paddingLeft > ANDROID_HORIZONTAL_PADDING_OFFSET ? paddingLeft - ANDROID_HORIZONTAL_PADDING_OFFSET : ANDROID_DEFAULT_PADDING,
     paddingRight: paddingRight > ANDROID_HORIZONTAL_PADDING_OFFSET ? paddingRight - ANDROID_HORIZONTAL_PADDING_OFFSET : ANDROID_DEFAULT_PADDING,
     paddingBottom: ANDROID_DEFAULT_PADDING,
@@ -38,7 +39,6 @@ const selectAndroidContainerStyles = _ref2 => {
     height: rest.height + ANDROID_HEIGHT_OFFSET
   };
 };
-
 const Picker = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
     value,
@@ -56,7 +56,6 @@ const Picker = /*#__PURE__*/forwardRef((_ref3, ref) => {
     if (child.type === Group) {
       return child.props.children;
     }
-
     return child;
   });
   const items = flatChildren.map(_ref4 => {
@@ -67,8 +66,9 @@ const Picker = /*#__PURE__*/forwardRef((_ref3, ref) => {
       label: props.children,
       value: props.value
     };
-  }); // Unlike other input components, react-native-picker-select doesn't pass an event to its change fn.
+  });
 
+  // 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, {
       // TODO: see if it's possible to pass a real React SyntheticEvent here. For now, just pass an
@@ -79,7 +79,6 @@ const Picker = /*#__PURE__*/forwardRef((_ref3, ref) => {
       }
     });
   };
-
   const picker = /*#__PURE__*/_jsx(NativePicker, {
     pickerProps: {
       ref
@@ -97,7 +96,6 @@ const Picker = /*#__PURE__*/forwardRef((_ref3, ref) => {
     },
     placeholder: placeholder !== undefined ? placeholder : {}
   });
-
   return /*#__PURE__*/_jsx(_Fragment, {
     children: Platform.OS === 'android' ? /*#__PURE__*/_jsx(View, {
       style: selectAndroidContainerStyles(style),

package/lib-module/Select/Select.js

@@ -11,7 +11,6 @@ import { ANDROID_VALIDATION_ICON_CONTAINER_OFFSET } from './constants';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, inputSupportsProps, viewProps]);
-
 const selectInputStyles = (_ref, themeOptions, inactive) => {
   let {
     backgroundColor,
@@ -33,11 +32,9 @@ const selectInputStyles = (_ref, themeOptions, inactive) => {
     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;
-
   const textStyles = applyTextStyles({
     fontName,
     fontSize,
@@ -53,21 +50,18 @@ const selectInputStyles = (_ref, themeOptions, inactive) => {
       outline: 'none',
       cursor: inactive ? 'not-allowed' : undefined,
       opacity: inactive ? 1 : undefined // override Chrome's default fadeout of a disabled select
-
     }
   });
-  let paddingWithIcons = paddingRight;
 
+  let paddingWithIcons = paddingRight;
   if (Platform.OS !== 'android') {
     if (icon) {
       paddingWithIcons += iconSize;
     }
-
     if (validationIcon) {
       paddingWithIcons += validationIconSize;
     }
   }
-
   return {
     backgroundColor,
     color,
@@ -83,7 +77,6 @@ const selectInputStyles = (_ref, themeOptions, inactive) => {
     ...webStyles
   };
 };
-
 const selectOuterBorderStyles = _ref2 => {
   let {
     outerBackgroundColor,
@@ -100,7 +93,6 @@ const selectOuterBorderStyles = _ref2 => {
     })
   };
 };
-
 const selectIconTokens = _ref3 => {
   let {
     iconSize,
@@ -111,7 +103,6 @@ const selectIconTokens = _ref3 => {
     color: iconColor
   };
 };
-
 const selectIconContainerStyles = _ref4 => {
   let {
     paddingRight,
@@ -123,7 +114,6 @@ const selectIconContainerStyles = _ref4 => {
     paddingBottom
   };
 };
-
 const selectValidationIconTokens = _ref5 => {
   let {
     validationIconSize,
@@ -134,7 +124,6 @@ const selectValidationIconTokens = _ref5 => {
     color: validationIconColor
   };
 };
-
 const selectValidationIconContainerStyles = _ref6 => {
   let {
     icon,
@@ -151,7 +140,6 @@ const selectValidationIconContainerStyles = _ref6 => {
     })
   };
 };
-
 const selectCustomFeedbackStyles = _ref7 => {
   let {
     feedbackBackgroundColor
@@ -160,6 +148,7 @@ const selectCustomFeedbackStyles = _ref7 => {
     backgroundColor: feedbackBackgroundColor
   };
 };
+
 /**
  * A basic form single-choice select component. Use in forms or individually to receive user's input.
  *
@@ -192,8 +181,6 @@ const selectCustomFeedbackStyles = _ref7 => {
  * NOTE: this does not work on native platforms - the grouped items will be shown at the same level as the non-grouped items.
  *
  */
-
-
 const Select = /*#__PURE__*/forwardRef((_ref8, ref) => {
   let {
     value,
@@ -219,17 +206,11 @@ const Select = /*#__PURE__*/forwardRef((_ref8, ref) => {
     readOnly
   });
   const [isFocused, setIsFocused] = useState(false);
-
   const handleFocus = () => setIsFocused(true);
-
   const handleBlur = () => setIsFocused(false);
-
   const [isHovered, setIsHovered] = useState(false);
-
   const handleMouseOver = () => setIsHovered(true);
-
   const handleMouseOut = () => setIsHovered(false);
-
   const {
     supportsProps,
     ...selectedProps
@@ -247,7 +228,8 @@ const Select = /*#__PURE__*/forwardRef((_ref8, ref) => {
   const {
     themeOptions
   } = useTheme();
-  return /*#__PURE__*/_jsx(InputSupports, { ...supportsProps,
+  return /*#__PURE__*/_jsx(InputSupports, {
+    ...supportsProps,
     ...selectedProps,
     validation: validation,
     feedbackTokens: selectCustomFeedbackStyles(themeTokens),
@@ -279,7 +261,8 @@ const Select = /*#__PURE__*/forwardRef((_ref8, ref) => {
         }), ValidationIconComponent && /*#__PURE__*/_jsx(View, {
           pointerEvents: "none",
           style: [staticStyles.iconContainer, selectValidationIconContainerStyles(themeTokens)],
-          children: /*#__PURE__*/_jsx(ValidationIconComponent, { ...selectValidationIconTokens(themeTokens)
+          children: /*#__PURE__*/_jsx(ValidationIconComponent, {
+            ...selectValidationIconTokens(themeTokens)
           })
         }), IconComponent && Platform.OS !== 'android' &&
         /*#__PURE__*/
@@ -287,7 +270,8 @@ const Select = /*#__PURE__*/forwardRef((_ref8, ref) => {
         _jsx(View, {
           pointerEvents: "none",
           style: [staticStyles.iconContainer, selectIconContainerStyles(themeTokens)],
-          children: /*#__PURE__*/_jsx(IconComponent, { ...selectIconTokens(themeTokens)
+          children: /*#__PURE__*/_jsx(IconComponent, {
+            ...selectIconTokens(themeTokens)
           })
         })]
       });
@@ -295,54 +279,45 @@ const Select = /*#__PURE__*/forwardRef((_ref8, ref) => {
   });
 });
 Select.displayName = 'Select';
-Select.propTypes = { ...selectedSystemPropTypes,
-
+Select.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Initial value for the uncontrolled version.
    */
   initialValue: PropTypes.string,
-
   /**
    * Current value to be set as selected.
    */
   value: PropTypes.string,
-
   /**
    * Callback to be called when the value changes.
    */
   onChange: PropTypes.func,
-
   /**
    * An array of items or item groups to be used as options.
    */
   children: componentPropType(['Item', 'Group']),
-
   /**
    * Whether the select is disabled.
    */
   inactive: PropTypes.bool,
-
   /**
    * Whether the select is read-only.
    */
   readOnly: PropTypes.bool,
-
   /**
    * A placeholder to provide instructions (such as "Please select...")
    * as an unselectable option
    */
   placeholder: PropTypes.string,
-
   /**
    * Select tokens.
    */
   tokens: getTokensPropType('Select'),
-
   /**
    * Select variant.
    */
   variant: variantProp.propType,
-
   /**
    * Dedicated ID for testing.
    */

package/lib-module/SideNav/Item.js

@@ -7,7 +7,6 @@ import { useThemeTokensCallback, verticalAlignRow } from '../ThemeProvider';
 import ItemContent from './ItemContent';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps]);
-
 function selectItemStyles(_ref) {
   let {
     backgroundColor,
@@ -34,13 +33,12 @@ function selectItemStyles(_ref) {
     ...verticalAlignRow(verticalAlign)
   };
 }
+
 /**
  `SideNav.Item` is a navigational element that is used within `SideNav` or `SideNav.ItemsGroup`.
 
  This component can only be accessed as a name-spaced component: `SideNav.Item`.
  */
-
-
 const Item = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
     children,
@@ -56,9 +54,7 @@ const Item = /*#__PURE__*/forwardRef((_ref2, ref) => {
     testID,
     ...props
   } = _ref2;
-
   const handlePress = () => onPress(itemId, groupId);
-
   const {
     hrefAttrs,
     rest
@@ -71,7 +67,6 @@ const Item = /*#__PURE__*/forwardRef((_ref2, ref) => {
     ...rest
   });
   const getTokens = useThemeTokensCallback('SideNavItem', tokens, variant);
-
   const getAppearanceState = _ref3 => {
     let {
       hovered,
@@ -84,13 +79,12 @@ const Item = /*#__PURE__*/forwardRef((_ref2, ref) => {
       focus: focused
     };
   };
-
-  const getPressableStyle = pressableState => ({ ...selectItemStyles(getTokens(getAppearanceState(pressableState))),
+  const getPressableStyle = pressableState => ({
+    ...selectItemStyles(getTokens(getAppearanceState(pressableState))),
     ...(Platform.OS === 'web' ? {
       outline: 'none'
     } : {})
   });
-
   return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
     style: getPressableStyle,
@@ -108,19 +102,17 @@ const Item = /*#__PURE__*/forwardRef((_ref2, ref) => {
   });
 });
 Item.displayName = 'Item';
-Item.propTypes = { ...selectedSystemPropTypes,
-
+Item.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Text content of the `Item`.
    */
   children: PropTypes.node.isRequired,
-
   /**
    * @ignore
    * Set internally in `SideNav` render function - used to keep track of active item.
    */
   itemId: PropTypes.string,
-
   /**
    * @ignore
    * Set internally in `SideNav` render function - used to keep track of expanded items groups.
@@ -128,19 +120,16 @@ Item.propTypes = { ...selectedSystemPropTypes,
   groupId: PropTypes.string,
   onPress: PropTypes.func,
   href: PropTypes.string,
-
   /**
    * On Web if href is passed, React Native Web maps this object's props to
    * `rel`, `target` and `download` attrs.
    */
   hrefAttrs: PropTypes.shape(hrefAttrsProp.types),
-
   /**
    * @ignore
    * Set internally in `SideNav` render function.
    */
   isActive: PropTypes.bool,
-
   /**
    * @ignore
    * Set internally in `SideNav.ItemsGroup` render function. Used to mark expanded `ItemsGroup` parent.

package/lib-module/SideNav/ItemContent.js

@@ -17,10 +17,10 @@ export function selectAccentStyles(tokens) {
     position: 'absolute'
   };
 }
+
 /**
  * Content inside an item or control in a SideNav, themed by the SideNavItem theme
  */
-
 const ItemContent = _ref => {
   let {
     children,
@@ -36,7 +36,6 @@ const ItemContent = _ref => {
     })]
   });
 };
-
 ItemContent.propTypes = {
   tokens: getTokensPropType('SideNavItem'),
   children: PropTypes.node

package/lib-module/SideNav/ItemsGroup.js

@@ -4,6 +4,7 @@ import ItemContent from './ItemContent';
 import ExpandCollapse from '../ExpandCollapse';
 import { getTokensPropType, variantProp, componentPropType, selectTokens } from '../utils';
 import { useThemeTokensCallback } from '../ThemeProvider';
+
 /**
  Expandable content areas for use within `SideNav`.
 
@@ -14,7 +15,6 @@ import { useThemeTokensCallback } from '../ThemeProvider';
  ## Usage Criteria
  - Use `SideNav.ItemsGroup` with large pages that have multiple sections
  */
-
 import { jsx as _jsx } from "react/jsx-runtime";
 const ItemsGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
@@ -28,38 +28,35 @@ const ItemsGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
     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,
+  const getAppearance = appearance => ({
+    ...variant,
     ...appearance,
     active: isActive
   });
-
-  const getItemAppearance = appearance => ({ ...getAppearance(appearance),
+  const getItemAppearance = appearance => ({
+    ...getAppearance(appearance),
     type: 'parent'
   });
-
   const getGroupTokens = useThemeTokensCallback('SideNavItemsGroup', tokens, variant);
-
   const getPanelTokens = appearance => {
     const {
       panelBorderColor,
       ...itemsGroupTokens
     } = getGroupTokens(getAppearance(appearance));
-    const groupTokens = { ...itemsGroupTokens,
+    const groupTokens = {
+      ...itemsGroupTokens,
       borderWidth: 0,
       marginBottom: 0
     };
     return selectTokens('ExpandCollapsePanel', groupTokens);
   };
-
   const getItemTokens = useThemeTokensCallback('SideNavItem', itemTokens, variant);
-
-  const getControlTokens = appearance => selectTokens('ExpandCollapseControl', { ...getItemTokens(getItemAppearance(appearance)),
+  const getControlTokens = appearance => selectTokens('ExpandCollapseControl', {
+    ...getItemTokens(getItemAppearance(appearance)),
     // main style from SideNavItem
     ...getGroupTokens(getAppearance(appearance)) // control-specific tokens like icon etc
-
   });
 
   const controlContent = controlState => {
@@ -69,7 +66,6 @@ const ItemsGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
       children: label
     });
   };
-
   return /*#__PURE__*/_jsx(ExpandCollapse.Panel, {
     ref: ref,
     openIds: openGroups,
@@ -91,30 +87,25 @@ ItemsGroup.propTypes = {
    * Specifies the links contained within. It may only contain `SideNav.Item`.
    */
   children: componentPropType('Item'),
-
   /**
    * Text content of the group's parent `SideNav.Item`.
    */
   label: PropTypes.string.isRequired,
-
   /**
    * @ignore
    * Set internally in `SideNav` render function - used to keep track of expanded items groups.
    */
   groupId: PropTypes.string,
-
   /**
    * @ignore
    * Set internally in `SideNav` render function. Called when the group is expanded/collapsed.
    */
   onToggle: PropTypes.func,
-
   /**
    * @ignore
    * Set internally in `SideNav` render function. Contains `groupId`s of currently open groups.
    */
   openGroups: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
-
   /**
    * @ignore
    * Set internally in `SideNav` render function. Used to mark group containing the currently active `SideNav.Item`.
@@ -122,7 +113,6 @@ ItemsGroup.propTypes = {
   isActive: PropTypes.bool,
   variant: variantProp.propType,
   tokens: getTokensPropType('SideNavItemsGroup'),
-
   /**
    * Custom tokens for `SideNav.Item`
    */