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

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.127-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.1.126...v0.1.127-beta.0) (2024-08-30)
+
+
+### Features
+
+* react 17 upgrade and click away changes to support the upgrade ([#249](https://github.com/spaced-out/ui-design-system/issues/249)) ([fcc75c4](https://github.com/spaced-out/ui-design-system/commit/fcc75c41d856b1c00f5b18d83ecc2956e047050c))
+
+### [0.1.126](https://github.com/spaced-out/ui-design-system/compare/v0.1.125...v0.1.126) (2024-08-30)
+
+
+### Bug Fixes
+
+* 🖼️ stepper component step color and custom icon changes  ([#261](https://github.com/spaced-out/ui-design-system/issues/261)) ([038d129](https://github.com/spaced-out/ui-design-system/commit/038d12945065634f736b65a328f96c589f8307cf))
+
 ### [0.1.125](https://github.com/spaced-out/ui-design-system/compare/v0.1.124...v0.1.125) (2024-08-29)
 
 

package/lib/components/ButtonDropdown/ButtonDropdown.js

@@ -10,6 +10,7 @@ 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");
@@ -84,8 +85,9 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
     let {
       isOpen,
       onOpen,
-      cancelNext,
-      clickAway
+      clickAway,
+      boundaryRef,
+      triggerRef
     } = _ref2;
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "ButtonDropdown",
@@ -103,7 +105,7 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
       iconRightType: iconRightType,
       disabled: disabled,
       size: size,
-      ref: refs.setReference,
+      ref: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef]),
       onClick: e => {
         onClick?.(e);
         e.stopPropagation();
@@ -115,8 +117,7 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
         icon: classNames?.buttonIcon
       }
     }), children)), isOpen && menu && /*#__PURE__*/React.createElement("div", {
-      onClickCapture: cancelNext,
-      ref: refs.setFloating,
+      ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
       style: {
         display: 'flex',
         position: strategy,

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

@@ -18,6 +18,7 @@ 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';
@@ -115,7 +116,7 @@ export const ButtonDropdown: React$AbstractComponent<
 
     return (
       <ClickAway onChange={onMenuToggle} clickAwayRef={clickAwayRef}>
-        {({isOpen, onOpen, cancelNext, clickAway}) => (
+        {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
           <div
             data-testid="ButtonDropdown"
             className={classify(
@@ -148,7 +149,7 @@ export const ButtonDropdown: React$AbstractComponent<
                 iconRightType={iconRightType}
                 disabled={disabled}
                 size={size}
-                ref={refs.setReference}
+                ref={mergeRefs([refs.setReference, triggerRef])}
                 onClick={(e) => {
                   onClick?.(e);
                   e.stopPropagation();
@@ -166,8 +167,7 @@ export const ButtonDropdown: React$AbstractComponent<
 
             {isOpen && menu && (
               <div
-                onClickCapture={cancelNext}
-                ref={refs.setFloating}
+                ref={mergeRefs([refs.setFloating, boundaryRef])}
                 style={{
                   display: 'flex',
                   position: strategy,

package/lib/components/ButtonTabs/ButtonTabDropdown.js

@@ -9,6 +9,7 @@ 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); }
@@ -71,22 +72,22 @@ const ButtonTabDropdown = _ref => {
     let {
       isOpen,
       onOpen,
-      cancelNext,
-      clickAway
+      clickAway,
+      boundaryRef,
+      triggerRef
     } = _ref3;
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "ButtonTabDropdown",
       ref: menuBtnRef
     }, /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, _extends({}, buttonTabProps, {
-      ref: refs.setReference,
+      ref: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef]),
       selectedButtonTabId: moreTabSelectedId,
       onButtonTabSelect: (id, e) => {
         e?.stopPropagation();
         onOpen();
       }
     }), title), isOpen && /*#__PURE__*/React.createElement("div", {
-      onClickCapture: cancelNext,
-      ref: refs.setFloating,
+      ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
       style: {
         display: 'flex',
         position: strategy,

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

@@ -17,6 +17,7 @@ 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';
 
@@ -82,11 +83,11 @@ export const ButtonTabDropdown = ({
 
   return (
     <ClickAway>
-      {({isOpen, onOpen, cancelNext, clickAway}) => (
+      {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
         <div data-testid="ButtonTabDropdown" ref={menuBtnRef}>
           <ButtonTab
             {...buttonTabProps}
-            ref={refs.setReference}
+            ref={mergeRefs([refs.setReference, triggerRef])}
             selectedButtonTabId={moreTabSelectedId}
             onButtonTabSelect={(id, e) => {
               e?.stopPropagation();
@@ -97,8 +98,7 @@ export const ButtonTabDropdown = ({
           </ButtonTab>
           {isOpen && (
             <div
-              onClickCapture={cancelNext}
-              ref={refs.setFloating}
+              ref={mergeRefs([refs.setFloating, boundaryRef])}
               style={{
                 display: 'flex',
                 position: strategy,

package/lib/components/Dropdown/Dropdown.js

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

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

@@ -16,6 +16,7 @@ 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';
@@ -78,11 +79,11 @@ export const Dropdown: React$AbstractComponent<
 
     return (
       <ClickAway onChange={onMenuToggle} clickAwayRef={clickAwayRef}>
-        {({isOpen, onOpen, cancelNext, clickAway}) => (
+        {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
           <div
             data-testid="Dropdown"
             className={classify(css.dropdownContainer, classNames?.wrapper)}
-            ref={dropdownRef}
+            ref={mergeRefs([dropdownRef, boundaryRef])}
           >
             <Input
               {...inputProps}
@@ -92,7 +93,7 @@ export const Dropdown: React$AbstractComponent<
                   isOpen ? clickAway() : onOpen();
                 }
               }}
-              boxRef={refs.setReference}
+              boxRef={mergeRefs([refs.setReference, triggerRef])}
               size={size}
               placeholder={placeholder}
               value={dropdownInputText}
@@ -108,8 +109,7 @@ export const Dropdown: React$AbstractComponent<
 
             {isOpen && menu && (
               <div
-                onClickCapture={cancelNext}
-                ref={refs.setFloating}
+                ref={mergeRefs([refs.setFloating, boundaryRef])}
                 style={{
                   position: strategy,
                   top: y ?? spaceNone,

package/lib/components/InlineDropdown/InlineDropdown.js

@@ -9,6 +9,7 @@ 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");
@@ -56,8 +57,9 @@ const InlineDropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     let {
       isOpen,
       onOpen,
-      cancelNext,
-      clickAway
+      clickAway,
+      boundaryRef,
+      triggerRef
     } = _ref2;
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "InlineDropdown",
@@ -65,7 +67,7 @@ const InlineDropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       ref: menuBtnRef
     }, /*#__PURE__*/React.createElement(_Button.UnstyledButton, _extends({}, restButtonProps, {
       disabled: disabled,
-      ref: refs.setReference,
+      ref: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef]),
       onClick: e => {
         e.stopPropagation();
         onOpen();
@@ -81,8 +83,7 @@ const InlineDropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         [_InlineDropdownModule.default.disabled]: disabled
       })
     })), isOpen && menu && /*#__PURE__*/React.createElement("div", {
-      onClickCapture: cancelNext,
-      ref: refs.setFloating,
+      ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
       style: {
         display: 'flex',
         position: strategy,

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

@@ -17,6 +17,7 @@ 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';
@@ -82,7 +83,7 @@ export const InlineDropdown: React$AbstractComponent<
 
     return (
       <ClickAway onChange={onMenuToggle} clickAwayRef={clickAwayRef}>
-        {({isOpen, onOpen, cancelNext, clickAway}) => (
+        {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
           <div
             data-testid="InlineDropdown"
             className={classify(
@@ -94,7 +95,7 @@ export const InlineDropdown: React$AbstractComponent<
             <UnstyledButton
               {...restButtonProps}
               disabled={disabled}
-              ref={refs.setReference}
+              ref={mergeRefs([refs.setReference, triggerRef])}
               onClick={(e) => {
                 e.stopPropagation();
                 onOpen();
@@ -120,8 +121,7 @@ export const InlineDropdown: React$AbstractComponent<
             </UnstyledButton>
             {isOpen && menu && (
               <div
-                onClickCapture={cancelNext}
-                ref={refs.setFloating}
+                ref={mergeRefs([refs.setFloating, boundaryRef])}
                 style={{
                   display: 'flex',
                   position: strategy,

package/lib/components/Stepper/Step/Step.js

@@ -57,17 +57,13 @@ const Step = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }, classNames?.stepCounter)
   }, completed && !active ? /*#__PURE__*/React.createElement(_Icon.Icon, {
     name: "check",
-    color: iconName ? 'success' : 'inversePrimary',
-    type: "solid",
-    size: iconName ? 'medium' : 'small'
+    type: _Icon.ICON_TYPE.solid,
+    size: _Icon.ICON_SIZE.small,
+    className: _StepperModule.default.stepIcon
   }) : /*#__PURE__*/React.createElement(React.Fragment, null, iconName ? /*#__PURE__*/React.createElement(_Icon.Icon, {
     name: iconName,
-    className: (0, _classify.default)(_StepperModule.default.stepIcon, {
-      [_StepperModule.default.selected]: active,
-      [_StepperModule.default.completed]: completed,
-      [_StepperModule.default.disabled]: disabled
-    }),
-    size: "medium",
+    className: _StepperModule.default.stepIcon,
+    size: _Icon.ICON_SIZE.small,
     type: iconType
   }) : (index + 1).toString())), /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_StepperModule.default.stepContent, classNames?.content)

package/lib/components/Stepper/Step/Step.js.flow

@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import classify from '../../../utils/classify';
 import type {IconType} from '../../Icon';
-import {Icon} from '../../Icon';
+import {Icon, ICON_SIZE, ICON_TYPE} from '../../Icon';
 
 import css from '../Stepper.module.css';
 
@@ -95,21 +95,17 @@ export const Step: React$AbstractComponent<StepProps, HTMLDivElement> =
             {completed && !active ? (
               <Icon
                 name="check"
-                color={iconName ? 'success' : 'inversePrimary'}
-                type="solid"
-                size={iconName ? 'medium' : 'small'}
+                type={ICON_TYPE.solid}
+                size={ICON_SIZE.small}
+                className={css.stepIcon}
               />
             ) : (
               <React.Fragment>
                 {iconName ? (
                   <Icon
                     name={iconName}
-                    className={classify(css.stepIcon, {
-                      [css.selected]: active,
-                      [css.completed]: completed,
-                      [css.disabled]: disabled,
-                    })}
-                    size="medium"
+                    className={css.stepIcon}
+                    size={ICON_SIZE.small}
                     type={iconType}
                   />
                 ) : (

package/lib/components/Stepper/Stepper.module.css

@@ -1,10 +1,12 @@
 @value (
   colorFillPrimary,
+  colorFillSecondary,
   colorSuccessDark,
   colorBackgroundTertiary,
   colorFillDisabled,
   colorTextSecondary,
   colorTextPrimary,
+  colorTextClickable,
   colorTextDisabled,
   colorTextInversePrimary,
   colorBorderSecondary
@@ -39,7 +41,7 @@
 .stepWrapper {
   position: relative;
   display: flex;
-  align-items: baseline;
+  align-items: flex-start;
   gap: spaceSmall;
   width: sizeFluid;
 }
@@ -60,16 +62,16 @@
   color: colorTextSecondary;
 }
 
-.stepWrapperCounter.selected {
+.stepWrapperCounter.completed {
   background-color: colorFillPrimary;
   border: borderWidthPrimary solid transparent;
   color: colorTextInversePrimary;
 }
 
-.stepWrapperCounter.completed {
-  background-color: colorSuccessDark;
+.stepWrapperCounter.selected {
+  background-color: colorFillSecondary;
   border: borderWidthPrimary solid transparent;
-  color: colorTextInversePrimary;
+  color: colorTextClickable;
 }
 
 .stepWrapperCounter.disabled {
@@ -78,32 +80,15 @@
   color: colorTextDisabled;
 }
 
-.stepWrapperCounter.withIcon {
-  border: initial;
-  border-radius: initial;
-  background-color: initial;
-}
-
 .stepIcon {
   color: inherit;
 }
 
-.stepIcon.selected {
-  color: colorFillPrimary;
-}
-
-.stepIcon.completed {
-  color: colorSuccessDark;
-}
-
-.stepIcon.disabled {
-  color: colorTextDisabled;
-}
-
 .stepContent {
   display: flex;
   flex-flow: column;
   gap: spaceXXSmall;
+  margin-top: spaceXXSmall;
 }
 
 .stepLabelWrapper {

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

@@ -9,6 +9,7 @@ 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"));
@@ -41,8 +42,9 @@ const TabDropdown = _ref => {
     let {
       isOpen,
       onOpen,
-      cancelNext,
-      clickAway
+      clickAway,
+      boundaryRef,
+      triggerRef
     } = _ref2;
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "TabDropdown",
@@ -50,7 +52,7 @@ const TabDropdown = _ref => {
       ref: menuBtnRef
     }, /*#__PURE__*/React.createElement(_Tab.Tab, _extends({}, props?.tab, {
       size: size,
-      ref: refs.setReference,
+      ref: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef]),
       onClick: e => {
         e.stopPropagation();
         onOpen();
@@ -60,8 +62,7 @@ const TabDropdown = _ref => {
         iconTextWrap: _TabDropdownModule.default.dotTextWrap
       }
     })), isOpen && props?.menu && /*#__PURE__*/React.createElement("div", {
-      onClickCapture: cancelNext,
-      ref: refs.setFloating,
+      ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
       style: {
         display: 'flex',
         position: strategy,

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

@@ -17,6 +17,7 @@ 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';
@@ -59,7 +60,7 @@ export const TabDropdown = ({
 
   return (
     <ClickAway>
-      {({isOpen, onOpen, cancelNext, clickAway}) => (
+      {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
         <div
           data-testid="TabDropdown"
           className={classify(css.tabDropdownContainer, classNames?.wrapper)}
@@ -68,7 +69,7 @@ export const TabDropdown = ({
           <Tab
             {...props?.tab}
             size={size}
-            ref={refs.setReference}
+            ref={mergeRefs([refs.setReference, triggerRef])}
             onClick={(e) => {
               e.stopPropagation();
               onOpen();
@@ -80,8 +81,7 @@ export const TabDropdown = ({
           />
           {isOpen && props?.menu && (
             <div
-              onClickCapture={cancelNext}
-              ref={refs.setFloating}
+              ref={mergeRefs([refs.setFloating, boundaryRef])}
               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,
-      cancelNext,
-      clickAway
+      clickAway,
+      boundaryRef
     } = _ref2;
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "Typeahead",
       className: (0, _classify.classify)(_TypeaheadModule.default.typeaheadContainer, classNames?.wrapper),
-      onClickCapture: cancelNext
+      ref: boundaryRef
     }, /*#__PURE__*/React.createElement(_SearchInput.SearchInput, _extends({}, inputProps, {
       ref: ref,
       boxRef: refs.setReference,
@@ -106,7 +106,6 @@ 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, cancelNext, clickAway}) => (
+        {({isOpen, onOpen, clickAway, boundaryRef}) => (
           <div
             data-testid="Typeahead"
             className={classify(css.typeaheadContainer, classNames?.wrapper)}
-            onClickCapture={cancelNext}
+            ref={boundaryRef}
           >
             <SearchInput
               {...inputProps}
@@ -140,7 +140,6 @@ 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,7 +22,8 @@ class ClickAway extends React.Component {
       pageBottom: null
     });
     _defineProperty(this, "el", null);
-    _defineProperty(this, "cancelNext", false);
+    _defineProperty(this, "boundaryRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "triggerRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "handleOpenClick", () => {
       // NOTE (kyle): we recalculate the position on click because sibling and niece components
       // could have changed.
@@ -33,21 +34,20 @@ class ClickAway extends React.Component {
         pageBottom = this.pageBottom();
       }
       this.setState({
-        isOpen: true,
+        isOpen: !this.state.isOpen,
         pageBottom
       }, this.handleOnChange);
     });
     _defineProperty(this, "handleCloseClick", evt => {
-      if (this.props.shouldCancel(evt)) {
+      if (evt.target instanceof Node && this.boundaryRef && (this.boundaryRef === evt.target || this.boundaryRef.current?.contains(evt.target))) {
         return;
       }
-      if (this.cancelNext === true) {
-        this.cancelNext = false;
-      } else {
-        this.setState({
-          isOpen: false
-        }, this.handleOnChange);
+      if (evt.target instanceof Node && this.triggerRef && (this.triggerRef === evt.target || this.triggerRef.current?.contains(evt.target))) {
+        return;
       }
+      this.setState({
+        isOpen: false
+      }, this.handleOnChange);
     });
     _defineProperty(this, "handleCloseOnEscapeKeypress", evt => {
       if (evt?.key === 'Escape') {
@@ -59,9 +59,6 @@ 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() {
@@ -78,18 +75,24 @@ class ClickAway extends React.Component {
     } = this.state;
     if (prevState.isOpen !== isOpen) {
       if (this.state.isOpen) {
-        window.document.addEventListener('click', this.handleCloseClick);
+        window.document.addEventListener('click', this.handleCloseClick, {
+          capture: true
+        });
         if (this.props.closeOnEscapeKeypress) {
           window.document.addEventListener('keyup', this.handleCloseOnEscapeKeypress);
         }
       } else {
-        window.document.removeEventListener('click', this.handleCloseClick);
+        window.document.removeEventListener('click', this.handleCloseClick, {
+          capture: true
+        });
         window.document.removeEventListener('keyup', this.handleCloseOnEscapeKeypress);
       }
     }
   }
   componentWillUnmount() {
-    window.document.removeEventListener('click', this.handleCloseClick);
+    window.document.removeEventListener('click', this.handleCloseClick, {
+      capture: true
+    });
     window.document.removeEventListener('keyup', this.handleCloseOnEscapeKeypress);
   }
   render() {
@@ -112,9 +115,10 @@ class ClickAway extends React.Component {
       isOpen,
       height,
       pageBottom,
-      cancelNext: this.cancelNextClickAway,
       clickAway: this.forceClose,
-      anchorRef: el => this.el = el
+      anchorRef: el => this.el = el,
+      boundaryRef: this.boundaryRef,
+      triggerRef: this.triggerRef
     });
   }
   pageBottom() {
@@ -125,6 +129,5 @@ 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,14 +6,23 @@ 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 = ?{
@@ -26,7 +35,6 @@ export type ClickAwayRefType = ?{
 export type ClickAwayProps = {
   closeOnEscapeKeypress?: boolean,
   children: (props: ChildProps) => React.Node,
-  shouldCancel: (event: MouseEvent) => boolean,
   onChange?: (isOpen: boolean) => mixed,
   clickAwayRef?: ClickAwayRefType,
 };
@@ -41,10 +49,8 @@ type ClickAwayState = {
 
 export class ClickAway extends React.Component<ClickAwayProps, ClickAwayState> {
   static defaultProps: {
-    shouldCancel: () => boolean,
     closeOnEscapeKeypress?: boolean,
   } = {
-      shouldCancel: () => false,
       closeOnEscapeKeypress: true,
     };
 
@@ -55,7 +61,8 @@ export class ClickAway extends React.Component<ClickAwayProps, ClickAwayState> {
   };
 
   el: ?HTMLElement = null;
-  cancelNext: boolean = false;
+  boundaryRef: BoundaryRefType<?HTMLElement> = React.createRef();
+  triggerRef: TriggerRefType<?HTMLElement> = React.createRef();
 
   componentDidMount() {
     if (this.el) {
@@ -70,7 +77,9 @@ 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);
+        window.document.addEventListener('click', this.handleCloseClick, {
+          capture: true,
+        });
         if (this.props.closeOnEscapeKeypress) {
           window.document.addEventListener(
             'keyup',
@@ -78,7 +87,9 @@ export class ClickAway extends React.Component<ClickAwayProps, ClickAwayState> {
           );
         }
       } else {
-        window.document.removeEventListener('click', this.handleCloseClick);
+        window.document.removeEventListener('click', this.handleCloseClick, {
+          capture: true,
+        });
         window.document.removeEventListener(
           'keyup',
           this.handleCloseOnEscapeKeypress,
@@ -88,7 +99,9 @@ export class ClickAway extends React.Component<ClickAwayProps, ClickAwayState> {
   }
 
   componentWillUnmount() {
-    window.document.removeEventListener('click', this.handleCloseClick);
+    window.document.removeEventListener('click', this.handleCloseClick, {
+      capture: true,
+    });
     window.document.removeEventListener(
       'keyup',
       this.handleCloseOnEscapeKeypress,
@@ -98,7 +111,6 @@ 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,
@@ -110,9 +122,10 @@ 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,
     });
   }
 
@@ -126,7 +139,7 @@ export class ClickAway extends React.Component<ClickAwayProps, ClickAwayState> {
 
     this.setState(
       {
-        isOpen: true,
+        isOpen: !this.state.isOpen,
         pageBottom,
       },
       this.handleOnChange,
@@ -134,20 +147,30 @@ export class ClickAway extends React.Component<ClickAwayProps, ClickAwayState> {
   };
 
   handleCloseClick: (evt: MouseEvent) => void = (evt: MouseEvent) => {
-    if (this.props.shouldCancel(evt)) {
+    if (
+      evt.target instanceof Node &&
+      this.boundaryRef &&
+      (this.boundaryRef === evt.target ||
+        this.boundaryRef.current?.contains(evt.target))
+    ) {
       return;
     }
 
-    if (this.cancelNext === true) {
-      this.cancelNext = false;
-    } else {
-      this.setState(
-        {
-          isOpen: false,
-        },
-        this.handleOnChange,
-      );
+    if (
+      evt.target instanceof Node &&
+      this.triggerRef &&
+      (this.triggerRef === evt.target ||
+        this.triggerRef.current?.contains(evt.target))
+    ) {
+      return;
     }
+
+    this.setState(
+      {
+        isOpen: false,
+      },
+      this.handleOnChange,
+    );
   };
 
   handleCloseOnEscapeKeypress: (
@@ -162,10 +185,6 @@ 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: empty) => void {
+  refs: Array<{current: ?HTMLElement}>,
+): (value: ?HTMLElement) => 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.125",
+  "version": "0.1.127-beta.0",
   "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": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "rimraf": "^3.0.2",
     "simple-git": "^3.12.0",
     "standard-version": "^9.5.0",