@react-md/core 1.0.0-next.9 → 6.0.1

package/dist/overlay/Overlay.d.ts

@@ -1,18 +1,25 @@
 import { type HTMLAttributes } from "react";
 import { type BoxAlignItems, type BoxJustifyContent } from "../box/styles.js";
 import { type CSSTransitionComponentProps, type TransitionActions } from "../transition/types.js";
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-overlay-background-color"?: string;
+        "--rmd-overlay-z-index"?: number;
+    }
+}
 /**
- * @remarks \@since 6.0.0 Added `align` and `justify` props.
+ * @since 6.0.0 Added `align` and `justify` props.
+ * @since 6.0.0 Renamed `hidden` to `noOpacity`.
  */
 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,10 +52,11 @@ 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 { Button } from "@react-md/core/button/Button";
+ * import { Overlay } from "@react-md/core/overlay/Overlay";
+ * import { useToggle } from "@react-md/core/useToggle";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -63,7 +71,8 @@ export interface OverlayProps extends HTMLAttributes<HTMLSpanElement>, CSSTransi
  * }
  * ```
  *
- * @remarks \@since 6.0.0 Removed the `onRequestClose` prop in favor of using
+ * @see {@link https://next.react-md.dev/components/overlay | Overlay Demos}
+ * @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

@@ -1,17 +1,18 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { Portal } from "../portal/Portal.js";
 import { useSsr } from "../SsrProvider.js";
+import { Portal } from "../portal/Portal.js";
 import { useCSSTransition } from "../transition/useCSSTransition.js";
-import { DEFAULT_OVERLAY_CLASSNAMES, DEFAULT_OVERLAY_TIMEOUT, overlay } from "./overlayStyles.js";
+import { DEFAULT_OVERLAY_CLASSNAMES, DEFAULT_OVERLAY_TIMEOUT, overlay } from "./styles.js";
 /**
  * **Client Component**
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
- * import { Button, Overlay, useToggle } from "@react-md/core";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { Overlay } from "@react-md/core/overlay/Overlay";
+ * import { useToggle } from "@react-md/core/useToggle";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -26,7 +27,8 @@ import { DEFAULT_OVERLAY_CLASSNAMES, DEFAULT_OVERLAY_TIMEOUT, overlay } from "./
  * }
  * ```
  *
- * @remarks \@since 6.0.0 Removed the `onRequestClose` prop in favor of using
+ * @see {@link https://next.react-md.dev/components/overlay | Overlay Demos}
+ * @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"],"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\";\n\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport { type BoxAlignItems, type BoxJustifyContent } from \"../box/styles.js\";\nimport { Portal } from \"../portal/Portal.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 \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-overlay-background-color\"?: string;\n    \"--rmd-overlay-z-index\"?: number;\n  }\n}\n\n/**\n * @since 6.0.0 Added `align` and `justify` props.\n * @since 6.0.0 Renamed `hidden` to `noOpacity`.\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 } from \"@react-md/core/button/Button\";\n * import { Overlay } from \"@react-md/core/overlay/Overlay\";\n * import { useToggle } from \"@react-md/core/useToggle\";\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 * @see {@link https://next.react-md.dev/components/overlay | Overlay Demos}\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","useSsr","Portal","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"],"mappings":"AAAA;;AAEA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAASC,MAAM,QAAQ,oBAAoB;AAE3C,SAASC,MAAM,QAAQ,sBAAsB;AAK7C,SAASC,gBAAgB,QAAQ,oCAAoC;AACrE,SACEC,0BAA0B,EAC1BC,uBAAuB,EACvBC,OAAO,QACF,cAAc;AA6DrB;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,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,MAAMjC;IACZ,MAAM,EAAEkC,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,KAAC9B;QAAOoC,UAAUP;kBACfK,0BACC,KAACG;YAAM,GAAGN,SAAS;YAAG,GAAGE,YAAY;sBAClCzB;;;AAKX,GACA"}

package/dist/overlay/_overlay.scss

@@ -1,16 +1,40 @@
+////
+/// @group overlay
+////
+
 @use "sass:map";
 @use "../utils";
+@use "../theme/colors";
 @use "../transition/transition";
 
