@telus-uds/components-base 1.65.0 → 1.67.0

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

@@ -7,7 +7,6 @@ const focusHandlerProps = {
      * onBlur handler
      */
     onBlur: PropTypes.func,
-
     /**
      * onFocus handler
      */
@@ -21,62 +20,50 @@ const textInputHandlerProps = {
      * onChange handler
      */
     onChange: PropTypes.func,
-
     /**
      * onChangeText handler
      */
     onChangeText: PropTypes.func,
-
     /**
      * onClear handler
      */
     onClear: PropTypes.func,
-
     /**
      * onSubmit handler
      */
     onSubmit: PropTypes.func,
-
     /**
      * onSubmitEditing handler
      */
     onSubmitEditing: PropTypes.func,
-
     /**
      * onContentSizeChange handler
      */
     onContentSizeChange: PropTypes.func,
-
     /**
      * onEndEditing handler
      */
     onEndEditing: PropTypes.func,
-
     /**
      * onScroll handler
      */
     onScroll: PropTypes.func,
-
     /**
      * onSelectionChange handler
      */
     onSelectionChange: PropTypes.func,
-
     /**
      * onKeyPress handler
      */
     onKeyPress: PropTypes.func,
-
     /**
      * onKeyUp handler (only supported on Web)
      */
     onKeyUp: PropTypes.func,
-
     /**
      * onKeyDown handler (only supported on Web)
      */
     onMouseOver: PropTypes.func,
-
     /**
      * onKeyDown handler (only supported on Web)
      */
@@ -84,7 +71,6 @@ const textInputHandlerProps = {
   }
 };
 const selectTextInputHandlers = getPropSelector(textInputHandlerProps.types);
-
 textInputHandlerProps.select = props => {
   // Support for onKeyPress/onKeyUp/onKeyDown is inconsistent between React Native and React Native Web
   const {
@@ -93,7 +79,6 @@ textInputHandlerProps.select = props => {
     onKeyDown,
     ...resolvedProps
   } = selectTextInputHandlers(props);
-
   if (onKeyPress || onKeyUp || onKeyDown) {
     if (Platform.OS !== 'web') {
       // React Native only supports onKeyPress. Call any key handlers supplied in expected order.
@@ -104,9 +89,9 @@ textInputHandlerProps.select = props => {
       };
     } else {
       // React Native Web supports onKeyUp the normal way.
-      if (onKeyUp) resolvedProps.onKeyUp = onKeyUp; // React Native Web doesn't support the `onKeyDown` prop name, but maps a supplied onKeyPress handler
+      if (onKeyUp) resolvedProps.onKeyUp = onKeyUp;
+      // React Native Web doesn't support the `onKeyDown` prop name, but maps a supplied onKeyPress handler
       // to the onKeyDown event and calls it with a keydown event. Make React Native Web call either or both.
-
       if (onKeyPress || onKeyDown) {
         resolvedProps.onKeyPress = event => {
           if (typeof onKeyDown === 'function') onKeyDown(event);
@@ -115,8 +100,6 @@ textInputHandlerProps.select = props => {
       }
     }
   }
-
   return resolvedProps;
 };
-
 export { focusHandlerProps, textInputHandlerProps };

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

@@ -1,5 +1,6 @@
-import PropTypes from 'prop-types'; // Props related to HTML <a> anchor link attributes.
+import PropTypes from 'prop-types';
 
+// Props related to HTML <a> anchor link attributes.
 const targetValues = ['_self', '_blank', '_parent', '_top'];
 export default {
   types: {
@@ -9,7 +10,6 @@ export default {
     rel: PropTypes.string,
     target: PropTypes.oneOf(targetValues)
   },
-
   /**
    * Takes a props object, bundles any hrefAttrs props present into one object
    * and returns that keyed as `hrefAttrs` and non-hrefAttrs props keyed as `rest`

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

@@ -5,33 +5,27 @@ export default {
      * Whether the English or French copy will be used (e.g. for accessibility labels).
      */
     copy: PropTypes.oneOf(['en', 'fr']),
-
     /**
      * The input label.
      */
     label: PropTypes.string,
-
     /**
      * A short description of the expected input.
      */
     hint: PropTypes.string,
-
     /**
      * Position of the hint relative to label. Use `below` to display a larger hint below the label.
      */
     hintPosition: PropTypes.oneOf(['inline', 'below']),
-
     /**
      * A detailed description of validation error/success or additional instructions.
      * Visual variant is determined based on the `validation` prop.
      */
     feedback: PropTypes.string,
-
     /**
      * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
      */
     tooltip: PropTypes.string,
-
     /**
      * Use to visually mark an input as valid or invalid.
      */

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

@@ -5,7 +5,8 @@ import { pressPropTypes } from './pressProps';
 import a11yProps from './a11yProps';
 import hrefAttrsProp from './hrefAttrsProp';
 import getPropSelector from './getPropSelector';
-const linkPropTypes = { ...pressPropTypes,
+const linkPropTypes = {
+  ...pressPropTypes,
   href: PropTypes.string,
   hrefAttrs: PropTypes.shape(hrefAttrsProp.types),
   ...a11yProps.types
@@ -15,12 +16,10 @@ export default {
    * Proptypes for components that, on Web, can output <a href="..."> link elements
    */
   types: linkPropTypes,
-
   /**
    * Filters a props object, returning only the platform-relevant link props defined above
    */
   select: getPropSelector(linkPropTypes),
-
   /**
    * Turn hrefs into press handlers that open links on Native.
    *

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

@@ -18,7 +18,8 @@ const pressHandlerPropTypes = {
     }
   })
 };
-export const pressPropTypes = { ...pressHandlerPropTypes,
+export const pressPropTypes = {
+  ...pressHandlerPropTypes,
   disabled: PropTypes.bool,
   ...Platform.select({
     web: {},
@@ -33,7 +34,6 @@ export default {
    * Proptypes for clickable or pressable components, including web-only props
    */
   types: pressPropTypes,
-
   /**
    * Filters a props object, returning only the platform-relevant press props defined above
    */

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,82 +1,76 @@
 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,
   initialValue: PropTypes.string,
   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.
    *
@@ -84,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.
@@ -109,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:
@@ -144,6 +130,7 @@ const webOnly = {
    */
   pattern: PropTypes.string
 };
+
 /**
  * These props are supported in React Native but not React Native Web.
  *
@@ -155,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,
@@ -183,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.