@telus-uds/components-base 1.8.0 → 1.8.3

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.0",
+  "version": "1.8.3",
   "description": "Base components",
   "keywords": [
     "base"
@@ -22,16 +22,17 @@
   },
   "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"
+    "build-storybook": "build-storybook",
+    "dev": "npm run build:code --watch"
   },
   "bugs": {
     "url": "https://github.com/telus/universal-design-system/issues"
@@ -44,7 +45,7 @@
   ],
   "peerDependencies": {
     "react": "^17.0.2",
-    "react-dom": "*",
+    "react-dom": "^17.0.2",
     "react-native": "*",
     "react-native-web": "^0.17.0"
   },
@@ -55,16 +56,17 @@
     "@storybook/react": "^6.5.6",
     "@storybook/builder-webpack5": "^6.5.6",
     "@storybook/manager-webpack5": "^6.5.6",
-    "@telus-uds/browserslist-config": "^1.0.1",
+    "@telus-uds/browserslist-config": "^1.0.3",
     "@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.2",
-    "@telus-uds/system-theme-tokens": "^2.0.0",
+    "@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/List/List.jsx

@@ -17,26 +17,37 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * An unordered List component has a child a ListItem that
  * allows icon, dividers and customized typography
  */
-const List = forwardRef(({ children, showDivider, tokens, variant, ...rest }, ref) => {
-  const accessibilityRole = Platform.select({ web: 'list', default: 'none' })
-  const items = Children.map(children, (child, index) => {
-    if (child.type.name === ListItem.name) {
-      return cloneElement(child, {
-        showDivider,
-        isLastItem: index + 1 === Children.count(children),
-        tokens,
-        variant
-      })
-    }
-    return child
-  })
+const List = forwardRef(
+  (
+    {
+      children,
+      showDivider,
+      tokens,
+      variant,
+      accessibilityRole = Platform.select({ web: 'list', default: undefined }),
+      ...rest
+    },
+    ref
+  ) => {
+    const items = Children.map(children, (child, index) => {
+      if (child.type.name === ListItem.name) {
+        return cloneElement(child, {
+          showDivider,
+          isLastItem: index + 1 === Children.count(children),
+          tokens,
+          variant
+        })
+      }
+      return child
+    })
 
-  return (
-    <View ref={ref} accessibilityRole={accessibilityRole} {...selectProps(rest)}>
-      {items}
-    </View>
-  )
-})
+    return (
+      <View ref={ref} accessibilityRole={accessibilityRole} {...selectProps(rest)}>
+        {items}
+      </View>
+    )
+  }
+)
 List.displayName = 'List'
 
 List.propTypes = {

package/src/List/ListItem.jsx

@@ -65,7 +65,18 @@ const selectDividerStyles = ({ dividerColor, dividerSize, interItemMarginWithDiv
  */
 const ListItem = forwardRef(
   (
-    { tokens, variant, icon, iconColor, iconSize, showDivider, children, isLastItem, ...rest },
+    {
+      tokens,
+      variant,
+      icon,
+      iconColor,
+      iconSize,
+      showDivider,
+      children,
+      isLastItem,
+      accessibilityRole = Platform.select({ web: 'listitem', default: undefined }),
+      ...rest
+    },
     ref
   ) => {
     const themeTokens = useThemeTokens('List', tokens, variant)
@@ -78,7 +89,6 @@ const ListItem = forwardRef(
     const itemBulletPositioningStyles = selectBulletPositioningStyles(themeTokens)
     const iconTokens = selectItemIconTokens(themeTokens)
     const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens)
-    const accessibilityRole = Platform.select({ web: 'listitem', default: 'item' })
 
     const renderItem = () => (
       <View style={staticStyles.wrap}>{wrapStringsInText(children, { style: itemStyles })}</View>

package/src/Modal/Modal.jsx

@@ -202,6 +202,7 @@ const staticStyles = StyleSheet.create({
   closeButtonContainer: {
     position: 'absolute',
     top: 0,
-    right: 0
+    right: 0,
+    zIndex: 1
   }
 })

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/.storybook/main.js

@@ -1,11 +0,0 @@
-module.exports = {
-  core: {
-    builder: 'webpack5'
-  },
-  features: {
-    // remove when storybook v7 arrives
-    postcss: false
-  },
-  stories: ['../stories/**/*.stories.@(js|jsx)'],
-  addons: ['@storybook/addon-essentials', '@storybook/addon-a11y']
-}