@atlaskit/select 16.5.12 → 16.5.13

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/select
 
+## 16.5.13
+
+### Patch Changes
+
+- [`a22d71ff733`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a22d71ff733) - [ux] Select component now respects explicitly passed value set to aria-describedby attribute.
+
 ## 16.5.12
 
 ### Patch Changes

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.12";
+var packageVersion = "16.5.13";
 var SelectWithoutAnalytics = (0, _createSelect.default)(_reactSelect.default);
 exports.SelectWithoutAnalytics = SelectWithoutAnalytics;
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');

package/dist/cjs/components/input-aria-describedby.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Input = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _reactSelect = require("react-select");
+var Input = function Input(props) {
+  var passed_describedby = props.selectProps['aria-describedby'];
+  var describedby = props['aria-describedby'] + (passed_describedby ? ' ' + passed_describedby : '');
+  return /*#__PURE__*/_react.default.createElement(_reactSelect.components.Input, (0, _extends2.default)({}, props, {
+    "aria-describedby": describedby
+  }));
+};
+exports.Input = Input;

package/dist/cjs/createSelect.js

@@ -19,6 +19,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactSelect = require("react-select");
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _reactFastCompare = _interopRequireDefault(require("react-fast-compare"));
+var _inputAriaDescribedby = require("./components/input-aria-describedby");
 var defaultComponents = _interopRequireWildcard(require("./components"));
 var _styles = _interopRequireDefault(require("./styles"));
 var _groupedOptionsAnnouncement = require("./utils/grouped-options-announcement");
@@ -107,7 +108,9 @@ function createSelect(WrappedComponent) {
     spacing: 'default',
     onClickPreventDefault: true,
     tabSelectsValue: false,
-    components: {},
+    components: {
+      Input: _inputAriaDescribedby.Input
+    },
     styles: {}
   }), _class;
 }

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

package/dist/es2019/components/input-aria-describedby.js

@@ -0,0 +1,10 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { components } from 'react-select';
+export const Input = props => {
+  const passed_describedby = props.selectProps['aria-describedby'];
+  const describedby = props['aria-describedby'] + (passed_describedby ? ' ' + passed_describedby : '');
+  return /*#__PURE__*/React.createElement(components.Input, _extends({}, props, {
+    "aria-describedby": describedby
+  }));
+};

package/dist/es2019/createSelect.js

@@ -4,6 +4,7 @@ import React, { Component } from 'react';
 import { mergeStyles } from 'react-select';
 import memoizeOne from 'memoize-one';
 import isEqual from 'react-fast-compare';
+import { Input } from './components/input-aria-describedby';
 import * as defaultComponents from './components';
 import baseStyles from './styles';
 import { onFocus, isOptionsGrouped } from './utils/grouped-options-announcement';
@@ -77,7 +78,9 @@ export default function createSelect(WrappedComponent) {
     spacing: 'default',
     onClickPreventDefault: true,
     tabSelectsValue: false,
-    components: {},
+    components: {
+      Input
+    },
     styles: {}
   }), _class;
 }

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

package/dist/esm/components/input-aria-describedby.js

@@ -0,0 +1,10 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { components } from 'react-select';
+export var Input = function Input(props) {
+  var passed_describedby = props.selectProps['aria-describedby'];
+  var describedby = props['aria-describedby'] + (passed_describedby ? ' ' + passed_describedby : '');
+  return /*#__PURE__*/React.createElement(components.Input, _extends({}, props, {
+    "aria-describedby": describedby
+  }));
+};

package/dist/esm/createSelect.js

@@ -16,6 +16,7 @@ import React, { Component } from 'react';
 import { mergeStyles } from 'react-select';
 import memoizeOne from 'memoize-one';
 import isEqual from 'react-fast-compare';
+import { Input } from './components/input-aria-describedby';
 import * as defaultComponents from './components';
 import baseStyles from './styles';
 import { onFocus, isOptionsGrouped } from './utils/grouped-options-announcement';
