@hh.ru/magritte-ui-modal-deprecated 1.0.1

package/ModalHeader.js

@@ -0,0 +1,48 @@
+import './index.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, Children, cloneElement } from 'react';
+import classnames from 'classnames';
+import { isIconElement } from '@hh.ru/magritte-ui-icon';
+import { Title } from '@hh.ru/magritte-ui-title';
+
+var styles = {"content":"magritte-content___dnhh5_1-0-1","options":"magritte-options___DlTFU_1-0-1","actions":"magritte-actions___r-a0l_1-0-1","actions-with-link":"magritte-actions-with-link___y3-dV_1-0-1","actionsWithLink":"magritte-actions-with-link___y3-dV_1-0-1","content-with-image":"magritte-content-with-image___IwN4b_1-0-1","contentWithImage":"magritte-content-with-image___IwN4b_1-0-1","actions-single":"magritte-actions-single___QaDKO_1-0-1","actionsSingle":"magritte-actions-single___QaDKO_1-0-1","image-container":"magritte-image-container___2MBxK_1-0-1","imageContainer":"magritte-image-container___2MBxK_1-0-1","title-wrapper":"magritte-title-wrapper___XEFse_1-0-1","titleWrapper":"magritte-title-wrapper___XEFse_1-0-1","wrapper":"magritte-wrapper___R4t9N_1-0-1","only-actions":"magritte-only-actions___ypqS-_1-0-1","onlyActions":"magritte-only-actions___ypqS-_1-0-1"};
+
+const ModalHeader = forwardRef(({ title, headerImageUrl, headerImage, headerHeight, titleAlignment, titleElement, titleMaxLines, titleSize, titleDescription, titleDescriptionMaxLines, titleStyle, titleDescriptionStyle, options, actions: _actions, actionLink, labelId, wrapperRef, }, ref) => {
+    const actions = Array.isArray(_actions) ? _actions.slice(0, 5) : _actions;
+    const hasHeaderImage = !!headerImageUrl || !!headerImage;
+    if (!title && !hasHeaderImage && !actions && !actionLink && !options) {
+        return null;
+    }
+    const withTitle = title && titleElement;
+    const withActions = !!actions || !!actionLink;
+    const currentTitleStyle = titleStyle || (hasHeaderImage ? 'constant' : 'primary');
+    const currentTitleDescriptionStyle = titleDescriptionStyle || (hasHeaderImage ? 'constant' : 'primary');
+    const withContent = title || hasHeaderImage || actionLink || actions;
+    const onlyActions = !title && !hasHeaderImage && !options && (actions || actionLink);
+    return (jsxs("div", { "data-qa": "modal-header", ref: wrapperRef, className: classnames(styles.wrapper, {
+            [styles.onlyActions]: onlyActions,
+        }), style: hasHeaderImage ? { marginBottom: 24 } : {}, children: [withContent && (jsxs("div", { className: classnames(styles.content, {
+                    [styles.contentWithImage]: !!hasHeaderImage,
+                }), style: hasHeaderImage ? { height: headerHeight } : {}, ref: ref, "data-qa": "modal-header-image", children: [headerImage ? (jsx("div", { className: styles.imageContainer, style: {
+                            backgroundImage: title ? 'var(--modal-header-gradient)' : '',
+                            height: headerHeight,
+                        }, children: headerImage })) : (headerImageUrl && (jsx("div", { className: styles.imageContainer, style: {
+                            backgroundImage: `${title ? 'var(--modal-header-gradient), ' : ''}url(${headerImageUrl})`,
+                            height: headerHeight,
+                        } }))), withTitle && (jsx("div", { className: styles.titleWrapper, children: jsx(Title, { id: labelId, Element: titleElement, alignment: titleAlignment, maxLines: titleMaxLines, size: titleSize, style: currentTitleStyle, description: titleDescription, descriptionMaxLines: titleDescriptionMaxLines, descriptionStyle: currentTitleDescriptionStyle, children: title }) })), withActions && (jsx("div", { className: classnames(styles.actions, {
+                            [styles.actionsWithLink]: !actions && !!actionLink,
+                            [styles.actionsSingle]: Array.isArray(actions) ? actions.length === 1 : !!actions,
+                        }), children: actions
+                            ? Children.toArray(actions).map((item) => isIconElement(item)
+                                ? cloneElement(item, {
+                                    padding: 8,
+                                    borderRadius: 'halfHeight',
+                                    backgroundStyle: undefined,
+                                })
+                                : item)
+                            : actionLink }))] })), options && jsx("div", { className: styles.options, children: options })] }));
+});
+ModalHeader.displayName = 'ModalHeader';
+
+export { ModalHeader };
+//# sourceMappingURL=ModalHeader.js.map

