@react-md/core 1.0.0-next.0

package/dist/movement/utils.js

@@ -0,0 +1,159 @@
+import { loop } from "../utils/loop.js";
+/**
+ * @remarks \@since 6.0.0
+ * @internal
+ */ export const isElementDisabled = (element)=>element.getAttribute("disabled") !== null || element.getAttribute("aria-disabled") === "true";
+/**
+ * @remarks \@since 5.0.0
+ * @internal
+ */ export const isNotFocusable = (element, includeDisabled)=>{
+    if (!element) {
+        return true;
+    }
+    if (includeDisabled) {
+        return false;
+    }
+    return isElementDisabled(element);
+};
+/**
+ * @remarks \@since 6.0.0
+ * @internal
+ */ export const getVirtualFocusDefaultIndex = (options)=>{
+    const { focusables, includeDisabled, activeDescendantId } = options;
+    if (!focusables.length || !activeDescendantId && includeDisabled) {
+        return 0;
+    }
+    const activeIndex = focusables.findIndex((element)=>{
+        if (activeDescendantId) {
+            return element.id === activeDescendantId;
+        }
+        return !isElementDisabled(element);
+    });
+    return Math.max(0, activeIndex);
+};
+/**
+ * @remarks \@since 5.0.0
+ * @internal
+ */ export const getFirstFocusableIndex = (options)=>{
+    const { focusables, includeDisabled } = options;
+    if (!focusables.length) {
+        return -1;
+    }
+    let firstIndex = 0;
+    while(firstIndex < focusables.length - 1 && isNotFocusable(focusables[firstIndex], includeDisabled)){
+        firstIndex += 1;
+    }
+    if (isNotFocusable(focusables[firstIndex], includeDisabled)) {
+        return -1;
+    }
+    return firstIndex;
+};
+/**
+ * @remarks \@since 5.0.0
+ * @internal
+ */ export const getLastFocusableIndex = (options)=>{
+    const { focusables, includeDisabled } = options;
+    if (!focusables.length) {
+        return -1;
+    }
+    let lastIndex = focusables.length - 1;
+    while(lastIndex > 0 && isNotFocusable(focusables[lastIndex], includeDisabled)){
+        lastIndex -= 1;
+    }
+    if (isNotFocusable(focusables[lastIndex], includeDisabled)) {
+        return -1;
+    }
+    return lastIndex;
+};
+/**
+ * @remarks \@since 5.0.0
+ * @internal
+ */ export const getNextFocusableIndex = (options)=>{
+    const { loopable, increment, focusables, includeDisabled, currentFocusIndex } = options;
+    if (!focusables.length) {
+        return currentFocusIndex;
+    }
+    const min = getFirstFocusableIndex({
+        focusables,
+        includeDisabled
+    });
+    const max = getLastFocusableIndex({
+        focusables,
+        includeDisabled
+    });
+    let nextIndex = loop({
+        min,
+        max,
+        value: currentFocusIndex,
+        minmax: !loopable,
+        increment
+    });
+    while(isNotFocusable(focusables[nextIndex], includeDisabled) && (loopable || nextIndex !== (increment ? max : min))){
+        nextIndex = loop({
+            min,
+            max,
+            value: nextIndex,
+            minmax: !loopable,
+            increment
+        });
+    }
+    // Since the `min` and `max` values are "safely" set, I don't need to verify
+    // the nextIndex is still focusable
+    return nextIndex;
+};
+/**
+ * @remarks \@since 5.0.0
+ * @internal
+ */ export function getSearchText(element, searchable) {
+    if (!searchable) {
+        return "";
+    }
+    const cloned = element.cloneNode(true);
+    cloned.querySelectorAll(// Note: do not include DISPLAY_NONE_CLASS since it is presentational only
+    ".rmd-icon--font,[aria-hidden=true],[hidden],[role=presentation]").forEach((element)=>{
+        element.parentNode?.removeChild(element);
+    });
+    // Note: It would be good to use `cloned.innerText` (maybe?) at some point,
+    // but it returns `undefined` in jsdom. It also does cause a reflow, so maybe
+    // this is fine?
+    // https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#differences_from_innertext
+    return (cloned.textContent || "")[0].toUpperCase();
+}
+/**
+ * This was added to help with specific widgets that cause focus index to change
+ * between renders (i.e. expanding all tree items on the same level with `*`).
+ * There might be a better way to handle this in the future.
+ *
+ * @remarks \@since 6.0.0
+ * @internal
+ */ export function recalculateFocusIndex(options) {
+    const { focusables, includeDisabled, tabIndexBehavior, activeDescendantId } = options;
+    if (tabIndexBehavior === "virtual") {
+        return getVirtualFocusDefaultIndex({
+            focusables,
+            includeDisabled,
+            activeDescendantId
+        });
+    }
+    const { activeElement } = document;
+    return focusables.findIndex((element)=>element === activeElement);
+}
+/**
+ * Checks if a keyboard event can trigger a search through focusable elements
+ * by:
+ *
+ * - checking if the key is a single letter that is not the space key
+ * - checking that the alt, ctrl, and meta keys are not being held
+ *
+ * The shift key **is allowed** because holding shift means "search from the
+ * beginning" instead of "search from current location".
+ *
+ * @remarks \@since 6.0.0
+ * @internal
+ */ export function isSearchableEvent(event) {
+    const { key, altKey, ctrlKey, metaKey } = event;
+    return key.length === 1 && // can't search with space since it is generally a click event
+    key !== " " && !altKey && !ctrlKey && !metaKey;
+}
+
+//# sourceMappingURL=utils.js.map

