@telus-uds/components-base 1.66.0 → 1.67.1

package/lib-module/Autocomplete/Autocomplete.js

@@ -29,9 +29,10 @@ const staticStyles = StyleSheet.create({
     flexShrink: 0
   }
 });
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, inputSupportsProps, textInputHandlerProps, textInputProps]); // Returns JSX to display a bold string `str` with unbolded occurrences of the
-// `substring` based in the array of `matchIndexes` provided
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, inputSupportsProps, textInputHandlerProps, textInputProps]);
 
+// Returns JSX to display a bold string `str` with unbolded occurrences of the
+// `substring` based in the array of `matchIndexes` provided
 const highlightAllMatches = function (str) {
   let substring = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   let matchIndexes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
@@ -46,7 +47,8 @@ const highlightAllMatches = function (str) {
       tokens: {
         color: resultsTextColor
       },
-      children: matchIndexes.reduce((acc, matchIndex, index) => [...acc, // Add a piece of the string up to the first occurrence of the substring
+      children: matchIndexes.reduce((acc, matchIndex, index) => [...acc,
+      // Add a piece of the string up to the first occurrence of the substring
       index === 0 && (str.slice(0, matchIndex) ?? ''),
       /*#__PURE__*/
       // Unbold the occurrence of the substring (while keeping the original casing)
@@ -58,39 +60,35 @@ const highlightAllMatches = function (str) {
           color: resultsTextColor
         },
         children: str.slice(matchIndex, matchIndex + substring.length)
-      }, matchIndex), // Add the rest of the string until the next occurrence or the end of it
+      }, matchIndex),
+      // Add the rest of the string until the next occurrence or the end of it
       str.slice(matchIndex + substring.length, matchIndexes[index + 1] ?? str.length)], [])
     })
   );
 };
-
 const highlight = function () {
   let items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   let text = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   let color = arguments.length > 2 ? arguments[2] : undefined;
   return items.reduce((acc, item) => {
     var _Array$from;
-
     const matches = (_Array$from = Array.from(matchAll(item.label.toLowerCase(), text.toLowerCase().replace(/[/\-\\^$*+?.()|[\]{}]/g, '\\$&')))) === null || _Array$from === void 0 ? void 0 : _Array$from.map(_ref => {
       let {
         index
       } = _ref;
       return index;
     });
-
     if (matches !== null && matches !== void 0 && matches.length) {
-      return [...acc, { ...item,
+      return [...acc, {
+        ...item,
         label: highlightAllMatches(item.label, text, matches, color)
       }];
     }
-
     return [...acc, item];
   }, []);
 };
-
 const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
   var _ref3;
-
   let {
     children,
     copy = 'en',
@@ -115,27 +113,31 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
     color: resultsTextColor
   } = useThemeTokens('Search', {}, {
     focus: true
-  }); // The wrapped input is mostly responsible for controlled vs uncontrolled handling,
+  });
+  // The wrapped input is mostly responsible for controlled vs uncontrolled handling,
   // but we also need to adjust suggestions based on the mode:
   // - in controlled mode we rely entirely on the suggestions passed via the `items` prop,
   // - in uncontrolled mode we filter the suggestions ourselves based on the `initialItems`
   //   prop and the text entered
+  const isControlled = value !== undefined;
 
-  const isControlled = value !== undefined; // We need to store current items for uncontrolled usage
-
+  // We need to store current items for uncontrolled usage
   const [currentItems, setCurrentItems] = useState(initialItems);
-  const [otherItems, setOtherItems] = useState(items); // We need to store the current value as well to be able to highlight it
+  const [otherItems, setOtherItems] = useState(items);
 
+  // We need to store the current value as well to be able to highlight it
   const [currentValue, setCurrentValue] = useState(value ?? initialValue);
   const inputTokens = {
     paddingLeft: INPUT_LEFT_PADDING
-  }; // Setting up the overlay
+  };
 
+  // Setting up the overlay
   const openOverlayRef = useRef();
   const [isExpanded, setIsExpanded] = useState(((_ref3 = value ?? initialValue) === null || _ref3 === void 0 ? void 0 : _ref3.length) >= minToSuggestion);
   const [isFocused, setisFocused] = useState(false);
