@algolia/satellite 1.0.0-beta.157 → 1.0.0-beta.159

package/cjs/Dropdown/DropdownButton.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = exports.DropdownButton = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
 var _reactFeather = require("react-feather");
 var _Button = _interopRequireDefault(require("../Button"));
 var _Dropdown = _interopRequireDefault(require("./Dropdown"));
@@ -14,7 +15,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["children", "title", "renderFooter"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var DropdownButton = function DropdownButton(_ref) {
+var DropdownButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
     title = _ref.title,
     renderFooter = _ref.renderFooter,
@@ -32,6 +33,7 @@ var DropdownButton = function DropdownButton(_ref) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], _objectSpread(_objectSpread({}, buttonProps), {}, {
       onClick: handleClick,
       endIcon: _reactFeather.ChevronDown,
+      ref: ref,
       children: title
     }));
   };
@@ -40,7 +42,8 @@ var DropdownButton = function DropdownButton(_ref) {
     renderFooter: renderFooter,
     children: children
   });
-};
+});
 exports.DropdownButton = DropdownButton;
+DropdownButton.displayName = "DropdownButton";
 var _default = DropdownButton;
 exports["default"] = _default;

package/cjs/Link/ButtonLink.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
-import type { ButtonBaseProps, ExtractProps } from "../Button/types";
-export declare type ButtonLinkProps = ButtonBaseProps & ExtractProps<"a"> & {
+import { type PolymorphicButtonProps } from "../Button/PolymorphicButton";
+export declare type ButtonLinkProps = Omit<PolymorphicButtonProps<"a">, "as" | "ref"> & {
     href: string;
 };
-export declare const ButtonLink: ({ endIcon: EndIcon, href, onClick, ...props }: ButtonLinkProps) => JSX.Element;
+export declare const ButtonLink: import("react").ForwardRefExoticComponent<Omit<PolymorphicButtonProps<"a">, "ref" | "as"> & {
+    href: string;
+} & import("react").RefAttributes<HTMLAnchorElement>>;
 export default ButtonLink;

package/cjs/Link/ButtonLink.js

@@ -7,14 +7,15 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = exports.ButtonLink = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
 var _reactFeather = require("react-feather");
-var _Button = _interopRequireDefault(require("../Button/Button"));
+var _PolymorphicButton = require("../Button/PolymorphicButton");
 var _useLinkProps = _interopRequireDefault(require("../utils/useLinkProps"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["endIcon", "href", "onClick"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var ButtonLink = function ButtonLink(_ref) {
+var ButtonLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var EndIcon = _ref.endIcon,
     href = _ref.href,
     onClick = _ref.onClick,
@@ -26,11 +27,13 @@ var ButtonLink = function ButtonLink(_ref) {
   if (linkProps.target === "_blank" && EndIcon === undefined) {
     EndIcon = _reactFeather.ExternalLink;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], _objectSpread(_objectSpread(_objectSpread({}, props), linkProps), {}, {
-    endIcon: EndIcon,
-    as: "a"
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PolymorphicButton.PolymorphicButton, _objectSpread(_objectSpread(_objectSpread({}, props), linkProps), {}, {
+    ref: ref,
+    as: "a",
+    endIcon: EndIcon
   }));
-};
+});
 exports.ButtonLink = ButtonLink;
+ButtonLink.displayName = "ButtonLink";
 var _default = ButtonLink;
 exports["default"] = _default;

package/cjs/Link/IconButtonLink.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
-import { IconButtonBaseProps } from "../Button/IconButton";
-import type { ExtractProps } from "../Button/types";
-export declare type IconButtonLinkProps = IconButtonBaseProps & ExtractProps<"a"> & {
+import { type PolymorphicIconButtonProps } from "../Button/PolymorphicIconButton";
+export declare type IconButtonLinkProps = Omit<PolymorphicIconButtonProps<"a">, "as" | "ref"> & {
     href: string;
 };
-export declare const IconButtonLink: ({ href, onClick, ...props }: IconButtonLinkProps) => JSX.Element;
+export declare const IconButtonLink: import("react").ForwardRefExoticComponent<Omit<PolymorphicIconButtonProps<"a">, "ref" | "as"> & {
+    href: string;
+} & import("react").RefAttributes<HTMLAnchorElement>>;
 export default IconButtonLink;

package/cjs/Link/IconButtonLink.js

@@ -7,13 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = exports.IconButtonLink = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _IconButton = _interopRequireDefault(require("../Button/IconButton"));
+var _react = require("react");
+var _PolymorphicIconButton = require("../Button/PolymorphicIconButton");
 var _useLinkProps = _interopRequireDefault(require("../utils/useLinkProps"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["href", "onClick"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var IconButtonLink = function IconButtonLink(_ref) {
+var IconButtonLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var href = _ref.href,
     onClick = _ref.onClick,
     props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
@@ -21,10 +22,12 @@ var IconButtonLink = function IconButtonLink(_ref) {
     href: href,
     onClick: onClick
   }));
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton["default"], _objectSpread(_objectSpread(_objectSpread({}, props), linkProps), {}, {
-    as: "a"
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PolymorphicIconButton.PolymorphicIconButton, _objectSpread(_objectSpread(_objectSpread({}, props), linkProps), {}, {
+    as: "a",
+    ref: ref
   }));
-};
+});
 exports.IconButtonLink = IconButtonLink;
+IconButtonLink.displayName = "IconButtonLink";
 var _default = IconButtonLink;
 exports["default"] = _default;

package/cjs/Medallion/Medallion.js

@@ -15,7 +15,7 @@ var VARIANT_CLASSNAMES = {
   pink: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["medallion-pink text-pink-600"]))),
   accent: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["medallion-accent text-accent-600"]))),
   blue: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["medallion-blue text-blue-600"]))),
