@telus-uds/components-base 1.8.1 → 1.8.2

package/lib-module/utils/input.js

@@ -1,180 +0,0 @@
-import { useCallback, useRef, useState } from 'react';
-/**
- * @typedef {import('react').SyntheticEvent} Event
- */
-
-const pluralHooks = ['useMultipleInputValues'];
-
-const validateProps = ({
-  value,
-  onChange,
-  readOnly,
-  initialValue
-}, {
-  isCurrentlyControlled,
-  isControlled
-}, hookName) => {
-  const s = pluralHooks.includes(hookName) ? 's' : '';
-
-  const usageError = error => {
-    // Errors inside hooks in React Native get incomplete stack traces pointing at parent component only.
-    // Help devs out by telling them exactly which hook threw the error as well as why.
-    throw new Error(`${hookName} ${error}.
-
-Consumers of this hook must be one of:
-1. An "uncontrolled" component responding directly to user actions, with an optional \`initialValue${s}\` but no \`value${s}\` prop,
-2. A "controlled" component where an always-defined \`value${s}\` prop is managed by an \`onChange\` handler, with no \`initialValue${s}\`,
-3. A "read-only" component, with \`readOnly\` prop set as \`true\`.
-`);
-  };
-
-  if (value && !onChange && !readOnly) {
-    usageError(`has \`value${s}\` prop without \`onChange\` or \`readOnly\``);
-  }
-
-  if (initialValue && value) {
-    usageError(`has both \`initialValue${s}\` and \`value${s}\``);
-  }
-
-  if (isControlled && !isCurrentlyControlled) {
-    usageError(`stopped receiving \`value${s}\` from parent after delegating state management`);
-  }
-
-  if (!isControlled && isCurrentlyControlled) {
-    usageError(`started receiving \`value${s}\` from parent after starting managing own state`);
-  }
-};
-/**
- * Hook used for controlling the input state of input components that have a singular value.
- * If `value` prop is passed in, this delegates state management to a parent using a passed-in `onChange` prop.
- * If `value` prop is undefined, the hook manages its own state.
- *
- * TODO: when implementing full UDS forms, integrate validation support etc and test alongside common forms
- * management tools such as Formik and React Hooks Form.
- *
- * @param {object} props
- * @param {string|number|null} [props.value] - for a controlled input, the active values as set by a parent
- * @param {string|number} [props.initialValue] - for an uncontrolled input, the default active values
- * @param {function} [props.onChange] - function called when values change (required for controlled inputs)
- * @param {boolean} [props.readOnly] - if true, stops the input values from changing
- *
- * @param {string} hookName - optional, used for tailoring error messages
- *
- * @returns {{
- *   currentValue: string|number|null
- *   setValue: (newValue: string|number|null|(oldValue: string|number) => string|number, event: Event) => void
- *   resetValue: () => void
- *   isControlled: bool
- * }}
- */
-
-
-export const useInputValue = (props = {}, hookName = 'useInputValue') => {
-  const isCurrentlyControlled = props.value !== undefined;
-  const [isControlled] = useState(isCurrentlyControlled);
-  validateProps(props, {
-    isControlled,
-    isCurrentlyControlled
-  }, hookName);
-  const {
-    value,
-    initialValue,
-    onChange,
-    readOnly = false
-  } = props;
-  const [ownValue, setOwnValue] = useState(!isControlled && initialValue);
-  const currentValue = isControlled ? value : ownValue; // Store the first valid value, for resetting input to default. If behaviour like Formik's `enableReinitialize`
-  // is needed, add useEffect calling a set fn if !deepEqual(initializedValues, initialValues)
-
-  const valueRef = useRef({
-    initial: currentValue,
-    value: currentValue
-  }); // Make current value accessible inside useCallback without rememoizing every time the value changes
-
-  valueRef.current.value = currentValue;
-  const setValue = useCallback((arg, event) => {
-    if (readOnly) return;
-    const newValue = typeof arg === 'function' ? arg(valueRef.current.value) : arg;
-    if (!isControlled) setOwnValue(newValue); // Call onChange handler if there's something for it to handle (event or a changed value)
-
-    if (onChange && (event || valueRef.current.value !== newValue)) onChange(newValue, event);
-  }, [isControlled, onChange, readOnly]);
-  const resetValue = useCallback(event => setValue(valueRef.current.initial, event), [setValue]);
-  return {
-    currentValue,
-    setValue,
-    resetValue,
-    isControlled
-  };
-};
-/**
- * Hook used for controlling the input state of input components that have multiple named on/off states.
- * If `values` are passed in, this delegates state management to a parent using a passed-in `onChange` prop.
- * If `values` prop is not passed in, the hook manages its own state.
- *
- * TODO: when implementing full UDS forms, integrate validation support etc and test alongside common forms
- * management tools such as Formik and React Hooks Form.
- *
- * @param {object} props
- * @param {string[]|number[]} [props.values] - for a controlled input, the active values as set by a parent
- * @param {string[]|number[]} [props.initialValues] - for an uncontrolled input, the default active values
- * @param {number?} [props.maxValues] - maximum number of values that may be selected at once (no limit if null)
- * @param {function} [props.onChange] - function called when values change (required for controlled inputs)
- * @param {boolean} [props.readOnly] - if true, stops the input values from changing
- *
- * @param {string} componentName - optional, used in error messages
- *
- * @returns {{
- *   currentValues: any
- *   resetValues: () => void
- *   setValues: (newValues: string[]|number[]|(oldValues: string[]|number[]) => string[]|number[], event: Event) => void
- *   toggleOneValue: (value: string|number) => void
- *   unsetValues: () => void
- * }}
- */
-
-export const useMultipleInputValues = ({
-  values,
-  initialValues,
-  maxValues,
-  onChange,
-  readOnly
-} = {}) => {
-  const {
-    currentValue,
-    setValue,
-    resetValue
-  } = useInputValue({
-    readOnly,
-    onChange,
-    value: values,
-    // if we're controlling our own state, always start with an array
-    initialValue: initialValues ?? (values === undefined ? [] : undefined)
-  }, 'useMultipleInputValues');
-  const enforceMaxValues = useCallback(newValues => {
-    if (!maxValues) return newValues;
-    const excess = newValues.length - maxValues;
-    return excess > 0 ? newValues.slice(excess) : newValues;
-  }, [maxValues]);
-  const currentValues = enforceMaxValues(currentValue);
-  const setValues = useCallback((newValues, event) => {
-    const validNewValues = enforceMaxValues(newValues);
-    setValue(validNewValues, event);
-  }, [setValue, enforceMaxValues]);
-  const resetValues = resetValue;
-  const unsetValues = useCallback(event => setValues([], event), [setValues]);
-  const toggleOneValue = useCallback((newValue, event) => {
-    if (readOnly) return; // This will only work with primitive values (e.g. strings, numbers), swap for .some() and
-    // a deepEqual() function if there's any use case for toggling stored objects or arrays.
-
-    const newValues = currentValues.includes(newValue) ? currentValues.filter(oldValue => oldValue !== newValue) : [...currentValues, newValue];
-    setValues(newValues, event);
-  }, [currentValues, readOnly, setValues]);
-  return {
-    currentValues,
-    resetValues,
-    setValues,
-    toggleOneValue,
-    unsetValues
-  };
-};