package/dist/movement/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/movement/utils.ts"],"sourcesContent":["import type { KeyboardEvent } from \"react\";\nimport { loop } from \"../utils/loop.js\";\nimport type { FocusableIndexOptions, TabIndexBehavior } from \"./types.js\";\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport const isElementDisabled = (element: HTMLElement): boolean =>\n  element.getAttribute(\"disabled\") !== null ||\n  element.getAttribute(\"aria-disabled\") === \"true\";\n\n/**\n * @remarks \\@since 5.0.0\n * @internal\n */\nexport const isNotFocusable = (\n  element: HTMLElement | undefined,\n  includeDisabled: boolean\n): boolean => {\n  if (!element) {\n    return true;\n  }\n\n  if (includeDisabled) {\n    return false;\n  }\n\n  return isElementDisabled(element);\n};\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport interface VirtualFocusableIndexOptions {\n  focusables: readonly HTMLElement[];\n  includeDisabled: boolean;\n  activeDescendantId: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport const getVirtualFocusDefaultIndex = (\n  options: VirtualFocusableIndexOptions\n): number => {\n  const { focusables, includeDisabled, activeDescendantId } = options;\n  if (!focusables.length || (!activeDescendantId && includeDisabled)) {\n    return 0;\n  }\n\n  const activeIndex = focusables.findIndex((element) => {\n    if (activeDescendantId) {\n      return element.id === activeDescendantId;\n    }\n\n    return !isElementDisabled(element);\n  });\n  return Math.max(0, activeIndex);\n};\n\n/**\n * @remarks \\@since 5.0.0\n * @internal\n */\nexport const getFirstFocusableIndex = (\n  options: FocusableIndexOptions\n): number => {\n  const { focusables, includeDisabled } = options;\n\n  if (!focusables.length) {\n    return -1;\n  }\n\n  let firstIndex = 0;\n  while (\n    firstIndex < focusables.length - 1 &&\n    isNotFocusable(focusables[firstIndex], includeDisabled)\n  ) {\n    firstIndex += 1;\n  }\n\n  if (isNotFocusable(focusables[firstIndex], includeDisabled)) {\n    return -1;\n  }\n\n  return firstIndex;\n};\n\n/**\n * @remarks \\@since 5.0.0\n * @internal\n */\nexport const getLastFocusableIndex = (\n  options: FocusableIndexOptions\n): number => {\n  const { focusables, includeDisabled } = options;\n\n  if (!focusables.length) {\n    return -1;\n  }\n\n  let lastIndex = focusables.length - 1;\n  while (\n    lastIndex > 0 &&\n    isNotFocusable(focusables[lastIndex], includeDisabled)\n  ) {\n    lastIndex -= 1;\n  }\n\n  if (isNotFocusable(focusables[lastIndex], includeDisabled)) {\n    return -1;\n  }\n\n  return lastIndex;\n};\n\n/**\n * @remarks \\@since 5.0.0\n * @internal\n */\ninterface NextFocusableIndexOptions extends FocusableIndexOptions {\n  loopable: boolean;\n  increment: boolean;\n  currentFocusIndex: number;\n}\n\n/**\n * @remarks \\@since 5.0.0\n * @internal\n */\nexport const getNextFocusableIndex = (\n  options: NextFocusableIndexOptions\n): number => {\n  const {\n    loopable,\n    increment,\n    focusables,\n    includeDisabled,\n    currentFocusIndex,\n  } = options;\n  if (!focusables.length) {\n    return currentFocusIndex;\n  }\n\n  const min = getFirstFocusableIndex({ focusables, includeDisabled });\n  const max = getLastFocusableIndex({ focusables, includeDisabled });\n  let nextIndex = loop({\n    min,\n    max,\n    value: currentFocusIndex,\n    minmax: !loopable,\n    increment,\n  });\n  while (\n    isNotFocusable(focusables[nextIndex], includeDisabled) &&\n    (loopable || nextIndex !== (increment ? max : min))\n  ) {\n    nextIndex = loop({\n      min,\n      max,\n      value: nextIndex,\n      minmax: !loopable,\n      increment,\n    });\n  }\n\n  // Since the `min` and `max` values are \"safely\" set, I don't need to verify\n  // the nextIndex is still focusable\n  return nextIndex;\n};\n\n/**\n * @remarks \\@since 5.0.0\n * @internal\n */\nexport function getSearchText(\n  element: HTMLElement,\n  searchable: boolean\n): string {\n  if (!searchable) {\n    return \"\";\n  }\n\n  const cloned = element.cloneNode(true) as HTMLElement;\n  cloned\n    .querySelectorAll(\n      // Note: do not include DISPLAY_NONE_CLASS since it is presentational only\n      \".rmd-icon--font,[aria-hidden=true],[hidden],[role=presentation]\"\n    )\n    .forEach((element) => {\n      element.parentNode?.removeChild(element);\n    });\n\n  // Note: It would be good to use `cloned.innerText` (maybe?) at some point,\n  // but it returns `undefined` in jsdom. It also does cause a reflow, so maybe\n  // this is fine?\n  // https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#differences_from_innertext\n  return (cloned.textContent || \"\")[0].toUpperCase();\n}\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport interface RecalculateOptions {\n  focusables: readonly HTMLElement[];\n  includeDisabled: boolean;\n  tabIndexBehavior: TabIndexBehavior | undefined;\n  activeDescendantId: string;\n}\n\n/**\n * This was added to help with specific widgets that cause focus index to change\n * between renders (i.e. expanding all tree items on the same level with `*`).\n * There might be a better way to handle this in the future.\n *\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport function recalculateFocusIndex(options: RecalculateOptions): number {\n  const { focusables, includeDisabled, tabIndexBehavior, activeDescendantId } =\n    options;\n  if (tabIndexBehavior === \"virtual\") {\n    return getVirtualFocusDefaultIndex({\n      focusables,\n      includeDisabled,\n      activeDescendantId,\n    });\n  }\n\n  const { activeElement } = document;\n  return focusables.findIndex((element) => element === activeElement);\n}\n\n/**\n * Checks if a keyboard event can trigger a search through focusable elements\n * by:\n *\n * - checking if the key is a single letter that is not the space key\n * - checking that the alt, ctrl, and meta keys are not being held\n *\n * The shift key **is allowed** because holding shift means \"search from the\n * beginning\" instead of \"search from current location\".\n *\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport function isSearchableEvent(event: KeyboardEvent): boolean {\n  const { key, altKey, ctrlKey, metaKey } = event;\n\n  return (\n    key.length === 1 &&\n    // can't search with space since it is generally a click event\n    key !== \" \" &&\n    !altKey &&\n    !ctrlKey &&\n    !metaKey\n  );\n}\n"],"names":["loop","isElementDisabled","element","getAttribute","isNotFocusable","includeDisabled","getVirtualFocusDefaultIndex","options","focusables","activeDescendantId","length","activeIndex","findIndex","id","Math","max","getFirstFocusableIndex","firstIndex","getLastFocusableIndex","lastIndex","getNextFocusableIndex","loopable","increment","currentFocusIndex","min","nextIndex","value","minmax","getSearchText","searchable","cloned","cloneNode","querySelectorAll","forEach","parentNode","removeChild","textContent","toUpperCase","recalculateFocusIndex","tabIndexBehavior","activeElement","document","isSearchableEvent","event","key","altKey","ctrlKey","metaKey"],"mappings":"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"}