-  const [sourceLayout, setSourceLayout] = useState(null); // When it's nested, selected value
+  const [sourceLayout, setSourceLayout] = useState(null);
 
+  // When it's nested, selected value
   const [nestedSelectedValue, setNestedSelectedValue] = useState(null);
   const {
     supportsProps,
@@ -158,28 +160,25 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
       vertical: Platform.OS !== 'web' && (hint || inputLabel) ? 28 : 4
     }
   });
-  const targetRef = useRef(null); // We limit the number of suggestions displayed to avoid huge lists
+  const targetRef = useRef(null);
+  // We limit the number of suggestions displayed to avoid huge lists
   // TODO: add a way to make the `Listbox` occupy fixed height and be scrollable
   // within that height, which will unlock similar behaviour for `AutoComplete` as well
-
   const itemsToSuggest = function () {
     let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     return maxSuggestions ? data.slice(0, maxSuggestions) : [...data];
   };
-
   const getCopy = useCopy({
     dictionary,
     copy
-  }); // Tracking input width changes to resize the listbox overlay accordingly
-
+  });
+  // Tracking input width changes to resize the listbox overlay accordingly
   const [inputWidth, setInputWidth] = useState();
   useSafeLayoutEffect(() => {
     if (Platform.OS === 'web') {
       const updateInputWidth = () => {
         var _inputRef$current;
-
         setInputWidth((inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.clientWidth) + 4); // adding back all the input borders / outlines
-
         setIsExpanded(false); // close the suggestions while the input is changing
       };
 
@@ -192,32 +191,25 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
         Dimensions.removeEventListener('change', throttledUpdateInputWidth);
       };
     }
-
     setInputWidth(sourceLayout === null || sourceLayout === void 0 ? void 0 : sourceLayout.width);
     return () => {};
   }, [inputRef, sourceLayout]);
-
   const handleMeasure = event => {
     onTargetLayout(event);
-
     if (Platform.OS !== 'web') {
       var _inputRef$current2;
-
       inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.measureInWindow((x, y, width) => {
         setInputWidth(width);
       });
     }
   };
-
   const handleChange = newValue => {
     onChange === null || onChange === void 0 ? void 0 : onChange(newValue || '');
     setCurrentValue(newValue);
     setIsExpanded((newValue === null || newValue === void 0 ? void 0 : newValue.length) >= minToSuggestion);
-
     if (!isControlled && initialItems !== undefined) {
       setCurrentItems(initialItems.filter(_ref4 => {
         var _label$toLowerCase;
-
         let {
           label
         } = _ref4;
@@ -225,10 +217,8 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
       }));
     }
   };
-
   const handleSelect = selectedId => {
     var _ref5;
-
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(selectedId);
     const {
       label: newValue,
@@ -241,25 +231,22 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
       return id === selectedId;
     });
     if (title) return;
-
     if (!nested) {
       setNestedSelectedValue(null);
       onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
       setIsExpanded(false);
     }
-
     setCurrentValue(newValue);
     if (!isControlled && inputRef !== null && inputRef !== void 0 && inputRef.current) inputRef.current.value = newValue;
     if (nested) setNestedSelectedValue(newValue);
   };
+
   /**
    * When an item that is nested equal "true" is selected this useEffect is executed.
    * The nested item is added to the item list at the top, the if validates it doesn't exist
    * within the list, if doesn't exist the nested item is added to the top of the list,
    * the nested item is added with an id equal "0"
    */
-
-
   useEffect(() => {
     if (nestedSelectedValue && !items.find(item => item.id === 0)) {
       const tmpItems = [...items];
@@ -269,16 +256,15 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
         id: 0
       });
       setOtherItems(tmpItems.map(item => {
-        return { ...item,
+        return {
+          ...item,
           nestedChild: item.id !== 0
         };
       }));
     }
   }, [nestedSelectedValue, items]);
