@atlaskit/select 17.4.0 → 17.6.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/select
 
+## 17.6.0
+
+### Minor Changes
+
+- [#88021](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/88021) [`2cf5300457e7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2cf5300457e7) - Convert AtlaskitSelect from react class component to function component
+
+### Patch Changes
+
+- [#73901](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/73901) [`2aefab5730ab`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2aefab5730ab) - ECA11Y-207 Added Tab navigation for video panel controls and handling key press on them
+
+## 17.5.0
+
+### Minor Changes
+
+- [#87916](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/87916) [`373dc429147d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/373dc429147d) - Reverted "Convert AtlaskitSelect from react class component to function component"
+
 ## 17.4.0
 
 ### Minor 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 = "17.4.0";
+var packageVersion = "17.6.0";
 var SelectWithoutAnalytics = exports.SelectWithoutAnalytics = (0, _createSelect.default)(_reactSelect.default);
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
 var Select = (0, _analyticsNext.withAnalyticsContext)({

package/dist/cjs/createSelect.js

@@ -11,7 +11,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactSelect = require("react-select");
-var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _inputAriaDescribedby = require("./components/input-aria-describedby");
 var _components = require("./components");
 var _styles = _interopRequireDefault(require("./styles"));
@@ -64,10 +63,29 @@ function createSelect(WrappedComponent) {
       }
     }, [descriptionId, isSearchable]);
     var isCompact = spacing === 'compact';
-    return /*#__PURE__*/_react.default.createElement(WrappedComponent
-    // @ts-ignore - mergeRefs only supports HTMLElement
-    , (0, _extends2.default)({
-      ref: (0, _mergeRefs.default)([forwardedRef, internalSelectRef]),
+
+    /**
+     * The following `useImperativeHandle` hook exists for the sake of backwards compatibility.
+     * This component used to be a class component which set the value of the `ref` prop to object with the properties and value as below.
+     * This has lead to slightly odd usage of refs with this component, e.g. `myRef.current.select.select.controlRef` instead of just `myRef.current.select.controlRef`
+     * In the next major release, this should removed and the ref should be passed directly to the wrapped component (given users have updated usage)
+     * More info https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/88021/overview
+     */
+    (0, _react.useImperativeHandle)(forwardedRef, function () {
+      return {
+        select: internalSelectRef.current,
+        focus: function focus() {
+          var _internalSelectRef$cu2;
+          return (_internalSelectRef$cu2 = internalSelectRef.current) === null || _internalSelectRef$cu2 === void 0 ? void 0 : _internalSelectRef$cu2.focus();
+        },
+        blur: function blur() {
+          var _internalSelectRef$cu3;
+          return (_internalSelectRef$cu3 = internalSelectRef.current) === null || _internalSelectRef$cu3 === void 0 ? void 0 : _internalSelectRef$cu3.blur();
+        }
+      };
+    }, []);
+    return /*#__PURE__*/_react.default.createElement(WrappedComponent, (0, _extends2.default)({
+      ref: internalSelectRef,
       "aria-live": "assertive",
       ariaLiveMessages: (0, _groupedOptionsAnnouncement.isOptionsGrouped)(props.options) ? _objectSpread({
         onFocus: _groupedOptionsAnnouncement.onFocus

package/dist/es2019/Select.js

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

package/dist/es2019/createSelect.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useRef, useEffect, useMemo, forwardRef } from 'react';
+import React, { useRef, useEffect, useMemo, forwardRef, useImperativeHandle } from 'react';
 import { mergeStyles } from 'react-select';
-import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { Input } from './components/input-aria-describedby';
 import { ClearIndicator, DropdownIndicator, LoadingIndicator, MultiValueRemove, IndicatorSeparator } from './components';
 import baseStyles from './styles';
@@ -46,10 +45,27 @@ export default function createSelect(WrappedComponent) {
       }
     }, [descriptionId, isSearchable]);
     const isCompact = spacing === 'compact';
-    return /*#__PURE__*/React.createElement(WrappedComponent
-    // @ts-ignore - mergeRefs only supports HTMLElement
-    , _extends({
-      ref: mergeRefs([forwardedRef, internalSelectRef]),
+
+    /**
+     * The following `useImperativeHandle` hook exists for the sake of backwards compatibility.
+     * This component used to be a class component which set the value of the `ref` prop to object with the properties and value as below.
+     * This has lead to slightly odd usage of refs with this component, e.g. `myRef.current.select.select.controlRef` instead of just `myRef.current.select.controlRef`
+     * In the next major release, this should removed and the ref should be passed directly to the wrapped component (given users have updated usage)
+     * More info https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/88021/overview
+     */
+    useImperativeHandle(forwardedRef, () => ({
+      select: internalSelectRef.current,
+      focus: () => {
+        var _internalSelectRef$cu2;
+        return (_internalSelectRef$cu2 = internalSelectRef.current) === null || _internalSelectRef$cu2 === void 0 ? void 0 : _internalSelectRef$cu2.focus();
+      },
+      blur: () => {
+        var _internalSelectRef$cu3;
+        return (_internalSelectRef$cu3 = internalSelectRef.current) === null || _internalSelectRef$cu3 === void 0 ? void 0 : _internalSelectRef$cu3.blur();
+      }
+    }), []);
+    return /*#__PURE__*/React.createElement(WrappedComponent, _extends({
+      ref: internalSelectRef,
       "aria-live": "assertive",
       ariaLiveMessages: isOptionsGrouped(props.options) ? {
         onFocus,

package/dist/esm/Select.js

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

package/dist/esm/createSelect.js

@@ -4,9 +4,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["appearance", "ariaLiveMessages", "components", "isInvalid", "onClickPreventDefault", "spacing", "styles", "tabSelectsValue", "validationState"];
 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; }
-import React, { useRef, useEffect, useMemo, forwardRef } from 'react';
+import React, { useRef, useEffect, useMemo, forwardRef, useImperativeHandle } from 'react';
 import { mergeStyles } from 'react-select';
-import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { Input } from './components/input-aria-describedby';
 import { ClearIndicator, DropdownIndicator, LoadingIndicator, MultiValueRemove, IndicatorSeparator } from './components';
 import baseStyles from './styles';
@@ -54,10 +53,29 @@ export default function createSelect(WrappedComponent) {
       }
     }, [descriptionId, isSearchable]);
     var isCompact = spacing === 'compact';
-    return /*#__PURE__*/React.createElement(WrappedComponent
-    // @ts-ignore - mergeRefs only supports HTMLElement
-    , _extends({
-      ref: mergeRefs([forwardedRef, internalSelectRef]),
+
+    /**
+     * The following `useImperativeHandle` hook exists for the sake of backwards compatibility.
+     * This component used to be a class component which set the value of the `ref` prop to object with the properties and value as below.
+     * This has lead to slightly odd usage of refs with this component, e.g. `myRef.current.select.select.controlRef` instead of just `myRef.current.select.controlRef`
+     * In the next major release, this should removed and the ref should be passed directly to the wrapped component (given users have updated usage)
+     * More info https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/88021/overview
+     */
+    useImperativeHandle(forwardedRef, function () {
+      return {
+        select: internalSelectRef.current,
+        focus: function focus() {
+          var _internalSelectRef$cu2;
+          return (_internalSelectRef$cu2 = internalSelectRef.current) === null || _internalSelectRef$cu2 === void 0 ? void 0 : _internalSelectRef$cu2.focus();
+        },
+        blur: function blur() {
+          var _internalSelectRef$cu3;
+          return (_internalSelectRef$cu3 = internalSelectRef.current) === null || _internalSelectRef$cu3 === void 0 ? void 0 : _internalSelectRef$cu3.blur();
+        }
+      };
+    }, []);
+    return /*#__PURE__*/React.createElement(WrappedComponent, _extends({
+      ref: internalSelectRef,
       "aria-live": "assertive",
       ariaLiveMessages: isOptionsGrouped(props.options) ? _objectSpread({
         onFocus: onFocus

package/dist/types/AsyncCreatableSelect.d.ts

@@ -1,5 +1,9 @@
 /// <reference types="react" />
 declare const _default: <Option extends unknown = import("./types").OptionType, IsMulti extends boolean = false>(props: (import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>) & {
-    ref?: import("react").Ref<import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>>> | undefined;
+    ref?: import("react").Ref<{
+        select: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>> | null;
+        blur: () => void;
+        focus: () => void;
+    }> | undefined;
 }) => JSX.Element;
 export default _default;

package/dist/types/AsyncSelect.d.ts

@@ -1,5 +1,9 @@
 /// <reference types="react" />
 declare const _default: <Option extends unknown = import("./types").OptionType, IsMulti extends boolean = false>(props: (import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>) & {
-    ref?: import("react").Ref<import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>>> | undefined;
+    ref?: import("react").Ref<{
+        select: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>> | null;
+        blur: () => void;
+        focus: () => void;
+    }> | undefined;
 }) => JSX.Element;
 export default _default;

package/dist/types/CreatableSelect.d.ts

@@ -1,5 +1,9 @@
 /// <reference types="react" />
 declare const _default: <Option extends unknown = import("./types").OptionType, IsMulti extends boolean = false>(props: (import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>) & {
-    ref?: import("react").Ref<import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>>> | undefined;
+    ref?: import("react").Ref<{
+        select: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>> | null;
+        blur: () => void;
+        focus: () => void;
+    }> | undefined;
 }) => JSX.Element;
 export default _default;

package/dist/types/Select.d.ts

@@ -1,8 +1,16 @@
 /// <reference types="react" />
 export declare const SelectWithoutAnalytics: <Option extends unknown = import("./types").OptionType, IsMulti extends boolean = false>(props: (import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>) & {
-    ref?: import("react").Ref<import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>>> | undefined;
+    ref?: import("react").Ref<{
+        select: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>> | null;
+        blur: () => void;
+        focus: () => void;
+    }> | undefined;
 }) => JSX.Element;
 declare const Select: <Option extends unknown = import("./types").OptionType, IsMulti extends boolean = false>(props: (import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>) & {
-    ref?: import("react").Ref<import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>>> | undefined;
+    ref?: import("react").Ref<{
+        select: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>> | null;
+        blur: () => void;
+        focus: () => void;
+    }> | undefined;
 }) => JSX.Element;
 export default Select;

package/dist/types/createSelect.d.ts

@@ -2,7 +2,12 @@ import { type ComponentType, type Ref } from 'react';
 import BaseSelect from 'react-select/base';
 import { SelectProps, OptionType, AsyncSelectProps, CreatableSelectProps } from './types';
 type AtlaskitSelectProps<Option extends unknown, IsMulti extends boolean> = SelectProps<Option, IsMulti> | AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>;
+type AtlaskitSelectRefType = {
+    select: BaseSelect | null;
+    blur: () => void;
+    focus: () => void;
+};
 export default function createSelect(WrappedComponent: ComponentType<any>): <Option extends unknown = OptionType, IsMulti extends boolean = false>(props: AtlaskitSelectProps<Option, IsMulti> & {
-    ref?: Ref<BaseSelect>;
+    ref?: Ref<AtlaskitSelectRefType>;
 }) => JSX.Element;
 export {};

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

@@ -1,5 +1,9 @@
 /// <reference types="react" />
 declare const _default: <Option extends unknown = import("./types").OptionType, IsMulti extends boolean = false>(props: (import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>) & {
-    ref?: import("react").Ref<import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>>> | undefined;
+    ref?: import("react").Ref<{
+        select: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>> | null;
+        blur: () => void;
+        focus: () => void;
+    }> | undefined;
 }) => JSX.Element;
 export default _default;

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

@@ -1,5 +1,9 @@
 /// <reference types="react" />
 declare const _default: <Option extends unknown = import("./types").OptionType, IsMulti extends boolean = false>(props: (import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>) & {
-    ref?: import("react").Ref<import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>>> | undefined;
+    ref?: import("react").Ref<{
+        select: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>> | null;
+        blur: () => void;
+        focus: () => void;
+    }> | undefined;
 }) => JSX.Element;
 export default _default;

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

@@ -1,5 +1,9 @@
 /// <reference types="react" />
 declare const _default: <Option extends unknown = import("./types").OptionType, IsMulti extends boolean = false>(props: (import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>) & {
-    ref?: import("react").Ref<import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>>> | undefined;
+    ref?: import("react").Ref<{
+        select: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>> | null;
+        blur: () => void;
+        focus: () => void;
+    }> | undefined;
 }) => JSX.Element;
 export default _default;

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

@@ -1,8 +1,16 @@
 /// <reference types="react" />
 export declare const SelectWithoutAnalytics: <Option extends unknown = import("./types").OptionType, IsMulti extends boolean = false>(props: (import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>) & {
-    ref?: import("react").Ref<import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>>> | undefined;
+    ref?: import("react").Ref<{
+        select: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>> | null;
+        blur: () => void;
+        focus: () => void;
+    }> | undefined;
 }) => JSX.Element;
 declare const Select: <Option extends unknown = import("./types").OptionType, IsMulti extends boolean = false>(props: (import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>) & {
-    ref?: import("react").Ref<import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>>> | undefined;
+    ref?: import("react").Ref<{
+        select: import("react-select/base").default<unknown, false, import("react-select").GroupBase<unknown>> | null;
+        blur: () => void;
+        focus: () => void;
+    }> | undefined;
 }) => JSX.Element;
 export default Select;

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

@@ -2,7 +2,12 @@ import { type ComponentType, type Ref } from 'react';
 import BaseSelect from 'react-select/base';
 import { SelectProps, OptionType, AsyncSelectProps, CreatableSelectProps } from './types';
 type AtlaskitSelectProps<Option extends unknown, IsMulti extends boolean> = SelectProps<Option, IsMulti> | AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>;
+type AtlaskitSelectRefType = {
+    select: BaseSelect | null;
+    blur: () => void;
+    focus: () => void;
+};
 export default function createSelect(WrappedComponent: ComponentType<any>): <Option extends unknown = OptionType, IsMulti extends boolean = false>(props: AtlaskitSelectProps<Option, IsMulti> & {
-    ref?: Ref<BaseSelect>;
+    ref?: Ref<AtlaskitSelectRefType>;
 }) => JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/select",
-  "version": "17.4.0",
+  "version": "17.6.0",
   "description": "Select allows users to make a single selection or multiple selections from a list of options.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -42,7 +42,6 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.2.0",
-    "@atlaskit/ds-lib": "^2.2.5",
     "@atlaskit/icon": "^22.1.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/spinner": "^16.0.0",
@@ -67,6 +66,7 @@
   "devDependencies": {
     "@af/accessibility-testing": "*",
     "@af/integration-testing": "*",
+    "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",