@react-md/core 1.0.0-next.0

package/dist/delegateEvent.d.ts

@@ -0,0 +1,54 @@
+/** @internal */
+export type DelegatedEventTarget = Window | Document | HTMLElement;
+/**
+ * This is a "shared" event handler for the provided `eventType`. The event
+ * listener will only be created once, but every single callback will be called
+ * when the throttled event is triggered. This means that you will need to make
+ * sure to remove the provided callback when it is no longer in use.
+ *
+ * @internal
+ */
+export interface DelegatedEventHandler {
+    /**
+     * Adds the provided callback to the throttled event listener.
+     */
+    add(callback: EventListener): void;
+    /**
+     * Attempts to remove the provided callback from the throttled event listener.
+     */
+    remove(callback: EventListener): void;
+}
+/** @internal */
+export interface DelegableEvent {
+    type: string;
+    target: DelegatedEventTarget;
+    throttle: boolean;
+    handler: DelegatedEventHandler;
+    options?: boolean | AddEventListenerOptions;
+}
+/**
+ * Creates a delegated event listener using custom events. Most of this code
+ * comes from the MDN about resize listeners.
+ *
+ * This will return an object for adding or removing event handlers for the
+ * provided `eventType` since only one base throttled event listener will be
+ * created. Each callback that is added will be called with the event each time
+ * the event is triggered. This does mean that you will manually need to remove
+ * your callback like normal or else it can be called when no longer in use.
+ * This also means that it doesn't "hurt" to call this function without
+ * immediately calling the `add` function since the event won't start until
+ * there is at least 1 callback.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/Events/resize#Examples
+ * @param eventType - One of the event types that should be used to create a
+ * delegated event for. This should be things like resize, click, scroll, etc.
+ * @param eventTarget - The target that should have the delegated event handler
+ * attached to. This is normally the window, but can be any element as needed.
+ * @param throttle - Boolean if the event should be throttled or not. Normally
+ * only event types like resize or scroll should be throttled for performance
+ * boosts, but anything can be.
+ * @returns The delegated event handler that allows you to add or remove
+ * `EventListener`s to that event.
+ * @internal
+ */
+export declare function delegateEvent(eventType: string, eventTarget?: DelegatedEventTarget, throttle?: boolean, options?: boolean | AddEventListenerOptions): DelegatedEventHandler;

package/dist/delegateEvent.js

@@ -0,0 +1,105 @@
+/** @internal */ const delegatedEvents = [];
+/**
+ * Creates the delegated event handler that will run all the callbacks once an
+ * event happens. The callbacks' invocation can also be throttled for event
+ * types that trigger rapidly for additional performance.
+ *
+ * The `<K extends keyof WindowEventMap` is a nice thing I found while looking
+ * through the `lib.d.ts` implementation of `addEventListener` that will allow
+ * you to get the "correct" event type when using the `add` and `remove`
+ * functions once you have created this event handler. Otherwise there'd be ts
+ * errors trying to do `MouseEvent` or `KeyboardEvent` in your listeners.
+ */ function createEventHandler(throttle, callbacks) {
+    let running = false;
+    const runCallbacks = (event)=>()=>{
+            for(let i = 0; i < callbacks.length; i += 1){
+                callbacks[i](event);
+            }
+            running = false;
+        };
+    return function eventHandler(event) {
+        if (!throttle) {
+            runCallbacks(event)();
+            return;
+        }
+        if (running) {
+            return;
+        }
+        running = true;
+        window.requestAnimationFrame(runCallbacks(event));
+    };
+}
+/**
+ * Creates a throttled event handler for the provided event type and event
+ * target.
+ */ function createDelegatedEventHandler(eventType, eventTarget = window, throttle = false, options) {
+    const callbacks = [];
+    const handler = createEventHandler(throttle, callbacks);
+    return {
+        /**
+     * Attempts to add the provided callback to the list of callbacks for the
+     * throttled event. If this is the first callback to be added, the throttled
+     * event will also be started.
+     */ add: (callback)=>{
+            if (!callbacks.length) {
+                eventTarget.addEventListener(eventType, handler, options);
+            }
+            if (callbacks.indexOf(callback) === -1) {
+                callbacks.push(callback);
+            }
+        },
+        /**
+     * Attempts to remove the provided callback from the list of callbacks for
+     * the throttled event. If this is the last callback that was removed, the
+     * throttled event will also be stopped.
+     */ remove: (callback)=>{
+            const i = callbacks.indexOf(callback);
+            if (i >= 0) {
+                callbacks.splice(i, 1);
+                if (!callbacks.length) {
+                    eventTarget.removeEventListener(eventType, handler, options);
+                }
+            }
+        }
+    };
+}
+/**
+ * Creates a delegated event listener using custom events. Most of this code
+ * comes from the MDN about resize listeners.
+ *
+ * This will return an object for adding or removing event handlers for the
+ * provided `eventType` since only one base throttled event listener will be
+ * created. Each callback that is added will be called with the event each time
+ * the event is triggered. This does mean that you will manually need to remove
+ * your callback like normal or else it can be called when no longer in use.
+ * This also means that it doesn't "hurt" to call this function without
+ * immediately calling the `add` function since the event won't start until
+ * there is at least 1 callback.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/Events/resize#Examples
+ * @param eventType - One of the event types that should be used to create a
+ * delegated event for. This should be things like resize, click, scroll, etc.
+ * @param eventTarget - The target that should have the delegated event handler
+ * attached to. This is normally the window, but can be any element as needed.
+ * @param throttle - Boolean if the event should be throttled or not. Normally
+ * only event types like resize or scroll should be throttled for performance
+ * boosts, but anything can be.
+ * @returns The delegated event handler that allows you to add or remove
+ * `EventListener`s to that event.
+ * @internal
+ */ export function delegateEvent(eventType, eventTarget = window, throttle = eventType === "resize" || eventType === "scroll", options) {
+    let index = delegatedEvents.findIndex((event)=>event.type === eventType && event.target === eventTarget && event.options === options && event.throttle === throttle);
+    if (index === -1) {
+        delegatedEvents.push({
+            type: eventType,
+            target: eventTarget,
+            options,
+            throttle,
+            handler: createDelegatedEventHandler(eventType, eventTarget, throttle, options)
+        });
+        index = delegatedEvents.length - 1;
+    }
+    return delegatedEvents[index].handler;
+}
+
+//# sourceMappingURL=delegateEvent.js.map