@@ -97,7 +98,9 @@ export default function createSelect(WrappedComponent) {
     spacing: 'default',
     onClickPreventDefault: true,
     tabSelectsValue: false,
-    components: {},
+    components: {
+      Input: Input
+    },
     styles: {}
   }), _class;
 }

package/dist/types/AsyncCreatableSelect.d.ts

@@ -36,7 +36,9 @@ declare const _default: {
         spacing: string;
         onClickPreventDefault: boolean;
         tabSelectsValue: boolean;
-        components: {};
+        components: {
+            Input: (props: import("react-select").InputProps<unknown, boolean, import("react-select").GroupBase<unknown>>) => JSX.Element;
+        };
         styles: {};
     };
     contextType?: import("react").Context<any> | undefined;

package/dist/types/AsyncSelect.d.ts

@@ -36,7 +36,9 @@ declare const _default: {
         spacing: string;
         onClickPreventDefault: boolean;
         tabSelectsValue: boolean;
-        components: {};
+        components: {
+            Input: (props: import("react-select").InputProps<unknown, boolean, import("react-select").GroupBase<unknown>>) => JSX.Element;
+        };
         styles: {};
     };
     contextType?: import("react").Context<any> | undefined;

package/dist/types/CreatableSelect.d.ts

@@ -36,7 +36,9 @@ declare const _default: {
         spacing: string;
         onClickPreventDefault: boolean;
         tabSelectsValue: boolean;
-        components: {};
+        components: {
+            Input: (props: import("react-select").InputProps<unknown, boolean, import("react-select").GroupBase<unknown>>) => JSX.Element;
+        };
         styles: {};
     };
     contextType?: import("react").Context<any> | undefined;

package/dist/types/Select.d.ts

@@ -36,7 +36,9 @@ export declare const SelectWithoutAnalytics: {
         spacing: string;
         onClickPreventDefault: boolean;
         tabSelectsValue: boolean;
-        components: {};
+        components: {
+            Input: (props: import("react-select").InputProps<unknown, boolean, import("react-select").GroupBase<unknown>>) => JSX.Element;
+        };
         styles: {};
     };
     contextType?: import("react").Context<any> | undefined;
@@ -78,7 +80,9 @@ declare const _default: {
         spacing: string;
         onClickPreventDefault: boolean;
         tabSelectsValue: boolean;
-        components: {};
+        components: {
+            Input: (props: import("react-select").InputProps<unknown, boolean, import("react-select").GroupBase<unknown>>) => JSX.Element;
+        };
         styles: {};
     };
     contextType?: import("react").Context<any> | undefined;

package/dist/types/components/input-aria-describedby.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { InputProps } from 'react-select';
+export declare const Input: (props: InputProps) => JSX.Element;

package/dist/types/createSelect.d.ts

@@ -38,7 +38,9 @@ export default function createSelect(WrappedComponent: ComponentType<any>): {
         spacing: string;
         onClickPreventDefault: boolean;
         tabSelectsValue: boolean;
-        components: {};
+        components: {
+            Input: (props: import("react-select").InputProps<unknown, boolean, GroupType<unknown>>) => JSX.Element;
+        };
         styles: {};
     };
     contextType?: React.Context<any> | undefined;

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

@@ -11,6 +11,8 @@ interface NativeReactSelectProps<Option = unknown, IsMulti extends boolean = fal
     'aria-label'?: string;
     /** HTML ID of an element that should be used as the label (for assistive tech) */
     'aria-labelledby'?: string;
+    /** Identifies the element (or elements) that describes the object. By default this is associated with the placeholder. The value in this prop is additional to the label, not replacing the default. Use this to give additional information, hints, or examples about how to complete a field (for assistive tech). */
+    'aria-describedby'?: string;
     /** Used to set the priority with which screen reader should treat updates to live regions. The possible settings are?: off, polite (default) or assertive */
     'aria-live'?: 'off' | 'polite' | 'assertive';
     /** Customize the messages used by the aria-live component. See react-select v5.4.0 documentation for full details */

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

