@telus-uds/components-base 1.8.1 → 1.8.2

package/lib/utils/props/clickProps.js

@@ -28,7 +28,8 @@ var _default = {
    * web-oriented tooling that injects web-oriented event handlers directly. For example, for
    * to support use with NextJS's 'next/link' component, which injects `onClick` prop into its child.
    */
-  toPressProps: props => Object.fromEntries(Object.entries(props).map(([originalName, value]) => {
+  toPressProps: props => Object.fromEntries(Object.entries(props).map(_ref => {
+    let [originalName, value] = _ref;
     const translatedName = clickHandlerMapping[originalName];
     return translatedName ? [translatedName, value] : [originalName, value];
   }))

package/lib/utils/props/getPropSelector.js

@@ -7,7 +7,10 @@ exports.default = getPropSelector;
 
 function getPropSelector(propTypes, regexp) {
   const keys = Object.keys(propTypes);
-  return props => Object.entries(props).reduce((items, [key, value]) => keys.includes(key) || regexp && regexp.test(key) ? { ...items,
-    [key]: value
-  } : items, {});
+  return props => Object.entries(props).reduce((items, _ref) => {
+    let [key, value] = _ref;
+    return keys.includes(key) || regexp && regexp.test(key) ? { ...items,
+      [key]: value
+    } : items;
+  }, {});
 }

package/lib/utils/props/handlerProps.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.textInputHandlerProps = exports.focusHandlerProps = void 0;
+exports.textInputHandlerProps = exports.focusHandlerProps = exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -21,13 +21,16 @@ const focusHandlerProps = {
      */
     onFocus: _propTypes.default.func
   },
-  select: ({
-    onBlur,
-    onFocus
-  }) => ({
-    onBlur,
-    onFocus
-  })
+  select: _ref => {
+    let {
+      onBlur,
+      onFocus
+    } = _ref;
+    return {
+      onBlur,
+      onFocus
+    };
+  }
 };
 exports.focusHandlerProps = focusHandlerProps;
 const textInputHandlerProps = {
@@ -52,17 +55,20 @@ const textInputHandlerProps = {
      */
     onSubmitEditing: _propTypes.default.func
   },
-  select: ({
-    onChange,
-    onChangeText,
-    onSubmit,
-    onSubmitEditing
-  }) => ({
-    onChange,
-    onChangeText,
-    onSubmit,
-    onSubmitEditing
-  })
+  select: _ref2 => {
+    let {
+      onChange,
+      onChangeText,
+      onSubmit,
+      onSubmitEditing
+    } = _ref2;
+    return {
+      onChange,
+      onChangeText,
+      onSubmit,
+      onSubmitEditing
+    };
+  }
 };
 exports.textInputHandlerProps = textInputHandlerProps;
 var _default = {

package/lib/utils/props/hrefAttrsProp.js

@@ -24,18 +24,21 @@ var _default = {
    * 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`
    */
-  bundle: ({
-    download,
-    rel,
-    target,
-    ...rest
-  }) => ({
-    hrefAttrs: {
+  bundle: _ref => {
+    let {
       download,
       rel,
-      target
-    },
-    rest
-  })
+      target,
+      ...rest
+    } = _ref;
+    return {
+      hrefAttrs: {
+        download,
+        rel,
+        target
+      },
+      rest
+    };
+  }
 };
 exports.default = _default;

package/lib/utils/props/index.js

@@ -34,16 +34,16 @@ Object.defineProperty(exports, "clickProps", {
     return _clickProps.default;
   }
 });
-Object.defineProperty(exports, "copyPropTypes", {
+Object.defineProperty(exports, "componentPropType", {
   enumerable: true,
   get: function () {
-    return _copyPropTypes.default;
+    return _componentPropType.default;
   }
 });
-Object.defineProperty(exports, "componentPropType", {
+Object.defineProperty(exports, "copyPropTypes", {
   enumerable: true,
   get: function () {
-    return _componentPropType.default;
+    return _copyPropTypes.default;
   }
 });
 Object.defineProperty(exports, "hrefAttrsProp", {
@@ -64,16 +64,16 @@ Object.defineProperty(exports, "linkProps", {
     return _linkProps.default;
   }
 });
-Object.defineProperty(exports, "pressProps", {
+Object.defineProperty(exports, "paddingProp", {
   enumerable: true,
   get: function () {
-    return _pressProps.default;
+    return _paddingProp.default;
   }
 });
-Object.defineProperty(exports, "paddingProp", {
+Object.defineProperty(exports, "pressProps", {
   enumerable: true,
   get: function () {
-    return _paddingProp.default;
+    return _pressProps.default;
   }
 });
 Object.defineProperty(exports, "rectProp", {
@@ -88,16 +88,16 @@ Object.defineProperty(exports, "responsiveProps", {
     return _responsiveProps.default;
   }
 });
-Object.defineProperty(exports, "spacingProps", {
+Object.defineProperty(exports, "selectSystemProps", {
   enumerable: true,
   get: function () {
-    return _spacingProps.default;
+    return _selectSystemProps.default;
   }
 });
-Object.defineProperty(exports, "selectSystemProps", {
+Object.defineProperty(exports, "spacingProps", {
   enumerable: true,
   get: function () {
-    return _selectSystemProps.default;
+    return _spacingProps.default;
   }
 });
 Object.defineProperty(exports, "textInputProps", {

package/lib/utils/props/inputSupportsProps.js

@@ -47,16 +47,8 @@ var _default = {
      */
     validation: _propTypes.default.oneOf(['error', 'success'])
   },
-  select: ({
-    copy,
-    label,
-    hint,
-    hintPosition,
-    feedback,
-    tooltip,
-    validation
-  }) => ({
-    supportsProps: {
+  select: _ref => {
+    let {
       copy,
       label,
       hint,
@@ -64,7 +56,18 @@ var _default = {
       feedback,
       tooltip,
       validation
-    }
-  })
+    } = _ref;
+    return {
+      supportsProps: {
+        copy,
+        label,
+        hint,
+        hintPosition,
+        feedback,
+        tooltip,
+        validation
+      }
+    };
+  }
 };
 exports.default = _default;

package/lib/utils/props/linkProps.js

@@ -44,14 +44,15 @@ var _default = {
    * @returns {(() => void)|undefined} Returns a press handler, or undefined on web if no press
    * handler is provided (expects calling component to render as `<a href={href}>` on web).
    */
-  handleHref: ({
-    onPress,
-    href
-  }) => {
+  handleHref: _ref => {
+    let {
+      onPress,
+      href
+    } = _ref;
     return _Platform.default.select({
       web: onPress,
-      default: (...args) => {
-        if (onPress) onPress(...args);
+      default: function () {
+        if (onPress) onPress(...arguments);
         if (href) _Linking.default.openURL(href);
       }
     });

package/lib/utils/props/pressProps.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.pressPropTypes = void 0;
+exports.pressPropTypes = exports.default = void 0;
 
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 

package/lib/utils/props/tokens.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTokensSetPropType = exports.getTokensPropType = exports.selectTokens = exports.getTokenNames = void 0;
+exports.selectTokens = exports.getTokensSetPropType = exports.getTokensPropType = exports.getTokenNames = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -103,16 +103,22 @@ const selectTokens = (specifier, tokens, prefix) => {
 
 exports.selectTokens = selectTokens;
 
-const getTokensPropType = (...componentsNames) => (props, propName, componentName) => {
-  _propTypes.default.checkPropTypes({
-    [propName]: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func])
-  }, props, propName, componentName);
+const getTokensPropType = function () {
+  for (var _len = arguments.length, componentsNames = new Array(_len), _key = 0; _key < _len; _key++) {
+    componentsNames[_key] = arguments[_key];
+  }
 
-  if (typeof props[propName] !== 'function') {
+  return (props, propName, componentName) => {
     _propTypes.default.checkPropTypes({
-      [propName]: _propTypes.default.exact(Object.fromEntries(componentsNames.flatMap(component => getTokenNames(component).map(key => [key, tokenValueType]))))
+      [propName]: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func])
     }, props, propName, componentName);
-  }
+
+    if (typeof props[propName] !== 'function') {
+      _propTypes.default.checkPropTypes({
+        [propName]: _propTypes.default.exact(Object.fromEntries(componentsNames.flatMap(component => getTokenNames(component).map(key => [key, tokenValueType]))))
+      }, props, propName, componentName);
+    }
+  };
 };
 /**
  * Get a proptypes validator for a set of tokens that is not based on a component in the theme schema.
@@ -132,12 +138,20 @@ const getTokensPropType = (...componentsNames) => (props, propName, componentNam
 
 exports.getTokensPropType = getTokensPropType;
 
-const getTokensSetPropType = (componentTokenKeys, {
-  partial = false,
-  allowFunction = false
-} = {}) => {
+const getTokensSetPropType = function (componentTokenKeys) {
+  let {
+    partial = false,
+    allowFunction = false
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
   const tokensObjectValidator = _propTypes.default.exact(Object.fromEntries(componentTokenKeys.map(key => [key, partial ? tokenValueType : // Some theme tokens can validly resolve to `null`, but .isRequired treats null as undefined
-  (props, propName, ...args) => props[propName] !== null && tokenValueType.isRequired(props, propName, ...args)])));
+  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.default.oneOfType([tokensObjectValidator, _propTypes.default.func]) : tokensObjectValidator;
 };

package/lib/utils/ssr.js

@@ -21,7 +21,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @param {string} [appName]
  * @returns {ReactElement[]}
  */
-const getReactNativeWebSSRStyles = (AppRoot, appName = 'app') => {
+const getReactNativeWebSSRStyles = function (AppRoot) {
+  let appName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'app';
+
   _AppRegistry.default.registerComponent(appName, () => AppRoot);
 
   const {
@@ -43,7 +45,9 @@ const getReactNativeWebSSRStyles = (AppRoot, appName = 'app') => {
 
 exports.getReactNativeWebSSRStyles = getReactNativeWebSSRStyles;
 
-const getSSRStyles = (AppRoot, appName = 'app', existingStyles = []) => {
+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
   ];
 };

package/lib/utils/useCopy.js

@@ -35,10 +35,12 @@ const DEFAULT_COPY = 'en';
 
 exports.DEFAULT_COPY = DEFAULT_COPY;
 
-function useCopy({
-  dictionary,
-  copy = DEFAULT_COPY
-}) {
+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

package/lib/utils/useHash.js

@@ -29,7 +29,8 @@ const doAction = (action, event) => {
  */
 
 
-const useHash = (action, isReady = true) => {
+const useHash = function (action) {
+  let isReady = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
   const [isDone, setIsDone] = (0, _react.useState)(false); // Do the action just once when ready after component mount, from hash on page load
 
   const isToDo = isReady && !isDone;

package/lib/utils/useResponsiveProp.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.resolveResponsiveProp = void 0;
+exports.resolveResponsiveProp = exports.default = void 0;
 
 var _systemConstants = require("@telus-uds/system-constants");
 

package/lib/utils/useUniqueId.js

@@ -9,7 +9,8 @@ var _react = require("react");
 
 let id = 0;
 
-function useUniqueId(prefix = '') {
+function useUniqueId() {
+  let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   const [uniqueId] = (0, _react.useState)(() => {
     id += 1;
     return `${prefix}-${id}`;

package/lib/utils/withLinkRouter.js

@@ -50,11 +50,12 @@ const hasOwnProperty = (object, prop) => Object.prototype.hasOwnProperty.call(ob
 
 
 const withLinkRouter = Component => {
-  const wrappedComponent = /*#__PURE__*/(0, _react.forwardRef)(({
-    LinkRouter,
-    linkRouterProps,
-    ...props
-  }, ref) => {
+  const wrappedComponent = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+    let {
+      LinkRouter,
+      linkRouterProps,
+      ...props
+    } = _ref;
     if (!LinkRouter) return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, { ...props,
       ref: ref
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/components-base",
-  "version": "1.8.1",
+  "version": "1.8.2",
   "description": "Base components",
   "keywords": [
     "base"
@@ -22,16 +22,16 @@
   },
   "scripts": {
     "test": "jest",
-    "lint": "yarn --cwd ../.. lint:path --color packages/components-base",
-    "lint:fix": "yarn --cwd ../.. lint:path --fix packages/components-base",
+    "lint": "npm run --prefix ../.. lint:path -- --color packages/components-base",
+    "lint:fix": "npm run --prefix ../.. lint:path -- --fix packages/components-base",
     "format": "prettier --write .",
-    "build": "yarn build:code && yarn build:docs",
+    "build": "npm run build:code && npm run build:docs",
     "build:main": "babel src -d lib",
     "build:module": "babel src -d lib-module --env-name module",
-    "build:code": "yarn build:main && yarn build:module",
+    "build:code": "npm run build:main && npm run build:module",
     "build:docs": "babel-node --plugins=@nearform/babel-plugin-react-docgen generate-component-docs.js",
     "storybook": "start-storybook",
-    "dev": "yarn build:code --watch"
+    "dev": "npm run build:code --watch"
   },
   "bugs": {
     "url": "https://github.com/telus/universal-design-system/issues"
@@ -44,7 +44,7 @@
   ],
   "peerDependencies": {
     "react": "^17.0.2",
-    "react-dom": "*",
+    "react-dom": "^17.0.2",
     "react-native": "*",
     "react-native-web": "^0.17.0"
   },
@@ -59,12 +59,13 @@
     "@testing-library/jest-native": "^4.0.1",
     "@testing-library/react-hooks": "^7.0.1",
     "@testing-library/react-native": "^7.2.0",
-    "react-test-renderer": "^16.3.2"
+    "react-test-renderer": "^16.3.2",
+    "webpack": "5.x"
   },
   "dependencies": {
     "airbnb-prop-types": "^2.16.0",
-    "@telus-uds/system-constants": "^1.0.3",
-    "@telus-uds/system-theme-tokens": "^2.0.1",
+    "@telus-uds/system-constants": "^1.0.4",
+    "@telus-uds/system-theme-tokens": "^2.0.2",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
     "prop-types": "^15.7.2",

package/src/Pagination/Pagination.jsx

@@ -139,6 +139,9 @@ const Pagination = forwardRef(
     )
   }
 )
+
+Pagination.displayName = 'Pagination'
+
 PageButton.displayName = 'PageButton'
 
 Pagination.PageButton = PageButton

package/src/Search/Search.jsx

@@ -68,6 +68,7 @@ const Search = forwardRef(
       onChange,
       onSubmit,
       onClear,
+      onFocus,
       accessibilityLabel,
       copy = 'en',
       tokens,
@@ -112,6 +113,10 @@ const Search = forwardRef(
       if (onClear !== undefined) onClear('', event)
     }
 
+    const handleFocus = (event) => {
+      if (onFocus !== undefined) onFocus(event)
+    }
+
     const isEmpty = currentValue === ''
 
     // Accessibility label should always be present and correctly localised
@@ -140,6 +145,7 @@ const Search = forwardRef(
           value={currentValue}
           onChange={setValue}
           onSubmitEditing={handleSubmit}
+          onFocus={handleFocus}
           accessibilityLabel={a11yLabelText}
         />
         <View style={[staticStyles.iconsContainer, selectIconsContainerStyle(themeTokens)]}>
@@ -214,6 +220,11 @@ Search.propTypes = {
    */
   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,

package/src/Select/Item.native.jsx

@@ -1,10 +1,3 @@
-import PropTypes from 'prop-types'
-
 const Item = () => null
 
 export default Item
-
-Item.propTypes = {
-  children: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired
-}

package/lib-module/A11yInfoProvider/index.js

@@ -1,62 +0,0 @@
-import React, { createContext, useContext, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import AccessibilityInfo from "react-native-web/dist/exports/AccessibilityInfo";
-import Platform from "react-native-web/dist/exports/Platform";
-import { jsx as _jsx } from "react/jsx-runtime";
-const ScreenReaderContext = /*#__PURE__*/createContext(false);
-const ReducedMotionContext = /*#__PURE__*/createContext(false);
-
-const A11yInfoProvider = ({
-  children
-}) => {
-  const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false);
-  const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);
-  useEffect(() => {
-    if (process.env.NODE_ENV === 'test') {
-      // On Jest these effects do nothing but can cause `act` state change warnings
-      // and "...after the Jest environment has been torn down" errors, so skip them.
-      return () => {};
-    }
-
-    AccessibilityInfo.addEventListener('reduceMotionChanged', setReduceMotionEnabled);
-    AccessibilityInfo.addEventListener('screenReaderChanged', setScreenReaderEnabled);
-
-    const setInitialA11yInfo = async () => {
-      const [initialReduceMotionEnabled, initialScreenReaderEnabled] = await Promise.all([AccessibilityInfo.isReduceMotionEnabled(), AccessibilityInfo.isScreenReaderEnabled()]); // Browsers can't detect screen readers; in RNW isScreenReaderEnabled() is always `true`
-      // https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/AccessibilityInfo/index.js#L14
-
-      setScreenReaderEnabled(Platform.OS !== 'web' && !!initialScreenReaderEnabled); // RNW does support isReduceMotionEnabled looking for 'prefers-reduced-motion' state
-
-      setReduceMotionEnabled(!!initialReduceMotionEnabled);
-    };
-
-    if (AccessibilityInfo.isReduceMotionEnabled && AccessibilityInfo.isScreenReaderEnabled) {
-      setInitialA11yInfo();
-    }
-
-    return () => {
-      AccessibilityInfo.removeEventListener('reduceMotionChanged', setReduceMotionEnabled);
-      AccessibilityInfo.removeEventListener('screenReaderChanged', setScreenReaderEnabled);
-    };
-  }, []);
-  return /*#__PURE__*/_jsx(ReducedMotionContext.Provider, {
-    value: reduceMotionEnabled,
-    children: /*#__PURE__*/_jsx(ScreenReaderContext.Provider, {
-      value: screenReaderEnabled,
-      children: children
-    })
-  });
-};
-
-A11yInfoProvider.propTypes = {
-  children: PropTypes.node.isRequired
-};
-export default A11yInfoProvider;
-export const useA11yInfo = () => {
-  const screenReaderEnabled = useContext(ScreenReaderContext);
-  const reduceMotionEnabled = useContext(ReducedMotionContext);
-  return {
-    reduceMotionEnabled,
-    screenReaderEnabled
-  };
-};

package/lib-module/A11yText/index.js

@@ -1,55 +0,0 @@
-import React, { forwardRef } from 'react';
-import Platform from "react-native-web/dist/exports/Platform";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import View from "react-native-web/dist/exports/View";
-import PropTypes from 'prop-types';
-import { a11yProps, selectSystemProps, viewProps } from '../utils/props';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-/**
- * A11yText is a zero-size invisible element that adds text to be read by screen readers.
- *
- * It should be used to add selectable screen-reader-only text to the main document flow,
- * as a sibling to blocks of text like paragraphs and interactive elements like buttons.
- */
-
-const A11yText = /*#__PURE__*/forwardRef(({
-  text,
-  heading,
-  ...rest
-}, ref) => {
-  const selectedProps = selectProps({
-    // On iOS, needs `accessible` to be true to be focusable without non-a11y content.
-    // On Web, `accessible` causes RNW to set attributes that may make the element be treated as a group.
-    // On Android, may cause this to be skipped when with `<Text>` siblings in an `accessible` View,
-    // see https://github.com/facebook/react-native/issues/30851#issuecomment-790165489
-    accessible: Platform.OS === 'ios',
-    accessibilityLabel: text,
-    accessibilityRole: heading ? 'header' : 'text',
-    ...rest
-  });
-  return /*#__PURE__*/_jsx(View, {
-    style: styles.invisible,
-    ref: ref,
-    ...selectedProps
-  });
-});
-A11yText.displayName = 'A11yText';
-A11yText.propTypes = { ...selectedSystemPropTypes,
-  text: PropTypes.string.isRequired,
-  heading: PropTypes.bool
-};
-const styles = StyleSheet.create({
-  invisible: {
-    // Without width or height it is not shown
-    minHeight: 1,
-    minWidth: 1,
-    // Ensures it doesn't occupy space
-    // position: 'absolute' causes it to be read first in its container
-    marginEnd: -1,
-    marginBottom: -1,
-    // Ensures it is in the correct position on Native
-    top: -1
-  }
-});
-export default A11yText;