-  green: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["medallion-green text-green-700"]))),
+  green: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["medallion-green text-green-600"]))),
   orange: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["medallion-orange text-orange-600"]))),
   red: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["medallion-red text-red-600"]))),
   // eslint-disable-next-line @algolia/satellite/prefer-accent -- here we're definitely refering to the color itself

package/cjs/Modal/Modal.d.ts

@@ -1,30 +1,54 @@
 import type { ReactNode } from "react";
+import type { XOR } from "../types";
 export declare type ModalSizeVariant = "medium" | "large";
 export declare type ModalLocale = {
     dismissText?: string;
+    modalTitle?: string;
 };
-export interface ModalProps {
-    open?: boolean;
-    /** Descriptive title for `Modal` */
+interface ModalControlledProps {
+    /** Define whether the modal is open or closed. */
+    open: boolean;
+    /** The element that should receive focus once the `Modal` is closed. */
+    autoFocusOnCloseElement?: HTMLElement | null;
+}
+interface ModalUncontrolledProps {
+    /** Button which should trigger the modal */
+    triggerButton: ReactNode;
+}
+export declare type ModalProps = XOR<ModalControlledProps, ModalUncontrolledProps> & {
+    /** Descriptive title for `Modal`. */
     title?: ReactNode;
     /** @ignore */
     className?: string;
-    /** Should the content take up full full width of the `Modal`. */
+    /** Define whether the content should take up the full width of the `Modal`. */
     fullBleed?: boolean;
-    /** Define whether or not the modal should animate on show and hide */
+    /** Define whether or not the modal should animate on show and hide. */
     animate?: boolean;
+    /** Define the size of the `Modal`. */
     size?: ModalSizeVariant;
-    /** Define whether or not the dismiss button should be hidden */
+    /** Define whether or not the dismiss button should be hidden. */
     hideCloseIcon?: boolean;
-    /** Define whether or not the modal should be vertically aligned */
+    /** Define whether or not the modal should be vertically aligned. */
     centerY?: boolean;
-    /** Function triggered when the dismiss button is clicked */
+    /**
+     * Function triggered when the modal is dismissed.
+     * This function is called when the user clicks the close button,
+     * clicks outside the modal or presses the escape key.
+     */
     onDismiss?: () => void;
-    children: ReactNode;
+    /** The locale for the `Modal`. */
     locale?: ModalLocale;
-}
+    /**
+     * The element that should receive focus once the `Modal` is opened.
+     * If `undefined` or `null` is passed, the first focusable element will be focused.
+     * If `false`, no element will be focused.
+     */
+    autoFocusOnOpenElement?: HTMLElement | null | false;
+    children: ReactNode;
+};
 export declare const Modal: {
-    ({ title, className, children, open, fullBleed, onDismiss, animate, hideCloseIcon, size, centerY, locale: propsLocale, }: ModalProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    ({ title, className, children, open, onDismiss, fullBleed, animate, hideCloseIcon, size, centerY, autoFocusOnOpenElement, autoFocusOnCloseElement, triggerButton, locale: propsLocale, }: ModalProps): JSX.Element;
     Footer: import("react").FunctionComponent<import("./components/ModalFooter").ModalFooterProps>;
+    Section: ({ children, className, fullBleed }: import("./components/ModalSection").ModalSectionProps) => JSX.Element;
 };
 export default Modal;

package/cjs/Modal/Modal.js

@@ -1,63 +1,46 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.Modal = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var Dialog = _interopRequireWildcard(require("@radix-ui/react-dialog"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _react = require("react");
 var _reactFeather = require("react-feather");
-var _reactTransitionGroup = require("react-transition-group");
-var _useKeyPressEvent = _interopRequireDefault(require("react-use/lib/useKeyPressEvent"));
-var _useLockBodyScroll = _interopRequireDefault(require("react-use/lib/useLockBodyScroll"));
 var _Button = require("../Button");
 var _Card = _interopRequireDefault(require("../Card"));
 var _Satellite = require("../Satellite");
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
-var _uniqueId = _interopRequireDefault(require("../utils/uniqueId"));
 var _ModalFooter = _interopRequireDefault(require("./components/ModalFooter"));
+var _ModalSection = _interopRequireDefault(require("./components/ModalSection"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var DEFAULT_MODAL_LOCALE = {
-  dismissText: "Dismiss"
-};
-var ModalAnimation = function ModalAnimation(props) {
-  return (
-    /*#__PURE__*/
-    /* eslint-disable-next-line @algolia/satellite/invalid-classnames */
-    (0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, _objectSpread(_objectSpread({}, props), {}, {
-      classNames: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["satellite-modal"]))),
-      timeout: 200,
-      appear: true,
-      unmountOnExit: true
-    }))
-  );
-};
-var ModalNoAnimation = function ModalNoAnimation(props) {
-  return props["in"] ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: props.children
-  }) : null;
+  dismissText: "Dismiss",
+  modalTitle: "Modal"
 };
 var SIZE_CLASSNAMES = {
-  medium: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["modal-dialog-medium"]))),
-  large: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["modal-dialog-large"])))
+  medium: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["modal-dialog-medium"]))),
+  large: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["modal-dialog-large"])))
 };
 var Modal = function Modal(_ref) {
   var title = _ref.title,
     className = _ref.className,
     children = _ref.children,
     _ref$open = _ref.open,
-    open = _ref$open === void 0 ? true : _ref$open,
+    open = _ref$open === void 0 ? false : _ref$open,
+    onDismiss = _ref.onDismiss,
     _ref$fullBleed = _ref.fullBleed,
     fullBleed = _ref$fullBleed === void 0 ? false : _ref$fullBleed,
-    _ref$onDismiss = _ref.onDismiss,
-    onDismiss = _ref$onDismiss === void 0 ? function () {} : _ref$onDismiss,
     _ref$animate = _ref.animate,
     animate = _ref$animate === void 0 ? true : _ref$animate,
     _ref$hideCloseIcon = _ref.hideCloseIcon,
@@ -66,93 +49,102 @@ var Modal = function Modal(_ref) {
     size = _ref$size === void 0 ? "medium" : _ref$size,
     _ref$centerY = _ref.centerY,
     centerY = _ref$centerY === void 0 ? false : _ref$centerY,
+    autoFocusOnOpenElement = _ref.autoFocusOnOpenElement,
+    autoFocusOnCloseElement = _ref.autoFocusOnCloseElement,
+    triggerButton = _ref.triggerButton,
     propsLocale = _ref.locale;
-  var createPortal = (0, _Satellite.useCreatePortal)();
   var contextLocale = (0, _Satellite.useLocale)("modal");
   var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_MODAL_LOCALE), contextLocale), propsLocale);
