@atlaskit/select 16.5.14 → 16.7.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/select
 
+## 16.7.0
+
+### Minor Changes
+
+- [`31496cc7c8a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/31496cc7c8a) - [ux] Adds accessible name to the search input for popup select components via new `label` prop or `placeholder` prop if `label` is not provided.
+
+## 16.6.0
+
+### Minor Changes
+
+- [`f03e630c03e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f03e630c03e) - [ux] Adds keydown handler to target spread props for better accessibility for keyboard users.
+
 ## 16.5.14
 
 ### Patch Changes

package/dist/cjs/PopupSelect/PopupSelect.js

@@ -29,7 +29,7 @@ var _components = require("./components");
 var _styles = _interopRequireDefault(require("../styles"));
 var _bindEventListener = require("bind-event-listener");
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
-var _excluded = ["footer", "maxMenuWidth", "minMenuWidth", "target"];
+var _excluded = ["footer", "label", "maxMenuWidth", "minMenuWidth", "placeholder", "target", "testId"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -109,6 +109,14 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     }), "-popup-select"));
     // Event Handlers
     // ==============================
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleTargetKeyDown", function (event) {
+      switch (event.key) {
+        case 'ArrowDown':
+          _this.open();
+          break;
+        default:
+      }
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyDown", function (event) {
       switch (event.key) {
         case 'Escape':
@@ -314,9 +322,12 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSelect", function () {
       var _this$props3 = _this.props,
         footer = _this$props3.footer,
+        label = _this$props3.label,
         maxMenuWidth = _this$props3.maxMenuWidth,
         minMenuWidth = _this$props3.minMenuWidth,
+        placeholder = _this$props3.placeholder,
         target = _this$props3.target,
+        testId = _this$props3.testId,
         props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
       // TODO: If `platform.design-system-team.popup-select-render-perf_i0s6m` is kept, `focusLockEnabled` should be fully removed as we're preferring `isReferenceHidden`
       var _this$state = _this.state,
@@ -337,6 +348,13 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
       var selectComponents = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.popup-select-render-perf_i0s6m') ? _this.getSelectComponents(mergedComponents, showSearchControl) : _objectSpread(_objectSpread({}, mergedComponents), {}, {
         Control: showSearchControl ? mergedComponents.Control : _components.DummyControl
       });