package/ModalHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalHeader.js","sources":["src/ModalHeader.tsx"],"sourcesContent":["import { forwardRef, RefObject, cloneElement, Children } from 'react';\nimport classnames from 'classnames';\n\nimport { isIconElement } from '@hh.ru/magritte-ui-icon';\nimport { ModalHeaderProps } from '@hh.ru/magritte-ui-modal-deprecated/types';\nimport { Title } from '@hh.ru/magritte-ui-title';\n\nimport styles from './modal-header.less';\n\nexport const ModalHeader = forwardRef<\n    HTMLDivElement,\n    ModalHeaderProps & { labelId: string; wrapperRef: RefObject<HTMLDivElement> }\n>(\n    (\n        {\n            title,\n            headerImageUrl,\n            headerImage,\n            headerHeight,\n            titleAlignment,\n            titleElement,\n            titleMaxLines,\n            titleSize,\n            titleDescription,\n            titleDescriptionMaxLines,\n            titleStyle,\n            titleDescriptionStyle,\n            options,\n            actions: _actions,\n            actionLink,\n            labelId,\n            wrapperRef,\n        },\n        ref\n    ) => {\n        const actions = Array.isArray(_actions) ? _actions.slice(0, 5) : _actions;\n        const hasHeaderImage = !!headerImageUrl || !!headerImage;\n        if (!title && !hasHeaderImage && !actions && !actionLink && !options) {\n            return null;\n        }\n        const withTitle = title && titleElement;\n        const withActions = !!actions || !!actionLink;\n        const currentTitleStyle = titleStyle || (hasHeaderImage ? 'constant' : 'primary');\n        const currentTitleDescriptionStyle = titleDescriptionStyle || (hasHeaderImage ? 'constant' : 'primary');\n        const withContent = title || hasHeaderImage || actionLink || actions;\n        const onlyActions = !title && !hasHeaderImage && !options && (actions || actionLink);\n\n        return (\n            <div\n                data-qa=\"modal-header\"\n                ref={wrapperRef}\n                className={classnames(styles.wrapper, {\n                    [styles.onlyActions]: onlyActions,\n                })}\n                style={hasHeaderImage ? { marginBottom: 24 } : {}}\n            >\n                {withContent && (\n                    <div\n                        className={classnames(styles.content, {\n                            [styles.contentWithImage]: !!hasHeaderImage,\n                        })}\n                        style={hasHeaderImage ? { height: headerHeight } : {}}\n                        ref={ref}\n                        data-qa=\"modal-header-image\"\n                    >\n                        {headerImage ? (\n                            <div\n                                className={styles.imageContainer}\n                                style={{\n                                    backgroundImage: title ? 'var(--modal-header-gradient)' : '',\n                                    height: headerHeight,\n                                }}\n                            >\n                                {headerImage}\n                            </div>\n                        ) : (\n                            headerImageUrl && (\n                                <div\n                                    className={styles.imageContainer}\n                                    style={{\n                                        backgroundImage: `${\n                                            title ? 'var(--modal-header-gradient), ' : ''\n                                        }url(${headerImageUrl})`,\n                                        height: headerHeight,\n                                    }}\n                                />\n                            )\n                        )}\n                        {withTitle && (\n                            <div className={styles.titleWrapper}>\n                                <Title\n                                    id={labelId}\n                                    Element={titleElement}\n                                    alignment={titleAlignment}\n                                    maxLines={titleMaxLines}\n                                    size={titleSize}\n                                    style={currentTitleStyle}\n                                    description={titleDescription}\n                                    descriptionMaxLines={titleDescriptionMaxLines}\n                                    descriptionStyle={currentTitleDescriptionStyle}\n                                >\n                                    {title}\n                                </Title>\n                            </div>\n                        )}\n                        {withActions && (\n                            <div\n                                className={classnames(styles.actions, {\n                                    [styles.actionsWithLink]: !actions && !!actionLink,\n                                    [styles.actionsSingle]: Array.isArray(actions) ? actions.length === 1 : !!actions,\n                                })}\n                            >\n                                {actions\n                                    ? Children.toArray(actions).map((item) =>\n                                          isIconElement(item)\n                                              ? cloneElement(item, {\n                                                    padding: 8,\n                                                    borderRadius: 'halfHeight',\n                                                    backgroundStyle: undefined,\n                                                })\n                                              : item\n                                      )\n                                    : actionLink}\n                            </div>\n                        )}\n                    </div>\n                )}\n                {options && <div className={styles.options}>{options}</div>}\n            </div>\n        );\n    }\n);\n\nModalHeader.displayName = 'ModalHeader';\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/index.css

@@ -0,0 +1,397 @@
+:root{
+  --magritte-color-component-modal-background-action-v24-7-2:#20262bad;
+  --magritte-gradient-component-modal-background-fade-v24-7-2:#00000000 0%, #0000007a 100%;
+}
+.magritte-content___dnhh5_1-0-1{
+  display:flex;
+  align-items:flex-start;
+}
+.magritte-content___dnhh5_1-0-1 + .magritte-options___DlTFU_1-0-1{
+  margin-top:24px;
+}
+.magritte-actions___r-a0l_1-0-1{
+  position:relative;
+  z-index:1;
+  display:flex;
+  padding-left:16px;
+  gap:4px;
+  margin-left:auto;
+  --magritte-ui-link-padding-override:9px;
+}
+.magritte-actions-with-link___y3-dV_1-0-1{
+  padding:0 8px 0 28px;
+}
+.magritte-content-with-image___IwN4b_1-0-1{
+  position:relative;
+  flex-direction:column;
+  justify-content:flex-end;
+  margin:-12px -12px 0;
+  border-radius:16px;
+  overflow:hidden;
+  padding:12px 24px 24px;
+  box-sizing:border-box;
+}
+.magritte-content-with-image___IwN4b_1-0-1 .magritte-actions___r-a0l_1-0-1{
+  order:-1;
+  gap:0;
+  margin-right:-16px;
+  margin-top:-4px;
+  margin-bottom:auto;
+}
+.magritte-content-with-image___IwN4b_1-0-1 .magritte-actions___r-a0l_1-0-1:not(.magritte-actions-with-link___y3-dV_1-0-1){
+  padding:0 4px;
+  background-color:var(--magritte-color-component-modal-background-action-v24-7-2);
+  border-radius:12px;
+}
+.magritte-content-with-image___IwN4b_1-0-1 .magritte-actions___r-a0l_1-0-1.magritte-actions-single___QaDKO_1-0-1:not(.magritte-actions-with-link___y3-dV_1-0-1){
+  padding:0;
+}
+.magritte-image-container___2MBxK_1-0-1{
+  position:absolute;
+  left:0;
+  bottom:0;
+  right:0;
+  background-size:cover;
+  --modal-header-gradient:linear-gradient(180deg, var(--magritte-gradient-component-modal-background-fade-v24-7-2));
+}
+.magritte-title-wrapper___XEFse_1-0-1{
+  position:relative;
+  width:100%;
+}
+.magritte-wrapper___R4t9N_1-0-1{
+  margin-bottom:24px;
+}
+.magritte-only-actions___ypqS-_1-0-1 .magritte-actions___r-a0l_1-0-1{
+  padding-left:0;
+}
+.magritte-only-actions___ypqS-_1-0-1 .magritte-actions-with-link___y3-dV_1-0-1{
+  padding-left:12px;
+}
+
+:root{
+  --magritte-color-background-overlay-v24-7-2:#20262bad;
+  --magritte-color-stroke-neutral-v24-7-2:#DCE3EB;
+  --magritte-color-component-modal-background-content-v24-7-2:#ffffff;
+}
+
+:root{
+  --magritte-semantic-animation-ease-in-out-200-timing-function-v24-7-2:cubic-bezier(0.25, 0.1, 0.25, 1);
+  --magritte-semantic-animation-ease-in-out-200-duration-v24-7-2:200ms;
+  --magritte-semantic-animation-ease-in-out-300-timing-function-v24-7-2:cubic-bezier(0.25, 0.1, 0.25, 1);
+  --magritte-semantic-animation-ease-in-out-300-duration-v24-7-2:300ms;
+}
+
+.magritte-night-theme{
+  --magritte-color-stroke-neutral-v24-7-2:#303030;
+  --magritte-color-component-modal-background-content-v24-7-2:#1B1B1B;
+}
+.magritte-modal-overlay___uurgp_1-0-1{
+  position:fixed;
+  top:0;
+  right:0;
+  bottom:0;
+  left:0;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+.magritte-modal-overlay-with-background___mR-T0_1-0-1{
+  background-color:var(--magritte-color-background-overlay-v24-7-2);
+  transition-property:opacity, transform;
+  user-select:text;
+  z-index:1;
+}
+.magritte-modal-overlay___uurgp_1-0-1:not(.magritte-modal-overlay-with-background___mR-T0_1-0-1){
+  pointer-events:none;
+}
+.magritte-modal-overlay___uurgp_1-0-1:not(.magritte-modal-overlay-with-background___mR-T0_1-0-1) .magritte-modal___2Wc4s_1-0-1{
+  pointer-events:auto;
+}
+.magritte-modal-overlay-left___qaiC9_1-0-1{
+  justify-content:flex-start;
+}
+.magritte-modal-overlay-right___-HTKs_1-0-1{
+  justify-content:flex-end;
+}
+.magritte-modal___2Wc4s_1-0-1{
+  display:flex;
+  box-sizing:border-box;
+  margin:0 12px;
+  padding:24px;
+  flex-direction:column;
+  max-height:calc(100% - 12px * 2);
+  max-width:calc(100vw - 12px * 2);
+  position:relative;
+  background-color:var(--magritte-color-component-modal-background-content-v24-7-2);
+  border-radius:24px;
+  overflow:hidden;
+  width:800px;
+  transition-property:opacity, transform;
+  container-type:inline-size;
+}
+.magritte-modal___2Wc4s_1-0-1.magritte-size-small___nSBwy_1-0-1{
+  width:480px;
+}
+.magritte-modal___2Wc4s_1-0-1.magritte-size-medium___Zuz-t_1-0-1{
+  width:620px;
+}
+.magritte-no-vertical-paddings___XgMGS_1-0-1{
+  padding-top:0;
+  padding-bottom:0;
+}
+.magritte-no-horizontal-paddings___MJDv4_1-0-1{
+  padding-left:0;
+  padding-right:0;
+}
+.magritte-modal-full-height___UThtH_1-0-1{
+  height:100%;
+}
+.magritte-modal-with-border___bqsql_1-0-1{
+  outline:1px solid var(--magritte-color-stroke-neutral-v24-7-2);
+}
+.magritte-modal-content-wrapper___-eFo3_1-0-1{
+  display:flex;
+  flex-direction:column;
+  min-height:0;
+  flex:1 1;
+}
+.magritte-modal-content___KY9ma_1-0-1{
+  position:relative;
+  display:flex;
+  flex-direction:column;
+  min-height:0;
+  flex:1 1;
+  padding:0 0 0 24px;
+  margin:0 -24px;
+  width:calc(100% + 24px);
+  width:calc(100cqw + 24px);
+}
+.magritte-modal-scroll-container___dg8jC_1-0-1{
+  display:flex;
+  flex-direction:column;
+  flex:1 1;
+  min-height:0;
+  overflow-y:auto;
+  overscroll-behavior:none;
+  scrollbar-width:none;
+  padding:0 4px;
+  margin:0 -4px;
+}
+.magritte-modal-scroll-container___dg8jC_1-0-1::-webkit-scrollbar{
+  display:none;
+}
+.magritte-modal-content-wrapper__one-line___ZkEgT_1-0-1{
+  flex-direction:row-reverse;
+}
+.magritte-modal-content-wrapper__one-line___ZkEgT_1-0-1 .magritte-modal-content___KY9ma_1-0-1{
+  width:auto;
+  container-type:inline-size;
+  margin-right:0;
+}
+.magritte-modal-content-wrapper__one-line___ZkEgT_1-0-1 .magritte-content-sticky-container___VkZxO_1-0-1{
+  max-width:calc(100% - 16px);
+  max-width:calc(100cqw - 16px);
+}
+.magritte-divider-container___jKyxB_1-0-1{
+  margin:0 -24px;
+}
+.magritte-divider-container___jKyxB_1-0-1.magritte-divider-container-hidden___20nI5_1-0-1{
+  display:none;
+}
+.magritte-modal-footer___TbH6x_1-0-1{
+  margin:0 -24px -24px;
+  background-color:var(--magritte-color-component-modal-background-content-v24-7-2);
+  z-index:1;
+  --magritte-ui-container-background-color-override:var(--magritte-color-component-modal-background-content-v24-7-2);
+}
+.magritte-modal-buttons-container___9hXUo_1-0-1{
+  display:flex;
+  gap:12px;
+}
+.magritte-animation-timeout___vK6nU_1-0-1{
+  --enter-animation-duration:0;
+  --exit-animation-duration:0;
+}
+@media (prefers-reduced-motion: no-preference){
+  .magritte-animation-timeout___vK6nU_1-0-1{
+    --enter-animation-duration:var(--magritte-semantic-animation-ease-in-out-300-duration-v24-7-2);
+    --exit-animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v24-7-2);
+  }
+}
+.magritte-animation-enter-center___9zWOQ_1-0-1.magritte-modal-overlay-with-background___mR-T0_1-0-1{
+  opacity:0;
+}
+.magritte-animation-enter-center___9zWOQ_1-0-1 .magritte-modal___2Wc4s_1-0-1{
+  opacity:0;
+}
+.magritte-animation-enter-center-active___dfICf_1-0-1{
+  --enter-animation-duration:0;
+  --exit-animation-duration:0;
+}
+@media (prefers-reduced-motion: no-preference){
+  .magritte-animation-enter-center-active___dfICf_1-0-1{
+    --enter-animation-duration:var(--magritte-semantic-animation-ease-in-out-300-duration-v24-7-2);
+    --exit-animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v24-7-2);
+  }
+}
+.magritte-animation-enter-center-active___dfICf_1-0-1 .magritte-modal___2Wc4s_1-0-1,
+.magritte-animation-enter-center-active___dfICf_1-0-1.magritte-modal-overlay-with-background___mR-T0_1-0-1{
+  opacity:1;
+  transition-duration:var(--enter-animation-duration);
+  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-300-timing-function-v24-7-2);
+}
+.magritte-animation-exit-center___mrTCE_1-0-1.magritte-modal-overlay-with-background___mR-T0_1-0-1{
+  opacity:1;
+}
+.magritte-animation-exit-center___mrTCE_1-0-1 .magritte-modal___2Wc4s_1-0-1{
+  opacity:1;
+}
+.magritte-animation-exit-center-active___WZXYp_1-0-1{
+  --enter-animation-duration:0;
+  --exit-animation-duration:0;
+}
+@media (prefers-reduced-motion: no-preference){
+  .magritte-animation-exit-center-active___WZXYp_1-0-1{
+    --enter-animation-duration:var(--magritte-semantic-animation-ease-in-out-300-duration-v24-7-2);
+    --exit-animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v24-7-2);
+  }
+}
+.magritte-animation-exit-center-active___WZXYp_1-0-1.magritte-modal-overlay-with-background___mR-T0_1-0-1{
+  opacity:0;
+}
+.magritte-animation-exit-center-active___WZXYp_1-0-1 .magritte-modal___2Wc4s_1-0-1{
+  opacity:0;
+}
+.magritte-animation-exit-center-active___WZXYp_1-0-1 .magritte-modal___2Wc4s_1-0-1,
+.magritte-animation-exit-center-active___WZXYp_1-0-1.magritte-modal-overlay-with-background___mR-T0_1-0-1{
+  transition-duration:var(--exit-animation-duration);
+  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-200-timing-function-v24-7-2);
+}
+.magritte-animation-enter-left___XiXzr_1-0-1.magritte-modal-overlay-with-background___mR-T0_1-0-1{
+  opacity:0;
+}
+.magritte-animation-enter-left___XiXzr_1-0-1 .magritte-modal___2Wc4s_1-0-1{
+  opacity:0;
+  transform:translateX(-100%);
+}
+.magritte-animation-enter-left-active___4Uaz6_1-0-1{
+  --enter-animation-duration:0;
+  --exit-animation-duration:0;
+}
+@media (prefers-reduced-motion: no-preference){
+  .magritte-animation-enter-left-active___4Uaz6_1-0-1{
+    --enter-animation-duration:var(--magritte-semantic-animation-ease-in-out-300-duration-v24-7-2);
+    --exit-animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v24-7-2);
+  }
+}
+.magritte-animation-enter-left-active___4Uaz6_1-0-1 .magritte-modal___2Wc4s_1-0-1,
+.magritte-animation-enter-left-active___4Uaz6_1-0-1.magritte-modal-overlay-with-background___mR-T0_1-0-1{
+  opacity:1;
+  transition-duration:var(--enter-animation-duration);
+  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-300-timing-function-v24-7-2);
+  transform:translateX(0);
+}
+.magritte-animation-exit-left___NHvvO_1-0-1.magritte-modal-overlay-with-background___mR-T0_1-0-1{
+  opacity:1;
+}
+.magritte-animation-exit-left___NHvvO_1-0-1 .magritte-modal___2Wc4s_1-0-1{
+  opacity:1;
+  transform:translateX(0);
+}
+.magritte-animation-exit-left-active___oDszE_1-0-1{
+  --enter-animation-duration:0;
+  --exit-animation-duration:0;
+}
+@media (prefers-reduced-motion: no-preference){
+  .magritte-animation-exit-left-active___oDszE_1-0-1{
+    --enter-animation-duration:var(--magritte-semantic-animation-ease-in-out-300-duration-v24-7-2);
+    --exit-animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v24-7-2);
+  }
+}
+.magritte-animation-exit-left-active___oDszE_1-0-1.magritte-modal-overlay-with-background___mR-T0_1-0-1{
+  opacity:0;
+}
+.magritte-animation-exit-left-active___oDszE_1-0-1 .magritte-modal___2Wc4s_1-0-1{
+  opacity:0;
+  transform:translateX(-100%);
+}
+.magritte-animation-exit-left-active___oDszE_1-0-1 .magritte-modal___2Wc4s_1-0-1,
+.magritte-animation-exit-left-active___oDszE_1-0-1.magritte-modal-overlay-with-background___mR-T0_1-0-1{
+  transition-duration:var(--exit-animation-duration);
+  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-200-timing-function-v24-7-2);
+}
+.magritte-animation-enter-right___1bqPX_1-0-1.magritte-modal-overlay-with-background___mR-T0_1-0-1{
+  opacity:0;
+}
+.magritte-animation-enter-right___1bqPX_1-0-1 .magritte-modal___2Wc4s_1-0-1{
+  opacity:0;
+  transform:translateX(100%);
+}
+.magritte-animation-enter-right-active___OR65U_1-0-1{
+  --enter-animation-duration:0;
+  --exit-animation-duration:0;
+}
+@media (prefers-reduced-motion: no-preference){
+  .magritte-animation-enter-right-active___OR65U_1-0-1{
+    --enter-animation-duration:var(--magritte-semantic-animation-ease-in-out-300-duration-v24-7-2);
+    --exit-animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v24-7-2);
+  }
+}
+.magritte-animation-enter-right-active___OR65U_1-0-1 .magritte-modal___2Wc4s_1-0-1,
+.magritte-animation-enter-right-active___OR65U_1-0-1.magritte-modal-overlay-with-background___mR-T0_1-0-1{
+  opacity:1;
+  transition-duration:var(--enter-animation-duration);
+  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-300-timing-function-v24-7-2);
+  transform:translateX(0);
+}
+.magritte-animation-exit-right___hyYBh_1-0-1.magritte-modal-overlay-with-background___mR-T0_1-0-1{
+  opacity:1;
+}
+.magritte-animation-exit-right___hyYBh_1-0-1 .magritte-modal___2Wc4s_1-0-1{
+  opacity:1;
+  transform:translateX(0);
+}
+.magritte-animation-exit-right-active___ft6Lz_1-0-1{
+  --enter-animation-duration:0;
+  --exit-animation-duration:0;
+}
+@media (prefers-reduced-motion: no-preference){
+  .magritte-animation-exit-right-active___ft6Lz_1-0-1{
+    --enter-animation-duration:var(--magritte-semantic-animation-ease-in-out-300-duration-v24-7-2);
+    --exit-animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v24-7-2);
+  }
+}
+.magritte-animation-exit-right-active___ft6Lz_1-0-1.magritte-modal-overlay-with-background___mR-T0_1-0-1{
+  opacity:0;
+}
+.magritte-animation-exit-right-active___ft6Lz_1-0-1 .magritte-modal___2Wc4s_1-0-1{
+  opacity:0;
+  transform:translateX(100%);
+}
+.magritte-animation-exit-right-active___ft6Lz_1-0-1 .magritte-modal___2Wc4s_1-0-1,
+.magritte-animation-exit-right-active___ft6Lz_1-0-1.magritte-modal-overlay-with-background___mR-T0_1-0-1{
+  transition-duration:var(--exit-animation-duration);
+  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-200-timing-function-v24-7-2);
+}
+.magritte-space-preserver___nz3Nw_1-0-1{
+  flex:0 0 auto;
+}
+.magritte-tree-selector-container___XZh1C_1-0-1{
+  height:100%;
+  max-width:calc(100% - 24px);
+  max-width:100cqw;
+  --magritte-ui-scrollbar-offset-right:-24px;
+}
+.magritte-content-sticky-container___VkZxO_1-0-1{
+  display:flex;
+  flex-direction:column;
+  position:sticky;
+  top:0;
+  min-height:100%;
+  flex:1 0 auto;
+  max-width:calc(100% - 24px);
+  max-width:100cqw;
+}
+.magritte-grow-limiter___SPuoT_1-0-1{
+  flex:1 0;
+}

