@atlaskit/select 15.3.0 → 15.3.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/select
 
+## 15.3.1
+
+### Patch Changes
+
+- [`8f6f225ac11`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8f6f225ac11) - Updated prop types for Popup Select
+- [`e4b612d1c48`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e4b612d1c48) - Internal migration to bind-event-listener for safer DOM Event cleanup
+
 ## 15.3.0
 
 ### Minor Changes

package/dist/cjs/PopupSelect/PopupSelect.js

@@ -49,6 +49,8 @@ var _components = require("./components");
 
 var _styles = _interopRequireDefault(require("../styles"));
 
+var _bindEventListener = require("bind-event-listener");
+
 var _excluded = ["footer", "maxMenuWidth", "minMenuWidth", "target"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -118,6 +120,8 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "menuRef", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "selectRef", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "targetRef", null);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "unbindWindowClick", null);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "unbindWindowKeydown", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "defaultStyles", (0, _reactSelect.mergeStyles)((0, _styles.default)(_this.props.validationState, _this.props.spacing === 'compact'), {
       groupHeading: function groupHeading(provided) {
         return _objectSpread(_objectSpread({}, provided), {}, {
@@ -209,7 +213,13 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         return;
       }
 
-      window.addEventListener('keydown', _this.handleKeyDown, true);
+      _this.unbindWindowKeydown = (0, _bindEventListener.bind)(window, {
+        type: 'keydown',
+        listener: _this.handleKeyDown,
+        options: {
+          capture: true
+        }
+      });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "initialiseFocusTrap", function () {
       if (!_this.menuRef) {
@@ -229,6 +239,8 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
       }, 1);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "close", function (options) {
+      var _this$unbindWindowKey, _this2;
+
       var onClose = _this.props.onClose;
 
       if (!(options !== null && options !== void 0 && options.controlOverride) && _this.isOpenControlled) {
@@ -256,7 +268,8 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         return;
       }
 
-      window.removeEventListener('keydown', _this.handleKeyDown, true);
+      (_this$unbindWindowKey = (_this2 = _this).unbindWindowKeydown) === null || _this$unbindWindowKey === void 0 ? void 0 : _this$unbindWindowKey.call(_this2);
+      _this.unbindWindowKeydown = null;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "resolveTargetRef", function (popperRef) {
       return function (ref) {
@@ -384,17 +397,27 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         return;
       }
 
-      window.addEventListener('click', this.handleClick, true);
+      this.unbindWindowClick = (0, _bindEventListener.bind)(window, {
+        type: 'click',
+        listener: this.handleClick,
+        options: {
+          capture: true
+        }
+      });
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
+      var _this$unbindWindowCli, _this$unbindWindowKey2;
+
       if (typeof window === 'undefined') {
         return;
       }
 
-      window.removeEventListener('click', this.handleClick, true);
-      window.removeEventListener('keydown', this.handleKeyDown, true);
+      (_this$unbindWindowCli = this.unbindWindowClick) === null || _this$unbindWindowCli === void 0 ? void 0 : _this$unbindWindowCli.call(this);
+      this.unbindWindowClick = null;
+      (_this$unbindWindowKey2 = this.unbindWindowKeydown) === null || _this$unbindWindowKey2 === void 0 ? void 0 : _this$unbindWindowKey2.call(this);
+      this.unbindWindowKeydown = null;
     }
   }, {
     key: "componentDidUpdate",
@@ -418,7 +441,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _this3 = this;
 
       var target = this.props.target;
       var isOpen = this.state.isOpen;
@@ -426,10 +449,10 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         var ref = _ref3.ref;
         return target && target({
           isOpen: isOpen,
-          ref: _this2.resolveTargetRef(ref),
+          ref: _this3.resolveTargetRef(ref),
           'aria-haspopup': 'true',
           'aria-expanded': isOpen,
-          'aria-controls': isOpen ? _this2.popperWrapperId : undefined
+          'aria-controls': isOpen ? _this3.popperWrapperId : undefined
         });
       }), this.renderSelect());
     }

package/dist/cjs/Select.js

@@ -14,7 +14,7 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _createSelect = _interopRequireDefault(require("./createSelect"));
 
 var packageName = "@atlaskit/select";
-var packageVersion = "15.3.0";
+var packageVersion = "15.3.1";
 var SelectWithoutAnalytics = (0, _createSelect.default)(_reactSelect.default);
 exports.SelectWithoutAnalytics = SelectWithoutAnalytics;
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');

package/dist/cjs/styles.js

@@ -229,7 +229,7 @@ function baseStyles(validationState, isCompact) {
       return _objectSpread(_objectSpread({}, css), {}, {
         borderRadius: '2px',
         backgroundColor: isFocused ? "var(--ds-background-selected, ".concat(_colors.N40, ")") : "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N40, ")"),
-        boxShadow: isFocused ? "0 0 0 2px ".concat("var(--ds-surface, transparent)", ", 0 0 0 4px ").concat("var(--ds-border-focused, transparent)") : 'none',
+        boxShadow: isFocused ? "0 0 0 2px ".concat("var(--ds-surface, transparent)", ", 0 0 0 4px ", "var(--ds-border-focused, transparent)") : 'none',
         maxWidth: '100%',
         '@media screen and (-ms-high-contrast: active)': {
           border: isFocused ? '1px solid transparent' : 'none'

package/dist/cjs/version.json

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

package/dist/es2019/PopupSelect/PopupSelect.js

@@ -11,6 +11,7 @@ import shallowEqualObjects from 'shallow-equal/objects';
 import { N80 } from '@atlaskit/theme/colors';
 import { MenuDialog, DummyControl, defaultComponents } from './components';
 import baseStyles from '../styles';
+import { bind } from 'bind-event-listener';
 
 /** Are we rendering on the client or server? */
 const canUseDOM = () => Boolean(typeof window !== 'undefined' && window.document && window.document.createElement); // ==============================
@@ -56,6 +57,10 @@ export default class PopupSelect extends PureComponent {
 
     _defineProperty(this, "targetRef", null);
 
+    _defineProperty(this, "unbindWindowClick", null);
+
+    _defineProperty(this, "unbindWindowKeydown", null);
+
     _defineProperty(this, "defaultStyles", mergeStyles(baseStyles(this.props.validationState, this.props.spacing === 'compact'), {
       groupHeading: provided => ({ ...provided,
         color: `var(--ds-text-subtlest, ${N80})`
@@ -157,7 +162,13 @@ export default class PopupSelect extends PureComponent {
         return;
       }
 
-      window.addEventListener('keydown', this.handleKeyDown, true);
+      this.unbindWindowKeydown = bind(window, {
+        type: 'keydown',
+        listener: this.handleKeyDown,
+        options: {
+          capture: true
+        }
+      });
     });
 
     _defineProperty(this, "initialiseFocusTrap", () => {
@@ -177,6 +188,8 @@ export default class PopupSelect extends PureComponent {
     });
 
     _defineProperty(this, "close", options => {
+      var _this$unbindWindowKey;
+
       const {
         onClose
       } = this.props;
@@ -206,7 +219,8 @@ export default class PopupSelect extends PureComponent {
         return;
       }
 
-      window.removeEventListener('keydown', this.handleKeyDown, true);
+      (_this$unbindWindowKey = this.unbindWindowKeydown) === null || _this$unbindWindowKey === void 0 ? void 0 : _this$unbindWindowKey.call(this);
+      this.unbindWindowKeydown = null;
     });
 
     _defineProperty(this, "resolveTargetRef", popperRef => ref => {
@@ -367,16 +381,26 @@ export default class PopupSelect extends PureComponent {
       return;
     }
 
-    window.addEventListener('click', this.handleClick, true);
+    this.unbindWindowClick = bind(window, {
+      type: 'click',
+      listener: this.handleClick,
+      options: {
+        capture: true
+      }
+    });
   }
 
   componentWillUnmount() {
+    var _this$unbindWindowCli, _this$unbindWindowKey2;
+
     if (typeof window === 'undefined') {
       return;
     }
 
-    window.removeEventListener('click', this.handleClick, true);
-    window.removeEventListener('keydown', this.handleKeyDown, true);
+    (_this$unbindWindowCli = this.unbindWindowClick) === null || _this$unbindWindowCli === void 0 ? void 0 : _this$unbindWindowCli.call(this);
+    this.unbindWindowClick = null;
+    (_this$unbindWindowKey2 = this.unbindWindowKeydown) === null || _this$unbindWindowKey2 === void 0 ? void 0 : _this$unbindWindowKey2.call(this);
+    this.unbindWindowKeydown = null;
   }
 
   componentDidUpdate(prevProps) {

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

package/dist/es2019/version.json

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

package/dist/esm/PopupSelect/PopupSelect.js

@@ -28,6 +28,7 @@ import shallowEqualObjects from 'shallow-equal/objects';
 import { N80 } from '@atlaskit/theme/colors';
 import { MenuDialog, DummyControl, defaultComponents } from './components';
 import baseStyles from '../styles';
+import { bind } from 'bind-event-listener';
 
 /** Are we rendering on the client or server? */
 var canUseDOM = function canUseDOM() {
@@ -89,6 +90,10 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
 
     _defineProperty(_assertThisInitialized(_this), "targetRef", null);
 
+    _defineProperty(_assertThisInitialized(_this), "unbindWindowClick", null);
+
+    _defineProperty(_assertThisInitialized(_this), "unbindWindowKeydown", null);
+
     _defineProperty(_assertThisInitialized(_this), "defaultStyles", mergeStyles(baseStyles(_this.props.validationState, _this.props.spacing === 'compact'), {
       groupHeading: function groupHeading(provided) {
         return _objectSpread(_objectSpread({}, provided), {}, {
@@ -188,7 +193,13 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         return;
       }
 
-      window.addEventListener('keydown', _this.handleKeyDown, true);
+      _this.unbindWindowKeydown = bind(window, {
+        type: 'keydown',
+        listener: _this.handleKeyDown,
+        options: {
+          capture: true
+        }
+      });
     });
 
     _defineProperty(_assertThisInitialized(_this), "initialiseFocusTrap", function () {
@@ -210,6 +221,8 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "close", function (options) {
+      var _this$unbindWindowKey, _this2;
+
       var onClose = _this.props.onClose;
 
       if (!(options !== null && options !== void 0 && options.controlOverride) && _this.isOpenControlled) {
@@ -237,7 +250,8 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         return;
       }
 
-      window.removeEventListener('keydown', _this.handleKeyDown, true);
+      (_this$unbindWindowKey = (_this2 = _this).unbindWindowKeydown) === null || _this$unbindWindowKey === void 0 ? void 0 : _this$unbindWindowKey.call(_this2);
+      _this.unbindWindowKeydown = null;
     });
 
     _defineProperty(_assertThisInitialized(_this), "resolveTargetRef", function (popperRef) {
@@ -373,17 +387,27 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         return;
       }
 
-      window.addEventListener('click', this.handleClick, true);
+      this.unbindWindowClick = bind(window, {
+        type: 'click',
+        listener: this.handleClick,
+        options: {
+          capture: true
+        }
+      });
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
+      var _this$unbindWindowCli, _this$unbindWindowKey2;
+
       if (typeof window === 'undefined') {
         return;
       }
 
-      window.removeEventListener('click', this.handleClick, true);
-      window.removeEventListener('keydown', this.handleKeyDown, true);
+      (_this$unbindWindowCli = this.unbindWindowClick) === null || _this$unbindWindowCli === void 0 ? void 0 : _this$unbindWindowCli.call(this);
+      this.unbindWindowClick = null;
+      (_this$unbindWindowKey2 = this.unbindWindowKeydown) === null || _this$unbindWindowKey2 === void 0 ? void 0 : _this$unbindWindowKey2.call(this);
+      this.unbindWindowKeydown = null;
     }
   }, {
     key: "componentDidUpdate",
@@ -407,7 +431,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _this3 = this;
 
       var target = this.props.target;
       var isOpen = this.state.isOpen;
@@ -415,10 +439,10 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         var ref = _ref3.ref;
         return target && target({
           isOpen: isOpen,
-          ref: _this2.resolveTargetRef(ref),
+          ref: _this3.resolveTargetRef(ref),
           'aria-haspopup': 'true',
           'aria-expanded': isOpen,
-          'aria-controls': isOpen ? _this2.popperWrapperId : undefined
+          'aria-controls': isOpen ? _this3.popperWrapperId : undefined
         });
       }), this.renderSelect());
     }

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

package/dist/esm/styles.js

@@ -217,7 +217,7 @@ export default function baseStyles(validationState, isCompact) {
       return _objectSpread(_objectSpread({}, css), {}, {
         borderRadius: '2px',
         backgroundColor: isFocused ? "var(--ds-background-selected, ".concat(N40, ")") : "var(--ds-background-neutral-subtle-hovered, ".concat(N40, ")"),
-        boxShadow: isFocused ? "0 0 0 2px ".concat("var(--ds-surface, transparent)", ", 0 0 0 4px ").concat("var(--ds-border-focused, transparent)") : 'none',
+        boxShadow: isFocused ? "0 0 0 2px ".concat("var(--ds-surface, transparent)", ", 0 0 0 4px ", "var(--ds-border-focused, transparent)") : 'none',
         maxWidth: '100%',
         '@media screen and (-ms-high-contrast: active)': {
           border: isFocused ? '1px solid transparent' : 'none'

package/dist/esm/version.json

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

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

@@ -3,6 +3,7 @@ import Select from 'react-select';
 import { FocusTrap } from 'focus-trap';
 import { PopperProps } from 'react-popper';
 import { OptionType, ActionMeta, ReactSelectProps, StylesConfig, ValueType } from '../types';
+import { UnbindFn } from 'bind-event-listener';
 declare type defaultModifiers = 'offset' | 'preventOverflow';
 declare type PopperPropsNoChildren<Modifiers> = Omit<PopperProps<Modifiers>, 'children'>;
 interface PopupSelectTriggerProps {
@@ -12,10 +13,48 @@ interface PopupSelectTriggerProps {
     'aria-controls'?: string;
 }
 export interface PopupSelectProps<Option = OptionType, IsMulti extends boolean = false, Modifiers = string> extends ReactSelectProps<Option, IsMulti> {
+    /**
+     * Defines whether the menu should close when selected. Defaults to "true"
+     */
     closeMenuOnSelect?: boolean;
+    /**
+     * The footer content shown at the bottom of the Popup, underneath the Select options
+     */
     footer?: ReactNode;
+    /**
+      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 [React Popper documentation](https://popper.js.org/react-popper/v2/render-props).
+  
+     */
     popperProps?: PopperPropsNoChildren<Modifiers>;
+    /**
+     * The maximum number of options the Select can contain without rendering the search field.
+     */
     searchThreshold?: number;
+    /**
+     * The maximum width for the popup menu. Can be a number, representing width in pixels,
+     * or a string containing a CSS length datatype.
+     */
+    maxMenuWidth?: number | string;
+    /**
+     * The maximum width for the popup menu. Can be a number, representing width in pixels,
+     * or a string containing a CSS length datatype.
+     */
+    minMenuWidth?: number | string;
+    /**
+      Render props used to anchor the popup to your content.
+  
+      Make this an interactive element, such as an @atlaskit/button component.
+  
+      The provided render props in `options` are detailed below:
+      - `isOpen`: The current state of the popup.
+          Use this to change the appearance of your target based on the state of your component
+      - `ref`: Pass this ref to the element the Popup should be attached to
+      - `aria-haspopup`, `aria-expanded`, `aria-controls`: Spread these onto a target element to
+          ensure your experience is accessible
+     */
     target?: (options: PopupSelectTriggerProps & {
         isOpen: boolean;
     }) => ReactNode;
@@ -32,6 +71,8 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
     menuRef: HTMLElement | null;
     selectRef: Select<Option, IsMulti> | null;
     targetRef: HTMLElement | null;
+    unbindWindowClick: UnbindFn | null;
+    unbindWindowKeydown: UnbindFn | null;
     defaultStyles: StylesConfig<Option, IsMulti>;
     isOpenControlled: boolean;
     defaultOpenState: boolean | undefined;

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

@@ -2,8 +2,8 @@
 import { FC, ReactNode, CSSProperties } from 'react';
 import { ControlProps, MenuProps, OptionType } from '../types';
 interface MenuDialogProps {
-    maxWidth: number;
-    minWidth: number;
+    maxWidth?: number | string;
+    minWidth?: number | string;
     style: CSSProperties;
     children: ReactNode;
     id: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/select",
-  "version": "15.3.0",
+  "version": "15.3.1",
   "description": "Select allows users to make a single selection or multiple selections from a list of options.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -19,7 +19,8 @@
     "deprecatedAutoEntryPoints": true,
     "releaseModel": "scheduled",
     "website": {
-      "name": "Select"
+      "name": "Select",
+      "category": "Components"
     }
   },
   "dependencies": {
@@ -33,6 +34,7 @@
     "@emotion/core": "^10.0.9",
     "@popperjs/core": "^2.9.1",
     "@types/react-select": "^4.0.18",
+    "bind-event-listener": "^2.1.0",
     "focus-trap": "^2.4.5",
     "memoize-one": "^6.0.0",
     "react-fast-compare": "^3.2.0",
@@ -72,6 +74,7 @@
   },
   "techstack": {
     "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
       "theming": "tokens",
       "deprecation": "no-deprecated-imports",
       "styling": [