@telus-uds/components-base 1.19.0 → 1.21.0

package/lib/MultiSelectFilter/MultiSelectFilter.js

@@ -0,0 +1,276 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _utils = require("../utils");
+
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _Button = require("../Button");
+
+var _Checkbox = require("../Checkbox");
+
+var _Divider = _interopRequireDefault(require("../Divider"));
+
+var _FlexGrid = _interopRequireDefault(require("../FlexGrid"));
+
+var _Modal = _interopRequireDefault(require("../Modal"));
+
+var _Spacer = _interopRequireDefault(require("../Spacer"));
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+var _Typography = _interopRequireDefault(require("../Typography"));
+
+var _Link = require("../Link");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const {
+  Col,
+  Row
+} = _FlexGrid.default;
+const MultiSelectFilter = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    label,
+    id = label,
+    variant,
+    tokens,
+    items = [],
+    values,
+    initialValues,
+    maxValues,
+    onChange,
+    copy = 'en',
+    readOnly = false,
+    inactive = false,
+    rowLimit = 12,
+    ...rest
+  } = _ref;
+  const {
+    currentValues,
+    setValues
+  } = (0, _utils.useMultipleInputValues)({
+    initialValues,
+    values,
+    maxValues,
+    onChange,
+    readOnly
+  });
+  const getItemTokens = (0, _ThemeProvider.useThemeTokensCallback)('ButtonDropdown', tokens, variant);
+
+  const getButtonTokens = buttonState => (0, _utils.selectTokens)('Button', getItemTokens(buttonState));
+
+  const getCopy = (0, _utils.useCopy)({
+    dictionary: _dictionary.default,
+    copy
+  });
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const [checkedIds, setCheckedIds] = (0, _react.useState)(currentValues !== null && currentValues !== void 0 ? currentValues : []);
+  const colSize = items.length > rowLimit ? 2 : 1;
+  const isSelected = currentValues.length > 0;
+  const uniqueFields = ['id', 'label'];
+
+  if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
+    throw new Error("MultiSelectFilter items must have unique ".concat(uniqueFields.join(', ')));
+  } // Pass an object of relevant component state as first argument for any passed-in press handlers
+
+
+  const pressHandlers = (0, _utils.getPressHandlersWithArgs)(rest, [{
+    id,
+    label,
+    currentValues
+  }]);
+
+  const handleChange = event => {
+    if (pressHandlers.onPress) pressHandlers === null || pressHandlers === void 0 ? void 0 : pressHandlers.onPress(event);
+    setIsOpen(true);
+  };
+
+  const onApply = e => {
+    setValues(e);
+    setIsOpen(false);
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Modal.default, {
+      isOpen: isOpen,
+      onClose: () => setIsOpen(false),
+      variant: {
+        width: colSize > 1 ? 'size576' : 's'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          variant: {
+            size: 'h4'
+          },
+          children: getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+        space: 4
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+        space: 1
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        scroll: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
+          distribute: "between",
+          children: [...Array(colSize).keys()].map(i => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Col, {
+            xs: 12 / colSize,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.CheckboxGroup, {
+              items: items.slice(i * rowLimit, (i + 1) * rowLimit),
+              checkedIds: checkedIds,
+              onChange: e => setCheckedIds(e, i)
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+              size: 4
+            })]
+          }, i))
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+        variant: {
+          width: 'full',
+          color: 'E3E6E8',
+          decorative: true,
+          weight: 'thin'
+        },
+        space: 4
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+          direction: "row",
+          space: 3,
+          tokens: {
+            alignItems: 'center'
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+            onPress: () => onApply(checkedIds),
+            variant: {
+              size: 'small',
+              priority: 'high'
+            },
+            children: getCopy('applyButtonLabel')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.TextButton, {
+              onPress: () => setCheckedIds([]),
+              children: getCopy('clearButtonLabel')
+            })
+          })]
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.ButtonDropdown, {
+      ref: ref,
+      ...pressHandlers,
+      value: isOpen,
+      selected: isSelected,
+      label: label,
+      onChange: handleChange,
+      tokens: getButtonTokens,
+      inactive: inactive
+    }, id)]
+  });
+});
+MultiSelectFilter.displayName = 'MultiSelectFilter';
+MultiSelectFilter.propTypes = {
+  /**
+   * The text displayed to the user in a ButtonDropdown.
+   */
+  label: _propTypes.default.string.isRequired,
+
+  /**
+   * An optional unique string may be provided to identify the ButtonDropdown.
+   * If not provided, the label is used.
+   */
+  id: _propTypes.default.string,
+
+  /**
+   * Sets the variant for ButtonDropdown element.
+   */
+  variant: _utils.variantProp.propType,
+
+  /**
+   * Sets the tokens for ButtonDropdown element.
+   */
+  tokens: (0, _utils.getTokensPropType)('ButtonDropdown'),
+
+  /**
+   * The options a user may select.
+   */
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+    /**
+     * The text displayed to the user with a checkbox, describing this option.
+     */
+    label: _propTypes.default.string.isRequired,
+
+    /**
+     * An optional unique string may be provided to identify this option.
+     * If not provided, the label is used.
+     */
+    id: _propTypes.default.string
+  })),
+
+  /**
+   * If the selected item(s) in the checkbox group(s) are to be controlled externally by
+   * a parent component, pass an array of strings as well as an `onChange` handler.
+   * Passing an array for "values" makes the MultiSelectFilter a "controlled" component that
+   * expects its state to be handled via `onChange` and so doesn't handle it itself.
+   */
+  values: _propTypes.default.arrayOf(_propTypes.default.string),
+
+  /**
+   * If `values` is not passed, making the MultiSelectFilter an "uncontrolled" component
+   * 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),
+
+  /**
+   * If provided, sets a maximum number of items a user may select at once.
+   */
+  maxValues: _propTypes.default.number,
+
+  /**
+   * If provided, this function is called when the current selection is changed
+   * and is passed an array of the `id`s of all currently selected `items`.
+   */
+  onChange: _propTypes.default.func,
+
+  /**
+   * Select English or French copy for the accessible label.
+   */
+  copy: _propTypes.default.oneOf(['en', 'fr']),
+
+  /**
+   * If true, the ButtonDropdown cannot be selected by the user and simply show their current state.
+   */
+  readOnly: _propTypes.default.string,
+
+  /**
+   * If true, the MultiSelectFilter cannot be interacted with, ButtonDropdown is
+   * set as `disabled` and if the theme supports `inactive` appearances rules, these
+   * are applied.
+   */
+  inactive: _propTypes.default.string,
+
+  /**
+   * Sets the maximum number of items in one column. If number of items are more
+   * than the `rowLimit`, they will be rendered in 2 columns.
+   */
+  rowLimit: _propTypes.default.number
+};
+var _default = MultiSelectFilter;
+exports.default = _default;

