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

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)}
       >

package/lib/components/InlineDropdown/InlineDropdown.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.InlineDropdown = 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");
@@ -36,14 +36,14 @@ const InlineDropdown = /*#__PURE__*/React.forwardRef((_ref, 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))]
   });
   const onMenuToggle = isOpen => {
     isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
@@ -63,7 +63,7 @@ const InlineDropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       ref: menuBtnRef
     }, /*#__PURE__*/React.createElement(_Button.UnstyledButton, _extends({}, restButtonProps, {
       disabled: disabled,
-      ref: reference,
+      ref: refs.setReference,
       onClick: e => {
         e.stopPropagation();
         onOpen();
@@ -80,7 +80,7 @@ const InlineDropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       })
     })), isOpen && menu && /*#__PURE__*/React.createElement("div", {
       onClickCapture: cancelNext,
-      ref: floating,
+      ref: refs.setFloating,
       style: {
         display: 'flex',
         position: strategy,
@@ -94,7 +94,8 @@ const InlineDropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           clickAway();
         }
       },
-      size: menu.size || 'medium'
+      size: menu.size || 'medium',
+      onTabOut: clickAway
     }))));
   });
 });

package/lib/components/InlineDropdown/InlineDropdown.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';
@@ -66,7 +66,8 @@ export const InlineDropdown: React$AbstractComponent<
   ): React.Node => {
     const menuBtnRef = React.useRef(null);
     React.useImperativeHandle(ref, () => menuBtnRef.current);
-    const {x, y, reference, floating, strategy} = useFloating({
+    const {x, y, refs, strategy} = useFloating({
+      open: true,
       strategy: 'absolute',
       placement: anchorPosition,
       whileElementsMounted: autoUpdate,
@@ -91,7 +92,7 @@ export const InlineDropdown: React$AbstractComponent<
             <UnstyledButton
               {...restButtonProps}
               disabled={disabled}
-              ref={reference}
+              ref={refs.setReference}
               onClick={(e) => {
                 e.stopPropagation();
                 onOpen();
@@ -118,7 +119,7 @@ export const InlineDropdown: React$AbstractComponent<
             {isOpen && menu && (
               <div
                 onClickCapture={cancelNext}
-                ref={floating}
+                ref={refs.setFloating}
                 style={{
                   display: 'flex',
                   position: strategy,
@@ -138,6 +139,7 @@ export const InlineDropdown: React$AbstractComponent<
                     }
                   }}
                   size={menu.size || 'medium'}
+                  onTabOut={clickAway}
                 />
               </div>
             )}

package/lib/components/Menu/Menu.js

@@ -6,6 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.Menu = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = require("../../utils/classify");
+var _menu = require("../../utils/menu");
+var _SearchInput = require("../SearchInput");
+var _Text = require("../Text");
 var _MenuOptionButton = require("./MenuOptionButton");
 var _MenuModule = _interopRequireDefault(require("./Menu.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -18,44 +21,69 @@ const RenderOption = _ref => {
     composeOptions,
     groupTitleOptions,
     classNames,
+    searchText = '',
     ...restProps
   } = _ref;
+  const {
+    allowSearch
+  } = restProps;
   if (options && Array.isArray(options) && options.length) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, options.map(option => /*#__PURE__*/React.createElement(React.Fragment, {
+    const optionsFiltered = !allowSearch ? options : (0, _menu.getFilteredOptionsFromSearchText)(options, searchText);
+    const resultText = !allowSearch ? '' : (0, _menu.getFilteredOptionsResultText)(optionsFiltered);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, allowSearch && /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
+      className: _MenuModule.default.filterOptionsResultText,
+      color: "tertiary"
+    }, resultText), optionsFiltered.map((option, idx) => /*#__PURE__*/React.createElement(React.Fragment, {
       key: option.key
     }, /*#__PURE__*/React.createElement(_MenuOptionButton.MenuOptionButton, _extends({
       option: option,
       classNames: classNames
-    }, restProps)))));
+    }, restProps, {
+      isLastItem: idx === optionsFiltered.length - 1
+    })))));
   }
   if (composeOptions && Array.isArray(composeOptions) && composeOptions.length) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, composeOptions.map((composeMenuOptions, index) =>
+    const optionsFiltered = !allowSearch ? composeOptions : (0, _menu.getFilteredComposeOptionsFromSearchText)(composeOptions, searchText);
+    const resultText = !allowSearch ? '' : (0, _menu.getFilteredComposeOptionsResultText)(optionsFiltered);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, allowSearch && /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
+      className: _MenuModule.default.filterOptionsResultText,
+      color: "tertiary"
+    }, resultText), optionsFiltered.map((composeMenuOptions, index) =>
     /*#__PURE__*/
     // eslint-disable-next-line react/no-array-index-key
     React.createElement("span", {
-      className: _MenuModule.default.menuDivider,
-      key: index
-    }, composeMenuOptions.map(option => /*#__PURE__*/React.createElement(React.Fragment, {
+      key: index,
+      className: _MenuModule.default.menuDivider
+    }, composeMenuOptions.map((option, idx) => /*#__PURE__*/React.createElement(React.Fragment, {
       key: option.key
     }, /*#__PURE__*/React.createElement(_MenuOptionButton.MenuOptionButton, _extends({
       option: option,
       classNames: classNames
-    }, restProps)))))));
+    }, restProps, {
+      isLastItem: index === optionsFiltered.length - 1 && idx === composeMenuOptions.length - 1
+    })))))));
   }
   if (groupTitleOptions && Array.isArray(groupTitleOptions) && groupTitleOptions.length) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, groupTitleOptions.map((optionsGroup, index) =>
+    const optionsFiltered = !allowSearch ? groupTitleOptions : (0, _menu.getFilteredGroupTitleOptionsFromSearchText)(groupTitleOptions, searchText);
+    const resultText = !allowSearch ? '' : (0, _menu.getFilteredGroupTitleOptionsResultText)(optionsFiltered);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, allowSearch && /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
+      className: _MenuModule.default.filterOptionsResultText,
+      color: "tertiary"
+    }, resultText), optionsFiltered.map((optionsGroup, index) =>
     /*#__PURE__*/
     // eslint-disable-next-line react/no-array-index-key
     React.createElement(React.Fragment, {
       key: index
     }, !!optionsGroup.groupTitle && /*#__PURE__*/React.createElement("div", {
       className: (0, _classify.classify)(_MenuModule.default.groupTitleWrapper, classNames?.groupTitle)
-    }, optionsGroup.groupTitle), optionsGroup.options?.map(option => /*#__PURE__*/React.createElement(React.Fragment, {
+    }, optionsGroup.groupTitle), optionsGroup.options?.map((option, idx) => /*#__PURE__*/React.createElement(React.Fragment, {
       key: option.key
     }, /*#__PURE__*/React.createElement(_MenuOptionButton.MenuOptionButton, _extends({
       option: option,
       classNames: classNames
-    }, restProps)))))));
+    }, restProps, {
+      isLastItem: index === optionsFiltered.length - 1 && idx === (optionsGroup.options && optionsGroup.options.length - 1)
+    })))))));
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null);
 };