-
   const handleClose = event => {
     var _openOverlayRef$curre, _openOverlayRef$curre2;
-
     if (event.type === 'keydown') {
       if (event.key === 'Escape' || event.key === 27) {
         setIsExpanded(false);
@@ -296,12 +282,12 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
       setNestedSelectedValue(null);
     }
   };
-
   const itemsToShow = currentValue ? itemsToSuggest(highlight(isControlled ? items : currentItems, currentValue, resultsTextColor)) : [];
   const helpTextToShow = isFocused && !currentValue ? helpText : noResults ?? getCopy('noResults');
   return /*#__PURE__*/_jsxs(View, {
     style: staticStyles.container,
-    children: [/*#__PURE__*/_jsx(InputSupports, { ...supportsProps,
+    children: [/*#__PURE__*/_jsx(InputSupports, {
+      ...supportsProps,
       accessibilityAutoComplete: "list",
       accessibilityControls: "autocomplete",
       accessibilityExpanded: isExpanded,
@@ -375,11 +361,11 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
           parentRef: inputRef,
           ref: targetRef
         })
-      }), (targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) && /*#__PURE__*/_jsx(View // This catches and shifts focus to other interactive elements.
+      }), (targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) && /*#__PURE__*/_jsx(View
+      // This catches and shifts focus to other interactive elements.
       , {
         onFocus: () => {
           var _targetRef$current;
-
           return targetRef === null || targetRef === void 0 ? void 0 : (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.focus();
         },
         tabIndex: 0
@@ -387,15 +373,16 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
     })]
   });
 });
-Autocomplete.displayName = 'Autocomplete'; // If a language dictionary entry is provided, it must contain every key
+Autocomplete.displayName = 'Autocomplete';
 
+// If a language dictionary entry is provided, it must contain every key
 const dictionaryContentShape = PropTypes.shape({
   hasResults: PropTypes.string.isRequired,
   loading: PropTypes.string.isRequired,
   noResults: PropTypes.string.isRequired
 });
-Autocomplete.propTypes = { ...selectedSystemPropTypes,
-
+Autocomplete.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Can be used to provide a function that renders a custom input:
    * <Autocomplete items={items} value={currentValue}>
@@ -413,17 +400,14 @@ Autocomplete.propTypes = { ...selectedSystemPropTypes,
    * </Autocomplete>
    */
   children: PropTypes.func,
-
   /**
    * Copy language identifier
    */
   copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), dictionaryContentShape]),
-
   /**
    * Set to true in order to display the loading indicator instead of results
    */
   isLoading: PropTypes.bool,
-
   /**
    * List of items to display as suggestions
    */
@@ -431,47 +415,38 @@ Autocomplete.propTypes = { ...selectedSystemPropTypes,
     id: PropTypes.string,
     label: PropTypes.string
   })),
-
   /**
    * Label to display alongside the spinner when in a loading state
    */
   loadingLabel: PropTypes.string,
-
   /**
    * Minimum number of characters typed for a list of suggestions to appear
    */
   minToSuggestion: PropTypes.number,
-
   /**
    * Maximum number of suggestions provided at the same time
    */
   maxSuggestions: PropTypes.number,
-
   /**
    * Text or JSX to render when no results are available
    */
   noResults: PropTypes.node,
-
   /**
    * Help text to display when the input is focused and empty
    */
   helpText: PropTypes.string,
-
   /**
    * Handler function to be called when the input value changes
    */
   onChange: PropTypes.func,
-
   /**
    * Handler function to be called when the clear button (appears if the handler is passed) is pressed
    */
   onClear: PropTypes.func,
-
   /**
    * Callback function to be called when an item is selected from the list
    */
   onSelect: PropTypes.func,
-
   /**
    * Input value for controlled usage
    */

package/lib-module/Autocomplete/Loading.js

@@ -6,7 +6,6 @@ import Box from '../Box';
 import StackView from '../StackView';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 const Loading = _ref => {
   let {
     label
@@ -29,7 +28,6 @@ const Loading = _ref => {
     })
   });
 };
-
 Loading.propTypes = {
   label: PropTypes.string
 };

package/lib-module/BaseProvider/HydrationContext.js

@@ -4,16 +4,14 @@ import Platform from "react-native-web/dist/exports/Platform";
 import { jsx as _jsx } from "react/jsx-runtime";
 const HydrationContext = /*#__PURE__*/createContext();
 const isSSR = typeof window === 'undefined';
-
 const hasWebStyleTag = () => {
   var _document;
-
   if (isSSR || Platform.OS !== 'web' || typeof document !== 'object') {
     return false;
   }
-
   return Boolean((_document = document) === null || _document === void 0 ? void 0 : _document.getElementById('react-native-stylesheet'));
 };