package/dist/overlay/Overlay.d.ts

@@ -0,0 +1,69 @@
+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.
+ */
+export interface OverlayProps extends HTMLAttributes<HTMLSpanElement>, CSSTransitionComponentProps, TransitionActions {
+    /**
+     * @defaultValue `"center"`
+     * @remarks \@since 6.0.0
+     */
+    align?: BoxAlignItems;
+    /**
+     * @defaultValue `"center"`
+     * @remarks \@since 6.0.0
+     */
+    justify?: BoxJustifyContent;
+    /**
+     * Set this to `true` for when the overlay should be visible. Toggling this
+     * value will trigger the enter/exit animation.
+     */
+    visible: boolean;
+    /**
+     * Set this to `true` if the overlay should be rendered with an `opacity: 0`
+     * and disabling the animation. This is useful if you'd like a "close on
+     * outside click" behavior.
+     *
+     * @defaultValue `false`
+     */
+    noOpacity?: boolean;
+    /**
+     * @see {@link OverlayClassNameOptions.clickable}
+     * @defaultValue `!noOpacity`
+     */
+    clickable?: boolean;
+    /**
+     * @defaultValue `false`
+     */
+    disablePortal?: boolean;
+    /**
+     * @defaultValue `false`
+     */
+    disableTransition?: boolean;
+}
+/**
+ * **Client Component**
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * import { Button, Overlay, useToggle } from "@react-md/core";
+ * import type { ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   const { toggle, disable, toggled: visible } = useToggle(false);
+ *
+ *   return (
+ *     <>
+ *       <Button onClick={toggle}>Toggle</Button>
+ *       <Overlay visible={visible} onClick={disable} />
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks \@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

@@ -0,0 +1,69 @@
+"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 { useCSSTransition } from "../transition/useCSSTransition.js";
+import { DEFAULT_OVERLAY_CLASSNAMES, DEFAULT_OVERLAY_TIMEOUT, overlay } from "./overlayStyles.js";
+/**
+ * **Client Component**
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * import { Button, Overlay, useToggle } from "@react-md/core";
+ * import type { ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   const { toggle, disable, toggled: visible } = useToggle(false);
+ *
+ *   return (
+ *     <>
+ *       <Button onClick={toggle}>Toggle</Button>
+ *       <Overlay visible={visible} onClick={disable} />
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks \@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;
+    const ssr = useSsr();
+    const { elementProps, rendered, disablePortal } = useCSSTransition({
+        nodeRef,
+        transitionIn: visible,
+        timeout: noOpacity ? 0 : timeout,
+        classNames: noOpacity ? "" : classNames,
+        className: overlay({
+            visible,
+            clickable,
+            align,
+            justify,
+            className
+        }),
+        appear: appear && !disableTransition && !ssr,
+        enter: enter && !disableTransition,
+        exit: exit && !disableTransition,
+        onEnter,
+        onEntering,
+        onEntered,
+        onExit,
+        onExiting,
+        onExited,
+        temporary,
+        exitedHidden,
+        disablePortal: propDisablePortal
+    });
+    return /*#__PURE__*/ _jsx(Portal, {
+        disabled: disablePortal,
+        children: rendered && /*#__PURE__*/ _jsx("span", {
+            ...remaining,
+            ...elementProps,
+            children: children
+        })
+    });
+});
+
+//# sourceMappingURL=Overlay.js.map