@@ -64,8 +92,10 @@ const Menu = /*#__PURE__*/React.forwardRef((props, ref) => {
     classNames,
     size = 'medium',
     width,
-    isFluid = true
+    isFluid = true,
+    allowSearch
   } = props;
+  const [searchText, setSearchText] = React.useState('');
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.classify)(_MenuModule.default.menuCard, {
       [_MenuModule.default.fluid]: isFluid,
@@ -76,6 +106,12 @@ const Menu = /*#__PURE__*/React.forwardRef((props, ref) => {
       width
     },
     ref: ref
-  }, /*#__PURE__*/React.createElement(RenderOption, props));
+  }, allowSearch && /*#__PURE__*/React.createElement(_SearchInput.SearchInput, {
+    value: searchText,
+    onChange: e => setSearchText(e.target.value),
+    onClear: () => setSearchText('')
+  }), /*#__PURE__*/React.createElement(RenderOption, _extends({}, props, {
+    searchText: searchText
+  })));
 });
 exports.Menu = Menu;

package/lib/components/Menu/Menu.js.flow

@@ -2,7 +2,17 @@
 import * as React from 'react';
 
 import {classify} from '../../utils/classify';
+import {
+  getFilteredComposeOptionsFromSearchText,
+  getFilteredComposeOptionsResultText,
+  getFilteredGroupTitleOptionsFromSearchText,
+  getFilteredGroupTitleOptionsResultText,
+  getFilteredOptionsFromSearchText,
+  getFilteredOptionsResultText,
+} from '../../utils/menu';
 import type {IconType} from '../Icon/Icon';
+import {SearchInput} from '../SearchInput';
+import {FormLabelSmall} from '../Text';
 
 import {MenuOptionButton} from './MenuOptionButton';
 