package/lib-module/utils/pressability.js

@@ -1,97 +0,0 @@
-import Platform from "react-native-web/dist/exports/Platform";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import pressProps from './props/pressProps';
-/**
- * @typedef {import('react').ReactNode} ReactNode
- */
-// These roles should result in cursor: pointer but don't in current RNW releases
-
-const shouldUseCursor = ['checkbox', 'radio', 'switch'];
-/**
- * React Native Web has some built-in logic for applying cursor styles based on accessibility roles;
- * however, it misses certain cases. This fills in known cases where widely used versions of RNW
- * fail to apply an expected cursor style.
- *
- * @param {object} props
- * @param {boolean} [props.inactive]
- * @param {boolean} [props.disabled]
- * @param {string} [props.accessibilityRole]
- * @returns
- */
-
-export const getCursorStyle = ({
-  inactive,
-  disabled,
-  accessibilityRole
-}) => {
-  if (Platform.OS !== 'web') return undefined;
-  if (inactive || disabled) return staticStyles.notAllowed;
-  if (shouldUseCursor.includes(accessibilityRole)) return staticStyles.pointer;
-  return undefined; // allows React Native Web's built-in logic to apply
-};
-/**
- * @typedef {{ pressed: boolean, focused: boolean, hovered?: boolean }} PressableState
- */
-
-/**
- * Maps the state object given by the React Native `Pressable` component to the set of
- * equivalent appearance names used in UDS.
- *
- * @param {PressableState} pressableState - state object passed by React Native's `<Pressable>` into
- *   render functions passed to its `style` or `children` props.
- * @param {object} [additionalState] - properties specific to the current component,
- *   such as `inactive`, `selected`, etc.
- * @returns {object}
- */
-
-export const resolvePressableState = ({
-  pressed = false,
-  focused = false,
-  hovered = false
-} = {}, additionalState) => ({ ...additionalState,
-  focus: focused,
-  hover: hovered,
-  pressed
-});
-/**
- * Takes a UDS `tokens` prop and, if it is a function, resolves it based on a state
- * object passed from the React Native `Pressable` component and optional extra properties.
- *
- * @param {object|function} tokens - UDS system tokens prop
- * @param {PressableState} pressableState - state object passed by React Native's `<Pressable>`
- * @param {object} [additionalState] - properties specific to the current component
- * @returns {object} - resolved tokens object
- */
-
-export const resolvePressableTokens = (tokens, pressableState, additionalState) => {
-  if (typeof tokens !== 'function') return tokens;
-  const udsPressableState = resolvePressableState(pressableState, additionalState);
-  return tokens(udsPressableState);
-};
-const staticStyles = StyleSheet.create(Platform.select({
-  web: {
-    notAllowed: {
-      cursor: 'not-allowed'
-    },
-    pointer: {
-      cursor: 'pointer'
-    }
-  },
-  default: {}
-}));
-/**
- * From an object of props, extracts any platform-appropriate press handler functions and wraps
- * them in a function that passes in some provided args. Allows components containing a Pressable
- * to pass in press handlers that are then called with state or values that is otherwise internal.
- */
-
-export const getPressHandlersWithArgs = (pressableProps = {}, args = []) => {
-  // Allow handlers to be passed down for blur, hover, focus, pressIn, etc
-  const pressHandlers = Object.fromEntries(Object.entries(pressProps.selectHandlers(pressableProps)).map(([key, handler]) => ({
-    [key]: (...defaultArgs) => {
-      // Pass each handler data on this button and current selection
-      handler(...args, ...defaultArgs);
-    }
-  })));
-  return pressHandlers;
-};

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

