@atlaskit/react-select 1.0.0 → 1.0.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/react-select
 
+## 1.0.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.0.1
+
+### Patch Changes
+
+- [#140869](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/140869)
+  [`f08b672eb884b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f08b672eb884b) -
+  Add back removed props as deprecated for easier migration
+
 ## 1.0.0
 
 ### Major Changes

package/dist/cjs/components/live-region.js

@@ -42,6 +42,8 @@ var LiveRegion = function LiveRegion(props) {
     screenReaderStatus = selectProps.screenReaderStatus,
     tabSelectsValue = selectProps.tabSelectsValue,
     isLoading = selectProps.isLoading;
+  var ariaLabel = selectProps['aria-label'] || label;
+  var ariaLive = selectProps['aria-live'];
 
   // Update aria live message configuration when prop changes
   var messages = (0, _react.useMemo)(function () {
@@ -118,7 +120,7 @@ var LiveRegion = function LiveRegion(props) {
     if (messages.guidance) {
       var context = focusedValue ? 'value' : menuIsOpen ? 'menu' : 'input';
       guidanceMsg = messages.guidance({
-        'aria-label': label,
+        'aria-label': ariaLabel,
         context: context,
         isDisabled: focusedOption && isOptionDisabled(focusedOption, selectValue),
         isMulti: isMulti,
@@ -128,7 +130,7 @@ var LiveRegion = function LiveRegion(props) {
       });
     }
     return guidanceMsg;
-  }, [label, focusedOption, focusedValue, isMulti, isOptionDisabled, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
+  }, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
   var ScreenReaderText = (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("span", {
     id: "aria-selection"
   }, ariaSelected), (0, _react2.jsx)("span", {
@@ -141,7 +143,7 @@ var LiveRegion = function LiveRegion(props) {
   return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_a11yText.default, {
     id: id
   }, isInitialFocus && ScreenReaderText), (0, _react2.jsx)(_a11yText.default, {
-    "aria-live": "polite",
+    "aria-live": ariaLive,
     "aria-atomic": "false",
     "aria-relevant": "additions text",
     role: "log"

package/dist/cjs/select.js

@@ -33,6 +33,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var defaultProps = exports.defaultProps = {
+  'aria-live': 'polite',
   backspaceRemovesValue: true,
   blurInputOnSelect: (0, _utils.isTouchCapable)(),
   captureMenuScroll: !(0, _utils.isTouchCapable)(),
@@ -1231,6 +1232,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         label = _this$props8.label,
         labelId = _this$props8.labelId,
         menuIsOpen = _this$props8.menuIsOpen,
+        required = _this$props8.required,
         tabIndex = _this$props8.tabIndex;
       var _this$getComponents = this.getComponents(),
         Input = _this$getComponents.Input;
@@ -1239,17 +1241,19 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         ariaSelection = _this$state4.ariaSelection;
       var commonProps = this.commonProps;
       var id = inputId || this.getElementId('input');
+      var description = this.props['aria-describedby'] || descriptionId || null;
 
       // aria attributes makes the JSX "noisy", separated for clarity
       var ariaAttributes = _objectSpread(_objectSpread(_objectSpread({
         'aria-autocomplete': 'list',
+        'aria-errormessage': this.props['aria-errormessage'],
         'aria-expanded': menuIsOpen,
         'aria-haspopup': 'listbox',
-        'aria-describedby': descriptionId,
-        'aria-invalid': isInvalid,
-        'aria-label': label,
-        'aria-labelledby': labelId,
-        'aria-required': isRequired,
+        'aria-describedby': description,
+        'aria-invalid': this.props['aria-invalid'] || isInvalid,
+        'aria-label': this.props['aria-label'] || label,
+        'aria-labelledby': this.props['aria-labelledby'] || labelId,
+        'aria-required': required || isRequired,
         role: 'combobox',
         'aria-activedescendant': this.isAppleDevice ? undefined : this.state.focusedOptionId
       }, menuIsOpen && {
@@ -1257,9 +1261,9 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       }), !isSearchable && {
         'aria-readonly': true
       }), this.hasValue() ? (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus' && {
-        'aria-describedby': descriptionId ? [descriptionId, this.getElementId('live-region')].join(' ') : this.getElementId('live-region')
+        'aria-describedby': description ? [description, this.getElementId('live-region')].join(' ') : this.getElementId('live-region')
       } : {
-        'aria-describedby': descriptionId ? [descriptionId, this.getElementId('placeholder')].join(' ') : this.getElementId('placeholder')
+        'aria-describedby': description ? [description, this.getElementId('placeholder')].join(' ') : this.getElementId('placeholder')
       });
       if (!isSearchable) {
         // use a dummy input to maintain focus/blur functionality
@@ -1631,9 +1635,11 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         isDisabled = _this$props13.isDisabled,
         isMulti = _this$props13.isMulti,
         isRequired = _this$props13.isRequired,
+        required = _this$props13.required,
         name = _this$props13.name;
       var selectValue = this.state.selectValue;
-      if (isRequired && !this.hasValue() && !isDisabled) {
+      var req = required || isRequired || null;
+      if (req && !this.hasValue() && !isDisabled) {
         return /*#__PURE__*/_react.default.createElement(_internal.RequiredInput, {
           name: name,
           onFocus: this.onValueInputFocus

package/dist/es2019/components/live-region.js

@@ -38,6 +38,8 @@ const LiveRegion = props => {
     tabSelectsValue,
     isLoading
   } = selectProps;
+  const ariaLabel = selectProps['aria-label'] || label;
+  const ariaLive = selectProps['aria-live'];
 
   // Update aria live message configuration when prop changes
   const messages = useMemo(() => ({
@@ -116,7 +118,7 @@ const LiveRegion = props => {
     if (messages.guidance) {
       const context = focusedValue ? 'value' : menuIsOpen ? 'menu' : 'input';
       guidanceMsg = messages.guidance({
-        'aria-label': label,
+        'aria-label': ariaLabel,
         context,
         isDisabled: focusedOption && isOptionDisabled(focusedOption, selectValue),
         isMulti,
@@ -126,7 +128,7 @@ const LiveRegion = props => {
       });
     }
     return guidanceMsg;
-  }, [label, focusedOption, focusedValue, isMulti, isOptionDisabled, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
+  }, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
   const ScreenReaderText = jsx(Fragment, null, jsx("span", {
     id: "aria-selection"
   }, ariaSelected), jsx("span", {
@@ -139,7 +141,7 @@ const LiveRegion = props => {
   return jsx(Fragment, null, jsx(A11yText, {
     id: id
   }, isInitialFocus && ScreenReaderText), jsx(A11yText, {
-    "aria-live": "polite",
+    "aria-live": ariaLive,
     "aria-atomic": "false",
     "aria-relevant": "additions text",
     role: "log"

package/dist/es2019/select.js

@@ -12,6 +12,7 @@ import { defaultStyles } from './styles';
 import { defaultTheme } from './theme';
 import { classNames, cleanValue, isDocumentElement, isMobileDevice, isTouchCapable, multiValueAsValue, noop, notNullish, scrollIntoView, singleValueAsValue, valueTernary } from './utils';
 export const defaultProps = {
+  'aria-live': 'polite',
   backspaceRemovesValue: true,
   blurInputOnSelect: isTouchCapable(),
   captureMenuScroll: !isTouchCapable(),
@@ -1236,6 +1237,7 @@ export default class Select extends Component {
       label,
       labelId,
       menuIsOpen,
+      required,
       tabIndex
     } = this.props;
     const {
@@ -1249,17 +1251,19 @@ export default class Select extends Component {
       commonProps
     } = this;
     const id = inputId || this.getElementId('input');
+    const description = this.props['aria-describedby'] || descriptionId || null;
 
     // aria attributes makes the JSX "noisy", separated for clarity
     const ariaAttributes = {
       'aria-autocomplete': 'list',
+      'aria-errormessage': this.props['aria-errormessage'],
       'aria-expanded': menuIsOpen,
       'aria-haspopup': 'listbox',
-      'aria-describedby': descriptionId,
-      'aria-invalid': isInvalid,
-      'aria-label': label,
-      'aria-labelledby': labelId,
-      'aria-required': isRequired,
+      'aria-describedby': description,
+      'aria-invalid': this.props['aria-invalid'] || isInvalid,
+      'aria-label': this.props['aria-label'] || label,
+      'aria-labelledby': this.props['aria-labelledby'] || labelId,
+      'aria-required': required || isRequired,
       role: 'combobox',
       'aria-activedescendant': this.isAppleDevice ? undefined : this.state.focusedOptionId,
       ...(menuIsOpen && {
@@ -1269,9 +1273,9 @@ export default class Select extends Component {
         'aria-readonly': true
       }),
       ...(this.hasValue() ? (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus' && {
-        'aria-describedby': descriptionId ? [descriptionId, this.getElementId('live-region')].join(' ') : this.getElementId('live-region')
+        'aria-describedby': description ? [description, this.getElementId('live-region')].join(' ') : this.getElementId('live-region')
       } : {
-        'aria-describedby': descriptionId ? [descriptionId, this.getElementId('placeholder')].join(' ') : this.getElementId('placeholder')
+        'aria-describedby': description ? [description, this.getElementId('placeholder')].join(' ') : this.getElementId('placeholder')
       })
     };
     if (!isSearchable) {
@@ -1656,12 +1660,14 @@ export default class Select extends Component {
       isDisabled,
       isMulti,
       isRequired,
+      required,
       name
     } = this.props;
     const {
       selectValue
     } = this.state;
-    if (isRequired && !this.hasValue() && !isDisabled) {
+    const req = required || isRequired || null;
+    if (req && !this.hasValue() && !isDisabled) {
       return /*#__PURE__*/React.createElement(RequiredInput, {
         name: name,
         onFocus: this.onValueInputFocus

package/dist/esm/components/live-region.js

@@ -37,6 +37,8 @@ var LiveRegion = function LiveRegion(props) {
     screenReaderStatus = selectProps.screenReaderStatus,
     tabSelectsValue = selectProps.tabSelectsValue,
     isLoading = selectProps.isLoading;
+  var ariaLabel = selectProps['aria-label'] || label;
+  var ariaLive = selectProps['aria-live'];
 
   // Update aria live message configuration when prop changes
   var messages = useMemo(function () {
@@ -113,7 +115,7 @@ var LiveRegion = function LiveRegion(props) {
     if (messages.guidance) {
       var context = focusedValue ? 'value' : menuIsOpen ? 'menu' : 'input';
       guidanceMsg = messages.guidance({
-        'aria-label': label,
+        'aria-label': ariaLabel,
         context: context,
         isDisabled: focusedOption && isOptionDisabled(focusedOption, selectValue),
         isMulti: isMulti,
@@ -123,7 +125,7 @@ var LiveRegion = function LiveRegion(props) {
       });
     }
     return guidanceMsg;
-  }, [label, focusedOption, focusedValue, isMulti, isOptionDisabled, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
+  }, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
   var ScreenReaderText = jsx(Fragment, null, jsx("span", {
     id: "aria-selection"
   }, ariaSelected), jsx("span", {
@@ -136,7 +138,7 @@ var LiveRegion = function LiveRegion(props) {
   return jsx(Fragment, null, jsx(A11yText, {
     id: id
   }, isInitialFocus && ScreenReaderText), jsx(A11yText, {
-    "aria-live": "polite",
+    "aria-live": ariaLive,
     "aria-atomic": "false",
     "aria-relevant": "additions text",
     role: "log"

package/dist/esm/select.js

@@ -23,6 +23,7 @@ import { defaultStyles } from './styles';
 import { defaultTheme } from './theme';
 import { classNames, cleanValue, isDocumentElement, isMobileDevice, isTouchCapable, multiValueAsValue, noop, notNullish, scrollIntoView, singleValueAsValue, valueTernary } from './utils';
 export var defaultProps = {
+  'aria-live': 'polite',
   backspaceRemovesValue: true,
   blurInputOnSelect: isTouchCapable(),
   captureMenuScroll: !isTouchCapable(),
@@ -1221,6 +1222,7 @@ var Select = /*#__PURE__*/function (_Component) {
         label = _this$props8.label,
         labelId = _this$props8.labelId,
         menuIsOpen = _this$props8.menuIsOpen,
+        required = _this$props8.required,
         tabIndex = _this$props8.tabIndex;
       var _this$getComponents = this.getComponents(),
         Input = _this$getComponents.Input;
@@ -1229,17 +1231,19 @@ var Select = /*#__PURE__*/function (_Component) {
         ariaSelection = _this$state4.ariaSelection;
       var commonProps = this.commonProps;
       var id = inputId || this.getElementId('input');
+      var description = this.props['aria-describedby'] || descriptionId || null;
 
       // aria attributes makes the JSX "noisy", separated for clarity
       var ariaAttributes = _objectSpread(_objectSpread(_objectSpread({
         'aria-autocomplete': 'list',
+        'aria-errormessage': this.props['aria-errormessage'],
         'aria-expanded': menuIsOpen,
         'aria-haspopup': 'listbox',
-        'aria-describedby': descriptionId,
-        'aria-invalid': isInvalid,
-        'aria-label': label,
-        'aria-labelledby': labelId,
-        'aria-required': isRequired,
+        'aria-describedby': description,
+        'aria-invalid': this.props['aria-invalid'] || isInvalid,
+        'aria-label': this.props['aria-label'] || label,
+        'aria-labelledby': this.props['aria-labelledby'] || labelId,
+        'aria-required': required || isRequired,
         role: 'combobox',
         'aria-activedescendant': this.isAppleDevice ? undefined : this.state.focusedOptionId
       }, menuIsOpen && {
@@ -1247,9 +1251,9 @@ var Select = /*#__PURE__*/function (_Component) {
       }), !isSearchable && {
         'aria-readonly': true
       }), this.hasValue() ? (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus' && {
-        'aria-describedby': descriptionId ? [descriptionId, this.getElementId('live-region')].join(' ') : this.getElementId('live-region')
+        'aria-describedby': description ? [description, this.getElementId('live-region')].join(' ') : this.getElementId('live-region')
       } : {
-        'aria-describedby': descriptionId ? [descriptionId, this.getElementId('placeholder')].join(' ') : this.getElementId('placeholder')
+        'aria-describedby': description ? [description, this.getElementId('placeholder')].join(' ') : this.getElementId('placeholder')
       });
       if (!isSearchable) {
         // use a dummy input to maintain focus/blur functionality
@@ -1621,9 +1625,11 @@ var Select = /*#__PURE__*/function (_Component) {
         isDisabled = _this$props13.isDisabled,
         isMulti = _this$props13.isMulti,
         isRequired = _this$props13.isRequired,
+        required = _this$props13.required,
         name = _this$props13.name;
       var selectValue = this.state.selectValue;
-      if (isRequired && !this.hasValue() && !isDisabled) {
+      var req = required || isRequired || null;
+      if (req && !this.hasValue() && !isDisabled) {
         return /*#__PURE__*/React.createElement(RequiredInput, {
           name: name,
           onFocus: this.onValueInputFocus

package/dist/types/select.d.ts

@@ -1,4 +1,4 @@
-import React, { Component, type FocusEventHandler, type FormEventHandler, type KeyboardEventHandler, type MouseEventHandler, type ReactNode, type RefCallback, type TouchEventHandler } from 'react';
+import React, { type AriaAttributes, Component, type FocusEventHandler, type FormEventHandler, type KeyboardEventHandler, type MouseEventHandler, type ReactNode, type RefCallback, type TouchEventHandler } from 'react';
 import { type AriaLiveMessages, type AriaSelection } from './accessibility';
 import { type SelectComponentsConfig } from './components';
 import { type FilterOptionOption } from './filters';
@@ -12,6 +12,48 @@ export interface FormatOptionLabelMeta<Option> {
     selectValue: Options<Option>;
 }
 export interface SelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
+    /**
+     * HTML ID of an element containing an error message related to the input
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
+     * aria-errormessage is not supported widely by assistive technologies. Do not use!
+     */
+    'aria-errormessage'?: AriaAttributes['aria-errormessage'];
+    /**
+     * Indicate if the value entered in the field is invalid
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
+     * Use `isInvalid` instead.
+     */
+    'aria-invalid'?: AriaAttributes['aria-invalid'];
+    /**
+     * Aria label (for assistive tech)
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
+     * Use `label` instead.
+     */
+    'aria-label'?: AriaAttributes['aria-label'];
+    /**
+     * HTML ID of an element that should be used as the label (for assistive tech)
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
+     * Use `labelId` instead.
+     */
+    'aria-labelledby'?: AriaAttributes['aria-labelledby'];
+    /**
+     * HTML ID of an element that should be used as a description (for assistive tech)
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
+     * Use `descriptionId` instead.
+     */
+    'aria-describedby'?: AriaAttributes['aria-describedby'];
+    /**
+     * Used to set the priority with which screen reader should treat updates to live regions. The possible settings are: off, polite (default) or assertive
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
+     * Will be removed in future versions.
+     */
+    'aria-live'?: AriaAttributes['aria-live'];
     /**
      * Customise the messages used by the aria-live component
      *
@@ -356,8 +398,16 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
      * Sets the form attribute on the input
      */
     form?: string;
+    /**
+     * Marks the value-holding input as required for form validation
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
+     * Use `isRequired` instead.
+     */
+    required?: boolean;
 }
 export declare const defaultProps: {
+    'aria-live': string;
     backspaceRemovesValue: boolean;
     blurInputOnSelect: boolean;
     captureMenuScroll: boolean;
@@ -436,6 +486,7 @@ interface CategorizedGroup<Option, Group extends GroupBase<Option>> {
 type CategorizedGroupOrOption<Option, Group extends GroupBase<Option>> = CategorizedGroup<Option, Group> | CategorizedOption<Option>;
 export default class Select<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> extends Component<SelectProps<Option, IsMulti, Group>, State<Option, IsMulti, Group>> {
     static defaultProps: {
+        'aria-live': string;
         backspaceRemovesValue: boolean;
         blurInputOnSelect: boolean;
         captureMenuScroll: boolean;
@@ -577,20 +628,7 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
         MultiValueLabel: <Option_16, IsMulti_16 extends boolean, Group_16 extends GroupBase<Option_16>>({ children, innerProps, }: import(".").MultiValueGenericProps<Option_16, IsMulti_16, Group_16>) => import("@emotion/react").jsx.JSX.Element;
         MultiValueRemove: typeof import("./components/multi-value").MultiValueRemove;
         Option: <Option_17, IsMulti_17 extends boolean, Group_17 extends GroupBase<Option_17>>(props: import(".").OptionProps<Option_17, IsMulti_17, Group_17>) => import("@emotion/react").jsx.JSX.Element;
-        Placeholder: <Option_18, IsMulti_18 extends boolean, Group_18 extends GroupBase<Option_18>>(props: import(".").PlaceholderProps<Option_18, IsMulti_18, Group_18>) => import("@emotion/react").jsx.JSX.Element; /**
-         * If `true`, close the select menu when the user scrolls the document/body.
-         *
-         * If a function, takes a standard javascript `ScrollEvent` you return a boolean:
-         *
-         * `true` => The menu closes
-         *
-         * `false` => The menu stays open
-         *
-         * This is useful when you have a scrollable modal and want to portal the menu out,
-         * but want to avoid graphical issues.
-         *
-         * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
-         */
+        Placeholder: <Option_18, IsMulti_18 extends boolean, Group_18 extends GroupBase<Option_18>>(props: import(".").PlaceholderProps<Option_18, IsMulti_18, Group_18>) => import("@emotion/react").jsx.JSX.Element;
         SelectContainer: <Option_19, IsMulti_19 extends boolean, Group_19 extends GroupBase<Option_19>>(props: import(".").ContainerProps<Option_19, IsMulti_19, Group_19>) => import("@emotion/react").jsx.JSX.Element;
         SingleValue: <Option_20, IsMulti_20 extends boolean, Group_20 extends GroupBase<Option_20>>(props: import(".").SingleValueProps<Option_20, IsMulti_20, Group_20>) => import("@emotion/react").jsx.JSX.Element;
         ValueContainer: <Option_21, IsMulti_21 extends boolean, Group_21 extends GroupBase<Option_21>>(props: import(".").ValueContainerProps<Option_21, IsMulti_21, Group_21>) => import("@emotion/react").jsx.JSX.Element;

package/dist/types-ts4.5/select.d.ts

@@ -1,4 +1,4 @@
-import React, { Component, type FocusEventHandler, type FormEventHandler, type KeyboardEventHandler, type MouseEventHandler, type ReactNode, type RefCallback, type TouchEventHandler } from 'react';
+import React, { type AriaAttributes, Component, type FocusEventHandler, type FormEventHandler, type KeyboardEventHandler, type MouseEventHandler, type ReactNode, type RefCallback, type TouchEventHandler } from 'react';
 import { type AriaLiveMessages, type AriaSelection } from './accessibility';
 import { type SelectComponentsConfig } from './components';
 import { type FilterOptionOption } from './filters';
@@ -12,6 +12,48 @@ export interface FormatOptionLabelMeta<Option> {
     selectValue: Options<Option>;
 }
 export interface SelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
+    /**
+     * HTML ID of an element containing an error message related to the input
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
+     * aria-errormessage is not supported widely by assistive technologies. Do not use!
+     */
+    'aria-errormessage'?: AriaAttributes['aria-errormessage'];
+    /**
+     * Indicate if the value entered in the field is invalid
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
+     * Use `isInvalid` instead.
+     */
+    'aria-invalid'?: AriaAttributes['aria-invalid'];
+    /**
+     * Aria label (for assistive tech)
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
+     * Use `label` instead.
+     */
+    'aria-label'?: AriaAttributes['aria-label'];
+    /**
+     * HTML ID of an element that should be used as the label (for assistive tech)
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
+     * Use `labelId` instead.
+     */
+    'aria-labelledby'?: AriaAttributes['aria-labelledby'];
+    /**
+     * HTML ID of an element that should be used as a description (for assistive tech)
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
+     * Use `descriptionId` instead.
+     */
+    'aria-describedby'?: AriaAttributes['aria-describedby'];
+    /**
+     * Used to set the priority with which screen reader should treat updates to live regions. The possible settings are: off, polite (default) or assertive
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
+     * Will be removed in future versions.
+     */
+    'aria-live'?: AriaAttributes['aria-live'];
     /**
      * Customise the messages used by the aria-live component
      *
@@ -356,8 +398,16 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
      * Sets the form attribute on the input
      */
     form?: string;
+    /**
+     * Marks the value-holding input as required for form validation
+     *
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
+     * Use `isRequired` instead.
+     */
+    required?: boolean;
 }
 export declare const defaultProps: {
+    'aria-live': string;
     backspaceRemovesValue: boolean;
     blurInputOnSelect: boolean;
     captureMenuScroll: boolean;
@@ -436,6 +486,7 @@ interface CategorizedGroup<Option, Group extends GroupBase<Option>> {
 type CategorizedGroupOrOption<Option, Group extends GroupBase<Option>> = CategorizedGroup<Option, Group> | CategorizedOption<Option>;
 export default class Select<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> extends Component<SelectProps<Option, IsMulti, Group>, State<Option, IsMulti, Group>> {
     static defaultProps: {
+        'aria-live': string;
         backspaceRemovesValue: boolean;
         blurInputOnSelect: boolean;
         captureMenuScroll: boolean;
@@ -577,20 +628,7 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
         MultiValueLabel: <Option_16, IsMulti_16 extends boolean, Group_16 extends GroupBase<Option_16>>({ children, innerProps, }: import(".").MultiValueGenericProps<Option_16, IsMulti_16, Group_16>) => import("@emotion/react").jsx.JSX.Element;
         MultiValueRemove: typeof import("./components/multi-value").MultiValueRemove;
         Option: <Option_17, IsMulti_17 extends boolean, Group_17 extends GroupBase<Option_17>>(props: import(".").OptionProps<Option_17, IsMulti_17, Group_17>) => import("@emotion/react").jsx.JSX.Element;
-        Placeholder: <Option_18, IsMulti_18 extends boolean, Group_18 extends GroupBase<Option_18>>(props: import(".").PlaceholderProps<Option_18, IsMulti_18, Group_18>) => import("@emotion/react").jsx.JSX.Element; /**
-         * If `true`, close the select menu when the user scrolls the document/body.
-         *
-         * If a function, takes a standard javascript `ScrollEvent` you return a boolean:
-         *
-         * `true` => The menu closes
-         *
-         * `false` => The menu stays open
-         *
-         * This is useful when you have a scrollable modal and want to portal the menu out,
-         * but want to avoid graphical issues.
-         *
-         * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}
-         */
+        Placeholder: <Option_18, IsMulti_18 extends boolean, Group_18 extends GroupBase<Option_18>>(props: import(".").PlaceholderProps<Option_18, IsMulti_18, Group_18>) => import("@emotion/react").jsx.JSX.Element;
         SelectContainer: <Option_19, IsMulti_19 extends boolean, Group_19 extends GroupBase<Option_19>>(props: import(".").ContainerProps<Option_19, IsMulti_19, Group_19>) => import("@emotion/react").jsx.JSX.Element;
         SingleValue: <Option_20, IsMulti_20 extends boolean, Group_20 extends GroupBase<Option_20>>(props: import(".").SingleValueProps<Option_20, IsMulti_20, Group_20>) => import("@emotion/react").jsx.JSX.Element;
         ValueContainer: <Option_21, IsMulti_21 extends boolean, Group_21 extends GroupBase<Option_21>>(props: import(".").ValueContainerProps<Option_21, IsMulti_21, Group_21>) => import("@emotion/react").jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-select",
-	"version": "1.0.0",
+	"version": "1.0.2",
 	"description": "A forked version of react-select to only be used in atlaskit/select",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -27,17 +27,17 @@
 		"./async-creatable": "./src/async-creatable.tsx"
 	},
 	"dependencies": {
-		"@atlaskit/ds-lib": "^2.5.0",
+		"@atlaskit/ds-lib": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/cache": "^11.10.0",
 		"@emotion/react": "^11.7.1",
 		"@floating-ui/dom": "^1.0.1",
 		"memoize-one": "^6.0.0",
-		"react-dom": "^16.8.0",
 		"use-isomorphic-layout-effect": "^1.1.2"
 	},
 	"peerDependencies": {
-		"react": "^16.8.0"
+		"react": "^16.8.0 || ^17.0.0 || ^18.2.0",
+		"react-dom": "^16.8.0 || ^17.0.0 || ^18.2.0"
 	},
 	"devDependencies": {
 		"@af/integration-testing": "*",