@@ -43,6 +53,10 @@ export type BaseMenuProps = {
   width?: string,
   menuDisabled?: boolean,
   isFluid?: boolean,
+  // onTabOut is a callback function that is called when
+  // the user navigates outside of the menu using the tab key.
+  onTabOut?: () => mixed,
+  allowSearch?: boolean,
 };
 
 export type MenuOptionTypes = {
@@ -65,22 +79,45 @@ export type MenuProps = {
   ...MenuOptionTypes,
 };
 
+export type RenderOptionProps = {
+  ...MenuProps,
+  searchText?: string,
+};
+
 const RenderOption = ({
   options,
   composeOptions,
   groupTitleOptions,
   classNames,
+  searchText = '',
   ...restProps
-}: MenuProps): React.Node => {
+}: RenderOptionProps): React.Node => {
+  const {allowSearch} = restProps;
   if (options && Array.isArray(options) && options.length) {
+    const optionsFiltered = !allowSearch
+      ? options
+      : getFilteredOptionsFromSearchText(options, searchText);
+    const resultText = !allowSearch
+      ? ''
+      : getFilteredOptionsResultText(optionsFiltered);
+
     return (
       <>
-        {options.map((option) => (
+        {allowSearch && (
+          <FormLabelSmall
+            className={css.filterOptionsResultText}
+            color="tertiary"
+          >
+            {resultText}
+          </FormLabelSmall>
+        )}
+        {optionsFiltered.map((option, idx) => (
           <React.Fragment key={option.key}>
             <MenuOptionButton
               option={option}
               classNames={classNames}
               {...restProps}
+              isLastItem={idx === optionsFiltered.length - 1}
             />
           </React.Fragment>
         ))}
@@ -92,17 +129,36 @@ const RenderOption = ({
     Array.isArray(composeOptions) &&
     composeOptions.length
   ) {
+    const optionsFiltered = !allowSearch
+      ? composeOptions
+      : getFilteredComposeOptionsFromSearchText(composeOptions, searchText);
+    const resultText = !allowSearch
+      ? ''
+      : getFilteredComposeOptionsResultText(optionsFiltered);
+
     return (
       <>
-        {composeOptions.map((composeMenuOptions, index) => (
+        {allowSearch && (
+          <FormLabelSmall
+            className={css.filterOptionsResultText}
+            color="tertiary"
+          >
+            {resultText}
+          </FormLabelSmall>
+        )}
+        {optionsFiltered.map((composeMenuOptions, index) => (
           // eslint-disable-next-line react/no-array-index-key
-          <span className={css.menuDivider} key={index}>
-            {composeMenuOptions.map((option) => (
+          <span key={index} className={css.menuDivider}>
+            {composeMenuOptions.map((option, idx) => (
               <React.Fragment key={option.key}>
                 <MenuOptionButton
                   option={option}
                   classNames={classNames}
                   {...restProps}
+                  isLastItem={
+                    index === optionsFiltered.length - 1 &&
+                    idx === composeMenuOptions.length - 1
+                  }
                 />
               </React.Fragment>
             ))}
@@ -116,9 +172,27 @@ const RenderOption = ({
     Array.isArray(groupTitleOptions) &&
     groupTitleOptions.length
   ) {
+    const optionsFiltered = !allowSearch
+      ? groupTitleOptions
+      : getFilteredGroupTitleOptionsFromSearchText(
+        groupTitleOptions,
+        searchText,
+      );
+    const resultText = !allowSearch
+      ? ''
+      : getFilteredGroupTitleOptionsResultText(optionsFiltered);
+
     return (
       <>
-        {groupTitleOptions.map((optionsGroup, index) => (
+        {allowSearch && (
+          <FormLabelSmall
+            className={css.filterOptionsResultText}
+            color="tertiary"
+          >
+            {resultText}
+          </FormLabelSmall>
+        )}
+        {optionsFiltered.map((optionsGroup, index) => (
           // eslint-disable-next-line react/no-array-index-key
           <React.Fragment key={index}>
             {!!optionsGroup.groupTitle && (
@@ -132,12 +206,17 @@ const RenderOption = ({
               </div>
             )}
 
-            {optionsGroup.options?.map((option) => (
+            {optionsGroup.options?.map((option, idx) => (
               <React.Fragment key={option.key}>
                 <MenuOptionButton
                   option={option}
                   classNames={classNames}
                   {...restProps}
+                  isLastItem={
+                    index === optionsFiltered.length - 1 &&
+                    idx ===
+                      (optionsGroup.options && optionsGroup.options.length - 1)
+                  }
                 />
               </React.Fragment>
             ))}
@@ -152,7 +231,14 @@ const RenderOption = ({
 export const Menu: React$AbstractComponent<MenuProps, HTMLDivElement> =
   React.forwardRef<MenuProps, HTMLDivElement>(
     (props: MenuProps, ref): React.Node => {
-      const {classNames, size = 'medium', width, isFluid = true} = props;
+      const {
+        classNames,
+        size = 'medium',
+        width,
+        isFluid = true,
+        allowSearch,
+      } = props;
+      const [searchText, setSearchText] = React.useState('');
 
       return (
         <div
@@ -168,7 +254,14 @@ export const Menu: React$AbstractComponent<MenuProps, HTMLDivElement> =
           style={{width}}
           ref={ref}
         >
-          <RenderOption {...props} />
+          {allowSearch && (
+            <SearchInput
+              value={searchText}
+              onChange={(e) => setSearchText(e.target.value)}
+              onClear={() => setSearchText('')}
+            />
+          )}
+          <RenderOption {...props} searchText={searchText} />
         </div>
       );
     },

package/lib/components/Menu/Menu.module.css

@@ -191,6 +191,10 @@
   padding-bottom: spaceXSmall;
 }
 
+.hideDivider {
+  border-top: none;
+}
+
 .menuDivider:first-child {
   padding-top: spaceNone;
 }
@@ -213,3 +217,9 @@
   color: colorTextTertiary;
   padding-top: spaceSmall;
 }
+
+.filterOptionsResultText {
+  margin-top: calc(spaceXSmall * 2);
+  margin-bottom: spaceXSmall;
+  margin-left: spaceSmall;
+}

package/lib/components/Menu/MenuOptionButton.js

@@ -15,8 +15,9 @@ var _MenuModule = _interopRequireDefault(require("./Menu.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 MenuOptionButton = props => {
+  const lastMenuItemRef = React.useRef(null);
   const {
     option,
     size,
@@ -25,7 +26,9 @@ const MenuOptionButton = props => {
     menuDisabled,
     classNames,
     optionsVariant = 'normal',
-    selectedKeys
+    selectedKeys,
+    isLastItem,
+    onTabOut
   } = props;
   const {
     key,
@@ -50,7 +53,19 @@ const MenuOptionButton = props => {
   React.useEffect(() => {
     setButtonSize(optionSize || size);
   }, [optionSize, size]);
-  return /*#__PURE__*/React.createElement(_Button.UnstyledButton, {
+  React.useEffect(() => {
+    const handleKeyDown = event => {
+      if (event.key === 'Tab' && !event.shiftKey) {
+        // Tab pressed without shift key, calling tab out callback
+        onTabOut?.();
+      }
+    };
+    lastMenuItemRef.current?.addEventListener('keydown', handleKeyDown);
+    return () => {
+      lastMenuItemRef.current?.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isLastItem]);
+  return /*#__PURE__*/React.createElement(_Button.UnstyledButton, _extends({
     className: (0, _classify.classify)(_MenuModule.default.option, {
       [_MenuModule.default.selected]: isSelected() || key === selectedOption?.key,
       [_MenuModule.default.optionSmall]: buttonSize === 'small',
@@ -62,7 +77,9 @@ const MenuOptionButton = props => {
     disabled: menuDisabled || disabled,
     onClick: () => onSelect && onSelect(option),
     autoFocus: selectedOption?.key === key
-  }, optionVariant === 'checkbox' && /*#__PURE__*/React.createElement(_Checkbox.Checkbox, {
+  }, isLastItem ? {
+    ref: lastMenuItemRef
+  } : {}), optionVariant === 'checkbox' && /*#__PURE__*/React.createElement(_Checkbox.Checkbox, {
     tabIndex: -1,
     disabled: menuDisabled || disabled,
     checked: isSelected()

package/lib/components/Menu/MenuOptionButton.js.flow

@@ -16,9 +16,12 @@ import css from './Menu.module.css';
 export type MenuOptionProps = {
   ...BaseMenuProps,
   option: MenuOption,
+  isLastItem?: boolean,
 };
 
 export const MenuOptionButton = (props: MenuOptionProps): React.Node => {
+  const lastMenuItemRef: {current: HTMLButtonElement | null} =
+    React.useRef(null);
   const {
     option,
     size,
@@ -28,6 +31,8 @@ export const MenuOptionButton = (props: MenuOptionProps): React.Node => {
     classNames,
     optionsVariant = 'normal',
     selectedKeys,
+    isLastItem,
+    onTabOut,
   } = props;
   const {
     key,
@@ -55,6 +60,21 @@ export const MenuOptionButton = (props: MenuOptionProps): React.Node => {
     setButtonSize(optionSize || size);
   }, [optionSize, size]);
 
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Tab' && !event.shiftKey) {
+        // Tab pressed without shift key, calling tab out callback
+        onTabOut?.();
+      }
+    };
+
+    lastMenuItemRef.current?.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      lastMenuItemRef.current?.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isLastItem]);
+
   return (
     <UnstyledButton
       className={classify(
@@ -72,6 +92,7 @@ export const MenuOptionButton = (props: MenuOptionProps): React.Node => {
       disabled={menuDisabled || disabled}
       onClick={() => onSelect && onSelect(option)}
       autoFocus={selectedOption?.key === key}
+      {...(isLastItem ? {ref: lastMenuItemRef} : {})}
     >
       {optionVariant === 'checkbox' && (
         <Checkbox

package/lib/components/Modal/Modal.js

@@ -6,9 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.ModalHeader = exports.ModalFooter = exports.ModalBody = exports.Modal = 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 _useMountTransition = _interopRequireDefault(require("../../hooks/useMountTransition"));
 var _motion = require("../../styles/variables/_motion");
+var _space = require("../../styles/variables/_space");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _helpers = require("../../utils/helpers");
 var _Button = require("../Button/Button");
@@ -20,6 +21,21 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 // $FlowFixMe[untyped-import]
 
+const DEFAULT_MODAL_ANIMATION = {
+  duration: {
+    open: parseInt(_motion.motionDurationSlow),
+    close: parseInt(_motion.motionDurationNormal)
+  },
+  initial: {
+    transform: `translate(${_space.spaceNegHalfFluid}, ${_space.spaceNegHalfFluid}) scale(0.95)`
+  },
+  open: {
+    transform: `translate(${_space.spaceNegHalfFluid}, ${_space.spaceNegHalfFluid}) scale(1)`
+  },
+  close: {
+    transform: `translate(${_space.spaceNegHalfFluid}, ${_space.spaceNegHalfFluid}) scale(0.95)`
+  }
+};
 const ModalHeader = _ref => {
   let {
     children,
@@ -103,12 +119,19 @@ const Modal = _ref4 => {
     onClose,
     hideBackdrop = false,
     tapOutsideToClose = true,
-    initialFocus = -1
+    initialFocus = -1,
+    customAnimation
   } = _ref4;
   const {
-    floating,
+    refs,
     context
-  } = (0, _reactDomInteractions.useFloating)();
+  } = (0, _react2.useFloating)({
+    open: isOpen
+  });
+  const {
+    isMounted,
+    styles
+  } = (0, _react2.useTransitionStyles)(context, customAnimation || DEFAULT_MODAL_ANIMATION);
   const modalId = (0, _helpers.uuid)();
   const bodyRef = React.useRef(document.querySelector('body'));
   const portalRootRef = React.useRef(getModalRoot(modalId) || createPortalRoot(modalId));
@@ -174,11 +197,11 @@ const Modal = _ref4 => {
       onClose(e);
     }
   };
-  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/React.createElement(_reactDomInteractions.FloatingFocusManager, {
+  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/React.createElement(_react2.FloatingFocusManager, {
     context: context,
     initialFocus: initialFocus
   }, /*#__PURE__*/React.createElement("div", {
-    ref: floating,
+    ref: refs.setFloating,
     "aria-hidden": isOpen ? 'false' : 'true',
     className: (0, _classify.default)(_ModalModule.default.modalContainer, {
       [_ModalModule.default.in]: isTransitioning,
@@ -189,9 +212,13 @@ const Modal = _ref4 => {
       [_ModalModule.default.darkBackdrop]: !hideBackdrop
     }, classNames?.backdrop),
     onClick: onBackdropClick
-  }), /*#__PURE__*/React.createElement("div", {
+  }), isMounted && /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_ModalModule.default.modal, classNames?.content),
-    role: "dialog"
+    role: "dialog",
+    style: {
+      // Transition styles
+      ...styles
+    }
   }, children))), portalRootRef.current);
 };
 exports.Modal = Modal;