@atlaskit/select 18.1.0 → 18.1.2

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/select
 
+## 18.1.2
+
+### Patch Changes
+
+- [#153221](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/153221)
+  [`e362b41d4b35f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e362b41d4b35f) -
+  This version removes `tab-event-should-close-popupSelect` feature flag. Tab and Shift+Tab now
+  dismisses the list of opened popup select options and allows users to navigate to next or previous
+  elements accordingly.
+
+## 18.1.1
+
+### Patch Changes
+
+- [#150983](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/150983)
+  [`a06534942509c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a06534942509c) -
+  Remove `react-uid` and use an ID generator that is compatible with React16 and React 18; Strict
+  React 18 behind a flag.
+- Updated dependencies
+
 ## 18.1.0
 
 ### Minor Changes

package/dist/cjs/PopupSelect/PopupSelect.js

@@ -22,8 +22,8 @@ var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
 var _reactFocusLockNext = _interopRequireDefault(require("react-focus-lock-next"));
 var _reactNodeResolver = _interopRequireDefault(require("react-node-resolver"));
 var _reactPopper = require("react-popper");
-var _reactUid = require("react-uid");
 var _shallowEqual = require("shallow-equal");
+var _useId = require("@atlaskit/ds-lib/use-id");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _reactSelect = require("@atlaskit/react-select");
 var _colors = require("@atlaskit/theme/colors");
@@ -109,9 +109,6 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
       mergedComponents: _components.defaultComponents,
       mergedPopperProps: defaultPopperProps
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "popperWrapperId", "".concat((0, _reactUid.uid)({
-      options: _this.props.options
-    }), "-popup-select"));
     // Event Handlers
     // ==============================
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleTargetKeyDown", function (event) {
@@ -124,11 +121,9 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyDown", function (event) {
       //We shouldn't close PopupSelect on tab event if there are custom interactive element.