+
 /**
  * Returns true if this render cycle is the hydration of existing SSR content.
  *
@@ -21,14 +19,12 @@ const hasWebStyleTag = () => {
  * during the very first client-side render or hydration, but not available on the server,
  * to ensure no changes happen until the original SSR DOM has been hydrated.
  */
-
-
 export const useHydrationContext = () => useContext(HydrationContext);
+
 /**
  * Allows components and hooks to observe if SSR hydration is currently in progress
  * and if so, to re-render with content that differs to the server when it is complete.
  */
-
 export const HydrationProvider = _ref => {
   let {
     children
@@ -36,8 +32,9 @@ export const HydrationProvider = _ref => {
   const [hasMounted, setHasMounted] = useState(false);
   useEffect(() => {
     setHasMounted(true);
-  }, []); // If we've got a HydrationProvider inside a HydrationProvider somehow, defer to the top one
+  }, []);
 
+  // If we've got a HydrationProvider inside a HydrationProvider somehow, defer to the top one
   const valueFromAncestor = useHydrationContext();
   const isHydrating = valueFromAncestor ?? Boolean(!hasMounted && hasWebStyleTag());
   return /*#__PURE__*/_jsx(HydrationContext.Provider, {

package/lib-module/BaseProvider/index.js

@@ -1,5 +1,4 @@
 var _ThemeProvider$propTy;
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import { PortalProvider } from '@gorhom/portal';
@@ -8,7 +7,6 @@ import ViewportProvider from '../ViewportProvider';
 import ThemeProvider from '../ThemeProvider';
 import { HydrationProvider } from './HydrationContext';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const BaseProvider = _ref => {
   let {
     defaultTheme,
@@ -29,7 +27,6 @@ const BaseProvider = _ref => {
     })
   });
 };
-
 BaseProvider.propTypes = {
   children: PropTypes.node.isRequired,
   defaultTheme: (_ThemeProvider$propTy = ThemeProvider.propTypes) === null || _ThemeProvider$propTy === void 0 ? void 0 : _ThemeProvider$propTy.defaultTheme,

package/lib-module/Box/Box.js

@@ -6,6 +6,7 @@ import { useThemeTokens } from '../ThemeProvider';
 import { a11yProps, getA11yPropsFromHtmlTag, getTokensPropType, layoutTags, selectSystemProps, spacingProps, useSpacingScale, variantProp, viewProps } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+
 /**
  * @typedef {import('../utils/props/spacingProps.js').SpacingValue} SpacingValue
  * @typedef {import('../utils/props/spacingProps.js').SpacingIndex} SpacingIndex
@@ -34,7 +35,6 @@ const selectBoxStyles = _ref => {
     borderBottomLeftRadius,
     borderBottomRightRadius
   };
-
   if (gradient) {
     const {
       angle,
@@ -42,9 +42,8 @@ const selectBoxStyles = _ref => {
     } = gradient;
     styles.backgroundImage = `linear-gradient(${angle}deg, ${stopOne.color}, 75% , ${stopTwo.color})`;
   }
-
-  const paddings = ['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom']; // Only set on styles if token provided because we spread this object after the spacing scale values
-
+  const paddings = ['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom'];
+  // Only set on styles if token provided because we spread this object after the spacing scale values
   paddings.forEach(side => {
     if (rest[side]) {
       styles[side] = rest[side];
@@ -52,6 +51,7 @@ const selectBoxStyles = _ref => {
   });
   return styles;
 };
+
 /**
  * A layout utility component. Use Box to create space (padding) around content.
  *
@@ -117,8 +117,6 @@ const selectBoxStyles = _ref => {
  * text content is inside a scrollable box, as screens are not scrollable by default and even very
  * short text will require scrolling on small devices at the highest accessibility text scaling settings.
  */
-
-
 const Box = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
     space,
@@ -153,11 +151,11 @@ const Box = /*#__PURE__*/forwardRef((_ref2, ref) => {
     paddingBottom: useSpacingScale(bottom),
     ...selectBoxStyles(themeTokens)
   };
-
   if (scroll) {
     const scrollProps = typeof scroll === 'object' ? scroll : {};
     scrollProps.contentContainerStyle = [styles, scrollProps.contentContainerStyle];
-    return /*#__PURE__*/_jsx(ScrollView, { ...scrollProps,
+    return /*#__PURE__*/_jsx(ScrollView, {
+      ...scrollProps,
       ...props,
       testID: testID,
       dataSet: dataSet,
@@ -165,8 +163,8 @@ const Box = /*#__PURE__*/forwardRef((_ref2, ref) => {
       children: children
     });
   }
-
-  return /*#__PURE__*/_jsx(View, { ...props,
+  return /*#__PURE__*/_jsx(View, {
+    ...props,
     style: styles,
     testID: testID,
     dataSet: dataSet,
@@ -175,59 +173,52 @@ const Box = /*#__PURE__*/forwardRef((_ref2, ref) => {
   });
 });
 Box.displayName = 'Box';
-Box.propTypes = { ...selectedSystemPropTypes,
+Box.propTypes = {
+  ...selectedSystemPropTypes,
   variant: variantProp.propType,
   tokens: getTokensPropType('Box'),
-
   /**
    * Sets default padding on all sides of the box using the theme's spacing scale.
    *
    * @see {@link SpacingValue}
    */
   space: spacingProps.types.spacingValue,
-
   /**
    * Sets top and bottom padding using the theme's spacing scale.
    *
    * @see {@link SpacingValue}
    */
   vertical: spacingProps.types.spacingValue,
-
   /**
    * Sets left and right padding using the theme's spacing scale.
    *
    * @see {@link SpacingValue}
    */
   horizontal: spacingProps.types.spacingValue,
-
   /**
    * Sets bottom padding using the theme's spacing scale.
    *
    * @see {@link SpacingValue}
    */
   bottom: spacingProps.types.spacingValue,
-
   /**
    * Sets left padding using the theme's spacing scale.
    *
    * @see {@link SpacingValue}
    */
   left: spacingProps.types.spacingValue,
-
   /**
    * Sets right padding using the theme's spacing scale.
    *
    * @see {@link SpacingValue}
    */
   right: spacingProps.types.spacingValue,
-
   /**
    * Sets top padding using the theme's spacing scale.
    *
    * @see {@link SpacingValue}
    */
   top: spacingProps.types.spacingValue,
-
   /**
    * Sets the `flex` style, which controls `flexGrow`, `flexShrink` and `flexBasis` styles.
    *
@@ -237,14 +228,12 @@ Box.propTypes = { ...selectedSystemPropTypes,
    * With the default `0`, the box takes its minimum width from its content.
    */
   flex: PropTypes.number,
-
   /**
    * Renders a scrollable ScrollView instead of an unscrollable View.
    *
    * May take an object of ScrollView props which are passed to the rendered ScrollView.
    */
   scroll: PropTypes.oneOfType([PropTypes.bool, ScrollView.propTypes ? PropTypes.shape(ScrollView.propTypes) : PropTypes.object]),
-
   /**
    * Optional semantic HTML tag, to apply to the container on web. Does not change styling.
    *
@@ -252,18 +241,15 @@ Box.propTypes = { ...selectedSystemPropTypes,
    * is not defined, the accessibilityRole will default to "heading".
    */
   tag: PropTypes.oneOf(layoutTags),
-
   /**
    * Use in tests if the box itself needs to be targetted and no other way of selecting the
    * box is available (e.g. it cannot be targetted using an appropriate `accessibilityRole`).
    */
   testID: PropTypes.string,
-
   /**
    * @ignore
    */
   dataSet: PropTypes.object,
-
   /**
    * Box accepts any content as children.
    */

package/lib-module/Button/Button.js

@@ -18,14 +18,16 @@ const Button = /*#__PURE__*/forwardRef((_ref, ref) => {
     ...variant
   };
   const getTokens = useThemeTokensCallback('Button', tokens, buttonVariant);
-  return /*#__PURE__*/_jsx(ButtonBase, { ...props,
+  return /*#__PURE__*/_jsx(ButtonBase, {
+    ...props,
     tokens: getTokens,
     accessibilityRole: accessibilityRole,
     ref: ref
   });
 });
 Button.displayName = 'Button';
-Button.propTypes = { ...a11yProps.types,
+Button.propTypes = {
+  ...a11yProps.types,
   ...buttonPropTypes,
   children: textAndA11yText
 };