@telus-uds/components-base 1.7.0 → 1.8.1

package/lib/Button/ButtonGroup.js

@@ -17,6 +17,8 @@ var _ButtonBase = _interopRequireDefault(require("./ButtonBase"));
 
 var _StackView = require("../StackView");
 
+var _Fieldset = _interopRequireDefault(require("../Fieldset"));
+
 var _ViewportProvider = require("../ViewportProvider");
 
 var _ThemeProvider = require("../ThemeProvider");
@@ -45,6 +47,13 @@ const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(({
   onChange,
   readOnly = false,
   inactive = false,
+  legend,
+  tooltip,
+  hint,
+  validation,
+  feedback,
+  name: inputGroupName,
+  copy,
   accessibilityRole = maxValues === 1 ? 'radiogroup' // radiogroup is cross-platform; only web aria has generic groups
   : _Platform.default.select({
     web: 'group',
@@ -59,7 +68,8 @@ const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(({
   const stackTokens = (0, _utils.selectTokens)('StackView', themeTokens);
   const {
     direction,
-    space
+    space,
+    fieldSpace
   } = themeTokens;
   const getButtonTokens = (0, _ThemeProvider.useThemeTokensCallback)('ButtonGroupItem', tokens, variant);
   const {
@@ -81,54 +91,71 @@ const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(({
 
   if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
     throw new Error(`ButtonGroup items must have unique ${uniqueFields.join(', ')}`);
-  }
+  } // Some web screenreaders e.g. MacOS Voiceover don't handle radiogroups properly unless radio is direct child of radiogroup
+
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, { ...systemProps,
-    space: space,
-    direction: direction,
-    tokens: stackTokens,
+  const innerRole = _Platform.default.OS === 'web' && accessibilityRole === 'radiogroup' ? accessibilityRole : undefined;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.default, { ...systemProps,
     ref: ref,
-    children: items.map(({
-      label,
-      id = label,
-      accessibilityLabel,
-      ref: itemRef,
-      ...itemRest
-    }, index) => {
-      const isSelected = currentValues.includes(id); // Pass an object of relevant component state as first argument for any passed-in press handlers
-
-      const pressHandlers = (0, _pressability.getPressHandlersWithArgs)(rest, [{
-        id,
+    name: inputGroupName,
+    legend: legend,
+    tooltip: tooltip,
+    hint: hint,
+    space: fieldSpace,
+    feedback: feedback,
+    readOnly: readOnly,
+    inactive: inactive,
+    validation: validation,
+    accessibilityRole: accessibilityRole,
+    ...selectProps(rest),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {
+      accessibilityRole: innerRole,
+      space: space,
+      direction: direction,
+      tokens: stackTokens,
+      ref: ref,
+      children: items.map(({
         label,
-        currentValues
-      }]);
-
-      const handlePress = event => {
-        if (pressHandlers.onPress) pressHandlers.onPress(event);
-        toggleOneValue(id, event);
-      };
-
-      const itemA11y = {
-        accessibilityState: {
-          checked: isSelected
-        },
-        accessibilityRole: itemA11yRole,
+        id = label,
         accessibilityLabel,
-        ..._utils.a11yProps.getPositionInSet(items.length, index)
-      }; // Ensure button is direct child of group as MacOS voiceover only applies "X of Y" to
-      // "radio" if it's a direct child of "radiogroup", even if aria-posinset etc exists
-
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
         ref: itemRef,
-        ...pressHandlers,
-        onPress: handlePress,
-        tokens: getButtonTokens,
-        selected: isSelected,
-        inactive: inactive,
-        ...itemA11y,
-        ...selectItemProps(itemRest),
-        children: label
-      }, id);
+        ...itemRest
+      }, index) => {
+        const isSelected = currentValues.includes(id); // Pass an object of relevant component state as first argument for any passed-in press handlers
+
+        const pressHandlers = (0, _pressability.getPressHandlersWithArgs)(rest, [{
+          id,
+          label,
+          currentValues
+        }]);
+
+        const handlePress = event => {
+          if (pressHandlers.onPress) pressHandlers.onPress(event);
+          toggleOneValue(id, event);
+        };
+
+        const itemA11y = {
+          accessibilityState: {
+            checked: isSelected
+          },
+          accessibilityRole: itemA11yRole,
+          accessibilityLabel,
+          ..._utils.a11yProps.getPositionInSet(items.length, index)
+        }; // Ensure button is direct child of group as MacOS voiceover only applies "X of Y" to
+        // "radio" if it's a direct child of "radiogroup", even if aria-posinset etc exists
+
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+          ref: itemRef,
+          ...pressHandlers,
+          onPress: handlePress,
+          tokens: getButtonTokens,
+          selected: isSelected,
+          inactive: inactive,
+          ...itemA11y,
+          ...selectItemProps(itemRest),
+          children: label
+        }, id);
+      })
     })
   });
 });
@@ -192,7 +219,53 @@ ButtonGroup.propTypes = { ...selectedSystemPropTypes,
    * managing its own selected state, a default set of selections may be provided.
    * Changing the `initialValues` does not change the user's selections.
    */
-  initialValues: _propTypes.default.arrayOf(_propTypes.default.string)
+  initialValues: _propTypes.default.arrayOf(_propTypes.default.string),
+
+  /**
+   * Main text used to describe this group, used in Fieldset's Legend element.
+   */
+  legend: _propTypes.default.string,
+
+  /**
+   * Optional additional text giving more detail to help a user make a choice.
+   */
+  hint: _propTypes.default.string,
+
+  /**
+   * Optional tooltip text content to include alongside the legend and hint.
+   */
+  tooltip: _propTypes.default.string,
+
+  /**
+   * Current validation status of the group, passed to the feedback element if there is one.
+   */
+  validation: _propTypes.default.oneOf(['error', 'success']),
+
+  /**
+   * If provided, a Feedback element is rendered containing this text.
+   */
+  feedback: _propTypes.default.string,
+
+  /**
+   * If true, the buttons cannot be selected by the user and simply show their current state.
+   */
+  readOnly: _propTypes.default.bool,
+
+  /**
+   * If true, the buttons cannot be interacted with, elements are set as `disabled` and if the
+   * theme supports `inactive` appearances rules, these are applied.
+   */
+  inactive: _propTypes.default.bool,
+
+  /**
+   * On Web, this is passed to the `name` attribute of the fieldset.
+   */
+  name: _propTypes.default.string,
+
+  /**
+   * Sets the language of microcopy in subcomponents (e.g. Tooltip's default accessibility label).
+   */
+  copy: _propTypes.default.oneOf(['en', 'fr'])
 };
 var _default = ButtonGroup;
 exports.default = _default;

package/lib/Checkbox/CheckboxGroup.js

@@ -236,18 +236,18 @@ CheckboxGroup.propTypes = { ...selectedSystemPropTypes,
   onChange: _propTypes.default.func,
 
   /**
-   * If true, the radio cards cannot be selected by the user and simply show their current state.
+   * If true, the checkboxes cannot be selected by the user and simply show their current state.
    */
   readOnly: _propTypes.default.bool,
 
   /**
-   * If true, the checkbox cannot be interacted with, elements are set as `disabled` and if the
+   * If true, the checkboxes cannot be interacted with, elements are set as `disabled` and if the
    * theme supports `inactive` appearances rules, these are applied.
    */
   inactive: _propTypes.default.bool,
 
   /**
-   * On Web, this is passed to the `name` attribute of the fieldset and each radio input.
+   * On Web, this is passed to the `name` attribute of the fieldset and each checkbox input.
    */
   name: _propTypes.default.string
 };

package/lib/ExpandCollapse/Panel.js

@@ -97,7 +97,7 @@ const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)(({
     }
   };
 
-  const animatedStyles = (0, _utils.useVerticalExpandAnimation)({
+  const [animatedStyles, animatedRef] = (0, _utils.useVerticalExpandAnimation)({
     containerHeight,
     isExpanded,
     tokens: themeTokens
@@ -118,6 +118,7 @@ const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)(({
       onPress: handleControlPress,
       children: control
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
+      ref: animatedRef,
       style: [overflowContainerStyles, animatedStyles, staticStyles.itemsContainer],
       ...focusabilityProps,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {

package/lib/Fieldset/Fieldset.js

@@ -38,6 +38,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * Follows the same theming and most of the same props as InputSupports.
  */
 const Fieldset = /*#__PURE__*/(0, _react.forwardRef)(({
+  copy = 'en',
   space,
   feedback,
   feedbackPosition = 'top',
@@ -64,6 +65,7 @@ const Fieldset = /*#__PURE__*/(0, _react.forwardRef)(({
   });
   const legendContent = legend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Legend.default, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
+      copy: copy,
       label: legend,
       hint: hint,
       hintPosition: hintPosition,
@@ -100,6 +102,11 @@ Fieldset.displayName = 'Fieldset';
 Fieldset.propTypes = {
   children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
 
+  /**
+   * Whether the English or French copy will be used (e.g. for accessibility labels).
+   */
+  copy: _propTypes.default.oneOf(['en', 'fr']),
+
   /**
    * The accessibility role of the `<fieldset>` element itself. Other React Native accessibility
    * props are not supported because there is not an appropriate counterpart for Fieldsets.

package/lib/InputLabel/InputLabel.js

@@ -56,6 +56,7 @@ const selectGapStyles = ({
 });
 
 const InputLabel = /*#__PURE__*/(0, _react.forwardRef)(({
+  copy = 'en',
   label,
   forId,
   hint,
@@ -89,7 +90,8 @@ const InputLabel = /*#__PURE__*/(0, _react.forwardRef)(({
           height: themeTokens.fontSize * themeTokens.lineHeight
         }],
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
-          content: tooltip
+          content: tooltip,
+          copy: copy
         })
       })]
     }), hint && !isHintInline && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
@@ -102,6 +104,11 @@ const InputLabel = /*#__PURE__*/(0, _react.forwardRef)(({
 InputLabel.displayName = 'InputLabel';
 InputLabel.propTypes = { ...selectedSystemPropTypes,
 
+  /**
+   * Whether the English or French copy will be used (e.g. for accessibility labels).
+   */
+  copy: _propTypes.default.oneOf(['en', 'fr']),
+
   /**
    * The input label.
    */

package/lib/InputSupports/InputSupports.js

@@ -29,6 +29,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const InputSupports = /*#__PURE__*/(0, _react.forwardRef)(({
   children,
+  copy = 'en',
   label,
   hint,
   hintPosition = 'inline',
@@ -54,6 +55,7 @@ const InputSupports = /*#__PURE__*/(0, _react.forwardRef)(({
     space: space,
     ref: ref,
     children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
+      copy: copy,
       label: label,
       hint: hint,
       hintPosition: hintPosition,
@@ -74,6 +76,11 @@ InputSupports.displayName = 'InputSupports';
 InputSupports.propTypes = {
   children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
 
+  /**
+   * Whether the English or French copy will be used (e.g. for accessibility labels).
+   */
+  copy: _propTypes.default.oneOf(['en', 'fr']),
+
   /**
    * The input label.
    */

package/lib/Notification/Notification.js

@@ -199,7 +199,7 @@ Notification.propTypes = { ...selectedSystemPropTypes,
   dismissible: _propTypes.default.bool,
 
   /**
-   * Select english or french copy for the accessible label of the dismiss button.
+   * Select English or French copy for the accessible label of the dismiss button.
    */
   copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr']), _propTypes.default.shape({
     dismiss: _propTypes.default.string

package/lib/Radio/RadioGroup.js

@@ -52,7 +52,7 @@ const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([
  * ### Uncontrolled version
  *
  * If the RadioGroup manages its own state, you can use `initialCheckedId` prop to provide the initial value.
- * Whenever the radio card gets toggled, it calls the `onChange` callback with the new value (string).
+ * Whenever the radio gets toggled, it calls the `onChange` callback with the new value (string).
  *
  * ### Use in forms
  *
@@ -83,6 +83,7 @@ const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([
  */
 
 const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(({
+  copy = 'en',
   tokens,
   radioTokens,
   variant,
@@ -151,6 +152,7 @@ const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(({
     }, radioId);
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.default, {
+    copy: copy,
     ref: ref,
     name: inputGroupName,
     legend: legend,
@@ -171,6 +173,11 @@ const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(({
 RadioGroup.displayName = 'RadioGroup';
 RadioGroup.propTypes = { ...selectedSystemPropTypes,
 
+  /**
+   * Whether the English or French copy will be used (e.g. for accessibility labels).
+   */
+  copy: _propTypes.default.oneOf(['en', 'fr']),
+
   /**
    * Optional theme token overrides for the outer RadioGroup component
    */
@@ -222,12 +229,12 @@ RadioGroup.propTypes = { ...selectedSystemPropTypes,
   feedback: _propTypes.default.string,
 
   /**
-   * If provided, the radio card with this id is selected on first render.
+   * If provided, the radio with this id is selected on first render.
    */
   initialCheckedId: _propTypes.default.string,
 
   /**
-   * If not undefined, the radio card with this id is selected (or none is selected if `null`), and the
+   * If not undefined, the radio with this id is selected (or none is selected if `null`), and the
    * element's selection state will be controlled by its parent using the `onChange` function.
    */
   checkedId: _propTypes.default.string,
@@ -239,12 +246,12 @@ RadioGroup.propTypes = { ...selectedSystemPropTypes,
   onChange: _propTypes.default.func,
 
   /**
-   * If true, the radio cards cannot be selected by the user and simply show their current state.
+   * If true, the radios cannot be selected by the user and simply show their current state.
    */
   readOnly: _propTypes.default.bool,
 
   /**
-   * If true, the radio card cannot be interacted with, elements are set as `disabled` and if the
+   * If true, the radios cannot be interacted with, elements are set as `disabled` and if the
    * theme supports `inactive` appearances rules, these are applied.
    */
   inactive: _propTypes.default.bool,

package/lib/RadioCard/RadioCardGroup.js

@@ -83,6 +83,7 @@ const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([
  */
 
 const RadioCardGroup = /*#__PURE__*/(0, _react.forwardRef)(({
+  copy = 'en',
   tokens,
   radioCardTokens,
   variant,
@@ -128,6 +129,7 @@ const RadioCardGroup = /*#__PURE__*/(0, _react.forwardRef)(({
   }
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.default, {
+    copy: copy,
     ref: ref,
     name: inputGroupName,
     legend: legend,
@@ -177,6 +179,11 @@ const RadioCardGroup = /*#__PURE__*/(0, _react.forwardRef)(({
 RadioCardGroup.displayName = 'RadioCardGroup';
 RadioCardGroup.propTypes = { ...selectedSystemPropTypes,
 
+  /**
+   * Whether the English or French copy will be used (e.g. for accessibility labels).
+   */
+  copy: _propTypes.default.oneOf(['en', 'fr']),
+
   /**
    * Optional theme token overrides for the outer RadioCardGroup component
    */

package/lib/Search/Search.js

@@ -240,7 +240,7 @@ Search.propTypes = { ...selectedContainerPropTypes,
   accessibilityLabel: _propTypes.default.string,
 
   /**
-   * Select english or french copy for the accessible labels.
+   * Select English or French copy for the accessible labels.
    * You may also pass in a custom dictionary object.
    */
   copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr']), _propTypes.default.shape({

package/lib/Skeleton/Skeleton.js

@@ -68,13 +68,23 @@ const Skeleton = /*#__PURE__*/(0, _react.forwardRef)(({
   tokens,
   variant,
   size,
+  sizeIndex = size,
+  sizePixels,
   characters,
   lines,
   shape = 'line',
   ...rest
 }, ref) => {
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Skeleton', tokens, variant);
-  const skeletonHeight = (0, _utils.useSpacingScale)(size || themeTokens.size);
+  const pixels = (0, _utils.useResponsiveProp)(sizePixels);
+  const spacingScaleValue = typeof pixels === 'number' ? // Size by an exact number of pixels
+  {
+    options: {
+      size: pixels
+    }
+  } : // Size by an index on the spacing scale (getting default index from theme if none provided)
+  sizeIndex || themeTokens.size;
+  const skeletonHeight = (0, _utils.useSpacingScale)(spacingScaleValue);
   const nativeAnimation = (0, _useSkeletonNativeAnimation.default)();
 
   const getAnimationBaseOnPlatform = () => {
@@ -132,9 +142,45 @@ Skeleton.displayName = 'Skeleton';
 Skeleton.propTypes = { ...selectedSystemPropTypes,
   tokens: (0, _utils.getTokensPropType)('Skeleton'),
   variant: _utils.variantProp.propType,
-  size: _propTypes.default.number,
+
+  /**
+   * Sets the size of Skeleton lines or shape according to the theme's spacing scale. For example, size={1} gives the smallest non-zero theme-defined spacing size.
+   *
+   * May also accept an object with responsive viewport keys or spacing scale options - see `useSpacingScale` for details.
+   */
+  sizeIndex: _utils.spacingProps.types.spacingValue,
+
+  /**
+   * @deprecated alias for `sizeIndex`
+   */
+  size: _utils.spacingProps.types.spacingValue,
+
+  /**
+   * Sets the size of Skeleton lines or shape to an exact number of pixels. Use when it's necessary to exactly match sizes of images or other boxes.
+   *
+   * Accepts a number or an object with responsive viewport keys, e.g. { xs: 32, lg: 64 } would be 32px at xs, sm and md and 64 at lg and xl viewports.
+   */
+  sizePixels: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.number),
+
+  /**
+   * Determines the width of simulated lines of text if the Skeleton's shape is 'line' (the default shape).
+   *
+   * Only has any affect if shape is line (the default). If unset, takes a default value from the theme.
+   */
   characters: _propTypes.default.number,
+
+  /**
+   * Determines how many Skeleton items are rendered (default 1).
+   *
+   * Recommended usage is to simulate paragraphs of text when Skeleton's shape is 'line' (the default shape).
+   *
+   * The amount of spacing between multiple lines is controlled by theme tokens.
+   */
   lines: _propTypes.default.number,
+
+  /**
+   * Determines if the skeleton should resemble lines of text (default), a circle, or a square box with themed rounded corners.
+   */
   shape: _propTypes.default.oneOf(['line', 'circle', 'box'])
 };
 var _default = Skeleton;

package/lib/ToggleSwitch/ToggleSwitch.js

@@ -107,6 +107,7 @@ const selectLabelTokens = ({
 });
 
 const ToggleSwitch = /*#__PURE__*/(0, _react.forwardRef)(({
+  copy = 'en',
   value,
   initialValue,
   onChange,
@@ -143,6 +144,7 @@ const ToggleSwitch = /*#__PURE__*/(0, _react.forwardRef)(({
     children: [Boolean(label) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: [selectLabelStyles(themeTokens), staticStyles.containText],
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
+        copy: copy,
         forId: inputId,
         label: label,
         tokens: selectLabelTokens(themeTokens),
@@ -191,6 +193,11 @@ const ToggleSwitch = /*#__PURE__*/(0, _react.forwardRef)(({
 });
 ToggleSwitch.displayName = 'ToggleSwitch';
 ToggleSwitch.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Whether the English or French copy will be used (e.g. for accessibility labels).
+   */
+  copy: _propTypes.default.oneOf(['en', 'fr']),
   tokens: (0, _utils.getTokensPropType)('ToggleSwitch'),
   variant: _utils.variantProp.propType,
 

package/lib/ToggleSwitch/ToggleSwitchGroup.js

@@ -36,6 +36,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
 const ToggleSwitchGroup = /*#__PURE__*/(0, _react.forwardRef)(({
+  copy = 'en',
   variant,
   tokens,
   items = [],
@@ -112,6 +113,7 @@ const ToggleSwitchGroup = /*#__PURE__*/(0, _react.forwardRef)(({
       ..._utils.a11yProps.getPositionInSet(items.length, index)
     };
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToggleSwitch.default, {
+      copy: copy,
       id: id,
       ref: itemRef,
       onChange: handleChange,
@@ -143,6 +145,11 @@ const ToggleSwitchGroup = /*#__PURE__*/(0, _react.forwardRef)(({
 });
 ToggleSwitchGroup.displayName = 'ToggleSwitchGroup';
 ToggleSwitchGroup.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Whether the English or French copy will be used (e.g. for accessibility labels).
+   */
+  copy: _propTypes.default.oneOf(['en', 'fr']),
   tokens: (0, _utils.getTokensPropType)('ToggleSwitchGroup'),
   variant: _utils.variantProp.propType,
 

package/lib/Tooltip/Tooltip.js

@@ -330,7 +330,7 @@ Tooltip.propTypes = { ...selectedSystemPropTypes,
   content: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
 
   /**
-   * Select english or french copy for the accessible label.
+   * Select English or French copy for the accessible label.
    */
   copy: _propTypes.default.oneOf(['en', 'fr']),
 

package/lib/utils/animation/useVerticalExpandAnimation.js

@@ -22,14 +22,25 @@ function useVerticalExpandAnimation({
   isExpanded,
   tokens
 }) {
+  const [isAnimating, setIsAnimating] = (0, _react.useState)(false);
   const expandAnimatedValue = (0, _react.useRef)(new _Animated.default.Value(0)).current;
+  const elementRef = (0, _react.useRef)(null);
   const {
     expandDuration,
     collapseDuration
-  } = tokens;
+  } = tokens; // Treat as animating from when expanded state changes, until animation completes
+
+  (0, _react.useEffect)(() => setIsAnimating(true), [isExpanded]);
   (0, _react.useEffect)(() => {
+    const onComplete = () => !isExpanded && setIsAnimating(false);
+
     if (_Platform.default.OS === 'web') {
-      return;
+      if (!elementRef.current) return () => {}; // React Native Web does not pass `onTransitionEnd` through, must attach manually.
+      // https://github.com/necolas/react-native-web/pull/1713
+
+      const element = elementRef.current;
+      element.addEventListener('transitionend', onComplete);
+      return () => element.removeEventListener('transitionend', onComplete);
     }
 
     const animationConfig = {
@@ -39,25 +50,27 @@ function useVerticalExpandAnimation({
       useNativeDriver: false
     };
 
-    _Animated.default.timing(expandAnimatedValue, animationConfig).start();
-  }, [isExpanded, expandAnimatedValue, containerHeight, expandDuration, collapseDuration]);
-  let containerStyles; // don't visually collapse the container until we have it measured
+    const animation = _Animated.default.timing(expandAnimatedValue, animationConfig);
+
+    animation.start(onComplete);
+    return () => animation.stop();
+  }, [isExpanded, expandAnimatedValue, containerHeight, expandDuration, collapseDuration]); // Without `visibility: 'hidden', descendents are focusable on web even when collapsed
+
+  const containerStyles = !isExpanded && !isAnimating ? {
+    visibility: 'hidden'
+  } : {}; // don't visually collapse the container until we have it measured
 
   if (containerHeight !== null) {
     if (_Platform.default.OS === 'web') {
       const transitionDuration = isExpanded ? expandDuration : collapseDuration;
-      containerStyles = {
-        transition: `height ${transitionDuration}ms ease-in-out`,
-        height: isExpanded ? containerHeight : 0
-      };
+      containerStyles.transition = `height ${transitionDuration}ms ease-in-out`;
+      containerStyles.height = isExpanded ? containerHeight : 0;
     } else {
-      containerStyles = {
-        height: expandAnimatedValue
-      };
+      containerStyles.height = expandAnimatedValue;
     }
   }
 
-  return containerStyles;
+  return [containerStyles, elementRef];
 }
 
 var _default = useVerticalExpandAnimation;

package/lib/utils/props/inputSupportsProps.js

@@ -11,6 +11,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 var _default = {
   types: {
+    /**
+     * Whether the English or French copy will be used (e.g. for accessibility labels).
+     */
+    copy: _propTypes.default.oneOf(['en', 'fr']),
+
     /**
      * The input label.
      */
@@ -43,6 +48,7 @@ var _default = {
     validation: _propTypes.default.oneOf(['error', 'success'])
   },
   select: ({
+    copy,
     label,
     hint,
     hintPosition,
@@ -51,6 +57,7 @@ var _default = {
     validation
   }) => ({
     supportsProps: {
+      copy,
       label,
       hint,
       hintPosition,