@hh.ru/magritte-ui-modal-deprecated 1.0.39 → 1.0.41

package/Modal.d.ts

@@ -1,4 +1,4 @@
 import { HTMLAttributes } from 'react';
-import { ModalHeaderProps } from '@hh.ru/magritte-ui-modal-deprecated/types';
+import { ModalHeaderProps } from './types';
 /** @deprecated Компонент устарел. Используйте `Modal` из `@hh.ru/magritte-ui-modal` */
-export declare const Modal: import("react").ForwardRefExoticComponent<import("@hh.ru/magritte-ui-modal-deprecated/types").ModalBaseProps & ModalHeaderProps & Omit<HTMLAttributes<HTMLDivElement>, keyof ModalHeaderProps | "className" | "role" | keyof import("@hh.ru/magritte-ui-modal-deprecated/types").ModalBaseProps | "tabindex" | "aria-labeledby"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Modal: import("react").ForwardRefExoticComponent<import("./types").ModalBaseProps & ModalHeaderProps & Omit<HTMLAttributes<HTMLDivElement>, "aria-labeledby" | "className" | "role" | "tabindex" | keyof import("./types").ModalBaseProps | keyof ModalHeaderProps> & import("react").RefAttributes<HTMLDivElement>>;

package/Modal.js

@@ -13,7 +13,7 @@ import { useNoBubbling } from '@hh.ru/magritte-common-use-no-bubbling';
 import { isActionBarComponent } from '@hh.ru/magritte-ui-action-bar';
 import { Breakpoint, useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
 import { Layer } from '@hh.ru/magritte-ui-layer';
-import { s as styles, M as ModalContentWithHeader } from './ModalContentWithHeader-B7tpHFBW.js';
+import { s as styles, M as ModalContentWithHeader } from './ModalContentWithHeader-CxF78N1S.js';
 import { useModalOrder } from './useModalOrder.js';
 import { isProgressBarComponent } from '@hh.ru/magritte-ui-progress-bar';
 import { ThemeWrapper } from '@hh.ru/magritte-ui-theme-wrapper';
@@ -30,40 +30,75 @@ import '@hh.ru/magritte-common-dom-storage';
 
 const DEFAULT_ACTION_BAR_PADDING = 24;
 const DEFAULT_PAGE_HEADER_PADDING = 72;
-const noop = () => undefined;
+const noop = () => void 0;
 const toNumber = (value) => {
-    const result = parseInt(value, 10);
-    return Number.isInteger(result) ? result : 0;
+  const result = parseInt(value, 10);
+  return Number.isInteger(result) ? result : 0;
 };
 const CSS_CLASSES = {
-    center: {
-        appear: styles.animationEnterCenter,
-        appearActive: styles.animationEnterCenterActive,
-        enter: styles.animationEnterCenter,
-        enterActive: styles.animationEnterCenterActive,
-        exit: styles.animationExitCenter,
-        exitActive: styles.animationExitCenterActive,
-    },
-    left: {
-        appear: styles.animationEnterLeft,
-        appearActive: styles.animationEnterLeftActive,
-        enter: styles.animationEnterLeft,
-        enterActive: styles.animationEnterLeftActive,
-        exit: styles.animationExitLeft,
-        exitActive: styles.animationExitLeftActive,
-    },
-    right: {
-        appear: styles.animationEnterRight,
-        appearActive: styles.animationEnterRightActive,
-        enter: styles.animationEnterRight,
-        enterActive: styles.animationEnterRightActive,
-        exit: styles.animationExitRight,
-        exitActive: styles.animationExitRightActive,
-    },
+  center: {
+    appear: styles.animationEnterCenter,
+    appearActive: styles.animationEnterCenterActive,
+    enter: styles.animationEnterCenter,
+    enterActive: styles.animationEnterCenterActive,
+    exit: styles.animationExitCenter,
+    exitActive: styles.animationExitCenterActive
+  },
+  left: {
+    appear: styles.animationEnterLeft,
+    appearActive: styles.animationEnterLeftActive,
+    enter: styles.animationEnterLeft,
+    enterActive: styles.animationEnterLeftActive,
+    exit: styles.animationExitLeft,
+    exitActive: styles.animationExitLeftActive
+  },
+  right: {
+    appear: styles.animationEnterRight,
+    appearActive: styles.animationEnterRightActive,
+    enter: styles.animationEnterRight,
+    enterActive: styles.animationEnterRightActive,
+    exit: styles.animationExitRight,
+    exitActive: styles.animationExitRightActive
+  }
 };
 const INVISIBLE_FOR_BREAKPOINTS = [Breakpoint.XS, Breakpoint.S];
-/** @deprecated Компонент устарел. Используйте `Modal` из `@hh.ru/magritte-ui-modal` */
-const Modal = forwardRef(({ visible, size = 'medium', title, titleAlignment = 'left', titleSize = 'large', titleMaxLines, titleElement = 'h2', titleDescription, titleDescriptionMaxLines, titleStyle, titleDescriptionStyle, children, onClose = noop, headerImageUrl, headerImage, headerHeight, host, options, actions, actionLink, footer, disableVerticalPaddings = false, disableHorizontalPaddings = false, closeByClickOutside = true, onAppear, onBeforeExit, onAfterExit, position = 'center', height = position === 'center' ? 'content' : 'full-screen', minHeight, showOverlay: _showOverlay = true, pageHeaderPadding = DEFAULT_PAGE_HEADER_PADDING, returnFocusOnClose, ...rest }, ref) => {
+const Modal = forwardRef(
+  ({
+    visible,
+    size = "medium",
+    title,
+    titleAlignment = "left",
+    titleSize = "large",
+    titleMaxLines,
+    titleElement = "h2",
+    titleDescription,
+    titleDescriptionMaxLines,
+    titleStyle,
+    titleDescriptionStyle,
+    children,
+    onClose = noop,
+    headerImageUrl,
+    headerImage,
+    headerHeight,
+    host,
+    options,
+    actions,
+    actionLink,
+    footer,
+    disableVerticalPaddings = false,
+    disableHorizontalPaddings = false,
+    closeByClickOutside = true,
+    onAppear,
+    onBeforeExit,
+    onAfterExit,
+    position = "center",
+    height = position === "center" ? "content" : "full-screen",
+    minHeight,
+    showOverlay: _showOverlay = true,
+    pageHeaderPadding = DEFAULT_PAGE_HEADER_PADDING,
+    returnFocusOnClose,
+    ...rest
+  }, ref) => {
     const isServerEnv = useServerEnv();
     const enableScrollRef = useRef();
     const onAfterExitRef = useRef(onAfterExit);
@@ -71,203 +106,234 @@ const Modal = forwardRef(({ visible, size = 'medium', title, titleAlignment = 'l
     onAfterExitRef.current = onAfterExit;
     onBeforeExitRef.current = onBeforeExit;
     const [animationTimeout, setAnimationTimeout] = useState({
-        enter: 0,
-        exit: 0,
+      enter: 0,
+      exit: 0
     });
     const animationTimeoutExitRef = useRef(animationTimeout.exit);
     animationTimeoutExitRef.current = animationTimeout.exit;
     const labelId = useId();
     const additionalProps = {};
     if (title) {
-        additionalProps['aria-labelledby'] = labelId;
+      additionalProps["aria-labelledby"] = labelId;
     }
     const modalRef = useRef(null);
     const overlayRef = useRef(null);
-    const keyboardNavigationRef = useKeyboardNavigation({ enabled: visible && !isServerEnv, mode: 'loop' });
+    const keyboardNavigationRef = useKeyboardNavigation({ enabled: visible && !isServerEnv, mode: "loop" });
     const modalRefCallback = useMultipleRefs(ref, modalRef, keyboardNavigationRef);
-    const isPaddingsDisableAllowed = !title &&
-        !headerImageUrl &&
-        !headerImage &&
-        !titleDescription &&
-        !footer &&
-        !options &&
-        !actionLink &&
-        !actions;
+    const isPaddingsDisableAllowed = !title && !headerImageUrl && !headerImage && !titleDescription && !footer && !options && !actionLink && !actions;
     const isVerticalPaddingsDisabled = disableVerticalPaddings && isPaddingsDisableAllowed;
     const isHorizontalPaddingsDisabled = disableHorizontalPaddings && isPaddingsDisableAllowed;
-    const showOverlay = position === 'center' || _showOverlay;
+    const showOverlay = position === "center" || _showOverlay;
     const activatorRef = useRef(null);
     const onEntering = useCallback(() => {
-        if (returnFocusOnClose && document.activeElement instanceof HTMLElement) {
-            activatorRef.current = document.activeElement;
-        }
-        if (!enableScrollRef.current && showOverlay) {
-            enableScrollRef.current = disableScroll();
-        }
-        if (modalRef.current && !modalRef.current.contains(document.activeElement)) {
-            modalRef.current.focus();
-        }
+      if (returnFocusOnClose && document.activeElement instanceof HTMLElement) {
+        activatorRef.current = document.activeElement;
+      }
+      if (!enableScrollRef.current && showOverlay) {
+        enableScrollRef.current = disableScroll();
+      }
+      if (modalRef.current && !modalRef.current.contains(document.activeElement)) {
+        modalRef.current.focus();
+      }
     }, [returnFocusOnClose, showOverlay]);
     const onEntered = useCallback(() => {
-        onAppear?.();
+      onAppear?.();
     }, [onAppear]);
     const onExit = useCallback(() => {
-        onBeforeExitRef.current?.();
+      onBeforeExitRef.current?.();
     }, []);
     const onExited = useCallback(() => {
-        // оставляем обработку скрола еще и тут
-        // чтобы обработать историю со сменой breakpoint
-        enableScrollRef.current?.();
-        enableScrollRef.current = undefined;
-        onAfterExitRef.current?.();
-        if (activatorRef.current !== null && document.contains(activatorRef.current)) {
-            activatorRef.current?.focus();
-            activatorRef.current = null;
-        }
+      enableScrollRef.current?.();
+      enableScrollRef.current = void 0;
+      onAfterExitRef.current?.();
+      if (activatorRef.current !== null && document.contains(activatorRef.current)) {
+        activatorRef.current?.focus();
+        activatorRef.current = null;
+      }
     }, []);
     useModalOrder(!!visible && !isServerEnv, modalRef);
     const { breakpoint } = useBreakpoint();
     useEffect(() => {
-        if (!visible) {
-            return;
-        }
-        const currentBreakpointVisible = !INVISIBLE_FOR_BREAKPOINTS.includes(breakpoint);
-        if (!currentBreakpointVisible) {
-            onExit();
-            onExited();
-            return;
-        }
-        onEntering();
-        // visible не должно быть в зависимостях, т.к. этот эффект обрабатывает только изменение брейкпоинта
-        // visible обрабатывается CSSTransition
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+      if (!visible) {
+        return;
+      }
+      const currentBreakpointVisible = !INVISIBLE_FOR_BREAKPOINTS.includes(breakpoint);
+      if (!currentBreakpointVisible) {
+        onExit();
+        onExited();
+        return;
+      }
+      onEntering();
     }, [breakpoint, onEntering, onExited, onExit]);
     useEffect(() => {
-        return () => {
-            enableScrollRef.current?.(animationTimeoutExitRef.current);
-            enableScrollRef.current = undefined;
-        };
+      return () => {
+        enableScrollRef.current?.(animationTimeoutExitRef.current);
+        enableScrollRef.current = void 0;
+      };
     }, [visible]);
     useLayoutEffect(() => {
-        const animationTimeoutElement = document.createElement('div');
-        animationTimeoutElement.classList.add(styles.animationTimeout);
-        document.body.appendChild(animationTimeoutElement);
-        const style = window.getComputedStyle(animationTimeoutElement);
-        setAnimationTimeout({
-            enter: toNumber(style.getPropertyValue('--enter-animation-duration')),
-            exit: toNumber(style.getPropertyValue('--exit-animation-duration')),
-        });
-        document.body.removeChild(animationTimeoutElement);
+      const animationTimeoutElement = document.createElement("div");
+      animationTimeoutElement.classList.add(styles.animationTimeout);
+      document.body.appendChild(animationTimeoutElement);
+      const style = window.getComputedStyle(animationTimeoutElement);
+      setAnimationTimeout({
+        enter: toNumber(style.getPropertyValue("--enter-animation-duration")),
+        exit: toNumber(style.getPropertyValue("--exit-animation-duration"))
+      });
+      document.body.removeChild(animationTimeoutElement);
     }, [setAnimationTimeout]);
     useEffect(() => {
-        if (showOverlay || !pageHeaderPadding || !visible) {
-            return void 0;
-        }
-        const hasScrollTimeline = 'ScrollTimeline' in window;
-        const overlay = overlayRef.current;
-        if (!overlay) {
-            return void 0;
-        }
-        let animation;
-        const abortController = new AbortController();
-        const keyframes = { top: [`${pageHeaderPadding}px`, '0px'] };
-        if (hasScrollTimeline) {
-            const timeline = new ScrollTimeline({ source: document.documentElement, axis: 'y' });
-            // TS 7 (type-aware правила oxlint) уже знает rangeStart/rangeEnd, а TS 5 без каста не пропускает
-            // oxlint-disable-next-line typescript/no-unnecessary-type-assertion
-            animation = overlay.animate(keyframes, {
-                timeline,
-                rangeStart: '0px',
-                // calc нужен для устранения бага https://issues.chromium.org/issues/40929569
-                rangeEnd: `calc(0% + ${pageHeaderPadding}px)`,
-            });
-        }
-        else {
-            animation = overlay.animate(keyframes, { duration: 1000, fill: 'forwards' });
-            animation.pause();
-            window.addEventListener('scroll', () => {
-                animation.currentTime =
-                    (Math.min(document.documentElement.scrollTop, pageHeaderPadding) / pageHeaderPadding) *
-                        1000;
-            }, { signal: abortController.signal });
-        }
-        return () => {
-            abortController.abort();
-        };
+      if (showOverlay || !pageHeaderPadding || !visible) {
+        return void 0;
+      }
+      const hasScrollTimeline = "ScrollTimeline" in window;
+      const overlay = overlayRef.current;
+      if (!overlay) {
+        return void 0;
+      }
+      let animation;
+      const abortController = new AbortController();
+      const keyframes = { top: [`${pageHeaderPadding}px`, "0px"] };
+      if (hasScrollTimeline) {
+        const timeline = new ScrollTimeline({ source: document.documentElement, axis: "y" });
+        animation = overlay.animate(keyframes, {
+          timeline,
+          rangeStart: "0px",
+          // calc нужен для устранения бага https://issues.chromium.org/issues/40929569
+          rangeEnd: `calc(0% + ${pageHeaderPadding}px)`
+        });
+      } else {
+        animation = overlay.animate(keyframes, { duration: 1e3, fill: "forwards" });
+        animation.pause();
+        window.addEventListener(
+          "scroll",
+          () => {
+            animation.currentTime = Math.min(document.documentElement.scrollTop, pageHeaderPadding) / pageHeaderPadding * 1e3;
+          },
+          { signal: abortController.signal }
+        );
+      }
+      return () => {
+        abortController.abort();
+      };
     }, [showOverlay, pageHeaderPadding, visible]);
     const overlayEventHandlers = useNoBubbling({
-        onKeyDown: (event) => {
-            if (keyboardMatch(event.nativeEvent, keyboardKeys.Escape)) {
-                onClose(event);
-            }
-        },
-        onMouseDown: (event) => {
-            if (!closeByClickOutside || modalRef.current?.contains(event.target)) {
-                return;
-            }
-            onClose(event);
-        },
+      onKeyDown: (event) => {
+        if (keyboardMatch(event.nativeEvent, keyboardKeys.Escape)) {
+          onClose(event);
+        }
+      },
+      onMouseDown: (event) => {
+        if (!closeByClickOutside || modalRef.current?.contains(event.target)) {
+          return;
+        }
+        onClose(event);
+      }
     });
-    const overlayProps = showOverlay
-        ? overlayEventHandlers
-        : {
-            onKeyDown: (event) => {
-                if (keyboardMatch(event.nativeEvent, keyboardKeys.Escape)) {
-                    onClose(event);
-                }
-            },
-        };
+    const overlayProps = showOverlay ? overlayEventHandlers : {
+      onKeyDown: (event) => {
+        if (keyboardMatch(event.nativeEvent, keyboardKeys.Escape)) {
+          onClose(event);
+        }
+      }
+    };
     if (INVISIBLE_FOR_BREAKPOINTS.includes(breakpoint) || isServerEnv) {
-        return null;
+      return null;
     }
     const modalHeaderProps = {
-        title,
-        titleElement,
-        titleAlignment,
-        titleSize,
-        titleMaxLines,
-        titleDescription,
-        titleDescriptionMaxLines,
-        titleStyle,
-        titleDescriptionStyle,
-        headerImageUrl,
-        headerImage,
-        headerHeight,
-        options,
-        actions,
-        actionLink,
+      title,
+      titleElement,
+      titleAlignment,
+      titleSize,
+      titleMaxLines,
+      titleDescription,
+      titleDescriptionMaxLines,
+      titleStyle,
+      titleDescriptionStyle,
+      headerImageUrl,
+      headerImage,
+      headerHeight,
+      options,
+      actions,
+      actionLink
     };
     const isTreeSelectorChild = Children.toArray(children).some(isValidTreeSelectorWrapper);
-    // если есть progress bar, нужно скрыть divider (но showProgress - это слот под reactNode)
-    const isActionBarHaveProgressBar = !!footer &&
-        isActionBarComponent(footer) &&
-        Boolean(footer.props.showProgress) &&
-        isProgressBarComponent(footer.props.showProgress);
-    return createPortal(jsx(CSSTransition, { appear: true, in: visible && !isServerEnv, nodeRef: overlayRef, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExited: onExited, classNames: CSS_CLASSES[position], timeout: animationTimeout, unmountOnExit: true, children: jsx(ThemeWrapper, { children: (themeClass) => (jsx(Layer, { layer: "modal", children: jsx("div", { ...overlayProps, ref: overlayRef, className: classnames(styles.modalOverlay, themeClass, {
-                        [styles.modalOverlayWithBackground]: showOverlay,
-                        [styles.modalOverlayLeft]: position === 'left',
-                        [styles.modalOverlayRight]: position === 'right',
-                    }), "data-qa": "modal-overlay", children: jsx(CloseByClickOutsideContext.Provider, { value: overlayRef, children: jsxs("div", { ...rest, ...additionalProps, "aria-modal": visible && showOverlay && !isServerEnv, role: "dialog", className: classnames(styles.modal, {
-                                [styles.sizeSmall]: size === 'small',
-                                [styles.sizeMedium]: size === 'medium',
-                                [styles.modalFullHeight]: height === 'full-screen' || isTreeSelectorChild,
-                                [styles.noVerticalPaddings]: isVerticalPaddingsDisabled,
-                                [styles.noHorizontalPaddings]: isHorizontalPaddingsDisabled,
-                                [styles.modalWithBorder]: !showOverlay,
-                            }), ref: modalRefCallback, tabIndex: -1, style: {
-                                height: typeof height === 'number' ? `${height}px` : undefined,
-                                minHeight: typeof minHeight === 'number'
-                                    ? `min(calc(100vh - 12px * 2), ${minHeight}px)`
-                                    : undefined,
-                            }, children: [jsx(ModalContentWithHeader, { ...modalHeaderProps, labelId: labelId, isTreeSelectorChild: isTreeSelectorChild, height: height, showDivider: !isActionBarHaveProgressBar, children: children }), !!footer && (jsx("div", { className: styles.modalFooter, "data-qa": "modal-footer", children: isActionBarComponent(footer)
-                                        ? cloneElement(footer, {
-                                            type: footer.props.type || 'auto',
-                                            padding: footer.props.padding || DEFAULT_ACTION_BAR_PADDING,
-                                            showDivider: false,
-                                        })
-                                        : footer }))] }) }) }) })) }) }), host || document.body);
-});
-Modal.displayName = 'Modal';
+    const isActionBarHaveProgressBar = !!footer && isActionBarComponent(footer) && Boolean(footer.props.showProgress) && isProgressBarComponent(footer.props.showProgress);
+    return createPortal(
+      /* @__PURE__ */ jsx(
+        CSSTransition,
+        {
+          appear: true,
+          in: visible && !isServerEnv,
+          nodeRef: overlayRef,
+          onEntering,
+          onEntered,
+          onExit,
+          onExited,
+          classNames: CSS_CLASSES[position],
+          timeout: animationTimeout,
+          unmountOnExit: true,
+          children: /* @__PURE__ */ jsx(ThemeWrapper, { children: (themeClass) => /* @__PURE__ */ jsx(Layer, { layer: "modal", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              ...overlayProps,
+              ref: overlayRef,
+              className: classnames(styles.modalOverlay, themeClass, {
+                [styles.modalOverlayWithBackground]: showOverlay,
+                [styles.modalOverlayLeft]: position === "left",
+                [styles.modalOverlayRight]: position === "right"
+              }),
+              "data-qa": "modal-overlay",
+              children: /* @__PURE__ */ jsx(CloseByClickOutsideContext.Provider, { value: overlayRef, children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  ...rest,
+                  ...additionalProps,
+                  "aria-modal": visible && showOverlay && !isServerEnv,
+                  role: "dialog",
+                  className: classnames(styles.modal, {
+                    [styles.sizeSmall]: size === "small",
+                    [styles.sizeMedium]: size === "medium",
+                    [styles.modalFullHeight]: height === "full-screen" || isTreeSelectorChild,
+                    [styles.noVerticalPaddings]: isVerticalPaddingsDisabled,
+                    [styles.noHorizontalPaddings]: isHorizontalPaddingsDisabled,
+                    [styles.modalWithBorder]: !showOverlay
+                  }),
+                  ref: modalRefCallback,
+                  tabIndex: -1,
+                  style: {
+                    height: typeof height === "number" ? `${height}px` : void 0,
+                    minHeight: typeof minHeight === "number" ? `min(calc(100vh - 12px * 2), ${minHeight}px)` : void 0
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      ModalContentWithHeader,
+                      {
+                        ...modalHeaderProps,
+                        labelId,
+                        isTreeSelectorChild,
+                        height,
+                        showDivider: !isActionBarHaveProgressBar,
+                        children
+                      }
+                    ),
+                    !!footer && /* @__PURE__ */ jsx("div", { className: styles.modalFooter, "data-qa": "modal-footer", children: isActionBarComponent(footer) ? cloneElement(footer, {
+                      type: footer.props.type || "auto",
+                      padding: footer.props.padding || DEFAULT_ACTION_BAR_PADDING,
+                      showDivider: false
+                    }) : footer })
+                  ]
+                }
+              ) })
+            }
+          ) }) })
+        }
+      ),
+      host || document.body
+    );
+  }
+);
+Modal.displayName = "Modal";
 
 export { Modal };
 //# sourceMappingURL=Modal.js.map