@react-md/core 1.0.0-next.12 → 1.0.0-next.13

package/dist/navigation/navItemStyles.js

@@ -0,0 +1,31 @@
+import { cnb } from "cnbuilder";
+import { button } from "../button/buttonStyles.js";
+import { cssUtils } from "../cssUtils.js";
+import { bem } from "../utils/bem.js";
+const styles = bem("rmd-nav-item");
+/**
+ * @since 6.0.0
+ */ export function navItem(options = {}) {
+    const { className } = options;
+    return cnb(styles(), className);
+}
+/**
+ * @since 6.0.0
+ */ export function navItemContent(options = {}) {
+    const { className } = options;
+    return cnb(styles("content"), className);
+}
+/**
+ * @since 6.0.0
+ */ export function navItemLink(options = {}) {
+    const { active, activeClassName = cssUtils({
+        fontWeight: "bold"
+    }), className } = options;
+    return cnb(navItemContent(), styles("link", {
+        active
+    }), button(), cssUtils({
+        textDecoration: "none"
+    }), active && activeClassName, className);
+}
+
+//# sourceMappingURL=navItemStyles.js.map

package/dist/navigation/navItemStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/navigation/navItemStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { button } from \"../button/buttonStyles.js\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-nav-item\");\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function navItem(options: NavItemClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(styles(), className);\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemContentClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function navItemContent(\n  options: NavItemContentClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(styles(\"content\"), className);\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemLinkClassNameOptions {\n  className?: string;\n  active?: boolean;\n\n  /** @defaultValue `cssUtils({ fontWeight: \"bold\" })` */\n  activeClassName?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function navItemLink(options: NavItemLinkClassNameOptions = {}): string {\n  const {\n    active,\n    activeClassName = cssUtils({ fontWeight: \"bold\" }),\n    className,\n  } = options;\n\n  return cnb(\n    navItemContent(),\n    styles(\"link\", { active }),\n    button(),\n    cssUtils({ textDecoration: \"none\" }),\n    active && activeClassName,\n    className\n  );\n}\n"],"names":["cnb","button","cssUtils","bem","styles","navItem","options","className","navItemContent","navItemLink","active","activeClassName","fontWeight","textDecoration"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,MAAM,QAAQ,4BAA4B;AACnD,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AASnB;;CAEC,GACD,OAAO,SAASE,QAAQC,UAAmC,CAAC,CAAC;IAC3D,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAON,IAAII,UAAUG;AACvB;AASA;;CAEC,GACD,OAAO,SAASC,eACdF,UAA0C,CAAC,CAAC;IAE5C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAON,IAAII,OAAO,YAAYG;AAChC;AAaA;;CAEC,GACD,OAAO,SAASE,YAAYH,UAAuC,CAAC,CAAC;IACnE,MAAM,EACJI,MAAM,EACNC,kBAAkBT,SAAS;QAAEU,YAAY;IAAO,EAAE,EAClDL,SAAS,EACV,GAAGD;IAEJ,OAAON,IACLQ,kBACAJ,OAAO,QAAQ;QAAEM;IAAO,IACxBT,UACAC,SAAS;QAAEW,gBAAgB;IAAO,IAClCH,UAAUC,iBACVJ;AAEJ"}

package/dist/navigation/types.d.ts

@@ -0,0 +1,137 @@
+import { type AnchorHTMLAttributes, type ForwardRefExoticComponent, type HTMLAttributes, type ReactNode } from "react";
+import { type DividerProps } from "../divider/Divider.js";
+import { type ListSubheaderProps } from "../list/ListSubheader.js";
+import { type TooltipOptions, type TooltippedElementEventHandlers } from "../tooltip/useTooltip.js";
+/**
+ * Used to add a `Divider` to the navigation list.
+ * @example Output
+ * ```tsx
+ * const { type, ...props } = item;
+ * return <Divider {...props} />;
+ * ```
+ *
+ * @since 6.0.0
+ */
+export interface NavigationItemDivider extends DividerProps {
+    type: "divider";
+}
+/**
+ * Used to add a `ListSubheader` to the navigation list.
+ * @example Output
+ * ```tsx
+ * const { type, ...props } = item;
+ * return <ListSubheader {...props} />;
+ * ```
+ *
+ * @since 6.0.0
+ */
+export interface NavigationItemSubheader extends ListSubheaderProps {
+    type: "subheader";
+    children: ReactNode;
+}
+/**
+ * This is used to either create a route group which update all child routes to
+ * be prefixed with the optional `href`.
+ *
+ * @example Route Group Output
+ * ```tsx
+ * const nextParents = [item, ...parents];
+ * return (
+ *   <CollapsibleNavGroup
+ *     depth={nextParents.length})
+ *     defaultCollapsed={() =>
+ *       !data.pathname.includes(getHrefFromParents(nextParents))
+ *     }
+ *     buttonChildren={item.children}
+ *   >
+ *     {children}
+ *   </CollapsibleNavGroup>
+ * );
+ * ```
+ *
+ * Note: `children` are any child `items` that have been rendered.
+ *
+ * @since 6.0.0
+ */
+export interface NavigationItemGroup {
+    type: "group";
+    href?: string;
+    children: ReactNode;
+    items: readonly NavigationItem[];
+}
+/**
+ * @since 6.0.0
+ */
+export interface NavigationItemRoute {
+    type: "route";
+    href: string;
+    children: ReactNode;
+    active?: boolean;
+    beforeAddon?: ReactNode;
+    afterAddon?: ReactNode;
+}
+/**
+ * @since 6.0.0
+ */
+export type NavigationItem = NavigationItemDivider | NavigationItemSubheader | NavigationItemGroup | NavigationItemRoute;
+/**
+ * @since 6.0.0
+ */
+export type NavigationLinkComponent = "a" | ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & {
+    href: string;
+}>;
+/**
+ * @since 6.0.0
+ */
+export interface NavigationRenderData {
+    /**
+     * This is used to set the `active` state on a `NavItemLink`
+     */
+    pathname: string;
+    linkComponent: NavigationLinkComponent;
+}
+/**
+ * @since 6.0.0
+ */
+export interface NavItemContentProps {
+    /**
+     * Any additional props to provide the `<span>` element that wraps the
+     * children such as `style`, `className`, and `ref`.
+     */
+    spanProps?: HTMLAttributes<HTMLSpanElement>;
+    /**
+     * An optional addon to render before the `children` and will not be wrapped
+     * in the `span` that adds ellipsis overflow.
+     */
+    beforeAddon?: ReactNode;
+    /**
+     * An optional addon to render after the `children` and will not be wrapped
+     * in the `span` that adds ellipsis overflow.
+     */
+    afterAddon?: ReactNode;
+    /**
+     * This should contain accessible text for the page that this will link to and
+     * will automatically be truncated with ellipsis if it is too large. A tooltip
+     * will also appear only when it has been truncated.
+     */
+    children: ReactNode;
+    /**
+     * This most likely will never need to be used, but it's a way to override any
+     * tooltip options. The default behavior will position the tooltip to the
+     * right and only appear if the `children` are overflown.
+     *
+     * @example Customize
+     * ```tsx
+     * <NavItemLink
+     *   {...props}
+     *   tooltipOptions={{
+     *     overflowOnly: false,
+     *     defaultPosition: "above",
+     *     vhMargin: "1rem",
+     *     vwMargin: "1rem",
+     *   }}
+     * >
+     * ```
+     */
+    tooltipOptions?: Omit<TooltipOptions<HTMLAnchorElement>, keyof TooltippedElementEventHandlers<HTMLAnchorElement>>;
+}

package/dist/navigation/types.js

@@ -0,0 +1,5 @@
+/**
+ * @since 6.0.0
+ */ export { };
+
+//# sourceMappingURL=types.js.map

package/dist/navigation/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/navigation/types.ts"],"sourcesContent":["import {\n  type AnchorHTMLAttributes,\n  type ForwardRefExoticComponent,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { type DividerProps } from \"../divider/Divider.js\";\nimport { type ListSubheaderProps } from \"../list/ListSubheader.js\";\nimport {\n  type TooltipOptions,\n  type TooltippedElementEventHandlers,\n} from \"../tooltip/useTooltip.js\";\n\n/**\n * Used to add a `Divider` to the navigation list.\n * @example Output\n * ```tsx\n * const { type, ...props } = item;\n * return <Divider {...props} />;\n * ```\n *\n * @since 6.0.0\n */\nexport interface NavigationItemDivider extends DividerProps {\n  type: \"divider\";\n}\n\n/**\n * Used to add a `ListSubheader` to the navigation list.\n * @example Output\n * ```tsx\n * const { type, ...props } = item;\n * return <ListSubheader {...props} />;\n * ```\n *\n * @since 6.0.0\n */\nexport interface NavigationItemSubheader extends ListSubheaderProps {\n  type: \"subheader\";\n  children: ReactNode;\n}\n\n/**\n * This is used to either create a route group which update all child routes to\n * be prefixed with the optional `href`.\n *\n * @example Route Group Output\n * ```tsx\n * const nextParents = [item, ...parents];\n * return (\n *   <CollapsibleNavGroup\n *     depth={nextParents.length})\n *     defaultCollapsed={() =>\n *       !data.pathname.includes(getHrefFromParents(nextParents))\n *     }\n *     buttonChildren={item.children}\n *   >\n *     {children}\n *   </CollapsibleNavGroup>\n * );\n * ```\n *\n * Note: `children` are any child `items` that have been rendered.\n *\n * @since 6.0.0\n */\nexport interface NavigationItemGroup {\n  type: \"group\";\n  href?: string;\n  children: ReactNode;\n  items: readonly NavigationItem[];\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavigationItemRoute {\n  type: \"route\";\n  href: string;\n  children: ReactNode;\n  active?: boolean;\n  beforeAddon?: ReactNode;\n  afterAddon?: ReactNode;\n}\n\n/**\n * @since 6.0.0\n */\nexport type NavigationItem =\n  | NavigationItemDivider\n  | NavigationItemSubheader\n  | NavigationItemGroup\n  | NavigationItemRoute;\n\n/**\n * @since 6.0.0\n */\nexport type NavigationLinkComponent =\n  | \"a\"\n  | ForwardRefExoticComponent<\n      AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }\n    >;\n\n/**\n * @since 6.0.0\n */\nexport interface NavigationRenderData {\n  /**\n   * This is used to set the `active` state on a `NavItemLink`\n   */\n  pathname: string;\n  linkComponent: NavigationLinkComponent;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemContentProps {\n  /**\n   * Any additional props to provide the `<span>` element that wraps the\n   * children such as `style`, `className`, and `ref`.\n   */\n  spanProps?: HTMLAttributes<HTMLSpanElement>;\n\n  /**\n   * An optional addon to render before the `children` and will not be wrapped\n   * in the `span` that adds ellipsis overflow.\n   */\n  beforeAddon?: ReactNode;\n\n  /**\n   * An optional addon to render after the `children` and will not be wrapped\n   * in the `span` that adds ellipsis overflow.\n   */\n  afterAddon?: ReactNode;\n\n  /**\n   * This should contain accessible text for the page that this will link to and\n   * will automatically be truncated with ellipsis if it is too large. A tooltip\n   * will also appear only when it has been truncated.\n   */\n  children: ReactNode;\n\n  /**\n   * This most likely will never need to be used, but it's a way to override any\n   * tooltip options. The default behavior will position the tooltip to the\n   * right and only appear if the `children` are overflown.\n   *\n   * @example Customize\n   * ```tsx\n   * <NavItemLink\n   *   {...props}\n   *   tooltipOptions={{\n   *     overflowOnly: false,\n   *     defaultPosition: \"above\",\n   *     vhMargin: \"1rem\",\n   *     vwMargin: \"1rem\",\n   *   }}\n   * >\n   * ```\n   */\n  tooltipOptions?: Omit<\n    TooltipOptions<HTMLAnchorElement>,\n    keyof TooltippedElementEventHandlers<HTMLAnchorElement>\n  >;\n}\n"],"names":[],"rangeMappings":";;","mappings":"AAkHA;;CAEC,GACD,WAgDC"}

