@hh.ru/magritte-ui-modal 3.0.24 → 3.0.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/Modal.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { HTMLAttributes } from 'react';
2
- import { ModalProps } from './types';
2
+ import { ModalProps } from '@hh.ru/magritte-ui-modal/types';
3
3
  export declare const Modal: import("react").ForwardRefExoticComponent<(ModalProps & Omit<HTMLAttributes<HTMLDivElement>, keyof {
4
4
  headerImage: string;
5
5
  headerHeight?: number | undefined;
@@ -17,4 +17,4 @@ export declare const Modal: import("react").ForwardRefExoticComponent<(ModalProp
17
17
  options?: import("react").ReactNode;
18
18
  actions?: import("react").ReactNode | import("react").ReactNode[];
19
19
  actionLink?: import("react").ReactNode;
20
- } | keyof import("./types").ModalBaseProps | keyof import("@hh.ru/magritte-ui-modal/types").ModalFooterProps | "role" | "tabindex" | "aria-labeledby">) & import("react").RefAttributes<HTMLDivElement>>;
20
+ } | keyof import("@hh.ru/magritte-ui-modal/types").ModalBaseProps | keyof import("@hh.ru/magritte-ui-modal/types").ModalFooterProps | "role" | "tabindex" | "aria-labeledby">) & import("react").RefAttributes<HTMLDivElement>>;
package/Modal.js CHANGED
@@ -14,7 +14,7 @@ import { Layer } from '@hh.ru/magritte-ui-layer';
14
14
  import { ModalContentWithHeader } from './ModalContentWithHeader.js';
15
15
  import { ModalFooter } from './ModalFooter.js';
16
16
  import { useModalOrder } from './useModalOrder.js';
17
- import { s as styles } from './modal-606cd392.js';
17
+ import { s as styles } from './modal-BTnHYqHj.js';
18
18
  import '@hh.ru/magritte-common-func-utils';
19
19
  import '@hh.ru/magritte-ui-divider';
20
20
  import './ModalHeader.js';
