@spaced-out/ui-design-system 0.1.127-beta.0 → 0.1.128

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.128](https://github.com/spaced-out/ui-design-system/compare/v0.1.127...v0.1.128) (2024-09-02)
+
+
+### Bug Fixes
+
+* regain original position on tab out ([#262](https://github.com/spaced-out/ui-design-system/issues/262)) ([2c5e50e](https://github.com/spaced-out/ui-design-system/commit/2c5e50e2feea82e95688b28f226e53358b6d5b55))
+
+### [0.1.127](https://github.com/spaced-out/ui-design-system/compare/v0.1.127-beta.0...v0.1.127) (2024-08-30)
+
+
+### Features
+
+* reverts react 17 upgrade [#263](https://github.com/spaced-out/ui-design-system/issues/263) ([94ffdfb](https://github.com/spaced-out/ui-design-system/commit/94ffdfbb1f6db85bbe36bbea7457d70067e3f18e))
+
 ### [0.1.127-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.1.126...v0.1.127-beta.0) (2024-08-30)
 
 

package/lib/components/ButtonDropdown/ButtonDropdown.js

@@ -10,7 +10,6 @@ var _size = require("../../styles/variables/_size");
 var _space = require("../../styles/variables/_space");
 var _classify = require("../../utils/classify");
 var _clickAway = require("../../utils/click-away");
-var _mergeRefs = require("../../utils/merge-refs");
 var _Button = require("../Button");
 var _ConditionalWrapper = require("../ConditionalWrapper");
 var _Menu = require("../Menu");
@@ -85,9 +84,8 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
     let {
       isOpen,
       onOpen,
-      clickAway,
-      boundaryRef,
-      triggerRef
+      cancelNext,
+      clickAway
     } = _ref2;
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "ButtonDropdown",
@@ -105,7 +103,7 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
       iconRightType: iconRightType,
       disabled: disabled,
       size: size,
-      ref: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef]),
+      ref: refs.setReference,
       onClick: e => {
         onClick?.(e);
         e.stopPropagation();
@@ -117,7 +115,8 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
         icon: classNames?.buttonIcon
       }
     }), children)), isOpen && menu && /*#__PURE__*/React.createElement("div", {
-      ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
+      onClickCapture: cancelNext,
+      ref: refs.setFloating,
       style: {
         display: 'flex',
         position: strategy,

package/lib/components/ButtonDropdown/ButtonDropdown.js.flow

@@ -18,7 +18,6 @@ import {sizeFluid} from '../../styles/variables/_size';
 import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
 import {classify} from '../../utils/classify';
 import {type ClickAwayRefType, ClickAway} from '../../utils/click-away';
-import {mergeRefs} from '../../utils/merge-refs';
 import type {ButtonProps} from '../Button';
 import {Button} from '../Button';
 import {ConditionalWrapper} from '../ConditionalWrapper';
@@ -116,7 +115,7 @@ export const ButtonDropdown: React$AbstractComponent<
 
     return (
       <ClickAway onChange={onMenuToggle} clickAwayRef={clickAwayRef}>
-        {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
+        {({isOpen, onOpen, cancelNext, clickAway}) => (
           <div
             data-testid="ButtonDropdown"
             className={classify(
@@ -149,7 +148,7 @@ export const ButtonDropdown: React$AbstractComponent<
                 iconRightType={iconRightType}
                 disabled={disabled}
                 size={size}
-                ref={mergeRefs([refs.setReference, triggerRef])}
+                ref={refs.setReference}
                 onClick={(e) => {
                   onClick?.(e);
                   e.stopPropagation();
@@ -167,7 +166,8 @@ export const ButtonDropdown: React$AbstractComponent<
 
             {isOpen && menu && (
               <div
-                ref={mergeRefs([refs.setFloating, boundaryRef])}
+                onClickCapture={cancelNext}
+                ref={refs.setFloating}
                 style={{
                   display: 'flex',
                   position: strategy,

package/lib/components/ButtonTabs/ButtonTabDropdown.js

@@ -9,7 +9,6 @@ var _react2 = require("@floating-ui/react");
 var _lodash = require("lodash");
 var _space = require("../../styles/variables/_space");
 var _clickAway = require("../../utils/click-away");
-var _mergeRefs = require("../../utils/merge-refs");
 var _Menu = require("../Menu");
 var _ButtonTab = require("./ButtonTab");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -72,22 +71,22 @@ const ButtonTabDropdown = _ref => {
     let {
       isOpen,
       onOpen,
-      clickAway,
-      boundaryRef,
-      triggerRef
+      cancelNext,
+      clickAway
     } = _ref3;
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "ButtonTabDropdown",
       ref: menuBtnRef
     }, /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, _extends({}, buttonTabProps, {
-      ref: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef]),
+      ref: refs.setReference,
       selectedButtonTabId: moreTabSelectedId,
       onButtonTabSelect: (id, e) => {
         e?.stopPropagation();
         onOpen();
       }
     }), title), isOpen && /*#__PURE__*/React.createElement("div", {
-      ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
+      onClickCapture: cancelNext,
+      ref: refs.setFloating,
       style: {
         display: 'flex',
         position: strategy,

package/lib/components/ButtonTabs/ButtonTabDropdown.js.flow

@@ -17,7 +17,6 @@ import {includes} from 'lodash';
 
 import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
 import {ClickAway} from '../../utils/click-away';
-import {mergeRefs} from '../../utils/merge-refs';
 import type {AnchorType} from '../ButtonDropdown';
 import {Menu} from '../Menu';
 
@@ -83,11 +82,11 @@ export const ButtonTabDropdown = ({
 
   return (
     <ClickAway>
-      {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
+      {({isOpen, onOpen, cancelNext, clickAway}) => (
         <div data-testid="ButtonTabDropdown" ref={menuBtnRef}>
           <ButtonTab
             {...buttonTabProps}
-            ref={mergeRefs([refs.setReference, triggerRef])}
+            ref={refs.setReference}
             selectedButtonTabId={moreTabSelectedId}
             onButtonTabSelect={(id, e) => {
               e?.stopPropagation();
@@ -98,7 +97,8 @@ export const ButtonTabDropdown = ({
           </ButtonTab>
           {isOpen && (
             <div
-              ref={mergeRefs([refs.setFloating, boundaryRef])}
+              onClickCapture={cancelNext}
+              ref={refs.setFloating}
               style={{
                 display: 'flex',
                 position: strategy,

package/lib/components/Dropdown/Dropdown.js

@@ -10,7 +10,6 @@ var _size = require("../../styles/variables/_size");
 var _space = require("../../styles/variables/_space");
 var _classify = require("../../utils/classify");
 var _clickAway = require("../../utils/click-away");
-var _mergeRefs = require("../../utils/merge-refs");
 var _Input = require("../Input");
 var _Menu = require("../Menu");
 var _DropdownModule = _interopRequireDefault(require("./Dropdown.module.css"));
@@ -59,14 +58,13 @@ const Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     let {
       isOpen,
       onOpen,
-      clickAway,
-      boundaryRef,
-      triggerRef
+      cancelNext,
+      clickAway
     } = _ref2;
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "Dropdown",
       className: (0, _classify.classify)(_DropdownModule.default.dropdownContainer, classNames?.wrapper),
-      ref: (0, _mergeRefs.mergeRefs)([dropdownRef, boundaryRef])
+      ref: dropdownRef
     }, /*#__PURE__*/React.createElement(_Input.Input, _extends({}, inputProps, {
       onKeyDown: e => {
         if (e.keyCode === 32) {
@@ -74,7 +72,7 @@ const Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           isOpen ? clickAway() : onOpen();
         }
       },
-      boxRef: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef]),
+      boxRef: refs.setReference,
       size: size,
       placeholder: placeholder,
       value: dropdownInputText,
@@ -89,7 +87,8 @@ const Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       },
       ref: ref
     })), isOpen && menu && /*#__PURE__*/React.createElement("div", {
-      ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
+      onClickCapture: cancelNext,
+      ref: refs.setFloating,
       style: {
         position: strategy,
         top: y ?? _space.spaceNone,

package/lib/components/Dropdown/Dropdown.js.flow

@@ -16,7 +16,6 @@ import {sizeFluid} from '../../styles/variables/_size';
 import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
 import {classify} from '../../utils/classify';
 import {type ClickAwayRefType, ClickAway} from '../../utils/click-away';
-import {mergeRefs} from '../../utils/merge-refs';
 import type {InputProps} from '../Input';
 import {Input} from '../Input';
 import type {MenuOption, MenuProps} from '../Menu';
@@ -79,11 +78,11 @@ export const Dropdown: React$AbstractComponent<
 
     return (
       <ClickAway onChange={onMenuToggle} clickAwayRef={clickAwayRef}>
-        {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
+        {({isOpen, onOpen, cancelNext, clickAway}) => (
           <div
             data-testid="Dropdown"
             className={classify(css.dropdownContainer, classNames?.wrapper)}
-            ref={mergeRefs([dropdownRef, boundaryRef])}
+            ref={dropdownRef}
           >
             <Input
               {...inputProps}
@@ -93,7 +92,7 @@ export const Dropdown: React$AbstractComponent<
                   isOpen ? clickAway() : onOpen();
                 }
               }}
-              boxRef={mergeRefs([refs.setReference, triggerRef])}
+              boxRef={refs.setReference}
               size={size}
               placeholder={placeholder}
               value={dropdownInputText}
@@ -109,7 +108,8 @@ export const Dropdown: React$AbstractComponent<
 
             {isOpen && menu && (
               <div
-                ref={mergeRefs([refs.setFloating, boundaryRef])}
+                onClickCapture={cancelNext}
+                ref={refs.setFloating}
                 style={{
                   position: strategy,
                   top: y ?? spaceNone,

package/lib/components/InlineDropdown/InlineDropdown.js

@@ -9,7 +9,6 @@ var _react2 = require("@floating-ui/react");
 var _space = require("../../styles/variables/_space");
 var _classify = require("../../utils/classify");
 var _clickAway = require("../../utils/click-away");
-var _mergeRefs = require("../../utils/merge-refs");
 var _Button = require("../Button");
 var _Icon = require("../Icon");
 var _Menu = require("../Menu");
@@ -57,9 +56,8 @@ const InlineDropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     let {
       isOpen,
       onOpen,
-      clickAway,
-      boundaryRef,
-      triggerRef
+      cancelNext,
+      clickAway
     } = _ref2;
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "InlineDropdown",
@@ -67,7 +65,7 @@ const InlineDropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       ref: menuBtnRef
     }, /*#__PURE__*/React.createElement(_Button.UnstyledButton, _extends({}, restButtonProps, {
       disabled: disabled,
-      ref: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef]),
+      ref: refs.setReference,
       onClick: e => {
         e.stopPropagation();
         onOpen();
@@ -83,7 +81,8 @@ const InlineDropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         [_InlineDropdownModule.default.disabled]: disabled
       })
     })), isOpen && menu && /*#__PURE__*/React.createElement("div", {
-      ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
+      onClickCapture: cancelNext,
+      ref: refs.setFloating,
       style: {
         display: 'flex',
         position: strategy,

package/lib/components/InlineDropdown/InlineDropdown.js.flow

@@ -17,7 +17,6 @@ import {
 import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
 import {classify} from '../../utils/classify';
 import {type ClickAwayRefType, ClickAway} from '../../utils/click-away';
-import {mergeRefs} from '../../utils/merge-refs';
 import type {UnstyledButtonProps} from '../Button';
 import {UnstyledButton} from '../Button';
 import type {AnchorType} from '../ButtonDropdown';
@@ -83,7 +82,7 @@ export const InlineDropdown: React$AbstractComponent<
 
     return (
       <ClickAway onChange={onMenuToggle} clickAwayRef={clickAwayRef}>
-        {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
+        {({isOpen, onOpen, cancelNext, clickAway}) => (
           <div
             data-testid="InlineDropdown"
             className={classify(
@@ -95,7 +94,7 @@ export const InlineDropdown: React$AbstractComponent<
             <UnstyledButton
               {...restButtonProps}
               disabled={disabled}
-              ref={mergeRefs([refs.setReference, triggerRef])}
+              ref={refs.setReference}
               onClick={(e) => {
                 e.stopPropagation();
                 onOpen();
@@ -121,7 +120,8 @@ export const InlineDropdown: React$AbstractComponent<
             </UnstyledButton>
             {isOpen && menu && (
               <div
-                ref={mergeRefs([refs.setFloating, boundaryRef])}
+                onClickCapture={cancelNext}
+                ref={refs.setFloating}
                 style={{
                   display: 'flex',
                   position: strategy,

package/lib/components/Rating/Rating.js

@@ -48,7 +48,8 @@ const Rating = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "Rating",
     ref: ref,
-    className: (0, _classify.classify)(_RatingModule.default.ratingContainer, classNames?.wrapper)
+    className: (0, _classify.classify)(_RatingModule.default.ratingContainer, classNames?.wrapper),
+    onBlur: () => !quiet && setHoverIcon(-1)
   }, /*#__PURE__*/React.createElement("div", {
     className: _RatingModule.default.stars
   }, Array.from({

package/lib/components/Rating/Rating.js.flow

@@ -76,6 +76,7 @@ export const Rating: React$AbstractComponent<RatingProps, HTMLDivElement> =
           data-testid="Rating"
           ref={ref}
           className={classify(css.ratingContainer, classNames?.wrapper)}
+          onBlur={() => !quiet && setHoverIcon(-1)}
         >
           <div className={css.stars}>
             {Array.from({length: totalIcons}).map((_, index) => {

package/lib/components/Tabs/TabList/TabDropdown.js

@@ -9,7 +9,6 @@ var _react2 = require("@floating-ui/react");
 var _space = require("../../../styles/variables/_space");
 var _classify = require("../../../utils/classify");
 var _clickAway = require("../../../utils/click-away");
-var _mergeRefs = require("../../../utils/merge-refs");
 var _Menu = require("../../Menu");
 var _Tab = require("../Tab");
 var _TabDropdownModule = _interopRequireDefault(require("./TabDropdown.module.css"));
@@ -42,9 +41,8 @@ const TabDropdown = _ref => {
     let {
       isOpen,
       onOpen,
-      clickAway,
-      boundaryRef,
-      triggerRef
+      cancelNext,
+      clickAway
     } = _ref2;
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "TabDropdown",
@@ -52,7 +50,7 @@ const TabDropdown = _ref => {
       ref: menuBtnRef
     }, /*#__PURE__*/React.createElement(_Tab.Tab, _extends({}, props?.tab, {
       size: size,
-      ref: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef]),
+      ref: refs.setReference,
       onClick: e => {
         e.stopPropagation();
         onOpen();
@@ -62,7 +60,8 @@ const TabDropdown = _ref => {
         iconTextWrap: _TabDropdownModule.default.dotTextWrap
       }
     })), isOpen && props?.menu && /*#__PURE__*/React.createElement("div", {
-      ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
+      onClickCapture: cancelNext,
+      ref: refs.setFloating,
       style: {
         display: 'flex',
         position: strategy,

package/lib/components/Tabs/TabList/TabDropdown.js.flow

@@ -17,7 +17,6 @@ import {
 import {spaceNone, spaceXXSmall} from '../../../styles/variables/_space';
 import {classify} from '../../../utils/classify';
 import {ClickAway} from '../../../utils/click-away';
-import {mergeRefs} from '../../../utils/merge-refs';
 import type {AnchorType} from '../../ButtonDropdown';
 import type {MenuOption, MenuProps} from '../../Menu';
 import {Menu} from '../../Menu';
@@ -60,7 +59,7 @@ export const TabDropdown = ({
 
   return (
     <ClickAway>
-      {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
+      {({isOpen, onOpen, cancelNext, clickAway}) => (
         <div
           data-testid="TabDropdown"
           className={classify(css.tabDropdownContainer, classNames?.wrapper)}
@@ -69,7 +68,7 @@ export const TabDropdown = ({
           <Tab
             {...props?.tab}
             size={size}
-            ref={mergeRefs([refs.setReference, triggerRef])}
+            ref={refs.setReference}
             onClick={(e) => {
               e.stopPropagation();
               onOpen();
@@ -81,7 +80,8 @@ export const TabDropdown = ({
           />
           {isOpen && props?.menu && (
             <div
-              ref={mergeRefs([refs.setFloating, boundaryRef])}
+              onClickCapture={cancelNext}
+              ref={refs.setFloating}
               style={{
                 display: 'flex',
                 position: strategy,

package/lib/components/Typeahead/Typeahead.js

@@ -68,13 +68,13 @@ const Typeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     let {
       isOpen,
       onOpen,
-      clickAway,
-      boundaryRef
+      cancelNext,
+      clickAway
     } = _ref2;
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "Typeahead",
       className: (0, _classify.classify)(_TypeaheadModule.default.typeaheadContainer, classNames?.wrapper),
-      ref: boundaryRef
+      onClickCapture: cancelNext
     }, /*#__PURE__*/React.createElement(_SearchInput.SearchInput, _extends({}, inputProps, {
       ref: ref,
       boxRef: refs.setReference,
@@ -106,6 +106,7 @@ const Typeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         onClear?.();
       }
     })), isOpen && !isLoading && menu && filteredOptions && !!filteredOptions.length && /*#__PURE__*/React.createElement("div", {
+      onClickCapture: cancelNext,
       ref: refs.setFloating,
       style: {
         position: strategy,

package/lib/components/Typeahead/Typeahead.js.flow

@@ -98,11 +98,11 @@ export const Typeahead: React$AbstractComponent<
 
     return (
       <ClickAway onChange={onMenuToggle} clickAwayRef={clickAwayRef}>
-        {({isOpen, onOpen, clickAway, boundaryRef}) => (
+        {({isOpen, onOpen, cancelNext, clickAway}) => (
           <div
             data-testid="Typeahead"
             className={classify(css.typeaheadContainer, classNames?.wrapper)}
-            ref={boundaryRef}
+            onClickCapture={cancelNext}
           >
             <SearchInput
               {...inputProps}
@@ -140,6 +140,7 @@ export const Typeahead: React$AbstractComponent<
               filteredOptions &&
               !!filteredOptions.length && (
               <div
+                onClickCapture={cancelNext}
                 ref={refs.setFloating}
                 style={{
                   position: strategy,

package/lib/utils/click-away/click-away.js

@@ -22,8 +22,7 @@ class ClickAway extends React.Component {
       pageBottom: null
     });
     _defineProperty(this, "el", null);
-    _defineProperty(this, "boundaryRef", /*#__PURE__*/React.createRef());
-    _defineProperty(this, "triggerRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "cancelNext", false);
     _defineProperty(this, "handleOpenClick", () => {
       // NOTE (kyle): we recalculate the position on click because sibling and niece components
       // could have changed.
@@ -34,20 +33,21 @@ class ClickAway extends React.Component {
         pageBottom = this.pageBottom();
       }
       this.setState({
-        isOpen: !this.state.isOpen,
+        isOpen: true,
         pageBottom
       }, this.handleOnChange);
     });
     _defineProperty(this, "handleCloseClick", evt => {
-      if (evt.target instanceof Node && this.boundaryRef && (this.boundaryRef === evt.target || this.boundaryRef.current?.contains(evt.target))) {
+      if (this.props.shouldCancel(evt)) {
         return;
       }
-      if (evt.target instanceof Node && this.triggerRef && (this.triggerRef === evt.target || this.triggerRef.current?.contains(evt.target))) {
-        return;
+      if (this.cancelNext === true) {
+        this.cancelNext = false;
+      } else {
+        this.setState({
+          isOpen: false
+        }, this.handleOnChange);
       }
-      this.setState({
-        isOpen: false
-      }, this.handleOnChange);
     });
     _defineProperty(this, "handleCloseOnEscapeKeypress", evt => {
       if (evt?.key === 'Escape') {
@@ -59,6 +59,9 @@ class ClickAway extends React.Component {
         isOpen: false
       }, this.handleOnChange);
     });
+    _defineProperty(this, "cancelNextClickAway", () => {
+      this.cancelNext = true;
+    });
     _defineProperty(this, "handleOnChange", () => this.props.onChange && this.props.onChange(this.state.isOpen));
   }
   componentDidMount() {
@@ -75,24 +78,18 @@ class ClickAway extends React.Component {
     } = this.state;
     if (prevState.isOpen !== isOpen) {
       if (this.state.isOpen) {
-        window.document.addEventListener('click', this.handleCloseClick, {
-          capture: true
-        });
+        window.document.addEventListener('click', this.handleCloseClick);
         if (this.props.closeOnEscapeKeypress) {
           window.document.addEventListener('keyup', this.handleCloseOnEscapeKeypress);
         }
       } else {
-        window.document.removeEventListener('click', this.handleCloseClick, {
-          capture: true
-        });
+        window.document.removeEventListener('click', this.handleCloseClick);
         window.document.removeEventListener('keyup', this.handleCloseOnEscapeKeypress);
       }
     }
   }
   componentWillUnmount() {
-    window.document.removeEventListener('click', this.handleCloseClick, {
-      capture: true
-    });
+    window.document.removeEventListener('click', this.handleCloseClick);
     window.document.removeEventListener('keyup', this.handleCloseOnEscapeKeypress);
   }
   render() {
@@ -115,10 +112,9 @@ class ClickAway extends React.Component {
       isOpen,
       height,
       pageBottom,
+      cancelNext: this.cancelNextClickAway,
       clickAway: this.forceClose,
-      anchorRef: el => this.el = el,
-      boundaryRef: this.boundaryRef,
-      triggerRef: this.triggerRef
+      anchorRef: el => this.el = el
     });
   }
   pageBottom() {
@@ -129,5 +125,6 @@ class ClickAway extends React.Component {
 }
 exports.ClickAway = ClickAway;
 _defineProperty(ClickAway, "defaultProps", {
+  shouldCancel: () => false,
   closeOnEscapeKeypress: true
 });

package/lib/utils/click-away/click-away.js.flow

@@ -6,23 +6,14 @@ import invariant from 'invariant';
 import {pageHeight} from '../dom';
 
 
-type BoundaryRefType<T> = {
-  current: ?T,
-};
-
-type TriggerRefType<T> = {
-  current: ?T,
-};
-
 export type ChildProps = {
   onOpen: () => void,
   isOpen: boolean,
   height: ?number,
   pageBottom: ?number,
+  cancelNext: () => void,
   clickAway: () => void,
   anchorRef: (?HTMLElement) => mixed,
-  boundaryRef: BoundaryRefType<?HTMLElement>,
-  triggerRef: TriggerRefType<?HTMLElement>,
 };
 
 export type ClickAwayRefType = ?{
@@ -35,6 +26,7 @@ export type ClickAwayRefType = ?{
 export type ClickAwayProps = {
   closeOnEscapeKeypress?: boolean,
   children: (props: ChildProps) => React.Node,
+  shouldCancel: (event: MouseEvent) => boolean,
   onChange?: (isOpen: boolean) => mixed,
   clickAwayRef?: ClickAwayRefType,
 };
@@ -49,8 +41,10 @@ type ClickAwayState = {
 
 export class ClickAway extends React.Component<ClickAwayProps, ClickAwayState> {
   static defaultProps: {
+    shouldCancel: () => boolean,
     closeOnEscapeKeypress?: boolean,
   } = {
+      shouldCancel: () => false,
       closeOnEscapeKeypress: true,
     };
 
@@ -61,8 +55,7 @@ export class ClickAway extends React.Component<ClickAwayProps, ClickAwayState> {
   };
 
   el: ?HTMLElement = null;
-  boundaryRef: BoundaryRefType<?HTMLElement> = React.createRef();
-  triggerRef: TriggerRefType<?HTMLElement> = React.createRef();
+  cancelNext: boolean = false;
 
   componentDidMount() {
     if (this.el) {
@@ -77,9 +70,7 @@ export class ClickAway extends React.Component<ClickAwayProps, ClickAwayState> {
     const {isOpen} = this.state;
     if (prevState.isOpen !== isOpen) {
       if (this.state.isOpen) {
-        window.document.addEventListener('click', this.handleCloseClick, {
-          capture: true,
-        });
+        window.document.addEventListener('click', this.handleCloseClick);
         if (this.props.closeOnEscapeKeypress) {
           window.document.addEventListener(
             'keyup',
@@ -87,9 +78,7 @@ export class ClickAway extends React.Component<ClickAwayProps, ClickAwayState> {
           );
         }
       } else {
-        window.document.removeEventListener('click', this.handleCloseClick, {
-          capture: true,
-        });
+        window.document.removeEventListener('click', this.handleCloseClick);
         window.document.removeEventListener(
           'keyup',
           this.handleCloseOnEscapeKeypress,
@@ -99,9 +88,7 @@ export class ClickAway extends React.Component<ClickAwayProps, ClickAwayState> {
   }
 
   componentWillUnmount() {
-    window.document.removeEventListener('click', this.handleCloseClick, {
-      capture: true,
-    });
+    window.document.removeEventListener('click', this.handleCloseClick);
     window.document.removeEventListener(
       'keyup',
       this.handleCloseOnEscapeKeypress,
@@ -111,6 +98,7 @@ export class ClickAway extends React.Component<ClickAwayProps, ClickAwayState> {
   render(): React.Node {
     const {height, isOpen, pageBottom} = this.state;
     const {clickAwayRef} = this.props;
+
     if (clickAwayRef) {
       clickAwayRef.current = {
         forceClose: this.forceClose,
@@ -122,10 +110,9 @@ export class ClickAway extends React.Component<ClickAwayProps, ClickAwayState> {
       isOpen,
       height,
       pageBottom,
+      cancelNext: this.cancelNextClickAway,
       clickAway: this.forceClose,
       anchorRef: (el) => (this.el = el),
-      boundaryRef: this.boundaryRef,
-      triggerRef: this.triggerRef,
     });
   }
 
@@ -139,7 +126,7 @@ export class ClickAway extends React.Component<ClickAwayProps, ClickAwayState> {
 
     this.setState(
       {
-        isOpen: !this.state.isOpen,
+        isOpen: true,
         pageBottom,
       },
       this.handleOnChange,
@@ -147,30 +134,20 @@ export class ClickAway extends React.Component<ClickAwayProps, ClickAwayState> {
   };
 
   handleCloseClick: (evt: MouseEvent) => void = (evt: MouseEvent) => {
-    if (
-      evt.target instanceof Node &&
-      this.boundaryRef &&
-      (this.boundaryRef === evt.target ||
-        this.boundaryRef.current?.contains(evt.target))
-    ) {
+    if (this.props.shouldCancel(evt)) {
       return;
     }
 
-    if (
-      evt.target instanceof Node &&
-      this.triggerRef &&
-      (this.triggerRef === evt.target ||
-        this.triggerRef.current?.contains(evt.target))
-    ) {
-      return;
+    if (this.cancelNext === true) {
+      this.cancelNext = false;
+    } else {
+      this.setState(
+        {
+          isOpen: false,
+        },
+        this.handleOnChange,
+      );
     }
-
-    this.setState(
-      {
-        isOpen: false,
-      },
-      this.handleOnChange,
-    );
   };
 
   handleCloseOnEscapeKeypress: (
@@ -185,6 +162,10 @@ export class ClickAway extends React.Component<ClickAwayProps, ClickAwayState> {
     this.setState({isOpen: false}, this.handleOnChange);
   };
 
+  cancelNextClickAway: () => void = () => {
+    this.cancelNext = true;
+  };
+
   handleOnChange: () => mixed = () =>
     this.props.onChange && this.props.onChange(this.state.isOpen);
 

package/lib/utils/merge-refs/merge-refs.js.flow

@@ -1,7 +1,7 @@
 // @flow strict
 export function mergeRefs(
-  refs: Array<{current: ?HTMLElement}>,
-): (value: ?HTMLElement) => void {
+  refs: Array<{current: ?HTMLElement, ...}>,
+): (value: empty) => void {
   return (value) => {
     refs.forEach((ref) => {
       if (typeof ref === 'function') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.1.127-beta.0",
+  "version": "0.1.128",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {
@@ -104,8 +104,8 @@
     "node-sass": "^7.0.0",
     "paths.macro": "^3.0.1",
     "prettier": "^2.5.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
     "rimraf": "^3.0.2",
     "simple-git": "^3.12.0",
     "standard-version": "^9.5.0",