package/index.d.ts

@@ -0,0 +1,2 @@
+export { Modal as ModalDeprecated } from '@hh.ru/magritte-ui-modal-deprecated/Modal';
+export type { ModalProps as ModalDeprecatedProps } from '@hh.ru/magritte-ui-modal-deprecated/types';

package/index.js

@@ -0,0 +1,31 @@
+import './index.css';
+export { Modal as ModalDeprecated } from './Modal.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'react-dom';
+import 'react-transition-group';
+import 'classnames';
+import '@hh.ru/magritte-common-is-server-env';
+import '@hh.ru/magritte-common-keyboard';
+import '@hh.ru/magritte-common-modal-helper';
+import '@hh.ru/magritte-common-mouse/useCloseByClickOutside';
+import '@hh.ru/magritte-common-use-multiple-refs';
+import '@hh.ru/magritte-common-use-no-bubbling';
+import '@hh.ru/magritte-ui-action-bar';
+import '@hh.ru/magritte-ui-breakpoint';
+import '@hh.ru/magritte-ui-layer';
+import './ModalContentWithHeader-5W8yMgqD.js';
+import '@hh.ru/magritte-common-func-utils';
+import '@hh.ru/magritte-ui-content-overlay';
+import '@hh.ru/magritte-ui-divider';
+import './ModalHeader.js';
+import '@hh.ru/magritte-ui-icon';
+import '@hh.ru/magritte-ui-title';
+import '@hh.ru/magritte-ui-scrollbar';
+import '@hh.ru/magritte-ui-textarea';
+import './useModalOrder.js';
+import '@hh.ru/magritte-common-dom-storage';
+import '@hh.ru/magritte-ui-progress-bar';
+import '@hh.ru/magritte-ui-theme-wrapper';
+import '@hh.ru/magritte-ui-tree-selector';
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/index.mock.d.ts

