@telus-uds/components-base 1.66.0 → 1.67.1

package/lib-module/utils/props/responsiveProps.js

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-
 const getByViewport = propType => ({
   xs: propType,
   sm: propType,
@@ -7,6 +6,7 @@ const getByViewport = propType => ({
   lg: propType,
   xl: propType
 });
+
 /**
  * Utilities for props that allow different values to be applied at different viewports.
  *
@@ -21,8 +21,6 @@ const getByViewport = propType => ({
  * @property {Function} getTypeOptionallyByViewport - returns a PropTypes validator that accepts
  *   either the provided proptype on its own, or the output of getTypeByViewport
  */
-
-
 export default {
   getByViewport,
   getTypeByViewport: propType => PropTypes.shape(getByViewport(propType)),

package/lib-module/utils/props/selectSystemProps.js

@@ -5,18 +5,17 @@ export default function selectSystemProps(systemPropHelpers) {
     if (typeof (propHelper === null || propHelper === void 0 ? void 0 : propHelper.select) !== 'function') {
       throw new Error(`An invalid system prop helper has been passed to 'selectSystemProps': prop selector ('.select') is missing in ${propHelper}`);
     }
-
-    return { ...acc,
+    return {
+      ...acc,
       ...propHelper.select(props)
     };
   }, {});
-
   const selectedPropTypes = systemPropHelpers.reduce((acc, propHelper) => {
     if (!(propHelper !== null && propHelper !== void 0 && propHelper.types)) {
       throw new Error(`An invalid system prop helper has been passed to 'selectSystemProps': types selector ('.types') is missing in ${propHelper}`);
     }
-
-    return { ...acc,
+    return {
+      ...acc,
       ...propHelper.types
     };
   }, {});

package/lib-module/utils/props/spacingProps.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import responsiveProps from './responsiveProps';
 import variantProp from './variantProp';
+
 /**
  * @typedef {0|1|2|3|4|5|6|7|8|9|10|11} SpacingIndex - value used to select a size on the spacing scale
  *
@@ -20,16 +21,17 @@ import variantProp from './variantProp';
  *
  * @typedef {SpacingIndex|SpacingObject} SpacingValue
  */
-
 const spacingScale = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
 const spacingIndexPropType = PropTypes.oneOf(spacingScale);
-const spacingObjectPropType = PropTypes.shape({ ...responsiveProps.getByViewport(spacingIndexPropType),
+const spacingObjectPropType = PropTypes.shape({
+  ...responsiveProps.getByViewport(spacingIndexPropType),
   space: spacingIndexPropType,
   options: PropTypes.shape({
     variant: variantProp.propType,
     size: PropTypes.number
   })
 });
+
 /**
  * Components and utilities that assign fixed space between components use a theme-defined spacing scale.
  *
@@ -44,7 +46,6 @@ const spacingObjectPropType = PropTypes.shape({ ...responsiveProps.getByViewport
  *   scale, or an object with an optional `options` key and one or more spacing indexes keyed either by
  *   viewports or `space` to apply at all viewports.
  */
-
 export default {
   scale: spacingScale,
   types: {

package/lib-module/utils/props/textInputProps.js

@@ -1,22 +1,23 @@
 import PropTypes from 'prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
-import getPropSelector from './getPropSelector'; // This file contains common props for components that render a React Native TextInput
+import getPropSelector from './getPropSelector';
+
+// This file contains common props for components that render a React Native TextInput
 // It excludes interaction handler functions which are in `./handlerProps.js`
 
 /**
  * TextInput (web and native) supports some common React Native props
  * shared with React Native's Text component.
  */
-
 const textProps = {
   maxFontSizeMultiplier: PropTypes.number,
   nativeId: PropTypes.string,
   onLayout: PropTypes.func
 };
+
 /**
  * UDS text inputs accept props related to UDS's useInputValue hook
  */
-
 const inputValueProps = {
   value: PropTypes.string,
   type: PropTypes.string,
@@ -24,60 +25,52 @@ const inputValueProps = {
   readOnly: PropTypes.bool,
   inactive: PropTypes.bool
 };
+
 /**
  * This collection adds props that can be passed through to both React Native's
  * and React Native Web's implementations of the React Native TextInput component.
  */
-
-const crossPlatform = { ...textProps,
+const crossPlatform = {
+  ...textProps,
   ...inputValueProps,
-
   /**
    * Web and Android; 'off' disables device autocomplete, other strings are platform-specific.
    * Valid values on Native: https://reactnative.dev/docs/textinput#autocomplete-android
    * Valid values on Web: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
    */
   autoComplete: PropTypes.string,
-
   /**
    * On Native, default is `true`, passing `false` disables autoCorrect.
    * On web, only supported by Safari and expects "on" or "off" strings.
    */
   autoCorrect: PropTypes.oneOf([true, false, 'on', 'off']),
-
   /**
    * Focuses the element on mount. On Web, only the first form element with autoFocus is focussed.
    */
   autoFocus: PropTypes.bool,
-
   /**
    * Default is `true` for single line, `false` for multi-line
    */
   blurOnSubmit: PropTypes.bool,
-
   /**
    * iOS and Web only, no effect on Android
    */
   clearTextOnFocus: PropTypes.bool,
-
   /**
    * Default is `true`. On web, this works by mapping to input's `readonly` attribute
    */
   editable: PropTypes.bool,
-
   /**
    * See documentation for allowed values (varies between Web, Android and iOS) and important notes:
    * - Native: https://reactnative.dev/docs/textinput#keyboardtype
    * - Web: equivalent to `inputmode` but see https://necolas.github.io/react-native-web/docs/text-input/
    */
   keyboardType: PropTypes.string,
-
   /**
    * Uses native tools (no flicker) to cap the maximum number of characters.
    * On Web, works via `maxlength` attr.
    */
   maxLength: PropTypes.number,
-
   /**
    * If passed as true, the text input can be multiple lines.
    *
@@ -85,24 +78,20 @@ const crossPlatform = { ...textProps,
    * > Use with textAlignVertical set to top for the same behavior in both platforms.
    */
   multiline: PropTypes.bool,
-
   /**
    * Web and Android only, requires `multiline` to be `true`.
    */
   numberOfLines: PropTypes.number,
-
   /**
    * Text to display when no value set.
    * Accesibility guidelines recommend using labels to describe the input and using
    * placeholders rarely and sparingly to prompt a particular format.
    */
   placeholder: PropTypes.string,
-
   /**
    * Sets placeholder colour. On Web, uses `::placeholder { color: ... }` selector.
    */
   placeholderTextColor: PropTypes.string,
-
   /**
    * One of a subset of platform-specific options that controls labelling and presentation
    * in on-screen keyboards and accessibility tools. Uses `enterkeyhint` attr on Web.
@@ -110,34 +99,30 @@ const crossPlatform = { ...textProps,
    * 'done', 'go', 'next', 'search', and 'send' are available for Web, Android and iOS.
    */
   returnKeyType: PropTypes.string,
-
   /**
    * Obscures passwords and similar. Equivalent to type="password" on Web.
    * Does not work if multiline is true.
    */
   secureTextEntry: PropTypes.bool,
-
   /**
    * If true, all text will automatically be selected on focus.
    */
   selectTextOnFocus: PropTypes.bool,
-
   /**
    * Web and iOS. On iOS, default inherits from `autoCorrect`.
    * On Web, equivalent to `spellcheck` attr.
    */
   spellCheck: PropTypes.bool
 };
+
 /**
  * These web-only props all control HTML `input` attributes of the same name.
  * Refer to general HTML documentation for more details.
  */
-
 const webOnly = {
   disabled: PropTypes.bool,
   dir: PropTypes.oneOf(['auto', 'ltr', 'rtl']),
   lang: PropTypes.string,
-
   /**
    * Sets the HTML input `pattern` attr. Not supported by React Native Web, but is supported by UDS.
    * Must also pass in a ref and check validity by calling the HTML element's checkValidity method:
@@ -145,6 +130,7 @@ const webOnly = {
    */
   pattern: PropTypes.string
 };
+
 /**
  * These props are supported in React Native but not React Native Web.
  *
@@ -156,7 +142,6 @@ const webOnly = {
  * native component based on the values of multiple boolean flags, and may sometimes appear to pick an
  * option that is inappropriate for one flag based on the values of one or more other other flags.
  */
-
 const nativeOnly = {
   caretHidden: PropTypes.bool,
   clearButtonMode: PropTypes.string,
@@ -184,16 +169,17 @@ export default {
    * Subset of proptypes that can be passed down to a React Native or React Native Web
    * `TextInput` component. Allow regardless of platform, so cross-platform apps don't warn.
    */
-  types: { ...crossPlatform,
+  types: {
+    ...crossPlatform,
     ...webOnly,
     ...nativeOnly
   },
-
   /**
    * Filters a props object. Return only platform-appropriate TextInput props, native inputs
    * may throw errors on receiving unknown props.
    */
-  select: getPropSelector({ ...crossPlatform,
+  select: getPropSelector({
+    ...crossPlatform,
     ...Platform.select({
       web: webOnly,
       default: nativeOnly

package/lib-module/utils/props/textProps.js

@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
-import getPropSelector from './getPropSelector'; // These are the props accepted specifically on React Native (Web) `Text` elements.
+import getPropSelector from './getPropSelector';
+
+// These are the props accepted specifically on React Native (Web) `Text` elements.
 // They are generally concerned with the behaviour of multiline text.
 
 const crossPlatform = {
@@ -9,17 +11,16 @@ const crossPlatform = {
    * On native, ellipsis behaviour may be changed with `ellipsizeMode` prop.
    */
   numberOfLines: PropTypes.number,
-
   /**
    * Default is true on web and false on native
    */
   selectable: PropTypes.bool
 };
+
 /**
  * See React Native docs for latest details on these.
  * https://reactnative.dev/docs/text
  */
-
 const nativeOnly = {
   ellipsizeMode: PropTypes.string,
   maxFontSizeMultiplier: PropTypes.number,
@@ -28,10 +29,10 @@ const nativeOnly = {
   suppressHighlighting: PropTypes.bool,
   textBreakStrategy: PropTypes.string
 };
+
 /**
  * These set HTML attributes of the same name.
  */
-
 const webOnly = {
   dir: PropTypes.oneOf(['auto', 'ltr', 'rtl']),
   lang: PropTypes.string
@@ -41,16 +42,17 @@ export default {
    * Set of prop types specific to React Native and React Native Web `Text`,
    * which largely revolve around the behaviour of multiline non-pressable text.
    */
-  types: { ...crossPlatform,
+  types: {
+    ...crossPlatform,
     ...webOnly,
     ...nativeOnly
   },
-
   /**
    * Filters a props object, returning only props specific to `Text` elements
    * on the current platform. Does not include props applicable to `Text` and `View`.
    */
-  select: getPropSelector({ ...crossPlatform,
+  select: getPropSelector({
+    ...crossPlatform,
     ...Platform.select({
       web: webOnly,
       default: nativeOnly

package/lib-module/utils/props/tokens.js

@@ -1,19 +1,19 @@
 import PropTypes from 'prop-types';
-import { components as tokenKeys } from '@telus-uds/system-theme-tokens'; // Tokens can be primitive values (e.g. `'rgba(0,0,0,0'`, `12`), or objects of such values,
+import { components as tokenKeys } from '@telus-uds/system-theme-tokens';
+
+// Tokens can be primitive values (e.g. `'rgba(0,0,0,0'`, `12`), or objects of such values,
 // such as tokens that describe shadow (e.g. shadow: { inset: true, color: 'rgba(...)' ... }),
 // or components (e.g. Icon tokens)
-
 const tokenValue = PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool, PropTypes.elementType]);
 const tokenValueType = PropTypes.oneOfType([tokenValue, PropTypes.objectOf(tokenValue)]);
 export const getTokenNames = componentName => {
   const componentTokenSchema = tokenKeys[componentName];
-
   if (!componentTokenSchema) {
     throw new Error(`No "${componentName}" tokenKeys in @telus-uds/system-theme-tokens`);
   }
-
   return Object.keys(componentTokenSchema);
 };
+
 /**
  * Returns the subset of a set of tokens that may be accepted by the `tokens` prop of a named component
  * or by a provided array of tokens. A prefix may be provided, for example:
@@ -43,25 +43,25 @@ export const getTokenNames = componentName => {
  * @param {string} [prefix] - if provided, matches keys in the source object with this as the first camelCase item
  * @returns {object} - subset of theme tokens
  */
-
 export const selectTokens = (specifier, tokens, prefix) => {
   const tokenNames = typeof specifier === 'string' ? getTokenNames(specifier) : specifier;
   const filteredTokens = tokenNames.reduce((validTokens, key) => {
     const prefixedKey = prefix ? `${prefix}${key[0].toUpperCase()}${key.slice(1)}` : key;
     const token = tokens[prefixedKey];
-    return token !== undefined ? { ...validTokens,
+    return token !== undefined ? {
+      ...validTokens,
       [key]: token
     } : validTokens;
   }, {});
   return filteredTokens;
 };
+
 /**
  * @typedef {string|number|boolean|{[key: string]:string|number|boolean}} TokenValue
  * @typedef {{[key: string]: TokenValue}} TokensSet
  * @typedef {(AppearanceSet) => TokensSet} TokensGetter
  * @typedef {TokensSet|TokensGetter} TokensProp
  */
-
 /**
  * 'tokens' is an optional object prop on all themable components. Its keys must match the
  * token keys in the component's theme schema.
@@ -83,17 +83,14 @@ export const selectTokens = (specifier, tokens, prefix) => {
  *   tokens: getTokensPropType('Component1', 'Component2')
  * }
  */
-
 export const getTokensPropType = function () {
   for (var _len = arguments.length, componentsNames = new Array(_len), _key = 0; _key < _len; _key++) {
     componentsNames[_key] = arguments[_key];
   }
-
   return (props, propName, componentName) => {
     PropTypes.checkPropTypes({
       [propName]: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
     }, props, propName, componentName);
-
     if (typeof props[propName] !== 'function') {
       PropTypes.checkPropTypes({
         [propName]: PropTypes.exact(Object.fromEntries(componentsNames.flatMap(component => getTokenNames(component).map(key => [key, tokenValueType]))))
@@ -101,6 +98,7 @@ export const getTokensPropType = function () {
     }
   };
 };
+
 /**
  * Get a proptypes validator for a set of tokens that is not based on a component in the theme schema.
  *
@@ -115,18 +113,17 @@ export const getTokensPropType = function () {
  * @param {boolean} [options.allowFunction] - if true, allows functions as well as tokens objects
  * @returns
  */
-
 export const getTokensSetPropType = function (componentTokenKeys) {
   let {
     partial = false,
     allowFunction = false
   } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  const tokensObjectValidator = PropTypes.exact(Object.fromEntries(componentTokenKeys.map(key => [key, partial ? tokenValueType : // Some theme tokens can validly resolve to `null`, but .isRequired treats null as undefined
+  const tokensObjectValidator = PropTypes.exact(Object.fromEntries(componentTokenKeys.map(key => [key, partial ? tokenValueType :
+  // Some theme tokens can validly resolve to `null`, but .isRequired treats null as undefined
   function (props, propName) {
     for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
       args[_key2 - 2] = arguments[_key2];
     }
-
     return props[propName] !== null && tokenValueType.isRequired(props, propName, ...args);
   }])));
   return allowFunction ? PropTypes.oneOfType([tokensObjectValidator, PropTypes.func]) : tokensObjectValidator;

package/lib-module/utils/props/variantProp.js

@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
+
 /**
  * @typedef {{[key: string]: string|number|boolean}} AppearanceSet
  * @typedef {AppearanceSet} VariantProp
  */
-
 export default {
   /**
    * 'variant' is an optional object prop on all themable components.

package/lib-module/utils/props/viewProps.js

@@ -13,7 +13,6 @@ export default {
    * that renders a single View.
    */
   types: viewPropTypes,
-
   /**
    * Filters a props object, returning only cross-platform View props that are potentially
    * relevant to any basic layout component that renders one View.

package/lib-module/utils/ssr.js

@@ -1,9 +1,7 @@
 import React from 'react';
 import AppRegistry from "react-native-web/dist/exports/AppRegistry";
 /** @typedef {import('react').ComponentType} ReactComponent */
-
 /** @typedef {import('react').ReactElement} ReactElement */
-
 /**
  * Returns object with `renderApp` and `getStyles` functions.
  * Weave these into your app's server-side render process:
@@ -19,7 +17,6 @@ import AppRegistry from "react-native-web/dist/exports/AppRegistry";
  * @param {boolean} [options.styleGetters]
  * @param {(ReactElement) => ReactElement} [options.collectStyles]
  */
-
 import { jsx as _jsx } from "react/jsx-runtime";
 export const ssrStyles = function () {
   let appName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'UDS app';
@@ -48,8 +45,8 @@ export const ssrStyles = function () {
         renderedByRNW = false,
         WrapperComponent
       } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-      AppRegistry.registerComponent(appName, () => App); // AppRegistry.getApplication renders the app in a container, and collects styles.
-
+      AppRegistry.registerComponent(appName, () => App);
+      // AppRegistry.getApplication renders the app in a container, and collects styles.
       const {
         element,
         getStyleElement
@@ -57,33 +54,32 @@ export const ssrStyles = function () {
         WrapperComponent,
         initialProps: props
       });
-      let renderedApp = // React Native Web's AppRegistry.getApplication assumes the app is rendered using
+      let renderedApp =
+      // React Native Web's AppRegistry.getApplication assumes the app is rendered using
       // AppRegistry.runApplication and wraps it in <AppContainer>, which wraps the entire app
       // in two outer containers resembling <View style={{ flex: 1 }} pointerEvents="box-none">.
       // So, use that IF user says AppRegistry.runApplication will do the client-side render.
-      renderedByRNW && element || // If the live app is not rendered using AppRegistry.runApplication, we need to
+      renderedByRNW && element ||
+      // If the live app is not rendered using AppRegistry.runApplication, we need to
       // re-render it without the <AppContainer> wrapper, to avoid SSR mismatch errors.
       // Default to this as many platforms (e.g. NextJS) will use their own renderers.
       WrapperComponent ? /*#__PURE__*/_jsx(WrapperComponent, {
-        children: /*#__PURE__*/_jsx(App, { ...props
+        children: /*#__PURE__*/_jsx(App, {
+          ...props
         })
-      }) : /*#__PURE__*/_jsx(App, { ...props
+      }) : /*#__PURE__*/_jsx(App, {
+        ...props
       });
-
       const getRNWStyle = () => getStyleElement({
         key: 'react-native-stylesheet'
       });
-
       styleGetters.push(getRNWStyle);
-
       if (typeof collectStyles === 'function') {
         renderedApp = collectStyles(renderedApp);
       }
-
       hasAppRendered = true;
       return renderedApp;
     },
-
     /**
      * Turns styles collected during renderApp into an array of React elements of
      * HTML <style> tags ready for insertion into the SSR HTML's <head>.
@@ -95,16 +91,15 @@ export const ssrStyles = function () {
      */
     getStyles: function () {
       if (!hasAppRendered) throw new Error('Called getStyles before renderApp in ssrStyles');
-
       for (var _len = arguments.length, existingStyles = new Array(_len), _key = 0; _key < _len; _key++) {
         existingStyles[_key] = arguments[_key];
       }
-
       return [...existingStyles, ...styleGetters.flatMap(getter => getter())];
     }
   };
 };
 export default ssrStyles;
+
 /**
  * @deprecated - use ssrStyles instead
  *
@@ -124,6 +119,7 @@ export const getReactNativeWebSSRStyles = function (AppRoot) {
   } = AppRegistry.getApplication(appName);
   return [getStyleElement()];
 };
+
 /**
  * @deprecated - use ssrStyles instead
  *
@@ -135,10 +131,10 @@ export const getReactNativeWebSSRStyles = function (AppRoot) {
  * @param {ReactElement[]} [existingStyles]
  * @returns {ReactElement[]}
  */
-
 export const getSSRStyles = function (AppRoot) {
   let appName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'app';
   let existingStyles = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-  return [...existingStyles, ...getReactNativeWebSSRStyles(AppRoot, appName) // if any other CSS-in-JS is added e.g. styled-components generate and add its styles here
+  return [...existingStyles, ...getReactNativeWebSSRStyles(AppRoot, appName)
+  // if any other CSS-in-JS is added e.g. styled-components generate and add its styles here
   ];
 };

package/lib-module/utils/useCopy.js

@@ -1,4 +1,5 @@
 export const DEFAULT_COPY = 'en';
+
 /**
  * Extract translations from a keyed dictionary for a given language.
  * Returns a getter.
@@ -26,19 +27,16 @@ export const DEFAULT_COPY = 'en';
  * @param {'en'|'fr'|object} copy - language
  * @return {function(string): string}
  */
-
 function useCopy(_ref) {
   let {
     dictionary,
     copy = DEFAULT_COPY
   } = _ref;
-
   if (typeof copy === 'string') {
     return key => key ? dictionary[copy][key] : dictionary[copy];
-  } // support overriding the entire copy dictionary with an object for a single language
-
+  }
 
+  // support overriding the entire copy dictionary with an object for a single language
   return key => copy[key];
 }
-
 export default useCopy;

package/lib-module/utils/useHash.js

@@ -1,10 +1,9 @@
 import { useEffect, useState } from 'react';
-
 const doAction = (action, event) => {
   var _window, _window$location;
-
   return typeof action === 'function' && action((_window = window) === null || _window === void 0 ? void 0 : (_window$location = _window.location) === null || _window$location === void 0 ? void 0 : _window$location.hash, event);
 };
+
 /**
  * @typedef {import('react').SyntheticEvent} SyntheticEvent
  */
@@ -20,26 +19,23 @@ const doAction = (action, event) => {
  * @param {(hash: string, event?: SyntheticEvent) => void} action - a function to act on the current hash on load and when it changes
  * @returns
  */
-
-
 const useHash = function (action) {
   let isReady = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-  const [isDone, setIsDone] = useState(false); // Do the action just once when ready after component mount, from hash on page load
-
+  const [isDone, setIsDone] = useState(false);
+  // Do the action just once when ready after component mount, from hash on page load
   const isToDo = isReady && !isDone;
   useEffect(() => {
     if (isToDo) {
       setIsDone(true);
       doAction(action);
     }
-  }, [isToDo, action]); // Bind the action for each hash change; do re-bind if the function changes.
+  }, [isToDo, action]);
 
+  // Bind the action for each hash change; do re-bind if the function changes.
   useEffect(() => {
     const handleChange = event => doAction(action, event);
-
     window.addEventListener('hashchange', handleChange);
     return () => window.removeEventListener('hashchange', handleChange);
   }, [action]);
 };
-
 export default useHash;

package/lib-module/utils/useHash.native.js

@@ -3,5 +3,4 @@
  * is handled at OS level and deep links have completely different usage.
  */
 const useHash = () => {};
-
 export default useHash;