+/// Set to `true` to disable all the styles.
+/// @type Boolean
 $disable-everything: false !default;
-$background-color: rgba(0, 0, 0, 0.4) !default;
+
+/// The default `Overlay` background color.
+/// @type Color
+$background-color: rgba(colors.$black, 0.4) !default;
+
+/// The default `Overlay` z-index.
+/// @type Number
 $z-index: utils.$temporary-element-z-index !default;
 
+/// The default `Overlay` enter/exit transition duration
+/// @type Number
 $transition-duration: transition.$linear-duration !default;
+
+/// The default `Overlay` enter/exit transition timing function
+/// @type Number
 $transition-timing-function: transition.$linear-timing-function !default;
 
+/// The available configurable css variables and mostly used internally for the
+/// `get-var`, `set-var`, and `use-var` utils.
+/// @type List
 $variables: (background-color, z-index);
 
+/// @param {String} name - The supported variable name
+/// @param {any} fallback [null] - An optional fallback value
+/// @returns {String} a `var()` statement
 @function get-var($name, $fallback: null) {
   $var: utils.get-var-name($variables, $name, "overlay");
   @if $fallback {
@@ -20,16 +44,24 @@ $variables: (background-color, z-index);
   @return var(#{$var});
 }
 
+/// @param {String} name - The supported variable name
+/// @param {any} value - The value to set the variable to. Supports `null` which
+/// will just be a no-op.
 @mixin set-var($name, $value) {
   @if $value {
     #{utils.get-var-name($variables, $name, "overlay")}: #{$value};
   }
 }
 
+/// @param {String} property - The css property to apply the variable to
+/// @param {String} name [$property] - The supported variable name
+/// @param {any} fallback [null] - An optional fallback value if the variable
+/// has not been set
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
+/// Conditionally applies the css variables based on feature flags
 @mixin variables {
   @if not $disable-everything {
     @include set-var(background-color, $background-color);
@@ -37,6 +69,10 @@ $variables: (background-color, z-index);
   }
 }
 
+/// Generates all the styles based on feature flags.
+///
+/// @param {Boolean} disable-layer [false] - Set this to `true` to disable the
+/// layer behavior
 @mixin styles($disable-layer: false) {
   @if not $disable-everything {
     @include utils.optional-layer(overlay, $disable-layer) {

package/dist/overlay/styles.d.ts

@@ -0,0 +1,31 @@
+import { type BoxAlignItems, type BoxJustifyContent } from "../box/styles.js";
+/** @since 6.0.0 */
+export interface OverlayClassNameOptions {
+    className?: string;
+    visible: boolean;
+    /** @defaultValue `false` */
+    active?: boolean;
+    /** @defaultValue `false` */
+    clickable?: boolean;
+    /** @defaultValue `false` */
+    absolute?: boolean;
+    /** @defaultValue `"center"` */
+    align?: BoxAlignItems;
+    /** @defaultValue `"center"` */
+    justify?: BoxJustifyContent;
+}
+/**
+ * @since 6.0.0
+ */
+export declare function overlay(options: OverlayClassNameOptions & {
+    active?: boolean;
+}): string;
+/** @since 2.4.0 */
+export declare const DEFAULT_OVERLAY_TIMEOUT: 150;
+/** @since 2.4.0 */
+export declare const DEFAULT_OVERLAY_CLASSNAMES: {
+    readonly appearActive: "rmd-overlay--active";
+    readonly appearDone: "rmd-overlay--active";
+    readonly enterActive: "rmd-overlay--active";
+    readonly enterDone: "rmd-overlay--active";
+};

package/dist/overlay/styles.js

@@ -0,0 +1,28 @@
+import { cnb } from "cnbuilder";
+import { box } from "../box/styles.js";
+import { bem } from "../utils/bem.js";
+const styles = bem("rmd-overlay");
+/**
+ * @since 6.0.0
+ */ export function overlay(options) {
+    const { visible, active, absolute = false, clickable = false, align = "center", justify = "center", className } = options;
+    return cnb(styles({
+        active,
+        visible,
+        clickable,
+        absolute
+    }), box({
+        align,
+        justify,
+        disablePadding: true
+    }), className);
+}
+/** @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",
+    enterDone: "rmd-overlay--active"
+};
+
+//# sourceMappingURL=styles.js.map

package/dist/overlay/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/overlay/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport {\n  type BoxAlignItems,\n  type BoxJustifyContent,\n  box,\n} from \"../box/styles.js\";\nimport {\n  type CSSTransitionClassNames,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { bem } from \"../utils/bem.js\";\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\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 = 150 as const satisfies TransitionTimeout;\n\n/** @since 2.4.0 */\nexport const DEFAULT_OVERLAY_CLASSNAMES = {\n  appearActive: \"rmd-overlay--active\",\n  appearDone: \"rmd-overlay--active\",\n  enterActive: \"rmd-overlay--active\",\n  enterDone: \"rmd-overlay--active\",\n} as const satisfies CSSTransitionClassNames;\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"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAGEC,GAAG,QACE,mBAAmB;AAK1B,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAwBnB;;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,0BAA0B,IAAyC;AAEhF,iBAAiB,GACjB,OAAO,MAAMC,6BAA6B;IACxCC,cAAc;IACdC,YAAY;IACZC,aAAa;IACbC,WAAW;AACb,EAA6C"}

package/dist/portal/Portal.d.ts

@@ -1,4 +1,8 @@
 import { type ReactElement, type ReactNode } from "react";
+/**
+ * @since 6.0.0 Removed the `into` and `intoId` props. Use the
+ * `PortalContainerProvider` instead.
+ */
 export interface PortalProps {
     children: ReactNode;
     /**
@@ -16,8 +20,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";
  *
@@ -26,6 +29,7 @@ export interface PortalProps {
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/portal | Portal Demos}
  * @see {@link PortalContainerProvider}
  * @see {@link usePortalContainer}
  */

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";
  *
@@ -19,6 +18,7 @@ import { usePortalContainer } from "./PortalContainerProvider.js";
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/portal | Portal Demos}
  * @see {@link PortalContainerProvider}
  * @see {@link usePortalContainer}
  */ export function Portal(props) {

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"],"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\";\n\nimport { type ReactElement, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { usePortalContainer } from \"./PortalContainerProvider.js\";\n\n/**\n * @since 6.0.0 Removed the `into` and `intoId` props. Use the\n * `PortalContainerProvider` instead.\n */\nexport interface PortalProps {\n  children: ReactNode;\n\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 https://next.react-md.dev/components/portal | Portal Demos}\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"],"mappings":"AAAA;;AAGA,SAASA,YAAY,QAAQ,YAAY;AAEzC,SAASC,kBAAkB,QAAQ,+BAA+B;AAkBlE;;;;;;;;;;;;;;;;;;;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"}

package/dist/portal/PortalContainerProvider.d.ts

@@ -1,23 +1,28 @@
 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 type PortalContainerNode = Element | DocumentFragment | null;
+/**
+ * @internal
+ * @since 6.0.0
+ */
+export type PortalContainer = PortalContainerNode | RefObject<PortalContainerNode>;
 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 */
+export declare function usePortalContainer(): PortalContainerNode;
+/** @since 6.0.0 */
 export interface PortalContainerProviderProps {
     /**
      * An optional container element to use. When this is `undefined`, a
      * `<div id="rmd-portal-container"></div>` will be added as the last child to
      * the `document.body` and be used as the container element.
      */
-    container?: PortalContainer | RefObject<PortalContainer>;
+    container?: PortalContainer;
     children: ReactNode;
 }
 /**
@@ -28,7 +33,8 @@ export interface PortalContainerProviderProps {
  * `<div id="rmd-portal-container"></div>` will be added as the last child to
  * the `document.body` and be used as the container element.
  *
+ * @see {@link https://next.react-md.dev/components/portal | Portal Demos}
  * @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);
 }
@@ -21,8 +21,9 @@ const { Provider } = context;
  * `<div id="rmd-portal-container"></div>` will be added as the last child to
  * the `document.body` and be used as the container element.
  *
+ * @see {@link https://next.react-md.dev/components/portal | Portal Demos}
  * @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);
@@ -32,6 +33,7 @@ const { Provider } = context;
             return;
         }
         if (typeof container !== "undefined") {
+            setValue(container);
             return;
         }
         if (!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"],"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\";\n\nimport {\n  type ReactElement,\n  type ReactNode,\n  type RefObject,\n  createContext,\n  useContext,\n  useEffect,\n  useState,\n} from \"react\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport type PortalContainerNode = Element | DocumentFragment | null;\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport type PortalContainer =\n  | PortalContainerNode\n  | RefObject<PortalContainerNode>;\n\nexport const PORTAL_CONTAINER_ID = \"rmd-portal-container\";\n\nlet portalContainer: PortalContainerNode = null;\n\nconst getPortalContainer = (): PortalContainerNode =>\n  typeof window === \"undefined\" ? null : document.body;\n\nconst context = createContext<PortalContainerNode>(getPortalContainer());\ncontext.displayName = \"PortalContainer\";\nconst { Provider } = context;\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function usePortalContainer(): PortalContainerNode {\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;\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 https://next.react-md.dev/components/portal | Portal Demos}\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<PortalContainerNode>(portalContainer);\n  useEffect(() => {\n    if (container && \"current\" in container) {\n      setValue(container.current);\n      return;\n    }\n\n    if (typeof container !== \"undefined\") {\n      setValue(container);\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"],"mappings":"AAAA;;AAEA,SAIEA,aAAa,EACbC,UAAU,EACVC,SAAS,EACTC,QAAQ,QACH,QAAQ;AAgBf,OAAO,MAAMC,sBAAsB,uBAAuB;AAE1D,IAAIC,kBAAuC;AAE3C,MAAMC,qBAAqB,IACzB,OAAOC,WAAW,cAAc,OAAOC,SAASC,IAAI;AAEtD,MAAMC,wBAAUV,cAAmCM;AACnDI,QAAQC,WAAW,GAAG;AACtB,MAAM,EAAEC,QAAQ,EAAE,GAAGF;AAErB;;;CAGC,GACD,OAAO,SAASG;IACd,OAAOZ,WAAWS;AACpB;AAaA;;;;;;;;;;;CAWC,GACD,OAAO,SAASI,wBACdC,KAAmC;IAEnC,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGF;IAChC,MAAM,CAACG,OAAOC,SAAS,GAAGhB,SAA8BE;IACxDH,UAAU;QACR,IAAIc,aAAa,aAAaA,WAAW;YACvCG,SAASH,UAAUI,OAAO;YAC1B;QACF;QAEA,IAAI,OAAOJ,cAAc,aAAa;YACpCG,SAASH;YACT;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"}

package/dist/positioning/constants.d.ts

@@ -1,4 +1,4 @@
-import type { PositionAnchor } from "./types.js";
+import { type PositionAnchor } from "./types.js";
 export declare const ABOVE_LEFT_ANCHOR: PositionAnchor;
 export declare const ABOVE_INNER_LEFT_ANCHOR: PositionAnchor;
 export declare const ABOVE_CENTER_ANCHOR: PositionAnchor;

package/dist/positioning/constants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/positioning/constants.ts"],"sourcesContent":["import type { PositionAnchor } from \"./types.js\";\n\nexport const ABOVE_LEFT_ANCHOR: PositionAnchor = {\n  x: \"left\",\n  y: \"above\",\n};\n\nexport const ABOVE_INNER_LEFT_ANCHOR: PositionAnchor = {\n  x: \"inner-left\",\n  y: \"above\",\n};\n\nexport const ABOVE_CENTER_ANCHOR: PositionAnchor = {\n  x: \"center\",\n  y: \"above\",\n};\n\nexport const ABOVE_INNER_RIGHT_ANCHOR: PositionAnchor = {\n  x: \"inner-right\",\n  y: \"above\",\n};\n\nexport const ABOVE_RIGHT_ANCHOR: PositionAnchor = {\n  x: \"right\",\n  y: \"above\",\n};\n\nexport const TOP_LEFT_ANCHOR: PositionAnchor = {\n  x: \"left\",\n  y: \"top\",\n};\n\nexport const TOP_INNER_LEFT_ANCHOR: PositionAnchor = {\n  x: \"inner-left\",\n  y: \"top\",\n};\n\nexport const TOP_CENTER_ANCHOR: PositionAnchor = {\n  x: \"center\",\n  y: \"top\",\n};\n\nexport const TOP_INNER_RIGHT_ANCHOR: PositionAnchor = {\n  x: \"inner-right\",\n  y: \"top\",\n};\n\nexport const TOP_RIGHT_ANCHOR: PositionAnchor = {\n  x: \"right\",\n  y: \"top\",\n};\n\nexport const CENTER_LEFT_ANCHOR: PositionAnchor = {\n  x: \"left\",\n  y: \"center\",\n};\n\nexport const CENTER_INNER_LEFT_ANCHOR: PositionAnchor = {\n  x: \"inner-left\",\n  y: \"center\",\n};\n\nexport const CENTER_CENTER_ANCHOR: PositionAnchor = {\n  x: \"center\",\n  y: \"center\",\n};\n\nexport const CENTER_INNER_RIGHT_ANCHOR: PositionAnchor = {\n  x: \"inner-right\",\n  y: \"center\",\n};\n\nexport const CENTER_RIGHT_ANCHOR: PositionAnchor = {\n  x: \"right\",\n  y: \"center\",\n};\n\nexport const BOTTOM_LEFT_ANCHOR: PositionAnchor = {\n  x: \"left\",\n  y: \"bottom\",\n};\n\nexport const BOTTOM_INNER_LEFT_ANCHOR: PositionAnchor = {\n  x: \"inner-left\",\n  y: \"bottom\",\n};\n\nexport const BOTTOM_CENTER_ANCHOR: PositionAnchor = {\n  x: \"center\",\n  y: \"bottom\",\n};\n\nexport const BOTTOM_INNER_RIGHT_ANCHOR: PositionAnchor = {\n  x: \"inner-right\",\n  y: \"bottom\",\n};\n\nexport const BOTTOM_RIGHT_ANCHOR: PositionAnchor = {\n  x: \"right\",\n  y: \"bottom\",\n};\n\nexport const BELOW_LEFT_ANCHOR: PositionAnchor = {\n  x: \"left\",\n  y: \"below\",\n};\n\nexport const BELOW_INNER_LEFT_ANCHOR: PositionAnchor = {\n  x: \"inner-left\",\n  y: \"below\",\n};\n\nexport const BELOW_CENTER_ANCHOR: PositionAnchor = {\n  x: \"center\",\n  y: \"below\",\n};\n\nexport const BELOW_INNER_RIGHT_ANCHOR: PositionAnchor = {\n  x: \"inner-right\",\n  y: \"below\",\n};\n\nexport const BELOW_RIGHT_ANCHOR: PositionAnchor = {\n  x: \"right\",\n  y: \"below\",\n};\n"],"names":["ABOVE_LEFT_ANCHOR","x","y","ABOVE_INNER_LEFT_ANCHOR","ABOVE_CENTER_ANCHOR","ABOVE_INNER_RIGHT_ANCHOR","ABOVE_RIGHT_ANCHOR","TOP_LEFT_ANCHOR","TOP_INNER_LEFT_ANCHOR","TOP_CENTER_ANCHOR","TOP_INNER_RIGHT_ANCHOR","TOP_RIGHT_ANCHOR","CENTER_LEFT_ANCHOR","CENTER_INNER_LEFT_ANCHOR","CENTER_CENTER_ANCHOR","CENTER_INNER_RIGHT_ANCHOR","CENTER_RIGHT_ANCHOR","BOTTOM_LEFT_ANCHOR","BOTTOM_INNER_LEFT_ANCHOR","BOTTOM_CENTER_ANCHOR","BOTTOM_INNER_RIGHT_ANCHOR","BOTTOM_RIGHT_ANCHOR","BELOW_LEFT_ANCHOR","BELOW_INNER_LEFT_ANCHOR","BELOW_CENTER_ANCHOR","BELOW_INNER_RIGHT_ANCHOR","BELOW_RIGHT_ANCHOR"],"mappings":"AAEA,OAAO,MAAMA,oBAAoC;IAC/CC,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMC,0BAA0C;IACrDF,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAME,sBAAsC;IACjDH,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMG,2BAA2C;IACtDJ,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMI,qBAAqC;IAChDL,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMK,kBAAkC;IAC7CN,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMM,wBAAwC;IACnDP,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMO,oBAAoC;IAC/CR,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMQ,yBAAyC;IACpDT,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMS,mBAAmC;IAC9CV,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMU,qBAAqC;IAChDX,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMW,2BAA2C;IACtDZ,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMY,uBAAuC;IAClDb,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMa,4BAA4C;IACvDd,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMc,sBAAsC;IACjDf,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMe,qBAAqC;IAChDhB,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMgB,2BAA2C;IACtDjB,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMiB,uBAAuC;IAClDlB,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMkB,4BAA4C;IACvDnB,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMmB,sBAAsC;IACjDpB,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMoB,oBAAoC;IAC/CrB,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMqB,0BAA0C;IACrDtB,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMsB,sBAAsC;IACjDvB,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMuB,2BAA2C;IACtDxB,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMwB,qBAAqC;IAChDzB,GAAG;IACHC,GAAG;AACL,EAAE"}
+{"version":3,"sources":["../../src/positioning/constants.ts"],"sourcesContent":["import { type PositionAnchor } from \"./types.js\";\n\nexport const ABOVE_LEFT_ANCHOR: PositionAnchor = {\n  x: \"left\",\n  y: \"above\",\n};\n\nexport const ABOVE_INNER_LEFT_ANCHOR: PositionAnchor = {\n  x: \"inner-left\",\n  y: \"above\",\n};\n\nexport const ABOVE_CENTER_ANCHOR: PositionAnchor = {\n  x: \"center\",\n  y: \"above\",\n};\n\nexport const ABOVE_INNER_RIGHT_ANCHOR: PositionAnchor = {\n  x: \"inner-right\",\n  y: \"above\",\n};\n\nexport const ABOVE_RIGHT_ANCHOR: PositionAnchor = {\n  x: \"right\",\n  y: \"above\",\n};\n\nexport const TOP_LEFT_ANCHOR: PositionAnchor = {\n  x: \"left\",\n  y: \"top\",\n};\n\nexport const TOP_INNER_LEFT_ANCHOR: PositionAnchor = {\n  x: \"inner-left\",\n  y: \"top\",\n};\n\nexport const TOP_CENTER_ANCHOR: PositionAnchor = {\n  x: \"center\",\n  y: \"top\",\n};\n\nexport const TOP_INNER_RIGHT_ANCHOR: PositionAnchor = {\n  x: \"inner-right\",\n  y: \"top\",\n};\n\nexport const TOP_RIGHT_ANCHOR: PositionAnchor = {\n  x: \"right\",\n  y: \"top\",\n};\n\nexport const CENTER_LEFT_ANCHOR: PositionAnchor = {\n  x: \"left\",\n  y: \"center\",\n};\n\nexport const CENTER_INNER_LEFT_ANCHOR: PositionAnchor = {\n  x: \"inner-left\",\n  y: \"center\",\n};\n\nexport const CENTER_CENTER_ANCHOR: PositionAnchor = {\n  x: \"center\",\n  y: \"center\",\n};\n\nexport const CENTER_INNER_RIGHT_ANCHOR: PositionAnchor = {\n  x: \"inner-right\",\n  y: \"center\",\n};\n\nexport const CENTER_RIGHT_ANCHOR: PositionAnchor = {\n  x: \"right\",\n  y: \"center\",\n};\n\nexport const BOTTOM_LEFT_ANCHOR: PositionAnchor = {\n  x: \"left\",\n  y: \"bottom\",\n};\n\nexport const BOTTOM_INNER_LEFT_ANCHOR: PositionAnchor = {\n  x: \"inner-left\",\n  y: \"bottom\",\n};\n\nexport const BOTTOM_CENTER_ANCHOR: PositionAnchor = {\n  x: \"center\",\n  y: \"bottom\",\n};\n\nexport const BOTTOM_INNER_RIGHT_ANCHOR: PositionAnchor = {\n  x: \"inner-right\",\n  y: \"bottom\",\n};\n\nexport const BOTTOM_RIGHT_ANCHOR: PositionAnchor = {\n  x: \"right\",\n  y: \"bottom\",\n};\n\nexport const BELOW_LEFT_ANCHOR: PositionAnchor = {\n  x: \"left\",\n  y: \"below\",\n};\n\nexport const BELOW_INNER_LEFT_ANCHOR: PositionAnchor = {\n  x: \"inner-left\",\n  y: \"below\",\n};\n\nexport const BELOW_CENTER_ANCHOR: PositionAnchor = {\n  x: \"center\",\n  y: \"below\",\n};\n\nexport const BELOW_INNER_RIGHT_ANCHOR: PositionAnchor = {\n  x: \"inner-right\",\n  y: \"below\",\n};\n\nexport const BELOW_RIGHT_ANCHOR: PositionAnchor = {\n  x: \"right\",\n  y: \"below\",\n};\n"],"names":["ABOVE_LEFT_ANCHOR","x","y","ABOVE_INNER_LEFT_ANCHOR","ABOVE_CENTER_ANCHOR","ABOVE_INNER_RIGHT_ANCHOR","ABOVE_RIGHT_ANCHOR","TOP_LEFT_ANCHOR","TOP_INNER_LEFT_ANCHOR","TOP_CENTER_ANCHOR","TOP_INNER_RIGHT_ANCHOR","TOP_RIGHT_ANCHOR","CENTER_LEFT_ANCHOR","CENTER_INNER_LEFT_ANCHOR","CENTER_CENTER_ANCHOR","CENTER_INNER_RIGHT_ANCHOR","CENTER_RIGHT_ANCHOR","BOTTOM_LEFT_ANCHOR","BOTTOM_INNER_LEFT_ANCHOR","BOTTOM_CENTER_ANCHOR","BOTTOM_INNER_RIGHT_ANCHOR","BOTTOM_RIGHT_ANCHOR","BELOW_LEFT_ANCHOR","BELOW_INNER_LEFT_ANCHOR","BELOW_CENTER_ANCHOR","BELOW_INNER_RIGHT_ANCHOR","BELOW_RIGHT_ANCHOR"],"mappings":"AAEA,OAAO,MAAMA,oBAAoC;IAC/CC,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMC,0BAA0C;IACrDF,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAME,sBAAsC;IACjDH,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMG,2BAA2C;IACtDJ,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMI,qBAAqC;IAChDL,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMK,kBAAkC;IAC7CN,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMM,wBAAwC;IACnDP,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMO,oBAAoC;IAC/CR,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMQ,yBAAyC;IACpDT,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMS,mBAAmC;IAC9CV,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMU,qBAAqC;IAChDX,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMW,2BAA2C;IACtDZ,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMY,uBAAuC;IAClDb,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMa,4BAA4C;IACvDd,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMc,sBAAsC;IACjDf,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMe,qBAAqC;IAChDhB,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMgB,2BAA2C;IACtDjB,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMiB,uBAAuC;IAClDlB,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMkB,4BAA4C;IACvDnB,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMmB,sBAAsC;IACjDpB,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMoB,oBAAoC;IAC/CrB,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMqB,0BAA0C;IACrDtB,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMsB,sBAAsC;IACjDvB,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMuB,2BAA2C;IACtDxB,GAAG;IACHC,GAAG;AACL,EAAE;AAEF,OAAO,MAAMwB,qBAAqC;IAChDzB,GAAG;IACHC,GAAG;AACL,EAAE"}

package/dist/positioning/createHorizontalPosition.d.ts

@@ -1,5 +1,5 @@
-import type { XCoordConfig } from "./utils.js";
-import type { FixedPositionOptions, HorizontalPosition } from "./types.js";
+import { type FixedPositionOptions, type HorizontalPosition } from "./types.js";
+import { type XCoordConfig } from "./utils.js";
 /**
  * @internal
  */
@@ -13,7 +13,7 @@ interface XPosition {
 /**
  * @internal
  */
-export interface FixConfig extends XCoordConfig {
+export interface HorizontalFixConfig extends XCoordConfig {
     vwMargin: number;
     screenRight: number;
     disableSwapping: boolean;
@@ -38,7 +38,7 @@ export interface CreateHorizontalPositionOptions extends Required<Pick<FixedPosi
  *
  * @internal
  */
-export declare function createAnchoredLeft(config: FixConfig): XPosition;
+export declare function createAnchoredLeft(config: HorizontalFixConfig): XPosition;
 /**
  * Attempts to position the fixed element so that it will appear to the
  * inner-left of the container element but also within the viewport boundaries.
@@ -49,7 +49,7 @@ export declare function createAnchoredLeft(config: FixConfig): XPosition;
  *
  * @internal
  */
-export declare function createAnchoredInnerLeft(config: FixConfig): XPosition;
+export declare function createAnchoredInnerLeft(config: HorizontalFixConfig): XPosition;
 /**
  * Attempts to position the fixed element so that it will appear at the center
  * of the container element but also within the viewport boundaries. If the
@@ -59,7 +59,7 @@ export declare function createAnchoredInnerLeft(config: FixConfig): XPosition;
  *
  * @internal
  */
-export declare function createAnchoredCenter(config: FixConfig): XPosition;
+export declare function createAnchoredHorizontalCenter(config: HorizontalFixConfig): XPosition;
 /**
  * Attempts to position the fixed element so that it will appear to the
  * inner-right of the container element but also within the viewport boundaries.
@@ -70,7 +70,7 @@ export declare function createAnchoredCenter(config: FixConfig): XPosition;
  *
  * @internal
  */
-export declare function createAnchoredInnerRight(config: FixConfig): XPosition;
+export declare function createAnchoredInnerRight(config: HorizontalFixConfig): XPosition;
 /**
  * Attempts to position the fixed element so that it will appear to the right of
  * the container element but also within the viewport boundaries. When swapping
@@ -81,7 +81,7 @@ export declare function createAnchoredInnerRight(config: FixConfig): XPosition;
  *
  * @internal
  */
-export declare function createAnchoredRight(config: FixConfig): XPosition;
+export declare function createAnchoredRight(config: HorizontalFixConfig): XPosition;
 export interface EqualWidthOptions extends Pick<CreateHorizontalPositionOptions, "x" | "elWidth" | "xMargin" | "vwMargin" | "containerRect" | "initialX"> {
     screenRight: number;
     isMinWidth: boolean;

package/dist/positioning/createHorizontalPosition.js

@@ -83,7 +83,7 @@ import { getCenterXCoord, getInnerLeftCoord, getInnerRightCoord, getLeftCoord, g
  * boundary.
  *
  * @internal
- */ export function createAnchoredCenter(config) {
+ */ export function createAnchoredHorizontalCenter(config) {
     const { vwMargin, screenRight, elWidth } = config;
     let left = getCenterXCoord(config);
     if (left < vwMargin) {
@@ -201,6 +201,16 @@ import { getCenterXCoord, getInnerLeftCoord, getInnerRightCoord, getLeftCoord, g
  */ export function createHorizontalPosition(options) {
     const { x, vw, vwMargin, xMargin, width, elWidth, initialX, containerRect, disableSwapping } = options;
     const screenRight = vw - vwMargin;
+    if (width !== "equal" && elWidth > vw - vwMargin * 2) {
+        // if the element's width is greater than the viewport's width minus the
+        // margin on both sides, just make the element span the entire viewport with
+        // the margin
+        return {
+            left: vwMargin,
+            right: vwMargin,
+            actualX: x
+        };
+    }
     if (width === "min" || width === "equal") {
         return createEqualWidth({
             x,
@@ -213,16 +223,6 @@ import { getCenterXCoord, getInnerLeftCoord, getInnerRightCoord, getLeftCoord, g
             isMinWidth: width === "min"
         });
     }
-    if (elWidth > vw - vwMargin * 2) {
-        // if the element's width is greater than the viewport's width minus the
-        // margin on both sides, just make the element span the entire viewport with
-        // the margin
-        return {
-            left: vwMargin,
-            right: vwMargin,
-            actualX: x
-        };
-    }
     const config = {
         vwMargin,
         xMargin,
@@ -238,7 +238,7 @@ import { getCenterXCoord, getInnerLeftCoord, getInnerRightCoord, getLeftCoord, g
         case "inner-left":
             return createAnchoredInnerLeft(config);
         case "center":
-            return createAnchoredCenter(config);
+            return createAnchoredHorizontalCenter(config);
         case "inner-right":
             return createAnchoredInnerRight(config);
         case "right":