@@ -36,7 +36,9 @@ declare const _default: {
         spacing: string;
         onClickPreventDefault: boolean;
         tabSelectsValue: boolean;
-        components: {};
+        components: {
+            Input: (props: import("react-select").InputProps<unknown, boolean, import("react-select").GroupBase<unknown>>) => JSX.Element;
+        };
         styles: {};
     };
     contextType?: import("react").Context<any> | undefined;

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

@@ -36,7 +36,9 @@ declare const _default: {
         spacing: string;
         onClickPreventDefault: boolean;
         tabSelectsValue: boolean;
-        components: {};
+        components: {
+            Input: (props: import("react-select").InputProps<unknown, boolean, import("react-select").GroupBase<unknown>>) => JSX.Element;
+        };
         styles: {};
     };
     contextType?: import("react").Context<any> | undefined;

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

@@ -36,7 +36,9 @@ declare const _default: {
         spacing: string;
         onClickPreventDefault: boolean;
         tabSelectsValue: boolean;
-        components: {};
+        components: {
+            Input: (props: import("react-select").InputProps<unknown, boolean, import("react-select").GroupBase<unknown>>) => JSX.Element;
+        };
         styles: {};
     };
     contextType?: import("react").Context<any> | undefined;

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

@@ -36,7 +36,9 @@ export declare const SelectWithoutAnalytics: {
         spacing: string;
         onClickPreventDefault: boolean;
         tabSelectsValue: boolean;
-        components: {};
+        components: {
+            Input: (props: import("react-select").InputProps<unknown, boolean, import("react-select").GroupBase<unknown>>) => JSX.Element;
+        };
         styles: {};
     };
     contextType?: import("react").Context<any> | undefined;
@@ -78,7 +80,9 @@ declare const _default: {
         spacing: string;
         onClickPreventDefault: boolean;
         tabSelectsValue: boolean;
-        components: {};
+        components: {
+            Input: (props: import("react-select").InputProps<unknown, boolean, import("react-select").GroupBase<unknown>>) => JSX.Element;
+        };
         styles: {};
     };
     contextType?: import("react").Context<any> | undefined;

package/dist/types-ts4.5/components/input-aria-describedby.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { InputProps } from 'react-select';
+export declare const Input: (props: InputProps) => JSX.Element;

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

@@ -38,7 +38,9 @@ export default function createSelect(WrappedComponent: ComponentType<any>): {
         spacing: string;
         onClickPreventDefault: boolean;
         tabSelectsValue: boolean;
-        components: {};
+        components: {
+            Input: (props: import("react-select").InputProps<unknown, boolean, GroupType<unknown>>) => JSX.Element;
+        };
         styles: {};
     };
     contextType?: React.Context<any> | undefined;

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

@@ -11,6 +11,8 @@ interface NativeReactSelectProps<Option = unknown, IsMulti extends boolean = fal
     'aria-label'?: string;
     /** HTML ID of an element that should be used as the label (for assistive tech) */
     'aria-labelledby'?: string;
+    /** Identifies the element (or elements) that describes the object. By default this is associated with the placeholder. The value in this prop is additional to the label, not replacing the default. Use this to give additional information, hints, or examples about how to complete a field (for assistive tech). */
+    'aria-describedby'?: string;
     /** Used to set the priority with which screen reader should treat updates to live regions. The possible settings are?: off, polite (default) or assertive */
     'aria-live'?: 'off' | 'polite' | 'assertive';
     /** Customize the messages used by the aria-live component. See react-select v5.4.0 documentation for full details */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/select",
-  "version": "16.5.12",
+  "version": "16.5.13",
   "description": "Select allows users to make a single selection or multiple selections from a list of options.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -43,7 +43,7 @@
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.18.0",
+    "@atlaskit/tokens": "^1.21.0",
     "@atlaskit/visually-hidden": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",

package/report.api.md