@@ -0,0 +1,2 @@
+import { ForwardRefExoticComponent } from 'react';
+export declare const ModalDeprecated: ForwardRefExoticComponent<Record<string, unknown>>;

package/index.mock.js

@@ -0,0 +1,9 @@
+import './index.css';
+import { mockComponent } from '@hh.ru/magritte-ui-mock-component';
+
+const ModalDeprecated = mockComponent('ModalDeprecated', undefined, {
+    withChildren: true,
+});
+
+export { ModalDeprecated };
+//# sourceMappingURL=index.mock.js.map

package/index.mock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mock.js","sources":["src/index.mock.ts"],"sourcesContent":["import { ForwardRefExoticComponent } from 'react';\n\nimport { mockComponent } from '@hh.ru/magritte-ui-mock-component';\n\nexport const ModalDeprecated: ForwardRefExoticComponent<Record<string, unknown>> = mockComponent(\n    'ModalDeprecated',\n    undefined,\n    {\n        withChildren: true,\n    }\n);\n"],"names":[],"mappings":";;MAIa,eAAe,GAAuD,aAAa,CAC5F,iBAAiB,EACjB,SAAS,EACT;AACI,IAAA,YAAY,EAAE,IAAI;AACrB,CAAA;;;;"}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@hh.ru/magritte-ui-modal-deprecated",
+  "version": "1.0.1",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "sideEffects": [
+    "index.css"
+  ],
+  "scripts": {
+    "build": "yarn root:build $(pwd)",
+    "build-test-branch": "yarn root:build-test-branch $(pwd)",
+    "prepack": "yarn root:prepack $(pwd)",
+    "postpublish": "yarn root:postpublish $(pwd)",
+    "stylelint-check": "yarn root:stylelint-check $(pwd)",
+    "eslint-check": "yarn root:eslint-check $(pwd)",
+    "ts-config": "yarn root:ts-config $(pwd)",
+    "ts-check": "yarn root:ts-check $(pwd)",
+    "test": "yarn root:test $(pwd)",
+    "watch": "yarn root:watch $(pwd)"
+  },
+  "dependencies": {
+    "@hh.ru/magritte-common-dom-storage": "1.0.9",
+    "@hh.ru/magritte-common-func-utils": "1.3.15",
+    "@hh.ru/magritte-common-is-server-env": "1.0.8",
+    "@hh.ru/magritte-common-keyboard": "4.3.4",
+    "@hh.ru/magritte-common-modal-helper": "1.3.2",
+    "@hh.ru/magritte-common-mouse": "1.2.0",
+    "@hh.ru/magritte-common-use-multiple-refs": "1.1.11",
+    "@hh.ru/magritte-common-use-no-bubbling": "1.0.8",
+    "@hh.ru/magritte-design-tokens": "24.7.2",
+    "@hh.ru/magritte-internal-layer-name": "3.4.1",
+    "@hh.ru/magritte-ui-action-bar": "5.4.0",
+    "@hh.ru/magritte-ui-breakpoint": "6.1.1",
+    "@hh.ru/magritte-ui-content-overlay": "1.2.1",
+    "@hh.ru/magritte-ui-divider": "3.2.1",
+    "@hh.ru/magritte-ui-icon": "14.2.12",
+    "@hh.ru/magritte-ui-layer": "3.2.6",
+    "@hh.ru/magritte-ui-mock-component": "1.1.7",
+    "@hh.ru/magritte-ui-progress-bar": "5.0.26",
+    "@hh.ru/magritte-ui-scrollbar": "1.0.28",
+    "@hh.ru/magritte-ui-textarea": "3.3.31",
+    "@hh.ru/magritte-ui-theme-wrapper": "1.1.19",
+    "@hh.ru/magritte-ui-title": "8.3.3",
+    "@hh.ru/magritte-ui-tree-selector": "5.5.48"
+  },
+  "peerDependencies": {
+    "classnames": ">=2.3.2",
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0",
+    "react-transition-group": ">=4.4.5"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "c04d157907ffbb3a873f8cd98fb63c4034f93f69"
+}