@@ -105,7 +105,7 @@ const Modal = forwardRef(({ visible, size = 'medium', title, titleAlignment = 'l
105
105
  actions,
106
106
  actionLink,
107
107
  };
108
- return createPortal(jsx(CSSTransition, { in: visible && !isServerEnv, nodeRef: overlayRef, onEntering: onEntering, onExited: onExited, classNames: {
108
+ return createPortal(jsx(CSSTransition, { appear: true, in: visible && !isServerEnv, nodeRef: overlayRef, onEntering: onEntering, onExited: onExited, classNames: {
109
109
  enter: styles.modalAnimationEnter,
110
110
  enterActive: styles.modalAnimationEnterActive,
111
111
  exit: styles.modalAnimationExit,
package/Modal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.js","sources":["../src/Modal.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, useLayoutEffect, useRef, useState, useCallback, useId, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { CSSTransition } from 'react-transition-group';\nimport classnames from 'classnames';\n\nimport { useServerEnv } from '@hh.ru/magritte-common-is-server-env';\nimport { keyboardMatch, keyboardKeys } from '@hh.ru/magritte-common-keyboard';\nimport { disableScroll } from '@hh.ru/magritte-common-modal-helper';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { InternalLayerName } from '@hh.ru/magritte-internal-layer-name';\nimport { useBreakpoint, Breakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { Layer } from '@hh.ru/magritte-ui-layer';\nimport { ModalContentWithHeader } from '@hh.ru/magritte-ui-modal/ModalContentWithHeader';\nimport { ModalFooter } from '@hh.ru/magritte-ui-modal/ModalFooter';\nimport { ModalHeaderProps, ModalProps } from '@hh.ru/magritte-ui-modal/types';\nimport { useModalOrder } from '@hh.ru/magritte-ui-modal/useModalOrder';\n\nimport styles from './modal.less';\n\nconst noop = () => undefined;\n\nconst toNumber = (value: string) => {\n const result = parseInt(value, 10);\n return Number.isInteger(result) ? result : 0;\n};\n\nconst INVISIBLE_FOR_BREAKPOINTS = [Breakpoint.XS, Breakpoint.S];\n\nexport const Modal = forwardRef<\n HTMLDivElement,\n ModalProps &\n Omit<HTMLAttributes<HTMLDivElement>, keyof ModalProps | 'role' | 'tabindex' | 'className' | 'aria-labeledby'>\n>(\n (\n {\n visible,\n size = 'medium',\n title,\n titleAlignment = 'left',\n titleSize = 'large',\n titleMaxLines,\n titleElement = 'h2',\n titleDescription,\n titleDescriptionMaxLines,\n titleStyle,\n titleDescriptionStyle,\n children,\n onClose = noop,\n leftButtons,\n rightButtons,\n headerImage,\n headerHeight,\n host,\n options,\n actions,\n actionLink,\n ...rest\n },\n ref\n ) => {\n const isServerEnv = useServerEnv();\n const enableScrollRef = useRef<() => void>();\n const [animationTimeout, setAnimationTimeout] = useState<{ enter: number; exit: number }>({\n enter: 0,\n exit: 0,\n });\n const labelId = useId();\n const additionalProps: { 'aria-labelledby'?: string } = {};\n if (title) {\n additionalProps['aria-labelledby'] = labelId;\n }\n const modalRef = useRef<HTMLDivElement>(null);\n const overlayRef = useRef<HTMLDivElement>(null);\n const modalRefCallback = useMultipleRefs(ref, modalRef);\n\n const onEntering = useCallback(() => {\n if (!enableScrollRef.current) {\n enableScrollRef.current = disableScroll();\n }\n if (modalRef.current && !modalRef.current.contains(document.activeElement)) {\n modalRef.current.focus();\n }\n }, []);\n const onExited = useCallback(() => {\n enableScrollRef.current?.();\n enableScrollRef.current = undefined;\n }, []);\n\n const [position, count] = useModalOrder(!!visible && !isServerEnv, modalRef);\n const isOverlayHidden = (position === 0 && count > 0) || (count > 1 && position > 1);\n\n const { breakpoint } = useBreakpoint();\n useEffect(() => {\n if (!visible) {\n return;\n }\n\n const currentBreakpointVisible = !INVISIBLE_FOR_BREAKPOINTS.includes(breakpoint);\n if (!currentBreakpointVisible) {\n onExited();\n return;\n }\n\n onEntering();\n // visible не должно быть в зависимостях, т.к. этот эффект обрабатывает только изменение брейкпоинта\n // visible обрабатывается CSSTransition\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [breakpoint, onEntering, onExited]);\n\n useEffect(\n () => () => {\n enableScrollRef.current?.();\n enableScrollRef.current = undefined;\n },\n [visible]\n );\n\n useLayoutEffect(() => {\n const animationTimeoutElement = document.createElement('div');\n animationTimeoutElement.classList.add(styles.animationTimeout);\n document.body.appendChild(animationTimeoutElement);\n const style = window.getComputedStyle(animationTimeoutElement);\n setAnimationTimeout({\n enter: toNumber(style.getPropertyValue('--enter-animation-duration')),\n exit: toNumber(style.getPropertyValue('--exit-animation-duration')),\n });\n document.body.removeChild(animationTimeoutElement);\n }, [setAnimationTimeout]);\n\n if (INVISIBLE_FOR_BREAKPOINTS.includes(breakpoint) || isServerEnv) {\n return null;\n }\n\n const modalHeaderProps = {\n title,\n titleElement,\n titleAlignment,\n titleSize,\n titleMaxLines,\n titleDescription,\n titleDescriptionMaxLines,\n titleStyle,\n titleDescriptionStyle,\n headerImage,\n headerHeight,\n options,\n actions,\n actionLink,\n } as ModalHeaderProps;\n\n return createPortal(\n <CSSTransition\n in={visible && !isServerEnv}\n nodeRef={overlayRef}\n onEntering={onEntering}\n onExited={onExited}\n classNames={{\n enter: styles.modalAnimationEnter,\n enterActive: styles.modalAnimationEnterActive,\n exit: styles.modalAnimationExit,\n exitActive: styles.modalAnimationExitActive,\n }}\n timeout={animationTimeout}\n unmountOnExit\n >\n <Layer layer={InternalLayerName.Modal}>\n <div\n ref={overlayRef}\n className={styles.modalOverlay}\n style={isOverlayHidden ? { backgroundColor: 'transparent' } : {}}\n onKeyDown={(event) => {\n if (keyboardMatch(event.nativeEvent, keyboardKeys.Escape)) {\n onClose();\n }\n }}\n data-qa=\"modal-overlay\"\n >\n <div\n {...rest}\n {...additionalProps}\n role=\"dialog\"\n className={classnames(styles.modal, { [styles.modalSmall]: size === 'small' })}\n ref={modalRefCallback}\n tabIndex={0}\n >\n <ModalContentWithHeader {...modalHeaderProps} labelId={labelId}>\n {children}\n </ModalContentWithHeader>\n <ModalFooter leftButtons={leftButtons} rightButtons={rightButtons} />\n </div>\n </div>\n </Layer>\n </CSSTransition>,\n host || document.body\n );\n }\n);\n\nModal.displayName = 'Modal';\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
1
+ {"version":3,"file":"Modal.js","sources":["../src/Modal.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, useLayoutEffect, useRef, useState, useCallback, useId, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { CSSTransition } from 'react-transition-group';\nimport classnames from 'classnames';\n\nimport { useServerEnv } from '@hh.ru/magritte-common-is-server-env';\nimport { keyboardMatch, keyboardKeys } from '@hh.ru/magritte-common-keyboard';\nimport { disableScroll } from '@hh.ru/magritte-common-modal-helper';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { InternalLayerName } from '@hh.ru/magritte-internal-layer-name';\nimport { useBreakpoint, Breakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { Layer } from '@hh.ru/magritte-ui-layer';\nimport { ModalContentWithHeader } from '@hh.ru/magritte-ui-modal/ModalContentWithHeader';\nimport { ModalFooter } from '@hh.ru/magritte-ui-modal/ModalFooter';\nimport { ModalHeaderProps, ModalProps } from '@hh.ru/magritte-ui-modal/types';\nimport { useModalOrder } from '@hh.ru/magritte-ui-modal/useModalOrder';\n\nimport styles from './modal.less';\n\nconst noop = () => undefined;\n\nconst toNumber = (value: string) => {\n const result = parseInt(value, 10);\n return Number.isInteger(result) ? result : 0;\n};\n\nconst INVISIBLE_FOR_BREAKPOINTS = [Breakpoint.XS, Breakpoint.S];\n\nexport const Modal = forwardRef<\n HTMLDivElement,\n ModalProps &\n Omit<HTMLAttributes<HTMLDivElement>, keyof ModalProps | 'role' | 'tabindex' | 'className' | 'aria-labeledby'>\n>(\n (\n {\n visible,\n size = 'medium',\n title,\n titleAlignment = 'left',\n titleSize = 'large',\n titleMaxLines,\n titleElement = 'h2',\n titleDescription,\n titleDescriptionMaxLines,\n titleStyle,\n titleDescriptionStyle,\n children,\n onClose = noop,\n leftButtons,\n rightButtons,\n headerImage,\n headerHeight,\n host,\n options,\n actions,\n actionLink,\n ...rest\n },\n ref\n ) => {\n const isServerEnv = useServerEnv();\n const enableScrollRef = useRef<() => void>();\n const [animationTimeout, setAnimationTimeout] = useState<{ enter: number; exit: number }>({\n enter: 0,\n exit: 0,\n });\n const labelId = useId();\n const additionalProps: { 'aria-labelledby'?: string } = {};\n if (title) {\n additionalProps['aria-labelledby'] = labelId;\n }\n const modalRef = useRef<HTMLDivElement>(null);\n const overlayRef = useRef<HTMLDivElement>(null);\n const modalRefCallback = useMultipleRefs(ref, modalRef);\n\n const onEntering = useCallback(() => {\n if (!enableScrollRef.current) {\n enableScrollRef.current = disableScroll();\n }\n if (modalRef.current && !modalRef.current.contains(document.activeElement)) {\n modalRef.current.focus();\n }\n }, []);\n const onExited = useCallback(() => {\n enableScrollRef.current?.();\n enableScrollRef.current = undefined;\n }, []);\n\n const [position, count] = useModalOrder(!!visible && !isServerEnv, modalRef);\n const isOverlayHidden = (position === 0 && count > 0) || (count > 1 && position > 1);\n\n const { breakpoint } = useBreakpoint();\n useEffect(() => {\n if (!visible) {\n return;\n }\n\n const currentBreakpointVisible = !INVISIBLE_FOR_BREAKPOINTS.includes(breakpoint);\n if (!currentBreakpointVisible) {\n onExited();\n return;\n }\n\n onEntering();\n // visible не должно быть в зависимостях, т.к. этот эффект обрабатывает только изменение брейкпоинта\n // visible обрабатывается CSSTransition\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [breakpoint, onEntering, onExited]);\n\n useEffect(\n () => () => {\n enableScrollRef.current?.();\n enableScrollRef.current = undefined;\n },\n [visible]\n );\n\n useLayoutEffect(() => {\n const animationTimeoutElement = document.createElement('div');\n animationTimeoutElement.classList.add(styles.animationTimeout);\n document.body.appendChild(animationTimeoutElement);\n const style = window.getComputedStyle(animationTimeoutElement);\n setAnimationTimeout({\n enter: toNumber(style.getPropertyValue('--enter-animation-duration')),\n exit: toNumber(style.getPropertyValue('--exit-animation-duration')),\n });\n document.body.removeChild(animationTimeoutElement);\n }, [setAnimationTimeout]);\n\n if (INVISIBLE_FOR_BREAKPOINTS.includes(breakpoint) || isServerEnv) {\n return null;\n }\n\n const modalHeaderProps = {\n title,\n titleElement,\n titleAlignment,\n titleSize,\n titleMaxLines,\n titleDescription,\n titleDescriptionMaxLines,\n titleStyle,\n titleDescriptionStyle,\n headerImage,\n headerHeight,\n options,\n actions,\n actionLink,\n } as ModalHeaderProps;\n\n return createPortal(\n <CSSTransition\n appear\n in={visible && !isServerEnv}\n nodeRef={overlayRef}\n onEntering={onEntering}\n onExited={onExited}\n classNames={{\n enter: styles.modalAnimationEnter,\n enterActive: styles.modalAnimationEnterActive,\n exit: styles.modalAnimationExit,\n exitActive: styles.modalAnimationExitActive,\n }}\n timeout={animationTimeout}\n unmountOnExit\n >\n <Layer layer={InternalLayerName.Modal}>\n <div\n ref={overlayRef}\n className={styles.modalOverlay}\n style={isOverlayHidden ? { backgroundColor: 'transparent' } : {}}\n onKeyDown={(event) => {\n if (keyboardMatch(event.nativeEvent, keyboardKeys.Escape)) {\n onClose();\n }\n }}\n data-qa=\"modal-overlay\"\n >\n <div\n {...rest}\n {...additionalProps}\n role=\"dialog\"\n className={classnames(styles.modal, { [styles.modalSmall]: size === 'small' })}\n ref={modalRefCallback}\n tabIndex={0}\n >\n <ModalContentWithHeader {...modalHeaderProps} labelId={labelId}>\n {children}\n </ModalContentWithHeader>\n <ModalFooter leftButtons={leftButtons} rightButtons={rightButtons} />\n </div>\n </div>\n </Layer>\n </CSSTransition>,\n host || document.body\n );\n }\n);\n\nModal.displayName = 'Modal';\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
@@ -1,5 +1,5 @@
1
1
  import { FC, PropsWithChildren } from 'react';
2
- import { ModalHeaderProps } from './types';
2
+ import { ModalHeaderProps } from '@hh.ru/magritte-ui-modal/types';
3
3
  export declare const ModalContentWithHeader: FC<PropsWithChildren<ModalHeaderProps & {
4
4
  labelId: string;
5
5
  }>>;
@@ -5,7 +5,7 @@ import classnames from 'classnames';
5
5
  import { requestAnimation } from '@hh.ru/magritte-common-func-utils';
6
6
  import { Divider } from '@hh.ru/magritte-ui-divider';
7
7
  import { ModalHeader } from './ModalHeader.js';
8
- import { s as styles } from './modal-606cd392.js';
8
+ import { s as styles } from './modal-BTnHYqHj.js';
9
9
  import '@hh.ru/magritte-ui-title';
10
10
 
11
11
  const checkIsScrolledToBottom = (el) => {
package/ModalFooter.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import { FC } from 'react';
2
- import { ModalFooterProps } from './types';
2
+ import { ModalFooterProps } from '@hh.ru/magritte-ui-modal/types';
3
3
  export declare const ModalFooter: FC<ModalFooterProps>;
package/ModalFooter.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
  import { jsxs, jsx } from 'react/jsx-runtime';
3
- import { s as styles } from './modal-606cd392.js';
3
+ import { s as styles } from './modal-BTnHYqHj.js';
4
4
 
5
5
  const ModalFooter = ({ leftButtons, rightButtons }) => {
6
6
  if (!leftButtons && !rightButtons) {
package/ModalHeader.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { FC } from 'react';
2
- import { ModalHeaderProps } from './types';
2
+ import { ModalHeaderProps } from '@hh.ru/magritte-ui-modal/types';
3
3
  export declare const ModalHeader: FC<ModalHeaderProps & {
4
4
  labelId: string;
5
5
  }>;
package/ModalHeader.js CHANGED
@@ -3,7 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
3
3
  import classnames from 'classnames';
4
4
  import { Title } from '@hh.ru/magritte-ui-title';
5
5
 
6
- var styles = {"wrapper":"magritte-wrapper___zH8vB_3-0-24","content":"magritte-content___o6ktq_3-0-24","options":"magritte-options___qfErQ_3-0-24","content-with-image":"magritte-content-with-image___YarBO_3-0-24","contentWithImage":"magritte-content-with-image___YarBO_3-0-24","actions":"magritte-actions___nQILV_3-0-24","actions-with-link":"magritte-actions-with-link___hnDux_3-0-24","actionsWithLink":"magritte-actions-with-link___hnDux_3-0-24","actions-single":"magritte-actions-single___usfKu_3-0-24","actionsSingle":"magritte-actions-single___usfKu_3-0-24"};
6
+ var styles = {"wrapper":"magritte-wrapper___zH8vB_3-0-26","content":"magritte-content___o6ktq_3-0-26","options":"magritte-options___qfErQ_3-0-26","content-with-image":"magritte-content-with-image___YarBO_3-0-26","contentWithImage":"magritte-content-with-image___YarBO_3-0-26","actions":"magritte-actions___nQILV_3-0-26","actions-with-link":"magritte-actions-with-link___hnDux_3-0-26","actionsWithLink":"magritte-actions-with-link___hnDux_3-0-26","actions-single":"magritte-actions-single___usfKu_3-0-26","actionsSingle":"magritte-actions-single___usfKu_3-0-26"};
7
7
 
8
8
  const ModalHeader = ({ title, headerImage, headerHeight = 0, titleAlignment, titleElement, titleMaxLines, titleSize, titleDescription, titleDescriptionMaxLines, titleStyle, titleDescriptionStyle, options, actions: _actions, actionLink, labelId, }) => {
9
9
  const actions = Array.isArray(_actions) ? _actions.slice(0, 5) : _actions;
package/index.css CHANGED
@@ -1,79 +1,79 @@
1
1
  :root{
2
- --magritte-color-component-modal-background-action-v18-2-0:#20262b99;
3
- --magritte-gradient-component-modal-background-fade-v18-2-0:linear-gradient(180deg, #00000000 0%, #0000007a 100%);
2
+ --magritte-color-component-modal-background-action-v18-2-1:#20262b99;
3
+ --magritte-gradient-component-modal-background-fade-v18-2-1:linear-gradient(180deg, #00000000 0%, #0000007a 100%);
4
4
  }
5
5
  :root{
6
- --magritte-static-border-radius-300-v18-2-0:12px;
7
- --magritte-static-border-radius-600-v18-2-0:24px;
6
+ --magritte-static-border-radius-300-v18-2-1:12px;
7
+ --magritte-static-border-radius-600-v18-2-1:24px;
8
8
  }
9
9
  .magritte-night-theme{
10
- --magritte-color-component-modal-background-action-v18-2-0:#20262b99;
11
- --magritte-gradient-component-modal-background-fade-v18-2-0:linear-gradient(180deg, #00000000 0%, #0000007a 100%);
10
+ --magritte-color-component-modal-background-action-v18-2-1:#20262b99;
11
+ --magritte-gradient-component-modal-background-fade-v18-2-1:linear-gradient(180deg, #00000000 0%, #0000007a 100%);
12
12
  }
13
- .magritte-wrapper___zH8vB_3-0-24{
13
+ .magritte-wrapper___zH8vB_3-0-26{
14
14
  margin-bottom:32px;
15
15
  }
16
- .magritte-content___o6ktq_3-0-24{
16
+ .magritte-content___o6ktq_3-0-26{
17
17
  display:flex;
18
18
  align-items:flex-start;
19
19
  }
20
- .magritte-content___o6ktq_3-0-24 + .magritte-options___qfErQ_3-0-24{
20
+ .magritte-content___o6ktq_3-0-26 + .magritte-options___qfErQ_3-0-26{
21
21
  margin-top:24px;
22
22
  }
23
- .magritte-content___o6ktq_3-0-24.magritte-content-with-image___YarBO_3-0-24 + .magritte-options___qfErQ_3-0-24{
23
+ .magritte-content___o6ktq_3-0-26.magritte-content-with-image___YarBO_3-0-26 + .magritte-options___qfErQ_3-0-26{
24
24
  margin-top:32px;
25
25
  }
26
- .magritte-actions___nQILV_3-0-24{
26
+ .magritte-actions___nQILV_3-0-26{
27
27
  display:flex;
28
28
  padding-left:16px;
29
29
  gap:4px;
30
30
  margin-left:auto;
31
31
  --magritte-ui-link-padding-override:9px;
32
32
  }
33
- .magritte-actions-with-link___hnDux_3-0-24{
33
+ .magritte-actions-with-link___hnDux_3-0-26{
34
34
  padding:0 8px 0 28px;
35
35
  }
36
- .magritte-content-with-image___YarBO_3-0-24{
36
+ .magritte-content-with-image___YarBO_3-0-26{
37
37
  flex-direction:column;
38
38
  justify-content:flex-end;
39
39
  margin:-20px -20px 0;
40
40
  background-size:cover;
41
- --modal-header-gradient:var(--magritte-gradient-component-modal-background-fade-v18-2-0);
42
- border-radius:var(--magritte-static-border-radius-600-v18-2-0);
41
+ --modal-header-gradient:var(--magritte-gradient-component-modal-background-fade-v18-2-1);
42
+ border-radius:var(--magritte-static-border-radius-600-v18-2-1);
43
43
  padding:12px 24px 24px;
44
44
  box-sizing:border-box;
45
45
  }
46
- .magritte-content-with-image___YarBO_3-0-24 .magritte-actions___nQILV_3-0-24{
46
+ .magritte-content-with-image___YarBO_3-0-26 .magritte-actions___nQILV_3-0-26{
47
47
  order:-1;
48
48
  gap:0;
49
49
  margin-right:-12px;
50
50
  margin-bottom:auto;
51
51
  }
52
- .magritte-content-with-image___YarBO_3-0-24 .magritte-actions___nQILV_3-0-24:not(.magritte-actions-with-link___hnDux_3-0-24){
52
+ .magritte-content-with-image___YarBO_3-0-26 .magritte-actions___nQILV_3-0-26:not(.magritte-actions-with-link___hnDux_3-0-26){
53
53
  padding:0 4px;
54
- background-color:var(--magritte-color-component-modal-background-action-v18-2-0);
55
- border-radius:var(--magritte-static-border-radius-300-v18-2-0);
54
+ background-color:var(--magritte-color-component-modal-background-action-v18-2-1);
55
+ border-radius:var(--magritte-static-border-radius-300-v18-2-1);
56
56
  }
57
- .magritte-content-with-image___YarBO_3-0-24 .magritte-actions___nQILV_3-0-24.magritte-actions-single___usfKu_3-0-24:not(.magritte-actions-with-link___hnDux_3-0-24){
57
+ .magritte-content-with-image___YarBO_3-0-26 .magritte-actions___nQILV_3-0-26.magritte-actions-single___usfKu_3-0-26:not(.magritte-actions-with-link___hnDux_3-0-26){
58
58
  padding:0;
59
59
  }
60
60
 
61
61
  :root{
62
- --magritte-color-background-overlay-v18-2-0:#20262b99;
63
- --magritte-color-component-modal-background-content-v18-2-0:#ffffff;
62
+ --magritte-color-background-overlay-v18-2-1:#20262b99;
63
+ --magritte-color-component-modal-background-content-v18-2-1:#ffffff;
64
64
  }
65
65
  :root{
66
- --magritte-semantic-animation-ease-in-out-200-timing-function-v18-2-0:cubic-bezier(0.25, 0.1, 0.25, 1);
67
- --magritte-semantic-animation-ease-in-out-200-duration-v18-2-0:200ms;
68
- --magritte-semantic-animation-ease-in-out-300-timing-function-v18-2-0:cubic-bezier(0.25, 0.1, 0.25, 1);
69
- --magritte-semantic-animation-ease-in-out-300-duration-v18-2-0:300ms;
70
- --magritte-static-border-radius-800-v18-2-0:32px;
66
+ --magritte-semantic-animation-ease-in-out-200-timing-function-v18-2-1:cubic-bezier(0.25, 0.1, 0.25, 1);
67
+ --magritte-semantic-animation-ease-in-out-200-duration-v18-2-1:200ms;
68
+ --magritte-semantic-animation-ease-in-out-300-timing-function-v18-2-1:cubic-bezier(0.25, 0.1, 0.25, 1);
69
+ --magritte-semantic-animation-ease-in-out-300-duration-v18-2-1:300ms;
70
+ --magritte-static-border-radius-800-v18-2-1:32px;
71
71
  }
72
72
  .magritte-night-theme{
73
- --magritte-color-background-overlay-v18-2-0:#20262b99;
74
- --magritte-color-component-modal-background-content-v18-2-0:#1B1B1B;
73
+ --magritte-color-background-overlay-v18-2-1:#20262b99;
74
+ --magritte-color-component-modal-background-content-v18-2-1:#1B1B1B;
75
75
  }
76
- .magritte-modal-overlay___lK22l_3-0-24{
76
+ .magritte-modal-overlay___lK22l_3-0-26{
77
77
  position:fixed;
78
78
  top:0;
79
79
  right:0;
@@ -82,11 +82,11 @@
82
82
  display:flex;
83
83
  align-items:center;
84
84
  justify-content:center;
85
- background-color:var(--magritte-color-background-overlay-v18-2-0);
85
+ background-color:var(--magritte-color-background-overlay-v18-2-1);
86
86
  z-index:1;
87
87
  user-select:text;
88
88
  }
89
- .magritte-modal___RAW6S_3-0-24{
89
+ .magritte-modal___RAW6S_3-0-26{
90
90
  display:flex;
91
91
  box-sizing:border-box;
92
92
  width:720px;
@@ -95,91 +95,91 @@
95
95
  flex-direction:column;
96
96
  max-height:calc(100vh - 96px * 2);
97
97
  position:relative;
98
- background-color:var(--magritte-color-component-modal-background-content-v18-2-0);
99
- border-radius:var(--magritte-static-border-radius-800-v18-2-0);
98
+ background-color:var(--magritte-color-component-modal-background-content-v18-2-1);
99
+ border-radius:var(--magritte-static-border-radius-800-v18-2-1);
100
100
  overflow:hidden;
101
101
  }
102
- .magritte-modal-small___MMQT4_3-0-24{
102
+ .magritte-modal-small___MMQT4_3-0-26{
103
103
  width:460px;
104
104
  }
105
- .magritte-modal-content___46QFS_3-0-24{
105
+ .magritte-modal-content___46QFS_3-0-26{
106
106
  flex:1 1;
107
107
  overflow-y:auto;
108
108
  padding:0 5px;
109
109
  margin:0 -5px;
110
110
  overscroll-behavior:none;
111
111
  }
112
- .magritte-modal-content__with-divider___an3I5_3-0-24{
112
+ .magritte-modal-content__with-divider___an3I5_3-0-26{
113
113
  margin-top:-16px;
114
114
  }
115
- .magritte-modal-content-wrapper___23XFT_3-0-24{
115
+ .magritte-modal-content-wrapper___23XFT_3-0-26{
116
116
  display:flex;
117
117
  flex-direction:column;
118
118
  min-height:0;
119
119
  flex:1 1;
120
120
  }
121
- .magritte-modal-content-wrapper__one-line___tYg8d_3-0-24{
121
+ .magritte-modal-content-wrapper__one-line___tYg8d_3-0-26{
122
122
  flex-direction:row-reverse;
123
123
  }
124
- .magritte-divider-container___qP3VK_3-0-24{
124
+ .magritte-divider-container___qP3VK_3-0-26{
125
125
  margin:0 -32px;
126
126
  }
127
- .magritte-modal-footer___8xPqQ_3-0-24{
127
+ .magritte-modal-footer___8xPqQ_3-0-26{
128
128
  flex:0 0;
129
129
  padding-top:32px;
130
130
  display:flex;
131
131
  justify-content:space-between;
132
132
  }
133
- .magritte-modal-buttons-container___1O1Nr_3-0-24{
133
+ .magritte-modal-buttons-container___1O1Nr_3-0-26{
134
134
  display:flex;
135
135
  gap:12px;
136
136
  }
137
- .magritte-animation-timeout___w-j7K_3-0-24,
138
- .magritte-modal-animation-enter-active___E8KLu_3-0-24,
139
- .magritte-modal-animation-exit-active___ERjKa_3-0-24{
137
+ .magritte-animation-timeout___w-j7K_3-0-26,
138
+ .magritte-modal-animation-enter-active___E8KLu_3-0-26,
139
+ .magritte-modal-animation-exit-active___ERjKa_3-0-26{
140
140
  --enter-animation-duration:0;
141
141
  --exit-animation-duration:0;
142
142
  }
143
143
  @media (prefers-reduced-motion: no-preference){
144
- .magritte-animation-timeout___w-j7K_3-0-24,
145
- .magritte-modal-animation-enter-active___E8KLu_3-0-24,
146
- .magritte-modal-animation-exit-active___ERjKa_3-0-24{
147
- --enter-animation-duration:var(--magritte-semantic-animation-ease-in-out-300-duration-v18-2-0);
148
- --exit-animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v18-2-0);
144
+ .magritte-animation-timeout___w-j7K_3-0-26,
145
+ .magritte-modal-animation-enter-active___E8KLu_3-0-26,
146
+ .magritte-modal-animation-exit-active___ERjKa_3-0-26{
147
+ --enter-animation-duration:var(--magritte-semantic-animation-ease-in-out-300-duration-v18-2-1);
148
+ --exit-animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v18-2-1);
149
149
  }
150
150
  }
151
- .magritte-modal-animation-enter___kruLO_3-0-24.magritte-modal-overlay___lK22l_3-0-24{
151
+ .magritte-modal-animation-enter___kruLO_3-0-26.magritte-modal-overlay___lK22l_3-0-26{
152
152
  opacity:0;
153
153
  }
154
- .magritte-modal-animation-enter___kruLO_3-0-24 .magritte-modal___RAW6S_3-0-24{
154
+ .magritte-modal-animation-enter___kruLO_3-0-26 .magritte-modal___RAW6S_3-0-26{
155
155
  opacity:0;
156
156
  transform:scale(0.96);
157
157
  }
158
- .magritte-modal-animation-enter-active___E8KLu_3-0-24 .magritte-modal___RAW6S_3-0-24,
159
- .magritte-modal-animation-enter-active___E8KLu_3-0-24.magritte-modal-overlay___lK22l_3-0-24{
158
+ .magritte-modal-animation-enter-active___E8KLu_3-0-26 .magritte-modal___RAW6S_3-0-26,
159
+ .magritte-modal-animation-enter-active___E8KLu_3-0-26.magritte-modal-overlay___lK22l_3-0-26{
160
160
  opacity:1;
161
161
  transform:scale(1);
162
162
  transition-property:opacity, transform;
163
163
  transition-duration:var(--enter-animation-duration);
164
- transition-timing-function:var(--magritte-semantic-animation-ease-in-out-300-timing-function-v18-2-0);
164
+ transition-timing-function:var(--magritte-semantic-animation-ease-in-out-300-timing-function-v18-2-1);
165
165
  }
166
- .magritte-modal-animation-exit___0jNgl_3-0-24.magritte-modal-overlay___lK22l_3-0-24{
166
+ .magritte-modal-animation-exit___0jNgl_3-0-26.magritte-modal-overlay___lK22l_3-0-26{
167
167
  opacity:1;
168
168
  }
169
- .magritte-modal-animation-exit___0jNgl_3-0-24 .magritte-modal___RAW6S_3-0-24{
169
+ .magritte-modal-animation-exit___0jNgl_3-0-26 .magritte-modal___RAW6S_3-0-26{
170
170
  opacity:1;
171
171
  transform:scale(1);
172
172
  }
173
- .magritte-modal-animation-exit-active___ERjKa_3-0-24.magritte-modal-overlay___lK22l_3-0-24{
173
+ .magritte-modal-animation-exit-active___ERjKa_3-0-26.magritte-modal-overlay___lK22l_3-0-26{
174
174
  opacity:0;
175
175
  }
176
- .magritte-modal-animation-exit-active___ERjKa_3-0-24 .magritte-modal___RAW6S_3-0-24{
176
+ .magritte-modal-animation-exit-active___ERjKa_3-0-26 .magritte-modal___RAW6S_3-0-26{
177
177
  opacity:0;
178
178
  transform:scale(0.96);
179
179
  }
180
- .magritte-modal-animation-exit-active___ERjKa_3-0-24 .magritte-modal___RAW6S_3-0-24,
181
- .magritte-modal-animation-exit-active___ERjKa_3-0-24.magritte-modal-overlay___lK22l_3-0-24{
180
+ .magritte-modal-animation-exit-active___ERjKa_3-0-26 .magritte-modal___RAW6S_3-0-26,
181
+ .magritte-modal-animation-exit-active___ERjKa_3-0-26.magritte-modal-overlay___lK22l_3-0-26{
182
182
  transition-property:opacity, transform;
183
183
  transition-duration:var(--exit-animation-duration);
184
- transition-timing-function:var(--magritte-semantic-animation-ease-in-out-200-timing-function-v18-2-0);
184
+ transition-timing-function:var(--magritte-semantic-animation-ease-in-out-200-timing-function-v18-2-1);
185
185
  }
package/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  export * from '@hh.ru/magritte-ui-theme-provider';
2
- export { Modal } from './Modal';
2
+ export { Modal } from '@hh.ru/magritte-ui-modal/Modal';
package/index.js CHANGED
@@ -18,7 +18,7 @@ import '@hh.ru/magritte-common-func-utils';
18
18
  import '@hh.ru/magritte-ui-divider';
19
19
  import './ModalHeader.js';
20
20
  import '@hh.ru/magritte-ui-title';
21
- import './modal-606cd392.js';
21
+ import './modal-BTnHYqHj.js';
22
22
  import './ModalFooter.js';
23
23
  import './useModalOrder.js';
24
24
  import '@hh.ru/magritte-common-dom-storage';
@@ -0,0 +1,5 @@
1
+ import './index.css';
2
+ var styles = {"modal-overlay":"magritte-modal-overlay___lK22l_3-0-26","modalOverlay":"magritte-modal-overlay___lK22l_3-0-26","modal":"magritte-modal___RAW6S_3-0-26","modal-small":"magritte-modal-small___MMQT4_3-0-26","modalSmall":"magritte-modal-small___MMQT4_3-0-26","modal-content":"magritte-modal-content___46QFS_3-0-26","modalContent":"magritte-modal-content___46QFS_3-0-26","modal-content__with-divider":"magritte-modal-content__with-divider___an3I5_3-0-26","modalContentWithDivider":"magritte-modal-content__with-divider___an3I5_3-0-26","modal-content-wrapper":"magritte-modal-content-wrapper___23XFT_3-0-26","modalContentWrapper":"magritte-modal-content-wrapper___23XFT_3-0-26","modal-content-wrapper__one-line":"magritte-modal-content-wrapper__one-line___tYg8d_3-0-26","modalContentWrapperOneLine":"magritte-modal-content-wrapper__one-line___tYg8d_3-0-26","divider-container":"magritte-divider-container___qP3VK_3-0-26","dividerContainer":"magritte-divider-container___qP3VK_3-0-26","modal-footer":"magritte-modal-footer___8xPqQ_3-0-26","modalFooter":"magritte-modal-footer___8xPqQ_3-0-26","modal-buttons-container":"magritte-modal-buttons-container___1O1Nr_3-0-26","modalButtonsContainer":"magritte-modal-buttons-container___1O1Nr_3-0-26","animation-timeout":"magritte-animation-timeout___w-j7K_3-0-26","animationTimeout":"magritte-animation-timeout___w-j7K_3-0-26","modal-animation-enter-active":"magritte-modal-animation-enter-active___E8KLu_3-0-26","modalAnimationEnterActive":"magritte-modal-animation-enter-active___E8KLu_3-0-26","modal-animation-exit-active":"magritte-modal-animation-exit-active___ERjKa_3-0-26","modalAnimationExitActive":"magritte-modal-animation-exit-active___ERjKa_3-0-26","modal-animation-enter":"magritte-modal-animation-enter___kruLO_3-0-26","modalAnimationEnter":"magritte-modal-animation-enter___kruLO_3-0-26","modal-animation-exit":"magritte-modal-animation-exit___0jNgl_3-0-26","modalAnimationExit":"magritte-modal-animation-exit___0jNgl_3-0-26"};
3
+
4
+ export { styles as s };
5
+ //# sourceMappingURL=modal-BTnHYqHj.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"modal-BTnHYqHj.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hh.ru/magritte-ui-modal",
3
- "version": "3.0.24",
3
+ "version": "3.0.26",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -16,25 +16,26 @@
16
16
  "eslint-test": "yarn root:eslint-test $(pwd)",
17
17
  "ts-config": "yarn root:ts-config $(pwd)",
18
18
  "ts-check": "yarn root:ts-check $(pwd)",
19
- "test": "yarn root:test $(pwd)"
19
+ "test": "yarn root:test $(pwd)",
20
+ "watch": "yarn root:watch $(pwd)"
20
21
  },
21
22
  "dependencies": {
22
- "@hh.ru/magritte-common-dom-storage": "1.0.5",
23
- "@hh.ru/magritte-common-func-utils": "1.3.6",
24
- "@hh.ru/magritte-common-is-server-env": "1.0.4",
25
- "@hh.ru/magritte-common-keyboard": "4.0.0",
26
- "@hh.ru/magritte-common-modal-helper": "1.2.6",
27
- "@hh.ru/magritte-common-use-multiple-refs": "1.1.2",
28
- "@hh.ru/magritte-design-tokens": "18.2.0",
29
- "@hh.ru/magritte-internal-layer-name": "2.1.1",
30
- "@hh.ru/magritte-ui-action": "4.3.10",
31
- "@hh.ru/magritte-ui-breakpoint": "4.0.2",
32
- "@hh.ru/magritte-ui-divider": "1.1.27",
33
- "@hh.ru/magritte-ui-icon": "7.1.8",
34
- "@hh.ru/magritte-ui-layer": "2.0.4",
35
- "@hh.ru/magritte-ui-mock-component": "1.0.10",
36
- "@hh.ru/magritte-ui-theme-provider": "1.1.24",
37
- "@hh.ru/magritte-ui-title": "5.0.2"
23
+ "@hh.ru/magritte-common-dom-storage": "1.0.6",
24
+ "@hh.ru/magritte-common-func-utils": "1.3.7",
25
+ "@hh.ru/magritte-common-is-server-env": "1.0.5",
26
+ "@hh.ru/magritte-common-keyboard": "4.0.1",
27
+ "@hh.ru/magritte-common-modal-helper": "1.2.7",
28
+ "@hh.ru/magritte-common-use-multiple-refs": "1.1.3",
29
+ "@hh.ru/magritte-design-tokens": "18.2.1",
30
+ "@hh.ru/magritte-internal-layer-name": "2.1.2",
31
+ "@hh.ru/magritte-ui-action": "4.3.11",
32
+ "@hh.ru/magritte-ui-breakpoint": "4.0.3",
33
+ "@hh.ru/magritte-ui-divider": "1.1.28",
34
+ "@hh.ru/magritte-ui-icon": "7.1.9",
35
+ "@hh.ru/magritte-ui-layer": "2.0.5",
36
+ "@hh.ru/magritte-ui-mock-component": "1.0.11",
37
+ "@hh.ru/magritte-ui-theme-provider": "1.1.25",
38
+ "@hh.ru/magritte-ui-title": "5.0.3"
38
39
  },
39
40
  "peerDependencies": {
40
41
  "classnames": ">=2.3.2",
@@ -45,5 +46,5 @@
45
46
  "publishConfig": {
46
47
  "access": "public"
47
48
  },
48
- "gitHead": "4480faadc19af08673481a84a62f77d081e9be2e"
49
- }
49
+ "gitHead": "070fdc8e59baba389e2102f261be0ac0d1ed327e"
50
+ }
package/modal-606cd392.js DELETED
@@ -1,5 +0,0 @@
1
- import './index.css';
2
- var styles = {"modal-overlay":"magritte-modal-overlay___lK22l_3-0-24","modalOverlay":"magritte-modal-overlay___lK22l_3-0-24","modal":"magritte-modal___RAW6S_3-0-24","modal-small":"magritte-modal-small___MMQT4_3-0-24","modalSmall":"magritte-modal-small___MMQT4_3-0-24","modal-content":"magritte-modal-content___46QFS_3-0-24","modalContent":"magritte-modal-content___46QFS_3-0-24","modal-content__with-divider":"magritte-modal-content__with-divider___an3I5_3-0-24","modalContentWithDivider":"magritte-modal-content__with-divider___an3I5_3-0-24","modal-content-wrapper":"magritte-modal-content-wrapper___23XFT_3-0-24","modalContentWrapper":"magritte-modal-content-wrapper___23XFT_3-0-24","modal-content-wrapper__one-line":"magritte-modal-content-wrapper__one-line___tYg8d_3-0-24","modalContentWrapperOneLine":"magritte-modal-content-wrapper__one-line___tYg8d_3-0-24","divider-container":"magritte-divider-container___qP3VK_3-0-24","dividerContainer":"magritte-divider-container___qP3VK_3-0-24","modal-footer":"magritte-modal-footer___8xPqQ_3-0-24","modalFooter":"magritte-modal-footer___8xPqQ_3-0-24","modal-buttons-container":"magritte-modal-buttons-container___1O1Nr_3-0-24","modalButtonsContainer":"magritte-modal-buttons-container___1O1Nr_3-0-24","animation-timeout":"magritte-animation-timeout___w-j7K_3-0-24","animationTimeout":"magritte-animation-timeout___w-j7K_3-0-24","modal-animation-enter-active":"magritte-modal-animation-enter-active___E8KLu_3-0-24","modalAnimationEnterActive":"magritte-modal-animation-enter-active___E8KLu_3-0-24","modal-animation-exit-active":"magritte-modal-animation-exit-active___ERjKa_3-0-24","modalAnimationExitActive":"magritte-modal-animation-exit-active___ERjKa_3-0-24","modal-animation-enter":"magritte-modal-animation-enter___kruLO_3-0-24","modalAnimationEnter":"magritte-modal-animation-enter___kruLO_3-0-24","modal-animation-exit":"magritte-modal-animation-exit___0jNgl_3-0-24","modalAnimationExit":"magritte-modal-animation-exit___0jNgl_3-0-24"};
3
-
4
- export { styles as s };
5
- //# sourceMappingURL=modal-606cd392.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"modal-606cd392.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}