@@ -1,140 +0,0 @@
-import PropTypes from 'prop-types';
-import Platform from "react-native-web/dist/exports/Platform";
-import getPropSelector from './getPropSelector'; // React Native exports a11y prop definitions as TypeScript Interfaces, but no longer exports PropTypes
-// so we have to define them ourselves.
-
-const nativeA11yPropTypes = {
-  accessible: PropTypes.bool,
-  focusable: PropTypes.bool,
-  accessibilityElementsHidden: PropTypes.bool,
-  accessibilityHint: PropTypes.string,
-  // react-native-web ignores `accessibilityHint`
-  accessibilityIgnoresInvertColors: PropTypes.bool,
-  accessibilityLabel: PropTypes.string,
-  accessibilityRole: PropTypes.string,
-  accessibilityActions: PropTypes.arrayOf(PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    label: PropTypes.string
-  })),
-  accessibilityLiveRegion: PropTypes.oneOf(['none', 'polite', 'assertive']),
-  accessibilityState: PropTypes.shape({
-    disabled: PropTypes.bool,
-    selected: PropTypes.bool,
-    checked: PropTypes.oneOf([true, false, 'mixed']),
-    busy: PropTypes.bool,
-    expanded: PropTypes.bool
-  }),
-  accessibilityValue: PropTypes.shape({
-    min: PropTypes.number,
-    max: PropTypes.number,
-    now: PropTypes.number,
-    text: PropTypes.string
-  }),
-  accessibilityViewIsModal: PropTypes.bool,
-  importantForAccessibility: PropTypes.oneOf(['auto', 'yes', 'no', 'no-hide-descendants']),
-  onAccessibilityAction: PropTypes.func,
-  onAccessibilityEscape: PropTypes.func,
-  onAccessibilityTap: PropTypes.func
-};
-const a11yPropTypes = { ...nativeA11yPropTypes,
-  // React Native Web adds many a11y props that alias aria-* attributes
-  // Types based on https://necolas.github.io/react-native-web/docs/accessibility/
-  accessibilityActiveDescendant: PropTypes.string,
-  accessibilityAtomic: PropTypes.bool,
-  accessibilityAutoComplete: PropTypes.string,
-  accessibilityBusy: PropTypes.bool,
-  accessibilityChecked: PropTypes.oneOf([true, false, 'mixed']),
-  accessibilityColumnCount: PropTypes.number,
-  accessibilityColumnIndex: PropTypes.number,
-  accessibilityColumnSpan: PropTypes.number,
-  accessibilityControls: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-  accessibilityCurrent: PropTypes.oneOf([true, false, 'page', 'step', 'location', 'date', 'time']),
-  accessibilityDescribedBy: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-  accessibilityDetails: PropTypes.string,
-  accessibilityDisabled: PropTypes.bool,
-  accessibilityErrorMessage: PropTypes.string,
-  accessibilityExpanded: PropTypes.bool,
-  accessibilityFlowTo: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-  accessibilityHasPopup: PropTypes.string,
-  accessibilityHidden: PropTypes.bool,
-  accessibilityInvalid: PropTypes.bool,
-  accessibilityKeyShortcuts: PropTypes.string,
-  accessibilityLabelledBy: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-  accessibilityLevel: PropTypes.number,
-  accessibilityModal: PropTypes.bool,
-  accessibilityMultiline: PropTypes.bool,
-  accessibilityMultiSelectable: PropTypes.bool,
-  accessibilityOrientation: PropTypes.oneOf(['horizontal', 'vertical']),
-  accessibilityOwns: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-  accessibilityPlaceholder: PropTypes.string,
-  accessibilityPosInSet: PropTypes.number,
-  accessibilityPressed: PropTypes.bool,
-  accessibilityReadOnly: PropTypes.bool,
-  accessibilityRequired: PropTypes.bool,
-  accessibilityRoleDescription: PropTypes.string,
-  accessibilityRowCount: PropTypes.number,
-  accessibilityRowIndex: PropTypes.number,
-  accessibilityRowSpan: PropTypes.number,
-  accessibilitySelected: PropTypes.bool,
-  accessibilitySetSize: PropTypes.number,
-  accessibilitySort: PropTypes.oneOf(['ascending', 'descending', 'none', 'other']),
-  accessibilityValueMax: PropTypes.number,
-  accessibilityValueMin: PropTypes.number,
-  accessibilityValueNow: PropTypes.number,
-  accessibilityValueText: PropTypes.string
-};
-export default {
-  /**
-   * Proptypes for recognised React Native accessiblity (a11y) props.
-   * Spread this in the propTypes of components that accept React Native a11y props.
-   */
-  types: a11yPropTypes,
-
-  /**
-   * Filters a props object, returning only recognised React Native accessiblity (a11y) props.
-   *
-   * Where components accept React Native a11y props, pass { ...rest } from its props to this,
-   * then spread the returned object into the component's props (usually its outer container).
-   */
-  select: getPropSelector(a11yPropTypes, /^aria-/),
-
-  /**
-   * Use this to disable focus for elements which are visually hidden but still rendered.
-   */
-  nonFocusableProps: {
-    focusable: false,
-    // for android, and for keyboard nav in web
-    ...Platform.select({
-      web: {
-        accessibilityHidden: true // web screenreaders
-
-      },
-      android: {
-        importantForAccessibility: 'no-hide-descendants'
-      },
-      ios: {
-        accessibilityElementsHidden: true
-      }
-    })
-  },
-
-  /**
-   * Generates an object of platform-appropriate a11y props describing an item that has an
-   * ordered position in a set. Examples of usage by accessibility tools includes screenreaders
-   * saying "Item X of Y" when this item is select.
-   *
-   * @param {number} itemsCount - the number of items in the set
-   * @param {number} index - the current item's index in the set
-   * @returns {object} - platform-applicable a11y props describing this position (if available)
-   */
-  getPositionInSet: (itemsCount, index) => Platform.select({
-    web: {
-      // accessibilityPosInSet etc exists in React Native Web main branch
-      // but not in a release compatible with Expo etc; just use `aria-*`
-      'aria-setsize': itemsCount,
-      'aria-posinset': index + 1
-    },
-    // No equivalents exist on the native side
-    default: {}
-  })
-};

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