-  var _useState = (0, _react.useState)(null),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    modalWrapperRef = _useState2[0],
-    setModalWrapperRef = _useState2[1];
-  var dialogRef = (0, _react.useRef)(null);
-  var mouseDownTargetRef = (0, _react.useRef)(null);
-  var ModalContainer = animate ? ModalAnimation : ModalNoAnimation;
-  var modalTitleId = (0, _react.useMemo)(function () {
-    return (0, _uniqueId["default"])("modal-title");
-  }, []);
-  (0, _useLockBodyScroll["default"])(open);
-  (0, _useKeyPressEvent["default"])("Escape", function () {
-    if (open) onDismiss();
-  });
-  (0, _react.useEffect)(function () {
-    if (!modalWrapperRef) return;
-    var onMouseUp = function onMouseUp(evt) {
-      if (evt.target === mouseDownTargetRef.current && dialogRef.current && !dialogRef.current.contains(evt.target)) {
-        onDismiss();
+  var createPortal = (0, _Satellite.useCreatePortal)();
+  var isControlled = triggerButton === undefined;
+  if (typeof document === "undefined") return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {});
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Dialog.Root, {
+    open: isControlled ? open : undefined,
+    onOpenChange: function onOpenChange(open) {
+      if (!open) {
+        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
       }
-      mouseDownTargetRef.current = null;
-    };
-    var onMouseDown = function onMouseDown(evt) {
-      return mouseDownTargetRef.current = evt.target;
-    };
-
-    /**
-     * We use native event handlers to avoid React event bubbling behaviour with element rendered in a portal.
-     * (otherwise, the modal gets dismissed when clicking on an AutoComplete menu item)
-     */
-    modalWrapperRef.addEventListener("mouseup", onMouseUp);
-    modalWrapperRef.addEventListener("mousedown", onMouseDown);
-    return function () {
-      modalWrapperRef.removeEventListener("mouseup", onMouseUp);
-      modalWrapperRef.removeEventListener("mousedown", onMouseDown);
-    };
-  }, [modalWrapperRef, onDismiss]);
-  var modalAccessibilityProps = _objectSpread({
-    role: "dialog"
-  }, title ? {
-    "aria-labelledby": modalTitleId
-  } : {
-    "aria-label": "Modal"
-  });
-  return createPortal( /*#__PURE__*/(0, _jsxRuntime.jsx)(ModalContainer, {
-    "in": open,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-900/30 z-modalOverlay inset-x-0 inset-y-0 fixed w-full h-full"]))))
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
-        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["modal-container inset-x-0 inset-y-0 fixed w-full h-full p-4 overflow-x-hidden overflow-y-auto"]))), centerY && (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["flex items-center"])))),
-        ref: setModalWrapperRef
-      }, modalAccessibilityProps), {}, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card["default"], {
-          ref: dialogRef,
-          as: "section",
-          elevation: "500",
-          className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["my-6 mx-auto"]))), SIZE_CLASSNAMES[size], className),
-          fullBleed: true,
-          "aria-label": title || "Modal",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("header", {
-            className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n                px-8 min-h-14\n                flex items-center justify-between  space-x-2\n                ", "\n                ", "\n              "])), title ? "border-b border-grey-100" : "justify-end", !title && hideCloseIcon && "hidden"),
-            children: [!!title && /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
-              id: modalTitleId,
-              className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["flex-1 display-heading truncate"]))),
-              children: title
-            }), !hideCloseIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
-              icon: _reactFeather.X,
-              title: locale.dismissText,
-              variant: "subtle",
-              onClick: onDismiss,
-              className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 -mr-2"])))
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: fullBleed ? undefined : (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["p-10"]))),
-            children: children
-          })]
+    },
+    modal: true,
+    children: [!isControlled && /*#__PURE__*/(0, _jsxRuntime.jsx)(Dialog.Trigger, {
+      asChild: true,
+      children: triggerButton
+    }), createPortal( /*#__PURE__*/(0, _jsxRuntime.jsx)(Dialog.Overlay, {
+      className: (0, _clsx["default"])(animate && (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["modal-animated"]))), (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["modal-overlay bg-grey-900/30 z-modalOverlay inset-0 fixed w-full h-full flex items-start justify-center overflow-x-hidden overflow-y-auto px-4 py-10"])))),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Dialog.Content, {
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["modal-content"]))), SIZE_CLASSNAMES[size], centerY && (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["flex m-auto"])))),
+        onOpenAutoFocus: function onOpenAutoFocus(e) {
+          if (autoFocusOnOpenElement === false) {
+            e.preventDefault();
+          } else if (autoFocusOnOpenElement instanceof HTMLElement) {
+            e.preventDefault();
+            autoFocusOnOpenElement.focus();
+          }
+        },
+        onCloseAutoFocus: function onCloseAutoFocus(e) {
+          if (autoFocusOnCloseElement instanceof HTMLElement) {
+            e.preventDefault();
+            autoFocusOnCloseElement.focus();
+          }
+        },
+        onEscapeKeyDown: function onEscapeKeyDown(e) {
+          if (isControlled) {
+            e.preventDefault();
+            onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+          }
+        },
+        onInteractOutside: function onInteractOutside(e) {
+          if (isControlled) {
+            e.preventDefault();
+            onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+          }
+        },
+        "aria-label": !title ? locale.modalTitle : undefined,
+        "aria-describedby": undefined,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["modal-container"]))),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card["default"], {
+              as: "div",
+              elevation: "500",
+              className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["relative"]))), className),
+              fullBleed: true,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("header", {
+                className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["min-h-14 flex items-center justify-between space-x-2"]))), title ? (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["border-b border-grey-100 pl-8 pr-16"]))) : (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["justify-end px-8"]))), !title && hideCloseIcon && (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["hidden"])))),
+                children: !!title && /*#__PURE__*/(0, _jsxRuntime.jsx)(Dialog.Title, {
+                  className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["flex-1 display-heading truncate"]))),
+                  children: title
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: (0, _clsx["default"])(!fullBleed && (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["p-10"])))),
+                children: children
+              }), !hideCloseIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["-mr-2 absolute top-3 right-8"]))),
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Dialog.Close, {
+                  asChild: true,
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+                    icon: _reactFeather.X,
+                    title: locale.dismissText,
+                    variant: "subtle",
+                    showTooltip: false,
+                    onClick: function onClick(e) {
+                      if (isControlled) {
+                        e.preventDefault();
+                        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+                      }
+                    }
+                  })
+                })
+              })]
+            })
+          })
         })