-      if ((0, _platformFeatureFlags.fg)('tab-event-should-close-popupSelect')) {
-        var tabEvent = event.key === 'Tab' && event.shiftKey || event.key === 'Tab';
-        if (_this.props.shouldCloseMenuOnTab && tabEvent) {
-          _this.close();
-        }
+      var tabEvent = event.key === 'Tab' && event.shiftKey || event.key === 'Tab';
+      if (_this.props.shouldCloseMenuOnTab && tabEvent) {
+        _this.close();
       }
       switch (event.key) {
         case 'Escape':
@@ -327,7 +322,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
     });
     // Renderers
     // ==============================
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSelect", function () {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSelect", function (id) {
       var _this$props5 = _this.props,
         footer = _this$props5.footer,
         label = _this$props5.label,
@@ -433,7 +428,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
             "data-placement": placement,
             minWidth: minMenuWidth,
             maxWidth: maxMenuWidth,
-            id: _this.popperWrapperId,
+            id: id,
             testId: testId,
             ref: !(0, _platformFeatureFlags.fg)('platform_design_system_team_select_node_resolver') ? null : _this.resolveMenuRef(ref)
           }, /*#__PURE__*/_react.default.createElement(FocusLock, {
@@ -515,17 +510,22 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
       var _this3 = this;
       var target = this.props.target;
       var isOpen = this.state.isOpen;
-      return /*#__PURE__*/_react.default.createElement(_reactPopper.Manager, null, /*#__PURE__*/_react.default.createElement(_reactPopper.Reference, null, function (_ref3) {
-        var ref = _ref3.ref;
-        return target && target({
-          isOpen: isOpen,
-          onKeyDown: _this3.handleTargetKeyDown,
-          ref: _this3.resolveTargetRef(ref),
-          'aria-haspopup': 'true',
-          'aria-expanded': isOpen,
-          'aria-controls': isOpen ? _this3.popperWrapperId : undefined
-        });
-      }), this.renderSelect());
+      return /*#__PURE__*/_react.default.createElement(_reactPopper.Manager, null, /*#__PURE__*/_react.default.createElement(_useId.IdProvider, {
+        postfix: "-popup-select"
+      }, function (_ref3) {
+        var id = _ref3.id;
+        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactPopper.Reference, null, function (_ref4) {
+          var ref = _ref4.ref;
+          return target && target({
+            isOpen: isOpen,
+            onKeyDown: _this3.handleTargetKeyDown,
+            ref: _this3.resolveTargetRef(ref),
+            'aria-haspopup': 'true',
+            'aria-expanded': isOpen,
+            'aria-controls': isOpen ? id : undefined
+          });
+        }), _this3.renderSelect(id));
+      }));
     }
   }], [{
     key: "getDerivedStateFromProps",
@@ -574,10 +574,10 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
  * @param {(instance: HTMLDivElement) => void} props.innerRef - A ref callback to get the instance of the HTMLDivElement.
  * @returns {ReactElement} The children wrapped with NodeResolver if hasNodeResolver is true, otherwise just the children.
  */
-var ConditionalNodeResolverWrapper = function ConditionalNodeResolverWrapper(_ref4) {
-  var hasNodeResolver = _ref4.hasNodeResolver,
-    children = _ref4.children,
-    innerRef = _ref4.innerRef;
+var ConditionalNodeResolverWrapper = function ConditionalNodeResolverWrapper(_ref5) {
+  var hasNodeResolver = _ref5.hasNodeResolver,
+    children = _ref5.children,
+    innerRef = _ref5.innerRef;
   if (hasNodeResolver) {
     return /*#__PURE__*/_react.default.createElement(_reactNodeResolver.default, {
       innerRef: innerRef

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

package/dist/es2019/PopupSelect/PopupSelect.js

@@ -8,8 +8,8 @@ import FocusLockOld from 'react-focus-lock';
 import FocusLockNext from 'react-focus-lock-next';
 import NodeResolver from 'react-node-resolver';
 import { Manager, Popper, Reference } from 'react-popper';
-import { uid } from 'react-uid';
 import { shallowEqualObjects } from 'shallow-equal';
+import { IdProvider } from '@atlaskit/ds-lib/use-id';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { mergeStyles } from '@atlaskit/react-select';
 import { N80 } from '@atlaskit/theme/colors';
@@ -76,9 +76,6 @@ export default class PopupSelect extends PureComponent {
       mergedComponents: defaultComponents,
       mergedPopperProps: defaultPopperProps
     });
-    _defineProperty(this, "popperWrapperId", `${uid({
-      options: this.props.options
-    })}-popup-select`);
     // Event Handlers
     // ==============================
     _defineProperty(this, "handleTargetKeyDown", event => {
@@ -91,11 +88,9 @@ export default class PopupSelect extends PureComponent {
     });
     _defineProperty(this, "handleKeyDown", event => {
       //We shouldn't close PopupSelect on tab event if there are custom interactive element.
-      if (fg('tab-event-should-close-popupSelect')) {
-        const tabEvent = event.key === 'Tab' && event.shiftKey || event.key === 'Tab';
-        if (this.props.shouldCloseMenuOnTab && tabEvent) {
-          this.close();
-        }
+      const tabEvent = event.key === 'Tab' && event.shiftKey || event.key === 'Tab';
+      if (this.props.shouldCloseMenuOnTab && tabEvent) {
+        this.close();
       }
       switch (event.key) {
         case 'Escape':
@@ -299,7 +294,7 @@ export default class PopupSelect extends PureComponent {
     });
     // Renderers
     // ==============================
-    _defineProperty(this, "renderSelect", () => {
+    _defineProperty(this, "renderSelect", id => {
       const {
         footer,
         label,
@@ -411,7 +406,7 @@ export default class PopupSelect extends PureComponent {
         "data-placement": placement,
         minWidth: minMenuWidth,
         maxWidth: maxMenuWidth,
-        id: this.popperWrapperId,
+        id: id,
         testId: testId,
         ref: !fg('platform_design_system_team_select_node_resolver') ? null : this.resolveMenuRef(ref)
       }, /*#__PURE__*/React.createElement(FocusLock, {
@@ -513,7 +508,11 @@ export default class PopupSelect extends PureComponent {
     const {
       isOpen
     } = this.state;
-    return /*#__PURE__*/React.createElement(Manager, null, /*#__PURE__*/React.createElement(Reference, null, ({
+    return /*#__PURE__*/React.createElement(Manager, null, /*#__PURE__*/React.createElement(IdProvider, {
+      postfix: "-popup-select"
+    }, ({
+      id
+    }) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Reference, null, ({
       ref
     }) => target && target({
       isOpen,
@@ -521,8 +520,8 @@ export default class PopupSelect extends PureComponent {
       ref: this.resolveTargetRef(ref),
       'aria-haspopup': 'true',
       'aria-expanded': isOpen,
-      'aria-controls': isOpen ? this.popperWrapperId : undefined
-    })), this.renderSelect());
+      'aria-controls': isOpen ? id : undefined
+    })), this.renderSelect(id))));
   }
 }
 _defineProperty(PopupSelect, "defaultProps", {

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

package/dist/esm/PopupSelect/PopupSelect.js

@@ -20,8 +20,8 @@ import FocusLockOld from 'react-focus-lock';
 import FocusLockNext from 'react-focus-lock-next';
 import NodeResolver from 'react-node-resolver';
 import { Manager, Popper, Reference } from 'react-popper';
-import { uid } from 'react-uid';
 import { shallowEqualObjects } from 'shallow-equal';
+import { IdProvider } from '@atlaskit/ds-lib/use-id';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { mergeStyles } from '@atlaskit/react-select';
 import { N80 } from '@atlaskit/theme/colors';
@@ -100,9 +100,6 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
       mergedComponents: defaultComponents,
       mergedPopperProps: defaultPopperProps
     });
-    _defineProperty(_assertThisInitialized(_this), "popperWrapperId", "".concat(uid({
-      options: _this.props.options
-    }), "-popup-select"));
     // Event Handlers
     // ==============================
     _defineProperty(_assertThisInitialized(_this), "handleTargetKeyDown", function (event) {
@@ -115,11 +112,9 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     });
     _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) {
       //We shouldn't close PopupSelect on tab event if there are custom interactive element.
-      if (fg('tab-event-should-close-popupSelect')) {
-        var tabEvent = event.key === 'Tab' && event.shiftKey || event.key === 'Tab';
-        if (_this.props.shouldCloseMenuOnTab && tabEvent) {
-          _this.close();
-        }
+      var tabEvent = event.key === 'Tab' && event.shiftKey || event.key === 'Tab';
+      if (_this.props.shouldCloseMenuOnTab && tabEvent) {
+        _this.close();
       }
       switch (event.key) {
         case 'Escape':
@@ -318,7 +313,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     });
     // Renderers
     // ==============================
-    _defineProperty(_assertThisInitialized(_this), "renderSelect", function () {
+    _defineProperty(_assertThisInitialized(_this), "renderSelect", function (id) {
       var _this$props5 = _this.props,
         footer = _this$props5.footer,
         label = _this$props5.label,
@@ -424,7 +419,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
             "data-placement": placement,
             minWidth: minMenuWidth,
             maxWidth: maxMenuWidth,
-            id: _this.popperWrapperId,
+            id: id,
             testId: testId,
             ref: !fg('platform_design_system_team_select_node_resolver') ? null : _this.resolveMenuRef(ref)
           }, /*#__PURE__*/React.createElement(FocusLock, {
@@ -506,17 +501,22 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
       var _this3 = this;
       var target = this.props.target;
       var isOpen = this.state.isOpen;
-      return /*#__PURE__*/React.createElement(Manager, null, /*#__PURE__*/React.createElement(Reference, null, function (_ref3) {
-        var ref = _ref3.ref;
-        return target && target({
-          isOpen: isOpen,
-          onKeyDown: _this3.handleTargetKeyDown,
-          ref: _this3.resolveTargetRef(ref),
-          'aria-haspopup': 'true',
-          'aria-expanded': isOpen,
-          'aria-controls': isOpen ? _this3.popperWrapperId : undefined
-        });
-      }), this.renderSelect());
+      return /*#__PURE__*/React.createElement(Manager, null, /*#__PURE__*/React.createElement(IdProvider, {
+        postfix: "-popup-select"
+      }, function (_ref3) {
+        var id = _ref3.id;
+        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Reference, null, function (_ref4) {
+          var ref = _ref4.ref;
+          return target && target({
+            isOpen: isOpen,
+            onKeyDown: _this3.handleTargetKeyDown,
+            ref: _this3.resolveTargetRef(ref),
+            'aria-haspopup': 'true',
+            'aria-expanded': isOpen,
+            'aria-controls': isOpen ? id : undefined
+          });
+        }), _this3.renderSelect(id));
+      }));
     }
   }], [{
     key: "getDerivedStateFromProps",
@@ -566,10 +566,10 @@ export { PopupSelect as default };
  * @param {(instance: HTMLDivElement) => void} props.innerRef - A ref callback to get the instance of the HTMLDivElement.
  * @returns {ReactElement} The children wrapped with NodeResolver if hasNodeResolver is true, otherwise just the children.
  */
-var ConditionalNodeResolverWrapper = function ConditionalNodeResolverWrapper(_ref4) {
-  var hasNodeResolver = _ref4.hasNodeResolver,
-    children = _ref4.children,
-    innerRef = _ref4.innerRef;
+var ConditionalNodeResolverWrapper = function ConditionalNodeResolverWrapper(_ref5) {
+  var hasNodeResolver = _ref5.hasNodeResolver,
+    children = _ref5.children,
+    innerRef = _ref5.innerRef;
   if (hasNodeResolver) {
     return /*#__PURE__*/React.createElement(NodeResolver, {
       innerRef: innerRef

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

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

@@ -119,7 +119,6 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
         };
         mergedPopperProps: PopperPropsNoChildren<string>;
     };
-    popperWrapperId: string;
     static defaultProps: {
         closeMenuOnSelect: boolean;
         shouldCloseMenuOnTab: boolean;
@@ -164,7 +163,7 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
     getItemCount: () => number;
     getMaxHeight: () => number | undefined;
     showSearchControl: () => boolean | undefined;
-    renderSelect: () => JSX.Element | null;
+    renderSelect: (id: string) => JSX.Element | null;
     render(): JSX.Element;
 }
 export {};

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

@@ -119,7 +119,6 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
         };
         mergedPopperProps: PopperPropsNoChildren<string>;
     };
-    popperWrapperId: string;
     static defaultProps: {
         closeMenuOnSelect: boolean;
         shouldCloseMenuOnTab: boolean;
@@ -164,7 +163,7 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
     getItemCount: () => number;
     getMaxHeight: () => number | undefined;
     showSearchControl: () => boolean | undefined;
-    renderSelect: () => JSX.Element | null;
+    renderSelect: (id: string) => JSX.Element | null;
     render(): JSX.Element;
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/select",
-	"version": "18.1.0",
+	"version": "18.1.2",
 	"description": "Select allows users to make a single selection or multiple selections from a list of options.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -39,12 +39,13 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^10.1.0",
+		"@atlaskit/ds-lib": "^3.1.0",
 		"@atlaskit/icon": "^22.22.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/primitives": "^12.2.0",
 		"@atlaskit/react-select": "^1.0.1",
 		"@atlaskit/spinner": "^16.3.0",
-		"@atlaskit/theme": "^13.0.0",
+		"@atlaskit/theme": "^13.1.0",
 		"@atlaskit/tokens": "^2.0.0",
 		"@atlaskit/visually-hidden": "^1.5.0",
 		"@babel/runtime": "^7.0.0",
@@ -55,7 +56,6 @@
 		"react-focus-lock-next": "npm:react-focus-lock@^2.13.2",
 		"react-node-resolver": "^1.0.1",
 		"react-popper": "^2.3.0",
-		"react-uid": "^2.2.0",
 		"shallow-equal": "^3.1.0"
 	},
 	"peerDependencies": {
@@ -67,7 +67,6 @@
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
 		"@atlaskit/checkbox": "^14.0.0",
-		"@atlaskit/ds-lib": "^3.0.0",
 		"@atlaskit/modal-dialog": "^12.17.0",
 		"@atlaskit/radio": "^6.5.0",
 		"@atlaskit/ssr": "*",
@@ -109,9 +108,6 @@
 		"platform-visual-refresh-icons-legacy-facade": {
 			"type": "boolean"
 		},
-		"tab-event-should-close-popupSelect": {
-			"type": "boolean"
-		},
 		"platform_dst_select-bump-react-focus-lock": {
 			"type": "boolean"
 		}