@atlaskit/select 18.1.3 → 18.3.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/select
 
+## 18.3.0
+
+### Minor Changes
+
+- [#156026](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/156026)
+  [`709b9c76673df`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/709b9c76673df) -
+  Add clearControlLabel to select component.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 18.2.0
+
+### Minor Changes
+
+- [#155000](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/155000)
+  [`46cb627917bf7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/46cb627917bf7) -
+  Export props for `IndicatorsContainer` component.
+
 ## 18.1.3
 
 ### Patch Changes

package/codemods/18.3.0-select-props.tsx

@@ -0,0 +1,156 @@
+import type {
+	API,
+	ASTPath,
+	default as core,
+	FileInfo,
+	ImportDeclaration,
+	ImportSpecifier,
+	Options,
+} from 'jscodeshift';
+
+function getSpecifier(
+	j: core.JSCodeshift,
+	source: ReturnType<typeof j>,
+	specifier: string,
+	imported?: string,
+) {
+	let specifiers;
+	if (imported) {
+		specifiers = source
+			.find(j.ImportDeclaration)
+			.filter((path: ASTPath<ImportDeclaration>) => path.node.source.value === specifier)
+			.find(j.ImportSpecifier)
+			.filter((path: ASTPath<ImportSpecifier>) => path.value.imported.name === imported);
+	} else {
+		specifiers = source
+			.find(j.ImportDeclaration)
+			.filter((path: ASTPath<ImportDeclaration>) => path.node.source.value === specifier)
+			.find(j.ImportDefaultSpecifier);
+	}
+
+	if (!specifiers.length) {
+		return null;
+	}
+
+	return specifiers.nodes()[0]!.local!.name;
+}
+
+function getJSXAttributesByName(j: core.JSCodeshift, element: ASTPath<any>, attributeName: string) {
+	return j(element)
+		.find(j.JSXOpeningElement)
+		.find(j.JSXAttribute)
+		.filter((attribute) => {
+			const matches = j(attribute)
+				.find(j.JSXIdentifier)
+				.filter((identifier) => identifier.value.name === attributeName);
+			return Boolean(matches.length);
+		});
+}
+
+function updateSelectProps(j: core.JSCodeshift, source: ReturnType<typeof j>, variant?: string) {
+	const specifier = getSpecifier(j, source, '@atlaskit/select', variant);
+
+	if (!specifier) {
+		return;
+	}
+
+	source.findJSXElements(specifier).forEach((element) => {
+		const propsToRemove = [
+			'aria-errormessage',
+			'aria-live',
+			'ariaLiveMessages',
+			'captureMenuOnScroll',
+			'delimiter',
+			'isRTL',
+			'menuShouldBlockScroll',
+			'screenReaderStatus',
+			'theme',
+		];
+
+		const propsToReplace = {
+			'aria-invalid': 'isInvalid',
+			'aria-label': 'label',
+			'aria-labelledby': 'labelId',
+			disabled: 'isDisabled',
+		} as const;
+
+		propsToRemove.forEach((propName) => getJSXAttributesByName(j, element, propName).remove());
+
+		(Object.keys(propsToReplace) as Array<keyof typeof propsToReplace>).forEach((key) =>
+			getJSXAttributesByName(j, element, key).forEach((attribute) => {
+				j(attribute).find(j.JSXIdentifier).replaceWith(j.jsxIdentifier(propsToReplace[key]));
+			}),
+		);
+
+		// This needs to switch error to true and remove if default/success are used
+		getJSXAttributesByName(j, element, 'validationState').forEach((attribute) => {
+			// If validationState is 'default' or 'success' just remove
+			j(attribute)
+				.filter((attr) => attr.node.value.value.match(/default|success/))
+				.remove();
+
+			// If validationState is 'error' replace with isInvalid
+			j(attribute)
+				.filter((attr) => attr.node.value && attr.node.value.value === 'error')
+				.replaceWith(j.jsxAttribute(j.jsxIdentifier('isInvalid')));
+
+			// TODO: In order to complete the deprecation of validationState, we need to clean up custom props name isInvalid
+			// j(attribute)
+			// 	.find(j.JSXExpressionContainer)
+			// 	.filter((container) => {
+			// 		return j(container).find(j.BooleanLiteral).length === 0;
+			// 	})
+			// 	.forEach((container) => {
+			// 		j(container).replaceWith(
+			// 			j.jsxExpressionContainer(
+			// 				// Type 'JSXEmptyExpression' is not assignable to type 'ExpressionKind'.
+			// 				// @ts-ignore TS2345
+			// 				j.unaryExpression('!', container.node.expression),
+			// 			),
+			// 		);
+			// 	});
+		});
+
+		// TODO: Probably need to wait until Select a11y improvements have shipped
+		// getJSXAttributesByName(j, element, 'escapeClearsValue').remove();
+
+		// TODO: Need to work out how isRequired is spread from Field
+		// getJSXAttributesByName(j, element, 'aria-required').forEach((attribute) => {
+		// 	j(attribute).find(j.JSXIdentifier).replaceWith(j.jsxIdentifier('isRequired'));
+		// });
+
+		// TODO: Need to work out how isRequired is spread from Field
+		// getJSXAttributesByName(j, element, 'required').forEach((attribute) => {
+		// 	j(attribute).find(j.JSXIdentifier).replaceWith(j.jsxIdentifier('isRequired'));
+		// });
+	});
+}
+
+function hasImportDeclaration(
+	j: core.JSCodeshift,
+	source: ReturnType<typeof j>,
+	importPath: string,
+) {
+	return !!source.find(j.ImportDeclaration).filter((path) => path.node.source.value === importPath)
+		.length;
+}
+
+export default function transformer(fileInfo: FileInfo, { jscodeshift: j }: API, options: Options) {
+	const source = j(fileInfo.source);
+
+	if (hasImportDeclaration(j, source, '@atlaskit/select')) {
+		updateSelectProps(j, source);
+		[
+			'AsyncSelect',
+			'CheckboxSelect',
+			'CountrySelect',
+			'CreatableSelect',
+			'PopupSelect',
+			'RadioSelect',
+		].forEach((variant) => updateSelectProps(j, source, variant));
+
+		return source.toSource(options.printOptions || { quote: 'single' });
+	}
+
+	return fileInfo.source;
+}

package/codemods/__tests__/next-select-props.tsx

@@ -0,0 +1,307 @@
+jest.autoMockOff();
+
+import * as transformer from '../18.3.0-select-props';
+
+const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
+
+describe('Update Select props', () => {
+	defineInlineTest(
+		{ ...transformer, parser: 'tsx' },
+		{},
+		`
+			import Foo from '@atlaskit/select';
+
+			const App = () => {
+				return (
+					<Foo
+						aria-errormessage={''}
+						aria-live={''}
+						ariaLiveMessages={''}
+						captureMenuOnScroll={true}
+						delimiter={''}
+						isRTL={true}
+						menuShouldBlockScroll={true}
+						screenReaderStatus={''}
+						theme={{}}
+					/>
+				);
+			};
+		`,
+		`
+			import Foo from '@atlaskit/select';
+
+			const App = () => {
+				return <Foo />;
+			};
+		`,
+		'should remove all deleted props with aliased import name',
+	);
+
+	defineInlineTest(
+		{ ...transformer, parser: 'tsx' },
+		{},
+		`
+			import Select from '@foo/bar';
+
+			const App = () => {
+				return (
+					<Select
+						aria-errormessage={''}
+						aria-live={''}
+						ariaLiveMessages={''}
+						captureMenuOnScroll={true}
+						delimiter={''}
+						isRTL={true}
+						menuShouldBlockScroll={true}
+						screenReaderStatus={''}
+						theme={{}}
+					/>
+				);
+			};
+		`,
+		`
+			import Select from '@foo/bar';
+
+			const App = () => {
+				return (
+					<Select
+						aria-errormessage={''}
+						aria-live={''}
+						ariaLiveMessages={''}
+						captureMenuOnScroll={true}
+						delimiter={''}
+						isRTL={true}
+						menuShouldBlockScroll={true}
+						screenReaderStatus={''}
+						theme={{}}
+					/>
+				);
+			};
+		`,
+		'should not mutate if not from @atlaskit/select',
+	);
+
+	[
+		'Select',
+		'AsyncSelect',
+		'CheckboxSelect',
+		'CountrySelect',
+		'CreatableSelect',
+		'PopupSelect',
+		'RadioSelect',
+	].forEach((identifier) => {
+		const variant = identifier === `Select` ? 'Select' : `{ ${identifier} }`;
+		defineInlineTest(
+			{ ...transformer, parser: 'tsx' },
+			{},
+			`
+				import ${variant} from '@atlaskit/select';
+
+				const App = () => {
+					return (
+						<${identifier}
+							aria-errormessage={''}
+							aria-live={''}
+							ariaLiveMessages={''}
+							captureMenuOnScroll={true}
+							delimiter={''}
+							isRTL={true}
+							menuShouldBlockScroll={true}
+							screenReaderStatus={''}
+							theme={{}}
+						/>
+					);
+				};
+      		`,
+			`
+				import ${variant} from '@atlaskit/select';
+
+				const App = () => {
+					return <${identifier} />;
+				};
+      		`,
+			`should remove all deleted props for ${identifier} `,
+		);
+
+		defineInlineTest(
+			{ ...transformer, parser: 'tsx' },
+			{},
+			`
+				import ${variant} from '@atlaskit/select';
+
+				const App = () => {
+					return <${identifier} aria-invalid={true} aria-label={''} aria-labelledby={''} disabled={''} />;
+				};
+      		`,
+			`
+				import ${variant} from '@atlaskit/select';
+
+				const App = () => {
+					return <${identifier} isInvalid={true} label={''} labelId={''} isDisabled={''} />;
+				};
+      		`,
+			`should transform all replaced props for ${identifier}`,
+		);
+
+		defineInlineTest(
+			{ ...transformer, parser: 'tsx' },
+			{},
+			`
+				import ${variant} from '@atlaskit/select';
+
+				const App = () => {
+					return <${identifier} validationState='error' />;
+				};
+			`,
+			`
+				import ${variant} from '@atlaskit/select';
+
+				const App = () => {
+					return <${identifier} isInvalid />;
+				};
+			`,
+			`should transform validationState="error" to isInvalid for ${identifier}`,
+		);
+
+		defineInlineTest(
+			{ ...transformer, parser: 'tsx' },
+			{},
+			`
+				import ${variant} from '@atlaskit/select';
+
+				const App = () => {
+					return <${identifier} validationState = 'default' />;
+				};
+			`,
+			`
+				import ${variant} from '@atlaskit/select';
+
+				const App = () => {
+					return <${identifier} />;
+				};
+			`,
+			`should remove validationState when set to "default" for ${identifier}`,
+		);
+
+		defineInlineTest(
+			{ ...transformer, parser: 'tsx' },
+			{},
+			`
+				import ${variant} from '@atlaskit/select';
+
+				const App = () => {
+					return <${identifier} validationState = 'success' />;
+				};
+			`,
+			`
+				import ${variant} from '@atlaskit/select';
+
+				const App = () => {
+					return <${identifier} />;
+				};
+			`,
+			`should remove validationState when set to "success" for ${identifier}`,
+		);
+
+		// TODO: Enable once we have cleaned up validationState
+		// defineInlineTest(
+		// 	{ ...transformer, parser: 'tsx' },
+		// 	{},
+		// 	`
+		//       import Select from '@atlaskit/select';
+
+		//       const App = () => {
+		//         return (
+		//           <${identifier}
+		// 						validationState={value}
+		// 					/>
+		//         )
+		//       }
+		//     `,
+		// 	`
+		//       import Select from '@atlaskit/select';
+
+		//       const App = () => {
+		//         return (
+		//           <${identifier}
+		// 						validationState={!value}
+		// 					/>
+		//         );
+		//       }
+		//     `,
+		// 	'should transform validationState to isInvalid and negate when an expression is provided"',
+		// );
+
+		defineInlineTest(
+			{ ...transformer, parser: 'tsx' },
+			{},
+			`
+				const App = () => {
+					return (
+						<${identifier}
+							aria-errormessage={''}
+							aria-live={''}
+							ariaLiveMessages={''}
+							captureMenuOnScroll={true}
+							delimiter={''}
+							isRTL={true}
+							menuShouldBlockScroll={true}
+							screenReaderStatus={''}
+							theme={{}}
+						/>
+					);
+				};
+			`,
+			`
+				const App = () => {
+					return (
+						<${identifier}
+							aria-errormessage={''}
+							aria-live={''}
+							ariaLiveMessages={''}
+							captureMenuOnScroll={true}
+							delimiter={''}
+							isRTL={true}
+							menuShouldBlockScroll={true}
+							screenReaderStatus={''}
+							theme={{}}
+						/>
+					);
+				};
+			`,
+			'should not mutate JSX if import is missing',
+		);
+
+		defineInlineTest(
+			{ ...transformer, parser: 'tsx' },
+			{},
+			`
+				import ${identifier === 'Select' ? `Ak${identifier}` : `{${identifier} as Ak${identifier}}`} from '@atlaskit/select';
+
+				const App = () => {
+					return (
+						<Ak${identifier}
+							aria-errormessage={''}
+							aria-live={''}
+							ariaLiveMessages={''}
+							captureMenuOnScroll={true}
+							delimiter={''}
+							isRTL={true}
+							menuShouldBlockScroll={true}
+							screenReaderStatus={''}
+							theme={{}}
+						/>
+					);
+				};
+      		`,
+			`
+				import ${identifier === 'Select' ? `Ak${identifier}` : `{${identifier} as Ak${identifier}}`} from '@atlaskit/select';
+
+				const App = () => {
+					return <Ak${identifier} />;
+				};
+      		`,
+			`should handle named imports for ${identifier} `,
+		);
+	});
+});

