@atlaskit/select 16.5.1 → 16.5.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/select
 
+## 16.5.3
+
+### Patch Changes
+
+- [`774ed69ecef`](https://bitbucket.org/atlassian/atlassian-frontend/commits/774ed69ecef) - Internal changes to use space tokens for spacing values. There is no visual change.
+
+## 16.5.2
+
+### Patch Changes
+
+- [`449ab6d341b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/449ab6d341b) - Clear control keyboard access for Select component
+
 ## 16.5.1
 
 ### Patch Changes

package/dist/cjs/PopupSelect/components.js

@@ -47,7 +47,7 @@ exports.MenuDialog = MenuDialog;
 var DropdownIndicator = function DropdownIndicator() {
   return (0, _react.jsx)("div", {
     css: {
-      marginRight: 2,
+      marginRight: "var(--ds-space-025, 2px)",
       textAlign: 'center',
       width: 32
     }
@@ -62,7 +62,7 @@ var Control = function Control(_ref2) {
   return (0, _react.jsx)("div", {
     ref: innerRef,
     css: {
-      padding: '8px 8px 4px'
+      padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-100, 8px)", " ", "var(--ds-space-050, 4px)")
     }
   }, (0, _react.jsx)(_reactSelect.components.Control, (0, _extends2.default)({}, props, {
     innerProps: innerProps

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

package/dist/cjs/components/indicators.js

@@ -6,18 +6,33 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.LoadingIndicator = exports.DropdownIndicator = exports.ClearIndicator = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _reactSelect = require("react-select");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _selectClear = _interopRequireDefault(require("@atlaskit/icon/glyph/select-clear"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
-/** @jsx jsx */
-
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /** @jsx jsx */
+var iconContainerStyles = (0, _react.css)({
+  all: 'unset',
+  outline: 'revert',
+  display: 'flex',
+  alignItems: 'center'
+});
 var ClearIndicator = function ClearIndicator(props) {
-  return (0, _react.jsx)(_reactSelect.components.ClearIndicator, props, (0, _react.jsx)(_selectClear.default, {
+  return (0, _react.jsx)(_reactSelect.components.ClearIndicator, _objectSpread(_objectSpread({}, props), {}, {
+    innerProps: _objectSpread(_objectSpread({}, props.innerProps), {}, {
+      'aria-hidden': 'false'
+    })
+  }), (0, _react.jsx)("button", {
+    css: iconContainerStyles,
+    type: "button",
+    tabIndex: -1
+  }, (0, _react.jsx)(_selectClear.default, {
     size: "small",
     label: "clear"
-  }));
+  })));
 };
 exports.ClearIndicator = ClearIndicator;
 var DropdownIndicator = function DropdownIndicator(props) {

package/dist/cjs/components/input-options.js

@@ -241,7 +241,7 @@ var ControlOption = /*#__PURE__*/function (_Component) {
             alignItems: 'center',
             display: 'flex ',
             flexShrink: 0,
-            paddingRight: '4px',
+            paddingRight: "var(--ds-space-050, 4px)",
             // Here we are adding a border to the Checkbox and Radio SVG icons
             // This is an a11y fix for Select only for now but it may be rolled
             // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/select",
-	"version": "16.5.1",
+	"version": "16.5.3",
 	"sideEffects": false
 }

package/dist/es2019/PopupSelect/components.js

@@ -36,7 +36,7 @@ export const MenuDialog = ({
 
 const DropdownIndicator = () => jsx("div", {
   css: {
-    marginRight: 2,
+    marginRight: "var(--ds-space-025, 2px)",
     textAlign: 'center',
     width: 32
   }
@@ -50,7 +50,7 @@ const Control = ({
 }) => jsx("div", {
   ref: innerRef,
   css: {
-    padding: '8px 8px 4px'
+    padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-050, 4px)"}`
   }
 }, jsx(components.Control, _extends({}, props, {
   innerProps: innerProps

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

package/dist/es2019/components/indicators.js

@@ -5,10 +5,25 @@ import { components } from 'react-select';
 import Spinner from '@atlaskit/spinner';
 import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
 import DownIcon from '@atlaskit/icon/glyph/chevron-down';
-export const ClearIndicator = props => jsx(components.ClearIndicator, props, jsx(SelectClearIcon, {
+const iconContainerStyles = css({
+  all: 'unset',
+  outline: 'revert',
+  display: 'flex',
+  alignItems: 'center'
+});
+export const ClearIndicator = props => jsx(components.ClearIndicator, _extends({}, props, {
+  innerProps: {
+    ...props.innerProps,
+    'aria-hidden': 'false'
+  }
+}), jsx("button", {
+  css: iconContainerStyles,
+  type: "button",
+  tabIndex: -1
+}, jsx(SelectClearIcon, {
   size: "small",
   label: "clear"
-}));
+})));
 export const DropdownIndicator = props => jsx(components.DropdownIndicator, props, jsx(DownIcon, {
   label: "open"
 }));

package/dist/es2019/components/input-options.js

@@ -211,7 +211,7 @@ class ControlOption extends Component {
           alignItems: 'center',
           display: 'flex ',
           flexShrink: 0,
-          paddingRight: '4px',
+          paddingRight: "var(--ds-space-050, 4px)",
           // Here we are adding a border to the Checkbox and Radio SVG icons
           // This is an a11y fix for Select only for now but it may be rolled
           // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/select",
-	"version": "16.5.1",
+	"version": "16.5.3",
 	"sideEffects": false
 }

package/dist/esm/PopupSelect/components.js

@@ -41,7 +41,7 @@ export var MenuDialog = function MenuDialog(_ref) {
 var DropdownIndicator = function DropdownIndicator() {
   return jsx("div", {
     css: {
-      marginRight: 2,
+      marginRight: "var(--ds-space-025, 2px)",
       textAlign: 'center',
       width: 32
     }
@@ -56,7 +56,7 @@ var Control = function Control(_ref2) {
   return jsx("div", {
     ref: innerRef,
     css: {
-      padding: '8px 8px 4px'
+      padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-100, 8px)", " ", "var(--ds-space-050, 4px)")
     }
   }, jsx(components.Control, _extends({}, props, {
     innerProps: innerProps

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

package/dist/esm/components/indicators.js

@@ -1,15 +1,32 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /** @jsx jsx */
 import { jsx, css } from '@emotion/react';
 import { components } from 'react-select';
 import Spinner from '@atlaskit/spinner';
 import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
 import DownIcon from '@atlaskit/icon/glyph/chevron-down';
+var iconContainerStyles = css({
+  all: 'unset',
+  outline: 'revert',
+  display: 'flex',
+  alignItems: 'center'
+});
 export var ClearIndicator = function ClearIndicator(props) {
-  return jsx(components.ClearIndicator, props, jsx(SelectClearIcon, {
+  return jsx(components.ClearIndicator, _objectSpread(_objectSpread({}, props), {}, {
+    innerProps: _objectSpread(_objectSpread({}, props.innerProps), {}, {
+      'aria-hidden': 'false'
+    })
+  }), jsx("button", {
+    css: iconContainerStyles,
+    type: "button",
+    tabIndex: -1
+  }, jsx(SelectClearIcon, {
     size: "small",
     label: "clear"
-  }));
+  })));
 };
 export var DropdownIndicator = function DropdownIndicator(props) {
   return jsx(components.DropdownIndicator, props, jsx(DownIcon, {

package/dist/esm/components/input-options.js

@@ -235,7 +235,7 @@ var ControlOption = /*#__PURE__*/function (_Component) {
             alignItems: 'center',
             display: 'flex ',
             flexShrink: 0,
-            paddingRight: '4px',
+            paddingRight: "var(--ds-space-050, 4px)",
             // Here we are adding a border to the Checkbox and Radio SVG icons
             // This is an a11y fix for Select only for now but it may be rolled
             // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/select",
-	"version": "16.5.1",
+	"version": "16.5.3",
 	"sideEffects": false
 }

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

@@ -100,7 +100,13 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
         mergedComponents: {
             Control: React.FC<import("../types").ControlProps<OptionType, boolean>>;
             DropdownIndicator: () => import("@emotion/react").jsx.JSX.Element;
-            Menu: ({ children, innerProps, ...props }: import("../types").MenuProps<OptionType, boolean>) => import("@emotion/react").jsx.JSX.Element;
+            Menu: ({ children, innerProps, ...props }: import("../types").MenuProps<OptionType, boolean>) => import("@emotion/react").jsx.JSX.Element; /**
+              The props passed down to React Popper.
+          
+              Use these to override the default positioning strategy, behaviour and placement used by this library.
+              For more information, see the Popper Props section below, or [React Popper documentation](https://popper.js.org/react-popper/v2/render-props).
+          
+             */
         };
         mergedPopperProps: PopperPropsNoChildren<string>;
         focusLockEnabled?: undefined;
@@ -110,7 +116,13 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
         mergedComponents: {
             Control: React.FC<import("../types").ControlProps<OptionType, boolean>>;
             DropdownIndicator: () => import("@emotion/react").jsx.JSX.Element;
-            Menu: ({ children, innerProps, ...props }: import("../types").MenuProps<OptionType, boolean>) => import("@emotion/react").jsx.JSX.Element;
+            Menu: ({ children, innerProps, ...props }: import("../types").MenuProps<OptionType, boolean>) => import("@emotion/react").jsx.JSX.Element; /**
+              The props passed down to React Popper.
+          
+              Use these to override the default positioning strategy, behaviour and placement used by this library.
+              For more information, see the Popper Props section below, or [React Popper documentation](https://popper.js.org/react-popper/v2/render-props).
+          
+             */
         };
         mergedPopperProps: PopperPropsNoChildren<string>;
     };

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

@@ -100,7 +100,13 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
         mergedComponents: {
             Control: React.FC<import("../types").ControlProps<OptionType, boolean>>;
             DropdownIndicator: () => import("@emotion/react").jsx.JSX.Element;
-            Menu: ({ children, innerProps, ...props }: import("../types").MenuProps<OptionType, boolean>) => import("@emotion/react").jsx.JSX.Element;
+            Menu: ({ children, innerProps, ...props }: import("../types").MenuProps<OptionType, boolean>) => import("@emotion/react").jsx.JSX.Element; /**
+              The props passed down to React Popper.
+          
+              Use these to override the default positioning strategy, behaviour and placement used by this library.
+              For more information, see the Popper Props section below, or [React Popper documentation](https://popper.js.org/react-popper/v2/render-props).
+          
+             */
         };
         mergedPopperProps: PopperPropsNoChildren<string>;
         focusLockEnabled?: undefined;
@@ -110,7 +116,13 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
         mergedComponents: {
             Control: React.FC<import("../types").ControlProps<OptionType, boolean>>;
             DropdownIndicator: () => import("@emotion/react").jsx.JSX.Element;
-            Menu: ({ children, innerProps, ...props }: import("../types").MenuProps<OptionType, boolean>) => import("@emotion/react").jsx.JSX.Element;
+            Menu: ({ children, innerProps, ...props }: import("../types").MenuProps<OptionType, boolean>) => import("@emotion/react").jsx.JSX.Element; /**
+              The props passed down to React Popper.
+          
+              Use these to override the default positioning strategy, behaviour and placement used by this library.
+              For more information, see the Popper Props section below, or [React Popper documentation](https://popper.js.org/react-popper/v2/render-props).
+          
+             */
         };
         mergedPopperProps: PopperPropsNoChildren<string>;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/select",
-  "version": "16.5.1",
+  "version": "16.5.3",
   "description": "Select allows users to make a single selection or multiple selections from a list of options.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -69,7 +69,7 @@
     "@atlaskit/drawer": "^7.5.0",
     "@atlaskit/form": "^8.11.0",
     "@atlaskit/logo": "^13.14.0",
-    "@atlaskit/modal-dialog": "^12.5.0",
+    "@atlaskit/modal-dialog": "^12.6.0",
     "@atlaskit/radio": "^5.6.0",
     "@atlaskit/section-message": "^6.4.0",
     "@atlaskit/ssr": "*",