@telus-uds/components-base 1.5.0 → 1.7.0

package/lib-module/ToggleSwitch/ToggleSwitch.js

@@ -7,11 +7,11 @@ import InputLabel from '../InputLabel';
 import ButtonBase from '../Button/ButtonBase';
 import StackView from '../StackView';
 import { useThemeTokensCallback, applyShadowToken } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectTokens, pressProps, selectSystemProps, useUniqueId, variantProp, viewProps } from '../utils';
+import { a11yProps, focusHandlerProps, getTokensPropType, selectTokens, pressProps, selectSystemProps, useUniqueId, variantProp, viewProps } from '../utils';
 import { useInputValue } from '../utils/input';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, pressProps, viewProps]);
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, pressProps, viewProps]);
 
 const selectButtonTokens = tokens => selectTokens('Button', { ...tokens,
   // Width tokens are applied to our inner track. Disable Button width token so it wraps our track width.
@@ -117,7 +117,7 @@ const ToggleSwitch = /*#__PURE__*/forwardRef(({
     space: 2,
     direction: "row",
     children: [Boolean(label) && /*#__PURE__*/_jsx(View, {
-      style: selectLabelStyles(themeTokens),
+      style: [selectLabelStyles(themeTokens), staticStyles.containText],
       children: /*#__PURE__*/_jsx(InputLabel, {
         forId: inputId,
         label: label,
@@ -219,6 +219,9 @@ const staticStyles = StyleSheet.create({
   switch: {
     alignItems: 'center',
     justifyContent: 'center'
+  },
+  containText: {
+    flexShrink: 1
   }
 });
 export default ToggleSwitch;

package/lib-module/ToggleSwitch/ToggleSwitchGroup.js

@@ -7,10 +7,10 @@ import Fieldset from '../Fieldset';
 import { getStackedContent } from '../StackView';
 import { useViewport } from '../ViewportProvider';
 import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, pressProps, selectSystemProps, variantProp, viewProps } from '../utils/props';
-import { useMultipleInputValues } from '../utils/input';
+import { a11yProps, containUniqueFields, focusHandlerProps, getTokensPropType, selectSystemProps, useMultipleInputValues, variantProp, viewProps } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, pressProps, viewProps]);
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
 const ToggleSwitchGroup = /*#__PURE__*/forwardRef(({
   variant,
   tokens,
@@ -57,13 +57,20 @@ const ToggleSwitchGroup = /*#__PURE__*/forwardRef(({
     ...rest
   });
   const itemA11yRole = selectedProps.accessibilityRole === 'radiogroup' ? 'radio' : 'switch';
+  const uniqueFields = ['id', 'label'];
+
+  if (!containUniqueFields(items, uniqueFields)) {
+    throw new Error(`ToggleSwitchGroup items must have unique ${uniqueFields.join(', ')}`);
+  }
+
   const toggleSwitches = items.map(({
     label,
     id = label,
     accessibilityLabel = label,
     onChange: itemOnChange,
     ref: itemRef,
-    tooltip: itemTooltip
+    tooltip: itemTooltip,
+    ...itemRest
   }, index) => {
     const isSelected = currentValues.includes(id);
 
@@ -89,7 +96,8 @@ const ToggleSwitchGroup = /*#__PURE__*/forwardRef(({
       inactive: inactive,
       label: label,
       tooltip: itemTooltip,
-      ...itemA11y
+      ...itemA11y,
+      ...selectItemProps(itemRest)
     }, id);
   });
   return /*#__PURE__*/_jsx(Fieldset, {
@@ -123,7 +131,8 @@ ToggleSwitchGroup.propTypes = { ...selectedSystemPropTypes,
   /**
    * The options a user may select
    */
-  items: PropTypes.arrayOf(PropTypes.shape({
+  items: PropTypes.arrayOf(PropTypes.shape({ ...selectedItemPropTypes,
+
     /**
      * The text displayed to the user on the label.
      */

package/lib-module/Typography/Typography.js

@@ -5,13 +5,14 @@ import View from "react-native-web/dist/exports/View";
 import { useThemeTokens } from '../ThemeProvider';
 import { useViewport } from '../ViewportProvider';
 import { applyTextStyles } from '../ThemeProvider/utils';
-import { a11yProps, variantProp, getTokensPropType, getMaxFontMultiplier, headingTags, selectSystemProps, textTags, viewProps, getA11yPropsFromHtmlTag } from '../utils';
+import { a11yProps, variantProp, getTokensPropType, getMaxFontMultiplier, headingTags, selectSystemProps, textTags, textProps, viewProps, getA11yPropsFromHtmlTag } from '../utils';
 /**
  * @typedef {import('../utils/a11y/semantics').TextTag} TextTag
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const [selectTextProps, selectedTextPropTypes] = selectSystemProps([textProps]);
 
 const selectTextStyles = ({
   fontWeight,
@@ -50,31 +51,32 @@ const Typography = /*#__PURE__*/forwardRef(({
   const themeTokens = useThemeTokens('Typography', tokens, variant, {
     viewport
   });
-  const textProps = {
+  const resolvedTextProps = { ...selectTextProps(rest),
     style: selectTextStyles(align ? { ...themeTokens,
       textAlign: align
     } : themeTokens),
     dataSet,
     maxFontSizeMultiplier: getMaxFontMultiplier(themeTokens)
   };
-  const selectedProps = selectProps({ ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
-    ...rest
-  });
+  const containerProps = { ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
+    ...selectContainerProps(rest)
+  };
   return block ? /*#__PURE__*/_jsx(View, {
     ref: ref,
-    ...selectedProps,
-    children: /*#__PURE__*/_jsx(Text, { ...textProps,
+    ...containerProps,
+    children: /*#__PURE__*/_jsx(Text, { ...resolvedTextProps,
       children: children
     })
   }) : /*#__PURE__*/_jsx(Text, {
     ref: ref,
-    ...textProps,
-    ...selectedProps,
+    ...containerProps,
+    ...resolvedTextProps,
     children: children
   });
 });
 Typography.displayName = 'Typography';
-Typography.propTypes = { ...selectedSystemPropTypes,
+Typography.propTypes = { ...selectedContainerPropTypes,
+  ...selectedTextPropTypes,
   tokens: getTokensPropType('Typography'),
   variant: variantProp.propType,
 

package/lib-module/index.js

@@ -44,5 +44,5 @@ export { default as Typography } from './Typography';
 export { default as A11yInfoProvider, useA11yInfo } from './A11yInfoProvider';
 export { default as BaseProvider } from './BaseProvider';
 export { default as ViewportProvider, useViewport, ViewportContext } from './ViewportProvider';
-export { default as ThemeProvider, useTheme, useSetTheme, useThemeTokens, getThemeTokens } from './ThemeProvider';
+export { default as ThemeProvider, useTheme, useSetTheme, useThemeTokens, getThemeTokens, applyOuterBorder, applyTextStyles, applyShadowToken } from './ThemeProvider';
 export * from './utils';

package/lib-module/utils/containUniqueFields.js

@@ -0,0 +1,26 @@
+// Returns true if there are no duplicate values of the fields listed
+// in the `fields` array across the objects in the `items` array, false
+// otherwise.
+// Note that if a value of a field in an item is not set, it will be
+// excluded from comparison.
+const containUniqueFields = (items, fields) => {
+  const map = [];
+  const itemsHaveDuplicateFields = items.some(item => fields.some(field => {
+    if (!map[field]) {
+      map[field] = [];
+    }
+
+    if (!item[field]) {
+      // We exclude empty values from comparison
+      return false;
+    } // Duplicate found!
+
+
+    if (map[field][item[field]]) return true;
+    map[field][item[field]] = true;
+    return false;
+  }));
+  return !itemsHaveDuplicateFields;
+};
+
+export default containUniqueFields;

package/lib-module/utils/index.js

@@ -12,4 +12,5 @@ export { default as useResponsiveProp } from './useResponsiveProp';
 export * from './useResponsiveProp';
 export { default as useUniqueId } from './useUniqueId';
 export { default as withLinkRouter } from './withLinkRouter';
-export * from './ssr';
+export * from './ssr';
+export { default as containUniqueFields } from './containUniqueFields';

package/lib-module/utils/input.js

@@ -1,4 +1,8 @@
 import { useCallback, useRef, useState } from 'react';
+/**
+ * @typedef {import('react').SyntheticEvent} Event
+ */
+
 const pluralHooks = ['useMultipleInputValues'];
 
 const validateProps = ({
@@ -56,11 +60,9 @@ Consumers of this hook must be one of:
  *
  * @param {string} hookName - optional, used for tailoring error messages
  *
- * @typedef {(oldValue: string|number|null) => string|number|null} UpdaterFunction - `setValue` takes a value or
- *          a function returning a new value from the old value
  * @returns {{
  *   currentValue: string|number|null
- *   setValue: (newValue: string|number|null|UpdaterFunction) => void
+ *   setValue: (newValue: string|number|null|(oldValue: string|number) => string|number, event: Event) => void
  *   resetValue: () => void
  *   isControlled: bool
  * }}
@@ -122,12 +124,10 @@ export const useInputValue = (props = {}, hookName = 'useInputValue') => {
  *
  * @param {string} componentName - optional, used in error messages
  *
- * @typedef {(oldValues: string[]|number[]) => string[]|number[]} UpdaterFunction - `setValues` takes values or
- *          a function returning new values from old values
  * @returns {{
  *   currentValues: any
  *   resetValues: () => void
- *   setValues: (newValues: string[]|number[]|UpdaterFunction) => void
+ *   setValues: (newValues: string[]|number[]|(oldValues: string[]|number[]) => string[]|number[], event: Event) => void
  *   toggleOneValue: (value: string|number) => void
  *   unsetValues: () => void
  * }}

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

@@ -0,0 +1,59 @@
+import PropTypes from 'prop-types';
+export const focusHandlerProps = {
+  types: {
+    /**
+     * onBlur handler
+     */
+    onBlur: PropTypes.func,
+
+    /**
+     * onFocus handler
+     */
+    onFocus: PropTypes.func
+  },
+  select: ({
+    onBlur,
+    onFocus
+  }) => ({
+    onBlur,
+    onFocus
+  })
+};
+export const textInputHandlerProps = {
+  types: {
+    /**
+     * onChange handler
+     */
+    onChange: PropTypes.func,
+
+    /**
+     * onChangeText handler
+     */
+    onChangeText: PropTypes.func,
+
+    /**
+     * onSubmit handler
+     */
+    onSubmit: PropTypes.func,
+
+    /**
+     * onSubmitEditing handler
+     */
+    onSubmitEditing: PropTypes.func
+  },
+  select: ({
+    onChange,
+    onChangeText,
+    onSubmit,
+    onSubmitEditing
+  }) => ({
+    onChange,
+    onChangeText,
+    onSubmit,
+    onSubmitEditing
+  })
+};
+export default {
+  focusHandlerProps,
+  textInputHandlerProps
+};

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

@@ -1,4 +1,5 @@
 export * from './tokens';
+export * from './handlerProps';
 export { default as a11yProps } from './a11yProps';
 export { default as clickProps } from './clickProps';
 export { default as copyPropTypes } from './copyPropTypes';
@@ -12,5 +13,7 @@ export { default as rectProp } from './rectProp';
 export { default as responsiveProps } from './responsiveProps';
 export { default as spacingProps } from './spacingProps';
 export { default as selectSystemProps } from './selectSystemProps';
+export { default as textInputProps } from './textInputProps';
+export { default as textProps } from './textProps';
 export { default as variantProp } from './variantProp';
 export { default as viewProps } from './viewProps';

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

@@ -38,17 +38,15 @@ export default {
     hintPosition,
     feedback,
     tooltip,
-    validation,
-    ...rest
+    validation
   }) => ({
-    props: {
+    supportsProps: {
       label,
       hint,
       hintPosition,
       feedback,
       tooltip,
       validation
-    },
-    ...rest
+    }
   })
 };

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

@@ -22,20 +22,16 @@ export default {
   select: getPropSelector(linkPropTypes),
 
   /**
-   * Turn hrefs into press handlers on Native and throw if not given `onPress` or `href`.
+   * Turn hrefs into press handlers that open links on Native.
    *
    * @param {({ onPress?: () => void, href?: string })}
-   * @returns {(() => void)|undefined} Returns a press handler, or undefined on web if href
-   * string is provided. Expects calling component to use href string on web (e.g. in `<a>`).
+   * @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
   }) => {
-    if (!href && !onPress) {
-      throw new Error('handleHref requires either href or onPress');
-    }
-
     return Platform.select({
       web: onPress,
       default: (...args) => {

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

@@ -0,0 +1,193 @@
+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
+// 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,
+  initialValue: PropTypes.string,
+  readOnly: 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,
+  ...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.
+   *
+   * > It is important to note that this aligns the text to the top on iOS, and centers it on Android.
+   * > 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.
+   *
+   * '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
+};
+/**
+ * These props are supported in React Native but not React Native Web.
+ *
+ * React Native text inputs can be quirky, so a full set of props should be allowed to handle edge cases.
+ * Refer to React Native documentation for details, allowed values, and Android/iOS support and versions:
+ * https://reactnative.dev/docs/textinput
+ *
+ * Beware that many React Native text input props apply via complicated logic that chooses a built-in
+ * 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,
+  contextMenuHidden: PropTypes.bool,
+  dataDetectorTypes: PropTypes.string,
+  disableFullscreenUI: PropTypes.bool,
+  enablesReturnKeyAutomatically: PropTypes.bool,
+  importantForAutofill: PropTypes.string,
+  inlineImageLeft: PropTypes.string,
+  keyboardAppearance: PropTypes.string,
+  returnKeyLabel: PropTypes.string,
+  rejectResponderTermination: PropTypes.bool,
+  scrollEnabled: PropTypes.bool,
+  selection: PropTypes.object,
+  selectionColor: PropTypes.string,
+  showSoftInputOnFocus: PropTypes.bool,
+  textAlign: PropTypes.string,
+  textContentType: PropTypes.string,
+  passwordRules: PropTypes.string,
+  textBreakStrategy: PropTypes.string,
+  underlineColorAndroid: PropTypes.string
+};
+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,
+    ...webOnly,
+    ...nativeOnly
+  },
+
+  /**
+   * Filters a props object. Return only platform-appropriate TextInput props, native inputs
+   * may throw errors on receiving unknown props.
+   */
+  select: getPropSelector({ ...crossPlatform,
+    ...Platform.select({
+      web: webOnly,
+      default: nativeOnly
+    })
+  })
+};

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

@@ -0,0 +1,59 @@
+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.
+// They are generally concerned with the behaviour of multiline text.
+
+const crossPlatform = {
+  /**
+   * Truncates text after this many lines with an ellipsis at the end.
+   * 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,
+  minimumFontScale: PropTypes.number,
+  onTextLayout: PropTypes.func,
+  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
+};
+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,
+    ...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,
+    ...Platform.select({
+      web: webOnly,
+      default: nativeOnly
+    })
+  })
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/components-base",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "description": "Base components",
   "keywords": [
     "base"
@@ -22,14 +22,14 @@
   },
   "scripts": {
     "test": "jest",
-    "lint": "telus-standard",
-    "lint:fix": "telus-standard --fix",
+    "lint": "yarn --cwd ../.. lint:path --color packages/components-base",
+    "lint:fix": "yarn --cwd ../.. lint:path --fix packages/components-base",
     "format": "prettier --write .",
     "build": "yarn build:code && yarn 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:docs": "babel-node --plugins=react-docgen-alpha generate-component-docs.js",
+    "build:docs": "babel-node --plugins=@nearform/babel-plugin-react-docgen generate-component-docs.js",
     "storybook": "start-storybook",
     "dev": "yarn build:code --watch",
     "release": "standard-version"
@@ -59,7 +59,7 @@
   "dependencies": {
     "airbnb-prop-types": "^2.16.0",
     "@telus-uds/system-constants": "^1.0.2",
-    "@telus-uds/system-theme-tokens": "^1.4.0",
+    "@telus-uds/system-theme-tokens": "^1.5.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
     "prop-types": "^15.7.2",

package/src/Button/ButtonBase.jsx

@@ -6,8 +6,9 @@ import { applyTextStyles, applyShadowToken, applyOuterBorder } from '../ThemePro
 import buttonPropTypes from './propTypes'
 import {
   a11yProps,
-  getCursorStyle,
   clickProps,
+  focusHandlerProps,
+  getCursorStyle,
   linkProps,
   resolvePressableState,
   resolvePressableTokens,
@@ -17,7 +18,12 @@ import {
   withLinkRouter
 } from '../utils'
 
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps])
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([
+  a11yProps,
+  focusHandlerProps,
+  linkProps,
+  viewProps
+])
 
 const getOuterBorderOffset = ({ outerBorderGap = 0, outerBorderWidth = 0 }) =>
   outerBorderGap + outerBorderWidth