package/lib/MultiSelectFilter/dictionary.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  en: {
+    filterByLabel: 'Filter by %{filterCategory}:',
+    applyButtonLabel: 'Apply',
+    clearButtonLabel: 'Clear'
+  },
+  fr: {
+    filterByLabel: 'Filtrer par %{filterCategory}:',
+    applyButtonLabel: 'Appliquer',
+    clearButtonLabel: 'Effacer'
+  }
+};
+exports.default = _default;

package/lib/MultiSelectFilter/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _MultiSelectFilter = _interopRequireDefault(require("./MultiSelectFilter"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _MultiSelectFilter.default;
+exports.default = _default;

package/lib/Search/Search.js

@@ -133,8 +133,11 @@ const Search = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   };
 
   const handleClear = event => {
+    var _ref$current;
+
     setValue('', event);
-    if (onClear !== undefined) onClear('', event);
+    onClear === null || onClear === void 0 ? void 0 : onClear('', event);
+    ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
   };
 
   const handleFocus = event => {

package/lib/Select/Picker.native.js

@@ -19,6 +19,8 @@ var _utils = require("../utils");
 
 var _Group = _interopRequireDefault(require("./Group"));
 
+var _constants = require("./constants");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -27,32 +29,33 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-// styling of the native input is very limited, most of the styles have to be applied to an additional View
+// Styling of the native input is very limited, most of the styles have to be applied to an additional View
 const selectAndroidInputStyles = _ref => {
   let {
     height = 0,
-    paddingBottom = 0,
-    paddingTop = 0,
-    borderWidth = 0,
     color
   } = _ref;
   return {
-    height: height - paddingTop - paddingBottom - 2 * borderWidth,
+    height,
+    paddingBottom: 0,
+    paddingTop: 0,
     color
   };
-}; // the native input has a side padding of 8px, which can't be adjusted, so we have to account for that in the container
+}; // The native input has a side padding of 8px, which can't be adjusted, so we have to account for that in the container
 
 
 const selectAndroidContainerStyles = _ref2 => {
   let {
-    paddingLeft = 0,
-    paddingRight = 0,
+    paddingLeft = _constants.ANDROID_DEFAULT_PADDING,
+    paddingRight = _constants.ANDROID_DEFAULT_PADDING,
     ...rest
   } = _ref2;
-  return {
-    paddingLeft: paddingLeft > 8 ? paddingLeft - 8 : 0,
-    paddingRight: paddingRight > 8 ? paddingRight - 8 : 0,
-    ...rest
+  return { ...rest,
+    paddingLeft: paddingLeft > _constants.ANDROID_HORIZONTAL_PADDING_OFFSET ? paddingLeft - _constants.ANDROID_HORIZONTAL_PADDING_OFFSET : _constants.ANDROID_DEFAULT_PADDING,
+    paddingRight: paddingRight > _constants.ANDROID_HORIZONTAL_PADDING_OFFSET ? paddingRight - _constants.ANDROID_HORIZONTAL_PADDING_OFFSET : _constants.ANDROID_DEFAULT_PADDING,
+    paddingBottom: _constants.ANDROID_DEFAULT_PADDING,
+    paddingTop: _constants.ANDROID_DEFAULT_PADDING,
+    height: rest.height + _constants.ANDROID_HEIGHT_OFFSET
   };
 };
 
@@ -69,7 +72,7 @@ const Picker = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     ...rest
   } = _ref3;
 
-  // ungroup items, since there's no way to support groups on native
+  // Ungroup items, since there's no way to support groups on native
   const flatChildren = _react.Children.toArray(children).flatMap(child => {
     if (child.type === _Group.default) {
       return child.props.children;

package/lib/Select/Select.js

@@ -23,6 +23,8 @@ var _Picker = _interopRequireDefault(require("./Picker"));
 
 var _InputSupports = _interopRequireDefault(require("../InputSupports"));
 
+var _constants = require("./constants");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -166,7 +168,11 @@ const selectValidationIconContainerStyles = _ref6 => {
   } = _ref6;
   return {
     paddingRight: icon ? paddingRight + iconSize : paddingRight,
-    paddingBottom
+    ...(_Platform.default.OS === 'android' ? {
+      paddingBottom: paddingBottom + _constants.ANDROID_VALIDATION_ICON_CONTAINER_OFFSET
+    } : {
+      paddingBottom
+    })
   };
 };
 /**

package/lib/Select/constants.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ANDROID_VALIDATION_ICON_CONTAINER_OFFSET = exports.ANDROID_HORIZONTAL_PADDING_OFFSET = exports.ANDROID_HEIGHT_OFFSET = exports.ANDROID_DEFAULT_PADDING = void 0;
+// Because Android
+const ANDROID_VALIDATION_ICON_CONTAINER_OFFSET = 5;
+exports.ANDROID_VALIDATION_ICON_CONTAINER_OFFSET = ANDROID_VALIDATION_ICON_CONTAINER_OFFSET;
+const ANDROID_HEIGHT_OFFSET = 12;
+exports.ANDROID_HEIGHT_OFFSET = ANDROID_HEIGHT_OFFSET;
+const ANDROID_HORIZONTAL_PADDING_OFFSET = 8;
+exports.ANDROID_HORIZONTAL_PADDING_OFFSET = ANDROID_HORIZONTAL_PADDING_OFFSET;
+const ANDROID_DEFAULT_PADDING = 0;
+exports.ANDROID_DEFAULT_PADDING = ANDROID_DEFAULT_PADDING;

package/lib/StepTracker/Step.js

@@ -203,7 +203,8 @@ const Step = _ref7 => {
       space: 0,
       tokens: {
         alignItems: 'center',
-        flexGrow: 0
+        flexGrow: 0,
+        justifyContent: 'center'
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: [staticStyles.connector, !isFirst && selectConnectorStyles(themeTokens, isActive)]

package/lib/TextInput/TextInput.js

@@ -7,13 +7,15 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _utils = require("../utils");
 
 var _InputSupports = _interopRequireDefault(require("../InputSupports"));
 
 var _TextInputBase = _interopRequireDefault(require("./TextInputBase"));
 
-var _propTypes = _interopRequireDefault(require("./propTypes"));
+var _propTypes2 = _interopRequireDefault(require("./propTypes"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -79,7 +81,12 @@ const TextInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
 });
 TextInput.displayName = 'TextInput';
 TextInput.propTypes = { ...selectedSystemPropTypes,
-  ..._propTypes.default,
+  ..._propTypes2.default,
+
+  /**
+   * A callback which if provided will get a clear button rendered and will be called whenever that button gets pressed.
+   */
+  onClear: _propTypes.default.func,
   tokens: (0, _utils.getTokensPropType)('TextInput'),
   variant: _utils.variantProp.propType
 };

package/lib/TextInput/TextInputBase.js

@@ -21,8 +21,12 @@ var _ThemeProvider = require("../ThemeProvider");
 
 var _StackView = _interopRequireDefault(require("../StackView"));
 
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+
 var _utils = require("../utils");
 
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -160,12 +164,14 @@ const selectButtonsContainerStyle = _ref5 => {
 const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
   let {
     buttons = [],
+    copy = 'en',
     height,
     inactive,
     initialValue,
     onBlur,
     onChange,
     onChangeText,
+    onClear,
     onFocus,
     onMouseOut,
     onMouseOver,
@@ -200,17 +206,22 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     if (typeof onMouseOut === 'function') onMouseOut(event);
   };
 
+  const defaultRef = (0, _react.useRef)();
+  const inputRef = ref !== null && ref !== void 0 ? ref : defaultRef;
   const {
     currentValue,
+    resetValue,
     setValue,
-    isControlled
+    isControlled,
+    isDirty
   } = (0, _utils.useInputValue)({
     value,
     initialValue,
+    inputRef,
     onChange,
     readOnly
   });
-  const element = ref === null || ref === void 0 ? void 0 : ref.current;
+  const element = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
   (0, _react.useEffect)(() => {
     if (_Platform.default.OS === 'web' && pattern && element) {
       // React Native Web doesn't support `pattern`, so we have to attach it via a ref,
@@ -234,9 +245,35 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
   };
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('TextInput', tokens, variant, states);
   const {
-    icon: IconComponent,
-    buttonsGap
+    buttonsGap,
+    clearButtonIcon: ClearButtonIcon,
+    icon: IconComponent
   } = themeTokens;
+  const buttonsGapSize = (0, _utils.useSpacingScale)(buttonsGap);
+  const getCopy = (0, _utils.useCopy)({
+    dictionary: _dictionary.default,
+    copy
+  });
+
+  if (onClear && isDirty) {
+    const handleClear = event => {
+      var _inputRef$current;
+
+      onClear === null || onClear === void 0 ? void 0 : onClear(event);
+      resetValue(event);
+      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+    };
+
+    buttons === null || buttons === void 0 ? void 0 : buttons.unshift( /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+      accessibilityLabel: getCopy('clearButtonAccessibilityLabel'),
+      icon: ClearButtonIcon,
+      onPress: handleClear,
+      variant: {
+        compact: true
+      }
+    }, "clear"));
+  }
+
   const inputProps = { ...selectProps(rest),
     editable: !inactive,
     onFocus: handleFocus,
@@ -248,9 +285,7 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     // currentValue is being updated even if the input is not controlled, passing it down to the
     // Input could lead to changing its state from uncontrolled to controlled
     value: isControlled ? currentValue : undefined
-  }; // Get the actual gap value for the current viewport
-
-  const buttonsGapSize = (0, _utils.useSpacingScale)(buttonsGap);
+  };
   const {
     themeOptions
   } = (0, _ThemeProvider.useTheme)();
@@ -260,7 +295,7 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     style: selectOuterBorderStyles(themeTokens),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInput.default, {
-      ref: ref,
+      ref: inputRef,
       style: nativeInputStyle,
       ...inputProps
     }), IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
@@ -284,12 +319,21 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
 TextInputBase.displayName = 'TextInputBase';
 TextInputBase.propTypes = { ...selectedSystemPropTypes,
   buttons: _propTypes.default.arrayOf(_propTypes.default.node),
+
+  /**
+   * 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({
+    clearButtonAccessibilityLabel: _propTypes.default.string
+  })]),
   height: _propTypes.default.number,
   inactive: _propTypes.default.bool,
   initialValue: _propTypes.default.string,
   onBlur: _propTypes.default.func,
   onChange: _propTypes.default.func,
   onChangeText: _propTypes.default.func,
+  onClear: _propTypes.default.func,
   onFocus: _propTypes.default.func,
   onMouseOut: _propTypes.default.func,
   onMouseOver: _propTypes.default.func,

package/lib/TextInput/dictionary.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  en: {
+    clearButtonAccessibilityLabel: 'Clear'
+  },
+  fr: {
+    clearButtonAccessibilityLabel: 'Effacer'
+  }
+};
+exports.default = _default;

package/lib/ThemeProvider/ThemeProvider.js

@@ -25,19 +25,29 @@ const uninitialisedError = new Error('Theme context used outside of ThemeProvide
 exports.uninitialisedError = uninitialisedError;
 const ThemeContext = /*#__PURE__*/(0, _react.createContext)(uninitialisedError);
 exports.ThemeContext = ThemeContext;
-const ThemeSetterContext = /*#__PURE__*/(0, _react.createContext)(uninitialisedError);
+const ThemeSetterContext = /*#__PURE__*/(0, _react.createContext)(uninitialisedError); // These options default to `true` in v1.x to match legacy defaults and avoid breaking changes.
+// This should change in future major releases to become "opt-in" legacy support.
+
 exports.ThemeSetterContext = ThemeSetterContext;
+const defaultThemeOptions = {
+  // TODO: switch `forceAbsoluteFontSizing` to be false by default in the next major version
+  forceAbsoluteFontSizing: true,
+  // TODO: switch `forceZIndex` to be false by default in the next major version
+  forceZIndex: true,
+  // TODO: switch `enableHelmetSSR` to be false by default in the next major version
+  enableHelmetSSR: true
+};
 
 const ThemeProvider = _ref => {
   let {
     children,
     defaultTheme,
-    // TODO: switch `forceAbsoluteFontSizing` to be false by default in the next major version
-    themeOptions = {
-      forceAbsoluteFontSizing: true
-    }
+    themeOptions = {}
   } = _ref;
-  const [theme, setTheme] = (0, _react.useState)(defaultTheme); // Validate the theme tokens version on every render.
+  const [theme, setTheme] = (0, _react.useState)(defaultTheme);
+  const appliedThemeOptions = { ...defaultThemeOptions,
+    ...themeOptions
+  }; // Validate the theme tokens version on every render.
   // This will intentionally break the application when attempting to use an invalid theme.
   // This will surface an incompatibility quickly rather than allowing the potential for strange bugs due to missing or incompatible tokens.
 
@@ -46,7 +56,7 @@ const ThemeProvider = _ref => {
     value: setTheme,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ThemeContext.Provider, {
       value: { ...theme,
-        themeOptions
+        themeOptions: appliedThemeOptions
       },
       children: children
     })
@@ -69,9 +79,16 @@ ThemeProvider.propTypes = {
    *   relative sizing (in `rem`, scales depending on the browser settings)
    * - `contentMaxWidth`: allows configuration of the content max width to be used in components
    *   such as Footnote and Notification to avoid content to stretch width more then the page's width
+   * - `forceZIndex`: available on web only, when set to false, sets zIndex on `View` to be `auto`
+   *   and when true, sets zIndex to be `0` (the default from `react-native-web`)
+   * - `enableHelmetSSR`: on Web SSR, allows React Helmet to run during server-side rendering. This should be
+   *   disabled unless a web app has been specifically configured to stop React Helmet accumulating
+   *   instances (which may cause a memory leak). See React Helmet's docs: https://github.com/nfl/react-helmet
    */
   themeOptions: _propTypes.default.shape({
     forceAbsoluteFontSizing: _propTypes.default.bool,
+    forceZIndex: _propTypes.default.bool,
+    enableHelmetSSR: _propTypes.default.bool,
     contentMaxWidth: _responsiveProps.default.getTypeOptionallyByViewport(_propTypes.default.number)
   })
 };