-      }))]
-    })
-  }));
+      })
+    }))]
+  });
 };
 exports.Modal = Modal;
 Modal.Footer = _ModalFooter["default"];
+Modal.Section = _ModalSection["default"];
 var _default = Modal;
 exports["default"] = _default;

package/cjs/Modal/Modal.tailwind.js

@@ -6,11 +6,18 @@ var modalPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
     theme = _ref.theme;
   var transitionEasing = "cubic-bezier(0.6, -0.28, 0.735, 0.045)";
-  var transitionDuration = 200;
+  var transitionDuration = "200ms";
   addComponents({
     ".modal-container": {
       zIndex: theme("zIndex.modal")
     },
+    ".modal-content": {
+      borderRadius: "8px",
+      width: "100%",
+      "&:focus": {
+        outline: "none"
+      }
+    },
     // Sizes
     ".modal-dialog-medium": {
       maxWidth: "640px"
@@ -22,24 +29,53 @@ var modalPlugin = plugin(function (_ref) {
 
   // Animation
   addComponents({
-    ".satellite-modal-appear .modal-container, .satellite-modal-enter .modal-container": {
-      opacity: "0.1",
-      transform: "translate(0, 8px) scale(0.94)"
-    },
-    ".satellite-modal-appear-active .modal-container, .satellite-modal-enter-active .modal-container": {
-      opacity: "1",
-      transform: "translate(0, 0) scale(1)",
-      transition: "all ".concat(transitionDuration, "ms ").concat(transitionEasing)
-    },
-    ".satellite-modal-exit .modal-container": {
-      opacity: "1",
-      transform: "translate(0, 0) scale(1)"
-    },
-    ".satellite-modal-exit-active .modal-container": {
-      opacity: "0.1",
-      transform: "translate(0, 8px) scale(0.94)",
-      transition: "all ".concat(transitionDuration, "ms ").concat(transitionEasing)
+    /* eslint-disable @algolia/satellite/prefer-stl-helper */
+    "@keyframes stl-modal-overlay-fade-in": {
+      from: {
+        opacity: "0"
+      },
+      to: {
+        opacity: "1"
+      }
+    },
+    "@keyframes stl-modal-overlay-fade-out": {
+      from: {
+        opacity: "1"
+      },
+      to: {
+        opacity: "0"
+      }
+    },
+    "@keyframes stl-modal-content-zoop-in": {
+      from: {
+        transform: "translate(0, 8px) scale(0.94)"
+      },
+      to: {
+        transform: "translate(0, 0) scale(1)"
+      }
+    },
+    "@keyframes stl-modal-content-zoop-out": {
+      from: {
+        transform: "translate(0, 0) scale(1)"
+      },
+      to: {
+        transform: "translate(0, 8px) scale(0.94)"
+      }
+    },
+    ".modal-animated.modal-overlay[data-state='open']": {
+      animation: "stl-modal-overlay-fade-in ".concat(transitionDuration, " ").concat(transitionEasing)
+    },
+    ".modal-animated.modal-overlay[data-state='closed']": {
+      animation: "stl-modal-overlay-fade-out ".concat(transitionDuration, " ").concat(transitionEasing)
+    },
+    ".modal-animated .modal-content[data-state='open']": {
+      animation: "stl-modal-content-zoop-in ".concat(transitionDuration, " ").concat(transitionEasing)
+    },
+    ".modal-animated .modal-content[data-state='closed']": {
+      animation: "stl-modal-content-zoop-out ".concat(transitionDuration, " ").concat(transitionEasing)
     }
+    /* eslint-enable @algolia/satellite/prefer-stl-helper */
   });
 });
+
 module.exports = modalPlugin;

package/cjs/Satellite/Satellite.d.ts

@@ -1,4 +1,4 @@
-import type { FunctionComponent, ReactNode } from "react";
+import { type FunctionComponent, type ReactNode } from "react";
 import type { ComponentsLocales } from "./locale";
 import type { SatelliteRouter } from "./SatelliteRouter";
 export interface SatelliteProps {
@@ -7,5 +7,6 @@ export interface SatelliteProps {
     portalTarget?: HTMLElement;
     children: ReactNode;
 }
+export declare const DEFAULT_PORTAL_TARGET_ID = "satellite-portal";
 export declare const Satellite: FunctionComponent<SatelliteProps>;
 export default Satellite;

package/cjs/Satellite/Satellite.js

@@ -4,16 +4,40 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Satellite = void 0;
+exports["default"] = exports.Satellite = exports.DEFAULT_PORTAL_TARGET_ID = void 0;
+var _react = require("react");
 var _SatelliteContext = _interopRequireDefault(require("./SatelliteContext"));
 var _SatelliteRouter = require("./SatelliteRouter");
 var _jsxRuntime = require("react/jsx-runtime");
+var DEFAULT_PORTAL_TARGET_ID = "satellite-portal";
+exports.DEFAULT_PORTAL_TARGET_ID = DEFAULT_PORTAL_TARGET_ID;
+var portalElement;
+var getPortalElement = function getPortalElement() {
+  if (typeof document === "undefined") return;
+  if (!portalElement) {
+    var element = document.createElement("div");
+    element.setAttribute("id", DEFAULT_PORTAL_TARGET_ID);
+    document.body.appendChild(element);
+    portalElement = element;
+  }
+  return portalElement;
+};
 var Satellite = function Satellite(_ref) {
   var _ref$router = _ref.router,
     router = _ref$router === void 0 ? _SatelliteRouter.router : _ref$router,
     locales = _ref.locales,
-    portalTarget = _ref.portalTarget,
+    _ref$portalTarget = _ref.portalTarget,
+    portalTarget = _ref$portalTarget === void 0 ? getPortalElement() : _ref$portalTarget,
     children = _ref.children;
+  (0, _react.useEffect)(function () {
+    if (!portalTarget) return;
+    if (portalTarget === document.body) {
+      console.warn("Avoid using the document body as a portal target.");
+    }
+
+    // Radix adds pointer-events: none; on the body for its modal, so we need to reenable it for other portaled elements (tooltips, menus, autocomplete)
+    portalTarget.style.pointerEvents = "auto";
+  }, [portalTarget]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SatelliteContext["default"].Provider, {
     value: {
       router: router,