package/dist/delegateEvent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/delegateEvent.ts"],"sourcesContent":["/** @internal */\nexport type DelegatedEventTarget = Window | Document | HTMLElement;\n\n/**\n * This is a \"shared\" event handler for the provided `eventType`. The event\n * listener will only be created once, but every single callback will be called\n * when the throttled event is triggered. This means that you will need to make\n * sure to remove the provided callback when it is no longer in use.\n *\n * @internal\n */\nexport interface DelegatedEventHandler {\n  /**\n   * Adds the provided callback to the throttled event listener.\n   */\n  add(callback: EventListener): void;\n\n  /**\n   * Attempts to remove the provided callback from the throttled event listener.\n   */\n  remove(callback: EventListener): void;\n}\n\n/** @internal */\nexport interface DelegableEvent {\n  type: string;\n  target: DelegatedEventTarget;\n  throttle: boolean;\n  handler: DelegatedEventHandler;\n  options?: boolean | AddEventListenerOptions;\n}\n\nconst delegatedEvents: DelegableEvent[] = [];\n\n/**\n * Creates the delegated event handler that will run all the callbacks once an\n * event happens. The callbacks' invocation can also be throttled for event\n * types that trigger rapidly for additional performance.\n *\n * The `<K extends keyof WindowEventMap` is a nice thing I found while looking\n * through the `lib.d.ts` implementation of `addEventListener` that will allow\n * you to get the \"correct\" event type when using the `add` and `remove`\n * functions once you have created this event handler. Otherwise there'd be ts\n * errors trying to do `MouseEvent` or `KeyboardEvent` in your listeners.\n */\nfunction createEventHandler<K extends keyof WindowEventMap>(\n  throttle: boolean,\n  callbacks: readonly EventListener[]\n): (event: WindowEventMap[K]) => void {\n  let running = false;\n  const runCallbacks = (event: WindowEventMap[K]) => () => {\n    for (let i = 0; i < callbacks.length; i += 1) {\n      callbacks[i](event);\n    }\n\n    running = false;\n  };\n\n  return function eventHandler(event) {\n    if (!throttle) {\n      runCallbacks(event)();\n      return;\n    }\n\n    if (running) {\n      return;\n    }\n\n    running = true;\n    window.requestAnimationFrame(runCallbacks(event));\n  };\n}\n\n/**\n * Creates a throttled event handler for the provided event type and event\n * target.\n */\nfunction createDelegatedEventHandler(\n  eventType: string,\n  eventTarget: DelegatedEventTarget = window,\n  throttle = false,\n  options?: boolean | AddEventListenerOptions\n): DelegatedEventHandler {\n  const callbacks: EventListener[] = [];\n  const handler = createEventHandler(throttle, callbacks);\n\n  return {\n    /**\n     * Attempts to add the provided callback to the list of callbacks for the\n     * throttled event. If this is the first callback to be added, the throttled\n     * event will also be started.\n     */\n    add: (callback: EventListener) => {\n      if (!callbacks.length) {\n        eventTarget.addEventListener(eventType, handler, options);\n      }\n\n      if (callbacks.indexOf(callback) === -1) {\n        callbacks.push(callback);\n      }\n    },\n\n    /**\n     * Attempts to remove the provided callback from the list of callbacks for\n     * the throttled event. If this is the last callback that was removed, the\n     * throttled event will also be stopped.\n     */\n    remove: (callback: EventListener) => {\n      const i = callbacks.indexOf(callback);\n      if (i >= 0) {\n        callbacks.splice(i, 1);\n\n        if (!callbacks.length) {\n          eventTarget.removeEventListener(eventType, handler, options);\n        }\n      }\n    },\n  };\n}\n\n/**\n * Creates a delegated event listener using custom events. Most of this code\n * comes from the MDN about resize listeners.\n *\n * This will return an object for adding or removing event handlers for the\n * provided `eventType` since only one base throttled event listener will be\n * created. Each callback that is added will be called with the event each time\n * the event is triggered. This does mean that you will manually need to remove\n * your callback like normal or else it can be called when no longer in use.\n * This also means that it doesn't \"hurt\" to call this function without\n * immediately calling the `add` function since the event won't start until\n * there is at least 1 callback.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Events/resize#Examples\n * @param eventType - One of the event types that should be used to create a\n * delegated event for. This should be things like resize, click, scroll, etc.\n * @param eventTarget - The target that should have the delegated event handler\n * attached to. This is normally the window, but can be any element as needed.\n * @param throttle - Boolean if the event should be throttled or not. Normally\n * only event types like resize or scroll should be throttled for performance\n * boosts, but anything can be.\n * @returns The delegated event handler that allows you to add or remove\n * `EventListener`s to that event.\n * @internal\n */\nexport function delegateEvent(\n  eventType: string,\n  eventTarget: DelegatedEventTarget = window,\n  throttle: boolean = eventType === \"resize\" || eventType === \"scroll\",\n  options?: boolean | AddEventListenerOptions\n): DelegatedEventHandler {\n  let index = delegatedEvents.findIndex(\n    (event) =>\n      event.type === eventType &&\n      event.target === eventTarget &&\n      event.options === options &&\n      event.throttle === throttle\n  );\n\n  if (index === -1) {\n    delegatedEvents.push({\n      type: eventType,\n      target: eventTarget,\n      options,\n      throttle,\n      handler: createDelegatedEventHandler(\n        eventType,\n        eventTarget,\n        throttle,\n        options\n      ),\n    });\n\n    index = delegatedEvents.length - 1;\n  }\n\n  return delegatedEvents[index].handler;\n}\n"],"names":["delegatedEvents","createEventHandler","throttle","callbacks","running","runCallbacks","event","i","length","eventHandler","window","requestAnimationFrame","createDelegatedEventHandler","eventType","eventTarget","options","handler","add","callback","addEventListener","indexOf","push","remove","splice","removeEventListener","delegateEvent","index","findIndex","type","target"],"mappings":"AAAA,cAAc,GAgCd,MAAMA,kBAAoC,EAAE;AAE5C;;;;;;;;;;CAUC,GACD,SAASC,mBACPC,QAAiB,EACjBC,SAAmC;IAEnC,IAAIC,UAAU;IACd,MAAMC,eAAe,CAACC,QAA6B;YACjD,IAAK,IAAIC,IAAI,GAAGA,IAAIJ,UAAUK,MAAM,EAAED,KAAK,EAAG;gBAC5CJ,SAAS,CAACI,EAAE,CAACD;YACf;YAEAF,UAAU;QACZ;IAEA,OAAO,SAASK,aAAaH,KAAK;QAChC,IAAI,CAACJ,UAAU;YACbG,aAAaC;YACb;QACF;QAEA,IAAIF,SAAS;YACX;QACF;QAEAA,UAAU;QACVM,OAAOC,qBAAqB,CAACN,aAAaC;IAC5C;AACF;AAEA;;;CAGC,GACD,SAASM,4BACPC,SAAiB,EACjBC,cAAoCJ,MAAM,EAC1CR,WAAW,KAAK,EAChBa,OAA2C;IAE3C,MAAMZ,YAA6B,EAAE;IACrC,MAAMa,UAAUf,mBAAmBC,UAAUC;IAE7C,OAAO;QACL;;;;KAIC,GACDc,KAAK,CAACC;YACJ,IAAI,CAACf,UAAUK,MAAM,EAAE;gBACrBM,YAAYK,gBAAgB,CAACN,WAAWG,SAASD;YACnD;YAEA,IAAIZ,UAAUiB,OAAO,CAACF,cAAc,CAAC,GAAG;gBACtCf,UAAUkB,IAAI,CAACH;YACjB;QACF;QAEA;;;;KAIC,GACDI,QAAQ,CAACJ;YACP,MAAMX,IAAIJ,UAAUiB,OAAO,CAACF;YAC5B,IAAIX,KAAK,GAAG;gBACVJ,UAAUoB,MAAM,CAAChB,GAAG;gBAEpB,IAAI,CAACJ,UAAUK,MAAM,EAAE;oBACrBM,YAAYU,mBAAmB,CAACX,WAAWG,SAASD;gBACtD;YACF;QACF;IACF;AACF;AAEA;;;;;;;;;;;;;;;;;;;;;;;;CAwBC,GACD,OAAO,SAASU,cACdZ,SAAiB,EACjBC,cAAoCJ,MAAM,EAC1CR,WAAoBW,cAAc,YAAYA,cAAc,QAAQ,EACpEE,OAA2C;IAE3C,IAAIW,QAAQ1B,gBAAgB2B,SAAS,CACnC,CAACrB,QACCA,MAAMsB,IAAI,KAAKf,aACfP,MAAMuB,MAAM,KAAKf,eACjBR,MAAMS,OAAO,KAAKA,WAClBT,MAAMJ,QAAQ,KAAKA;IAGvB,IAAIwB,UAAU,CAAC,GAAG;QAChB1B,gBAAgBqB,IAAI,CAAC;YACnBO,MAAMf;YACNgB,QAAQf;YACRC;YACAb;YACAc,SAASJ,4BACPC,WACAC,aACAZ,UACAa;QAEJ;QAEAW,QAAQ1B,gBAAgBQ,MAAM,GAAG;IACnC;IAEA,OAAOR,eAAe,CAAC0B,MAAM,CAACV,OAAO;AACvC"}