@@ -1,25 +0,0 @@
-import PropTypes from 'prop-types';
-const clickHandlerMapping = {
-  onClick: 'onPress',
-  mouseDown: 'onPressIn',
-  mouseUp: 'onPressOut'
-};
-export default {
-  /**
-   * Web-oriented HTML click handlers that may be mapped to React Native press handlers
-   */
-  types: Object.fromEntries(Object.keys(clickHandlerMapping).map(mouseName => [mouseName, PropTypes.func])),
-
-  /**
-   * Takes a set of props and converts HTML mouse click oriented event handlers to closest
-   * equivalent React Native press event handler.
-   *
-   * Use this when a component that expects press-oriented props may need to support third-party
-   * 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]) => {
-    const translatedName = clickHandlerMapping[originalName];
-    return translatedName ? [translatedName, value] : [originalName, value];
-  }))
-};

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

@@ -1,63 +0,0 @@
-/**
- * Returns a prop type validator which checks whether a prop is either a component or an array of
- * components of a given type, based on their `name` or `displayName` properties.
- * Use an array of strings for `passedName` to accept more than one component type.
- * For an array the validation fails on the first occurrence of an invalid element.
- *
- * @param {string|string[]} passedName
- * @return {function}
- */
-export default function componentPropType(passedName) {
-  const passedNames = typeof passedName === 'string' ? [passedName] : passedName;
-
-  const checkProp = (props, propName, componentName) => {
-    var _props$propName$type, _props$propName$type2;
-
-    if (props[propName] === undefined || props[propName] === null) {
-      return undefined;
-    }
-
-    if (Array.isArray(props[propName])) {
-      // Iterates through every child and try to find the first element that does not match the passed name
-      // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean
-      return props[propName].map((_, index) => checkProp(props[propName], index, componentName)).find(Boolean);
-    }
-
-    const nameInProp = ((_props$propName$type = props[propName].type) === null || _props$propName$type === void 0 ? void 0 : _props$propName$type.displayName) || ((_props$propName$type2 = props[propName].type) === null || _props$propName$type2 === void 0 ? void 0 : _props$propName$type2.name);
-
-    if (!nameInProp || !passedNames.includes(nameInProp)) {
-      const propDescription = nameInProp ? `Component ${nameInProp}` : typeof props[propName];
-      return new Error(`${componentName}: ${propDescription} was passed to \`${propName}\` prop; should be ${passedNames.join(' or ')}`);
-    }
-
-    return undefined;
-  };
-
-  const checkRequired = (props, propName, componentName) => {
-    if (props[propName] === undefined) {
-      return new Error(`The prop \`${propName}\` is marked as required in \`${componentName}\`, but its value is ${props[propName]}.`);
-    }
-
-    return undefined;
-  };
-
-  const createValidate = isRequired => {
-    if (isRequired) {
-      return (props, propName, componentName) => {
-        const checkForError = checkProp(props, propName, componentName);
-
-        if (checkForError) {
-          return checkForError;
-        }
-
-        return checkRequired(props, propName, componentName);
-      };
-    }
-
-    return checkProp;
-  };
-
-  const validate = createValidate();
-  validate.isRequired = createValidate(true);
-  return validate;
-}

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

@@ -1,2 +0,0 @@
-import PropTypes from 'prop-types';
-export default PropTypes.oneOf(['en', 'fr']);

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

@@ -1,6 +0,0 @@
-export default 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, {});
-}

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