@@ -188,7 +188,11 @@ export const AsyncCreatableSelect: {
     spacing: string;
     onClickPreventDefault: boolean;
     tabSelectsValue: boolean;
-    components: {};
+    components: {
+      Input: (
+        props: InputProps<unknown, boolean, GroupType<unknown>>,
+      ) => JSX.Element;
+    };
     styles: {};
   };
   contextType?: Context<any> | undefined;
@@ -303,7 +307,11 @@ export const AsyncSelect: {
     spacing: string;
     onClickPreventDefault: boolean;
     tabSelectsValue: boolean;
-    components: {};
+    components: {
+      Input: (
+        props: InputProps<unknown, boolean, GroupType<unknown>>,
+      ) => JSX.Element;
+    };
     styles: {};
   };
   contextType?: Context<any> | undefined;
@@ -461,7 +469,11 @@ export const CreatableSelect: {
     spacing: string;
     onClickPreventDefault: boolean;
     tabSelectsValue: boolean;
-    components: {};
+    components: {
+      Input: (
+        props: InputProps<unknown, boolean, GroupType<unknown>>,
+      ) => JSX.Element;
+    };
     styles: {};
   };
   contextType?: Context<any> | undefined;
@@ -593,7 +605,11 @@ const _default: {
     spacing: string;
     onClickPreventDefault: boolean;
     tabSelectsValue: boolean;
-    components: {};
+    components: {
+      Input: (
+        props: InputProps<unknown, boolean, GroupType<unknown>>,
+      ) => JSX.Element;
+    };
     styles: {};
   };
   contextType?: Context<any> | undefined;
@@ -1299,7 +1315,11 @@ export const SelectWithoutAnalytics: {
     spacing: string;
     onClickPreventDefault: boolean;
     tabSelectsValue: boolean;
-    components: {};
+    components: {
+      Input: (
+        props: InputProps<unknown, boolean, GroupType<unknown>>,
+      ) => JSX.Element;
+    };
     styles: {};
   };
   contextType?: Context<any> | undefined;

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

@@ -106,7 +106,9 @@ export const AsyncCreatableSelect: {
         spacing: string;
         onClickPreventDefault: boolean;
         tabSelectsValue: boolean;
-        components: {};
+        components: {
+            Input: (props: InputProps<unknown, boolean, GroupType<unknown>>) => JSX.Element;
+        };
         styles: {};
     };
     contextType?: Context<any> | undefined;
@@ -150,7 +152,9 @@ export const AsyncSelect: {
         spacing: string;
         onClickPreventDefault: boolean;
         tabSelectsValue: boolean;
-        components: {};
+        components: {
+            Input: (props: InputProps<unknown, boolean, GroupType<unknown>>) => JSX.Element;
+        };
         styles: {};
     };
     contextType?: Context<any> | undefined;
@@ -231,7 +235,9 @@ export const CreatableSelect: {
         spacing: string;
         onClickPreventDefault: boolean;
         tabSelectsValue: boolean;
-        components: {};
+        components: {
+            Input: (props: InputProps<unknown, boolean, GroupType<unknown>>) => JSX.Element;
+        };
         styles: {};
     };
     contextType?: Context<any> | undefined;
@@ -291,7 +297,9 @@ const _default: {
         spacing: string;
         onClickPreventDefault: boolean;
         tabSelectsValue: boolean;
-        components: {};
+        components: {
+            Input: (props: InputProps<unknown, boolean, GroupType<unknown>>) => JSX.Element;
+        };
         styles: {};
     };
     contextType?: Context<any> | undefined;
@@ -645,7 +653,9 @@ export const SelectWithoutAnalytics: {
         spacing: string;
         onClickPreventDefault: boolean;
         tabSelectsValue: boolean;
-        components: {};
+        components: {
+            Input: (props: InputProps<unknown, boolean, GroupType<unknown>>) => JSX.Element;
+        };
         styles: {};
     };
     contextType?: Context<any> | undefined;