package/dist/dialog/Dialog.d.ts

@@ -0,0 +1,196 @@
+import { type HTMLAttributes } from "react";
+import { type FocusContainerComponentProps } from "../focus/useFocusContainer.js";
+import { type CSSTransitionClassNames, type CSSTransitionComponentProps, type TransitionActions, type TransitionTimeout } from "../transition/types.js";
+import { type LabelRequiredForA11y } from "../types.js";
+import { type DialogType } from "./styles.js";
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-dialog-background-color"?: string;
+        "--rmd-dialog-color"?: string;
+        "--rmd-dialog-min-width"?: string | number;
+        "--rmd-dialog-horizontal-margin"?: string | number;
+        "--rmd-dialog-vertical-margin"?: string | number;
+        "--rmd-dialog-z-index"?: string | number;
+        "--rmd-dialog-header-padding"?: string | number;
+        "--rmd-dialog-header-padding-bottom"?: string | number;
+        "--rmd-dialog-content-padding"?: string | number;
+        "--rmd-dialog-footer-padding"?: string | number;
+    }
+}
+/** @remarks \@since 4.0.0 */
+export declare const DEFAULT_DIALOG_CLASSNAMES: Readonly<CSSTransitionClassNames>;
+/** @remarks \@since 4.0.0 */
+export declare const DEFAULT_DIALOG_TIMEOUT: Readonly<TransitionTimeout>;
+export interface BaseDialogProps extends HTMLAttributes<HTMLDivElement>, CSSTransitionComponentProps, TransitionActions, FocusContainerComponentProps {
+    /**
+     * @defaultValue `useEnsuredId('dialog')`
+     */
+    id?: string;
+    /**
+     * @defaultValue `"centered"`
+     */
+    type?: DialogType;
+    /**
+     * @defaultValue `"dialog"`
+     */
+    role?: "dialog" | "alertdialog" | "menu" | "none";
+    /**
+     * This value controls the visibility of the dialog.
+     */
+    visible: boolean;
+    /**
+     * This function should set the {@link visible} prop to false to hide the
+     * modal when:
+     * - the {@link modal} and {@link disableEscapeClose} props are `false` and
+     *   the user presses the `"Escape"` key.
+     * - The overlay element is clicked
+     */
+    onRequestClose(): void;
+    /** @defaultValue `false` */
+    disableTransition?: boolean;
+    /** @defaultValue `-1` */
+    tabIndex?: number;
+    /**
+     * Set this value to `true` if the dialog should behave as a modal which
+     * prevents the modal from being closed by pressing the `"Escape"` key or
+     * clicking the overlay. The user **must** click one of the actions within the
+     * dialog instead.
+     *
+     * @defaultValue `false`
+     */
+    modal?: boolean;
+    /**
+     * @internal
+     * @defaultValue `false`
+     */
+    fixed?: boolean;
+    /**
+     * Set this to `true` if the dialog should no longer use the `Portal`
+     * behavior.
+     *
+     * @defaultValue `false`
+     */
+    disablePortal?: boolean;
+    /**
+     * Set this to `true` if you want the page to still be scrollable while the
+     * dialog is visible. This should normally be `true` for popovers/fixed
+     * dialogs.
+     *
+     * @defaultValue `type === "custom"`
+     */
+    disableScrollLock?: boolean;
+    /**
+     * Set this to `true` to prevent the dialog from being closed when the
+     * `"Escape"` key is pressed. This is `true` by default when the {@link modal}
+     * prop is `true`
+     *
+     * @defaultValue `modal`
+     */
+    disableEscapeClose?: boolean;
+    /**
+     * Set this to `true` if an overlay should not appear behind the dialog.
+     *
+     * Note: this was changed from `type === "full-page"` to `false` so that you
+     * can change between full-page and centered based on media queries. If the
+     * type changes the overlay would end up rendering above the dialog instead of
+     * behind.
+     *
+     * @see {@link overlayHidden}
+     * @defaultValue `false`
+     */
+    disableOverlay?: boolean;
+    /**
+     * Set this to `true` if an overlay should be appear behind the dialog but
+     * have an `opacity: 0`. This is useful if you want to prevent other elements
+     * on the page from being clicked while the dialog is visible, but don't want
+     * a dark background. i.e. popovers/fixed dialogs.
+     *
+     * @defaultValue `false`
+     */
+    overlayHidden?: boolean;
+    /**
+     * Any additional props that should be passed to the overlay element if it is
+     * rendered.
+     */
+    overlayProps?: HTMLAttributes<HTMLSpanElement>;
+    /**
+     * Any additional props that should be passed to the container element when
+     * the `type === "centered"`.
+     */
+    containerProps?: HTMLAttributes<HTMLDivElement>;
+    /**
+     * @see {@link DEFAULT_DIALOG_TIMEOUT}
+     * @defaultValue `DEFAULT_DIALOG_TIMEOUT`
+     */
+    timeout?: CSSTransitionComponentProps["timeout"];
+    /**
+     * @see {@link DEFAULT_DIALOG_CLASSNAMES}
+     * @defaultValue `DEFAULT_DIALOG_CLASSNAMES`
+     */
+    classNames?: CSSTransitionComponentProps["classNames"];
+    /**
+     * Set this to `true` if the `Dialog` should not gain the normal focus box
+     * shadow while it is focused. The `Dialog` should normally only gain focus
+     * when it becomes visible and no child elements have `autoFocus` enabled.
+     *
+     * @remarks \@since 6.0.0
+     * @defaultValue `type === "full-page"`
+     */
+    disableFocusOutline?: boolean;
+}
+export type DialogProps = LabelRequiredForA11y<BaseDialogProps>;
+/**
+ * **Client Component**
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * import {
+ *   Button,
+ *   Dialog,
+ *   DialogHeader,
+ *   DialogTitle,
+ *   DialogContent,
+ *   DialogFooter,
+ *   Typography,
+ *   useToggle,
+ * } from "@react-md/core";
+ * import type { ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   const {
+ *     toggle,
+ *     disable: onRequestClose,
+ *     toggled: visible,
+ *   } = useToggle(false);
+ *
+ *   return (
+ *     <>
+ *       <Button onClick={toggle}>Toggle</Button>
+ *       <Dialog
+ *         aria-labelledby="dialog-title"
+ *         visible={visible}
+ *         onRequestClose={onRequestClose}
+ *       >
+ *         <DialogHeader>
+ *           <DialogTitle id="dialog-title">Simple Dialog</DialogTitle>
+ *         </DialogHeader>
+ *         <DialogContent>
+ *           <Typography margin="none">This is some text in a dialog.</Typography>
+ *         </DialogContent>
+ *         <DialogFooter>
+ *           <Button onClick={onRequestClose}>
+ *             Close
+ *           </Button>
+ *         </DialogFooter>
+ *       </Dialog>
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks \@since 6.0.0 The `Dialog` no longer supports focusing elements
+ * within once it becomes visible. You must manually add `autoFocus` to a
+ * element instead.
+ */
+export declare const Dialog: import("react").ForwardRefExoticComponent<DialogProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/dialog/Dialog.js

