@atlaskit/react-select 2.0.7 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/react-select
 
+## 2.1.0
+
+### Minor Changes
+
+- [#135853](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/135853)
+  [`37d9e41733fc5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/37d9e41733fc5) -
+  Select components now sync with the experimental open layer observer, using the
+  useNotifyOpenLayerObserver hook.
+
+  This is used to close any open select menus when page layout slots are resized.
+
+  These changes are behind feature flags.
+
 ## 2.0.7
 
 ### Patch Changes

package/dist/cjs/components/internal/notify-open-layer-observer.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NotifyOpenLayerObserver = NotifyOpenLayerObserver;
+var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
+/**
+ * Functional component wrapper around `useNotifyOpenLayerObserver`.
+ *
+ * This is needed as Select is a class component, which cannot use hooks directly.
+ */
+function NotifyOpenLayerObserver(_ref) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose;
+  (0, _openLayerObserver.useNotifyOpenLayerObserver)({
+    isOpen: isOpen,
+    onClose: onClose
+  });
+  return null;
+}

package/dist/cjs/select.js

@@ -21,6 +21,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _builtins = require("./builtins");
 var _components = require("./components");
 var _internal = require("./components/internal");
+var _notifyOpenLayerObserver = require("./components/internal/notify-open-layer-observer");
 var _liveRegion = _interopRequireDefault(require("./components/live-region"));
 var _menu = require("./components/menu");
 var _filters = require("./filters");
@@ -826,6 +827,12 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       }
       event.preventDefault();
     });
+    (0, _defineProperty2.default)(_this, "handleOpenLayerObserverCloseSignal", function () {
+      if (!(0, _platformFeatureFlags.fg)('platform_dst_layer_observer_select')) {
+        return;
+      }
+      _this.onMenuClose();
+    });
     _this.state.instancePrefix = 'react-select-' + (_this.props.instanceId || ++instanceId);
     _this.state.selectValue = (0, _utils.cleanValue)(_props.value);
     // Set focusedOption if menuIsOpen is set on init (e.g. defaultMenuIsOpen)
@@ -1831,7 +1838,10 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         innerProps: _objectSpread({}, testId && {
           'data-testid': "".concat(testId, "-select--indicators-container")
         })
-      }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField());
+      }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField(), /*#__PURE__*/_react.default.createElement(_notifyOpenLayerObserver.NotifyOpenLayerObserver, {
+        isOpen: (0, _platformFeatureFlags.fg)('platform_dst_layer_observer_select') && this.props.menuIsOpen,
+        onClose: this.handleOpenLayerObserverCloseSignal
+      }));
     }
   }], [{
     key: "getDerivedStateFromProps",

package/dist/es2019/components/internal/notify-open-layer-observer.js

@@ -0,0 +1,16 @@
+import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+/**
+ * Functional component wrapper around `useNotifyOpenLayerObserver`.
+ *
+ * This is needed as Select is a class component, which cannot use hooks directly.
+ */
+export function NotifyOpenLayerObserver({
+  isOpen,
+  onClose
+}) {
+  useNotifyOpenLayerObserver({
+    isOpen,
+    onClose
+  });
+  return null;
+}

package/dist/es2019/select.js

@@ -7,6 +7,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { formatGroupLabel as formatGroupLabelBuiltin, getOptionLabel as getOptionLabelBuiltin, getOptionValue as getOptionValueBuiltin, isOptionDisabled as isOptionDisabledBuiltin } from './builtins';
 import { defaultComponents } from './components';
 import { DummyInput, RequiredInput, ScrollManager } from './components/internal';
+import { NotifyOpenLayerObserver } from './components/internal/notify-open-layer-observer';
 import LiveRegion from './components/live-region';
 import { MenuPlacer } from './components/menu';
 import { createFilter } from './filters';
@@ -802,6 +803,12 @@ export default class Select extends Component {
       }
       event.preventDefault();
     });
+    _defineProperty(this, "handleOpenLayerObserverCloseSignal", () => {
+      if (!fg('platform_dst_layer_observer_select')) {
+        return;
+      }
+      this.onMenuClose();
+    });
     this.state.instancePrefix = 'react-select-' + (this.props.instanceId || ++instanceId);
     this.state.selectValue = cleanValue(_props.value);
     // Set focusedOption if menuIsOpen is set on init (e.g. defaultMenuIsOpen)
@@ -1867,7 +1874,10 @@ export default class Select extends Component {
           'data-testid': `${testId}-select--indicators-container`
         })
       }
-    }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField());
+    }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField(), /*#__PURE__*/React.createElement(NotifyOpenLayerObserver, {
+      isOpen: fg('platform_dst_layer_observer_select') && this.props.menuIsOpen,
+      onClose: this.handleOpenLayerObserverCloseSignal
+    }));
   }
 }
 _defineProperty(Select, "defaultProps", defaultProps);

package/dist/esm/components/internal/notify-open-layer-observer.js

@@ -0,0 +1,15 @@
+import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+/**
+ * Functional component wrapper around `useNotifyOpenLayerObserver`.
+ *
+ * This is needed as Select is a class component, which cannot use hooks directly.
+ */
+export function NotifyOpenLayerObserver(_ref) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose;
+  useNotifyOpenLayerObserver({
+    isOpen: isOpen,
+    onClose: onClose
+  });
+  return null;
+}

package/dist/esm/select.js

@@ -18,6 +18,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { formatGroupLabel as formatGroupLabelBuiltin, getOptionLabel as getOptionLabelBuiltin, getOptionValue as getOptionValueBuiltin, isOptionDisabled as isOptionDisabledBuiltin } from './builtins';
 import { defaultComponents } from './components';
 import { DummyInput, RequiredInput, ScrollManager } from './components/internal';
+import { NotifyOpenLayerObserver } from './components/internal/notify-open-layer-observer';
 import LiveRegion from './components/live-region';
 import { MenuPlacer } from './components/menu';
 import { createFilter } from './filters';
@@ -817,6 +818,12 @@ var Select = /*#__PURE__*/function (_Component) {
       }
       event.preventDefault();
     });
+    _defineProperty(_this, "handleOpenLayerObserverCloseSignal", function () {
+      if (!fg('platform_dst_layer_observer_select')) {
+        return;
+      }
+      _this.onMenuClose();
+    });
     _this.state.instancePrefix = 'react-select-' + (_this.props.instanceId || ++instanceId);
     _this.state.selectValue = cleanValue(_props.value);
     // Set focusedOption if menuIsOpen is set on init (e.g. defaultMenuIsOpen)
@@ -1822,7 +1829,10 @@ var Select = /*#__PURE__*/function (_Component) {
         innerProps: _objectSpread({}, testId && {
           'data-testid': "".concat(testId, "-select--indicators-container")
         })
-      }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField());
+      }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField(), /*#__PURE__*/React.createElement(NotifyOpenLayerObserver, {
+        isOpen: fg('platform_dst_layer_observer_select') && this.props.menuIsOpen,
+        onClose: this.handleOpenLayerObserverCloseSignal
+      }));
     }
   }], [{
     key: "getDerivedStateFromProps",

package/dist/types/components/internal/notify-open-layer-observer.d.ts

@@ -0,0 +1,9 @@
+import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+type NotifyOpenLayerObserverProps = Parameters<typeof useNotifyOpenLayerObserver>[0];
+/**
+ * Functional component wrapper around `useNotifyOpenLayerObserver`.
+ *
+ * This is needed as Select is a class component, which cannot use hooks directly.
+ */
+export declare function NotifyOpenLayerObserver({ isOpen, onClose }: NotifyOpenLayerObserverProps): null;
+export {};

package/dist/types/select.d.ts

@@ -694,6 +694,7 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
     renderFormField(): React.JSX.Element | undefined;
     renderLiveRegion(): React.JSX.Element;
     renderMultiselectMessage(): React.JSX.Element;
+    handleOpenLayerObserverCloseSignal: () => void;
     render(): React.JSX.Element;
 }
 export type PublicBaseSelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = JSX.LibraryManagedAttributes<typeof Select, SelectProps<Option, IsMulti, Group>>;

package/dist/types-ts4.5/components/internal/notify-open-layer-observer.d.ts

@@ -0,0 +1,9 @@
+import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+type NotifyOpenLayerObserverProps = Parameters<typeof useNotifyOpenLayerObserver>[0];
+/**
+ * Functional component wrapper around `useNotifyOpenLayerObserver`.
+ *
+ * This is needed as Select is a class component, which cannot use hooks directly.
+ */
+export declare function NotifyOpenLayerObserver({ isOpen, onClose }: NotifyOpenLayerObserverProps): null;
+export {};

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

@@ -694,6 +694,7 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
     renderFormField(): React.JSX.Element | undefined;
     renderLiveRegion(): React.JSX.Element;
     renderMultiselectMessage(): React.JSX.Element;
+    handleOpenLayerObserverCloseSignal: () => void;
     render(): React.JSX.Element;
 }
 export type PublicBaseSelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = JSX.LibraryManagedAttributes<typeof Select, SelectProps<Option, IsMulti, Group>>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-select",
-	"version": "2.0.7",
+	"version": "2.1.0",
 	"description": "A forked version of react-select to only be used in atlaskit/select",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -30,11 +30,12 @@
 	},
 	"dependencies": {
 		"@atlaskit/ds-lib": "^4.0.0",
-		"@atlaskit/icon": "^25.1.0",
+		"@atlaskit/icon": "^25.5.0",
+		"@atlaskit/layering": "^2.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^14.2.0",
+		"@atlaskit/primitives": "^14.3.0",
 		"@atlaskit/spinner": "^18.0.0",
-		"@atlaskit/tokens": "^4.5.0",
+		"@atlaskit/tokens": "^4.6.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"@floating-ui/dom": "^1.0.1",
@@ -69,6 +70,9 @@
 		},
 		"platform-visual-refresh-icons-legacy-facade": {
 			"type": "boolean"
+		},
+		"platform_dst_layer_observer_select": {
+			"type": "boolean"
 		}
 	},
 	"techstack": {