package/dist/cjs/Select.js

@@ -11,7 +11,7 @@ var _createSelect = _interopRequireDefault(require("./createSelect"));
 /* eslint-disable @repo/internal/react/require-jsdoc */
 
 var packageName = "@atlaskit/select";
-var packageVersion = "18.1.3";
+var packageVersion = "18.3.0";
 var SelectWithoutAnalytics = exports.SelectWithoutAnalytics = (0, _createSelect.default)(_reactSelect.default);
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
 var Select = (0, _analyticsNext.withAnalyticsContext)({

package/dist/cjs/components/indicators.js

@@ -7,17 +7,22 @@ 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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("@emotion/react");
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
 var _crossCircleSelectClear = _interopRequireDefault(require("@atlaskit/icon/utility/migration/cross-circle--select-clear"));
 var _primitives = require("@atlaskit/primitives");
 var _reactSelect = require("@atlaskit/react-select");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
-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) { (0, _defineProperty2.default)(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; } /* eslint-disable @repo/internal/react/require-jsdoc */ /**
+var _excluded = ["clearControlLabel"];
+/* eslint-disable @repo/internal/react/require-jsdoc */
+/**
  * @jsxRuntime classic
  * @jsx jsx
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+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) { (0, _defineProperty2.default)(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; }
 var iconContainerStyles = (0, _primitives.xcss)({
   all: 'unset',
   outline: 'revert',
@@ -29,16 +34,20 @@ var iconContainerStyles = (0, _primitives.xcss)({
 var dropdownWrapperStyles = (0, _primitives.xcss)({
   padding: 'space.075'
 });
-var ClearIndicator = exports.ClearIndicator = function ClearIndicator(props) {
+var ClearIndicator = exports.ClearIndicator = function ClearIndicator(_ref) {
+  var _ref$clearControlLabe = _ref.clearControlLabel,
+    clearControlLabel = _ref$clearControlLabe === void 0 ? 'clear' : _ref$clearControlLabe,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return (0, _react.jsx)(_reactSelect.components.ClearIndicator, _objectSpread(_objectSpread({}, props), {}, {
     innerProps: _objectSpread(_objectSpread({}, props.innerProps), {}, {
       'aria-hidden': 'false'
     })
   }), (0, _react.jsx)(_primitives.Pressable, {
     xcss: iconContainerStyles,
-    tabIndex: -1
+    tabIndex: -1,
+    "aria-label": clearControlLabel
   }, (0, _react.jsx)(_crossCircleSelectClear.default, {
-    label: "clear",
+    label: "",
     color: "currentColor",
     LEGACY_size: "small",
     LEGACY_margin: "var(--ds-space-negative-025, -0.125rem)"

package/dist/es2019/Select.js

@@ -3,7 +3,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import ReactSelect from '@atlaskit/react-select';
 import createSelect from './createSelect';
 const packageName = "@atlaskit/select";
-const packageVersion = "18.1.3";
+const packageVersion = "18.3.0";
 export const SelectWithoutAnalytics = createSelect(ReactSelect);
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 const Select = withAnalyticsContext({

package/dist/es2019/components/indicators.js

@@ -22,20 +22,26 @@ const iconContainerStyles = xcss({
 const dropdownWrapperStyles = xcss({
   padding: 'space.075'
 });
-export const ClearIndicator = props => jsx(components.ClearIndicator, _extends({}, props, {
-  innerProps: {
-    ...props.innerProps,
-    'aria-hidden': 'false'
-  }
-}), jsx(Pressable, {
-  xcss: iconContainerStyles,
-  tabIndex: -1
-}, jsx(CrossIcon, {
-  label: "clear",
-  color: "currentColor",
-  LEGACY_size: "small",
-  LEGACY_margin: "var(--ds-space-negative-025, -0.125rem)"
-})));
+export const ClearIndicator = ({
+  clearControlLabel = 'clear',
+  ...props
+}) => {
+  return jsx(components.ClearIndicator, _extends({}, props, {
+    innerProps: {
+      ...props.innerProps,
+      'aria-hidden': 'false'
+    }
+  }), jsx(Pressable, {
+    xcss: iconContainerStyles,
+    tabIndex: -1,
+    "aria-label": clearControlLabel
+  }, jsx(CrossIcon, {
+    label: "",
+    color: "currentColor",
+    LEGACY_size: "small",
+    LEGACY_margin: "var(--ds-space-negative-025, -0.125rem)"
+  })));
+};
 export const DropdownIndicator = props =>
 // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 jsx(components.DropdownIndicator, props, jsx(Inline, {

package/dist/esm/Select.js

@@ -3,7 +3,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import ReactSelect from '@atlaskit/react-select';
 import createSelect from './createSelect';
 var packageName = "@atlaskit/select";
-var packageVersion = "18.1.3";
+var packageVersion = "18.3.0";
 export var SelectWithoutAnalytics = createSelect(ReactSelect);
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 var Select = withAnalyticsContext({

package/dist/esm/components/indicators.js

@@ -1,5 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["clearControlLabel"];
 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; }
 /* eslint-disable @repo/internal/react/require-jsdoc */
@@ -25,16 +27,20 @@ var iconContainerStyles = xcss({
 var dropdownWrapperStyles = xcss({
   padding: 'space.075'
 });
-export var ClearIndicator = function ClearIndicator(props) {
+export var ClearIndicator = function ClearIndicator(_ref) {
+  var _ref$clearControlLabe = _ref.clearControlLabel,
+    clearControlLabel = _ref$clearControlLabe === void 0 ? 'clear' : _ref$clearControlLabe,
+    props = _objectWithoutProperties(_ref, _excluded);
   return jsx(components.ClearIndicator, _objectSpread(_objectSpread({}, props), {}, {
     innerProps: _objectSpread(_objectSpread({}, props.innerProps), {}, {
       'aria-hidden': 'false'
     })
   }), jsx(Pressable, {
     xcss: iconContainerStyles,
-    tabIndex: -1
+    tabIndex: -1,
+    "aria-label": clearControlLabel
   }, jsx(CrossIcon, {
-    label: "clear",
+    label: "",
     color: "currentColor",
     LEGACY_size: "small",
     LEGACY_margin: "var(--ds-space-negative-025, -0.125rem)"

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

@@ -4,6 +4,6 @@
  */
 import { jsx } from '@emotion/react';
 import { type ClearIndicatorProps, type DropdownIndicatorProps, type LoadingIndicatorProps } from '../types';
-export declare const ClearIndicator: <Option extends unknown, IsMulti extends boolean = false>(props: ClearIndicatorProps<Option, IsMulti>) => jsx.JSX.Element;
+export declare const ClearIndicator: <Option extends unknown, IsMulti extends boolean = false>({ clearControlLabel, ...props }: ClearIndicatorProps<Option, IsMulti>) => jsx.JSX.Element;
 export declare const DropdownIndicator: <Option extends unknown, IsMulti extends boolean = false>(props: DropdownIndicatorProps<Option, IsMulti>) => jsx.JSX.Element;
 export declare const LoadingIndicator: <Option extends unknown, IsMulti extends boolean = false>(props: LoadingIndicatorProps<Option, IsMulti>) => jsx.JSX.Element;

package/dist/types/index.d.ts

@@ -13,7 +13,7 @@ export { default as CountrySelect } from './CountrySelect';
 export { default as RadioSelect } from './RadioSelect';
 export { default as PopupSelect } from './PopupSelect';
 export type { PopupSelectProps, ModifierList } from './PopupSelect';
-export type { SelectInstance, ActionMeta, ControlProps, FormatOptionLabelMeta, InputActionMeta, InputProps, MenuProps, MenuListComponentProps, OptionProps, OptionsType, OptionType, SelectComponentsConfig, SelectProps, StylesConfig, ValueContainerProps, ValueType, GroupedOptionsType, GroupType, ClearIndicatorProps, DropdownIndicatorProps, IndicatorSeparatorProps, LoadingIndicatorProps, MultiValueProps, MultiValueRemoveProps, ReactSelectProps, SingleValueProps, NoticeProps, ValidationState, GroupProps, AsyncSelectProps, PlaceholderProps, AriaOnFocusProps, } from './types';
+export type { SelectInstance, ActionMeta, ControlProps, FormatOptionLabelMeta, InputActionMeta, InputProps, MenuProps, MenuListComponentProps, OptionProps, OptionsType, OptionType, SelectComponentsConfig, SelectProps, StylesConfig, ValueContainerProps, ValueType, GroupedOptionsType, GroupType, ClearIndicatorProps, DropdownIndicatorProps, IndicatorsContainerProps, IndicatorSeparatorProps, LoadingIndicatorProps, MultiValueProps, MultiValueRemoveProps, ReactSelectProps, SingleValueProps, NoticeProps, ValidationState, GroupProps, AsyncSelectProps, PlaceholderProps, AriaOnFocusProps, } from './types';
 /**
  * Types not exported on the public API, didn't find usages in sourcegraph
  *

package/dist/types/types.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-import { type AriaOnFocusProps, type ClearIndicatorProps, type DropdownIndicatorProps, type FormatOptionLabelMeta, type GroupBase as GroupType, type IndicatorSeparatorProps, type InputActionMeta, type InputProps, type LoadingIndicatorProps, type MultiValueProps, type MultiValueRemoveProps, type NoticeProps, type OptionProps as ReactSelectOptionProps, type Props as ReactSelectProps, type ActionMeta as RSActionMeta, type ControlProps as RSControlProps, type GroupProps as RSGroupProps, type MenuListProps as RSMenuListComponentProps, type MenuProps as RSMenuProps, type Options as RSOptionsType, type PlaceholderProps as RSPlaceholderProps, type SelectComponentsConfig as RSSelectComponentsConfig, type StylesConfig as RSStylesConfig, type ValueContainerProps as RSValueContainerProps, type OnChangeValue as RSValueType, type SelectInstance, type SingleValueProps } from '@atlaskit/react-select';
+import { type AriaOnFocusProps, type ClearIndicatorProps, type DropdownIndicatorProps, type FormatOptionLabelMeta, type GroupBase as GroupType, type IndicatorsContainerProps, type IndicatorSeparatorProps, type InputActionMeta, type InputProps, type LoadingIndicatorProps, type MultiValueProps, type MultiValueRemoveProps, type NoticeProps, type OptionProps as ReactSelectOptionProps, type Props as ReactSelectProps, type ActionMeta as RSActionMeta, type ControlProps as RSControlProps, type GroupProps as RSGroupProps, type MenuListProps as RSMenuListComponentProps, type MenuProps as RSMenuProps, type Options as RSOptionsType, type PlaceholderProps as RSPlaceholderProps, type SelectComponentsConfig as RSSelectComponentsConfig, type StylesConfig as RSStylesConfig, type ValueContainerProps as RSValueContainerProps, type OnChangeValue as RSValueType, type SelectInstance, type SingleValueProps } from '@atlaskit/react-select';
 import { type AsyncProps } from '@atlaskit/react-select/async';
 import type BaseSelect from '@atlaskit/react-select/base';
 import { type CreatableProps } from '@atlaskit/react-select/creatable';
@@ -78,4 +78,4 @@ export type AtlaskitSelectRefType = {
     blur: () => void;
     focus: () => void;
 };
-export type { SelectInstance, FormatOptionLabelMeta, InputActionMeta, GroupType, InputProps, MultiValueProps, ReactSelectProps, SingleValueProps, ClearIndicatorProps, DropdownIndicatorProps, IndicatorSeparatorProps, LoadingIndicatorProps, NoticeProps, MultiValueRemoveProps, AriaOnFocusProps, };
+export type { SelectInstance, FormatOptionLabelMeta, InputActionMeta, GroupType, InputProps, MultiValueProps, ReactSelectProps, SingleValueProps, ClearIndicatorProps, DropdownIndicatorProps, IndicatorsContainerProps, IndicatorSeparatorProps, LoadingIndicatorProps, NoticeProps, MultiValueRemoveProps, AriaOnFocusProps, };

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

@@ -4,6 +4,6 @@
  */
 import { jsx } from '@emotion/react';
 import { type ClearIndicatorProps, type DropdownIndicatorProps, type LoadingIndicatorProps } from '../types';
-export declare const ClearIndicator: <Option extends unknown, IsMulti extends boolean = false>(props: ClearIndicatorProps<Option, IsMulti>) => jsx.JSX.Element;
+export declare const ClearIndicator: <Option extends unknown, IsMulti extends boolean = false>({ clearControlLabel, ...props }: ClearIndicatorProps<Option, IsMulti>) => jsx.JSX.Element;
 export declare const DropdownIndicator: <Option extends unknown, IsMulti extends boolean = false>(props: DropdownIndicatorProps<Option, IsMulti>) => jsx.JSX.Element;
 export declare const LoadingIndicator: <Option extends unknown, IsMulti extends boolean = false>(props: LoadingIndicatorProps<Option, IsMulti>) => jsx.JSX.Element;

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

@@ -13,7 +13,7 @@ export { default as CountrySelect } from './CountrySelect';
 export { default as RadioSelect } from './RadioSelect';
 export { default as PopupSelect } from './PopupSelect';
 export type { PopupSelectProps, ModifierList } from './PopupSelect';
-export type { SelectInstance, ActionMeta, ControlProps, FormatOptionLabelMeta, InputActionMeta, InputProps, MenuProps, MenuListComponentProps, OptionProps, OptionsType, OptionType, SelectComponentsConfig, SelectProps, StylesConfig, ValueContainerProps, ValueType, GroupedOptionsType, GroupType, ClearIndicatorProps, DropdownIndicatorProps, IndicatorSeparatorProps, LoadingIndicatorProps, MultiValueProps, MultiValueRemoveProps, ReactSelectProps, SingleValueProps, NoticeProps, ValidationState, GroupProps, AsyncSelectProps, PlaceholderProps, AriaOnFocusProps, } from './types';
+export type { SelectInstance, ActionMeta, ControlProps, FormatOptionLabelMeta, InputActionMeta, InputProps, MenuProps, MenuListComponentProps, OptionProps, OptionsType, OptionType, SelectComponentsConfig, SelectProps, StylesConfig, ValueContainerProps, ValueType, GroupedOptionsType, GroupType, ClearIndicatorProps, DropdownIndicatorProps, IndicatorsContainerProps, IndicatorSeparatorProps, LoadingIndicatorProps, MultiValueProps, MultiValueRemoveProps, ReactSelectProps, SingleValueProps, NoticeProps, ValidationState, GroupProps, AsyncSelectProps, PlaceholderProps, AriaOnFocusProps, } from './types';
 /**
  * Types not exported on the public API, didn't find usages in sourcegraph
  *

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-import { type AriaOnFocusProps, type ClearIndicatorProps, type DropdownIndicatorProps, type FormatOptionLabelMeta, type GroupBase as GroupType, type IndicatorSeparatorProps, type InputActionMeta, type InputProps, type LoadingIndicatorProps, type MultiValueProps, type MultiValueRemoveProps, type NoticeProps, type OptionProps as ReactSelectOptionProps, type Props as ReactSelectProps, type ActionMeta as RSActionMeta, type ControlProps as RSControlProps, type GroupProps as RSGroupProps, type MenuListProps as RSMenuListComponentProps, type MenuProps as RSMenuProps, type Options as RSOptionsType, type PlaceholderProps as RSPlaceholderProps, type SelectComponentsConfig as RSSelectComponentsConfig, type StylesConfig as RSStylesConfig, type ValueContainerProps as RSValueContainerProps, type OnChangeValue as RSValueType, type SelectInstance, type SingleValueProps } from '@atlaskit/react-select';
+import { type AriaOnFocusProps, type ClearIndicatorProps, type DropdownIndicatorProps, type FormatOptionLabelMeta, type GroupBase as GroupType, type IndicatorsContainerProps, type IndicatorSeparatorProps, type InputActionMeta, type InputProps, type LoadingIndicatorProps, type MultiValueProps, type MultiValueRemoveProps, type NoticeProps, type OptionProps as ReactSelectOptionProps, type Props as ReactSelectProps, type ActionMeta as RSActionMeta, type ControlProps as RSControlProps, type GroupProps as RSGroupProps, type MenuListProps as RSMenuListComponentProps, type MenuProps as RSMenuProps, type Options as RSOptionsType, type PlaceholderProps as RSPlaceholderProps, type SelectComponentsConfig as RSSelectComponentsConfig, type StylesConfig as RSStylesConfig, type ValueContainerProps as RSValueContainerProps, type OnChangeValue as RSValueType, type SelectInstance, type SingleValueProps } from '@atlaskit/react-select';
 import { type AsyncProps } from '@atlaskit/react-select/async';
 import type BaseSelect from '@atlaskit/react-select/base';
 import { type CreatableProps } from '@atlaskit/react-select/creatable';
@@ -78,4 +78,4 @@ export type AtlaskitSelectRefType = {
     blur: () => void;
     focus: () => void;
 };
-export type { SelectInstance, FormatOptionLabelMeta, InputActionMeta, GroupType, InputProps, MultiValueProps, ReactSelectProps, SingleValueProps, ClearIndicatorProps, DropdownIndicatorProps, IndicatorSeparatorProps, LoadingIndicatorProps, NoticeProps, MultiValueRemoveProps, AriaOnFocusProps, };
+export type { SelectInstance, FormatOptionLabelMeta, InputActionMeta, GroupType, InputProps, MultiValueProps, ReactSelectProps, SingleValueProps, ClearIndicatorProps, DropdownIndicatorProps, IndicatorsContainerProps, IndicatorSeparatorProps, LoadingIndicatorProps, NoticeProps, MultiValueRemoveProps, AriaOnFocusProps, };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/select",
-	"version": "18.1.3",
+	"version": "18.3.0",
 	"description": "Select allows users to make a single selection or multiple selections from a list of options.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -40,10 +40,10 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/ds-lib": "^3.1.0",
-		"@atlaskit/icon": "^22.22.0",
+		"@atlaskit/icon": "^22.24.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/primitives": "^12.2.0",
-		"@atlaskit/react-select": "^1.0.1",
+		"@atlaskit/react-select": "^1.1.0",
 		"@atlaskit/spinner": "^16.3.0",
 		"@atlaskit/theme": "^14.0.0",
 		"@atlaskit/tokens": "^2.0.0",
@@ -66,7 +66,7 @@
 		"@af/accessibility-testing": "*",
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
-		"@atlaskit/checkbox": "^15.0.0",
+		"@atlaskit/checkbox": "^15.1.0",
 		"@atlaskit/modal-dialog": "^12.17.0",
 		"@atlaskit/radio": "^6.5.0",
 		"@atlaskit/ssr": "*",