@atlaskit/select 16.6.0 → 16.7.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

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", "testId"];
+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; }
@@ -322,8 +322,10 @@ 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);
@@ -346,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;
@@ -383,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,

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.6.0";
+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

@@ -298,8 +298,10 @@ export default class PopupSelect extends PureComponent {
     _defineProperty(this, "renderSelect", () => {
       const {
         footer,
+        label,
         maxMenuWidth,
         minMenuWidth,
+        placeholder,
         target,
         testId,
         ...props
@@ -325,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;
@@ -363,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,

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.6.0";
+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", "testId"];
+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); }; }
@@ -312,8 +312,10 @@ 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);
@@ -336,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;
@@ -373,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,

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.6.0";
+var packageVersion = "16.7.0";
 export var SelectWithoutAnalytics = createSelect(Select);
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({

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

@@ -75,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> {
@@ -175,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/PopupSelect.d.ts

@@ -75,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> {
@@ -175,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/select",
-  "version": "16.6.0",
+  "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/"

package/report.api.md

@@ -1048,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>>
@@ -1158,6 +1163,7 @@ export interface PopupSelectProps<
   // (undocumented)
   isOpen?: boolean;
   isSearchable?: boolean;
+  label?: string;
   maxMenuWidth?: number | string;
   minMenuWidth?: number | string;
   popperProps?: PopperPropsNoChildren<Modifiers>;

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

@@ -500,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;
@@ -575,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>;