@telus-uds/components-base 1.66.0 → 1.67.1

package/lib-module/Search/Search.js

@@ -10,7 +10,6 @@ import dictionary from './dictionary';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const [selectInputProps, selectedInputPropTypes] = selectSystemProps([textInputHandlerProps, textInputProps]);
-
 const selectInputTokens = _ref => {
   let {
     searchTokens,
@@ -29,13 +28,12 @@ const selectInputTokens = _ref => {
   } = buttonTokens;
   const buttonWidth = paddingLeft + paddingRight + iconSize;
   const paddingWithButtons = inputPaddingRight + (submitButtonIcon ? buttonWidth : 0) + (clearButtonIcon ? buttonsGapSize + buttonWidth : 0);
-  return { ...selectTokens('TextInput', searchTokens),
+  return {
+    ...selectTokens('TextInput', searchTokens),
     paddingRight: paddingWithButtons
   };
 };
-
 const selectButtonTokens = tokens => selectTokens('Button', tokens);
-
 const selectIconTokens = _ref2 => {
   let {
     iconSize,
@@ -46,6 +44,7 @@ const selectIconTokens = _ref2 => {
     size: iconSize
   };
 };
+
 /**
  * The `Search` component is a combination of a `TextInput` and 2 different kinds of custom buttons.
  * Use `Search` to feature autocomplete interactions.
@@ -59,8 +58,6 @@ const selectIconTokens = _ref2 => {
  * Use the following props to supply additional accessibility labels for the input - `accessibilityLabel`,
  * clear button - `clearButtonAccessibilityLabel`, and submit button - `submitButtonAccessibilityLabel`.
  */
-
-
 const Search = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
     initialValue,
@@ -92,8 +89,9 @@ const Search = /*#__PURE__*/forwardRef((_ref3, ref) => {
   });
   const buttonTokens = useThemeTokens('SearchButton', tokens, variant);
   const getThemeTokens = useThemeTokensCallback('Search', tokens, variant);
-  const getButtonTokens = useThemeTokensCallback('SearchButton', tokens, variant); // TODO: support overriding the a11y props using a custom dictionary
+  const getButtonTokens = useThemeTokensCallback('SearchButton', tokens, variant);
 
+  // TODO: support overriding the a11y props using a custom dictionary
   const getCopy = useCopy({
     dictionary,
     copy
@@ -103,39 +101,37 @@ const Search = /*#__PURE__*/forwardRef((_ref3, ref) => {
     buttonsGap,
     clearButtonIcon: ClearButtonIcon,
     submitButtonIcon: SubmitButtonIcon
-  } = themeTokens; // get the actual gap value for the current viewport
+  } = themeTokens;
 
+  // get the actual gap value for the current viewport
   const buttonsGapSize = useSpacingScale(buttonsGap);
-
   const handleSubmit = event => {
     if (onSubmit !== undefined) {
       onSubmit(currentValue, event);
     }
   };
-
   const handleClear = event => {
     var _ref$current;
-
     setValue('', event);
     onClear === null || onClear === void 0 ? void 0 : onClear('', event);
     ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
   };
-
   const handleFocus = event => {
     if (onFocus !== undefined) onFocus(event);
   };
+  const isEmpty = currentValue === '';
 
-  const isEmpty = currentValue === ''; // Accessibility label should always be present and correctly localised
-
-  const a11yLabelText = accessibilityLabel || getCopy('accessibilityLabel'); // Placeholder is optional and may be unset by passing an empty string
-
+  // Accessibility label should always be present and correctly localised
+  const a11yLabelText = accessibilityLabel || getCopy('accessibilityLabel');
+  // Placeholder is optional and may be unset by passing an empty string
   const placeholderText = placeholder ?? a11yLabelText;
   const {
     nativeID,
     testID,
     ...containerProps
   } = selectContainerProps(rest);
-  return /*#__PURE__*/_jsx(View, { ...containerProps,
+  return /*#__PURE__*/_jsx(View, {
+    ...containerProps,
     children: /*#__PURE__*/_jsx(TextInputBase, {
       nativeID: nativeID,
       testID: testID,
@@ -163,18 +159,22 @@ const Search = /*#__PURE__*/forwardRef((_ref3, ref) => {
         inactive: inactive,
         onPress: handleClear,
         tokens: appearances => selectButtonTokens(getButtonTokens(appearances)),
-        children: buttonState => /*#__PURE__*/_jsx(ClearButtonIcon, { ...selectIconTokens(getButtonTokens(buttonState))
+        children: buttonState => /*#__PURE__*/_jsx(ClearButtonIcon, {
+          ...selectIconTokens(getButtonTokens(buttonState))
         })
       }, "clear"), SubmitButtonIcon && /*#__PURE__*/_jsx(ButtonBase, {
         accessibilityLabel: getCopy('submitButtonAccessibilityLabel'),
         accessibilityRole: "button",
         inactive: inactive,
         onPress: handleSubmit,
-        tokens: buttonState => selectButtonTokens(getButtonTokens({ ...buttonState,
+        tokens: buttonState => selectButtonTokens(getButtonTokens({
+          ...buttonState,
           priority: 'high'
         })),
         nativeID: nativeSubmitBtnID,
-        children: buttonState => /*#__PURE__*/_jsx(SubmitButtonIcon, { ...selectIconTokens(getButtonTokens({ ...buttonState,
+        children: buttonState => /*#__PURE__*/_jsx(SubmitButtonIcon, {
+          ...selectIconTokens(getButtonTokens({
+            ...buttonState,
             priority: 'high'
           }))
         })
@@ -183,54 +183,46 @@ const Search = /*#__PURE__*/forwardRef((_ref3, ref) => {
   });
 });
 Search.displayName = 'Search';
-Search.propTypes = { ...selectedContainerPropTypes,
+Search.propTypes = {
+  ...selectedContainerPropTypes,
   ...selectedInputPropTypes,
-
   /**
    * Use this to set the initial value of the search input.
    * Updating `initialValue` will **not** update the actual value.
    */
   initialValue: PropTypes.string,
-
   /**
    * Label rendered in the search input when it has no value.
    */
   placeholder: PropTypes.string,
-
   /**
    * Disables all user interactions with the search input.
    */
   inactive: PropTypes.bool,
-
   /**
    * Use to react upon search input's value changes.
    * Will receive the searched value as an argument.
    */
   onChange: PropTypes.func,
-
   /**
    * Triggered when the search input is submitted,
    * either by pressing the submit button, "Enter" key on web,
    * or "Search" key in a mobile keyboard.
    */
   onSubmit: PropTypes.func,
-
   /**
    * Triggered when the clear button is pressed.
    */
   onClear: PropTypes.func,
-
   /**
    * Triggered when the search input is focused.
    */
   onFocus: PropTypes.func,
-
   /**
    *
    * Use to provide an accessible label for the input (visually hidden).
    */
   accessibilityLabel: PropTypes.string,
-
   /**
    * Select English or French copy for the accessible labels.
    * You may also pass in a custom dictionary object.
@@ -242,7 +234,6 @@ Search.propTypes = { ...selectedContainerPropTypes,
   })]),
   tokens: getTokensPropType('Search'),
   variant: variantProp.propType,
-
   /**
    * ID for Submit button element on web
    */

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