package/dist/navigation/useActiveHeadingId.d.ts

@@ -0,0 +1,54 @@
+import { type UseStateInitializer } from "../types.js";
+import { type IntersectionObserverRootMargin, type IntersectionObserverThreshold } from "../useIntersectionObserver.js";
+/**
+ * @since 6.0.0
+ */
+export interface HeadingReference {
+    id: string;
+}
+/**
+ * @since 6.0.0
+ */
+export interface HeadingReferenceWithChildren extends HeadingReference {
+    children?: readonly HeadingReferenceWithChildren[];
+}
+/**
+ * @defaultValue `[0.0, 1.0]`
+ * @since 6.0.0
+ */
+export declare const DEFAULT_ACTIVE_HEADING_THRESHOLD: IntersectionObserverThreshold;
+/**
+ * ```tsx
+ * const headerHeightVar = window
+ *   .getComputedStyle(document.documentElement)
+ *   .getPropertyValue("--rmd-layout-header-height");
+ * const headerHeight = parseCssLengthUnit({
+ *   value: headerHeightVar || "3.5rem",
+ * });
+
+ * return `-${headerHeight}px 0px 0px 0px`;
+ * ```
+ * @since 6.0.0
+ */
+export declare const DEFAULT_ACTIVE_HEADING_GET_ROOT_MARGIN: () => string;
+/**
+ * @since 6.0.0
+ */
+export interface ActiveHeadingIdOptions {
+    headings: readonly HeadingReferenceWithChildren[];
+    /** @see {@link DEFAULT_ACTIVE_HEADING_THRESHOLD} */
+    threshold?: IntersectionObserverThreshold;
+    /** @see {@link DEFAULT_ACTIVE_HEADING_GET_ROOT_MARGIN} */
+    getRootMargin?(): IntersectionObserverRootMargin;
+    /** @defaultValue `headings[0]?.id ?? ""` */
+    defaultActiveId?: UseStateInitializer<string>;
+    /** @defaultValue `0.8` */
+    scrollBottomThreshold?: number;
+}
+/**
+ * This is heavily inspired by:
+ * @see https://github.com/mdn/yari/blob/231d6aab8f1c8efe159d268c261446c5b7ae12d9/client/src/document/hooks.ts#L171
+ *
+ * @since 6.0.0
+ */
+export declare function useActiveHeadingId(options: ActiveHeadingIdOptions): string;

package/dist/navigation/useActiveHeadingId.js

@@ -0,0 +1,117 @@
+"use client";
+import { useCallback, useRef, useState } from "react";
+import { useIntersectionObserver } from "../useIntersectionObserver.js";
+import { parseCssLengthUnit } from "../utils/parseCssLengthUnit.js";
+/**
+ * @defaultValue `[0.0, 1.0]`
+ * @since 6.0.0
+ */ export const DEFAULT_ACTIVE_HEADING_THRESHOLD = [
+    0.0,
+    1.0
+];
+/**
+ * ```tsx
+ * const headerHeightVar = window
+ *   .getComputedStyle(document.documentElement)
+ *   .getPropertyValue("--rmd-layout-header-height");
+ * const headerHeight = parseCssLengthUnit({
+ *   value: headerHeightVar || "3.5rem",
+ * });
+
+ * return `-${headerHeight}px 0px 0px 0px`;
+ * ```
+ * @since 6.0.0
+ */ export const DEFAULT_ACTIVE_HEADING_GET_ROOT_MARGIN = ()=>{
+    const headerHeightVar = window.getComputedStyle(document.documentElement).getPropertyValue("--rmd-layout-header-height");
+    const headerHeight = parseCssLengthUnit({
+        value: headerHeightVar || "3.5rem"
+    });
+    return `-${headerHeight}px 0px 0px 0px`;
+};
+/**
+ * @internal
+ * @since 6.0.0
+ */ function getHeadingElements(items) {
+    const headings = [];
+    items.forEach((item)=>{
+        const heading = document.getElementById(item.id);
+        if (heading) {
+            headings.push(heading);
+        }
+        if (item.children) {
+            headings.push(...getHeadingElements(item.children));
+        }
+    });
+    return headings;
+}
+/**
+ * @internal
+ * @since 6.0.0
+ */ function getLastHeadingId(items) {
+    const last = items.at(-1);
+    if (!last) {
+        return "";
+    }
+    if (last.children) {
+        return getLastHeadingId(last.children);
+    }
+    return last.id;
+}
+/**
+ * @internal
+ * @since 6.0.0
+ */ const isScrolledNearPageBottom = (threshold)=>window.scrollY >= document.documentElement.scrollHeight * threshold;
+/**
+ * This is heavily inspired by:
+ * @see https://github.com/mdn/yari/blob/231d6aab8f1c8efe159d268c261446c5b7ae12d9/client/src/document/hooks.ts#L171
+ *
+ * @since 6.0.0
+ */ export function useActiveHeadingId(options) {
+    const { headings, threshold = DEFAULT_ACTIVE_HEADING_THRESHOLD, getRootMargin = DEFAULT_ACTIVE_HEADING_GET_ROOT_MARGIN, defaultActiveId = headings[0]?.id ?? "", scrollBottomThreshold = 0.8 } = options;
+    const elements = useRef();
+    const isFirstRender = useRef(true);
+    const [activeHeadingId, setActiveHeadingId] = useState(defaultActiveId);
+    useIntersectionObserver({
+        threshold,
+        getRootMargin,
+        getTargets: useCallback(()=>{
+            const headingElements = getHeadingElements(headings);
+            const lookup = new Map();
+            headingElements.forEach((heading)=>{
+                lookup.set(heading.id, false);
+            });
+            elements.current = lookup;
+            return headingElements;
+        }, [
+            headings
+        ]),
+        onUpdate: useCallback((entries)=>{
+            const lookup = elements.current;
+            if (!lookup) {
+                return;
+            }
+            entries.forEach((entry)=>{
+                lookup.set(entry.target.id, entry.isIntersecting);
+            });
+            // get the first visible/intersecting item and set it
+            let foundId = [
+                ...lookup.entries()
+            ].find(([_id, isIntersecting])=>isIntersecting)?.[0];
+            if (!foundId && isFirstRender.current && isScrolledNearPageBottom(scrollBottomThreshold)) {
+                foundId = getLastHeadingId(headings);
+            }
+            isFirstRender.current = false;
+            // if there isn't a found id, it might be a really large section where
+            // another heading isn't visible, so maintain the previous one
+            if (foundId) {
+                setActiveHeadingId(foundId);
+            }
+        }, [
+            headings,
+            scrollBottomThreshold
+        ])
+    });
+    return activeHeadingId;
+}
+
+//# sourceMappingURL=useActiveHeadingId.js.map

