@1771technologies/lytenyte-pro/dist/dialog.js

import { jsxs, jsx } from "react/jsx-runtime";
import * as React from "react";
import { useMemo, forwardRef } from "react";
import { clsx } from "@1771technologies/js-utils";
import { P as PropTypes, j as useEventCallback, m as mergeProps, d as useEnhancedEffect, n as useOpenChangeComplete, D as FloatingFocusManager, r as refType } from "./proptypes-BjYr2nFr.js";
import { u as useDialogRootContext, a as useDialogPortalContext } from "./DialogPortalContext-C2WZTqJ3.js";
import { p as popupStateMapping, t as transitionStatusMapping, u as useForkRef, a as useComponentRenderer, b as useBaseUiId, I as InternalBackdrop } from "./InternalBackdrop-C4RACVzs.js";
import { u as useButton } from "./useButton-DWXzFgcr.js";
const customStyleHookMapping$1 = {
  ...popupStateMapping,
  ...transitionStatusMapping
};
const DialogBackdrop$1 = /* @__PURE__ */ React.forwardRef(function DialogBackdrop(props, forwardedRef) {
  const {
    render,
    className,
    ...other
  } = props;
  const {
    open,
    nested,
    mounted,
    transitionStatus,
    backdropRef
  } = useDialogRootContext();
  const state2 = React.useMemo(() => ({
    open,
    transitionStatus
  }), [open, transitionStatus]);
  const mergedRef = useForkRef(backdropRef, forwardedRef);
  const {
    renderElement
  } = useComponentRenderer({
    render: render ?? "div",
    className,
    state: state2,
    ref: mergedRef,
    extraProps: {
      role: "presentation",
      hidden: !mounted,
      ...other
    },
    customStyleHookMapping: customStyleHookMapping$1
  });
  const shouldRender = !nested;
  if (!shouldRender) {
    return null;
  }
  return renderElement();
});
process.env.NODE_ENV !== "production" ? DialogBackdrop$1.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * @ignore
   */
  children: PropTypes.node,
  /**
   * CSS class applied to the element, or a function that
   * returns a class based on the component’s state.
   */
  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  /**
   * Allows you to replace the component’s HTML element
   * with a different tag, or compose it with another component.
   *
   * Accepts a `ReactElement` or a function that returns the element to render.
   */
  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
} : void 0;
function useDialogClose(params) {
  const {
    open,
    setOpen,
    rootRef: externalRef,
    disabled
  } = params;
  const handleClick = useEventCallback((event) => {
    if (open) {
      setOpen(false, event.nativeEvent, "click");
    }
  });
  const {
    getButtonProps
  } = useButton({
    disabled,
    buttonRef: externalRef
  });
  const getRootProps = (externalProps) => mergeProps({
    onClick: handleClick
  }, externalProps, getButtonProps);
  return {
    getRootProps
  };
}
const DialogClose$1 = /* @__PURE__ */ React.forwardRef(function DialogClose(props, forwardedRef) {
  const {
    render,
    className,
    disabled = false,
    ...other
  } = props;
  const {
    open,
    setOpen
  } = useDialogRootContext();
  const {
    getRootProps
  } = useDialogClose({
    disabled,
    open,
    setOpen,
    rootRef: forwardedRef
  });
  const state2 = React.useMemo(() => ({
    disabled
  }), [disabled]);
  const {
    renderElement
  } = useComponentRenderer({
    render: render ?? "button",
    className,
    state: state2,
    propGetter: getRootProps,
    extraProps: other
  });
  return renderElement();
});
process.env.NODE_ENV !== "production" ? DialogClose$1.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * @ignore
   */
  children: PropTypes.node,
  /**
   * CSS class applied to the element, or a function that
   * returns a class based on the component’s state.
   */
  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  /**
   * @ignore
   */
  disabled: PropTypes.bool,
  /**
   * Allows you to replace the component’s HTML element
   * with a different tag, or compose it with another component.
   *
   * Accepts a `ReactElement` or a function that returns the element to render.
   */
  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
} : void 0;
const state$1 = {};
const DialogDescription$1 = /* @__PURE__ */ React.forwardRef(function DialogDescription(props, forwardedRef) {
  const {
    render,
    className,
    id: idProp,
    ...other
  } = props;
  const {
    setDescriptionElementId
  } = useDialogRootContext();
  const id = useBaseUiId(idProp);
  useEnhancedEffect(() => {
    setDescriptionElementId(id);
    return () => {
      setDescriptionElementId(void 0);
    };
  }, [id, setDescriptionElementId]);
  const getProps = React.useCallback((externalProps = {}) => mergeProps({
    id
  }, externalProps), [id]);
  const {
    renderElement
  } = useComponentRenderer({
    propGetter: getProps,
    render: render ?? "p",
    className,
    state: state$1,
    ref: forwardedRef,
    extraProps: other
  });
  return renderElement();
});
process.env.NODE_ENV !== "production" ? DialogDescription$1.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * @ignore
   */
  children: PropTypes.node,
  /**
   * CSS class applied to the element, or a function that
   * returns a class based on the component’s state.
   */
  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  /**
   * @ignore
   */
  id: PropTypes.string,
  /**
   * Allows you to replace the component’s HTML element
   * with a different tag, or compose it with another component.
   *
   * Accepts a `ReactElement` or a function that returns the element to render.
   */
  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
} : void 0;
function useDialogPopup(parameters) {
  const {
    descriptionElementId,
    getPopupProps,
    initialFocus,
    modal,
    mounted,
    openMethod,
    ref,
    setPopupElement,
    titleElementId
  } = parameters;
  const popupRef = React.useRef(null);
  const handleRef = useForkRef(ref, popupRef, setPopupElement);
  const defaultInitialFocus = React.useCallback((interactionType) => {
    if (interactionType === "touch") {
      return popupRef;
    }
    return 0;
  }, []);
  const resolvedInitialFocus = React.useMemo(() => {
    if (initialFocus == null) {
      return defaultInitialFocus(openMethod ?? "");
    }
    if (typeof initialFocus === "function") {
      return initialFocus(openMethod ?? "");
    }
    return initialFocus;
  }, [defaultInitialFocus, initialFocus, openMethod]);
  const getRootProps = (externalProps) => mergeProps({
    "aria-labelledby": titleElementId ?? void 0,
    "aria-describedby": descriptionElementId ?? void 0,
    "aria-modal": mounted && modal ? true : void 0,
    role: "dialog",
    tabIndex: -1,
    ...getPopupProps(),
    ref: handleRef,
    hidden: !mounted
  }, externalProps);
  return {
    getRootProps,
    resolvedInitialFocus
  };
}
let DialogPopupCssVars = /* @__PURE__ */ function(DialogPopupCssVars2) {
  DialogPopupCssVars2["nestedDialogs"] = "--nested-dialogs";
  return DialogPopupCssVars2;
}({});
let DialogPopupDataAttributes = /* @__PURE__ */ function(DialogPopupDataAttributes2) {
  DialogPopupDataAttributes2["open"] = "data-open";
  DialogPopupDataAttributes2["closed"] = "data-closed";
  DialogPopupDataAttributes2["startingStyle"] = "data-starting-style";
  DialogPopupDataAttributes2["endingStyle"] = "data-ending-style";
  DialogPopupDataAttributes2["nested"] = "data-nested";
  DialogPopupDataAttributes2["hasNestedDialogs"] = "data-has-nested-dialogs";
  return DialogPopupDataAttributes2;
}({});
const customStyleHookMapping = {
  ...popupStateMapping,
  ...transitionStatusMapping,
  hasNestedDialogs(value) {
    return value ? {
      [DialogPopupDataAttributes.hasNestedDialogs]: ""
    } : null;
  }
};
const DialogPopup$1 = /* @__PURE__ */ React.forwardRef(function DialogPopup(props, forwardedRef) {
  const {
    className,
    finalFocus,
    id,
    initialFocus,
    render,
    ...other
  } = props;
  const {
    descriptionElementId,
    dismissible,
    floatingRootContext,
    getPopupProps,
    modal,
    mounted,
    nested,
    nestedOpenDialogCount,
    setOpen,
    open,
    openMethod,
    popupRef,
    setPopupElement,
    titleElementId,
    transitionStatus,
    onOpenChangeComplete,
    internalBackdropRef
  } = useDialogRootContext();
  useDialogPortalContext();
  useOpenChangeComplete({
    open,
    ref: popupRef,
    onComplete() {
      if (open) {
        onOpenChangeComplete?.(true);
      }
    }
  });
  const mergedRef = useForkRef(forwardedRef, popupRef);
  const {
    getRootProps,
    resolvedInitialFocus
  } = useDialogPopup({
    descriptionElementId,
    getPopupProps,
    id,
    initialFocus,
    modal,
    mounted,
    setOpen,
    openMethod,
    ref: mergedRef,
    setPopupElement,
    titleElementId
  });
  const state2 = {
    open,
    nested,
    transitionStatus,
    hasNestedDialogs: nestedOpenDialogCount > 0
  };
  const {
    renderElement
  } = useComponentRenderer({
    render: render ?? "div",
    className,
    state: state2,
    propGetter: getRootProps,
    extraProps: {
      ...other,
      style: {
        ...other.style,
        [DialogPopupCssVars.nestedDialogs]: nestedOpenDialogCount
      }
    },
    customStyleHookMapping
  });
  return /* @__PURE__ */ jsxs(React.Fragment, {
    children: [mounted && modal && /* @__PURE__ */ jsx(InternalBackdrop, {
      ref: internalBackdropRef
    }), /* @__PURE__ */ jsx(FloatingFocusManager, {
      context: floatingRootContext,
      disabled: !mounted,
      closeOnFocusOut: dismissible,
      initialFocus: resolvedInitialFocus,
      returnFocus: finalFocus,
      children: renderElement()
    })]
  });
});
process.env.NODE_ENV !== "production" ? DialogPopup$1.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * @ignore
   */
  children: PropTypes.node,
  /**
   * CSS class applied to the element, or a function that
   * returns a class based on the component’s state.
   */
  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  /**
   * Determines the element to focus when the dialog is closed.
   * By default, focus returns to the trigger.
   */
  finalFocus: refType,
  /**
   * @ignore
   */
  id: PropTypes.string,
  /**
   * Determines the element to focus when the dialog is opened.
   * By default, the first focusable element is focused.
   */
  initialFocus: PropTypes.oneOfType([PropTypes.func, refType]),
  /**
   * Allows you to replace the component’s HTML element
   * with a different tag, or compose it with another component.
   *
   * Accepts a `ReactElement` or a function that returns the element to render.
   */
  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
  /**
   * @ignore
   */
  style: PropTypes.object
} : void 0;
const state = {};
const DialogTitle$1 = /* @__PURE__ */ React.forwardRef(function DialogTitle(props, forwardedRef) {
  const {
    render,
    className,
    id: idProp,
    ...other
  } = props;
  const {
    setTitleElementId
  } = useDialogRootContext();
  const id = useBaseUiId(idProp);
  useEnhancedEffect(() => {
    setTitleElementId(id);
    return () => {
      setTitleElementId(void 0);
    };
  }, [id, setTitleElementId]);
  const getProps = React.useCallback((externalProps = {}) => mergeProps({
    id
  }, externalProps), [id]);
  const {
    renderElement
  } = useComponentRenderer({
    propGetter: getProps,
    render: render ?? "h2",
    className,
    state,
    ref: forwardedRef,
    extraProps: other
  });
  return renderElement();
});
process.env.NODE_ENV !== "production" ? DialogTitle$1.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * @ignore
   */
  children: PropTypes.node,
  /**
   * CSS class applied to the element, or a function that
   * returns a class based on the component’s state.
   */
  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  /**
   * @ignore
   */
  id: PropTypes.string,
  /**
   * Allows you to replace the component’s HTML element
   * with a different tag, or compose it with another component.
   *
   * Accepts a `ReactElement` or a function that returns the element to render.
   */
  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
} : void 0;
function useDialogClass(name, className) {
  return useMemo(() => {
    if (typeof className !== "function") return clsx(name, className);
    return (p) => clsx(name, className(p));
  }, [className, name]);
}
const DialogBackdrop2 = forwardRef(function DialogBackdrop22({ className, ...props }, ref) {
  const cl = useDialogClass("lng1771-dialog__backdrop", className);
  return /* @__PURE__ */ jsx(DialogBackdrop$1, { ...props, ref, className: cl });
});
const DialogPopup2 = forwardRef(function DialogPopup22({ className, ...props }, ref) {
  const cl = useDialogClass("lng1771-dialog", className);
  return /* @__PURE__ */ jsx(DialogPopup$1, { ...props, ref, className: cl });
});
const DialogTitle2 = forwardRef(function DialogTitle22({ className, ...props }, ref) {
  const cl = useDialogClass("lng1771-dialog__title", className);
  return /* @__PURE__ */ jsx(DialogTitle$1, { ...props, ref, className: cl });
});
const DialogDescription2 = forwardRef(function DialogDescription22({ className, ...props }, ref) {
  const cl = useDialogClass("lng1771-dialog__description", className);
  return /* @__PURE__ */ jsx(DialogDescription$1, { ...props, ref, className: cl });
});
const DialogClose2 = forwardRef(function DialogClose22({ className, ...props }, ref) {
  const cl = useDialogClass("lng1771-dialog__close", className);
  return /* @__PURE__ */ jsx(DialogClose$1, { ...props, ref, className: cl });
});
const Dialog = {
  Backdrop: DialogBackdrop2,
  Close: DialogClose2,
  Description: DialogDescription2,
  Container: DialogPopup2,
  Title: DialogTitle2
};
export {
  Dialog
};