package/types.d.ts

@@ -0,0 +1,72 @@
+import { ReactNode, PropsWithChildren, SyntheticEvent } from 'react';
+import { TitleProps } from '@hh.ru/magritte-ui-title';
+export type ModalHeight = 'content' | 'full-screen' | number;
+export interface ModalHeaderProps {
+    /** Текст заголовка */
+    title?: TitleProps['children'];
+    /** Размер заголовка */
+    titleSize?: TitleProps['size'];
+    /** Выравнивание заголовка */
+    titleAlignment?: TitleProps['alignment'];
+    /** Максимальное кол-во строк перед обрезкой содержимого описания многоточием */
+    titleMaxLines?: TitleProps['maxLines'];
+    /** Элемент используемый для заголовка */
+    titleElement?: TitleProps['Element'];
+    /** Текст подзаголовка */
+    titleDescription?: TitleProps['description'];
+    /** Максимальное кол-во строк перед обрезкой содержимого описания многоточием */
+    titleDescriptionMaxLines?: TitleProps['descriptionMaxLines'];
+    /** Цвет заголовка */
+    titleStyle?: TitleProps['style'];
+    titleDescriptionStyle?: TitleProps['descriptionStyle'];
+    /** URL изображения для фона заголовка. Будет проигнорирован, если передан headerImage. */
+    headerImageUrl?: string;
+    /** Произвольный контент в заголовке. Имеет приоритет перед headerImageUrl. */
+    headerImage?: ReactNode;
+    /** Высота заголовка в пикселях, если не передан проп headerImageUrl или headerImage, этот проп игнорируется */
+    headerHeight?: number;
+    /** Опциональный контент внизу хедера */
+    options?: ReactNode;
+    /** набор Icon-s внутри хедера */
+    actions?: ReactNode | ReactNode[];
+    /** Link внутри хедера */
+    actionLink?: ReactNode;
+}
+export interface ModalBaseProps extends PropsWithChildren {
+    /** Обработчик нажатия на кнопку закрытия */
+    onClose?: (event?: SyntheticEvent) => void;
+    /** Флаг управляющий видимостью модала */
+    visible?: boolean;
+    /** Размер */
+    size?: 'large' | 'medium' | 'small';
+    /** Хост для отрисовки модала */
+    host?: HTMLElement;
+    /** Содержимое футера, если нужно отрисовать кнопки, то должен использоваться ActionBar */
+    footer?: ReactNode;
+    /** Флаг отключающий верхний и нижний паддинги. Работает, только если все опциональные слоты отключены */
+    disableVerticalPaddings?: boolean;
+    /** Флаг отключающий левый и правый паддинги. Работает, только если все опциональные слоты отключены */
+    disableHorizontalPaddings?: boolean;
+    /** Флаг управляющий закрытием при клике вне Modal */
+    closeByClickOutside?: boolean;
+    /** Колбек, который будет вызван после завершения анимации открытия */
+    onAppear?: VoidFunction;
+    /** Колбек, который будет вызван перед началом анимации закрытия */
+    onBeforeExit?: VoidFunction;
+    /** Колбек, который будет вызван после анимации закрытия */
+    onAfterExit?: VoidFunction;
+    /** Высота (по контенту, во весь экран или фиксированная в пикселях) */
+    height?: ModalHeight;
+    /** Минимальная высота в пикселях. Имеет приоритет перед height. */
+    minHeight?: number;
+    /** Положение компонента на экране, определяет дефолтное значение пропа height */
+    position?: 'center' | 'left' | 'right';
+    /** Показывать ли оверлей, применяется только если position=left|right */
+    showOverlay?: boolean;
+    /** Отступ от верхнего края экрана под навигацию, применяется только если position=left|right и showOverlay=false */
+    pageHeaderPadding?: number;
+    /** Возвращать ли фокус на активный элемент после закрытия модала, по умолчанию `true` */
+    returnFocusOnClose?: boolean;
+}
+/** @deprecated Тип устарел. Используйте `ModalProps` из `@hh.ru/magritte-ui-modal` */
+export type ModalProps = ModalBaseProps & ModalHeaderProps;

package/types.js

@@ -0,0 +1,3 @@
+import './index.css';
+
+//# sourceMappingURL=types.js.map

package/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/useModalOrder.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export declare const useModalOrder: (visible: boolean, modalRef: RefObject<HTMLDivElement>) => [number, number];