package/dist/navigation/useActiveHeadingId.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/navigation/useActiveHeadingId.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useRef, useState } from \"react\";\nimport { type UseStateInitializer } from \"../types.js\";\nimport {\n  useIntersectionObserver,\n  type IntersectionObserverRootMargin,\n  type IntersectionObserverThreshold,\n} from \"../useIntersectionObserver.js\";\nimport { parseCssLengthUnit } from \"../utils/parseCssLengthUnit.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface HeadingReference {\n  id: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface HeadingReferenceWithChildren extends HeadingReference {\n  children?: readonly HeadingReferenceWithChildren[];\n}\n\n/**\n * @defaultValue `[0.0, 1.0]`\n * @since 6.0.0\n */\nexport const DEFAULT_ACTIVE_HEADING_THRESHOLD: IntersectionObserverThreshold = [\n  0.0, 1.0,\n];\n\n/**\n * ```tsx\n * const headerHeightVar = window\n *   .getComputedStyle(document.documentElement)\n *   .getPropertyValue(\"--rmd-layout-header-height\");\n * const headerHeight = parseCssLengthUnit({\n *   value: headerHeightVar || \"3.5rem\",\n * });\n\n * return `-${headerHeight}px 0px 0px 0px`;\n * ```\n * @since 6.0.0\n */\nexport const DEFAULT_ACTIVE_HEADING_GET_ROOT_MARGIN = (): string => {\n  const headerHeightVar = window\n    .getComputedStyle(document.documentElement)\n    .getPropertyValue(\"--rmd-layout-header-height\");\n  const headerHeight = parseCssLengthUnit({\n    value: headerHeightVar || \"3.5rem\",\n  });\n\n  return `-${headerHeight}px 0px 0px 0px`;\n};\n\n/**\n * @internal\n * @since 6.0.0\n */\nfunction getHeadingElements(\n  items: readonly HeadingReferenceWithChildren[]\n): HTMLElement[] {\n  const headings: HTMLElement[] = [];\n  items.forEach((item) => {\n    const heading = document.getElementById(item.id);\n    if (heading) {\n      headings.push(heading);\n    }\n\n    if (item.children) {\n      headings.push(...getHeadingElements(item.children));\n    }\n  });\n\n  return headings;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nfunction getLastHeadingId(\n  items: readonly HeadingReferenceWithChildren[]\n): string {\n  const last = items.at(-1);\n  if (!last) {\n    return \"\";\n  }\n\n  if (last.children) {\n    return getLastHeadingId(last.children);\n  }\n\n  return last.id;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nconst isScrolledNearPageBottom = (threshold: number): boolean =>\n  window.scrollY >= document.documentElement.scrollHeight * threshold;\n\n/**\n * @since 6.0.0\n */\nexport interface ActiveHeadingIdOptions {\n  headings: readonly HeadingReferenceWithChildren[];\n\n  /** @see {@link DEFAULT_ACTIVE_HEADING_THRESHOLD} */\n  threshold?: IntersectionObserverThreshold;\n\n  /** @see {@link DEFAULT_ACTIVE_HEADING_GET_ROOT_MARGIN} */\n  getRootMargin?(): IntersectionObserverRootMargin;\n\n  /** @defaultValue `headings[0]?.id ?? \"\"` */\n  defaultActiveId?: UseStateInitializer<string>;\n\n  /** @defaultValue `0.8` */\n  scrollBottomThreshold?: number;\n}\n\n/**\n * This is heavily inspired by:\n * @see https://github.com/mdn/yari/blob/231d6aab8f1c8efe159d268c261446c5b7ae12d9/client/src/document/hooks.ts#L171\n *\n * @since 6.0.0\n */\nexport function useActiveHeadingId(options: ActiveHeadingIdOptions): string {\n  const {\n    headings,\n    threshold = DEFAULT_ACTIVE_HEADING_THRESHOLD,\n    getRootMargin = DEFAULT_ACTIVE_HEADING_GET_ROOT_MARGIN,\n    defaultActiveId = headings[0]?.id ?? \"\",\n    scrollBottomThreshold = 0.8,\n  } = options;\n  const elements = useRef<Map<string, boolean>>();\n  const isFirstRender = useRef(true);\n  const [activeHeadingId, setActiveHeadingId] = useState(defaultActiveId);\n  useIntersectionObserver({\n    threshold,\n    getRootMargin,\n    getTargets: useCallback(() => {\n      const headingElements = getHeadingElements(headings);\n      const lookup = new Map<string, boolean>();\n      headingElements.forEach((heading) => {\n        lookup.set(heading.id, false);\n      });\n      elements.current = lookup;\n\n      return headingElements;\n    }, [headings]),\n    onUpdate: useCallback(\n      (entries) => {\n        const lookup = elements.current;\n        if (!lookup) {\n          return;\n        }\n\n        entries.forEach((entry) => {\n          lookup.set(entry.target.id, entry.isIntersecting);\n        });\n\n        // get the first visible/intersecting item and set it\n        let foundId = [...lookup.entries()].find(\n          ([_id, isIntersecting]) => isIntersecting\n        )?.[0];\n        if (\n          !foundId &&\n          isFirstRender.current &&\n          isScrolledNearPageBottom(scrollBottomThreshold)\n        ) {\n          foundId = getLastHeadingId(headings);\n        }\n\n        isFirstRender.current = false;\n\n        // if there isn't a found id, it might be a really large section where\n        // another heading isn't visible, so maintain the previous one\n        if (foundId) {\n          setActiveHeadingId(foundId);\n        }\n      },\n      [headings, scrollBottomThreshold]\n    ),\n  });\n\n  return activeHeadingId;\n}\n"],"names":["useCallback","useRef","useState","useIntersectionObserver","parseCssLengthUnit","DEFAULT_ACTIVE_HEADING_THRESHOLD","DEFAULT_ACTIVE_HEADING_GET_ROOT_MARGIN","headerHeightVar","window","getComputedStyle","document","documentElement","getPropertyValue","headerHeight","value","getHeadingElements","items","headings","forEach","item","heading","getElementById","id","push","children","getLastHeadingId","last","at","isScrolledNearPageBottom","threshold","scrollY","scrollHeight","useActiveHeadingId","options","getRootMargin","defaultActiveId","scrollBottomThreshold","elements","isFirstRender","activeHeadingId","setActiveHeadingId","getTargets","headingElements","lookup","Map","set","current","onUpdate","entries","entry","target","isIntersecting","foundId","find","_id"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,WAAW,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAEtD,SACEC,uBAAuB,QAGlB,gCAAgC;AACvC,SAASC,kBAAkB,QAAQ,iCAAiC;AAgBpE;;;CAGC,GACD,OAAO,MAAMC,mCAAkE;IAC7E;IAAK;CACN,CAAC;AAEF;;;;;;;;;;;;CAYC,GACD,OAAO,MAAMC,yCAAyC;IACpD,MAAMC,kBAAkBC,OACrBC,gBAAgB,CAACC,SAASC,eAAe,EACzCC,gBAAgB,CAAC;IACpB,MAAMC,eAAeT,mBAAmB;QACtCU,OAAOP,mBAAmB;IAC5B;IAEA,OAAO,CAAC,CAAC,EAAEM,aAAa,cAAc,CAAC;AACzC,EAAE;AAEF;;;CAGC,GACD,SAASE,mBACPC,KAA8C;IAE9C,MAAMC,WAA0B,EAAE;IAClCD,MAAME,OAAO,CAAC,CAACC;QACb,MAAMC,UAAUV,SAASW,cAAc,CAACF,KAAKG,EAAE;QAC/C,IAAIF,SAAS;YACXH,SAASM,IAAI,CAACH;QAChB;QAEA,IAAID,KAAKK,QAAQ,EAAE;YACjBP,SAASM,IAAI,IAAIR,mBAAmBI,KAAKK,QAAQ;QACnD;IACF;IAEA,OAAOP;AACT;AAEA;;;CAGC,GACD,SAASQ,iBACPT,KAA8C;IAE9C,MAAMU,OAAOV,MAAMW,EAAE,CAAC,CAAC;IACvB,IAAI,CAACD,MAAM;QACT,OAAO;IACT;IAEA,IAAIA,KAAKF,QAAQ,EAAE;QACjB,OAAOC,iBAAiBC,KAAKF,QAAQ;IACvC;IAEA,OAAOE,KAAKJ,EAAE;AAChB;AAEA;;;CAGC,GACD,MAAMM,2BAA2B,CAACC,YAChCrB,OAAOsB,OAAO,IAAIpB,SAASC,eAAe,CAACoB,YAAY,GAAGF;AAqB5D;;;;;CAKC,GACD,OAAO,SAASG,mBAAmBC,OAA+B;IAChE,MAAM,EACJhB,QAAQ,EACRY,YAAYxB,gCAAgC,EAC5C6B,gBAAgB5B,sCAAsC,EACtD6B,kBAAkBlB,QAAQ,CAAC,EAAE,EAAEK,MAAM,EAAE,EACvCc,wBAAwB,GAAG,EAC5B,GAAGH;IACJ,MAAMI,WAAWpC;IACjB,MAAMqC,gBAAgBrC,OAAO;IAC7B,MAAM,CAACsC,iBAAiBC,mBAAmB,GAAGtC,SAASiC;IACvDhC,wBAAwB;QACtB0B;QACAK;QACAO,YAAYzC,YAAY;YACtB,MAAM0C,kBAAkB3B,mBAAmBE;YAC3C,MAAM0B,SAAS,IAAIC;YACnBF,gBAAgBxB,OAAO,CAAC,CAACE;gBACvBuB,OAAOE,GAAG,CAACzB,QAAQE,EAAE,EAAE;YACzB;YACAe,SAASS,OAAO,GAAGH;YAEnB,OAAOD;QACT,GAAG;YAACzB;SAAS;QACb8B,UAAU/C,YACR,CAACgD;YACC,MAAML,SAASN,SAASS,OAAO;YAC/B,IAAI,CAACH,QAAQ;gBACX;YACF;YAEAK,QAAQ9B,OAAO,CAAC,CAAC+B;gBACfN,OAAOE,GAAG,CAACI,MAAMC,MAAM,CAAC5B,EAAE,EAAE2B,MAAME,cAAc;YAClD;YAEA,qDAAqD;YACrD,IAAIC,UAAU;mBAAIT,OAAOK,OAAO;aAAG,CAACK,IAAI,CACtC,CAAC,CAACC,KAAKH,eAAe,GAAKA,iBAC1B,CAAC,EAAE;YACN,IACE,CAACC,WACDd,cAAcQ,OAAO,IACrBlB,yBAAyBQ,wBACzB;gBACAgB,UAAU3B,iBAAiBR;YAC7B;YAEAqB,cAAcQ,OAAO,GAAG;YAExB,sEAAsE;YACtE,8DAA8D;YAC9D,IAAIM,SAAS;gBACXZ,mBAAmBY;YACrB;QACF,GACA;YAACnC;YAAUmB;SAAsB;IAErC;IAEA,OAAOG;AACT"}

package/dist/overlay/Overlay.d.ts

@@ -2,17 +2,17 @@ import { type HTMLAttributes } from "react";
 import { type BoxAlignItems, type BoxJustifyContent } from "../box/styles.js";
 import { type CSSTransitionComponentProps, type TransitionActions } from "../transition/types.js";
 /**
- * @remarks \@since 6.0.0 Added `align` and `justify` props.
+ * @since 6.0.0 Added `align` and `justify` props.
  */
 export interface OverlayProps extends HTMLAttributes<HTMLSpanElement>, CSSTransitionComponentProps, TransitionActions {
     /**
      * @defaultValue `"center"`
-     * @remarks \@since 6.0.0
+     * @since 6.0.0
      */
     align?: BoxAlignItems;
     /**
      * @defaultValue `"center"`
-     * @remarks \@since 6.0.0
+     * @since 6.0.0
      */
     justify?: BoxJustifyContent;
     /**
@@ -45,8 +45,7 @@ export interface OverlayProps extends HTMLAttributes<HTMLSpanElement>, CSSTransi
 /**
  * **Client Component**
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { Button, Overlay, useToggle } from "@react-md/core";
  * import type { ReactElement } from "react";
@@ -63,7 +62,7 @@ export interface OverlayProps extends HTMLAttributes<HTMLSpanElement>, CSSTransi
  * }
  * ```
  *
- * @remarks \@since 6.0.0 Removed the `onRequestClose` prop in favor of using
+ * @since 6.0.0 Removed the `onRequestClose` prop in favor of using
  * the `onClick` prop instead.
  */
 export declare const Overlay: import("react").ForwardRefExoticComponent<OverlayProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/overlay/Overlay.js

@@ -8,8 +8,7 @@ import { DEFAULT_OVERLAY_CLASSNAMES, DEFAULT_OVERLAY_TIMEOUT, overlay } from "./
 /**
  * **Client Component**
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { Button, Overlay, useToggle } from "@react-md/core";
  * import type { ReactElement } from "react";
@@ -26,7 +25,7 @@ import { DEFAULT_OVERLAY_CLASSNAMES, DEFAULT_OVERLAY_TIMEOUT, overlay } from "./
  * }
  * ```
  *
- * @remarks \@since 6.0.0 Removed the `onRequestClose` prop in favor of using
+ * @since 6.0.0 Removed the `onRequestClose` prop in favor of using
  * the `onClick` prop instead.
  */ export const Overlay = /*#__PURE__*/ forwardRef(function Overlay(props, nodeRef) {
     const { children, className, visible, noOpacity = false, clickable = !noOpacity, temporary = true, timeout = DEFAULT_OVERLAY_TIMEOUT, classNames = DEFAULT_OVERLAY_CLASSNAMES, disableTransition = false, align = "center", justify = "center", appear, enter, exit, onEnter, onEntering, onEntered, onExit, onExiting, onExited, exitedHidden = true, disablePortal: propDisablePortal = false, ...remaining } = props;

package/dist/overlay/Overlay.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/overlay/Overlay.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { type BoxAlignItems, type BoxJustifyContent } from \"../box/styles.js\";\nimport { Portal } from \"../portal/Portal.js\";\nimport { useSsr } from \"../SsrProvider.js\";\nimport {\n  type CSSTransitionComponentProps,\n  type TransitionActions,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\nimport {\n  DEFAULT_OVERLAY_CLASSNAMES,\n  DEFAULT_OVERLAY_TIMEOUT,\n  overlay,\n} from \"./overlayStyles.js\";\n\n/**\n * @remarks \\@since 6.0.0 Added `align` and `justify` props.\n */\nexport interface OverlayProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    CSSTransitionComponentProps,\n    TransitionActions {\n  /**\n   * @defaultValue `\"center\"`\n   * @remarks \\@since 6.0.0\n   */\n  align?: BoxAlignItems;\n\n  /**\n   * @defaultValue `\"center\"`\n   * @remarks \\@since 6.0.0\n   */\n  justify?: BoxJustifyContent;\n\n  /**\n   * Set this to `true` for when the overlay should be visible. Toggling this\n   * value will trigger the enter/exit animation.\n   */\n  visible: boolean;\n\n  /**\n   * Set this to `true` if the overlay should be rendered with an `opacity: 0`\n   * and disabling the animation. This is useful if you'd like a \"close on\n   * outside click\" behavior.\n   *\n   * @defaultValue `false`\n   */\n  noOpacity?: boolean;\n\n  /**\n   * @see {@link OverlayClassNameOptions.clickable}\n   * @defaultValue `!noOpacity`\n   */\n  clickable?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disablePortal?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import { Button, Overlay, useToggle } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { toggle, disable, toggled: visible } = useToggle(false);\n *\n *   return (\n *     <>\n *       <Button onClick={toggle}>Toggle</Button>\n *       <Overlay visible={visible} onClick={disable} />\n *     </>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0 Removed the `onRequestClose` prop in favor of using\n * the `onClick` prop instead.\n */\nexport const Overlay = forwardRef<HTMLSpanElement, OverlayProps>(\n  function Overlay(props, nodeRef) {\n    const {\n      children,\n      className,\n      visible,\n      noOpacity = false,\n      clickable = !noOpacity,\n      temporary = true,\n      timeout = DEFAULT_OVERLAY_TIMEOUT,\n      classNames = DEFAULT_OVERLAY_CLASSNAMES,\n      disableTransition = false,\n      align = \"center\",\n      justify = \"center\",\n      appear,\n      enter,\n      exit,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n      onExited,\n      exitedHidden = true,\n      disablePortal: propDisablePortal = false,\n      ...remaining\n    } = props;\n\n    const ssr = useSsr();\n    const { elementProps, rendered, disablePortal } = useCSSTransition({\n      nodeRef,\n      transitionIn: visible,\n      timeout: noOpacity ? 0 : timeout,\n      classNames: noOpacity ? \"\" : classNames,\n      className: overlay({\n        visible,\n        clickable,\n        align,\n        justify,\n        className,\n      }),\n      appear: appear && !disableTransition && !ssr,\n      enter: enter && !disableTransition,\n      exit: exit && !disableTransition,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n      onExited,\n      temporary,\n      exitedHidden,\n      disablePortal: propDisablePortal,\n    });\n\n    return (\n      <Portal disabled={disablePortal}>\n        {rendered && (\n          <span {...remaining} {...elementProps}>\n            {children}\n          </span>\n        )}\n      </Portal>\n    );\n  }\n);\n"],"names":["forwardRef","Portal","useSsr","useCSSTransition","DEFAULT_OVERLAY_CLASSNAMES","DEFAULT_OVERLAY_TIMEOUT","overlay","Overlay","props","nodeRef","children","className","visible","noOpacity","clickable","temporary","timeout","classNames","disableTransition","align","justify","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","exitedHidden","disablePortal","propDisablePortal","remaining","ssr","elementProps","rendered","transitionIn","disabled","span"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SAASA,UAAU,QAA6B,QAAQ;AAExD,SAASC,MAAM,QAAQ,sBAAsB;AAC7C,SAASC,MAAM,QAAQ,oBAAoB;AAK3C,SAASC,gBAAgB,QAAQ,oCAAoC;AACrE,SACEC,0BAA0B,EAC1BC,uBAAuB,EACvBC,OAAO,QACF,qBAAqB;AAqD5B;;;;;;;;;;;;;;;;;;;;;;;CAuBC,GACD,OAAO,MAAMC,wBAAUP,WACrB,SAASO,QAAQC,KAAK,EAAEC,OAAO;IAC7B,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACPC,YAAY,KAAK,EACjBC,YAAY,CAACD,SAAS,EACtBE,YAAY,IAAI,EAChBC,UAAUX,uBAAuB,EACjCY,aAAab,0BAA0B,EACvCc,oBAAoB,KAAK,EACzBC,QAAQ,QAAQ,EAChBC,UAAU,QAAQ,EAClBC,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,eAAe,IAAI,EACnBC,eAAeC,oBAAoB,KAAK,EACxC,GAAGC,WACJ,GAAGzB;IAEJ,MAAM0B,MAAMhC;IACZ,MAAM,EAAEiC,YAAY,EAAEC,QAAQ,EAAEL,aAAa,EAAE,GAAG5B,iBAAiB;QACjEM;QACA4B,cAAczB;QACdI,SAASH,YAAY,IAAIG;QACzBC,YAAYJ,YAAY,KAAKI;QAC7BN,WAAWL,QAAQ;YACjBM;YACAE;YACAK;YACAC;YACAT;QACF;QACAU,QAAQA,UAAU,CAACH,qBAAqB,CAACgB;QACzCZ,OAAOA,SAAS,CAACJ;QACjBK,MAAMA,QAAQ,CAACL;QACfM;QACAC;QACAC;QACAC;QACAC;QACAC;QACAd;QACAe;QACAC,eAAeC;IACjB;IAEA,qBACE,KAAC/B;QAAOqC,UAAUP;kBACfK,0BACC,KAACG;YAAM,GAAGN,SAAS;YAAG,GAAGE,YAAY;sBAClCzB;;;AAKX,GACA"}
+{"version":3,"sources":["../../src/overlay/Overlay.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { type BoxAlignItems, type BoxJustifyContent } from \"../box/styles.js\";\nimport { Portal } from \"../portal/Portal.js\";\nimport { useSsr } from \"../SsrProvider.js\";\nimport {\n  type CSSTransitionComponentProps,\n  type TransitionActions,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\nimport {\n  DEFAULT_OVERLAY_CLASSNAMES,\n  DEFAULT_OVERLAY_TIMEOUT,\n  overlay,\n} from \"./overlayStyles.js\";\n\n/**\n * @since 6.0.0 Added `align` and `justify` props.\n */\nexport interface OverlayProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    CSSTransitionComponentProps,\n    TransitionActions {\n  /**\n   * @defaultValue `\"center\"`\n   * @since 6.0.0\n   */\n  align?: BoxAlignItems;\n\n  /**\n   * @defaultValue `\"center\"`\n   * @since 6.0.0\n   */\n  justify?: BoxJustifyContent;\n\n  /**\n   * Set this to `true` for when the overlay should be visible. Toggling this\n   * value will trigger the enter/exit animation.\n   */\n  visible: boolean;\n\n  /**\n   * Set this to `true` if the overlay should be rendered with an `opacity: 0`\n   * and disabling the animation. This is useful if you'd like a \"close on\n   * outside click\" behavior.\n   *\n   * @defaultValue `false`\n   */\n  noOpacity?: boolean;\n\n  /**\n   * @see {@link OverlayClassNameOptions.clickable}\n   * @defaultValue `!noOpacity`\n   */\n  clickable?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disablePortal?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { Button, Overlay, useToggle } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { toggle, disable, toggled: visible } = useToggle(false);\n *\n *   return (\n *     <>\n *       <Button onClick={toggle}>Toggle</Button>\n *       <Overlay visible={visible} onClick={disable} />\n *     </>\n *   );\n * }\n * ```\n *\n * @since 6.0.0 Removed the `onRequestClose` prop in favor of using\n * the `onClick` prop instead.\n */\nexport const Overlay = forwardRef<HTMLSpanElement, OverlayProps>(\n  function Overlay(props, nodeRef) {\n    const {\n      children,\n      className,\n      visible,\n      noOpacity = false,\n      clickable = !noOpacity,\n      temporary = true,\n      timeout = DEFAULT_OVERLAY_TIMEOUT,\n      classNames = DEFAULT_OVERLAY_CLASSNAMES,\n      disableTransition = false,\n      align = \"center\",\n      justify = \"center\",\n      appear,\n      enter,\n      exit,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n      onExited,\n      exitedHidden = true,\n      disablePortal: propDisablePortal = false,\n      ...remaining\n    } = props;\n\n    const ssr = useSsr();\n    const { elementProps, rendered, disablePortal } = useCSSTransition({\n      nodeRef,\n      transitionIn: visible,\n      timeout: noOpacity ? 0 : timeout,\n      classNames: noOpacity ? \"\" : classNames,\n      className: overlay({\n        visible,\n        clickable,\n        align,\n        justify,\n        className,\n      }),\n      appear: appear && !disableTransition && !ssr,\n      enter: enter && !disableTransition,\n      exit: exit && !disableTransition,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n      onExited,\n      temporary,\n      exitedHidden,\n      disablePortal: propDisablePortal,\n    });\n\n    return (\n      <Portal disabled={disablePortal}>\n        {rendered && (\n          <span {...remaining} {...elementProps}>\n            {children}\n          </span>\n        )}\n      </Portal>\n    );\n  }\n);\n"],"names":["forwardRef","Portal","useSsr","useCSSTransition","DEFAULT_OVERLAY_CLASSNAMES","DEFAULT_OVERLAY_TIMEOUT","overlay","Overlay","props","nodeRef","children","className","visible","noOpacity","clickable","temporary","timeout","classNames","disableTransition","align","justify","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","exitedHidden","disablePortal","propDisablePortal","remaining","ssr","elementProps","rendered","transitionIn","disabled","span"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SAASA,UAAU,QAA6B,QAAQ;AAExD,SAASC,MAAM,QAAQ,sBAAsB;AAC7C,SAASC,MAAM,QAAQ,oBAAoB;AAK3C,SAASC,gBAAgB,QAAQ,oCAAoC;AACrE,SACEC,0BAA0B,EAC1BC,uBAAuB,EACvBC,OAAO,QACF,qBAAqB;AAqD5B;;;;;;;;;;;;;;;;;;;;;;CAsBC,GACD,OAAO,MAAMC,wBAAUP,WACrB,SAASO,QAAQC,KAAK,EAAEC,OAAO;IAC7B,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACPC,YAAY,KAAK,EACjBC,YAAY,CAACD,SAAS,EACtBE,YAAY,IAAI,EAChBC,UAAUX,uBAAuB,EACjCY,aAAab,0BAA0B,EACvCc,oBAAoB,KAAK,EACzBC,QAAQ,QAAQ,EAChBC,UAAU,QAAQ,EAClBC,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,eAAe,IAAI,EACnBC,eAAeC,oBAAoB,KAAK,EACxC,GAAGC,WACJ,GAAGzB;IAEJ,MAAM0B,MAAMhC;IACZ,MAAM,EAAEiC,YAAY,EAAEC,QAAQ,EAAEL,aAAa,EAAE,GAAG5B,iBAAiB;QACjEM;QACA4B,cAAczB;QACdI,SAASH,YAAY,IAAIG;QACzBC,YAAYJ,YAAY,KAAKI;QAC7BN,WAAWL,QAAQ;YACjBM;YACAE;YACAK;YACAC;YACAT;QACF;QACAU,QAAQA,UAAU,CAACH,qBAAqB,CAACgB;QACzCZ,OAAOA,SAAS,CAACJ;QACjBK,MAAMA,QAAQ,CAACL;QACfM;QACAC;QACAC;QACAC;QACAC;QACAC;QACAd;QACAe;QACAC,eAAeC;IACjB;IAEA,qBACE,KAAC/B;QAAOqC,UAAUP;kBACfK,0BACC,KAACG;YAAM,GAAGN,SAAS;YAAG,GAAGE,YAAY;sBAClCzB;;;AAKX,GACA"}

package/dist/overlay/overlayStyles.d.ts

@@ -6,7 +6,7 @@ declare module "react" {
         "--rmd-overlay-z-index"?: number;
     }
 }
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface OverlayClassNameOptions {
     className?: string;
     visible: boolean;
@@ -22,12 +22,12 @@ export interface OverlayClassNameOptions {
     justify?: BoxJustifyContent;
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare function overlay(options: OverlayClassNameOptions & {
     active?: boolean;
 }): string;
-/** @remarks \@since 2.4.0 */
+/** @since 2.4.0 */
 export declare const DEFAULT_OVERLAY_TIMEOUT: TransitionTimeout;
-/** @remarks \@since 2.4.0 */
+/** @since 2.4.0 */
 export declare const DEFAULT_OVERLAY_CLASSNAMES: Readonly<CSSTransitionClassNamesObject>;

package/dist/overlay/overlayStyles.js

@@ -3,7 +3,7 @@ import { box } from "../box/styles.js";
 import { bem } from "../utils/bem.js";
 const styles = bem("rmd-overlay");
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export function overlay(options) {
     const { visible, active, absolute = false, clickable = false, align = "center", justify = "center", className } = options;
     return cnb(styles({
@@ -17,8 +17,8 @@ const styles = bem("rmd-overlay");
         disablePadding: true
     }), className);
 }
-/** @remarks \@since 2.4.0 */ export const DEFAULT_OVERLAY_TIMEOUT = 150;
-/** @remarks \@since 2.4.0 */ export const DEFAULT_OVERLAY_CLASSNAMES = {
+/** @since 2.4.0 */ export const DEFAULT_OVERLAY_TIMEOUT = 150;
+/** @since 2.4.0 */ export const DEFAULT_OVERLAY_CLASSNAMES = {
     appearActive: "rmd-overlay--active",
     appearDone: "rmd-overlay--active",
     enterActive: "rmd-overlay--active",

package/dist/overlay/overlayStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/overlay/overlayStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  box,\n  type BoxAlignItems,\n  type BoxJustifyContent,\n} from \"../box/styles.js\";\nimport {\n  type CSSTransitionClassNamesObject,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-overlay-background-color\"?: string;\n    \"--rmd-overlay-z-index\"?: number;\n  }\n}\n\nconst styles = bem(\"rmd-overlay\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface OverlayClassNameOptions {\n  className?: string;\n\n  visible: boolean;\n\n  /** @defaultValue `false` */\n  active?: boolean;\n\n  /** @defaultValue `false` */\n  clickable?: boolean;\n\n  /** @defaultValue `false` */\n  absolute?: boolean;\n  /** @defaultValue `\"center\"` */\n  align?: BoxAlignItems;\n\n  /** @defaultValue `\"center\"` */\n  justify?: BoxJustifyContent;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function overlay(\n  options: OverlayClassNameOptions & { active?: boolean }\n): string {\n  const {\n    visible,\n    active,\n    absolute = false,\n    clickable = false,\n    align = \"center\",\n    justify = \"center\",\n    className,\n  } = options;\n\n  return cnb(\n    styles({\n      active,\n      visible,\n      clickable,\n      absolute,\n    }),\n    box({\n      align,\n      justify,\n      disablePadding: true,\n    }),\n    className\n  );\n}\n\n/** @remarks \\@since 2.4.0 */\nexport const DEFAULT_OVERLAY_TIMEOUT: TransitionTimeout = 150;\n\n/** @remarks \\@since 2.4.0 */\nexport const DEFAULT_OVERLAY_CLASSNAMES: Readonly<CSSTransitionClassNamesObject> =\n  {\n    appearActive: \"rmd-overlay--active\",\n    appearDone: \"rmd-overlay--active\",\n    enterActive: \"rmd-overlay--active\",\n    enterDone: \"rmd-overlay--active\",\n  };\n"],"names":["cnb","box","bem","styles","overlay","options","visible","active","absolute","clickable","align","justify","className","disablePadding","DEFAULT_OVERLAY_TIMEOUT","DEFAULT_OVERLAY_CLASSNAMES","appearActive","appearDone","enterActive","enterDone"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,GAAG,QAGE,mBAAmB;AAK1B,SAASC,GAAG,QAAQ,kBAAkB;AAStC,MAAMC,SAASD,IAAI;AAuBnB;;CAEC,GACD,OAAO,SAASE,QACdC,OAAuD;IAEvD,MAAM,EACJC,OAAO,EACPC,MAAM,EACNC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjBC,QAAQ,QAAQ,EAChBC,UAAU,QAAQ,EAClBC,SAAS,EACV,GAAGP;IAEJ,OAAOL,IACLG,OAAO;QACLI;QACAD;QACAG;QACAD;IACF,IACAP,IAAI;QACFS;QACAC;QACAE,gBAAgB;IAClB,IACAD;AAEJ;AAEA,2BAA2B,GAC3B,OAAO,MAAME,0BAA6C,IAAI;AAE9D,2BAA2B,GAC3B,OAAO,MAAMC,6BACX;IACEC,cAAc;IACdC,YAAY;IACZC,aAAa;IACbC,WAAW;AACb,EAAE"}
+{"version":3,"sources":["../../src/overlay/overlayStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  box,\n  type BoxAlignItems,\n  type BoxJustifyContent,\n} from \"../box/styles.js\";\nimport {\n  type CSSTransitionClassNamesObject,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-overlay-background-color\"?: string;\n    \"--rmd-overlay-z-index\"?: number;\n  }\n}\n\nconst styles = bem(\"rmd-overlay\");\n\n/** @since 6.0.0 */\nexport interface OverlayClassNameOptions {\n  className?: string;\n\n  visible: boolean;\n\n  /** @defaultValue `false` */\n  active?: boolean;\n\n  /** @defaultValue `false` */\n  clickable?: boolean;\n\n  /** @defaultValue `false` */\n  absolute?: boolean;\n  /** @defaultValue `\"center\"` */\n  align?: BoxAlignItems;\n\n  /** @defaultValue `\"center\"` */\n  justify?: BoxJustifyContent;\n}\n\n/**\n * @since 6.0.0\n */\nexport function overlay(\n  options: OverlayClassNameOptions & { active?: boolean }\n): string {\n  const {\n    visible,\n    active,\n    absolute = false,\n    clickable = false,\n    align = \"center\",\n    justify = \"center\",\n    className,\n  } = options;\n\n  return cnb(\n    styles({\n      active,\n      visible,\n      clickable,\n      absolute,\n    }),\n    box({\n      align,\n      justify,\n      disablePadding: true,\n    }),\n    className\n  );\n}\n\n/** @since 2.4.0 */\nexport const DEFAULT_OVERLAY_TIMEOUT: TransitionTimeout = 150;\n\n/** @since 2.4.0 */\nexport const DEFAULT_OVERLAY_CLASSNAMES: Readonly<CSSTransitionClassNamesObject> =\n  {\n    appearActive: \"rmd-overlay--active\",\n    appearDone: \"rmd-overlay--active\",\n    enterActive: \"rmd-overlay--active\",\n    enterDone: \"rmd-overlay--active\",\n  };\n"],"names":["cnb","box","bem","styles","overlay","options","visible","active","absolute","clickable","align","justify","className","disablePadding","DEFAULT_OVERLAY_TIMEOUT","DEFAULT_OVERLAY_CLASSNAMES","appearActive","appearDone","enterActive","enterDone"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,GAAG,QAGE,mBAAmB;AAK1B,SAASC,GAAG,QAAQ,kBAAkB;AAStC,MAAMC,SAASD,IAAI;AAuBnB;;CAEC,GACD,OAAO,SAASE,QACdC,OAAuD;IAEvD,MAAM,EACJC,OAAO,EACPC,MAAM,EACNC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjBC,QAAQ,QAAQ,EAChBC,UAAU,QAAQ,EAClBC,SAAS,EACV,GAAGP;IAEJ,OAAOL,IACLG,OAAO;QACLI;QACAD;QACAG;QACAD;IACF,IACAP,IAAI;QACFS;QACAC;QACAE,gBAAgB;IAClB,IACAD;AAEJ;AAEA,iBAAiB,GACjB,OAAO,MAAME,0BAA6C,IAAI;AAE9D,iBAAiB,GACjB,OAAO,MAAMC,6BACX;IACEC,cAAc;IACdC,YAAY;IACZC,aAAa;IACbC,WAAW;AACb,EAAE"}

package/dist/portal/Portal.d.ts

@@ -16,8 +16,7 @@ export interface PortalProps {
  * and menus at a different port of the DOM. This implementation will render
  * the `children` in the current {@link PortalContainer} element.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { Portal } from "@react-md/portal";
  *

package/dist/portal/Portal.js

@@ -9,8 +9,7 @@ import { usePortalContainer } from "./PortalContainerProvider.js";
  * and menus at a different port of the DOM. This implementation will render
  * the `children` in the current {@link PortalContainer} element.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
  * import { Portal } from "@react-md/portal";
  *

package/dist/portal/Portal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/portal/Portal.tsx"],"sourcesContent":["\"use client\";\nimport { type ReactElement, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { usePortalContainer } from \"./PortalContainerProvider.js\";\n\nexport interface PortalProps {\n  children: ReactNode;\n  /**\n   * Setting this to `true` will disable the portal behavior and just render\n   * the `children` in the normal DOM tree.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * Portals are a great way to render temporary elements like dialogs, tooltips,\n * and menus at a different port of the DOM. This implementation will render\n * the `children` in the current {@link PortalContainer} element.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { Portal } from \"@react-md/portal\";\n *\n * function Example() {\n *   return <Portal><div>Some Content</div></Portal>;\n * }\n * ```\n *\n * @see {@link PortalContainerProvider}\n * @see {@link usePortalContainer}\n */\nexport function Portal(props: PortalProps): ReactElement {\n  const { children, disabled = false } = props;\n  const container = usePortalContainer();\n  if (!container || disabled) {\n    return <>{disabled && children}</>;\n  }\n\n  return createPortal(children, container);\n}\n"],"names":["createPortal","usePortalContainer","Portal","props","children","disabled","container"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAEA,SAASA,YAAY,QAAQ,YAAY;AAEzC,SAASC,kBAAkB,QAAQ,+BAA+B;AAalE;;;;;;;;;;;;;;;;;;;CAmBC,GACD,OAAO,SAASC,OAAOC,KAAkB;IACvC,MAAM,EAAEC,QAAQ,EAAEC,WAAW,KAAK,EAAE,GAAGF;IACvC,MAAMG,YAAYL;IAClB,IAAI,CAACK,aAAaD,UAAU;QAC1B,qBAAO;sBAAGA,YAAYD;;IACxB;IAEA,qBAAOJ,aAAaI,UAAUE;AAChC"}
+{"version":3,"sources":["../../src/portal/Portal.tsx"],"sourcesContent":["\"use client\";\nimport { type ReactElement, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { usePortalContainer } from \"./PortalContainerProvider.js\";\n\nexport interface PortalProps {\n  children: ReactNode;\n  /**\n   * Setting this to `true` will disable the portal behavior and just render\n   * the `children` in the normal DOM tree.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * Portals are a great way to render temporary elements like dialogs, tooltips,\n * and menus at a different port of the DOM. This implementation will render\n * the `children` in the current {@link PortalContainer} element.\n *\n * @example Simple Example\n * ```tsx\n * import { Portal } from \"@react-md/portal\";\n *\n * function Example() {\n *   return <Portal><div>Some Content</div></Portal>;\n * }\n * ```\n *\n * @see {@link PortalContainerProvider}\n * @see {@link usePortalContainer}\n */\nexport function Portal(props: PortalProps): ReactElement {\n  const { children, disabled = false } = props;\n  const container = usePortalContainer();\n  if (!container || disabled) {\n    return <>{disabled && children}</>;\n  }\n\n  return createPortal(children, container);\n}\n"],"names":["createPortal","usePortalContainer","Portal","props","children","disabled","container"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAEA,SAASA,YAAY,QAAQ,YAAY;AAEzC,SAASC,kBAAkB,QAAQ,+BAA+B;AAalE;;;;;;;;;;;;;;;;;;CAkBC,GACD,OAAO,SAASC,OAAOC,KAAkB;IACvC,MAAM,EAAEC,QAAQ,EAAEC,WAAW,KAAK,EAAE,GAAGF;IACvC,MAAMG,YAAYL;IAClB,IAAI,CAACK,aAAaD,UAAU;QAC1B,qBAAO;sBAAGA,YAAYD;;IACxB;IAEA,qBAAOJ,aAAaI,UAAUE;AAChC"}

package/dist/portal/PortalContainerProvider.d.ts

@@ -1,16 +1,16 @@
 import { type ReactElement, type ReactNode, type RefObject } from "react";
 /**
  * @internal
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export type PortalContainer = Element | DocumentFragment | null;
 export declare const PORTAL_CONTAINER_ID = "rmd-portal-container";
 /**
  * @internal
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare function usePortalContainer(): PortalContainer;
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface PortalContainerProviderProps {
     /**
      * An optional container element to use. When this is `undefined`, a
@@ -29,6 +29,6 @@ export interface PortalContainerProviderProps {
  * the `document.body` and be used as the container element.
  *
  * @see {@link Portal}
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare function PortalContainerProvider(props: PortalContainerProviderProps): ReactElement;

package/dist/portal/PortalContainerProvider.js

@@ -9,7 +9,7 @@ context.displayName = "PortalContainer";
 const { Provider } = context;
 /**
  * @internal
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export function usePortalContainer() {
     return useContext(context);
 }
@@ -22,7 +22,7 @@ const { Provider } = context;
  * the `document.body` and be used as the container element.
  *
  * @see {@link Portal}
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export function PortalContainerProvider(props) {
     const { container, children } = props;
     const [value, setValue] = useState(portalContainer);

package/dist/portal/PortalContainerProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/portal/PortalContainerProvider.tsx"],"sourcesContent":["\"use client\";\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  useState,\n  type ReactElement,\n  type ReactNode,\n  type RefObject,\n} from \"react\";\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport type PortalContainer = Element | DocumentFragment | null;\n\nexport const PORTAL_CONTAINER_ID = \"rmd-portal-container\";\n\nlet portalContainer: PortalContainer = null;\n\nconst getPortalContainer = (): PortalContainer =>\n  typeof window === \"undefined\" ? null : document.body;\n\nconst context = createContext<PortalContainer>(getPortalContainer());\ncontext.displayName = \"PortalContainer\";\nconst { Provider } = context;\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport function usePortalContainer(): PortalContainer {\n  return useContext(context);\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface PortalContainerProviderProps {\n  /**\n   * An optional container element to use. When this is `undefined`, a\n   * `<div id=\"rmd-portal-container\"></div>` will be added as the last child to\n   * the `document.body` and be used as the container element.\n   */\n  container?: PortalContainer | RefObject<PortalContainer>;\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This component allows for all child `Portal` components to render within the\n * same container element. If a custom `container` element is not provided, a\n * `<div id=\"rmd-portal-container\"></div>` will be added as the last child to\n * the `document.body` and be used as the container element.\n *\n * @see {@link Portal}\n * @remarks \\@since 6.0.0\n */\nexport function PortalContainerProvider(\n  props: PortalContainerProviderProps\n): ReactElement {\n  const { container, children } = props;\n  const [value, setValue] = useState<PortalContainer>(portalContainer);\n  useEffect(() => {\n    if (container && \"current\" in container) {\n      setValue(container.current);\n      return;\n    }\n\n    if (typeof container !== \"undefined\") {\n      return;\n    }\n\n    if (!portalContainer) {\n      portalContainer = document.createElement(\"div\");\n      portalContainer.id = PORTAL_CONTAINER_ID;\n    }\n    if (!document.body.contains(portalContainer)) {\n      document.body.appendChild(portalContainer);\n    }\n\n    setValue(portalContainer);\n\n    return () => {\n      if (portalContainer && document.body.contains(portalContainer)) {\n        document.body.removeChild(portalContainer);\n      }\n    };\n  }, [container]);\n\n  const containerValue =\n    (container && \"current\" in container) || !container ? value : container;\n  return <Provider value={containerValue}>{children}</Provider>;\n}\n"],"names":["createContext","useContext","useEffect","useState","PORTAL_CONTAINER_ID","portalContainer","getPortalContainer","window","document","body","context","displayName","Provider","usePortalContainer","PortalContainerProvider","props","container","children","value","setValue","current","createElement","id","contains","appendChild","removeChild","containerValue"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SACEA,aAAa,EACbC,UAAU,EACVC,SAAS,EACTC,QAAQ,QAIH,QAAQ;AAQf,OAAO,MAAMC,sBAAsB,uBAAuB;AAE1D,IAAIC,kBAAmC;AAEvC,MAAMC,qBAAqB,IACzB,OAAOC,WAAW,cAAc,OAAOC,SAASC,IAAI;AAEtD,MAAMC,wBAAUV,cAA+BM;AAC/CI,QAAQC,WAAW,GAAG;AACtB,MAAM,EAAEC,QAAQ,EAAE,GAAGF;AAErB;;;CAGC,GACD,OAAO,SAASG;IACd,OAAOZ,WAAWS;AACpB;AAaA;;;;;;;;;;CAUC,GACD,OAAO,SAASI,wBACdC,KAAmC;IAEnC,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGF;IAChC,MAAM,CAACG,OAAOC,SAAS,GAAGhB,SAA0BE;IACpDH,UAAU;QACR,IAAIc,aAAa,aAAaA,WAAW;YACvCG,SAASH,UAAUI,OAAO;YAC1B;QACF;QAEA,IAAI,OAAOJ,cAAc,aAAa;YACpC;QACF;QAEA,IAAI,CAACX,iBAAiB;YACpBA,kBAAkBG,SAASa,aAAa,CAAC;YACzChB,gBAAgBiB,EAAE,GAAGlB;QACvB;QACA,IAAI,CAACI,SAASC,IAAI,CAACc,QAAQ,CAAClB,kBAAkB;YAC5CG,SAASC,IAAI,CAACe,WAAW,CAACnB;QAC5B;QAEAc,SAASd;QAET,OAAO;YACL,IAAIA,mBAAmBG,SAASC,IAAI,CAACc,QAAQ,CAAClB,kBAAkB;gBAC9DG,SAASC,IAAI,CAACgB,WAAW,CAACpB;YAC5B;QACF;IACF,GAAG;QAACW;KAAU;IAEd,MAAMU,iBACJ,AAACV,aAAa,aAAaA,aAAc,CAACA,YAAYE,QAAQF;IAChE,qBAAO,KAACJ;QAASM,OAAOQ;kBAAiBT;;AAC3C"}
+{"version":3,"sources":["../../src/portal/PortalContainerProvider.tsx"],"sourcesContent":["\"use client\";\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  useState,\n  type ReactElement,\n  type ReactNode,\n  type RefObject,\n} from \"react\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport type PortalContainer = Element | DocumentFragment | null;\n\nexport const PORTAL_CONTAINER_ID = \"rmd-portal-container\";\n\nlet portalContainer: PortalContainer = null;\n\nconst getPortalContainer = (): PortalContainer =>\n  typeof window === \"undefined\" ? null : document.body;\n\nconst context = createContext<PortalContainer>(getPortalContainer());\ncontext.displayName = \"PortalContainer\";\nconst { Provider } = context;\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function usePortalContainer(): PortalContainer {\n  return useContext(context);\n}\n\n/** @since 6.0.0 */\nexport interface PortalContainerProviderProps {\n  /**\n   * An optional container element to use. When this is `undefined`, a\n   * `<div id=\"rmd-portal-container\"></div>` will be added as the last child to\n   * the `document.body` and be used as the container element.\n   */\n  container?: PortalContainer | RefObject<PortalContainer>;\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This component allows for all child `Portal` components to render within the\n * same container element. If a custom `container` element is not provided, a\n * `<div id=\"rmd-portal-container\"></div>` will be added as the last child to\n * the `document.body` and be used as the container element.\n *\n * @see {@link Portal}\n * @since 6.0.0\n */\nexport function PortalContainerProvider(\n  props: PortalContainerProviderProps\n): ReactElement {\n  const { container, children } = props;\n  const [value, setValue] = useState<PortalContainer>(portalContainer);\n  useEffect(() => {\n    if (container && \"current\" in container) {\n      setValue(container.current);\n      return;\n    }\n\n    if (typeof container !== \"undefined\") {\n      return;\n    }\n\n    if (!portalContainer) {\n      portalContainer = document.createElement(\"div\");\n      portalContainer.id = PORTAL_CONTAINER_ID;\n    }\n    if (!document.body.contains(portalContainer)) {\n      document.body.appendChild(portalContainer);\n    }\n\n    setValue(portalContainer);\n\n    return () => {\n      if (portalContainer && document.body.contains(portalContainer)) {\n        document.body.removeChild(portalContainer);\n      }\n    };\n  }, [container]);\n\n  const containerValue =\n    (container && \"current\" in container) || !container ? value : container;\n  return <Provider value={containerValue}>{children}</Provider>;\n}\n"],"names":["createContext","useContext","useEffect","useState","PORTAL_CONTAINER_ID","portalContainer","getPortalContainer","window","document","body","context","displayName","Provider","usePortalContainer","PortalContainerProvider","props","container","children","value","setValue","current","createElement","id","contains","appendChild","removeChild","containerValue"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SACEA,aAAa,EACbC,UAAU,EACVC,SAAS,EACTC,QAAQ,QAIH,QAAQ;AAQf,OAAO,MAAMC,sBAAsB,uBAAuB;AAE1D,IAAIC,kBAAmC;AAEvC,MAAMC,qBAAqB,IACzB,OAAOC,WAAW,cAAc,OAAOC,SAASC,IAAI;AAEtD,MAAMC,wBAAUV,cAA+BM;AAC/CI,QAAQC,WAAW,GAAG;AACtB,MAAM,EAAEC,QAAQ,EAAE,GAAGF;AAErB;;;CAGC,GACD,OAAO,SAASG;IACd,OAAOZ,WAAWS;AACpB;AAaA;;;;;;;;;;CAUC,GACD,OAAO,SAASI,wBACdC,KAAmC;IAEnC,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGF;IAChC,MAAM,CAACG,OAAOC,SAAS,GAAGhB,SAA0BE;IACpDH,UAAU;QACR,IAAIc,aAAa,aAAaA,WAAW;YACvCG,SAASH,UAAUI,OAAO;YAC1B;QACF;QAEA,IAAI,OAAOJ,cAAc,aAAa;YACpC;QACF;QAEA,IAAI,CAACX,iBAAiB;YACpBA,kBAAkBG,SAASa,aAAa,CAAC;YACzChB,gBAAgBiB,EAAE,GAAGlB;QACvB;QACA,IAAI,CAACI,SAASC,IAAI,CAACc,QAAQ,CAAClB,kBAAkB;YAC5CG,SAASC,IAAI,CAACe,WAAW,CAACnB;QAC5B;QAEAc,SAASd;QAET,OAAO;YACL,IAAIA,mBAAmBG,SAASC,IAAI,CAACc,QAAQ,CAAClB,kBAAkB;gBAC9DG,SAASC,IAAI,CAACgB,WAAW,CAACpB;YAC5B;QACF;IACF,GAAG;QAACW;KAAU;IAEd,MAAMU,iBACJ,AAACV,aAAa,aAAaA,aAAc,CAACA,YAAYE,QAAQF;IAChE,qBAAO,KAACJ;QAASM,OAAOQ;kBAAiBT;;AAC3C"}