@@ -1,59 +0,0 @@
-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/hrefAttrsProp.js

@@ -1,30 +0,0 @@
-import PropTypes from 'prop-types'; // Props related to HTML <a> anchor link attributes.
-
-const targetValues = ['_self', '_blank', '_parent', '_top'];
-export default {
-  types: {
-    // React Native Web >= 0.15.0 supports hrefAttrs prop with only these properties
-    // and passes them to <a> if an element has a href prop or accessibilityRole "link"
-    download: PropTypes.string,
-    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`
-   */
-  bundle: ({
-    download,
-    rel,
-    target,
-    ...rest
-  }) => ({
-    hrefAttrs: {
-      download,
-      rel,
-      target
-    },
-    rest
-  })
-};

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

@@ -1,19 +0,0 @@
-export * from './tokens';
-export * from './handlerProps';
-export { default as a11yProps } from './a11yProps';
-export { default as clickProps } from './clickProps';
-export { default as copyPropTypes } from './copyPropTypes';
-export { default as componentPropType } from './componentPropType';
-export { default as hrefAttrsProp } from './hrefAttrsProp';
-export { default as inputSupportsProps } from './inputSupportsProps';
-export { default as linkProps } from './linkProps';
-export { default as pressProps } from './pressProps';
-export { default as paddingProp } from './paddingProp';
-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

@@ -1,59 +0,0 @@
-import PropTypes from 'prop-types';
-export default {
-  types: {
-    /**
-     * 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.
-     */
-    validation: PropTypes.oneOf(['error', 'success'])
-  },
-  select: ({
-    copy,
-    label,
-    hint,
-    hintPosition,
-    feedback,
-    tooltip,
-    validation
-  }) => ({
-    supportsProps: {
-      copy,
-      label,
-      hint,
-      hintPosition,
-      feedback,
-      tooltip,
-      validation
-    }
-  })
-};