@@ -0,0 +1,175 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cnb } from "cnbuilder";
+import { forwardRef, useState } from "react";
+import { useSsr } from "../SsrProvider.js";
+import { useFocusContainer } from "../focus/useFocusContainer.js";
+import { Overlay } from "../overlay/Overlay.js";
+import { Portal } from "../portal/Portal.js";
+import { useScrollLock } from "../scroll/useScrollLock.js";
+import { useCSSTransition } from "../transition/useCSSTransition.js";
+import { useEnsuredId } from "../useEnsuredId.js";
+import { DISPLAY_NONE_CLASS } from "../utils/isElementVisible.js";
+import { DialogContainer } from "./DialogContainer.js";
+import { NestedDialogProvider, useNestedDialogContext } from "./NestedDialogProvider.js";
+import { dialog } from "./styles.js";
+/** @remarks \@since 4.0.0 */ export const DEFAULT_DIALOG_CLASSNAMES = {
+    appear: "rmd-dialog--enter",
+    appearActive: "rmd-dialog--enter-active",
+    enter: "rmd-dialog--enter",
+    enterActive: "rmd-dialog--enter-active",
+    exit: "rmd-dialog--exit",
+    exitActive: "rmd-dialog--exit-active"
+};
+/** @remarks \@since 4.0.0 */ export const DEFAULT_DIALOG_TIMEOUT = {
+    enter: 200,
+    exit: 150
+};
+const noop = ()=>{
+// do nothing
+};
+const noopBool = ()=>false;
+/**
+ * **Client Component**
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * import {
+ *   Button,
+ *   Dialog,
+ *   DialogHeader,
+ *   DialogTitle,
+ *   DialogContent,
+ *   DialogFooter,
+ *   Typography,
+ *   useToggle,
+ * } from "@react-md/core";
+ * import type { ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   const {
+ *     toggle,
+ *     disable: onRequestClose,
+ *     toggled: visible,
+ *   } = useToggle(false);
+ *
+ *   return (
+ *     <>
+ *       <Button onClick={toggle}>Toggle</Button>
+ *       <Dialog
+ *         aria-labelledby="dialog-title"
+ *         visible={visible}
+ *         onRequestClose={onRequestClose}
+ *       >
+ *         <DialogHeader>
+ *           <DialogTitle id="dialog-title">Simple Dialog</DialogTitle>
+ *         </DialogHeader>
+ *         <DialogContent>
+ *           <Typography margin="none">This is some text in a dialog.</Typography>
+ *         </DialogContent>
+ *         <DialogFooter>
+ *           <Button onClick={onRequestClose}>
+ *             Close
+ *           </Button>
+ *         </DialogFooter>
+ *       </Dialog>
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks \@since 6.0.0 The `Dialog` no longer supports focusing elements
+ * within once it becomes visible. You must manually add `autoFocus` to a
+ * element instead.
+ */ export const Dialog = /*#__PURE__*/ forwardRef(function Dialog(props, ref) {
+    const { id: propId, role = "dialog", type = "centered", tabIndex = -1, visible, onRequestClose, containerProps, temporary = true, className, timeout = DEFAULT_DIALOG_TIMEOUT, classNames = DEFAULT_DIALOG_CLASSNAMES, disableTransition = false, appear, enter, exit, onEnter = noop, onEntering = noop, onEntered, onExit = noop, onExiting = noop, onExited, exitedHidden = true, fixed = false, modal = false, disableOverlay = false, overlayProps, overlayHidden, onKeyDown = noop, isFocusTypeDisabled = noopBool, disablePortal: propDisablePortal, disableScrollLock = false, disableEscapeClose = modal, disableFocusOutline = type === "full-page", children, ...remaining } = props;
+    const id = useEnsuredId(propId, "dialog");
+    const ssr = useSsr();
+    const setChildVisible = useNestedDialogContext();
+    const { eventHandlers, transitionOptions } = useFocusContainer({
+        nodeRef: ref,
+        activate: visible,
+        onEntered,
+        onEntering,
+        onExiting,
+        onExited,
+        disableTransition,
+        onKeyDown (event) {
+            onKeyDown(event);
+            if (event.isPropagationStopped() || modal || disableEscapeClose || event.key !== "Escape") {
+                return;
+            }
+            // prevent parent dialogs from closing as well
+            event.stopPropagation();
+            onRequestClose();
+        },
+        isFocusTypeDisabled
+    });
+    const { elementProps, stage, rendered, disablePortal } = useCSSTransition({
+        transitionIn: visible,
+        timeout,
+        classNames,
+        className: dialog({
+            type,
+            fixed,
+            outline: !disableFocusOutline,
+            className
+        }),
+        appear: appear && !disableTransition && !ssr,
+        enter: enter && !disableTransition,
+        exit: exit && !disableTransition,
+        onEnter (appearing) {
+            onEnter(appearing);
+            setChildVisible(type !== "full-page");
+        },
+        onExit () {
+            onExit();
+            setChildVisible(false);
+        },
+        temporary,
+        exitedHidden,
+        disablePortal: propDisablePortal,
+        ...transitionOptions
+    });
+    useScrollLock(!disableScrollLock && visible);
+    // this makes it so that as more non-full page dialogs become visible, the
+    // overlay does not become darker as more and more overlays are stacked upon
+    // each other. only the top-most overlay will have and active background
+    // color.
+    const [isChildVisible, setIsChildVisible] = useState(false);
+    return /*#__PURE__*/ _jsxs(NestedDialogProvider, {
+        value: setIsChildVisible,
+        children: [
+            !disableOverlay && /*#__PURE__*/ _jsx(Overlay, {
+                visible: visible,
+                disableTransition: disableTransition,
+                temporary: temporary,
+                disablePortal: disablePortal,
+                ...overlayProps,
+                onClick: modal ? noop : onRequestClose,
+                clickable: !modal,
+                noOpacity: overlayHidden || isChildVisible
+            }),
+            /*#__PURE__*/ _jsx(Portal, {
+                disabled: disablePortal,
+                children: rendered && /*#__PURE__*/ _jsx(DialogContainer, {
+                    ...containerProps,
+                    className: cnb(containerProps?.className, !temporary && exitedHidden && stage === "exited" && DISPLAY_NONE_CLASS),
+                    enabled: type === "centered",
+                    children: /*#__PURE__*/ _jsx("div", {
+                        ...remaining,
+                        ...elementProps,
+                        ...eventHandlers,
+                        id: id,
+                        role: role,
+                        tabIndex: tabIndex,
+                        children: children
+                    })
+                })
+            })
+        ]
+    });
+});
+
+//# sourceMappingURL=Dialog.js.map