package/dist/overlay/Overlay.js.map

@@ -0,0 +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"}

package/dist/overlay/_overlay.scss

@@ -0,0 +1,77 @@
+@use "sass:map";
+@use "../utils";
+@use "../transition/transition";
+
+$disable-everything: false !default;
+$background-color: rgba(0, 0, 0, 0.4) !default;
+$z-index: utils.$temporary-element-z-index !default;
+
+$transition-duration: transition.$linear-duration !default;
+$transition-timing-function: transition.$linear-timing-function !default;
+
+$var-lookup: (
+  background-color: (
+    var: --rmd-overlay-background-color,
+    value: $background-color,
+  ),
+  z-index: (
+    var: --rmd-overlay-z-index,
+    value: $z-index,
+  ),
+);
+
+@function get-var($name, $fallback: null) {
+  $found: utils.validate($var-lookup, $name, "overlay var");
+  $var: map.get($found, var);
+  $value: if($fallback, $fallback, map.get($found, value));
+
+  @if $value {
+    @return var(#{$var}, #{$value});
+  }
+
+  @return var(#{$var});
+}
+
+@mixin set-var($name, $value) {
+  $var: map.get(utils.validate($var-lookup, $name, "overlay var"), var);
+
+  #{$var}: #{$value};
+}
+
+@mixin use-var($property, $name: $property, $fallback: null) {
+  #{$property}: get-var($name, $fallback);
+}
+
+@mixin styles {
+  @if not $disable-everything {
+    .rmd-overlay {
+      @include use-var(background-color);
+      @include use-var(z-index);
+
+      border-radius: inherit;
+      box-shadow: inherit;
+      inset: 0;
+      opacity: 0;
+      pointer-events: none;
+      position: fixed;
+      transition: opacity $transition-duration $transition-timing-function;
+
+      &--active {
+        opacity: 1;
+      }
+
+      &--clickable {
+        cursor: pointer;
+      }
+
+      &--visible {
+        overflow: hidden;
+        pointer-events: auto;
+      }
+
+      &--absolute {
+        position: absolute;
+      }
+    }
+  }
+}

package/dist/overlay/overlayStyles.d.ts

@@ -0,0 +1,33 @@
+import { type BoxAlignItems, type BoxJustifyContent } from "../box/styles.js";
+import { type CSSTransitionClassNamesObject, type TransitionTimeout } from "../transition/types.js";
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-overlay-background-color"?: string;
+        "--rmd-overlay-z-index"?: number;
+    }
+}
+/** @remarks \@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;
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export declare function overlay(options: OverlayClassNameOptions & {
+    active?: boolean;
+}): string;
+/** @remarks \@since 2.4.0 */
+export declare const DEFAULT_OVERLAY_TIMEOUT: TransitionTimeout;
+/** @remarks \@since 2.4.0 */
+export declare const DEFAULT_OVERLAY_CLASSNAMES: Readonly<CSSTransitionClassNamesObject>;