+      var getLabel = function getLabel() {
+        if (label) {
+          return label;
+        } else if (typeof placeholder === 'string') {
+          return placeholder;
+        }
+      };
       var popper = /*#__PURE__*/_react.default.createElement(_reactPopper.Popper, (0, _extends2.default)({}, mergedPopperProps, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.popup-select-render-perf_i0s6m') ? undefined : {
         onFirstUpdate: function onFirstUpdate(state) {
           var _mergedPopperProps$on;
@@ -360,7 +378,8 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
           "data-placement": placement,
           minWidth: minMenuWidth,
           maxWidth: maxMenuWidth,
-          id: _this.popperWrapperId
+          id: _this.popperWrapperId,
+          testId: testId
         }, /*#__PURE__*/_react.default.createElement(_reactFocusLock.default
         /*
          * NOTE: We intentionally want the FocusLock to be disabled until the refs are populated in Popper.
@@ -373,11 +392,13 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
           disabled: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.popup-select-render-perf_i0s6m') ? !readyToRenderSelect : !focusLockEnabled,
           returnFocus: true
         }, readyToRenderSelect && /*#__PURE__*/_react.default.createElement(_reactSelect.default, (0, _extends2.default)({
+          "aria-label": getLabel(),
           backspaceRemovesValue: false,
           controlShouldRenderValue: false,
           isClearable: false,
           tabSelectsValue: false,
           menuIsOpen: true,
+          placeholder: placeholder,
           ref: _this.getSelectRef
         }, props, {
           isSearchable: showSearchControl,
@@ -443,6 +464,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         var ref = _ref3.ref;
         return target && target({
           isOpen: isOpen,
+          onKeyDown: _this3.handleTargetKeyDown,
           ref: _this3.resolveTargetRef(ref),
           'aria-haspopup': 'true',
           'aria-expanded': isOpen,

package/dist/cjs/PopupSelect/components.js

@@ -30,7 +30,8 @@ var MenuDialog = function MenuDialog(_ref) {
     minWidth = _ref.minWidth,
     children = _ref.children,
     id = _ref.id,
-    style = _ref.style;
+    style = _ref.style,
+    testId = _ref.testId;
   return (0, _react.jsx)("div", {
     css: [menuDialogStyles,
     // There is not a limited amount of values for the widths, so they need
@@ -41,7 +42,8 @@ var MenuDialog = function MenuDialog(_ref) {
       minWidth: minWidth
     }],
     style: style,
-    id: id
+    id: id,
+    "data-testid": testId && "".concat(testId, "--menu")
   }, children);
 };
 

package/dist/cjs/Select.js

@@ -9,7 +9,7 @@ var _reactSelect = _interopRequireDefault(require("react-select"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _createSelect = _interopRequireDefault(require("./createSelect"));
 var packageName = "@atlaskit/select";
-var packageVersion = "16.5.14";
+var packageVersion = "16.7.0";
 var SelectWithoutAnalytics = (0, _createSelect.default)(_reactSelect.default);
 exports.SelectWithoutAnalytics = SelectWithoutAnalytics;
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');

package/dist/es2019/PopupSelect/PopupSelect.js

@@ -75,6 +75,14 @@ export default class PopupSelect extends PureComponent {
     })}-popup-select`);
     // Event Handlers
     // ==============================
+    _defineProperty(this, "handleTargetKeyDown", event => {
+      switch (event.key) {
+        case 'ArrowDown':
+          this.open();
+          break;
+        default:
+      }
+    });
     _defineProperty(this, "handleKeyDown", event => {
       switch (event.key) {
         case 'Escape':
@@ -290,9 +298,12 @@ export default class PopupSelect extends PureComponent {
     _defineProperty(this, "renderSelect", () => {
       const {
         footer,
+        label,
         maxMenuWidth,
         minMenuWidth,
+        placeholder,
         target,
+        testId,
         ...props
       } = this.props;
       // TODO: If `platform.design-system-team.popup-select-render-perf_i0s6m` is kept, `focusLockEnabled` should be fully removed as we're preferring `isReferenceHidden`
@@ -316,6 +327,13 @@ export default class PopupSelect extends PureComponent {
         ...mergedComponents,
         Control: showSearchControl ? mergedComponents.Control : DummyControl
       };
+      const getLabel = () => {
+        if (label) {
+          return label;
+        } else if (typeof placeholder === 'string') {
+          return placeholder;
+        }
+      };
       const popper = /*#__PURE__*/React.createElement(Popper, _extends({}, mergedPopperProps, getBooleanFF('platform.design-system-team.popup-select-render-perf_i0s6m') ? undefined : {
         onFirstUpdate: state => {
           var _mergedPopperProps$on;
@@ -340,7 +358,8 @@ export default class PopupSelect extends PureComponent {
           "data-placement": placement,
           minWidth: minMenuWidth,
           maxWidth: maxMenuWidth,
-          id: this.popperWrapperId
+          id: this.popperWrapperId,
+          testId: testId
         }, /*#__PURE__*/React.createElement(FocusLock
         /*
          * NOTE: We intentionally want the FocusLock to be disabled until the refs are populated in Popper.
@@ -353,11 +372,13 @@ export default class PopupSelect extends PureComponent {
           disabled: getBooleanFF('platform.design-system-team.popup-select-render-perf_i0s6m') ? !readyToRenderSelect : !focusLockEnabled,
           returnFocus: true
         }, readyToRenderSelect && /*#__PURE__*/React.createElement(Select, _extends({
+          "aria-label": getLabel(),
           backspaceRemovesValue: false,
           controlShouldRenderValue: false,
           isClearable: false,
           tabSelectsValue: false,
           menuIsOpen: true,
+          placeholder: placeholder,
           ref: this.getSelectRef
         }, props, {
           isSearchable: showSearchControl,
@@ -444,6 +465,7 @@ export default class PopupSelect extends PureComponent {
       ref
     }) => target && target({
       isOpen,
+      onKeyDown: this.handleTargetKeyDown,
       ref: this.resolveTargetRef(ref),
       'aria-haspopup': 'true',
       'aria-expanded': isOpen,

package/dist/es2019/PopupSelect/components.js

@@ -22,7 +22,8 @@ export const MenuDialog = ({
   minWidth,
   children,
   id,
-  style
+  style,
+  testId
 }) => jsx("div", {
   css: [menuDialogStyles,
   // There is not a limited amount of values for the widths, so they need
@@ -33,7 +34,8 @@ export const MenuDialog = ({
     minWidth
   }],
   style: style,
-  id: id
+  id: id,
+  "data-testid": testId && `${testId}--menu`
 }, children);
 
 // ==============================

package/dist/es2019/Select.js

@@ -2,7 +2,7 @@ import Select from 'react-select';
 import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent } from '@atlaskit/analytics-next';
 import createSelect from './createSelect';
 const packageName = "@atlaskit/select";
-const packageVersion = "16.5.14";
+const packageVersion = "16.7.0";
 export const SelectWithoutAnalytics = createSelect(Select);
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({

package/dist/esm/PopupSelect/PopupSelect.js

@@ -7,7 +7,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["footer", "maxMenuWidth", "minMenuWidth", "target"];
+var _excluded = ["footer", "label", "maxMenuWidth", "minMenuWidth", "placeholder", "target", "testId"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
@@ -99,6 +99,14 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     }), "-popup-select"));
     // Event Handlers
     // ==============================
+    _defineProperty(_assertThisInitialized(_this), "handleTargetKeyDown", function (event) {
+      switch (event.key) {
+        case 'ArrowDown':
+          _this.open();
+          break;
+        default:
+      }
+    });
     _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) {
       switch (event.key) {
         case 'Escape':
@@ -304,9 +312,12 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "renderSelect", function () {
       var _this$props3 = _this.props,
         footer = _this$props3.footer,
+        label = _this$props3.label,
         maxMenuWidth = _this$props3.maxMenuWidth,
         minMenuWidth = _this$props3.minMenuWidth,
+        placeholder = _this$props3.placeholder,
         target = _this$props3.target,
+        testId = _this$props3.testId,
         props = _objectWithoutProperties(_this$props3, _excluded);
       // TODO: If `platform.design-system-team.popup-select-render-perf_i0s6m` is kept, `focusLockEnabled` should be fully removed as we're preferring `isReferenceHidden`
       var _this$state = _this.state,
@@ -327,6 +338,13 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
       var selectComponents = getBooleanFF('platform.design-system-team.popup-select-render-perf_i0s6m') ? _this.getSelectComponents(mergedComponents, showSearchControl) : _objectSpread(_objectSpread({}, mergedComponents), {}, {
         Control: showSearchControl ? mergedComponents.Control : DummyControl
       });
+      var getLabel = function getLabel() {
+        if (label) {
+          return label;
+        } else if (typeof placeholder === 'string') {
+          return placeholder;
+        }
+      };
       var popper = /*#__PURE__*/React.createElement(Popper, _extends({}, mergedPopperProps, getBooleanFF('platform.design-system-team.popup-select-render-perf_i0s6m') ? undefined : {
         onFirstUpdate: function onFirstUpdate(state) {
           var _mergedPopperProps$on;
@@ -350,7 +368,8 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
           "data-placement": placement,
           minWidth: minMenuWidth,
           maxWidth: maxMenuWidth,
-          id: _this.popperWrapperId
+          id: _this.popperWrapperId,
+          testId: testId
         }, /*#__PURE__*/React.createElement(FocusLock
         /*
          * NOTE: We intentionally want the FocusLock to be disabled until the refs are populated in Popper.
@@ -363,11 +382,13 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
           disabled: getBooleanFF('platform.design-system-team.popup-select-render-perf_i0s6m') ? !readyToRenderSelect : !focusLockEnabled,
           returnFocus: true
         }, readyToRenderSelect && /*#__PURE__*/React.createElement(Select, _extends({
+          "aria-label": getLabel(),
           backspaceRemovesValue: false,
           controlShouldRenderValue: false,
           isClearable: false,
           tabSelectsValue: false,
           menuIsOpen: true,
+          placeholder: placeholder,
           ref: _this.getSelectRef
         }, props, {
           isSearchable: showSearchControl,
@@ -433,6 +454,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         var ref = _ref3.ref;
         return target && target({
           isOpen: isOpen,
+          onKeyDown: _this3.handleTargetKeyDown,
           ref: _this3.resolveTargetRef(ref),
           'aria-haspopup': 'true',
           'aria-expanded': isOpen,

package/dist/esm/PopupSelect/components.js

@@ -25,7 +25,8 @@ export var MenuDialog = function MenuDialog(_ref) {
     minWidth = _ref.minWidth,
     children = _ref.children,
     id = _ref.id,
-    style = _ref.style;
+    style = _ref.style,
+    testId = _ref.testId;
   return jsx("div", {
     css: [menuDialogStyles,
     // There is not a limited amount of values for the widths, so they need
@@ -36,7 +37,8 @@ export var MenuDialog = function MenuDialog(_ref) {
       minWidth: minWidth
     }],
     style: style,
-    id: id
+    id: id,
+    "data-testid": testId && "".concat(testId, "--menu")
   }, children);
 };
 

package/dist/esm/Select.js

@@ -2,7 +2,7 @@ import Select from 'react-select';
 import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent } from '@atlaskit/analytics-next';
 import createSelect from './createSelect';
 var packageName = "@atlaskit/select";
-var packageVersion = "16.5.14";
+var packageVersion = "16.7.0";
 export var SelectWithoutAnalytics = createSelect(Select);
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({

package/dist/types/PopupSelect/PopupSelect.d.ts

@@ -1,4 +1,4 @@
-import React, { PureComponent, ReactNode } from 'react';
+import React, { KeyboardEventHandler, PureComponent, ReactNode } from 'react';
 import { GroupBase } from 'react-select';
 import BaseSelect from 'react-select/base';
 import { PopperProps } from 'react-popper';
@@ -9,6 +9,7 @@ type defaultModifiers = 'offset' | 'preventOverflow';
 type PopperPropsNoChildren<Modifiers> = Omit<PopperProps<Modifiers>, 'children'>;
 interface PopupSelectTriggerProps {
     ref: any;
+    onKeyDown: KeyboardEventHandler<HTMLElement>;
     'aria-haspopup': 'true';
     'aria-expanded': boolean;
     'aria-controls'?: string;
@@ -59,6 +60,7 @@ export interface PopupSelectProps<Option = OptionType, IsMulti extends boolean =
       - `isOpen`: The current state of the popup.
           Use this to change the appearance of your target based on the state of your component
       - `ref`: Pass this ref to the element the Popup should be attached to
+      - `onKeyDown`: Pass this keydown handler to the element to allow keyboard users to access the element.
       - `aria-haspopup`, `aria-expanded`, `aria-controls`: Spread these onto a target element to
           ensure your experience is accessible
      */
@@ -73,6 +75,8 @@ export interface PopupSelectProps<Option = OptionType, IsMulti extends boolean =
     validationState?: ValidationState;
     /** This prop indicates if the component is in an error state */
     isInvalid?: boolean;
+    /** This gives an accessible name to the input for users of assistive technologies */
+    label?: string;
     testId?: string;
 }
 interface State<Modifiers = string> {
@@ -131,6 +135,7 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
     componentDidMount(): void;
     componentWillUnmount(): void;
     componentDidUpdate(prevProps: PopupSelectProps<Option, IsMulti, Modifiers>): void;
+    handleTargetKeyDown: (event: React.KeyboardEvent) => void;
     handleKeyDown: (event: KeyboardEvent) => void;
     handleClick: ({ target }: MouseEvent) => void;
     handleSelectChange: (value: ValueType<Option, IsMulti>, actionMeta: ActionMeta<Option>) => void;
@@ -172,7 +177,11 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
         multiValue?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").MultiValueProps<Option, IsMulti, GroupBase<Option>>> | undefined;
         multiValueLabel?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").MultiValueProps<Option, IsMulti, GroupBase<Option>>> | undefined;
         multiValueRemove?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").MultiValueProps<Option, IsMulti, GroupBase<Option>>> | undefined;
-        noOptionsMessage?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").NoticeProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        noOptionsMessage?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").NoticeProps<Option, IsMulti, GroupBase<Option>>> | undefined; /**
+         * TODO: This type should be cleaned up with `platform.design-system-team.popup-select-render-perf_i0s6m`.
+         *  - If discarded, revert to `focusLockEnabled: boolean`
+         *  - If kept, delete this type.
+         */
         option?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").OptionProps<Option, IsMulti, GroupBase<Option>>> | undefined;
         placeholder?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").PlaceholderProps<Option, IsMulti, GroupBase<Option>>> | undefined;
         singleValue?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").SingleValueProps<Option, IsMulti, GroupBase<Option>>> | undefined;

package/dist/types/PopupSelect/components.d.ts

@@ -8,6 +8,7 @@ interface MenuDialogProps {
     style: CSSProperties;
     children: ReactNode;
     id: string;
+    testId?: string;
 }
 export declare const MenuDialog: FC<MenuDialogProps>;
 export declare const DummyControl: FC<ControlProps<OptionType, boolean>>;

package/dist/types/extract-react-types/react-select-props.d.ts

@@ -32,13 +32,9 @@ interface NativeReactSelectProps<Option = unknown, IsMulti extends boolean = fal
     closeMenuOnSelect?: boolean;
     closeMenuOnScroll?: boolean | EventListener;
     /**
-     * This complex object includes all the compositional components that are used
-     * in `react-select`. If you wish to overwrite a component, pass in an object
-     * with the appropriate namespace.
-     *
-     * If you only wish to restyle a component, we recommend using the `styles` prop
-     * instead. For a list of the components that can be passed in, and the shape
-     * that will be passed to them, see [the components docs](/components)
+     This complex object includes all the compositional components that are used in `react-select`. If you wish to overwrite a component, pass in an object with the appropriate namespace.
+  
+     If you only wish to restyle a component, we recommend using the `styles` prop instead. For a list of the components that can be passed in, and the shape that will be passed to them, see [the components docs](/components).
      */
     components?: SelectComponentsConfig<Option, IsMulti, Group>;
     /** Whether the value of the select, e.g. SingleValue, should be displayed in the control. */
@@ -49,19 +45,14 @@ interface NativeReactSelectProps<Option = unknown, IsMulti extends boolean = fal
     escapeClearsValue?: boolean;
     /** Custom method to filter whether an option should be displayed in the menu */
     filterOption?: ((option?: FilterOptionOption<Option>, inputValue?: string) => boolean) | null;
-    /**
-     * Formats group labels in the menu as React components
-     *
-     * An example can be found in the [Replacing builtins](/advanced#replacing-builtins) documentation.
-     */
+    /** Formats group labels in the menu as React components. [Custom label example](/components/select/examples#customization). */
     formatGroupLabel?: (group?: Group) => ReactNode;
     /** Formats option labels in the menu and control as React components */
     formatOptionLabel?: (data?: Option, formatOptionLabelMeta?: FormatOptionLabelMeta<Option>) => ReactNode;
     /**
-     * Resolves option data to a string to be displayed as the label by components
-     *
-     * Note?: Failure to resolve to a string type can interfere with filtering and
-     * screen reader support.
+     Resolves option data to a string to be displayed as the label by components.
+  
+     Note?: Failure to resolve to a string type can interfere with filtering and screen reader support.
      */
     getOptionLabel?: GetOptionLabel<Option>;
     /** Resolves option data to a string to compare options and specify value attributes */
@@ -83,9 +74,7 @@ interface NativeReactSelectProps<Option = unknown, IsMulti extends boolean = fal
     /** Is the select in a state of loading (async) */
     isLoading?: boolean;
     /**
-     * Override the built-in logic to detect whether an option is disabled
-     *
-     * An example can be found in the [Replacing builtins](/advanced#replacing-builtins) documentation.
+     Override the built-in logic to detect whether an option is disabled.
      */
     isOptionDisabled?: (option?: Option, selectValue?: Options<Option>) => boolean;
     /** Override the built-in logic to detect whether an option is selected */
@@ -106,18 +95,11 @@ interface NativeReactSelectProps<Option = unknown, IsMulti extends boolean = fal
     maxMenuHeight?: number;
     /** Whether the menu is open */
     menuIsOpen?: boolean;
-    /**
-     * Default placement of the menu in relation to the control. 'auto' will flip
-     * when there isn't enough space below the control.
-     */
+    /** Default placement of the menu in relation to the control. 'auto' will flip when there isn't enough space below the control. */
     menuPlacement?: MenuPlacement;
     /** The CSS position value of the menu, when "fixed" extra layout management is required */
     menuPosition?: MenuPosition;
-    /**
-     * Whether the menu should use a portal, and where it should attach
-     *
-     * An example can be found in the [Portaling](/advanced#portaling) documentation
-     */
+    /** Whether the menu should use a portal, and where it should attach. */
     menuPortalTarget?: HTMLElement | null;
     /** Whether to block scroll events when the menu is open */
     menuShouldBlockScroll?: boolean;
@@ -161,11 +143,7 @@ interface NativeReactSelectProps<Option = unknown, IsMulti extends boolean = fal
     screenReaderStatus?: (obj?: {
         count?: number;
     }) => string;
-    /**
-     * Style modifier methods
-     *
-     * A basic example can be found at the bottom of the [Replacing builtins](/advanced#replacing-builtins) documentation.
-     */
+    /** Style modifier methods. */
     styles?: StylesConfig;
     /** Theme modifier method */
     theme?: ThemeConfig;

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

@@ -1,4 +1,4 @@
-import React, { PureComponent, ReactNode } from 'react';
+import React, { KeyboardEventHandler, PureComponent, ReactNode } from 'react';
 import { GroupBase } from 'react-select';
 import BaseSelect from 'react-select/base';
 import { PopperProps } from 'react-popper';
@@ -9,6 +9,7 @@ type defaultModifiers = 'offset' | 'preventOverflow';
 type PopperPropsNoChildren<Modifiers> = Omit<PopperProps<Modifiers>, 'children'>;
 interface PopupSelectTriggerProps {
     ref: any;
+    onKeyDown: KeyboardEventHandler<HTMLElement>;
     'aria-haspopup': 'true';
     'aria-expanded': boolean;
     'aria-controls'?: string;
@@ -59,6 +60,7 @@ export interface PopupSelectProps<Option = OptionType, IsMulti extends boolean =
       - `isOpen`: The current state of the popup.
           Use this to change the appearance of your target based on the state of your component
       - `ref`: Pass this ref to the element the Popup should be attached to
+      - `onKeyDown`: Pass this keydown handler to the element to allow keyboard users to access the element.
       - `aria-haspopup`, `aria-expanded`, `aria-controls`: Spread these onto a target element to
           ensure your experience is accessible
      */
@@ -73,6 +75,8 @@ export interface PopupSelectProps<Option = OptionType, IsMulti extends boolean =
     validationState?: ValidationState;
     /** This prop indicates if the component is in an error state */
     isInvalid?: boolean;
+    /** This gives an accessible name to the input for users of assistive technologies */
+    label?: string;
     testId?: string;
 }
 interface State<Modifiers = string> {
@@ -131,6 +135,7 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
     componentDidMount(): void;
     componentWillUnmount(): void;
     componentDidUpdate(prevProps: PopupSelectProps<Option, IsMulti, Modifiers>): void;
+    handleTargetKeyDown: (event: React.KeyboardEvent) => void;
     handleKeyDown: (event: KeyboardEvent) => void;
     handleClick: ({ target }: MouseEvent) => void;
     handleSelectChange: (value: ValueType<Option, IsMulti>, actionMeta: ActionMeta<Option>) => void;
@@ -172,7 +177,11 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
         multiValue?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").MultiValueProps<Option, IsMulti, GroupBase<Option>>> | undefined;
         multiValueLabel?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").MultiValueProps<Option, IsMulti, GroupBase<Option>>> | undefined;
         multiValueRemove?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").MultiValueProps<Option, IsMulti, GroupBase<Option>>> | undefined;
-        noOptionsMessage?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").NoticeProps<Option, IsMulti, GroupBase<Option>>> | undefined;
+        noOptionsMessage?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").NoticeProps<Option, IsMulti, GroupBase<Option>>> | undefined; /**
+         * TODO: This type should be cleaned up with `platform.design-system-team.popup-select-render-perf_i0s6m`.
+         *  - If discarded, revert to `focusLockEnabled: boolean`
+         *  - If kept, delete this type.
+         */
         option?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").OptionProps<Option, IsMulti, GroupBase<Option>>> | undefined;
         placeholder?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").PlaceholderProps<Option, IsMulti, GroupBase<Option>>> | undefined;
         singleValue?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").SingleValueProps<Option, IsMulti, GroupBase<Option>>> | undefined;

package/dist/types-ts4.5/PopupSelect/components.d.ts

@@ -8,6 +8,7 @@ interface MenuDialogProps {
     style: CSSProperties;
     children: ReactNode;
     id: string;
+    testId?: string;
 }
 export declare const MenuDialog: FC<MenuDialogProps>;
 export declare const DummyControl: FC<ControlProps<OptionType, boolean>>;

package/dist/types-ts4.5/extract-react-types/react-select-props.d.ts

@@ -32,13 +32,9 @@ interface NativeReactSelectProps<Option = unknown, IsMulti extends boolean = fal
     closeMenuOnSelect?: boolean;
     closeMenuOnScroll?: boolean | EventListener;
     /**
-     * This complex object includes all the compositional components that are used
-     * in `react-select`. If you wish to overwrite a component, pass in an object
-     * with the appropriate namespace.
-     *
-     * If you only wish to restyle a component, we recommend using the `styles` prop
-     * instead. For a list of the components that can be passed in, and the shape
-     * that will be passed to them, see [the components docs](/components)
+     This complex object includes all the compositional components that are used in `react-select`. If you wish to overwrite a component, pass in an object with the appropriate namespace.
+  
+     If you only wish to restyle a component, we recommend using the `styles` prop instead. For a list of the components that can be passed in, and the shape that will be passed to them, see [the components docs](/components).
      */
     components?: SelectComponentsConfig<Option, IsMulti, Group>;
     /** Whether the value of the select, e.g. SingleValue, should be displayed in the control. */
@@ -49,19 +45,14 @@ interface NativeReactSelectProps<Option = unknown, IsMulti extends boolean = fal
     escapeClearsValue?: boolean;
     /** Custom method to filter whether an option should be displayed in the menu */
     filterOption?: ((option?: FilterOptionOption<Option>, inputValue?: string) => boolean) | null;
-    /**
-     * Formats group labels in the menu as React components
-     *
-     * An example can be found in the [Replacing builtins](/advanced#replacing-builtins) documentation.
-     */
+    /** Formats group labels in the menu as React components. [Custom label example](/components/select/examples#customization). */
     formatGroupLabel?: (group?: Group) => ReactNode;
     /** Formats option labels in the menu and control as React components */
     formatOptionLabel?: (data?: Option, formatOptionLabelMeta?: FormatOptionLabelMeta<Option>) => ReactNode;
     /**
-     * Resolves option data to a string to be displayed as the label by components
-     *
-     * Note?: Failure to resolve to a string type can interfere with filtering and
-     * screen reader support.
+     Resolves option data to a string to be displayed as the label by components.
+  
+     Note?: Failure to resolve to a string type can interfere with filtering and screen reader support.
      */
     getOptionLabel?: GetOptionLabel<Option>;
     /** Resolves option data to a string to compare options and specify value attributes */
@@ -83,9 +74,7 @@ interface NativeReactSelectProps<Option = unknown, IsMulti extends boolean = fal
     /** Is the select in a state of loading (async) */
     isLoading?: boolean;
     /**
-     * Override the built-in logic to detect whether an option is disabled
-     *
-     * An example can be found in the [Replacing builtins](/advanced#replacing-builtins) documentation.
+     Override the built-in logic to detect whether an option is disabled.
      */
     isOptionDisabled?: (option?: Option, selectValue?: Options<Option>) => boolean;
     /** Override the built-in logic to detect whether an option is selected */
@@ -106,18 +95,11 @@ interface NativeReactSelectProps<Option = unknown, IsMulti extends boolean = fal
     maxMenuHeight?: number;
     /** Whether the menu is open */
     menuIsOpen?: boolean;
-    /**
-     * Default placement of the menu in relation to the control. 'auto' will flip
-     * when there isn't enough space below the control.
-     */
+    /** Default placement of the menu in relation to the control. 'auto' will flip when there isn't enough space below the control. */
     menuPlacement?: MenuPlacement;
     /** The CSS position value of the menu, when "fixed" extra layout management is required */
     menuPosition?: MenuPosition;
-    /**
-     * Whether the menu should use a portal, and where it should attach
-     *
-     * An example can be found in the [Portaling](/advanced#portaling) documentation
-     */
+    /** Whether the menu should use a portal, and where it should attach. */
     menuPortalTarget?: HTMLElement | null;
     /** Whether to block scroll events when the menu is open */
     menuShouldBlockScroll?: boolean;
@@ -161,11 +143,7 @@ interface NativeReactSelectProps<Option = unknown, IsMulti extends boolean = fal
     screenReaderStatus?: (obj?: {
         count?: number;
     }) => string;
-    /**
-     * Style modifier methods
-     *
-     * A basic example can be found at the bottom of the [Replacing builtins](/advanced#replacing-builtins) documentation.
-     */
+    /** Style modifier methods. */
     styles?: StylesConfig;
     /** Theme modifier method */
     theme?: ThemeConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/select",
-  "version": "16.5.14",
+  "version": "16.7.0",
   "description": "Select allows users to make a single selection or multiple selections from a list of options.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -64,6 +64,7 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
+    "@af/integration-testing": "*",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",

package/report.api.md

@@ -42,6 +42,7 @@ import { IndicatorSeparatorProps } from 'react-select';
 import { InputActionMeta } from 'react-select';
 import { InputProps } from 'react-select';
 import { jsx } from '@emotion/react';
+import { KeyboardEventHandler } from 'react';
 import { LoadingIndicatorProps } from 'react-select';
 import { MemoizedFn } from 'memoize-one';
 import { MenuListProps } from 'react-select';
@@ -1047,6 +1048,11 @@ export class PopupSelect<
       noOptionsMessage?:
         | StylesConfigFunction<NoticeProps<Option, IsMulti, GroupType<Option>>>
         | undefined;
+      /**
+       * TODO: This type should be cleaned up with `platform.design-system-team.popup-select-render-perf_i0s6m`.
+       *  - If discarded, revert to `focusLockEnabled: boolean`
+       *  - If kept, delete this type.
+       */
       option?:
         | StylesConfigFunction<
             OptionProps_2<Option, IsMulti, GroupType<Option>>
@@ -1081,6 +1087,8 @@ export class PopupSelect<
     actionMeta: ActionMeta<Option>,
   ) => void;
   // (undocumented)
+  handleTargetKeyDown: (event: React_2.KeyboardEvent) => void;
+  // (undocumented)
   isOpenControlled: boolean;
   // (undocumented)
   menuRef: HTMLElement | null;
@@ -1155,6 +1163,7 @@ export interface PopupSelectProps<
   // (undocumented)
   isOpen?: boolean;
   isSearchable?: boolean;
+  label?: string;
   maxMenuWidth?: number | string;
   minMenuWidth?: number | string;
   popperProps?: PopperPropsNoChildren<Modifiers>;
@@ -1180,6 +1189,8 @@ interface PopupSelectTriggerProps {
   // (undocumented)
   'aria-haspopup': 'true';
   // (undocumented)
+  onKeyDown: KeyboardEventHandler<HTMLElement>;
+  // (undocumented)
   ref: any;
 }
 

package/tmp/api-report-tmp.d.ts

@@ -31,6 +31,7 @@ import { IndicatorSeparatorProps } from 'react-select';
 import { InputActionMeta } from 'react-select';
 import { InputProps } from 'react-select';
 import { jsx } from '@emotion/react';
+import { KeyboardEventHandler } from 'react';
 import { LoadingIndicatorProps } from 'react-select';
 import { MemoizedFn } from 'memoize-one';
 import { MenuListProps } from 'react-select';
@@ -499,7 +500,11 @@ export class PopupSelect<Option = OptionType, IsMulti extends boolean = false, M
     multiValue?: StylesConfigFunction<MultiValueProps<Option, IsMulti, GroupType<Option>>> | undefined;
     multiValueLabel?: StylesConfigFunction<MultiValueProps<Option, IsMulti, GroupType<Option>>> | undefined;
     multiValueRemove?: StylesConfigFunction<MultiValueProps<Option, IsMulti, GroupType<Option>>> | undefined;
-    noOptionsMessage?: StylesConfigFunction<NoticeProps<Option, IsMulti, GroupType<Option>>> | undefined;
+    noOptionsMessage?: StylesConfigFunction<NoticeProps<Option, IsMulti, GroupType<Option>>> | undefined; /**
+    * TODO: This type should be cleaned up with `platform.design-system-team.popup-select-render-perf_i0s6m`.
+    *  - If discarded, revert to `focusLockEnabled: boolean`
+    *  - If kept, delete this type.
+    */
     option?: StylesConfigFunction<OptionProps_2<Option, IsMulti, GroupType<Option>>> | undefined;
     placeholder?: StylesConfigFunction<PlaceholderProps_2<Option, IsMulti, GroupType<Option>>> | undefined;
     singleValue?: StylesConfigFunction<SingleValueProps<Option, IsMulti, GroupType<Option>>> | undefined;
@@ -514,6 +519,8 @@ export class PopupSelect<Option = OptionType, IsMulti extends boolean = false, M
     // (undocumented)
     handleSelectChange: (value: ValueType<Option, IsMulti>, actionMeta: ActionMeta<Option>) => void;
     // (undocumented)
+    handleTargetKeyDown: (event: React_2.KeyboardEvent) => void;
+    // (undocumented)
     isOpenControlled: boolean;
     // (undocumented)
     menuRef: HTMLElement | null;
@@ -572,6 +579,7 @@ export interface PopupSelectProps<Option = OptionType, IsMulti extends boolean =
     // (undocumented)
     isOpen?: boolean;
     isSearchable?: boolean;
+    label?: string;
     maxMenuWidth?: number | string;
     minMenuWidth?: number | string;
     popperProps?: PopperPropsNoChildren<Modifiers>;
@@ -595,6 +603,8 @@ interface PopupSelectTriggerProps {
     // (undocumented)
     'aria-haspopup': 'true';
     // (undocumented)
+    onKeyDown: KeyboardEventHandler<HTMLElement>;
+    // (undocumented)
     ref: any;
 }