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

package/.cspell/custom-words.txt

@@ -1,5 +1,7 @@
 Anant
+argstable
 atleast
+autodocs
 circlehollow
 CODEOWNERS
 commitlint
@@ -34,6 +36,7 @@ sbdocs
 Stapleton
 superrover
 systemjs
+tabout
 testid
 tnum
 transclude

package/.storybook/main.js

@@ -1,18 +1,12 @@
 const path = require('path');
-
 module.exports = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.jsx'],
-  features: {buildStoriesJson: true},
+  features: {
+    buildStoriesJson: true,
+    storyStoreV7: false, // 👈 Opt out of on-demand story loading
+  },
   // Add any Storybook addons you want here: https://storybook.js.org/addons/
   addons: [
-    {
-      name: '@storybook/addon-postcss',
-      options: {
-        postcssLoaderOptions: {
-          implementation: require('postcss'),
-        },
-      },
-    },
     {
       name: '@storybook/addon-docs',
       options: {
@@ -26,8 +20,30 @@ module.exports = {
     '@storybook/addon-a11y',
     '@storybook/addon-essentials',
     '@storybook/testing-react',
-    'storybook-vscode-component/register',
+    // 'storybook-vscode-component/register', This is not supported in storybook 7
+    '@storybook/addon-mdx-gfm',
   ],
+  babel: async (options) => ({
+    ...options,
+    sourceType: 'unambiguous',
+    presets: [
+      [
+        '@babel/preset-env',
+        {
+          targets: [
+            'last 2 Chrome versions',
+            'last 2 Safari versions',
+            'last 2 Firefox versions',
+            'last 2 Edge versions',
+            'last 3 iOS Major versions',
+          ],
+        },
+      ],
+      '@babel/preset-react',
+      '@babel/preset-flow',
+    ],
+    plugins: ['macros'],
+  }),
   webpackFinal: async (config) => {
     config.module.rules = config.module.rules.map((rule) => {
       if (rule.test && rule.test.toString().includes('woff')) {
@@ -38,37 +54,33 @@ module.exports = {
       }
       return rule;
     });
-
     config.module.rules.push({
       test: /\.scss$/,
       use: ['style-loader', 'css-loader?modules=true', 'sass-loader'],
       include: path.resolve(__dirname, '../'),
     });
-
     config.module.rules.push({
       test: /\.(js|jsx)$/,
       loader: require.resolve('babel-loader'),
       options: {
-        presets: [['react-app', {flow: true, typescript: false}]],
+        presets: [
+          [
+            'react-app',
+            {
+              flow: true,
+              typescript: false,
+            },
+          ],
+        ],
       },
     });
 
-    // fonts
-    config.module.rules.push({
-      test: /\.(png|woff|woff2|eot|ttf|svg)$/,
-      use: [
-        {
-          loader: 'file-loader',
-          query: {
-            name: '[name].[ext]',
-          },
-        },
-      ],
-      include: path.resolve(__dirname, '../'),
-    });
     config.resolve.extensions.push('.js', '.jsx');
-
     return config;
   },
   staticDirs: ['public'],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
 };

package/.storybook/manager.js

@@ -7,8 +7,4 @@ import senseTheme from './SenseTheme';
 
 addons.setConfig({
   theme: senseTheme,
-  previewTabs: {
-    canvas: {title: 'Playground'},
-    'storybook/docs/panel': {title: 'Documentation', index: -1},
-  },
 });

package/.storybook/preview-head.html

@@ -30,7 +30,8 @@
   body {
     display: flex;
     width: 100%;
-    height: 100%;
+    min-height: 100%;
+    height: auto;
     margin: 0px;
     padding: 0px;
     background: white;
@@ -108,11 +109,7 @@
     font-family: 'Centra No 2';
   }
 
-  [class*='sbdocs'] {
-    font-family: 'Centra No 2' !important;
-  }
-
-  [class*='docblock'] {
+  .sbdocs *:not(i) {
     font-family: 'Centra No 2' !important;
   }
 
@@ -128,4 +125,16 @@
   #root div {
     display: flex;
   }
+
+  div:has(> .docblock-argstable) {
+    overflow: auto !important;
+  }
+
+  .docblock-argstable {
+    max-width: 98%;
+  }
+
+  code {
+    white-space: pre-wrap !important;
+  }
 </style>

package/.storybook/preview.js

@@ -33,11 +33,6 @@
 
 import {themes} from '@storybook/theming';
 import {wd} from 'paths.macro';
-import {addParameters} from '@storybook/react';
-
-addParameters({
-  viewMode: 'docs',
-});
 
 export const parameters = {
   backgrounds: {

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 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.27](https://github.com/spaced-out/ui-design-system/compare/v0.1.26...v0.1.27) (2023-05-17)
+
+
+### Features
+
+* [@floating-ui](https://github.com/floating-ui) bump to `v0.24.0` ([#115](https://github.com/spaced-out/ui-design-system/issues/115)) ([3c44db3](https://github.com/spaced-out/ui-design-system/commit/3c44db3c0e12b8483fef08881fe6efc1e94ee721))
+* **accessibility:** last tab out should close the menu for all composite components using menu ([#111](https://github.com/spaced-out/ui-design-system/issues/111)) ([b76a823](https://github.com/spaced-out/ui-design-system/commit/b76a82340478371de87b4cf02a58f9fdae30068f))
+* floating ui migration ([#112](https://github.com/spaced-out/ui-design-system/issues/112)) ([85a1769](https://github.com/spaced-out/ui-design-system/commit/85a17695d4c54e091f8b77efbbd02b0b21444e60))
+* moved [@floating-ui](https://github.com/floating-ui) to stable version 0.16.0 ([b287e6d](https://github.com/spaced-out/ui-design-system/commit/b287e6d526e9fe01e8e65702ccb79f6af1b3e230))
+* storybook upgrade tokens revamp and menu changes to include search ([#114](https://github.com/spaced-out/ui-design-system/issues/114)) ([2e8a9df](https://github.com/spaced-out/ui-design-system/commit/2e8a9df5dd79eedc6490256083720dbbf2b56f6a))
+
+
+### Bug Fixes
+
+* add classnames support for tablerow and checkbox ([#116](https://github.com/spaced-out/ui-design-system/issues/116)) ([a159563](https://github.com/spaced-out/ui-design-system/commit/a159563a3c80e7244fb8240c5cf2ae2f0ce9fc37))
+* changed modal styles ([892d328](https://github.com/spaced-out/ui-design-system/commit/892d3284dc2531df0744e9db95684f53a6740af1))
+* chip icon external classnames support ([#113](https://github.com/spaced-out/ui-design-system/issues/113)) ([4ff43e4](https://github.com/spaced-out/ui-design-system/commit/4ff43e402e0937f9c137cb92ff6d3dba44998b63))
+* collapsible card isopen bug ([#117](https://github.com/spaced-out/ui-design-system/issues/117)) ([0d31766](https://github.com/spaced-out/ui-design-system/commit/0d31766bb2164096e8d33985cb56acb5b2758ed9))
+* tooltip fixes for [@floating-ui](https://github.com/floating-ui) bump ([7c16c44](https://github.com/spaced-out/ui-design-system/commit/7c16c44fd15fed26236da11007d678cabf58d1f0))
+* updated docs ([3718bb8](https://github.com/spaced-out/ui-design-system/commit/3718bb8918549a194b941e85d4782ded75270451))
+* updated dropdown docs ([4597dee](https://github.com/spaced-out/ui-design-system/commit/4597dee9a13cfd6f794871e83c69d7774bb0ad63))
+
 ### [0.1.26](https://github.com/spaced-out/ui-design-system/compare/v0.1.25...v0.1.26) (2023-05-03)
 
 

package/babel.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  sourceType: 'unambiguous',
   presets: [
     [
       '@babel/preset-env',

package/lib/components/Badge/Badge.module.css

@@ -8,6 +8,7 @@
   border-radius: size100;
   height: size22;
   padding: spaceNone spaceXSmall;
+  width: fit-content;
 }
 
 .fixedWidth {

package/lib/components/ButtonDropdown/ButtonDropdown.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ButtonDropdown = exports.ANCHOR_POSITION_TYPE = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _reactDom = require("@floating-ui/react-dom");
+var _react2 = require("@floating-ui/react");
 var _size = require("../../styles/variables/_size");
 var _space = require("../../styles/variables/_space");
 var _classify = require("../../utils/classify");
@@ -51,14 +51,14 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
   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))]
   });
   const onMenuToggle = isOpen => {
     if (isOpen) {
@@ -94,7 +94,7 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
       iconRightType: iconRightType,
       disabled: disabled,
       size: size,
-      ref: reference,
+      ref: refs.setReference,
       onClick: e => {
         e.stopPropagation();
         onOpen();
@@ -106,7 +106,7 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
       }
     }), children)), isOpen && menu && /*#__PURE__*/React.createElement("div", {
       onClickCapture: cancelNext,
-      ref: floating,
+      ref: refs.setFloating,
       style: {
         display: 'flex',
         position: strategy,
@@ -123,7 +123,8 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
           clickAway();
         }
       },
-      size: menu.size || size
+      size: menu.size || size,
+      onTabOut: clickAway
     }))));
   });
 });

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

@@ -12,7 +12,7 @@ import {
   shift,
   // $FlowFixMe[untyped-import]
   useFloating,
-} from '@floating-ui/react-dom';
+} from '@floating-ui/react';
 
 import {sizeFluid} from '../../styles/variables/_size';
 import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
@@ -83,7 +83,8 @@ export const ButtonDropdown: React$AbstractComponent<
     const menuBtnRef = React.useRef(null);
     const [isMenuOpen, setIsMenuOpen] = React.useState(false);
     React.useImperativeHandle(forwardRef, () => menuBtnRef.current);
-    const {x, y, reference, floating, strategy} = useFloating({
+    const {x, y, refs, strategy} = useFloating({
+      open: true,
       strategy: 'absolute',
       placement: anchorPosition,
       whileElementsMounted: autoUpdate,
@@ -135,7 +136,7 @@ export const ButtonDropdown: React$AbstractComponent<
                 iconRightType={iconRightType}
                 disabled={disabled}
                 size={size}
-                ref={reference}
+                ref={refs.setReference}
                 onClick={(e) => {
                   e.stopPropagation();
                   onOpen();
@@ -153,7 +154,7 @@ export const ButtonDropdown: React$AbstractComponent<
             {isOpen && menu && (
               <div
                 onClickCapture={cancelNext}
-                ref={floating}
+                ref={refs.setFloating}
                 style={{
                   display: 'flex',
                   position: strategy,
@@ -174,6 +175,7 @@ export const ButtonDropdown: React$AbstractComponent<
                     }
                   }}
                   size={menu.size || size}
+                  onTabOut={clickAway}
                 />
               </div>
             )}

package/lib/components/Chip/Chip.js

@@ -55,7 +55,7 @@ const Chip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }, classNames?.wrapper),
     onClick: onClick
   }), iconName && size !== 'small' && /*#__PURE__*/React.createElement(_Icon.Icon, {
-    className: _ChipModule.default.chipIcon,
+    className: (0, _classify.classify)(_ChipModule.default.chipIcon, classNames?.icon),
     name: iconName,
     type: iconType,
     size: "small"

package/lib/components/Chip/Chip.js.flow

@@ -10,7 +10,7 @@ import {Truncate} from '../Truncate';
 import css from './Chip.module.css';
 
 
-type ClassNames = $ReadOnly<{wrapper?: string}>;
+type ClassNames = $ReadOnly<{wrapper?: string, icon?: string}>;
 
 export const CHIP_SEMANTIC = Object.freeze({
   primary: 'primary',
@@ -91,7 +91,7 @@ export const Chip: React$AbstractComponent<ChipProps, HTMLDivElement> =
       >
         {iconName && size !== 'small' && (
           <Icon
-            className={css.chipIcon}
+            className={classify(css.chipIcon, classNames?.icon)}
             name={iconName}
             type={iconType}
             size="small"

package/lib/components/CollapsibleCard/CollapsibleCard.js

@@ -55,6 +55,9 @@ const CollapsibleCard = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     headerIconType = 'solid'
   } = _ref3;
   const [collapsibleCardIsOpen, setCollapsibleCardIsOpen] = React.useState(Boolean(isOpen));
+  React.useEffect(() => {
+    setCollapsibleCardIsOpen(Boolean(isOpen));
+  }, [isOpen]);
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "CollapsibleCard",
     className: (0, _classify.default)(_CollapsibleCardModule.default.wrapper, classNames?.wrapper),

package/lib/components/CollapsibleCard/CollapsibleCard.js.flow

@@ -91,6 +91,10 @@ export const CollapsibleCard: React$AbstractComponent<
       Boolean(isOpen),
     );
 
+    React.useEffect(() => {
+      setCollapsibleCardIsOpen(Boolean(isOpen));
+    }, [isOpen]);
+
     return (
       <div
         data-testid="CollapsibleCard"

package/lib/components/Dialog/Dialog.js

@@ -3,10 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DialogHeader = exports.DialogFooter = exports.DialogBody = exports.Dialog = exports.DIALOG_SEMANTIC = void 0;
+exports.DialogHeader = exports.DialogFooter = exports.DialogBody = exports.Dialog = exports.DIALOG_SEMANTIC = exports.BasicDialog = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _typography = require("../../types/typography");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Button = require("../Button");
 var _Icon = require("../Icon");
 var _Modal = require("../Modal");
 var _DialogModule = _interopRequireDefault(require("./Dialog.module.css"));
@@ -138,4 +139,24 @@ const Dialog = _ref5 => {
     iconName: iconName
   }))), children);
 };
-exports.Dialog = Dialog;
+exports.Dialog = Dialog;
+const BasicDialog = _ref6 => {
+  let {
+    heading,
+    body,
+    confirmText,
+    abortText,
+    handleConfirm,
+    handleAbort,
+    ...restDialogProps
+  } = _ref6;
+  return /*#__PURE__*/React.createElement(Dialog, restDialogProps, !!heading && /*#__PURE__*/React.createElement(DialogHeader, null, heading), !!body && /*#__PURE__*/React.createElement(DialogBody, null, body), /*#__PURE__*/React.createElement(DialogFooter, null, !!abortText && /*#__PURE__*/React.createElement(_Button.Button, {
+    isFluid: true,
+    type: "tertiary",
+    onClick: handleAbort
+  }, abortText), !!confirmText && /*#__PURE__*/React.createElement(_Button.Button, {
+    isFluid: true,
+    onClick: handleConfirm
+  }, confirmText)));
+};
+exports.BasicDialog = BasicDialog;

package/lib/components/Dialog/Dialog.js.flow

@@ -4,6 +4,7 @@ import * as React from 'react';
 
 import {TEXT_COLORS} from '../../types/typography';
 import classify from '../../utils/classify';
+import {Button} from '../Button';
 import {Icon} from '../Icon';
 import type {ModalProps} from '../Modal';
 import {Modal} from '../Modal';
@@ -51,6 +52,16 @@ export type DialogProps = {
   iconName?: string,
 };
 
+export type BasicDialogProps = {
+  ...DialogProps,
+  heading?: React.Node,
+  body?: React.Node,
+  confirmText?: string,
+  abortText?: string,
+  handleConfirm?: (event: SyntheticEvent<>) => mixed,
+  handleAbort?: (event: SyntheticEvent<>) => mixed,
+};
+
 const DialogIcon = ({
   semantic,
   iconName,
@@ -188,3 +199,30 @@ export const Dialog = ({
     {children}
   </Modal>
 );
+
+export const BasicDialog = ({
+  heading,
+  body,
+  confirmText,
+  abortText,
+  handleConfirm,
+  handleAbort,
+  ...restDialogProps
+}: BasicDialogProps): React.Node => (
+  <Dialog {...restDialogProps}>
+    {!!heading && <DialogHeader>{heading}</DialogHeader>}
+    {!!body && <DialogBody>{body}</DialogBody>}
+    <DialogFooter>
+      {!!abortText && (
+        <Button isFluid type="tertiary" onClick={handleAbort}>
+          {abortText}
+        </Button>
+      )}
+      {!!confirmText && (
+        <Button isFluid onClick={handleConfirm}>
+          {confirmText}
+        </Button>
+      )}
+    </DialogFooter>
+  </Dialog>
+);

package/lib/components/Dropdown/Dropdown.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Dropdown = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _reactDom = require("@floating-ui/react-dom");
+var _react2 = require("@floating-ui/react");
 var _color = require("../../styles/variables/_color");
 var _size = require("../../styles/variables/_size");
 var _space = require("../../styles/variables/_space");
@@ -34,14 +34,14 @@ const Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const {
     x,
     y,
-    reference,
-    floating,
+    refs,
     strategy
-  } = (0, _reactDom.useFloating)({
+  } = (0, _react2.useFloating)({
+    open: true,
     strategy: 'absolute',
     placement: 'bottom-start',
-    whileElementsMounted: _reactDom.autoUpdate,
-    middleware: [(0, _reactDom.flip)(), (0, _reactDom.offset)(parseInt(_space.spaceXXSmall))]
+    whileElementsMounted: _react2.autoUpdate,
+    middleware: [(0, _react2.flip)(), (0, _react2.offset)(parseInt(_space.spaceXXSmall))]
   });
   const onMenuToggle = isOpen => {
     isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
@@ -60,7 +60,7 @@ const Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       className: (0, _classify.classify)(_DropdownModule.default.dropdownContainer, classNames?.wrapper),
       ref: dropdownRef
     }, /*#__PURE__*/React.createElement(_Input.Input, _extends({}, inputProps, {
-      boxRef: reference,
+      boxRef: refs.setReference,
       size: size,
       placeholder: placeholder,
       value: dropdownInputText,
@@ -76,7 +76,7 @@ const Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       ref: ref
     })), isOpen && menu && /*#__PURE__*/React.createElement("div", {
       onClickCapture: cancelNext,
-      ref: floating,
+      ref: refs.setFloating,
       style: {
         position: strategy,
         top: y ?? _space.spaceNone,
@@ -91,7 +91,8 @@ const Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           clickAway();
         }
       },
-      size: menu.size || size
+      size: menu.size || size,
+      onTabOut: clickAway
     }))));
   });
 });

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

@@ -10,7 +10,7 @@ import {
   offset,
   // $FlowFixMe[untyped-import]
   useFloating,
-} from '@floating-ui/react-dom';
+} from '@floating-ui/react';
 
 import {colorBackgroundTertiary} from '../../styles/variables/_color';
 import {sizeFluid} from '../../styles/variables/_size';
@@ -57,7 +57,8 @@ export const Dropdown: React$AbstractComponent<
     ref,
   ): React.Node => {
     const dropdownRef = React.useRef();
-    const {x, y, reference, floating, strategy} = useFloating({
+    const {x, y, refs, strategy} = useFloating({
+      open: true,
       strategy: 'absolute',
       placement: 'bottom-start',
       whileElementsMounted: autoUpdate,
@@ -78,7 +79,7 @@ export const Dropdown: React$AbstractComponent<
           >
             <Input
               {...inputProps}
-              boxRef={reference}
+              boxRef={refs.setReference}
               size={size}
               placeholder={placeholder}
               value={dropdownInputText}
@@ -95,7 +96,7 @@ export const Dropdown: React$AbstractComponent<
             {isOpen && menu && (
               <div
                 onClickCapture={cancelNext}
-                ref={floating}
+                ref={refs.setFloating}
                 style={{
                   position: strategy,
                   top: y ?? spaceNone,
@@ -116,6 +117,7 @@ export const Dropdown: React$AbstractComponent<
                     }
                   }}
                   size={menu.size || size}
+                  onTabOut={clickAway}
                 />
               </div>
             )}

package/lib/components/FocusManager/FocusManager.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.FocusManager = 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 _FocusManagerModule = _interopRequireDefault(require("./FocusManager.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -14,20 +14,22 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 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 FocusManager = props => {
   const {
-    floating,
+    refs,
     context
-  } = (0, _reactDomInteractions.useFloating)();
+  } = (0, _react2.useFloating)({
+    open: true
+  });
   const {
     classNames,
     children,
     initialFocus = -1,
     ...restFloatingFocusManagerProps
   } = props;
-  return /*#__PURE__*/React.createElement(_reactDomInteractions.FloatingFocusManager, _extends({
+  return /*#__PURE__*/React.createElement(_react2.FloatingFocusManager, _extends({
     context: context,
     initialFocus: initialFocus
   }, restFloatingFocusManagerProps), /*#__PURE__*/React.createElement("div", {
-    ref: floating,
+    ref: refs.setFloating,
     "data-testid": "FocusManager",
     className: (0, _classify.default)(_FocusManagerModule.default.wrapper, classNames?.wrapper)
   }, children));

package/lib/components/FocusManager/FocusManager.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';
 
@@ -24,7 +24,7 @@ export type FocusManagerProps = {
 };
 
 export const FocusManager = (props: FocusManagerProps): React.Node => {
-  const {floating, context} = useFloating();
+  const {refs, context} = useFloating({open: true});
   const {
     classNames,
     children,
@@ -39,7 +39,7 @@ export const FocusManager = (props: FocusManagerProps): React.Node => {
       {...restFloatingFocusManagerProps}
     >
       <div
-        ref={floating}
+        ref={refs.setFloating}
         data-testid="FocusManager"
         className={classify(css.wrapper, classNames?.wrapper)}
       >