package/dist/dialog/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/dialog/Dialog.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { forwardRef, useState, type HTMLAttributes } from \"react\";\nimport { useSsr } from \"../SsrProvider.js\";\nimport {\n  useFocusContainer,\n  type FocusContainerComponentProps,\n} from \"../focus/useFocusContainer.js\";\nimport { Overlay } from \"../overlay/Overlay.js\";\nimport { Portal } from \"../portal/Portal.js\";\nimport { useScrollLock } from \"../scroll/useScrollLock.js\";\nimport {\n  type CSSTransitionClassNames,\n  type CSSTransitionComponentProps,\n  type TransitionActions,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { DISPLAY_NONE_CLASS } from \"../utils/isElementVisible.js\";\nimport { DialogContainer } from \"./DialogContainer.js\";\nimport {\n  NestedDialogProvider,\n  useNestedDialogContext,\n} from \"./NestedDialogProvider.js\";\nimport { dialog, type DialogType } from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-dialog-background-color\"?: string;\n    \"--rmd-dialog-color\"?: string;\n    \"--rmd-dialog-min-width\"?: string | number;\n    \"--rmd-dialog-horizontal-margin\"?: string | number;\n    \"--rmd-dialog-vertical-margin\"?: string | number;\n    \"--rmd-dialog-z-index\"?: string | number;\n    \"--rmd-dialog-header-padding\"?: string | number;\n    \"--rmd-dialog-header-padding-bottom\"?: string | number;\n    \"--rmd-dialog-content-padding\"?: string | number;\n    \"--rmd-dialog-footer-padding\"?: string | number;\n  }\n}\n\n/** @remarks \\@since 4.0.0 */\nexport const DEFAULT_DIALOG_CLASSNAMES: Readonly<CSSTransitionClassNames> = {\n  appear: \"rmd-dialog--enter\",\n  appearActive: \"rmd-dialog--enter-active\",\n  enter: \"rmd-dialog--enter\",\n  enterActive: \"rmd-dialog--enter-active\",\n  exit: \"rmd-dialog--exit\",\n  exitActive: \"rmd-dialog--exit-active\",\n};\n\n/** @remarks \\@since 4.0.0 */\nexport const DEFAULT_DIALOG_TIMEOUT: Readonly<TransitionTimeout> = {\n  enter: 200,\n  exit: 150,\n};\n\nconst noop = (): void => {\n  // do nothing\n};\n\nconst noopBool = (): boolean => false;\n\nexport interface BaseDialogProps\n  extends HTMLAttributes<HTMLDivElement>,\n    CSSTransitionComponentProps,\n    TransitionActions,\n    FocusContainerComponentProps {\n  /**\n   * @defaultValue `useEnsuredId('dialog')`\n   */\n  id?: string;\n\n  /**\n   * @defaultValue `\"centered\"`\n   */\n  type?: DialogType;\n\n  /**\n   * @defaultValue `\"dialog\"`\n   */\n  role?: \"dialog\" | \"alertdialog\" | \"menu\" | \"none\";\n\n  /**\n   * This value controls the visibility of the dialog.\n   */\n  visible: boolean;\n\n  /**\n   * This function should set the {@link visible} prop to false to hide the\n   * modal when:\n   * - the {@link modal} and {@link disableEscapeClose} props are `false` and\n   *   the user presses the `\"Escape\"` key.\n   * - The overlay element is clicked\n   */\n  onRequestClose(): void;\n\n  /** @defaultValue `false` */\n  disableTransition?: boolean;\n\n  /** @defaultValue `-1` */\n  tabIndex?: number;\n\n  /**\n   * Set this value to `true` if the dialog should behave as a modal which\n   * prevents the modal from being closed by pressing the `\"Escape\"` key or\n   * clicking the overlay. The user **must** click one of the actions within the\n   * dialog instead.\n   *\n   * @defaultValue `false`\n   */\n  modal?: boolean;\n\n  /**\n   * @internal\n   * @defaultValue `false`\n   */\n  fixed?: boolean;\n\n  /**\n   * Set this to `true` if the dialog should no longer use the `Portal`\n   * behavior.\n   *\n   * @defaultValue `false`\n   */\n  disablePortal?: boolean;\n\n  /**\n   * Set this to `true` if you want the page to still be scrollable while the\n   * dialog is visible. This should normally be `true` for popovers/fixed\n   * dialogs.\n   *\n   * @defaultValue `type === \"custom\"`\n   */\n  disableScrollLock?: boolean;\n\n  /**\n   * Set this to `true` to prevent the dialog from being closed when the\n   * `\"Escape\"` key is pressed. This is `true` by default when the {@link modal}\n   * prop is `true`\n   *\n   * @defaultValue `modal`\n   */\n  disableEscapeClose?: boolean;\n\n  /**\n   * Set this to `true` if an overlay should not appear behind the dialog.\n   *\n   * Note: this was changed from `type === \"full-page\"` to `false` so that you\n   * can change between full-page and centered based on media queries. If the\n   * type changes the overlay would end up rendering above the dialog instead of\n   * behind.\n   *\n   * @see {@link overlayHidden}\n   * @defaultValue `false`\n   */\n  disableOverlay?: boolean;\n\n  /**\n   * Set this to `true` if an overlay should be appear behind the dialog but\n   * have an `opacity: 0`. This is useful if you want to prevent other elements\n   * on the page from being clicked while the dialog is visible, but don't want\n   * a dark background. i.e. popovers/fixed dialogs.\n   *\n   * @defaultValue `false`\n   */\n  overlayHidden?: boolean;\n\n  /**\n   * Any additional props that should be passed to the overlay element if it is\n   * rendered.\n   */\n  overlayProps?: HTMLAttributes<HTMLSpanElement>;\n\n  /**\n   * Any additional props that should be passed to the container element when\n   * the `type === \"centered\"`.\n   */\n  containerProps?: HTMLAttributes<HTMLDivElement>;\n\n  /**\n   * @see {@link DEFAULT_DIALOG_TIMEOUT}\n   * @defaultValue `DEFAULT_DIALOG_TIMEOUT`\n   */\n  timeout?: CSSTransitionComponentProps[\"timeout\"];\n\n  /**\n   * @see {@link DEFAULT_DIALOG_CLASSNAMES}\n   * @defaultValue `DEFAULT_DIALOG_CLASSNAMES`\n   */\n  classNames?: CSSTransitionComponentProps[\"classNames\"];\n\n  /**\n   * Set this to `true` if the `Dialog` should not gain the normal focus box\n   * shadow while it is focused. The `Dialog` should normally only gain focus\n   * when it becomes visible and no child elements have `autoFocus` enabled.\n   *\n   * @remarks \\@since 6.0.0\n   * @defaultValue `type === \"full-page\"`\n   */\n  disableFocusOutline?: boolean;\n}\n\nexport type DialogProps = LabelRequiredForA11y<BaseDialogProps>;\n\n/**\n * **Client Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import {\n *   Button,\n *   Dialog,\n *   DialogHeader,\n *   DialogTitle,\n *   DialogContent,\n *   DialogFooter,\n *   Typography,\n *   useToggle,\n * } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const {\n *     toggle,\n *     disable: onRequestClose,\n *     toggled: visible,\n *   } = useToggle(false);\n *\n *   return (\n *     <>\n *       <Button onClick={toggle}>Toggle</Button>\n *       <Dialog\n *         aria-labelledby=\"dialog-title\"\n *         visible={visible}\n *         onRequestClose={onRequestClose}\n *       >\n *         <DialogHeader>\n *           <DialogTitle id=\"dialog-title\">Simple Dialog</DialogTitle>\n *         </DialogHeader>\n *         <DialogContent>\n *           <Typography margin=\"none\">This is some text in a dialog.</Typography>\n *         </DialogContent>\n *         <DialogFooter>\n *           <Button onClick={onRequestClose}>\n *             Close\n *           </Button>\n *         </DialogFooter>\n *       </Dialog>\n *     </>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0 The `Dialog` no longer supports focusing elements\n * within once it becomes visible. You must manually add `autoFocus` to a\n * element instead.\n */\nexport const Dialog = forwardRef<HTMLDivElement, DialogProps>(\n  function Dialog(props, ref) {\n    const {\n      id: propId,\n      role = \"dialog\",\n      type = \"centered\",\n      tabIndex = -1,\n      visible,\n      onRequestClose,\n      containerProps,\n      temporary = true,\n      className,\n      timeout = DEFAULT_DIALOG_TIMEOUT,\n      classNames = DEFAULT_DIALOG_CLASSNAMES,\n      disableTransition = false,\n      appear,\n      enter,\n      exit,\n      onEnter = noop,\n      onEntering = noop,\n      onEntered,\n      onExit = noop,\n      onExiting = noop,\n      onExited,\n      exitedHidden = true,\n      fixed = false,\n      modal = false,\n      disableOverlay = false,\n      overlayProps,\n      overlayHidden,\n      onKeyDown = noop,\n      isFocusTypeDisabled = noopBool,\n      disablePortal: propDisablePortal,\n      disableScrollLock = false,\n      disableEscapeClose = modal,\n      disableFocusOutline = type === \"full-page\",\n      children,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"dialog\");\n\n    const ssr = useSsr();\n    const setChildVisible = useNestedDialogContext();\n    const { eventHandlers, transitionOptions } = useFocusContainer({\n      nodeRef: ref,\n      activate: visible,\n      onEntered,\n      onEntering,\n      onExiting,\n      onExited,\n      disableTransition,\n      onKeyDown(event) {\n        onKeyDown(event);\n        if (\n          event.isPropagationStopped() ||\n          modal ||\n          disableEscapeClose ||\n          event.key !== \"Escape\"\n        ) {\n          return;\n        }\n\n        // prevent parent dialogs from closing as well\n        event.stopPropagation();\n        onRequestClose();\n      },\n      isFocusTypeDisabled,\n    });\n    const { elementProps, stage, rendered, disablePortal } = useCSSTransition({\n      transitionIn: visible,\n      timeout,\n      classNames,\n      className: dialog({\n        type,\n        fixed,\n        outline: !disableFocusOutline,\n        className,\n      }),\n      appear: appear && !disableTransition && !ssr,\n      enter: enter && !disableTransition,\n      exit: exit && !disableTransition,\n      onEnter(appearing) {\n        onEnter(appearing);\n        setChildVisible(type !== \"full-page\");\n      },\n      onExit() {\n        onExit();\n        setChildVisible(false);\n      },\n      temporary,\n      exitedHidden,\n      disablePortal: propDisablePortal,\n      ...transitionOptions,\n    });\n    useScrollLock(!disableScrollLock && visible);\n\n    // this makes it so that as more non-full page dialogs become visible, the\n    // overlay does not become darker as more and more overlays are stacked upon\n    // each other. only the top-most overlay will have and active background\n    // color.\n    const [isChildVisible, setIsChildVisible] = useState(false);\n\n    return (\n      <NestedDialogProvider value={setIsChildVisible}>\n        {!disableOverlay && (\n          <Overlay\n            visible={visible}\n            disableTransition={disableTransition}\n            temporary={temporary}\n            disablePortal={disablePortal}\n            {...overlayProps}\n            onClick={modal ? noop : onRequestClose}\n            clickable={!modal}\n            noOpacity={overlayHidden || isChildVisible}\n          />\n        )}\n        <Portal disabled={disablePortal}>\n          {rendered && (\n            <DialogContainer\n              {...containerProps}\n              className={cnb(\n                containerProps?.className,\n                !temporary &&\n                  exitedHidden &&\n                  stage === \"exited\" &&\n                  DISPLAY_NONE_CLASS\n              )}\n              enabled={type === \"centered\"}\n            >\n              <div\n                {...remaining}\n                {...elementProps}\n                {...eventHandlers}\n                id={id}\n                role={role}\n                tabIndex={tabIndex}\n              >\n                {children}\n              </div>\n            </DialogContainer>\n          )}\n        </Portal>\n      </NestedDialogProvider>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","useState","useSsr","useFocusContainer","Overlay","Portal","useScrollLock","useCSSTransition","useEnsuredId","DISPLAY_NONE_CLASS","DialogContainer","NestedDialogProvider","useNestedDialogContext","dialog","DEFAULT_DIALOG_CLASSNAMES","appear","appearActive","enter","enterActive","exit","exitActive","DEFAULT_DIALOG_TIMEOUT","noop","noopBool","Dialog","props","ref","id","propId","role","type","tabIndex","visible","onRequestClose","containerProps","temporary","className","timeout","classNames","disableTransition","onEnter","onEntering","onEntered","onExit","onExiting","onExited","exitedHidden","fixed","modal","disableOverlay","overlayProps","overlayHidden","onKeyDown","isFocusTypeDisabled","disablePortal","propDisablePortal","disableScrollLock","disableEscapeClose","disableFocusOutline","children","remaining","ssr","setChildVisible","eventHandlers","transitionOptions","nodeRef","activate","event","isPropagationStopped","key","stopPropagation","elementProps","stage","rendered","transitionIn","outline","appearing","isChildVisible","setIsChildVisible","value","onClick","clickable","noOpacity","disabled","enabled","div"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,EAAEC,QAAQ,QAA6B,QAAQ;AAClE,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SACEC,iBAAiB,QAEZ,gCAAgC;AACvC,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,MAAM,QAAQ,sBAAsB;AAC7C,SAASC,aAAa,QAAQ,6BAA6B;AAO3D,SAASC,gBAAgB,QAAQ,oCAAoC;AAErE,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,kBAAkB,QAAQ,+BAA+B;AAClE,SAASC,eAAe,QAAQ,uBAAuB;AACvD,SACEC,oBAAoB,EACpBC,sBAAsB,QACjB,4BAA4B;AACnC,SAASC,MAAM,QAAyB,cAAc;AAiBtD,2BAA2B,GAC3B,OAAO,MAAMC,4BAA+D;IAC1EC,QAAQ;IACRC,cAAc;IACdC,OAAO;IACPC,aAAa;IACbC,MAAM;IACNC,YAAY;AACd,EAAE;AAEF,2BAA2B,GAC3B,OAAO,MAAMC,yBAAsD;IACjEJ,OAAO;IACPE,MAAM;AACR,EAAE;AAEF,MAAMG,OAAO;AACX,aAAa;AACf;AAEA,MAAMC,WAAW,IAAe;AAgJhC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqDC,GACD,OAAO,MAAMC,uBAASxB,WACpB,SAASwB,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJC,IAAIC,MAAM,EACVC,OAAO,QAAQ,EACfC,OAAO,UAAU,EACjBC,WAAW,CAAC,CAAC,EACbC,OAAO,EACPC,cAAc,EACdC,cAAc,EACdC,YAAY,IAAI,EAChBC,SAAS,EACTC,UAAUhB,sBAAsB,EAChCiB,aAAaxB,yBAAyB,EACtCyB,oBAAoB,KAAK,EACzBxB,MAAM,EACNE,KAAK,EACLE,IAAI,EACJqB,UAAUlB,IAAI,EACdmB,aAAanB,IAAI,EACjBoB,SAAS,EACTC,SAASrB,IAAI,EACbsB,YAAYtB,IAAI,EAChBuB,QAAQ,EACRC,eAAe,IAAI,EACnBC,QAAQ,KAAK,EACbC,QAAQ,KAAK,EACbC,iBAAiB,KAAK,EACtBC,YAAY,EACZC,aAAa,EACbC,YAAY9B,IAAI,EAChB+B,sBAAsB9B,QAAQ,EAC9B+B,eAAeC,iBAAiB,EAChCC,oBAAoB,KAAK,EACzBC,qBAAqBT,KAAK,EAC1BU,sBAAsB5B,SAAS,WAAW,EAC1C6B,QAAQ,EACR,GAAGC,WACJ,GAAGnC;IACJ,MAAME,KAAKnB,aAAaoB,QAAQ;IAEhC,MAAMiC,MAAM3D;IACZ,MAAM4D,kBAAkBlD;IACxB,MAAM,EAAEmD,aAAa,EAAEC,iBAAiB,EAAE,GAAG7D,kBAAkB;QAC7D8D,SAASvC;QACTwC,UAAUlC;QACVU;QACAD;QACAG;QACAC;QACAN;QACAa,WAAUe,KAAK;YACbf,UAAUe;YACV,IACEA,MAAMC,oBAAoB,MAC1BpB,SACAS,sBACAU,MAAME,GAAG,KAAK,UACd;gBACA;YACF;YAEA,8CAA8C;YAC9CF,MAAMG,eAAe;YACrBrC;QACF;QACAoB;IACF;IACA,MAAM,EAAEkB,YAAY,EAAEC,KAAK,EAAEC,QAAQ,EAAEnB,aAAa,EAAE,GAAG/C,iBAAiB;QACxEmE,cAAc1C;QACdK;QACAC;QACAF,WAAWvB,OAAO;YAChBiB;YACAiB;YACA4B,SAAS,CAACjB;YACVtB;QACF;QACArB,QAAQA,UAAU,CAACwB,qBAAqB,CAACsB;QACzC5C,OAAOA,SAAS,CAACsB;QACjBpB,MAAMA,QAAQ,CAACoB;QACfC,SAAQoC,SAAS;YACfpC,QAAQoC;YACRd,gBAAgBhC,SAAS;QAC3B;QACAa;YACEA;YACAmB,gBAAgB;QAClB;QACA3B;QACAW;QACAQ,eAAeC;QACf,GAAGS,iBAAiB;IACtB;IACA1D,cAAc,CAACkD,qBAAqBxB;IAEpC,0EAA0E;IAC1E,4EAA4E;IAC5E,wEAAwE;IACxE,SAAS;IACT,MAAM,CAAC6C,gBAAgBC,kBAAkB,GAAG7E,SAAS;IAErD,qBACE,MAACU;QAAqBoE,OAAOD;;YAC1B,CAAC7B,gCACA,KAAC7C;gBACC4B,SAASA;gBACTO,mBAAmBA;gBACnBJ,WAAWA;gBACXmB,eAAeA;gBACd,GAAGJ,YAAY;gBAChB8B,SAAShC,QAAQ1B,OAAOW;gBACxBgD,WAAW,CAACjC;gBACZkC,WAAW/B,iBAAiB0B;;0BAGhC,KAACxE;gBAAO8E,UAAU7B;0BACfmB,0BACC,KAAC/D;oBACE,GAAGwB,cAAc;oBAClBE,WAAWrC,IACTmC,gBAAgBE,WAChB,CAACD,aACCW,gBACA0B,UAAU,YACV/D;oBAEJ2E,SAAStD,SAAS;8BAElB,cAAA,KAACuD;wBACE,GAAGzB,SAAS;wBACZ,GAAGW,YAAY;wBACf,GAAGR,aAAa;wBACjBpC,IAAIA;wBACJE,MAAMA;wBACNE,UAAUA;kCAET4B;;;;;;AAOf,GACA"}

