@spaced-out/ui-design-system 0.1.25 → 0.1.27

package/lib/components/Modal/Modal.js.flow

@@ -8,10 +8,16 @@ import {
   FloatingFocusManager,
   // $FlowFixMe[untyped-import]
   useFloating,
-} from '@floating-ui/react-dom-interactions';
+  // $FlowFixMe[untyped-import]
+  useTransitionStyles,
+} from '@floating-ui/react';
 
 import useMountTransition from '../../hooks/useMountTransition';
-import {motionDurationNormal} from '../../styles/variables/_motion';
+import {
+  motionDurationNormal,
+  motionDurationSlow,
+} from '../../styles/variables/_motion';
+import {spaceNegHalfFluid} from '../../styles/variables/_space';
 import classify from '../../utils/classify';
 import {uuid} from '../../utils/helpers';
 import {Button} from '../Button/Button';
@@ -26,6 +32,14 @@ type ClassNames = $ReadOnly<{
   backdrop?: string,
 }>;
 
+export type UseTransitionStylesProps = {
+  duration?: number | {open: number, close: number},
+  initial?: {+[key: string]: mixed},
+  open?: {+[key: string]: mixed},
+  close?: {+[key: string]: mixed},
+  common?: {+[key: string]: mixed},
+};
+
 type FooterClassNames = $ReadOnly<{
   wrapper?: string,
   actions?: string,
@@ -41,6 +55,7 @@ export type ModalProps = {
   removeWhenClosed?: boolean,
   tapOutsideToClose?: boolean,
   initialFocus?: number,
+  customAnimation?: UseTransitionStylesProps,
 };
 
 export type ModalHeaderProps = {
@@ -60,6 +75,22 @@ export type ModalBodyProps = {
   className?: string,
 };
 
+const DEFAULT_MODAL_ANIMATION = {
+  duration: {
+    open: parseInt(motionDurationSlow),
+    close: parseInt(motionDurationNormal),
+  },
+  initial: {
+    transform: `translate(${spaceNegHalfFluid}, ${spaceNegHalfFluid}) scale(0.95)`,
+  },
+  open: {
+    transform: `translate(${spaceNegHalfFluid}, ${spaceNegHalfFluid}) scale(1)`,
+  },
+  close: {
+    transform: `translate(${spaceNegHalfFluid}, ${spaceNegHalfFluid}) scale(0.95)`,
+  },
+};
+
 export const ModalHeader = ({
   children,
   hideCloseBtn,
@@ -157,8 +188,13 @@ export const Modal = ({
   hideBackdrop = false,
   tapOutsideToClose = true,
   initialFocus = -1,
+  customAnimation,
 }: ModalProps): React.Node => {
-  const {floating, context} = useFloating();
+  const {refs, context} = useFloating({open: isOpen});
+  const {isMounted, styles} = useTransitionStyles(
+    context,
+    customAnimation || DEFAULT_MODAL_ANIMATION,
+  );
   const modalId = uuid();
 
   const bodyRef = React.useRef(document.querySelector('body'));
@@ -242,7 +278,7 @@ export const Modal = ({
   return createPortal(
     <FloatingFocusManager context={context} initialFocus={initialFocus}>
       <div
-        ref={floating}
+        ref={refs.setFloating}
         aria-hidden={isOpen ? 'false' : 'true'}
         className={classify(
           css.modalContainer,
@@ -263,9 +299,18 @@ export const Modal = ({
           )}
           onClick={onBackdropClick}
         />
-        <div className={classify(css.modal, classNames?.content)} role="dialog">
-          {children}
-        </div>
+        {isMounted && (
+          <div
+            className={classify(css.modal, classNames?.content)}
+            role="dialog"
+            style={{
+              // Transition styles
+              ...styles,
+            }}
+          >
+            {children}
+          </div>
+        )}
       </div>
     </FloatingFocusManager>,
     portalRootRef.current,

package/lib/components/Modal/Modal.module.css

@@ -16,8 +16,7 @@
   position: fixed;
   top: spaceHalfFluid;
   left: spaceHalfFluid;
-  transform: translate(spaceNegHalfFluid, spaceNegHalfFluid) scale(0.95);
-  opacity: opacity0;
+  transform: translate(spaceNegHalfFluid, spaceNegHalfFluid);
   composes: boxShadow4 from '../../styles/shadow.module.css';
   display: flex;
   max-height: sizeFluid;
@@ -25,7 +24,6 @@
   background: colorBackgroundTertiary;
   overflow: auto;
   z-index: elevationModal;
-  transition: opacity motionDurationNormal, transform motionDurationNormal;
   border-radius: borderRadiusMedium;
 }
 

package/lib/components/Panel/Panel.js

@@ -7,6 +7,7 @@ exports.PanelHeader = exports.PanelFooter = exports.PanelBody = exports.Panel =
 var React = _interopRequireWildcard(require("react"));
 var _useMountTransition = _interopRequireDefault(require("../../hooks/useMountTransition"));
 var _motion = require("../../styles/variables/_motion");
+var _space = require("../../styles/variables/_space");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _Button = require("../Button");
 var _Modal = require("../Modal");
@@ -16,6 +17,22 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const getDefaultPanelAnimation = anchor => ({
+  // Configure both open and close durations:
+  duration: {
+    open: parseInt(_motion.motionDurationSlow),
+    close: parseInt(_motion.motionDurationNormal)
+  },
+  initial: {
+    transform: `translateX(${anchor === 'right' ? _space.spaceFluid : _space.spaceNegFluid})`
+  },
+  open: {
+    transform: `translateX(${_space.spaceNone})`
+  },
+  close: {
+    transform: `translateX(${anchor === 'right' ? _space.spaceFluid : _space.spaceNegFluid})`
+  }
+});
 const PanelHeader = _ref => {
   let {
     children,
@@ -68,9 +85,11 @@ const Panel = _ref4 => {
     onClose,
     hideBackdrop = true,
     classNames,
+    customAnimation,
     ...restPanelProps
   } = _ref4;
   const isTransitioning = (0, _useMountTransition.default)(isOpen, parseInt(_motion.motionDurationNormal));
+  const defaultPanelAnimation = getDefaultPanelAnimation(anchor);
   return /*#__PURE__*/React.createElement(_Modal.Modal, _extends({
     isOpen: isOpen,
     onClose: onClose,
@@ -87,7 +106,8 @@ const Panel = _ref4 => {
         [_PanelModule.default.large]: size === 'large'
       }, classNames?.content),
       backdrop: (0, _classify.default)(classNames?.backdrop)
-    }
+    },
+    customAnimation: customAnimation || defaultPanelAnimation
   }), children);
 };
 exports.Panel = Panel;

package/lib/components/Panel/Panel.js.flow

@@ -3,7 +3,15 @@
 import * as React from 'react';
 
 import useMountTransition from '../../hooks/useMountTransition';
-import {motionDurationNormal} from '../../styles/variables/_motion';
+import {
+  motionDurationNormal,
+  motionDurationSlow,
+} from '../../styles/variables/_motion';
+import {
+  spaceFluid,
+  spaceNegFluid,
+  spaceNone,
+} from '../../styles/variables/_space';
 import classify from '../../utils/classify';
 import {Button} from '../Button';
 import type {ModalProps} from '../Modal';
@@ -45,6 +53,23 @@ export type PanelProps = {
   anchor?: PanelAnchor,
 };
 
+const getDefaultPanelAnimation = (anchor: PanelAnchor) => ({
+  // Configure both open and close durations:
+  duration: {
+    open: parseInt(motionDurationSlow),
+    close: parseInt(motionDurationNormal),
+  },
+  initial: {
+    transform: `translateX(${anchor === 'right' ? spaceFluid : spaceNegFluid})`,
+  },
+  open: {
+    transform: `translateX(${spaceNone})`,
+  },
+  close: {
+    transform: `translateX(${anchor === 'right' ? spaceFluid : spaceNegFluid})`,
+  },
+});
+
 export const PanelHeader = ({
   children,
   hideCloseBtn,
@@ -102,6 +127,7 @@ export const Panel = ({
   onClose,
   hideBackdrop = true,
   classNames,
+  customAnimation,
   ...restPanelProps
 }: PanelProps): React.Node => {
   const isTransitioning = useMountTransition(
@@ -109,6 +135,8 @@ export const Panel = ({
     parseInt(motionDurationNormal),
   );
 
+  const defaultPanelAnimation = getDefaultPanelAnimation(anchor);
+
   return (
     <Modal
       isOpen={isOpen}
@@ -136,6 +164,7 @@ export const Panel = ({
         ),
         backdrop: classify(classNames?.backdrop),
       }}
+      customAnimation={customAnimation || defaultPanelAnimation}
     >
       {children}
     </Modal>

package/lib/components/Panel/Panel.module.css

@@ -7,7 +7,6 @@
 .panel {
   opacity: initial;
   height: sizeFluid;
-  transition: transform motionDurationNormal motionEaseInEaseOut;
   background-color: colorBackgroundTertiary;
   border-radius: borderRadiusNone;
 }

package/lib/components/Table/DefaultRow.js

@@ -58,18 +58,18 @@ function DefaultRow(_ref2) {
     headers,
     selected,
     onSelect,
-    className,
+    classNames,
     disabled
   } = _ref2;
   return /*#__PURE__*/React.createElement(BasicRow, {
-    className: (0, _classify.default)(className, selected ? _TableModule.default.defaultSelectedBodyRow : _TableModule.default.defaultBodyRow)
-  }, selected != null && /*#__PURE__*/React.createElement(_Cell.PaddedContentCell, null, /*#__PURE__*/React.createElement("div", {
-    className: _TableModule.default.checkbox
+    className: (0, _classify.default)(selected ? _TableModule.default.defaultSelectedBodyRow : _TableModule.default.defaultBodyRow, classNames?.tableRow)
+  }, selected != null && /*#__PURE__*/React.createElement(_Cell.PaddedContentCell, {
+    className: (0, _classify.default)(_TableModule.default.checkbox, classNames?.checkbox)
   }, /*#__PURE__*/React.createElement(_Checkbox.Checkbox, {
     checked: selected ? true : false,
     onChange: onSelect,
     disabled: disabled
-  }))), headers.map((item, index) => {
+  })), headers.map((item, index) => {
     const {
       key,
       render: Renderer,

package/lib/components/Table/DefaultRow.js.flow

@@ -15,6 +15,9 @@ import type {GenericObject} from './Table';
 
 import css from './Table.module.css';
 
+
+type ClassNames = $ReadOnly<{tableRow?: string, checkbox?: string}>;
+
 // When using a custom Row prop, you need to create a component that looks like
 //     MyRow = (props: TableRowProps<Entries, Extras>): React.Node => {...}
 // otherwise flow will complain.
@@ -91,7 +94,7 @@ export function DefaultRow<T: GenericObject, U: GenericObject>({
   headers,
   selected,
   onSelect,
-  className,
+  classNames,
   disabled,
 }: {
   data: T,
@@ -100,25 +103,25 @@ export function DefaultRow<T: GenericObject, U: GenericObject>({
   selected?: boolean,
   // value dependent on checkbox checked value
   onSelect?: ({value: string, checked: boolean}) => mixed,
-  className?: string,
+  classNames?: ClassNames,
   disabled?: boolean,
 }): React.Node {
   return (
     <BasicRow
       className={classify(
-        className,
         selected ? css.defaultSelectedBodyRow : css.defaultBodyRow,
+        classNames?.tableRow,
       )}
     >
       {selected != null && (
-        <PaddedContentCell>
-          <div className={css.checkbox}>
-            <Checkbox
-              checked={selected ? true : false}
-              onChange={onSelect}
-              disabled={disabled}
-            />
-          </div>
+        <PaddedContentCell
+          className={classify(css.checkbox, classNames?.checkbox)}
+        >
+          <Checkbox
+            checked={selected ? true : false}
+            onChange={onSelect}
+            disabled={disabled}
+          />
         </PaddedContentCell>
       )}
       {headers.map((item, index) => {

package/lib/components/Table/StaticTable.js

@@ -128,7 +128,11 @@ function StaticTable(props) {
       headers: headers,
       selected: selected,
       onSelect: selectedKeys != null ? _v => onSelect?.((0, _xor.default)(selectedKeys ?? [], [key])) : undefined,
-      disabled: disabled
+      disabled: disabled,
+      classNames: {
+        tableRow: classNames?.tableRow,
+        checkbox: classNames?.checkbox
+      }
     });
   }))));
 }

package/lib/components/Table/StaticTable.js.flow

@@ -168,6 +168,10 @@ export function StaticTable<Data: GenericObject, Extras: GenericObject>(props: {
                       : undefined
                   }
                   disabled={disabled}
+                  classNames={{
+                    tableRow: classNames?.tableRow,
+                    checkbox: classNames?.checkbox,
+                  }}
                 />
               );
             })

package/lib/components/Table/Table.js.flow

@@ -24,6 +24,8 @@ type ClassNames = $ReadOnly<{
   table?: string,
   tableHeader?: string,
   tableBody?: string,
+  tableRow?: string,
+  checkbox?: string,
 }>;
 
 export type TableProps<T, U> = {

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TabDropdown = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _reactDom = require("@floating-ui/react-dom");
+var _react2 = require("@floating-ui/react");
 var _space = require("../../../styles/variables/_space");
 var _classify = require("../../../utils/classify");
 var _clickAway = require("../../../utils/click-away");
@@ -28,14 +28,14 @@ const TabDropdown = _ref => {
   const {
     x,
     y,
-    reference,
-    floating,
+    refs,
     strategy
-  } = (0, _reactDom.useFloating)({
+  } = (0, _react2.useFloating)({
+    open: true,
     strategy: 'absolute',
     placement: anchorPosition,
-    whileElementsMounted: _reactDom.autoUpdate,
-    middleware: [(0, _reactDom.shift)(), (0, _reactDom.flip)(), (0, _reactDom.offset)(parseInt(_space.spaceXXSmall))]
+    whileElementsMounted: _react2.autoUpdate,
+    middleware: [(0, _react2.shift)(), (0, _react2.flip)(), (0, _react2.offset)(parseInt(_space.spaceXXSmall))]
   });
   return /*#__PURE__*/React.createElement(_clickAway.ClickAway, null, _ref2 => {
     let {
@@ -50,7 +50,7 @@ const TabDropdown = _ref => {
       ref: menuBtnRef
     }, /*#__PURE__*/React.createElement(_Tab.Tab, _extends({}, props?.tab, {
       size: size,
-      ref: reference,
+      ref: refs.setReference,
       onClick: e => {
         e.stopPropagation();
         onOpen();
@@ -61,7 +61,7 @@ const TabDropdown = _ref => {
       }
     })), isOpen && props?.menu && /*#__PURE__*/React.createElement("div", {
       onClickCapture: cancelNext,
-      ref: floating,
+      ref: refs.setFloating,
       style: {
         display: 'flex',
         position: strategy,
@@ -73,7 +73,8 @@ const TabDropdown = _ref => {
         onOptionSelect && onOptionSelect(option);
         clickAway();
       },
-      size: props.menu.size || size
+      size: props.menu.size || size,
+      onTabOut: clickAway
     }))));
   });
 };

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

@@ -12,7 +12,7 @@ import {
   shift,
   // $FlowFixMe[untyped-import]
   useFloating,
-} from '@floating-ui/react-dom';
+} from '@floating-ui/react';
 
 import {spaceNone, spaceXXSmall} from '../../../styles/variables/_space';
 import {classify} from '../../../utils/classify';
@@ -49,7 +49,8 @@ export const TabDropdown = ({
   classNames,
 }: TabDropdownProps): React.Node => {
   const menuBtnRef = React.useRef();
-  const {x, y, reference, floating, strategy} = useFloating({
+  const {x, y, refs, strategy} = useFloating({
+    open: true,
     strategy: 'absolute',
     placement: anchorPosition,
     whileElementsMounted: autoUpdate,
@@ -67,7 +68,7 @@ export const TabDropdown = ({
           <Tab
             {...props?.tab}
             size={size}
-            ref={reference}
+            ref={refs.setReference}
             onClick={(e) => {
               e.stopPropagation();
               onOpen();
@@ -80,7 +81,7 @@ export const TabDropdown = ({
           {isOpen && props?.menu && (
             <div
               onClickCapture={cancelNext}
-              ref={floating}
+              ref={refs.setFloating}
               style={{
                 display: 'flex',
                 position: strategy,
@@ -95,6 +96,7 @@ export const TabDropdown = ({
                   clickAway();
                 }}
                 size={props.menu.size || size}
+                onTabOut={clickAway}
               />
             </div>
           )}

package/lib/components/Toast/Toast.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ToastTitle = exports.ToastFooter = exports.ToastBody = exports.Toast = exports.TOAST_SEMANTIC = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _reactDomInteractions = require("@floating-ui/react-dom-interactions");
+var _react2 = require("@floating-ui/react");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _Icon = require("../Icon");
 var _Text = require("../Text");
@@ -145,9 +145,11 @@ const Toast = _ref5 => {
     customIcon
   } = _ref5;
   const {
-    floating,
+    refs,
     context
-  } = (0, _reactDomInteractions.useFloating)();
+  } = (0, _react2.useFloating)({
+    open: true
+  });
   const getComp = comp => {
     const childrenArray = React.Children.toArray(children);
     if (childrenArray.length) {
@@ -168,12 +170,12 @@ const Toast = _ref5 => {
   const footerWithClose = footer ? /*#__PURE__*/React.cloneElement(footer, {
     onClose
   }) : null;
-  return /*#__PURE__*/React.createElement(_reactDomInteractions.FloatingFocusManager, {
+  return /*#__PURE__*/React.createElement(_react2.FloatingFocusManager, {
     context: context,
     initialFocus: initialFocus
   }, /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_ToastModule.default.toastContainer, classNames?.wrapper),
-    ref: floating
+    ref: refs.setFloating
   }, customIcon || /*#__PURE__*/React.createElement(ToastIcon, {
     semantic: semantic
   }), /*#__PURE__*/React.createElement("div", {

package/lib/components/Toast/Toast.js.flow

@@ -6,7 +6,7 @@ import {
   FloatingFocusManager,
   // $FlowFixMe[untyped-import]
   useFloating,
-} from '@floating-ui/react-dom-interactions';
+} from '@floating-ui/react';
 
 import classify from '../../utils/classify';
 import {CloseIcon, Icon} from '../Icon';
@@ -191,7 +191,9 @@ export const Toast = ({
   initialFocus = -1,
   customIcon,
 }: ToastProps): React.Node => {
-  const {floating, context} = useFloating();
+  const {refs, context} = useFloating({
+    open: true,
+  });
 
   const getComp = (comp: string) => {
     const childrenArray = React.Children.toArray(children);
@@ -215,7 +217,7 @@ export const Toast = ({
     <FloatingFocusManager context={context} initialFocus={initialFocus}>
       <div
         className={classify(css.toastContainer, classNames?.wrapper)}
-        ref={floating}
+        ref={refs.setFloating}
       >
         {customIcon || <ToastIcon semantic={semantic} />}
         <div className={css.toastMidSection}>

package/lib/components/Toggle/Toggle.js

@@ -34,7 +34,8 @@ const Toggle = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
       });
     }
   };
-  const onWrapClickHandler = () => {
+  const onWrapClickHandler = e => {
+    e.nativeEvent.stopImmediatePropagation();
     toggleInput.current?.click();
   };
   React.useEffect(() => {

package/lib/components/Toggle/Toggle.js.flow

@@ -56,7 +56,8 @@ export const Toggle: React$AbstractComponent<ToggleProps, HTMLInputElement> =
         }
       };
 
-      const onWrapClickHandler = () => {
+      const onWrapClickHandler = (e) => {
+        e.nativeEvent.stopImmediatePropagation();
         toggleInput.current?.click();
       };
 

package/lib/components/Tooltip/Tooltip.js

@@ -5,13 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Tooltip = exports.DELAY_MOTION_DURATION_TYPES = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _reactDom = require("react-dom");
-var _reactDomInteractions = require("@floating-ui/react-dom-interactions");
+var _react2 = require("@floating-ui/react");
 var ELEVATION = _interopRequireWildcard(require("../../styles/variables/_elevation"));
 var MOTION = _interopRequireWildcard(require("../../styles/variables/_motion"));
 var _space = require("../../styles/variables/_space");
 var _classify = require("../../utils/classify");
-var _mergeRefs = require("../../utils/merge-refs");
 var _string = require("../../utils/string");
 var _Truncate = require("../Truncate");
 var _TooltipModule = _interopRequireDefault(require("./Tooltip.module.css"));
@@ -41,48 +39,47 @@ const Tooltip = _ref => {
     elevation = ELEVATION['elevationTooltip'],
     hidden
   } = _ref;
-  const bodyRef = React.useRef(document.querySelector('body'));
-  const [open, setOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = React.useState(false);
   const {
-    x,
-    y,
-    reference,
-    floating,
-    strategy,
-    context
-  } = (0, _reactDomInteractions.useFloating)({
+    refs,
+    floatingStyles,
+    context,
+    strategy
+  } = (0, _react2.useFloating)({
+    open: isOpen,
+    onOpenChange: setIsOpen,
     placement,
-    open,
-    onOpenChange: setOpen,
-    middleware: [(0, _reactDomInteractions.offset)(parseInt(_space.spaceXXSmall)), (0, _reactDomInteractions.flip)(), (0, _reactDomInteractions.shift)()],
-    whileElementsMounted: _reactDomInteractions.autoUpdate
+    // Make sure the tooltip stays on the screen
+    whileElementsMounted: _react2.autoUpdate,
+    middleware: [(0, _react2.offset)(parseInt(_space.spaceXXSmall)), (0, _react2.flip)({
+      fallbackAxisSideDirection: 'start'
+    }), (0, _react2.shift)()]
   });
   const motionDurationToken = 'motionDuration' + (0, _string.capitalize)(delayMotionDuration);
   const hoverDelay = parseInt(MOTION[motionDurationToken]) === NaN ? 0 : parseInt(MOTION[motionDurationToken]);
   const {
     getReferenceProps,
     getFloatingProps
-  } = (0, _reactDomInteractions.useInteractions)([(0, _reactDomInteractions.useHover)(context, {
+  } = (0, _react2.useInteractions)([(0, _react2.useHover)(context, {
     delay: {
       open: hoverDelay,
       close: 0
     }
-  }), (0, _reactDomInteractions.useFocus)(context), (0, _reactDomInteractions.useRole)(context, {
+  }), (0, _react2.useFocus)(context), (0, _react2.useRole)(context, {
     role: 'tooltip'
-  }), (0, _reactDomInteractions.useDismiss)(context)]);
+  }), (0, _react2.useDismiss)(context)]);
 
   // Note(Nishant) Preserve the consumer's ref
-  const ref = React.useMemo(() => (0, _mergeRefs.mergeRefs)([reference, children.ref]), [reference, children]);
+  const ref = (0, _react2.useMergeRefs)([refs.setReference, children.ref]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.cloneElement(children, getReferenceProps({
     ref,
     ...children.props
-  })), open && /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/React.createElement(React.Fragment, null, !hidden && /*#__PURE__*/React.createElement("div", _extends({
-    ref: floating,
+  })), /*#__PURE__*/React.createElement(_react2.FloatingPortal, null, isOpen && /*#__PURE__*/React.createElement(React.Fragment, null, !hidden && /*#__PURE__*/React.createElement("div", _extends({
+    ref: refs.setFloating,
     className: (0, _classify.classify)(_TooltipModule.default.tooltip, classNames?.tooltip),
     style: {
       position: strategy,
-      top: y ?? _space.spaceNone,
-      left: x ?? _space.spaceNone,
+      ...floatingStyles,
       '--tooltip-elevation': elevation
     }
   }, getFloatingProps()), !!title && /*#__PURE__*/React.createElement(_Truncate.Truncate, {
@@ -97,6 +94,6 @@ const Tooltip = _ref => {
     className: (0, _classify.classify)(_TooltipModule.default.body, {
       [_TooltipModule.default.hasTitle]: !!title
     }, classNames?.body)
-  }, body)))), bodyRef.current));
+  }, body))))));
 };
 exports.Tooltip = Tooltip;