@atlaskit/select 16.5.12 → 16.5.14

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/select
 
+## 16.5.14
+
+### Patch Changes
+
+- [`aee1bdd977d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/aee1bdd977d) - Update select checkbox and radio icon to have 1px border under FF
+
+## 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
@@ -1525,21 +1537,21 @@
 
 ## 6.1.4
 
-- [patch][6ab8e95" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/6ab8e95"
+- [patch][6ab8e95](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/6ab8e95"
   d):
 
   - Removed wrapping div from around selects as it is no longer needed when using the latest inline-dialog component.
 
 ## 6.1.3
 
-- [patch][dab963b" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/dab963b"
+- [patch][dab963b](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/dab963b"
   d):
 
   - Make sure portal binds to DOM only
 
 ## 6.1.2
 
-- [patch][0782e03" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/0782e03"
+- [patch][0782e03](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/0782e03"
   d):
 
   - bumped react-select to 2.1.1 minor bug fixes including mirroring the logic for the backspace key to delete, and stripping theme props from Input and GroupHeading dom elements. See https://github.com/JedWatson/react-select/releases/tag/v2.1.1 for details

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.14";
 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/components/input-options.js

@@ -17,6 +17,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _react2 = require("react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _radio = _interopRequireDefault(require("@atlaskit/icon/glyph/radio"));
 var _checkbox = _interopRequireDefault(require("@atlaskit/icon/glyph/checkbox"));
 var _components = require("@atlaskit/theme/components");
@@ -185,7 +186,7 @@ var baseIconStyles = (0, _react.css)({
   // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& svg rect, & svg circle:first-of-type': {
-    strokeWidth: "var(--ds-border-width-outline, 2px)",
+    strokeWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "var(--ds-border-width, 1px)" : "var(--ds-border-width-outline, 2px)",
     strokeLinejoin: 'round'
   }
 });

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.14";
 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/components/input-options.js

@@ -3,6 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { Component } from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import RadioIcon from '@atlaskit/icon/glyph/radio';
 import CheckboxIcon from '@atlaskit/icon/glyph/checkbox';
 import { themed } from '@atlaskit/theme/components';
@@ -171,7 +172,7 @@ const baseIconStyles = css({
   // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& svg rect, & svg circle:first-of-type': {
-    strokeWidth: "var(--ds-border-width-outline, 2px)",
+    strokeWidth: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "var(--ds-border-width, 1px)" : "var(--ds-border-width-outline, 2px)",
     strokeLinejoin: 'round'
   }
 });

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.14";
 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/components/input-options.js

@@ -19,6 +19,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { Component } from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import RadioIcon from '@atlaskit/icon/glyph/radio';
 import CheckboxIcon from '@atlaskit/icon/glyph/checkbox';
 import { themed } from '@atlaskit/theme/components';
@@ -179,7 +180,7 @@ var baseIconStyles = css({
   // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& svg rect, & svg circle:first-of-type': {
-    strokeWidth: "var(--ds-border-width-outline, 2px)",
+    strokeWidth: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "var(--ds-border-width, 1px)" : "var(--ds-border-width-outline, 2px)",
     strokeLinejoin: 'round'
   }
 });

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.14",
   "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.22.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;