@salutejs/plasma-new-hope 0.329.0-canary.1655.16029761547.0 → 0.329.0-canary.1655.16036539601.0
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/cjs/components/Modal/Modal.css +4 -3
- package/cjs/components/Modal/Modal.js +5 -2
- package/cjs/components/Modal/Modal.js.map +1 -1
- package/cjs/components/Modal/Modal.styles.js +16 -5
- package/cjs/components/Modal/Modal.styles.js.map +1 -1
- package/cjs/components/Modal/{Modal.styles_1gt0sfn.css → Modal.styles_1obtvtw.css} +4 -3
- package/cjs/components/Popup/Popup.js +7 -29
- package/cjs/components/Popup/Popup.js.map +1 -1
- package/cjs/components/Popup/utils/getHandleStyles.js +2 -1
- package/cjs/components/Popup/utils/getHandleStyles.js.map +1 -1
- package/cjs/index.css +4 -3
- package/emotion/cjs/components/Modal/Modal.js +5 -2
- package/emotion/cjs/components/Modal/Modal.styles.js +14 -6
- package/emotion/cjs/components/Popup/Popup.js +7 -30
- package/emotion/cjs/components/Popup/utils/getHandleStyles.js +2 -1
- package/emotion/es/components/Modal/Modal.js +6 -3
- package/emotion/es/components/Modal/Modal.styles.js +11 -6
- package/emotion/es/components/Popup/Popup.js +8 -31
- package/emotion/es/components/Popup/utils/getHandleStyles.js +2 -1
- package/es/components/Modal/Modal.css +4 -3
- package/es/components/Modal/Modal.js +8 -5
- package/es/components/Modal/Modal.js.map +1 -1
- package/es/components/Modal/Modal.styles.js +16 -6
- package/es/components/Modal/Modal.styles.js.map +1 -1
- package/es/components/Modal/{Modal.styles_1gt0sfn.css → Modal.styles_1obtvtw.css} +4 -3
- package/es/components/Popup/Popup.js +8 -30
- package/es/components/Popup/Popup.js.map +1 -1
- package/es/components/Popup/utils/getHandleStyles.js +2 -1
- package/es/components/Popup/utils/getHandleStyles.js.map +1 -1
- package/es/index.css +4 -3
- package/package.json +2 -2
- package/styled-components/cjs/components/Modal/Modal.js +5 -2
- package/styled-components/cjs/components/Modal/Modal.styles.js +50 -8
- package/styled-components/cjs/components/Popup/Popup.js +7 -30
- package/styled-components/cjs/components/Popup/utils/getHandleStyles.js +2 -1
- package/styled-components/es/components/Modal/Modal.js +6 -3
- package/styled-components/es/components/Modal/Modal.styles.js +8 -4
- package/styled-components/es/components/Popup/Popup.js +8 -31
- package/styled-components/es/components/Popup/utils/getHandleStyles.js +2 -1
- package/types/components/Modal/Modal.d.ts +1 -1
- package/types/components/Modal/Modal.d.ts.map +1 -1
- package/types/components/Modal/Modal.styles.d.ts +4 -1
- package/types/components/Modal/Modal.styles.d.ts.map +1 -1
- package/types/components/Popup/Popup.d.ts.map +1 -1
- package/types/components/Popup/Popup.types.d.ts +16 -1
- package/types/components/Popup/Popup.types.d.ts.map +1 -1
- package/types/components/Popup/utils/getHandleStyles.d.ts.map +1 -1
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
|
|
10
10
|
.IconRoot_7pl7ig_svvlqhf__32c458a1{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:var(--svvlqhf-0);height:var(--svvlqhf-0);-webkit-flex:0 0 var(--svvlqhf-0);-ms-flex:0 0 var(--svvlqhf-0);flex:0 0 var(--svvlqhf-0);}
|
|
11
11
|
|
|
12
|
-
.
|
|
13
|
-
.
|
|
14
|
-
.
|
|
12
|
+
.Modal_styles_1obtvtw_b7npn1w__a2f4e50d{height:100%;}
|
|
13
|
+
.Modal_styles_1obtvtw_m16phoaz__a2f4e50d{height:100%;box-sizing:border-box;border-radius:var(--plasma-modal-body-border-radius);padding:var(--plasma-modal-body-padding);background:var(--plasma-modal-body-background);box-shadow:var(--shadow-down-soft-l);}
|
|
14
|
+
.Modal_styles_1obtvtw_m5bx5hr__a2f4e50d{position:relative;padding:var(--plasma-modal-content-padding);}
|
|
15
|
+
.Modal_styles_1obtvtw_cjp242v__a2f4e50d{top:0;right:0;width:1.5rem;height:1.5rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border:none;border-radius:var(--plasma-modal-close-button-radius);padding:0;margin:0;outline:none;cursor:pointer;background:transparent;position:relative;color:var(--plasma-modal-close-button-color);position:absolute;}.Modal_styles_1obtvtw_cjp242v__a2f4e50d::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.063rem solid transparent;border-radius:calc(var(--plasma-modal-close-button-radius) + 0.063rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.Modal_styles_1obtvtw_cjp242v__a2f4e50d.Modal_styles_1obtvtw_focusVisible__a2f4e50d:focus::before,.Modal_styles_1obtvtw_cjp242v__a2f4e50d[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.063rem var(--plasma-modal-outline-focus-color);}.Modal_styles_1obtvtw_cjp242v__a2f4e50d:hover{color:var(--plasma-modal-close-button-hover-color);}.Modal_styles_1obtvtw_cjp242v__a2f4e50d:active{color:var(--plasma-modal-close-button-active-color);}
|
|
@@ -63,6 +63,7 @@ var modalRoot = function modalRoot(Root) {
|
|
|
63
63
|
var innerHasClose = hasClose === undefined && hasBody || hasClose;
|
|
64
64
|
var trapRef = useFocusTrap.useFocusTrap(true, initialFocusRef, focusAfterRef, true);
|
|
65
65
|
var popupController = PopupContext.usePopupContext();
|
|
66
|
+
var isResizableEnabled = Boolean(resizable && !resizable.disabled);
|
|
66
67
|
var innerRef = plasmaCore.useForkRef(trapRef, outerRootRef);
|
|
67
68
|
var uniqId = react.safeUseId();
|
|
68
69
|
var innerId = id || uniqId;
|
|
@@ -112,7 +113,9 @@ var modalRoot = function modalRoot(Root) {
|
|
|
112
113
|
resizable: resizable
|
|
113
114
|
}, rest), hasBody ? /*#__PURE__*/React__default.default.createElement(Root, {
|
|
114
115
|
view: view
|
|
115
|
-
}, /*#__PURE__*/React__default.default.createElement(Modal_styles.ModalBody,
|
|
116
|
+
}, /*#__PURE__*/React__default.default.createElement(Modal_styles.ModalBody, {
|
|
117
|
+
isResizableEnabled: isResizableEnabled
|
|
118
|
+
}, /*#__PURE__*/React__default.default.createElement(Modal_styles.ModalContent, null, innerHasClose && /*#__PURE__*/React__default.default.createElement(Modal_styles.CloseButton, {
|
|
116
119
|
onClick: onClose,
|
|
117
120
|
"data-test": "modal-close"
|
|
118
121
|
}, _IconClose || (_IconClose = /*#__PURE__*/React__default.default.createElement(IconClose.IconClose, {
|
|
@@ -125,7 +128,7 @@ var modalConfig = {
|
|
|
125
128
|
name: 'Modal',
|
|
126
129
|
tag: 'div',
|
|
127
130
|
layout: modalRoot,
|
|
128
|
-
base:
|
|
131
|
+
base: Modal_styles.base,
|
|
129
132
|
variations: {
|
|
130
133
|
view: {
|
|
131
134
|
css: base.base
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo } from 'react';\nimport { useForkRef } from '@salutejs/plasma-core';\nimport { safeUseId } from 'src/utils';\nimport { RootProps, component } from 'src/engines';\nimport { useFocusTrap } from 'src/hooks';\n\nimport { popupConfig, usePopupContext } from '../Popup';\nimport { Overlay } from '../Overlay';\nimport { DEFAULT_Z_INDEX } from '../Popup/utils';\nimport { IconClose } from '../_Icon/Icons/IconClose';\n\nimport { classes, tokens } from './Modal.tokens';\nimport { ModalProps } from './Modal.types';\nimport { useModal } from './hooks';\nimport { base as viewCSS } from './variations/_view/base';\nimport { getIdLastModal } from './ModalContext';\nimport { CloseButton, ModalBody, ModalContent } from './Modal.styles';\n\n// issue #823\nconst Popup = component(popupConfig);\n\n/**\n * Modal.\n * Управляет показом/скрытием, подложкой и анимацией визуальной части модального окна.\n */\nexport const modalRoot = (Root: RootProps<HTMLDivElement, ModalProps>) =>\n forwardRef<HTMLDivElement, ModalProps>(\n (\n {\n id,\n withAnimation,\n onClose,\n onOverlayClick,\n onEscKeyDown,\n closeOnEsc = true,\n closeOnOverlayClick = true,\n withBlur,\n initialFocusRef,\n focusAfterRef,\n zIndex,\n popupInfo,\n children,\n view,\n opened,\n isOpen,\n hasBody,\n hasClose,\n draggable,\n handle,\n resizable,\n ...rest\n },\n outerRootRef,\n ) => {\n const innerIsOpen = Boolean(isOpen || opened);\n const innerHasClose = (hasClose === undefined && hasBody) || hasClose;\n const trapRef = useFocusTrap(true, initialFocusRef, focusAfterRef, true);\n const popupController = usePopupContext();\n\n const innerRef = useForkRef<HTMLDivElement>(trapRef, outerRootRef);\n\n const uniqId = safeUseId();\n const innerId = id || uniqId;\n const overlayBackgroundToken = withBlur\n ? `var(${tokens.modalOverlayWithBlurColor})`\n : `var(${tokens.modalOverlayColor})`;\n\n const { modalInfo } = useModal({\n id: innerId,\n isOpen: innerIsOpen,\n closeOnEsc,\n onEscKeyDown,\n onClose,\n popupInfo,\n });\n\n const transparent = useMemo(() => getIdLastModal(Array.from(popupController.items.values())) !== innerId, [\n innerId,\n popupController.items,\n ]);\n\n const onModalOverlayKeyDown = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n if (onOverlayClick) {\n onOverlayClick(event);\n return;\n }\n\n if (onClose) {\n onClose();\n }\n },\n [closeOnOverlayClick, onOverlayClick, onClose],\n );\n\n const overlayNode = (\n <Overlay\n className={classes.overlay}\n zIndex={zIndex || DEFAULT_Z_INDEX}\n backgroundColorProperty={overlayBackgroundToken}\n withBlur={withBlur}\n transparent={transparent}\n isClickable={closeOnOverlayClick}\n onOverlayClick={onModalOverlayKeyDown}\n />\n );\n\n return (\n <Popup\n id={innerId}\n opened={innerIsOpen}\n ref={innerRef}\n popupInfo={modalInfo}\n withAnimation={withAnimation}\n zIndex={zIndex}\n overlay={hasBody ? overlayNode : <Root view={view}>{overlayNode}</Root>}\n draggable={draggable}\n handle={handle}\n resizable={resizable}\n {...rest}\n >\n {hasBody ? (\n <Root view={view}>\n <ModalBody>\n <ModalContent>\n {innerHasClose && (\n <CloseButton onClick={onClose} data-test=\"modal-close\">\n <IconClose size=\"s\" color=\"currentColor\" />\n </CloseButton>\n )}\n {children}\n </ModalContent>\n </ModalBody>\n </Root>\n ) : (\n <>{children}</>\n )}\n </Popup>\n );\n },\n );\n\nexport const modalConfig = {\n name: 'Modal',\n tag: 'div',\n layout: modalRoot,\n base: '',\n variations: {\n view: {\n css: viewCSS,\n },\n },\n defaults: {\n view: 'default',\n },\n};\n"],"names":["Popup","component","popupConfig","modalRoot","Root","forwardRef","_ref","outerRootRef","id","withAnimation","onClose","onOverlayClick","onEscKeyDown","_ref$closeOnEsc","closeOnEsc","_ref$closeOnOverlayCl","closeOnOverlayClick","withBlur","initialFocusRef","focusAfterRef","zIndex","popupInfo","children","view","opened","isOpen","hasBody","hasClose","draggable","handle","resizable","rest","_objectWithoutProperties","_excluded","innerIsOpen","Boolean","innerHasClose","undefined","trapRef","useFocusTrap","popupController","usePopupContext","innerRef","useForkRef","uniqId","safeUseId","innerId","overlayBackgroundToken","concat","tokens","modalOverlayWithBlurColor","modalOverlayColor","_useModal","useModal","modalInfo","transparent","useMemo","getIdLastModal","Array","from","items","values","onModalOverlayKeyDown","useCallback","event","overlayNode","React","createElement","Overlay","className","classes","overlay","DEFAULT_Z_INDEX","backgroundColorProperty","isClickable","_extends","ref","ModalBody","ModalContent","CloseButton","onClick","_IconClose","IconClose","size","color","Fragment","modalConfig","name","tag","layout","base","variations","css","viewCSS","defaults"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Modal.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo } from 'react';\nimport { useForkRef } from '@salutejs/plasma-core';\nimport { safeUseId } from 'src/utils';\nimport { RootProps, component } from 'src/engines';\nimport { useFocusTrap } from 'src/hooks';\n\nimport { popupConfig, usePopupContext } from '../Popup';\nimport { Overlay } from '../Overlay';\nimport { DEFAULT_Z_INDEX } from '../Popup/utils';\nimport { IconClose } from '../_Icon/Icons/IconClose';\n\nimport { classes, tokens } from './Modal.tokens';\nimport { ModalProps } from './Modal.types';\nimport { useModal } from './hooks';\nimport { base as viewCSS } from './variations/_view/base';\nimport { getIdLastModal } from './ModalContext';\nimport { CloseButton, ModalBody, ModalContent, base } from './Modal.styles';\n\n// issue #823\nconst Popup = component(popupConfig);\n\n/**\n * Modal.\n * Управляет показом/скрытием, подложкой и анимацией визуальной части модального окна.\n */\nexport const modalRoot = (Root: RootProps<HTMLDivElement, ModalProps>) =>\n forwardRef<HTMLDivElement, ModalProps>(\n (\n {\n id,\n withAnimation,\n onClose,\n onOverlayClick,\n onEscKeyDown,\n closeOnEsc = true,\n closeOnOverlayClick = true,\n withBlur,\n initialFocusRef,\n focusAfterRef,\n zIndex,\n popupInfo,\n children,\n view,\n opened,\n isOpen,\n hasBody,\n hasClose,\n draggable,\n handle,\n resizable,\n ...rest\n },\n outerRootRef,\n ) => {\n const innerIsOpen = Boolean(isOpen || opened);\n const innerHasClose = (hasClose === undefined && hasBody) || hasClose;\n const trapRef = useFocusTrap(true, initialFocusRef, focusAfterRef, true);\n const popupController = usePopupContext();\n const isResizableEnabled = Boolean(resizable && !resizable.disabled);\n\n const innerRef = useForkRef<HTMLDivElement>(trapRef, outerRootRef);\n\n const uniqId = safeUseId();\n const innerId = id || uniqId;\n const overlayBackgroundToken = withBlur\n ? `var(${tokens.modalOverlayWithBlurColor})`\n : `var(${tokens.modalOverlayColor})`;\n\n const { modalInfo } = useModal({\n id: innerId,\n isOpen: innerIsOpen,\n closeOnEsc,\n onEscKeyDown,\n onClose,\n popupInfo,\n });\n\n const transparent = useMemo(() => getIdLastModal(Array.from(popupController.items.values())) !== innerId, [\n innerId,\n popupController.items,\n ]);\n\n const onModalOverlayKeyDown = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n if (onOverlayClick) {\n onOverlayClick(event);\n return;\n }\n\n if (onClose) {\n onClose();\n }\n },\n [closeOnOverlayClick, onOverlayClick, onClose],\n );\n\n const overlayNode = (\n <Overlay\n className={classes.overlay}\n zIndex={zIndex || DEFAULT_Z_INDEX}\n backgroundColorProperty={overlayBackgroundToken}\n withBlur={withBlur}\n transparent={transparent}\n isClickable={closeOnOverlayClick}\n onOverlayClick={onModalOverlayKeyDown}\n />\n );\n\n return (\n <Popup\n id={innerId}\n opened={innerIsOpen}\n ref={innerRef}\n popupInfo={modalInfo}\n withAnimation={withAnimation}\n zIndex={zIndex}\n overlay={hasBody ? overlayNode : <Root view={view}>{overlayNode}</Root>}\n draggable={draggable}\n handle={handle}\n resizable={resizable}\n {...rest}\n >\n {hasBody ? (\n <Root view={view}>\n <ModalBody isResizableEnabled={isResizableEnabled}>\n <ModalContent>\n {innerHasClose && (\n <CloseButton onClick={onClose} data-test=\"modal-close\">\n <IconClose size=\"s\" color=\"currentColor\" />\n </CloseButton>\n )}\n {children}\n </ModalContent>\n </ModalBody>\n </Root>\n ) : (\n <>{children}</>\n )}\n </Popup>\n );\n },\n );\n\nexport const modalConfig = {\n name: 'Modal',\n tag: 'div',\n layout: modalRoot,\n base,\n variations: {\n view: {\n css: viewCSS,\n },\n },\n defaults: {\n view: 'default',\n },\n};\n"],"names":["Popup","component","popupConfig","modalRoot","Root","forwardRef","_ref","outerRootRef","id","withAnimation","onClose","onOverlayClick","onEscKeyDown","_ref$closeOnEsc","closeOnEsc","_ref$closeOnOverlayCl","closeOnOverlayClick","withBlur","initialFocusRef","focusAfterRef","zIndex","popupInfo","children","view","opened","isOpen","hasBody","hasClose","draggable","handle","resizable","rest","_objectWithoutProperties","_excluded","innerIsOpen","Boolean","innerHasClose","undefined","trapRef","useFocusTrap","popupController","usePopupContext","isResizableEnabled","disabled","innerRef","useForkRef","uniqId","safeUseId","innerId","overlayBackgroundToken","concat","tokens","modalOverlayWithBlurColor","modalOverlayColor","_useModal","useModal","modalInfo","transparent","useMemo","getIdLastModal","Array","from","items","values","onModalOverlayKeyDown","useCallback","event","overlayNode","React","createElement","Overlay","className","classes","overlay","DEFAULT_Z_INDEX","backgroundColorProperty","isClickable","_extends","ref","ModalBody","ModalContent","CloseButton","onClick","_IconClose","IconClose","size","color","Fragment","modalConfig","name","tag","layout","base","variations","css","viewCSS","defaults"],"mappings":"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"}
|
|
@@ -1,27 +1,38 @@
|
|
|
1
|
-
require('./Modal.
|
|
1
|
+
require('./Modal.styles_1obtvtw.css');
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
4
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
5
5
|
|
|
6
6
|
var react = require('@linaria/react');
|
|
7
7
|
|
|
8
|
+
var base = "b7npn1w";
|
|
9
|
+
var _exp = function _exp() {
|
|
10
|
+
return function (_ref) {
|
|
11
|
+
var isResizableEnabled = _ref.isResizableEnabled;
|
|
12
|
+
return isResizableEnabled ? '100%' : 'auto';
|
|
13
|
+
};
|
|
14
|
+
};
|
|
8
15
|
var ModalBody = /*#__PURE__*/react.styled('div')({
|
|
9
16
|
name: "ModalBody",
|
|
10
|
-
"class": "
|
|
11
|
-
propsAsIs: false
|
|
17
|
+
"class": "m16phoaz",
|
|
18
|
+
propsAsIs: false,
|
|
19
|
+
vars: {
|
|
20
|
+
"m16phoaz-0": [/*#__PURE__*/_exp()]
|
|
21
|
+
}
|
|
12
22
|
});
|
|
13
23
|
var ModalContent = /*#__PURE__*/react.styled('div')({
|
|
14
24
|
name: "ModalContent",
|
|
15
|
-
"class": "
|
|
25
|
+
"class": "m5bx5hr",
|
|
16
26
|
propsAsIs: false
|
|
17
27
|
});
|
|
18
28
|
var CloseButton = /*#__PURE__*/react.styled('button')({
|
|
19
29
|
name: "CloseButton",
|
|
20
|
-
"class": "
|
|
30
|
+
"class": "cjp242v",
|
|
21
31
|
propsAsIs: false
|
|
22
32
|
});
|
|
23
33
|
|
|
24
34
|
exports.CloseButton = CloseButton;
|
|
25
35
|
exports.ModalBody = ModalBody;
|
|
26
36
|
exports.ModalContent = ModalContent;
|
|
37
|
+
exports.base = base;
|
|
27
38
|
//# sourceMappingURL=Modal.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.styles.js","sources":["../../../src/components/Modal/Modal.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\n\nimport { addFocus } from '../../mixins';\n\nimport { tokens } from './Modal.tokens';\n\nexport const ModalBody = styled.div
|
|
1
|
+
{"version":3,"file":"Modal.styles.js","sources":["../../../src/components/Modal/Modal.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\nimport { css } from '@linaria/core';\n\nimport { addFocus } from '../../mixins';\n\nimport { tokens } from './Modal.tokens';\n\nexport const base = css`\n height: 100%;\n`;\n\nexport const ModalBody = styled.div<{ isResizableEnabled: boolean }>`\n //height: ${({ isResizableEnabled }) => (isResizableEnabled ? '100%' : 'auto')};\n height: 100%;\n box-sizing: border-box;\n border-radius: var(${tokens.modalBodyBorderRadius});\n padding: var(${tokens.modalBodyPadding});\n background: var(${tokens.modalBodyBackground});\n box-shadow: var(--shadow-down-soft-l);\n`;\n\nexport const ModalContent = styled.div`\n position: relative;\n padding: var(${tokens.modalContentPadding});\n`;\n\nexport const CloseButton = styled.button`\n top: 0;\n right: 0;\n\n width: 1.5rem;\n height: 1.5rem;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n border: none;\n border-radius: var(${tokens.modalCloseButtonRadius});\n\n padding: 0;\n margin: 0;\n outline: none;\n\n cursor: pointer;\n\n background: transparent;\n\n ${addFocus({\n outlineSize: '0.063rem',\n outlineOffset: '-0.125rem',\n outlineColor: `var(${tokens.modalOutlineFocusColor})`,\n outlineRadius: `calc(var(${tokens.modalCloseButtonRadius}) + 0.063rem)`,\n })};\n\n color: var(${tokens.modalCloseButtonColor});\n\n &:hover {\n color: var(${tokens.modalCloseButtonHoverColor});\n }\n\n &:active {\n color: var(${tokens.modalCloseButtonActiveColor});\n }\n\n position: absolute;\n`;\n"],"names":["base","_exp","_ref","isResizableEnabled","ModalBody","styled","name","class","propsAsIs","vars","ModalContent","CloseButton"],"mappings":";;;;;;AAOO,IAAMA,IAAI,GAEhB,UAAA;AAAC,IAAAC,IAAA,GARgBA,SAQhBA,IAAAA,GAAA;AAAA,EAAA,OAGc,UAAAC,IAAA,EAAA;AAAA,IAAA,IAAGC,kBAAAA,GAAAA,IAAAA,CAAAA,kBAAAA,CAAAA;AAAAA,IAAAA,OAA0BA,kBAAkB,GAAG,MAAM,GAAG,MAAO,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAD3E,IAAMC,SAAS,gBAAGC,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,WAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAAC,EAAAA,IAAA,EAAA;AAAA,IAAA,YAAA,EAAA,cACfR,IAAkE,EAAA,CAAA;AAAA,GAAA;AAAA,CAOjF,EAAA;AAEM,IAAMS,YAAY,gBAAGL,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,cAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAGjC,EAAA;AAEM,IAAMG,WAAW,gBAAGN,YAAM,CAAA,QAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,aAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAwChC;;;;;;;"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
-
.
|
|
2
|
-
.m16phoaz{
|
|
3
|
-
.
|
|
1
|
+
.b7npn1w{height:100%;}
|
|
2
|
+
.m16phoaz{height:100%;box-sizing:border-box;border-radius:var(--plasma-modal-body-border-radius);padding:var(--plasma-modal-body-padding);background:var(--plasma-modal-body-background);box-shadow:var(--shadow-down-soft-l);}
|
|
3
|
+
.m5bx5hr{position:relative;padding:var(--plasma-modal-content-padding);}
|
|
4
|
+
.cjp242v{top:0;right:0;width:1.5rem;height:1.5rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border:none;border-radius:var(--plasma-modal-close-button-radius);padding:0;margin:0;outline:none;cursor:pointer;background:transparent;position:relative;color:var(--plasma-modal-close-button-color);position:absolute;}.cjp242v::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.063rem solid transparent;border-radius:calc(var(--plasma-modal-close-button-radius) + 0.063rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.cjp242v.focus-visible:focus::before,.cjp242v[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.063rem var(--plasma-modal-outline-focus-color);}.cjp242v:hover{color:var(--plasma-modal-close-button-hover-color);}.cjp242v:active{color:var(--plasma-modal-close-button-active-color);}
|
|
@@ -104,10 +104,6 @@ var popupRoot = function popupRoot(Root) {
|
|
|
104
104
|
className = _ref.className,
|
|
105
105
|
resizable = _ref.resizable,
|
|
106
106
|
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
|
|
107
|
-
var resizableDimensions = React.useRef({
|
|
108
|
-
width: 0,
|
|
109
|
-
height: 0
|
|
110
|
-
});
|
|
111
107
|
var innerIsOpen = isOpen || opened;
|
|
112
108
|
var uniqId = react.safeUseId();
|
|
113
109
|
var innerId = id || uniqId;
|
|
@@ -125,25 +121,6 @@ var popupRoot = function popupRoot(Root) {
|
|
|
125
121
|
var contentRef = React.useRef(null);
|
|
126
122
|
var innerRef = plasmaCore.useForkRef(contentRef, outerRootRef);
|
|
127
123
|
var cls = index.cx(className, animationInfo !== null && animationInfo !== void 0 && animationInfo.endAnimation ? Popup_tokens.classes.endAnimation : '', animationInfo !== null && animationInfo !== void 0 && animationInfo.endTransition ? Popup_tokens.classes.endTransition : '');
|
|
128
|
-
|
|
129
|
-
// Хук для получения размеров попапа, которые задаются как минимальные габариты при ресайзе.
|
|
130
|
-
React.useLayoutEffect(function () {
|
|
131
|
-
var _contentRef$current;
|
|
132
|
-
if (!innerIsOpen) return;
|
|
133
|
-
var rect = (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.getBoundingClientRect();
|
|
134
|
-
if (rect) {
|
|
135
|
-
resizableDimensions.current = {
|
|
136
|
-
width: rect.width,
|
|
137
|
-
height: rect.height
|
|
138
|
-
};
|
|
139
|
-
}
|
|
140
|
-
return function () {
|
|
141
|
-
resizableDimensions.current = {
|
|
142
|
-
width: 0,
|
|
143
|
-
height: 0
|
|
144
|
-
};
|
|
145
|
-
};
|
|
146
|
-
}, [innerIsOpen]);
|
|
147
124
|
if (!isVisible && !innerIsOpen) {
|
|
148
125
|
return null;
|
|
149
126
|
}
|
|
@@ -160,9 +137,12 @@ var popupRoot = function popupRoot(Root) {
|
|
|
160
137
|
}, rest), /*#__PURE__*/React__default.default.createElement(reResizable.Resizable, {
|
|
161
138
|
enable: resizable && !resizable.disabled ? getResizeDirections.getResizeDirections(resizable.directions) : false,
|
|
162
139
|
resizeRatio: getRatioBasedOnPlacement.getRatioBasedOnPlacement(placement),
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
140
|
+
defaultSize: resizable === null || resizable === void 0 ? void 0 : resizable.defaultSize,
|
|
141
|
+
minWidth: resizable === null || resizable === void 0 ? void 0 : resizable.minWidth,
|
|
142
|
+
minHeight: resizable === null || resizable === void 0 ? void 0 : resizable.minHeight,
|
|
143
|
+
maxWidth: resizable === null || resizable === void 0 ? void 0 : resizable.maxWidth,
|
|
144
|
+
maxHeight: resizable === null || resizable === void 0 ? void 0 : resizable.maxHeight,
|
|
145
|
+
handleComponent: resizable !== null && resizable !== void 0 && resizable.hiddenIcon ? {} : {
|
|
166
146
|
topRight: /*#__PURE__*/React__default.default.createElement(Popup_styles.IconResizeDiagonalStyled, {
|
|
167
147
|
className: Popup_tokens.classes.resizableTopRightIcon,
|
|
168
148
|
color: "inherit",
|
|
@@ -185,9 +165,7 @@ var popupRoot = function popupRoot(Root) {
|
|
|
185
165
|
})
|
|
186
166
|
},
|
|
187
167
|
className: Popup_tokens.classes.resizableContainer,
|
|
188
|
-
handleStyles: getHandleStyles.getHandleStyles(resizable === null || resizable === void 0 ? void 0 : resizable.iconSize)
|
|
189
|
-
maxWidth: resizable === null || resizable === void 0 ? void 0 : resizable.maxWidth,
|
|
190
|
-
maxHeight: resizable === null || resizable === void 0 ? void 0 : resizable.maxHeight
|
|
168
|
+
handleStyles: getHandleStyles.getHandleStyles(resizable === null || resizable === void 0 ? void 0 : resizable.iconSize)
|
|
191
169
|
}, children)));
|
|
192
170
|
if (typeof frame !== 'string' && frame && frame.current && canUseDOM.canUseDOM) {
|
|
193
171
|
return /*#__PURE__*/React__default.default.createElement(Portal.Portal, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popup.js","sources":["../../../src/components/Popup/Popup.tsx"],"sourcesContent":["import React, { forwardRef, useRef, useLayoutEffect } from 'react';\nimport { useForkRef } from '@salutejs/plasma-core';\n// import Draggable from 'react-draggable';\nimport { Resizable } from 're-resizable';\nimport { RootProps } from 'src/engines/types';\nimport { canUseDOM, cx, safeUseId } from 'src/utils';\n\nimport { Portal } from '../Portal';\n\nimport { getRatioBasedOnPlacement, getResizeDirections, getHandleStyles } from './utils';\nimport type { PopupPlacementBasic, PopupPlacement, PopupPositionType, PopupProps } from './Popup.types';\nimport { PopupRoot } from './PopupRoot';\nimport { usePopup } from './hooks';\nimport { classes } from './Popup.tokens';\nimport { StyledPortalContainer, base, IconResizeDiagonalStyled } from './Popup.styles';\n\nexport const handlePosition = (\n placement: PopupPlacement,\n offset: [number, number] | [string, string],\n): PopupPositionType => {\n let x = '0rem';\n let y = '0rem';\n\n if (offset) {\n const [_x, _y] = offset;\n x = typeof _x === 'number' ? `${_x}rem` : _x;\n y = typeof _y === 'number' ? `${_y}rem` : _y;\n }\n\n if (!placement || placement === 'center') {\n return {\n left: `calc(50% + ${x})`,\n top: `calc(50% - ${y})`,\n transform: 'translate(-50%, -50%)',\n };\n }\n\n let left;\n let right;\n let top;\n let bottom;\n let transform;\n const placements = placement.split('-') as PopupPlacementBasic[];\n\n placements.forEach((placementValue: PopupPlacementBasic) => {\n switch (placementValue) {\n case 'left':\n left = x;\n break;\n case 'right':\n right = x;\n break;\n case 'top':\n top = y;\n break;\n case 'bottom':\n bottom = y;\n break;\n default:\n break;\n }\n });\n\n const isCenteredX = left === undefined && right === undefined;\n const isCenteredY = top === undefined && bottom === undefined;\n\n if (isCenteredX) {\n transform = 'translateX(-50%)';\n }\n\n if (isCenteredY) {\n transform = 'translateY(-50%)';\n }\n\n return {\n left: isCenteredX ? `calc(50% + ${x})` : left,\n right,\n top: isCenteredY ? `calc(50% - ${y})` : top,\n bottom,\n transform,\n };\n};\n\n/**\n * Базовый компонент Popup.\n */\nexport const popupRoot = (Root: RootProps<HTMLDivElement, PopupProps>) =>\n forwardRef<HTMLDivElement, PopupProps>(\n (\n {\n id,\n isOpen = false,\n opened = false,\n placement = 'center',\n offset = [0, 0],\n frame = 'document',\n children,\n overlay,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n role,\n zIndex,\n popupInfo,\n withAnimation = false,\n className,\n draggable = false,\n handle,\n resizable,\n ...rest\n },\n outerRootRef,\n ) => {\n const resizableDimensions = useRef({ width: 0, height: 0 });\n\n const innerIsOpen = isOpen || opened;\n\n const uniqId = safeUseId();\n const innerId = id || uniqId;\n\n const { isVisible, animationInfo, setVisible, rootId } = usePopup({\n isOpen: innerIsOpen,\n id: innerId,\n popupInfo,\n withAnimation,\n });\n\n const portalRef = useRef<HTMLDivElement | null>(null);\n const contentRef = useRef<HTMLDivElement | null>(null);\n\n const innerRef = useForkRef<HTMLDivElement>(contentRef, outerRootRef);\n\n const cls = cx(\n className,\n animationInfo?.endAnimation ? classes.endAnimation : '',\n animationInfo?.endTransition ? classes.endTransition : '',\n );\n\n // Хук для получения размеров попапа, которые задаются как минимальные габариты при ресайзе.\n useLayoutEffect(() => {\n if (!innerIsOpen) return;\n\n const rect = contentRef.current?.getBoundingClientRect();\n\n if (rect) {\n resizableDimensions.current = {\n width: rect.width,\n height: rect.height,\n };\n }\n\n return () => {\n resizableDimensions.current = {\n width: 0,\n height: 0,\n };\n };\n }, [innerIsOpen]);\n\n if (!isVisible && !innerIsOpen) {\n return null;\n }\n\n const rootNode = (\n <Root className={cls}>\n {overlay}\n\n <PopupRoot\n id={innerId}\n ref={innerRef}\n position={handlePosition(placement, offset)}\n zIndex={zIndex}\n frame={frame}\n animationInfo={animationInfo}\n setVisible={setVisible}\n {...rest}\n >\n <Resizable\n enable={\n resizable && !resizable.disabled ? getResizeDirections(resizable.directions) : false\n }\n resizeRatio={getRatioBasedOnPlacement(placement)}\n minWidth={resizableDimensions.current.width}\n minHeight={resizableDimensions.current.height}\n handleComponent={\n !resizable?.hiddenIcon && {\n topRight: (\n <IconResizeDiagonalStyled\n className={classes.resizableTopRightIcon}\n color=\"inherit\"\n size={resizable?.iconSize}\n />\n ),\n bottomRight: (\n <IconResizeDiagonalStyled\n className={classes.resizableBottomRightIcon}\n color=\"inherit\"\n size={resizable?.iconSize}\n />\n ),\n bottomLeft: (\n <IconResizeDiagonalStyled\n className={classes.resizableBottomLeftIcon}\n color=\"inherit\"\n size={resizable?.iconSize}\n />\n ),\n topLeft: (\n <IconResizeDiagonalStyled\n className={classes.resizableTopLeftIcon}\n color=\"inherit\"\n size={resizable?.iconSize}\n />\n ),\n }\n }\n className={classes.resizableContainer}\n handleStyles={getHandleStyles(resizable?.iconSize)}\n maxWidth={resizable?.maxWidth}\n maxHeight={resizable?.maxHeight}\n >\n {children}\n </Resizable>\n </PopupRoot>\n </Root>\n );\n\n if (typeof frame !== 'string' && frame && frame.current && canUseDOM) {\n return <Portal container={frame.current}>{rootNode}</Portal>;\n }\n\n const withFrameId = typeof frame === 'string' && frame !== 'document';\n const containerElement = withFrameId && canUseDOM && document.getElementById(frame as string);\n\n if (containerElement) {\n return (\n <Portal container={containerElement}>\n <StyledPortalContainer ref={portalRef}>\n {portalRef.current && <Portal container={portalRef.current}>{rootNode}</Portal>}\n </StyledPortalContainer>{' '}\n </Portal>\n );\n }\n\n const globalPortal = canUseDOM && document.getElementById(rootId);\n\n return <>{globalPortal && <Portal container={globalPortal}>{rootNode}</Portal>}</>;\n },\n );\n\nexport const popupConfig = {\n name: 'Popup',\n tag: 'div',\n layout: popupRoot,\n base,\n variations: {},\n defaults: {},\n};\n"],"names":["handlePosition","placement","offset","x","y","_offset","_slicedToArray","_x","_y","concat","left","top","transform","right","bottom","placements","split","forEach","placementValue","isCenteredX","undefined","isCenteredY","popupRoot","Root","forwardRef","_ref","outerRootRef","id","_ref$isOpen","isOpen","_ref$opened","opened","_ref$placement","_ref$offset","_ref$frame","frame","children","overlay","zIndex","popupInfo","_ref$withAnimation","withAnimation","className","resizable","rest","_objectWithoutProperties","_excluded","resizableDimensions","useRef","width","height","innerIsOpen","uniqId","safeUseId","innerId","_usePopup","usePopup","isVisible","animationInfo","setVisible","rootId","portalRef","contentRef","innerRef","useForkRef","cls","cx","endAnimation","classes","endTransition","useLayoutEffect","_contentRef$current","rect","current","getBoundingClientRect","rootNode","React","createElement","PopupRoot","_extends","ref","position","Resizable","enable","disabled","getResizeDirections","directions","resizeRatio","getRatioBasedOnPlacement","minWidth","minHeight","handleComponent","hiddenIcon","topRight","IconResizeDiagonalStyled","resizableTopRightIcon","color","size","iconSize","bottomRight","resizableBottomRightIcon","bottomLeft","resizableBottomLeftIcon","topLeft","resizableTopLeftIcon","resizableContainer","handleStyles","getHandleStyles","maxWidth","maxHeight","canUseDOM","Portal","container","withFrameId","containerElement","document","getElementById","StyledPortalContainer","globalPortal","Fragment","popupConfig","name","tag","layout","base","variations","defaults"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Popup.js","sources":["../../../src/components/Popup/Popup.tsx"],"sourcesContent":["import React, { forwardRef, useRef } from 'react';\nimport { useForkRef } from '@salutejs/plasma-core';\n// import Draggable from 'react-draggable';\nimport { Resizable } from 're-resizable';\nimport { RootProps } from 'src/engines/types';\nimport { canUseDOM, cx, safeUseId } from 'src/utils';\n\nimport { Portal } from '../Portal';\n\nimport { getRatioBasedOnPlacement, getResizeDirections, getHandleStyles } from './utils';\nimport type { PopupPlacementBasic, PopupPlacement, PopupPositionType, PopupProps } from './Popup.types';\nimport { PopupRoot } from './PopupRoot';\nimport { usePopup } from './hooks';\nimport { classes } from './Popup.tokens';\nimport { StyledPortalContainer, base, IconResizeDiagonalStyled } from './Popup.styles';\n\nexport const handlePosition = (\n placement: PopupPlacement,\n offset: [number, number] | [string, string],\n): PopupPositionType => {\n let x = '0rem';\n let y = '0rem';\n\n if (offset) {\n const [_x, _y] = offset;\n x = typeof _x === 'number' ? `${_x}rem` : _x;\n y = typeof _y === 'number' ? `${_y}rem` : _y;\n }\n\n if (!placement || placement === 'center') {\n return {\n left: `calc(50% + ${x})`,\n top: `calc(50% - ${y})`,\n transform: 'translate(-50%, -50%)',\n };\n }\n\n let left;\n let right;\n let top;\n let bottom;\n let transform;\n const placements = placement.split('-') as PopupPlacementBasic[];\n\n placements.forEach((placementValue: PopupPlacementBasic) => {\n switch (placementValue) {\n case 'left':\n left = x;\n break;\n case 'right':\n right = x;\n break;\n case 'top':\n top = y;\n break;\n case 'bottom':\n bottom = y;\n break;\n default:\n break;\n }\n });\n\n const isCenteredX = left === undefined && right === undefined;\n const isCenteredY = top === undefined && bottom === undefined;\n\n if (isCenteredX) {\n transform = 'translateX(-50%)';\n }\n\n if (isCenteredY) {\n transform = 'translateY(-50%)';\n }\n\n return {\n left: isCenteredX ? `calc(50% + ${x})` : left,\n right,\n top: isCenteredY ? `calc(50% - ${y})` : top,\n bottom,\n transform,\n };\n};\n\n/**\n * Базовый компонент Popup.\n */\nexport const popupRoot = (Root: RootProps<HTMLDivElement, PopupProps>) =>\n forwardRef<HTMLDivElement, PopupProps>(\n (\n {\n id,\n isOpen = false,\n opened = false,\n placement = 'center',\n offset = [0, 0],\n frame = 'document',\n children,\n overlay,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n role,\n zIndex,\n popupInfo,\n withAnimation = false,\n className,\n draggable = false,\n handle,\n resizable,\n ...rest\n },\n outerRootRef,\n ) => {\n const innerIsOpen = isOpen || opened;\n\n const uniqId = safeUseId();\n const innerId = id || uniqId;\n\n const { isVisible, animationInfo, setVisible, rootId } = usePopup({\n isOpen: innerIsOpen,\n id: innerId,\n popupInfo,\n withAnimation,\n });\n\n const portalRef = useRef<HTMLDivElement | null>(null);\n const contentRef = useRef<HTMLDivElement | null>(null);\n\n const innerRef = useForkRef<HTMLDivElement>(contentRef, outerRootRef);\n\n const cls = cx(\n className,\n animationInfo?.endAnimation ? classes.endAnimation : '',\n animationInfo?.endTransition ? classes.endTransition : '',\n );\n\n if (!isVisible && !innerIsOpen) {\n return null;\n }\n\n const rootNode = (\n <Root className={cls}>\n {overlay}\n\n <PopupRoot\n id={innerId}\n ref={innerRef}\n position={handlePosition(placement, offset)}\n zIndex={zIndex}\n frame={frame}\n animationInfo={animationInfo}\n setVisible={setVisible}\n {...rest}\n >\n <Resizable\n enable={\n resizable && !resizable.disabled ? getResizeDirections(resizable.directions) : false\n }\n resizeRatio={getRatioBasedOnPlacement(placement)}\n defaultSize={resizable?.defaultSize}\n minWidth={resizable?.minWidth}\n minHeight={resizable?.minHeight}\n maxWidth={resizable?.maxWidth}\n maxHeight={resizable?.maxHeight}\n handleComponent={\n resizable?.hiddenIcon\n ? {}\n : {\n topRight: (\n <IconResizeDiagonalStyled\n className={classes.resizableTopRightIcon}\n color=\"inherit\"\n size={resizable?.iconSize}\n />\n ),\n bottomRight: (\n <IconResizeDiagonalStyled\n className={classes.resizableBottomRightIcon}\n color=\"inherit\"\n size={resizable?.iconSize}\n />\n ),\n bottomLeft: (\n <IconResizeDiagonalStyled\n className={classes.resizableBottomLeftIcon}\n color=\"inherit\"\n size={resizable?.iconSize}\n />\n ),\n topLeft: (\n <IconResizeDiagonalStyled\n className={classes.resizableTopLeftIcon}\n color=\"inherit\"\n size={resizable?.iconSize}\n />\n ),\n }\n }\n className={classes.resizableContainer}\n handleStyles={getHandleStyles(resizable?.iconSize)}\n >\n {children}\n </Resizable>\n </PopupRoot>\n </Root>\n );\n\n if (typeof frame !== 'string' && frame && frame.current && canUseDOM) {\n return <Portal container={frame.current}>{rootNode}</Portal>;\n }\n\n const withFrameId = typeof frame === 'string' && frame !== 'document';\n const containerElement = withFrameId && canUseDOM && document.getElementById(frame as string);\n\n if (containerElement) {\n return (\n <Portal container={containerElement}>\n <StyledPortalContainer ref={portalRef}>\n {portalRef.current && <Portal container={portalRef.current}>{rootNode}</Portal>}\n </StyledPortalContainer>{' '}\n </Portal>\n );\n }\n\n const globalPortal = canUseDOM && document.getElementById(rootId);\n\n return <>{globalPortal && <Portal container={globalPortal}>{rootNode}</Portal>}</>;\n },\n );\n\nexport const popupConfig = {\n name: 'Popup',\n tag: 'div',\n layout: popupRoot,\n base,\n variations: {},\n defaults: {},\n};\n"],"names":["handlePosition","placement","offset","x","y","_offset","_slicedToArray","_x","_y","concat","left","top","transform","right","bottom","placements","split","forEach","placementValue","isCenteredX","undefined","isCenteredY","popupRoot","Root","forwardRef","_ref","outerRootRef","id","_ref$isOpen","isOpen","_ref$opened","opened","_ref$placement","_ref$offset","_ref$frame","frame","children","overlay","zIndex","popupInfo","_ref$withAnimation","withAnimation","className","resizable","rest","_objectWithoutProperties","_excluded","innerIsOpen","uniqId","safeUseId","innerId","_usePopup","usePopup","isVisible","animationInfo","setVisible","rootId","portalRef","useRef","contentRef","innerRef","useForkRef","cls","cx","endAnimation","classes","endTransition","rootNode","React","createElement","PopupRoot","_extends","ref","position","Resizable","enable","disabled","getResizeDirections","directions","resizeRatio","getRatioBasedOnPlacement","defaultSize","minWidth","minHeight","maxWidth","maxHeight","handleComponent","hiddenIcon","topRight","IconResizeDiagonalStyled","resizableTopRightIcon","color","size","iconSize","bottomRight","resizableBottomRightIcon","bottomLeft","resizableBottomLeftIcon","topLeft","resizableTopLeftIcon","resizableContainer","handleStyles","getHandleStyles","current","canUseDOM","Portal","container","withFrameId","containerElement","document","getElementById","StyledPortalContainer","globalPortal","Fragment","popupConfig","name","tag","layout","base","variations","defaults"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAgBO,IAAMA,cAAc,GAAG,SAAjBA,cAAcA,CACvBC,SAAyB,EACzBC,MAA2C,EACvB;EACpB,IAAIC,CAAC,GAAG,MAAM,CAAA;EACd,IAAIC,CAAC,GAAG,MAAM,CAAA;AAEd,EAAA,IAAIF,MAAM,EAAE;AACR,IAAA,IAAAG,OAAA,GAAAC,uCAAA,CAAiBJ,MAAM,EAAA,CAAA,CAAA;AAAhBK,MAAAA,EAAE,GAAAF,OAAA,CAAA,CAAA,CAAA;AAAEG,MAAAA,EAAE,GAAAH,OAAA,CAAA,CAAA,CAAA,CAAA;IACbF,CAAC,GAAG,OAAOI,EAAE,KAAK,QAAQ,MAAAE,MAAA,CAAMF,EAAE,EAAA,KAAA,CAAA,GAAQA,EAAE,CAAA;IAC5CH,CAAC,GAAG,OAAOI,EAAE,KAAK,QAAQ,MAAAC,MAAA,CAAMD,EAAE,EAAA,KAAA,CAAA,GAAQA,EAAE,CAAA;AAChD,GAAA;AAEA,EAAA,IAAI,CAACP,SAAS,IAAIA,SAAS,KAAK,QAAQ,EAAE;IACtC,OAAO;AACHS,MAAAA,IAAI,EAAAD,aAAAA,CAAAA,MAAA,CAAgBN,CAAC,EAAG,GAAA,CAAA;AACxBQ,MAAAA,GAAG,EAAAF,aAAAA,CAAAA,MAAA,CAAgBL,CAAC,EAAG,GAAA,CAAA;AACvBQ,MAAAA,SAAS,EAAE,uBAAA;KACd,CAAA;AACL,GAAA;AAEA,EAAA,IAAIF,IAAI,CAAA;AACR,EAAA,IAAIG,KAAK,CAAA;AACT,EAAA,IAAIF,GAAG,CAAA;AACP,EAAA,IAAIG,MAAM,CAAA;AACV,EAAA,IAAIF,SAAS,CAAA;AACb,EAAA,IAAMG,UAAU,GAAGd,SAAS,CAACe,KAAK,CAAC,GAAG,CAA0B,CAAA;AAEhED,EAAAA,UAAU,CAACE,OAAO,CAAC,UAACC,cAAmC,EAAK;AACxD,IAAA,QAAQA,cAAc;AAClB,MAAA,KAAK,MAAM;AACPR,QAAAA,IAAI,GAAGP,CAAC,CAAA;AACR,QAAA,MAAA;AACJ,MAAA,KAAK,OAAO;AACRU,QAAAA,KAAK,GAAGV,CAAC,CAAA;AACT,QAAA,MAAA;AACJ,MAAA,KAAK,KAAK;AACNQ,QAAAA,GAAG,GAAGP,CAAC,CAAA;AACP,QAAA,MAAA;AACJ,MAAA,KAAK,QAAQ;AACTU,QAAAA,MAAM,GAAGV,CAAC,CAAA;AACV,QAAA,MAAA;AAGR,KAAA;AACJ,GAAC,CAAC,CAAA;EAEF,IAAMe,WAAW,GAAGT,IAAI,KAAKU,SAAS,IAAIP,KAAK,KAAKO,SAAS,CAAA;EAC7D,IAAMC,WAAW,GAAGV,GAAG,KAAKS,SAAS,IAAIN,MAAM,KAAKM,SAAS,CAAA;AAE7D,EAAA,IAAID,WAAW,EAAE;AACbP,IAAAA,SAAS,GAAG,kBAAkB,CAAA;AAClC,GAAA;AAEA,EAAA,IAAIS,WAAW,EAAE;AACbT,IAAAA,SAAS,GAAG,kBAAkB,CAAA;AAClC,GAAA;EAEA,OAAO;AACHF,IAAAA,IAAI,EAAES,WAAW,GAAA,aAAA,CAAAV,MAAA,CAAiBN,CAAC,SAAMO,IAAI;AAC7CG,IAAAA,KAAK,EAALA,KAAK;AACLF,IAAAA,GAAG,EAAEU,WAAW,GAAA,aAAA,CAAAZ,MAAA,CAAiBL,CAAC,SAAMO,GAAG;AAC3CG,IAAAA,MAAM,EAANA,MAAM;AACNF,IAAAA,SAAS,EAATA,SAAAA;GACH,CAAA;AACL,EAAC;;AAED;AACA;AACA;IACaU,SAAS,GAAG,SAAZA,SAASA,CAAIC,IAA2C,EAAA;AAAA,EAAA,oBACjEC,gBAAU,CACN,UAAAC,IAAA,EAqBIC,YAAY,EACX;AAAA,IAAA,IApBGC,EAAE,GAAAF,IAAA,CAAFE,EAAE,CAAA;MAAAC,WAAA,GAAAH,IAAA,CACFI,MAAM,CAAA;AAANA,MAAAA,MAAM,GAAAD,WAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,WAAA,CAAA;MAAAE,WAAA,GAAAL,IAAA,CACdM,MAAM,CAAA;AAANA,MAAAA,MAAM,GAAAD,WAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,WAAA,CAAA;MAAAE,cAAA,GAAAP,IAAA,CACdxB,SAAS,CAAA;AAATA,MAAAA,SAAS,GAAA+B,cAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,cAAA,CAAA;MAAAC,WAAA,GAAAR,IAAA,CACpBvB,MAAM,CAAA;MAANA,MAAM,GAAA+B,WAAA,KAAG,KAAA,CAAA,GAAA,CAAC,CAAC,EAAE,CAAC,CAAC,GAAAA,WAAA,CAAA;MAAAC,UAAA,GAAAT,IAAA,CACfU,KAAK,CAAA;AAALA,MAAAA,KAAK,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,UAAU,GAAAA,UAAA,CAAA;MAClBE,QAAQ,GAAAX,IAAA,CAARW,QAAQ,CAAA;MACRC,OAAO,GAAAZ,IAAA,CAAPY,OAAO,CAAA;MAGPC,MAAM,GAAAb,IAAA,CAANa,MAAM,CAAA;MACNC,SAAS,GAAAd,IAAA,CAATc,SAAS,CAAA;MAAAC,kBAAA,GAAAf,IAAA,CACTgB,aAAa,CAAA;AAAbA,MAAAA,aAAa,GAAAD,kBAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,kBAAA,CAAA;MACrBE,SAAS,GAAAjB,IAAA,CAATiB,SAAS,CAAA;MAGTC,SAAS,GAAAlB,IAAA,CAATkB,SAAS,CAAA;AACNC,MAAAA,IAAI,GAAAC,iDAAA,CAAApB,IAAA,EAAAqB,SAAA,EAAA;AAIX,IAAA,IAAMC,WAAW,GAAGlB,MAAM,IAAIE,MAAM,CAAA;AAEpC,IAAA,IAAMiB,MAAM,GAAGC,eAAS,EAAE,CAAA;AAC1B,IAAA,IAAMC,OAAO,GAAGvB,EAAE,IAAIqB,MAAM,CAAA;IAE5B,IAAAG,SAAA,GAAyDC,iBAAQ,CAAC;AAC9DvB,QAAAA,MAAM,EAAEkB,WAAW;AACnBpB,QAAAA,EAAE,EAAEuB,OAAO;AACXX,QAAAA,SAAS,EAATA,SAAS;AACTE,QAAAA,aAAa,EAAbA,aAAAA;AACJ,OAAC,CAAC;MALMY,SAAS,GAAAF,SAAA,CAATE,SAAS;MAAEC,aAAa,GAAAH,SAAA,CAAbG,aAAa;MAAEC,UAAU,GAAAJ,SAAA,CAAVI,UAAU;MAAEC,MAAM,GAAAL,SAAA,CAANK,MAAM,CAAA;AAOpD,IAAA,IAAMC,SAAS,GAAGC,YAAM,CAAwB,IAAI,CAAC,CAAA;AACrD,IAAA,IAAMC,UAAU,GAAGD,YAAM,CAAwB,IAAI,CAAC,CAAA;AAEtD,IAAA,IAAME,QAAQ,GAAGC,qBAAU,CAAiBF,UAAU,EAAEjC,YAAY,CAAC,CAAA;AAErE,IAAA,IAAMoC,GAAG,GAAGC,QAAE,CACVrB,SAAS,EACTY,aAAa,KAAbA,IAAAA,IAAAA,aAAa,KAAbA,KAAAA,CAAAA,IAAAA,aAAa,CAAEU,YAAY,GAAGC,oBAAO,CAACD,YAAY,GAAG,EAAE,EACvDV,aAAa,KAAA,IAAA,IAAbA,aAAa,KAAbA,KAAAA,CAAAA,IAAAA,aAAa,CAAEY,aAAa,GAAGD,oBAAO,CAACC,aAAa,GAAG,EAC3D,CAAC,CAAA;AAED,IAAA,IAAI,CAACb,SAAS,IAAI,CAACN,WAAW,EAAE;AAC5B,MAAA,OAAO,IAAI,CAAA;AACf,KAAA;AAEA,IAAA,IAAMoB,QAAQ,gBACVC,sBAAA,CAAAC,aAAA,CAAC9C,IAAI,EAAA;AAACmB,MAAAA,SAAS,EAAEoB,GAAAA;KACZzB,EAAAA,OAAO,eAER+B,sBAAA,CAAAC,aAAA,CAACC,mBAAS,EAAAC,iCAAA,CAAA;AACN5C,MAAAA,EAAE,EAAEuB,OAAQ;AACZsB,MAAAA,GAAG,EAAEZ,QAAS;AACda,MAAAA,QAAQ,EAAEzE,cAAc,CAACC,SAAS,EAAEC,MAAM,CAAE;AAC5CoC,MAAAA,MAAM,EAAEA,MAAO;AACfH,MAAAA,KAAK,EAAEA,KAAM;AACbmB,MAAAA,aAAa,EAAEA,aAAc;AAC7BC,MAAAA,UAAU,EAAEA,UAAAA;AAAW,KAAA,EACnBX,IAAI,CAERwB,eAAAA,sBAAA,CAAAC,aAAA,CAACK,qBAAS,EAAA;AACNC,MAAAA,MAAM,EACFhC,SAAS,IAAI,CAACA,SAAS,CAACiC,QAAQ,GAAGC,uCAAmB,CAAClC,SAAS,CAACmC,UAAU,CAAC,GAAG,KAClF;AACDC,MAAAA,WAAW,EAAEC,iDAAwB,CAAC/E,SAAS,CAAE;AACjDgF,MAAAA,WAAW,EAAEtC,SAAS,KAAA,IAAA,IAATA,SAAS,KAATA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,SAAS,CAAEsC,WAAY;AACpCC,MAAAA,QAAQ,EAAEvC,SAAS,KAAA,IAAA,IAATA,SAAS,KAATA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,SAAS,CAAEuC,QAAS;AAC9BC,MAAAA,SAAS,EAAExC,SAAS,KAAA,IAAA,IAATA,SAAS,KAATA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,SAAS,CAAEwC,SAAU;AAChCC,MAAAA,QAAQ,EAAEzC,SAAS,KAAA,IAAA,IAATA,SAAS,KAATA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,SAAS,CAAEyC,QAAS;AAC9BC,MAAAA,SAAS,EAAE1C,SAAS,KAAA,IAAA,IAATA,SAAS,KAATA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,SAAS,CAAE0C,SAAU;MAChCC,eAAe,EACX3C,SAAS,KAAA,IAAA,IAATA,SAAS,KAAA,KAAA,CAAA,IAATA,SAAS,CAAE4C,UAAU,GACf,EAAE,GACF;AACIC,QAAAA,QAAQ,eACJpB,sBAAA,CAAAC,aAAA,CAACoB,qCAAwB,EAAA;UACrB/C,SAAS,EAAEuB,oBAAO,CAACyB,qBAAsB;AACzCC,UAAAA,KAAK,EAAC,SAAS;AACfC,UAAAA,IAAI,EAAEjD,SAAS,KAAA,IAAA,IAATA,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAATA,SAAS,CAAEkD,QAAAA;AAAS,SAC7B,CACJ;AACDC,QAAAA,WAAW,eACP1B,sBAAA,CAAAC,aAAA,CAACoB,qCAAwB,EAAA;UACrB/C,SAAS,EAAEuB,oBAAO,CAAC8B,wBAAyB;AAC5CJ,UAAAA,KAAK,EAAC,SAAS;AACfC,UAAAA,IAAI,EAAEjD,SAAS,KAAA,IAAA,IAATA,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAATA,SAAS,CAAEkD,QAAAA;AAAS,SAC7B,CACJ;AACDG,QAAAA,UAAU,eACN5B,sBAAA,CAAAC,aAAA,CAACoB,qCAAwB,EAAA;UACrB/C,SAAS,EAAEuB,oBAAO,CAACgC,uBAAwB;AAC3CN,UAAAA,KAAK,EAAC,SAAS;AACfC,UAAAA,IAAI,EAAEjD,SAAS,KAAA,IAAA,IAATA,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAATA,SAAS,CAAEkD,QAAAA;AAAS,SAC7B,CACJ;AACDK,QAAAA,OAAO,eACH9B,sBAAA,CAAAC,aAAA,CAACoB,qCAAwB,EAAA;UACrB/C,SAAS,EAAEuB,oBAAO,CAACkC,oBAAqB;AACxCR,UAAAA,KAAK,EAAC,SAAS;AACfC,UAAAA,IAAI,EAAEjD,SAAS,KAAA,IAAA,IAATA,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAATA,SAAS,CAAEkD,QAAAA;SACpB,CAAA;OAGlB;MACDnD,SAAS,EAAEuB,oBAAO,CAACmC,kBAAmB;MACtCC,YAAY,EAAEC,+BAAe,CAAC3D,SAAS,aAATA,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAATA,SAAS,CAAEkD,QAAQ,CAAA;KAEhDzD,EAAAA,QACM,CACJ,CACT,CACT,CAAA;AAED,IAAA,IAAI,OAAOD,KAAK,KAAK,QAAQ,IAAIA,KAAK,IAAIA,KAAK,CAACoE,OAAO,IAAIC,mBAAS,EAAE;AAClE,MAAA,oBAAOpC,sBAAA,CAAAC,aAAA,CAACoC,aAAM,EAAA;QAACC,SAAS,EAAEvE,KAAK,CAACoE,OAAAA;AAAQ,OAAA,EAAEpC,QAAiB,CAAC,CAAA;AAChE,KAAA;IAEA,IAAMwC,WAAW,GAAG,OAAOxE,KAAK,KAAK,QAAQ,IAAIA,KAAK,KAAK,UAAU,CAAA;IACrE,IAAMyE,gBAAgB,GAAGD,WAAW,IAAIH,mBAAS,IAAIK,QAAQ,CAACC,cAAc,CAAC3E,KAAe,CAAC,CAAA;AAE7F,IAAA,IAAIyE,gBAAgB,EAAE;AAClB,MAAA,oBACIxC,sBAAA,CAAAC,aAAA,CAACoC,aAAM,EAAA;AAACC,QAAAA,SAAS,EAAEE,gBAAAA;AAAiB,OAAA,eAChCxC,sBAAA,CAAAC,aAAA,CAAC0C,kCAAqB,EAAA;AAACvC,QAAAA,GAAG,EAAEf,SAAAA;OACvBA,EAAAA,SAAS,CAAC8C,OAAO,iBAAInC,sBAAA,CAAAC,aAAA,CAACoC,aAAM,EAAA;QAACC,SAAS,EAAEjD,SAAS,CAAC8C,OAAAA;AAAQ,OAAA,EAAEpC,QAAiB,CAC3D,CAAC,EAAC,GACrB,CAAC,CAAA;AAEjB,KAAA;IAEA,IAAM6C,YAAY,GAAGR,mBAAS,IAAIK,QAAQ,CAACC,cAAc,CAACtD,MAAM,CAAC,CAAA;AAEjE,IAAA,oBAAOY,sBAAA,CAAAC,aAAA,CAAAD,sBAAA,CAAA6C,QAAA,EAAGD,IAAAA,EAAAA,YAAY,iBAAI5C,sBAAA,CAAAC,aAAA,CAACoC,aAAM,EAAA;AAACC,MAAAA,SAAS,EAAEM,YAAAA;KAAe7C,EAAAA,QAAiB,CAAI,CAAC,CAAA;AACtF,GACJ,CAAC,CAAA;AAAA,EAAA;AAEE,IAAM+C,WAAW,GAAG;AACvBC,EAAAA,IAAI,EAAE,OAAO;AACbC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,MAAM,EAAE/F,SAAS;AACjBgG,EAAAA,IAAI,EAAJA,iBAAI;EACJC,UAAU,EAAE,EAAE;AACdC,EAAAA,QAAQ,EAAE,EAAC;AACf;;;;;;"}
|
|
@@ -22,7 +22,8 @@ var getBaseDimension = function getBaseDimension(iconSize) {
|
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
24
|
};
|
|
25
|
-
var getHandleStyles = function getHandleStyles(
|
|
25
|
+
var getHandleStyles = function getHandleStyles() {
|
|
26
|
+
var iconSize = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 's';
|
|
26
27
|
var size = getBaseDimension(iconSize);
|
|
27
28
|
var offset = size / 2;
|
|
28
29
|
return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getHandleStyles.js","sources":["../../../../src/components/Popup/utils/getHandleStyles.ts"],"sourcesContent":["interface ReturnData {\n topRight: {\n width: string;\n height: string;\n top: string;\n right: string;\n };\n bottomRight: {\n width: string;\n height: string;\n right: string;\n bottom: string;\n };\n bottomLeft: {\n width: string;\n height: string;\n bottom: string;\n left: string;\n };\n topLeft: {\n width: string;\n height: string;\n top: string;\n left: string;\n };\n}\n\nconst getBaseDimension = (iconSize?: 'xs' | 's' | 'm'): number => {\n switch (iconSize) {\n case 'xs': {\n return 16;\n }\n case 's': {\n return 24;\n }\n case 'm': {\n return 36;\n }\n default: {\n return 16;\n }\n }\n};\n\nexport const getHandleStyles = (iconSize
|
|
1
|
+
{"version":3,"file":"getHandleStyles.js","sources":["../../../../src/components/Popup/utils/getHandleStyles.ts"],"sourcesContent":["interface ReturnData {\n topRight: {\n width: string;\n height: string;\n top: string;\n right: string;\n };\n bottomRight: {\n width: string;\n height: string;\n right: string;\n bottom: string;\n };\n bottomLeft: {\n width: string;\n height: string;\n bottom: string;\n left: string;\n };\n topLeft: {\n width: string;\n height: string;\n top: string;\n left: string;\n };\n}\n\nconst getBaseDimension = (iconSize?: 'xs' | 's' | 'm'): number => {\n switch (iconSize) {\n case 'xs': {\n return 16;\n }\n case 's': {\n return 24;\n }\n case 'm': {\n return 36;\n }\n default: {\n return 16;\n }\n }\n};\n\nexport const getHandleStyles = (iconSize: 'xs' | 's' | 'm' = 's'): ReturnData => {\n const size = getBaseDimension(iconSize);\n const offset = size / 2;\n\n return {\n topRight: {\n width: `${size}px`,\n height: `${size}px`,\n top: `-${offset}px`,\n right: `-${offset}px`,\n },\n bottomRight: {\n width: `${size}px`,\n height: `${size}px`,\n right: `-${offset}px`,\n bottom: `-${offset}px`,\n },\n bottomLeft: {\n width: `${size}px`,\n height: `${size}px`,\n bottom: `-${offset}px`,\n left: `-${offset}px`,\n },\n topLeft: {\n width: `${size}px`,\n height: `${size}px`,\n top: `-${offset}px`,\n left: `-${offset}px`,\n },\n };\n};\n"],"names":["getBaseDimension","iconSize","getHandleStyles","arguments","length","undefined","size","offset","topRight","width","concat","height","top","right","bottomRight","bottom","bottomLeft","left","topLeft"],"mappings":";;;;AA2BA,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIC,QAA2B,EAAa;AAC9D,EAAA,QAAQA,QAAQ;AACZ,IAAA,KAAK,IAAI;AAAE,MAAA;AACP,QAAA,OAAO,EAAE,CAAA;AACb,OAAA;AACA,IAAA,KAAK,GAAG;AAAE,MAAA;AACN,QAAA,OAAO,EAAE,CAAA;AACb,OAAA;AACA,IAAA,KAAK,GAAG;AAAE,MAAA;AACN,QAAA,OAAO,EAAE,CAAA;AACb,OAAA;AACA,IAAA;AAAS,MAAA;AACL,QAAA,OAAO,EAAE,CAAA;AACb,OAAA;AACJ,GAAA;AACJ,CAAC,CAAA;IAEYC,eAAe,GAAG,SAAlBA,eAAeA,GAAqD;AAAA,EAAA,IAAjDD,QAA0B,GAAAE,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,GAAG,CAAA;AAC5D,EAAA,IAAMG,IAAI,GAAGN,gBAAgB,CAACC,QAAQ,CAAC,CAAA;AACvC,EAAA,IAAMM,MAAM,GAAGD,IAAI,GAAG,CAAC,CAAA;EAEvB,OAAO;AACHE,IAAAA,QAAQ,EAAE;AACNC,MAAAA,KAAK,EAAAC,EAAAA,CAAAA,MAAA,CAAKJ,IAAI,EAAI,IAAA,CAAA;AAClBK,MAAAA,MAAM,EAAAD,EAAAA,CAAAA,MAAA,CAAKJ,IAAI,EAAI,IAAA,CAAA;AACnBM,MAAAA,GAAG,EAAAF,GAAAA,CAAAA,MAAA,CAAMH,MAAM,EAAI,IAAA,CAAA;MACnBM,KAAK,EAAA,GAAA,CAAAH,MAAA,CAAMH,MAAM,EAAA,IAAA,CAAA;KACpB;AACDO,IAAAA,WAAW,EAAE;AACTL,MAAAA,KAAK,EAAAC,EAAAA,CAAAA,MAAA,CAAKJ,IAAI,EAAI,IAAA,CAAA;AAClBK,MAAAA,MAAM,EAAAD,EAAAA,CAAAA,MAAA,CAAKJ,IAAI,EAAI,IAAA,CAAA;AACnBO,MAAAA,KAAK,EAAAH,GAAAA,CAAAA,MAAA,CAAMH,MAAM,EAAI,IAAA,CAAA;MACrBQ,MAAM,EAAA,GAAA,CAAAL,MAAA,CAAMH,MAAM,EAAA,IAAA,CAAA;KACrB;AACDS,IAAAA,UAAU,EAAE;AACRP,MAAAA,KAAK,EAAAC,EAAAA,CAAAA,MAAA,CAAKJ,IAAI,EAAI,IAAA,CAAA;AAClBK,MAAAA,MAAM,EAAAD,EAAAA,CAAAA,MAAA,CAAKJ,IAAI,EAAI,IAAA,CAAA;AACnBS,MAAAA,MAAM,EAAAL,GAAAA,CAAAA,MAAA,CAAMH,MAAM,EAAI,IAAA,CAAA;MACtBU,IAAI,EAAA,GAAA,CAAAP,MAAA,CAAMH,MAAM,EAAA,IAAA,CAAA;KACnB;AACDW,IAAAA,OAAO,EAAE;AACLT,MAAAA,KAAK,EAAAC,EAAAA,CAAAA,MAAA,CAAKJ,IAAI,EAAI,IAAA,CAAA;AAClBK,MAAAA,MAAM,EAAAD,EAAAA,CAAAA,MAAA,CAAKJ,IAAI,EAAI,IAAA,CAAA;AACnBM,MAAAA,GAAG,EAAAF,GAAAA,CAAAA,MAAA,CAAMH,MAAM,EAAI,IAAA,CAAA;MACnBU,IAAI,EAAA,GAAA,CAAAP,MAAA,CAAMH,MAAM,EAAA,IAAA,CAAA;AACpB,KAAA;GACH,CAAA;AACL;;;;"}
|
package/cjs/index.css
CHANGED
|
@@ -352,9 +352,10 @@
|
|
|
352
352
|
.Popup_styles_sejy82_p1ug7bn2__dfce5444{position:var(--p1ug7bn2-0);z-index:var(--p1ug7bn2-1);left:var(--p1ug7bn2-2);right:var(--p1ug7bn2-3);top:var(--p1ug7bn2-4);bottom:var(--p1ug7bn2-5);-webkit-transform:var(--p1ug7bn2-6);-ms-transform:var(--p1ug7bn2-6);transform:var(--p1ug7bn2-6);}
|
|
353
353
|
.Popup_styles_sejy82_i10c9529__dfce5444{color:var(--text-secondary);}.Popup_styles_sejy82_i10c9529__dfce5444:hover{color:var(--text-secondary-hover);}.Popup_styles_sejy82_i10c9529__dfce5444:active{color:var(--text-secondary-active);}.Popup_styles_sejy82_i10c9529__dfce5444.Popup_styles_sejy82_resizableTopRightIcon__dfce5444{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);}.Popup_styles_sejy82_i10c9529__dfce5444.Popup_styles_sejy82_resizableBottomRightIcon__dfce5444{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}.Popup_styles_sejy82_i10c9529__dfce5444.Popup_styles_sejy82_resizableBottomLeftIcon__dfce5444{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}.Popup_styles_sejy82_i10c9529__dfce5444.Popup_styles_sejy82_resizableTopLeftIcon__dfce5444{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}
|
|
354
354
|
|
|
355
|
-
.
|
|
356
|
-
.
|
|
357
|
-
.
|
|
355
|
+
.Modal_styles_1obtvtw_b7npn1w__a2f4e50d{height:100%;}
|
|
356
|
+
.Modal_styles_1obtvtw_m16phoaz__a2f4e50d{height:100%;box-sizing:border-box;border-radius:var(--plasma-modal-body-border-radius);padding:var(--plasma-modal-body-padding);background:var(--plasma-modal-body-background);box-shadow:var(--shadow-down-soft-l);}
|
|
357
|
+
.Modal_styles_1obtvtw_m5bx5hr__a2f4e50d{position:relative;padding:var(--plasma-modal-content-padding);}
|
|
358
|
+
.Modal_styles_1obtvtw_cjp242v__a2f4e50d{top:0;right:0;width:1.5rem;height:1.5rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border:none;border-radius:var(--plasma-modal-close-button-radius);padding:0;margin:0;outline:none;cursor:pointer;background:transparent;position:relative;color:var(--plasma-modal-close-button-color);position:absolute;}.Modal_styles_1obtvtw_cjp242v__a2f4e50d::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.063rem solid transparent;border-radius:calc(var(--plasma-modal-close-button-radius) + 0.063rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.Modal_styles_1obtvtw_cjp242v__a2f4e50d.Modal_styles_1obtvtw_focusVisible__a2f4e50d:focus::before,.Modal_styles_1obtvtw_cjp242v__a2f4e50d[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.063rem var(--plasma-modal-outline-focus-color);}.Modal_styles_1obtvtw_cjp242v__a2f4e50d:hover{color:var(--plasma-modal-close-button-hover-color);}.Modal_styles_1obtvtw_cjp242v__a2f4e50d:active{color:var(--plasma-modal-close-button-active-color);}
|
|
358
359
|
|
|
359
360
|
.NotificationsPortal_6417q6_s19gbs9t__4166aeb6 > .NotificationsPortal_6417q6_popupBaseRoot__4166aeb6{overflow:hidden;}
|
|
360
361
|
|
|
@@ -157,6 +157,7 @@ var modalRoot = function(Root) {
|
|
|
157
157
|
var innerHasClose = hasClose === undefined && hasBody || hasClose;
|
|
158
158
|
var trapRef = (0, _hooks.useFocusTrap)(true, initialFocusRef, focusAfterRef, true);
|
|
159
159
|
var popupController = (0, _Popup.usePopupContext)();
|
|
160
|
+
var isResizableEnabled = Boolean(resizable && !resizable.disabled);
|
|
160
161
|
var innerRef = (0, _plasmacore.useForkRef)(trapRef, outerRootRef);
|
|
161
162
|
var uniqId = (0, _utils.safeUseId)();
|
|
162
163
|
var innerId = id || uniqId;
|
|
@@ -212,7 +213,9 @@ var modalRoot = function(Root) {
|
|
|
212
213
|
resizable: resizable
|
|
213
214
|
}, rest), hasBody ? /*#__PURE__*/ _react.default.createElement(Root, {
|
|
214
215
|
view: view
|
|
215
|
-
}, /*#__PURE__*/ _react.default.createElement(_Modalstyles.ModalBody,
|
|
216
|
+
}, /*#__PURE__*/ _react.default.createElement(_Modalstyles.ModalBody, {
|
|
217
|
+
isResizableEnabled: isResizableEnabled
|
|
218
|
+
}, /*#__PURE__*/ _react.default.createElement(_Modalstyles.ModalContent, null, innerHasClose && /*#__PURE__*/ _react.default.createElement(_Modalstyles.CloseButton, {
|
|
216
219
|
onClick: onClose,
|
|
217
220
|
"data-test": "modal-close"
|
|
218
221
|
}, /*#__PURE__*/ _react.default.createElement(_IconClose.IconClose, {
|
|
@@ -225,7 +228,7 @@ var modalConfig = {
|
|
|
225
228
|
name: 'Modal',
|
|
226
229
|
tag: 'div',
|
|
227
230
|
layout: modalRoot,
|
|
228
|
-
base:
|
|
231
|
+
base: _Modalstyles.base,
|
|
229
232
|
variations: {
|
|
230
233
|
view: {
|
|
231
234
|
css: _base.base
|
|
@@ -17,9 +17,13 @@ _export(exports, {
|
|
|
17
17
|
},
|
|
18
18
|
get ModalContent () {
|
|
19
19
|
return ModalContent;
|
|
20
|
+
},
|
|
21
|
+
get base () {
|
|
22
|
+
return base;
|
|
20
23
|
}
|
|
21
24
|
});
|
|
22
25
|
var _styled = /*#__PURE__*/ _interop_require_default(require("@emotion/styled"));
|
|
26
|
+
var _react = require("@emotion/react");
|
|
23
27
|
var _mixins = require("../../mixins");
|
|
24
28
|
var _Modaltokens = require("./Modal.tokens");
|
|
25
29
|
function _interop_require_default(obj) {
|
|
@@ -27,20 +31,24 @@ function _interop_require_default(obj) {
|
|
|
27
31
|
default: obj
|
|
28
32
|
};
|
|
29
33
|
}
|
|
34
|
+
var base = (0, /*#__PURE__*/ _react.css)("height:100%;", "base", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjLWVtb3Rpb24vY29tcG9uZW50cy9Nb2RhbC9Nb2RhbC5zdHlsZXMudHMiLCJzb3VyY2VzIjpbInNyYy1lbW90aW9uL2NvbXBvbmVudHMvTW9kYWwvTW9kYWwuc3R5bGVzLnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuaW1wb3J0IHsgYWRkRm9jdXMgfSBmcm9tICcuLi8uLi9taXhpbnMnO1xuXG5pbXBvcnQgeyB0b2tlbnMgfSBmcm9tICcuL01vZGFsLnRva2Vucyc7XG5cbmV4cG9ydCBjb25zdCBiYXNlID0gY3NzYFxuICAgIGhlaWdodDogMTAwJTtcbmA7XG5cbmV4cG9ydCBjb25zdCBNb2RhbEJvZHkgPSBzdHlsZWQuZGl2PHsgaXNSZXNpemFibGVFbmFibGVkOiBib29sZWFuIH0+YFxuICAgIC8vaGVpZ2h0OiAkeyh7IGlzUmVzaXphYmxlRW5hYmxlZCB9KSA9PiAoaXNSZXNpemFibGVFbmFibGVkID8gJzEwMCUnIDogJ2F1dG8nKX07XG4gICAgaGVpZ2h0OiAxMDAlO1xuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgYm9yZGVyLXJhZGl1czogdmFyKCR7dG9rZW5zLm1vZGFsQm9keUJvcmRlclJhZGl1c30pO1xuICAgIHBhZGRpbmc6IHZhcigke3Rva2Vucy5tb2RhbEJvZHlQYWRkaW5nfSk7XG4gICAgYmFja2dyb3VuZDogdmFyKCR7dG9rZW5zLm1vZGFsQm9keUJhY2tncm91bmR9KTtcbiAgICBib3gtc2hhZG93OiB2YXIoLS1zaGFkb3ctZG93bi1zb2Z0LWwpO1xuYDtcblxuZXhwb3J0IGNvbnN0IE1vZGFsQ29udGVudCA9IHN0eWxlZC5kaXZgXG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIHBhZGRpbmc6IHZhcigke3Rva2Vucy5tb2RhbENvbnRlbnRQYWRkaW5nfSk7XG5gO1xuXG5leHBvcnQgY29uc3QgQ2xvc2VCdXR0b24gPSBzdHlsZWQuYnV0dG9uYFxuICAgIHRvcDogMDtcbiAgICByaWdodDogMDtcblxuICAgIHdpZHRoOiAxLjVyZW07XG4gICAgaGVpZ2h0OiAxLjVyZW07XG5cbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cbiAgICBib3JkZXI6IG5vbmU7XG4gICAgYm9yZGVyLXJhZGl1czogdmFyKCR7dG9rZW5zLm1vZGFsQ2xvc2VCdXR0b25SYWRpdXN9KTtcblxuICAgIHBhZGRpbmc6IDA7XG4gICAgbWFyZ2luOiAwO1xuICAgIG91dGxpbmU6IG5vbmU7XG5cbiAgICBjdXJzb3I6IHBvaW50ZXI7XG5cbiAgICBiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcblxuICAgICR7YWRkRm9jdXMoe1xuICAgICAgICBvdXRsaW5lU2l6ZTogJzAuMDYzcmVtJyxcbiAgICAgICAgb3V0bGluZU9mZnNldDogJy0wLjEyNXJlbScsXG4gICAgICAgIG91dGxpbmVDb2xvcjogYHZhcigke3Rva2Vucy5tb2RhbE91dGxpbmVGb2N1c0NvbG9yfSlgLFxuICAgICAgICBvdXRsaW5lUmFkaXVzOiBgY2FsYyh2YXIoJHt0b2tlbnMubW9kYWxDbG9zZUJ1dHRvblJhZGl1c30pICsgMC4wNjNyZW0pYCxcbiAgICB9KX07XG5cbiAgICBjb2xvcjogdmFyKCR7dG9rZW5zLm1vZGFsQ2xvc2VCdXR0b25Db2xvcn0pO1xuXG4gICAgJjpob3ZlciB7XG4gICAgICAgIGNvbG9yOiB2YXIoJHt0b2tlbnMubW9kYWxDbG9zZUJ1dHRvbkhvdmVyQ29sb3J9KTtcbiAgICB9XG5cbiAgICAmOmFjdGl2ZSB7XG4gICAgICAgIGNvbG9yOiB2YXIoJHt0b2tlbnMubW9kYWxDbG9zZUJ1dHRvbkFjdGl2ZUNvbG9yfSk7XG4gICAgfVxuXG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuYDtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPb0IifQ== */");
|
|
30
35
|
var ModalBody = (0, /*#__PURE__*/ _styled.default)("div", {
|
|
31
|
-
target: "
|
|
36
|
+
target: "eyb91m80",
|
|
32
37
|
label: "ModalBody"
|
|
33
|
-
})(
|
|
38
|
+
})(function(param) {
|
|
39
|
+
var isResizableEnabled = param.isResizableEnabled;
|
|
40
|
+
return isResizableEnabled ? '100%' : 'auto';
|
|
41
|
+
}, ";height:100%;box-sizing:border-box;border-radius:var(", _Modaltokens.tokens.modalBodyBorderRadius, ");padding:var(", _Modaltokens.tokens.modalBodyPadding, ");background:var(", _Modaltokens.tokens.modalBodyBackground, ");box-shadow:var(--shadow-down-soft-l);", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjLWVtb3Rpb24vY29tcG9uZW50cy9Nb2RhbC9Nb2RhbC5zdHlsZXMudHMiLCJzb3VyY2VzIjpbInNyYy1lbW90aW9uL2NvbXBvbmVudHMvTW9kYWwvTW9kYWwuc3R5bGVzLnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuaW1wb3J0IHsgYWRkRm9jdXMgfSBmcm9tICcuLi8uLi9taXhpbnMnO1xuXG5pbXBvcnQgeyB0b2tlbnMgfSBmcm9tICcuL01vZGFsLnRva2Vucyc7XG5cbmV4cG9ydCBjb25zdCBiYXNlID0gY3NzYFxuICAgIGhlaWdodDogMTAwJTtcbmA7XG5cbmV4cG9ydCBjb25zdCBNb2RhbEJvZHkgPSBzdHlsZWQuZGl2PHsgaXNSZXNpemFibGVFbmFibGVkOiBib29sZWFuIH0+YFxuICAgIC8vaGVpZ2h0OiAkeyh7IGlzUmVzaXphYmxlRW5hYmxlZCB9KSA9PiAoaXNSZXNpemFibGVFbmFibGVkID8gJzEwMCUnIDogJ2F1dG8nKX07XG4gICAgaGVpZ2h0OiAxMDAlO1xuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgYm9yZGVyLXJhZGl1czogdmFyKCR7dG9rZW5zLm1vZGFsQm9keUJvcmRlclJhZGl1c30pO1xuICAgIHBhZGRpbmc6IHZhcigke3Rva2Vucy5tb2RhbEJvZHlQYWRkaW5nfSk7XG4gICAgYmFja2dyb3VuZDogdmFyKCR7dG9rZW5zLm1vZGFsQm9keUJhY2tncm91bmR9KTtcbiAgICBib3gtc2hhZG93OiB2YXIoLS1zaGFkb3ctZG93bi1zb2Z0LWwpO1xuYDtcblxuZXhwb3J0IGNvbnN0IE1vZGFsQ29udGVudCA9IHN0eWxlZC5kaXZgXG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIHBhZGRpbmc6IHZhcigke3Rva2Vucy5tb2RhbENvbnRlbnRQYWRkaW5nfSk7XG5gO1xuXG5leHBvcnQgY29uc3QgQ2xvc2VCdXR0b24gPSBzdHlsZWQuYnV0dG9uYFxuICAgIHRvcDogMDtcbiAgICByaWdodDogMDtcblxuICAgIHdpZHRoOiAxLjVyZW07XG4gICAgaGVpZ2h0OiAxLjVyZW07XG5cbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cbiAgICBib3JkZXI6IG5vbmU7XG4gICAgYm9yZGVyLXJhZGl1czogdmFyKCR7dG9rZW5zLm1vZGFsQ2xvc2VCdXR0b25SYWRpdXN9KTtcblxuICAgIHBhZGRpbmc6IDA7XG4gICAgbWFyZ2luOiAwO1xuICAgIG91dGxpbmU6IG5vbmU7XG5cbiAgICBjdXJzb3I6IHBvaW50ZXI7XG5cbiAgICBiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcblxuICAgICR7YWRkRm9jdXMoe1xuICAgICAgICBvdXRsaW5lU2l6ZTogJzAuMDYzcmVtJyxcbiAgICAgICAgb3V0bGluZU9mZnNldDogJy0wLjEyNXJlbScsXG4gICAgICAgIG91dGxpbmVDb2xvcjogYHZhcigke3Rva2Vucy5tb2RhbE91dGxpbmVGb2N1c0NvbG9yfSlgLFxuICAgICAgICBvdXRsaW5lUmFkaXVzOiBgY2FsYyh2YXIoJHt0b2tlbnMubW9kYWxDbG9zZUJ1dHRvblJhZGl1c30pICsgMC4wNjNyZW0pYCxcbiAgICB9KX07XG5cbiAgICBjb2xvcjogdmFyKCR7dG9rZW5zLm1vZGFsQ2xvc2VCdXR0b25Db2xvcn0pO1xuXG4gICAgJjpob3ZlciB7XG4gICAgICAgIGNvbG9yOiB2YXIoJHt0b2tlbnMubW9kYWxDbG9zZUJ1dHRvbkhvdmVyQ29sb3J9KTtcbiAgICB9XG5cbiAgICAmOmFjdGl2ZSB7XG4gICAgICAgIGNvbG9yOiB2YXIoJHt0b2tlbnMubW9kYWxDbG9zZUJ1dHRvbkFjdGl2ZUNvbG9yfSk7XG4gICAgfVxuXG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuYDtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFXeUIifQ== */");
|
|
34
42
|
var ModalContent = (0, /*#__PURE__*/ _styled.default)("div", {
|
|
35
|
-
target: "
|
|
43
|
+
target: "eyb91m81",
|
|
36
44
|
label: "ModalContent"
|
|
37
|
-
})("position:relative;padding:var(", _Modaltokens.tokens.modalContentPadding, ");", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
45
|
+
})("position:relative;padding:var(", _Modaltokens.tokens.modalContentPadding, ");", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjLWVtb3Rpb24vY29tcG9uZW50cy9Nb2RhbC9Nb2RhbC5zdHlsZXMudHMiLCJzb3VyY2VzIjpbInNyYy1lbW90aW9uL2NvbXBvbmVudHMvTW9kYWwvTW9kYWwuc3R5bGVzLnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuaW1wb3J0IHsgYWRkRm9jdXMgfSBmcm9tICcuLi8uLi9taXhpbnMnO1xuXG5pbXBvcnQgeyB0b2tlbnMgfSBmcm9tICcuL01vZGFsLnRva2Vucyc7XG5cbmV4cG9ydCBjb25zdCBiYXNlID0gY3NzYFxuICAgIGhlaWdodDogMTAwJTtcbmA7XG5cbmV4cG9ydCBjb25zdCBNb2RhbEJvZHkgPSBzdHlsZWQuZGl2PHsgaXNSZXNpemFibGVFbmFibGVkOiBib29sZWFuIH0+YFxuICAgIC8vaGVpZ2h0OiAkeyh7IGlzUmVzaXphYmxlRW5hYmxlZCB9KSA9PiAoaXNSZXNpemFibGVFbmFibGVkID8gJzEwMCUnIDogJ2F1dG8nKX07XG4gICAgaGVpZ2h0OiAxMDAlO1xuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgYm9yZGVyLXJhZGl1czogdmFyKCR7dG9rZW5zLm1vZGFsQm9keUJvcmRlclJhZGl1c30pO1xuICAgIHBhZGRpbmc6IHZhcigke3Rva2Vucy5tb2RhbEJvZHlQYWRkaW5nfSk7XG4gICAgYmFja2dyb3VuZDogdmFyKCR7dG9rZW5zLm1vZGFsQm9keUJhY2tncm91bmR9KTtcbiAgICBib3gtc2hhZG93OiB2YXIoLS1zaGFkb3ctZG93bi1zb2Z0LWwpO1xuYDtcblxuZXhwb3J0IGNvbnN0IE1vZGFsQ29udGVudCA9IHN0eWxlZC5kaXZgXG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIHBhZGRpbmc6IHZhcigke3Rva2Vucy5tb2RhbENvbnRlbnRQYWRkaW5nfSk7XG5gO1xuXG5leHBvcnQgY29uc3QgQ2xvc2VCdXR0b24gPSBzdHlsZWQuYnV0dG9uYFxuICAgIHRvcDogMDtcbiAgICByaWdodDogMDtcblxuICAgIHdpZHRoOiAxLjVyZW07XG4gICAgaGVpZ2h0OiAxLjVyZW07XG5cbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cbiAgICBib3JkZXI6IG5vbmU7XG4gICAgYm9yZGVyLXJhZGl1czogdmFyKCR7dG9rZW5zLm1vZGFsQ2xvc2VCdXR0b25SYWRpdXN9KTtcblxuICAgIHBhZGRpbmc6IDA7XG4gICAgbWFyZ2luOiAwO1xuICAgIG91dGxpbmU6IG5vbmU7XG5cbiAgICBjdXJzb3I6IHBvaW50ZXI7XG5cbiAgICBiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcblxuICAgICR7YWRkRm9jdXMoe1xuICAgICAgICBvdXRsaW5lU2l6ZTogJzAuMDYzcmVtJyxcbiAgICAgICAgb3V0bGluZU9mZnNldDogJy0wLjEyNXJlbScsXG4gICAgICAgIG91dGxpbmVDb2xvcjogYHZhcigke3Rva2Vucy5tb2RhbE91dGxpbmVGb2N1c0NvbG9yfSlgLFxuICAgICAgICBvdXRsaW5lUmFkaXVzOiBgY2FsYyh2YXIoJHt0b2tlbnMubW9kYWxDbG9zZUJ1dHRvblJhZGl1c30pICsgMC4wNjNyZW0pYCxcbiAgICB9KX07XG5cbiAgICBjb2xvcjogdmFyKCR7dG9rZW5zLm1vZGFsQ2xvc2VCdXR0b25Db2xvcn0pO1xuXG4gICAgJjpob3ZlciB7XG4gICAgICAgIGNvbG9yOiB2YXIoJHt0b2tlbnMubW9kYWxDbG9zZUJ1dHRvbkhvdmVyQ29sb3J9KTtcbiAgICB9XG5cbiAgICAmOmFjdGl2ZSB7XG4gICAgICAgIGNvbG9yOiB2YXIoJHt0b2tlbnMubW9kYWxDbG9zZUJ1dHRvbkFjdGl2ZUNvbG9yfSk7XG4gICAgfVxuXG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuYDtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxQjRCIn0= */");
|
|
38
46
|
var CloseButton = (0, /*#__PURE__*/ _styled.default)("button", {
|
|
39
|
-
target: "
|
|
47
|
+
target: "eyb91m82",
|
|
40
48
|
label: "CloseButton"
|
|
41
49
|
})("top:0;right:0;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;border:none;border-radius:var(", _Modaltokens.tokens.modalCloseButtonRadius, ");padding:0;margin:0;outline:none;cursor:pointer;background:transparent;", (0, _mixins.addFocus)({
|
|
42
50
|
outlineSize: '0.063rem',
|
|
43
51
|
outlineOffset: '-0.125rem',
|
|
44
52
|
outlineColor: "var(".concat(_Modaltokens.tokens.modalOutlineFocusColor, ")"),
|
|
45
53
|
outlineRadius: "calc(var(".concat(_Modaltokens.tokens.modalCloseButtonRadius, ") + 0.063rem)")
|
|
46
|
-
}), ";color:var(", _Modaltokens.tokens.modalCloseButtonColor, ");&:hover{color:var(", _Modaltokens.tokens.modalCloseButtonHoverColor, ");}&:active{color:var(", _Modaltokens.tokens.modalCloseButtonActiveColor, ");}position:absolute;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
54
|
+
}), ";color:var(", _Modaltokens.tokens.modalCloseButtonColor, ");&:hover{color:var(", _Modaltokens.tokens.modalCloseButtonHoverColor, ");}&:active{color:var(", _Modaltokens.tokens.modalCloseButtonActiveColor, ");}position:absolute;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjLWVtb3Rpb24vY29tcG9uZW50cy9Nb2RhbC9Nb2RhbC5zdHlsZXMudHMiLCJzb3VyY2VzIjpbInNyYy1lbW90aW9uL2NvbXBvbmVudHMvTW9kYWwvTW9kYWwuc3R5bGVzLnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuaW1wb3J0IHsgYWRkRm9jdXMgfSBmcm9tICcuLi8uLi9taXhpbnMnO1xuXG5pbXBvcnQgeyB0b2tlbnMgfSBmcm9tICcuL01vZGFsLnRva2Vucyc7XG5cbmV4cG9ydCBjb25zdCBiYXNlID0gY3NzYFxuICAgIGhlaWdodDogMTAwJTtcbmA7XG5cbmV4cG9ydCBjb25zdCBNb2RhbEJvZHkgPSBzdHlsZWQuZGl2PHsgaXNSZXNpemFibGVFbmFibGVkOiBib29sZWFuIH0+YFxuICAgIC8vaGVpZ2h0OiAkeyh7IGlzUmVzaXphYmxlRW5hYmxlZCB9KSA9PiAoaXNSZXNpemFibGVFbmFibGVkID8gJzEwMCUnIDogJ2F1dG8nKX07XG4gICAgaGVpZ2h0OiAxMDAlO1xuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgYm9yZGVyLXJhZGl1czogdmFyKCR7dG9rZW5zLm1vZGFsQm9keUJvcmRlclJhZGl1c30pO1xuICAgIHBhZGRpbmc6IHZhcigke3Rva2Vucy5tb2RhbEJvZHlQYWRkaW5nfSk7XG4gICAgYmFja2dyb3VuZDogdmFyKCR7dG9rZW5zLm1vZGFsQm9keUJhY2tncm91bmR9KTtcbiAgICBib3gtc2hhZG93OiB2YXIoLS1zaGFkb3ctZG93bi1zb2Z0LWwpO1xuYDtcblxuZXhwb3J0IGNvbnN0IE1vZGFsQ29udGVudCA9IHN0eWxlZC5kaXZgXG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIHBhZGRpbmc6IHZhcigke3Rva2Vucy5tb2RhbENvbnRlbnRQYWRkaW5nfSk7XG5gO1xuXG5leHBvcnQgY29uc3QgQ2xvc2VCdXR0b24gPSBzdHlsZWQuYnV0dG9uYFxuICAgIHRvcDogMDtcbiAgICByaWdodDogMDtcblxuICAgIHdpZHRoOiAxLjVyZW07XG4gICAgaGVpZ2h0OiAxLjVyZW07XG5cbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cbiAgICBib3JkZXI6IG5vbmU7XG4gICAgYm9yZGVyLXJhZGl1czogdmFyKCR7dG9rZW5zLm1vZGFsQ2xvc2VCdXR0b25SYWRpdXN9KTtcblxuICAgIHBhZGRpbmc6IDA7XG4gICAgbWFyZ2luOiAwO1xuICAgIG91dGxpbmU6IG5vbmU7XG5cbiAgICBjdXJzb3I6IHBvaW50ZXI7XG5cbiAgICBiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcblxuICAgICR7YWRkRm9jdXMoe1xuICAgICAgICBvdXRsaW5lU2l6ZTogJzAuMDYzcmVtJyxcbiAgICAgICAgb3V0bGluZU9mZnNldDogJy0wLjEyNXJlbScsXG4gICAgICAgIG91dGxpbmVDb2xvcjogYHZhcigke3Rva2Vucy5tb2RhbE91dGxpbmVGb2N1c0NvbG9yfSlgLFxuICAgICAgICBvdXRsaW5lUmFkaXVzOiBgY2FsYyh2YXIoJHt0b2tlbnMubW9kYWxDbG9zZUJ1dHRvblJhZGl1c30pICsgMC4wNjNyZW0pYCxcbiAgICB9KX07XG5cbiAgICBjb2xvcjogdmFyKCR7dG9rZW5zLm1vZGFsQ2xvc2VCdXR0b25Db2xvcn0pO1xuXG4gICAgJjpob3ZlciB7XG4gICAgICAgIGNvbG9yOiB2YXIoJHt0b2tlbnMubW9kYWxDbG9zZUJ1dHRvbkhvdmVyQ29sb3J9KTtcbiAgICB9XG5cbiAgICAmOmFjdGl2ZSB7XG4gICAgICAgIGNvbG9yOiB2YXIoJHt0b2tlbnMubW9kYWxDbG9zZUJ1dHRvbkFjdGl2ZUNvbG9yfSk7XG4gICAgfVxuXG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuYDtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwQjJCIn0= */");
|
|
@@ -250,10 +250,6 @@ var popupRoot = function(Root) {
|
|
|
250
250
|
"handle",
|
|
251
251
|
"resizable"
|
|
252
252
|
]);
|
|
253
|
-
var resizableDimensions = (0, _react.useRef)({
|
|
254
|
-
width: 0,
|
|
255
|
-
height: 0
|
|
256
|
-
});
|
|
257
253
|
var innerIsOpen = isOpen || opened;
|
|
258
254
|
var uniqId = (0, _utils.safeUseId)();
|
|
259
255
|
var innerId = id || uniqId;
|
|
@@ -267,26 +263,6 @@ var popupRoot = function(Root) {
|
|
|
267
263
|
var contentRef = (0, _react.useRef)(null);
|
|
268
264
|
var innerRef = (0, _plasmacore.useForkRef)(contentRef, outerRootRef);
|
|
269
265
|
var cls = (0, _utils.cx)(className, (animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.endAnimation) ? _Popuptokens.classes.endAnimation : '', (animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.endTransition) ? _Popuptokens.classes.endTransition : '');
|
|
270
|
-
// Хук для получения размеров попапа, которые задаются как минимальные габариты при ресайзе.
|
|
271
|
-
(0, _react.useLayoutEffect)(function() {
|
|
272
|
-
var _contentRef_current;
|
|
273
|
-
if (!innerIsOpen) return;
|
|
274
|
-
var rect = (_contentRef_current = contentRef.current) === null || _contentRef_current === void 0 ? void 0 : _contentRef_current.getBoundingClientRect();
|
|
275
|
-
if (rect) {
|
|
276
|
-
resizableDimensions.current = {
|
|
277
|
-
width: rect.width,
|
|
278
|
-
height: rect.height
|
|
279
|
-
};
|
|
280
|
-
}
|
|
281
|
-
return function() {
|
|
282
|
-
resizableDimensions.current = {
|
|
283
|
-
width: 0,
|
|
284
|
-
height: 0
|
|
285
|
-
};
|
|
286
|
-
};
|
|
287
|
-
}, [
|
|
288
|
-
innerIsOpen
|
|
289
|
-
]);
|
|
290
266
|
if (!isVisible && !innerIsOpen) {
|
|
291
267
|
return null;
|
|
292
268
|
}
|
|
@@ -303,9 +279,12 @@ var popupRoot = function(Root) {
|
|
|
303
279
|
}, rest), /*#__PURE__*/ _react.default.createElement(_reresizable.Resizable, {
|
|
304
280
|
enable: resizable && !resizable.disabled ? (0, _utils1.getResizeDirections)(resizable.directions) : false,
|
|
305
281
|
resizeRatio: (0, _utils1.getRatioBasedOnPlacement)(placement),
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
282
|
+
defaultSize: resizable === null || resizable === void 0 ? void 0 : resizable.defaultSize,
|
|
283
|
+
minWidth: resizable === null || resizable === void 0 ? void 0 : resizable.minWidth,
|
|
284
|
+
minHeight: resizable === null || resizable === void 0 ? void 0 : resizable.minHeight,
|
|
285
|
+
maxWidth: resizable === null || resizable === void 0 ? void 0 : resizable.maxWidth,
|
|
286
|
+
maxHeight: resizable === null || resizable === void 0 ? void 0 : resizable.maxHeight,
|
|
287
|
+
handleComponent: (resizable === null || resizable === void 0 ? void 0 : resizable.hiddenIcon) ? {} : {
|
|
309
288
|
topRight: /*#__PURE__*/ _react.default.createElement(_Popupstyles.IconResizeDiagonalStyled, {
|
|
310
289
|
className: _Popuptokens.classes.resizableTopRightIcon,
|
|
311
290
|
color: "inherit",
|
|
@@ -328,9 +307,7 @@ var popupRoot = function(Root) {
|
|
|
328
307
|
})
|
|
329
308
|
},
|
|
330
309
|
className: _Popuptokens.classes.resizableContainer,
|
|
331
|
-
handleStyles: (0, _utils1.getHandleStyles)(resizable === null || resizable === void 0 ? void 0 : resizable.iconSize)
|
|
332
|
-
maxWidth: resizable === null || resizable === void 0 ? void 0 : resizable.maxWidth,
|
|
333
|
-
maxHeight: resizable === null || resizable === void 0 ? void 0 : resizable.maxHeight
|
|
310
|
+
handleStyles: (0, _utils1.getHandleStyles)(resizable === null || resizable === void 0 ? void 0 : resizable.iconSize)
|
|
334
311
|
}, children)));
|
|
335
312
|
if (typeof frame !== 'string' && frame && frame.current && _utils.canUseDOM) {
|
|
336
313
|
return /*#__PURE__*/ _react.default.createElement(_Portal.Portal, {
|
|
@@ -28,7 +28,8 @@ var getBaseDimension = function(iconSize) {
|
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
30
|
};
|
|
31
|
-
var getHandleStyles = function(
|
|
31
|
+
var getHandleStyles = function() {
|
|
32
|
+
var iconSize = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 's';
|
|
32
33
|
var size = getBaseDimension(iconSize);
|
|
33
34
|
var offset = size / 2;
|
|
34
35
|
return {
|