package/dist/overlay/overlayStyles.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");
+/**
+ * @remarks \@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);
+}
+/** @remarks \@since 2.4.0 */ export const DEFAULT_OVERLAY_TIMEOUT = 150;
+/** @remarks \@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=overlayStyles.js.map

package/dist/overlay/overlayStyles.js.map

@@ -0,0 +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"],"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"}

package/dist/portal/Portal.d.ts

@@ -0,0 +1,32 @@
+import { type ReactElement, type ReactNode } from "react";
+export interface PortalProps {
+    children: ReactNode;
+    /**
+     * Setting this to `true` will disable the portal behavior and just render
+     * the `children` in the normal DOM tree.
+     *
+     * @defaultValue `false`
+     */
+    disabled?: boolean;
+}
+/**
+ * **Client Component**
+ *
+ * Portals are a great way to render temporary elements like dialogs, tooltips,
+ * and menus at a different port of the DOM. This implementation will render
+ * the `children` in the current {@link PortalContainer} element.
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * import { Portal } from "@react-md/portal";
+ *
+ * function Example() {
+ *   return <Portal><div>Some Content</div></Portal>;
+ * }
+ * ```
+ *
+ * @see {@link PortalContainerProvider}
+ * @see {@link usePortalContainer}
+ */
+export declare function Portal(props: PortalProps): ReactElement;

package/dist/portal/Portal.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import { usePortalContainer } from "./PortalContainerProvider.js";
+/**
+ * **Client Component**
+ *
+ * Portals are a great way to render temporary elements like dialogs, tooltips,
+ * and menus at a different port of the DOM. This implementation will render
+ * the `children` in the current {@link PortalContainer} element.
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * import { Portal } from "@react-md/portal";
+ *
+ * function Example() {
+ *   return <Portal><div>Some Content</div></Portal>;
+ * }
+ * ```
+ *
+ * @see {@link PortalContainerProvider}
+ * @see {@link usePortalContainer}
+ */ export function Portal(props) {
+    const { children, disabled = false } = props;
+    const container = usePortalContainer();
+    if (!container || disabled) {
+        return /*#__PURE__*/ _jsx(_Fragment, {
+            children: disabled && children
+        });
+    }
+    return /*#__PURE__*/ createPortal(children, container);
+}
+
+//# sourceMappingURL=Portal.js.map