package/dist/dialog/DialogContainer.d.ts

@@ -0,0 +1,16 @@
+import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
+/**
+ * @remarks \@since 6.0.0
+ * @internal
+ */
+export interface DialogContainerProps extends HTMLAttributes<HTMLDivElement> {
+    enabled: boolean;
+    children: ReactNode;
+}
+/**
+ * **Server Component**
+ *
+ * @remarks \@since 6.0.0
+ * @internal
+ */
+export declare function DialogContainer(props: DialogContainerProps): ReactElement;

package/dist/dialog/DialogContainer.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { cnb } from "cnbuilder";
+/**
+ * **Server Component**
+ *
+ * @remarks \@since 6.0.0
+ * @internal
+ */ export function DialogContainer(props) {
+    const { className, enabled, children, ...remaining } = props;
+    if (!enabled) {
+        return /*#__PURE__*/ _jsx(_Fragment, {
+            children: children
+        });
+    }
+    return /*#__PURE__*/ _jsx("div", {
+        ...remaining,
+        className: cnb("rmd-dialog-container", className),
+        children: children
+    });
+}
+
+//# sourceMappingURL=DialogContainer.js.map

package/dist/dialog/DialogContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/dialog/DialogContainer.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type HTMLAttributes, type ReactElement, type ReactNode } from \"react\";\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport interface DialogContainerProps extends HTMLAttributes<HTMLDivElement> {\n  enabled: boolean;\n  children: ReactNode;\n}\n\n/**\n * **Server Component**\n *\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport function DialogContainer(props: DialogContainerProps): ReactElement {\n  const { className, enabled, children, ...remaining } = props;\n  if (!enabled) {\n    return <>{children}</>;\n  }\n\n  return (\n    <div {...remaining} className={cnb(\"rmd-dialog-container\", className)}>\n      {children}\n    </div>\n  );\n}\n"],"names":["cnb","DialogContainer","props","className","enabled","children","remaining","div"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAYhC;;;;;CAKC,GACD,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGJ;IACvD,IAAI,CAACE,SAAS;QACZ,qBAAO;sBAAGC;;IACZ;IAEA,qBACE,KAACE;QAAK,GAAGD,SAAS;QAAEH,WAAWH,IAAI,wBAAwBG;kBACxDE;;AAGP"}

package/dist/dialog/DialogContent.d.ts

@@ -0,0 +1,10 @@
+import { type HTMLAttributes } from "react";
+import { type DialogContentClassNameOptions } from "./styles.js";
+export interface DialogContentProps extends HTMLAttributes<HTMLDivElement>, DialogContentClassNameOptions {
+}
+/**
+ * **Server Component**
+ *
+ * Look at the `Dialog` or `FixedDialog` components for example usage.
+ */
+export declare const DialogContent: import("react").ForwardRefExoticComponent<DialogContentProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/dialog/DialogContent.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { dialogContent } from "./styles.js";
+/**
+ * **Server Component**
+ *
+ * Look at the `Dialog` or `FixedDialog` components for example usage.
+ */ export const DialogContent = /*#__PURE__*/ forwardRef(function DialogContent({ children, className, disablePadding = false, ...props }, ref) {
+    return /*#__PURE__*/ _jsx("div", {
+        ...props,
+        ref: ref,
+        className: dialogContent({
+            className,
+            disablePadding
+        }),
+        children: children
+    });
+});
+
+//# sourceMappingURL=DialogContent.js.map