package/dist/portal/Portal.js.map

@@ -0,0 +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"}

package/dist/portal/PortalContainerProvider.d.ts

@@ -0,0 +1,34 @@
+import { type ReactElement, type ReactNode } from "react";
+/**
+ * @internal
+ * @remarks \@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
+ */
+export declare function usePortalContainer(): PortalContainer;
+/** @remarks \@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;
+    children: ReactNode;
+}
+/**
+ * **Client Component**
+ *
+ * This component allows for all child `Portal` components to render within the
+ * same container element. If a custom `container` element is not provided, 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.
+ *
+ * @see {@link Portal}
+ * @remarks \@since 6.0.0
+ */
+export declare function PortalContainerProvider(props: PortalContainerProviderProps): ReactElement;

package/dist/portal/PortalContainerProvider.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState } from "react";
+export const PORTAL_CONTAINER_ID = "rmd-portal-container";
+let portalContainer = null;
+const getPortalContainer = ()=>typeof window === "undefined" ? null : document.body;
+const context = /*#__PURE__*/ createContext(getPortalContainer());
+context.displayName = "PortalContainer";
+const { Provider } = context;
+/**
+ * @internal
+ * @remarks \@since 6.0.0
+ */ export function usePortalContainer() {
+    return useContext(context);
+}
+/**
+ * **Client Component**
+ *
+ * This component allows for all child `Portal` components to render within the
+ * same container element. If a custom `container` element is not provided, 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.
+ *
+ * @see {@link Portal}
+ * @remarks \@since 6.0.0
+ */ export function PortalContainerProvider(props) {
+    const { container, children } = props;
+    const [value, setValue] = useState(portalContainer);
+    useEffect(()=>{
+        if (typeof container !== "undefined") {
+            return;
+        }
+        if (!portalContainer) {
+            portalContainer = document.createElement("div");
+            portalContainer.id = PORTAL_CONTAINER_ID;
+        }
+        if (!document.body.contains(portalContainer)) {
+            document.body.appendChild(portalContainer);
+        }
+        setValue(portalContainer);
+        return ()=>{
+            if (portalContainer && document.body.contains(portalContainer)) {
+                document.body.removeChild(portalContainer);
+            }
+        };
+    }, [
+        container
+    ]);
+    return /*#__PURE__*/ _jsx(Provider, {
+        value: container ?? value,
+        children: children
+    });
+}
+
+//# sourceMappingURL=PortalContainerProvider.js.map

package/dist/portal/PortalContainerProvider.js.map

@@ -0,0 +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} 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;\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 (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  return <Provider value={container ?? value}>{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","createElement","id","contains","appendChild","removeChild"],"mappings":"AAAA;;AACA,SACEA,aAAa,EACbC,UAAU,EACVC,SAAS,EACTC,QAAQ,QAGH,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,IAAI,OAAOc,cAAc,aAAa;YACpC;QACF;QAEA,IAAI,CAACX,iBAAiB;YACpBA,kBAAkBG,SAASY,aAAa,CAAC;YACzCf,gBAAgBgB,EAAE,GAAGjB;QACvB;QACA,IAAI,CAACI,SAASC,IAAI,CAACa,QAAQ,CAACjB,kBAAkB;YAC5CG,SAASC,IAAI,CAACc,WAAW,CAAClB;QAC5B;QAEAc,SAASd;QAET,OAAO;YACL,IAAIA,mBAAmBG,SAASC,IAAI,CAACa,QAAQ,CAACjB,kBAAkB;gBAC9DG,SAASC,IAAI,CAACe,WAAW,CAACnB;YAC5B;QACF;IACF,GAAG;QAACW;KAAU;IAEd,qBAAO,KAACJ;QAASM,OAAOF,aAAaE;kBAAQD;;AAC/C"}