@alfalab/core-components-modal 11.0.4 → 11.0.5
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/Component.d.ts +4 -4
- package/Component.js.map +1 -1
- package/Component.responsive.d.ts +14 -14
- package/Context.d.ts +0 -1
- package/components/content/desktop.css +6 -6
- package/components/content/desktop.module.css.js +1 -1
- package/components/content/index.css +3 -3
- package/components/content/index.module.css.js +1 -1
- package/components/content/mobile.css +2 -2
- package/components/content/mobile.module.css.js +1 -1
- package/components/controls/index.css +1 -1
- package/components/controls/index.module.css.js +1 -1
- package/components/footer/Component.d.ts +1 -1
- package/components/footer/desktop.css +8 -8
- package/components/footer/desktop.module.css.js +1 -1
- package/components/footer/index.css +3 -3
- package/components/footer/index.module.css.js +1 -1
- package/components/footer/layout.css +16 -16
- package/components/footer/layout.module.css.js +1 -1
- package/components/footer/mobile.css +3 -3
- package/components/footer/mobile.module.css.js +1 -1
- package/components/header/Component.d.ts +1 -1
- package/components/header/Component.js.map +1 -1
- package/components/header/desktop.css +13 -13
- package/components/header/desktop.module.css.js +1 -1
- package/components/header/index.css +3 -3
- package/components/header/index.module.css.js +1 -1
- package/components/header/mobile.css +4 -4
- package/components/header/mobile.module.css.js +1 -1
- package/cssm/Component.d.ts +4 -4
- package/cssm/Component.js.map +1 -1
- package/cssm/Component.responsive.d.ts +14 -14
- package/cssm/Context.d.ts +0 -1
- package/cssm/components/footer/Component.d.ts +1 -1
- package/cssm/components/header/Component.d.ts +1 -1
- package/cssm/components/header/Component.js.map +1 -1
- package/cssm/desktop/Component.desktop.d.ts +9 -9
- package/cssm/typings.d.ts +6 -6
- package/cssm/utils.d.ts +1 -1
- package/cssm/utils.js.map +1 -1
- package/desktop/Component.desktop.d.ts +9 -9
- package/desktop/desktop.css +8 -8
- package/desktop/desktop.module.css.js +1 -1
- package/esm/Component.d.ts +4 -4
- package/esm/Component.js.map +1 -1
- package/esm/Component.responsive.d.ts +14 -14
- package/esm/Context.d.ts +0 -1
- package/esm/components/content/desktop.css +6 -6
- package/esm/components/content/desktop.module.css.js +1 -1
- package/esm/components/content/index.css +3 -3
- package/esm/components/content/index.module.css.js +1 -1
- package/esm/components/content/mobile.css +2 -2
- package/esm/components/content/mobile.module.css.js +1 -1
- package/esm/components/controls/index.css +1 -1
- package/esm/components/controls/index.module.css.js +1 -1
- package/esm/components/footer/Component.d.ts +1 -1
- package/esm/components/footer/desktop.css +8 -8
- package/esm/components/footer/desktop.module.css.js +1 -1
- package/esm/components/footer/index.css +3 -3
- package/esm/components/footer/index.module.css.js +1 -1
- package/esm/components/footer/layout.css +16 -16
- package/esm/components/footer/layout.module.css.js +1 -1
- package/esm/components/footer/mobile.css +3 -3
- package/esm/components/footer/mobile.module.css.js +1 -1
- package/esm/components/header/Component.d.ts +1 -1
- package/esm/components/header/Component.js.map +1 -1
- package/esm/components/header/desktop.css +13 -13
- package/esm/components/header/desktop.module.css.js +1 -1
- package/esm/components/header/index.css +3 -3
- package/esm/components/header/index.module.css.js +1 -1
- package/esm/components/header/mobile.css +4 -4
- package/esm/components/header/mobile.module.css.js +1 -1
- package/esm/desktop/Component.desktop.d.ts +9 -9
- package/esm/desktop/desktop.css +8 -8
- package/esm/desktop/desktop.module.css.js +1 -1
- package/esm/mobile/mobile.css +2 -2
- package/esm/mobile/mobile.module.css.js +1 -1
- package/esm/transitions.css +7 -7
- package/esm/transitions.module.css.js +1 -1
- package/esm/typings.d.ts +6 -6
- package/esm/utils.d.ts +1 -1
- package/esm/utils.js.map +1 -1
- package/mobile/mobile.css +2 -2
- package/mobile/mobile.module.css.js +1 -1
- package/modern/Component.d.ts +4 -4
- package/modern/Component.js.map +1 -1
- package/modern/Component.responsive.d.ts +14 -14
- package/modern/Context.d.ts +0 -1
- package/modern/components/content/desktop.css +6 -6
- package/modern/components/content/desktop.module.css.js +1 -1
- package/modern/components/content/index.css +3 -3
- package/modern/components/content/index.module.css.js +1 -1
- package/modern/components/content/mobile.css +2 -2
- package/modern/components/content/mobile.module.css.js +1 -1
- package/modern/components/controls/index.css +1 -1
- package/modern/components/controls/index.module.css.js +1 -1
- package/modern/components/footer/Component.d.ts +1 -1
- package/modern/components/footer/desktop.css +8 -8
- package/modern/components/footer/desktop.module.css.js +1 -1
- package/modern/components/footer/index.css +3 -3
- package/modern/components/footer/index.module.css.js +1 -1
- package/modern/components/footer/layout.css +16 -16
- package/modern/components/footer/layout.module.css.js +1 -1
- package/modern/components/footer/mobile.css +3 -3
- package/modern/components/footer/mobile.module.css.js +1 -1
- package/modern/components/header/Component.d.ts +1 -1
- package/modern/components/header/Component.js.map +1 -1
- package/modern/components/header/desktop.css +13 -13
- package/modern/components/header/desktop.module.css.js +1 -1
- package/modern/components/header/index.css +3 -3
- package/modern/components/header/index.module.css.js +1 -1
- package/modern/components/header/mobile.css +4 -4
- package/modern/components/header/mobile.module.css.js +1 -1
- package/modern/desktop/Component.desktop.d.ts +9 -9
- package/modern/desktop/desktop.css +8 -8
- package/modern/desktop/desktop.module.css.js +1 -1
- package/modern/mobile/mobile.css +2 -2
- package/modern/mobile/mobile.module.css.js +1 -1
- package/modern/transitions.css +7 -7
- package/modern/transitions.module.css.js +1 -1
- package/modern/typings.d.ts +6 -6
- package/modern/utils.d.ts +1 -1
- package/modern/utils.js.map +1 -1
- package/moderncssm/Component.d.ts +4 -4
- package/moderncssm/Component.js.map +1 -1
- package/moderncssm/Component.responsive.d.ts +14 -14
- package/moderncssm/Context.d.ts +0 -1
- package/moderncssm/components/footer/Component.d.ts +1 -1
- package/moderncssm/components/header/Component.d.ts +1 -1
- package/moderncssm/components/header/Component.js.map +1 -1
- package/moderncssm/desktop/Component.desktop.d.ts +9 -9
- package/moderncssm/typings.d.ts +6 -6
- package/moderncssm/utils.d.ts +1 -1
- package/moderncssm/utils.js.map +1 -1
- package/package.json +6 -6
- package/src/vars.css +1 -1
- package/transitions.css +7 -7
- package/transitions.module.css.js +1 -1
- package/typings.d.ts +6 -6
- package/utils.d.ts +1 -1
- package/utils.js.map +1 -1
package/Component.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { type View } from './typings';
|
|
3
3
|
export declare const Modal: React.ForwardRefExoticComponent<import("@alfalab/core-components-base-modal").BaseModalProps & {
|
|
4
|
-
size?: "fullscreen" | 500 | 600 | 800 | 1140
|
|
5
|
-
fixedPosition?: boolean
|
|
6
|
-
hasCloser?: boolean
|
|
7
|
-
iOSLock?: boolean
|
|
4
|
+
size?: "fullscreen" | 500 | 600 | 800 | 1140;
|
|
5
|
+
fixedPosition?: boolean;
|
|
6
|
+
hasCloser?: boolean;
|
|
7
|
+
iOSLock?: boolean;
|
|
8
8
|
} & {
|
|
9
9
|
view: View;
|
|
10
10
|
} & React.RefAttributes<HTMLDivElement>>;
|
package/Component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["src/Component.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useRef } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { BaseModal } from '@alfalab/core-components-base-modal';\n\nimport { ResponsiveContext } from './ResponsiveContext';\nimport { type ModalDesktopProps, type View } from './typings';\nimport { getSizeStyle } from './utils';\n\nimport desktopStyles from './desktop/desktop.module.css';\nimport mobileStyles from './mobile/mobile.module.css';\nimport transitions from './transitions.module.css';\n\nexport const Modal = forwardRef<HTMLDivElement, ModalDesktopProps & { view: View }>(\n (\n {\n size = 500,\n fixedPosition,\n children,\n className,\n wrapperClassName,\n transitionProps = {},\n view,\n dataTestId,\n ...restProps\n },\n ref,\n ) => {\n const modalRef = useRef<HTMLElement>(null);\n\n const handleEntered = (node: HTMLElement, isAppearing: boolean) => {\n if (fixedPosition && modalRef.current) {\n const content = modalRef.current.querySelector<HTMLElement>(\n `.${desktopStyles.component}`,\n );\n\n if (content) {\n const { marginTop } = window.getComputedStyle(content);\n\n content.style.marginTop = marginTop;\n }\n }\n\n if (transitionProps.onEntered) {\n transitionProps.onEntered(node, isAppearing);\n }\n };\n\n const baseModalProps =\n view === 'desktop'\n ? {\n ref: mergeRefs([ref, modalRef]),\n wrapperClassName: cn(desktopStyles.wrapper, wrapperClassName, {\n [desktopStyles.fullscreen]: size === 'fullscreen',\n }),\n className: cn(\n desktopStyles.component,\n className,\n desktopStyles[getSizeStyle(size)],\n ),\n backdropProps: {\n invisible: size === 'fullscreen',\n ...restProps.backdropProps,\n },\n transitionProps: {\n classNames: transitions,\n ...transitionProps,\n onEntered: handleEntered,\n },\n }\n : {\n wrapperClassName,\n ref,\n transitionProps: {\n classNames: transitions,\n ...transitionProps,\n },\n className: cn(className, mobileStyles.component),\n contentProps: {\n ...restProps.contentProps,\n className: cn(mobileStyles.content, restProps.contentProps?.className),\n },\n };\n\n const contextValue = useMemo(() => ({ size, view, dataTestId }), [size, view, dataTestId]);\n\n return (\n <ResponsiveContext.Provider value={contextValue}>\n <BaseModal {...restProps} {...baseModalProps} dataTestId={dataTestId}>\n {children}\n </BaseModal>\n </ResponsiveContext.Provider>\n );\n },\n);\n\nModal.displayName = 'Modal';\n"],"names":["forwardRef","__rest","useRef","desktopStyles","mergeRefs","cn","getSizeStyle","__assign","transitions","mobileStyles","useMemo","React","ResponsiveContext","BaseModal"],"mappings":";;;;;;;;;;;;;;;;;;;;;IAca,KAAK,GAAGA,gBAAU,CAC3B,UACI,EAUC,EACD,GAAG,EAAA;;;AAVC,IAAA,IAAA,EAAU,GAAA,EAAA,CAAA,IAAA,EAAV,IAAI,GAAA,EAAA,KAAA,MAAA,GAAG,GAAG,GAAA,EAAA,EACV,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,SAAS,eAAA,EACT,gBAAgB,GAAA,EAAA,CAAA,gBAAA,EAChB,uBAAoB,EAApB,eAAe,GAAG,EAAA,KAAA,MAAA,GAAA,EAAE,KAAA,EACpB,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,UAAU,GAAA,EAAA,CAAA,UAAA,EACP,SAAS,GAAAC,YAAA,CAAA,EAAA,EAThB,+GAUC,CADe;AAIhB,IAAA,IAAM,QAAQ,GAAGC,YAAM,CAAc,IAAI,CAAC;AAE1C,IAAA,IAAM,aAAa,GAAG,UAAC,IAAiB,EAAE,WAAoB,EAAA;AAC1D,QAAA,IAAI,aAAa,IAAI,QAAQ,CAAC,OAAO,EAAE;AACnC,YAAA,IAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC,aAAa,CAC1C,GAAA,CAAA,MAAA,CAAIC,cAAa,CAAC,SAAS,CAAE,CAChC;
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["src/Component.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useRef } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { BaseModal } from '@alfalab/core-components-base-modal';\n\nimport { ResponsiveContext } from './ResponsiveContext';\nimport { type ModalDesktopProps, type View } from './typings';\nimport { getSizeStyle } from './utils';\n\nimport desktopStyles from './desktop/desktop.module.css';\nimport mobileStyles from './mobile/mobile.module.css';\nimport transitions from './transitions.module.css';\n\nexport const Modal = forwardRef<HTMLDivElement, ModalDesktopProps & { view: View }>(\n (\n {\n size = 500,\n fixedPosition,\n children,\n className,\n wrapperClassName,\n transitionProps = {},\n view,\n dataTestId,\n ...restProps\n },\n ref,\n ) => {\n const modalRef = useRef<HTMLElement>(null);\n\n const handleEntered = (node: HTMLElement, isAppearing: boolean) => {\n if (fixedPosition && modalRef.current) {\n const content = modalRef.current.querySelector<HTMLElement>(\n `.${desktopStyles.component}`,\n );\n\n if (content) {\n const { marginTop } = window.getComputedStyle(content);\n\n content.style.marginTop = marginTop;\n }\n }\n\n if (transitionProps.onEntered) {\n transitionProps.onEntered(node, isAppearing);\n }\n };\n\n const baseModalProps =\n view === 'desktop'\n ? {\n ref: mergeRefs([ref, modalRef]),\n wrapperClassName: cn(desktopStyles.wrapper, wrapperClassName, {\n [desktopStyles.fullscreen]: size === 'fullscreen',\n }),\n className: cn(\n desktopStyles.component,\n className,\n desktopStyles[getSizeStyle(size)],\n ),\n backdropProps: {\n invisible: size === 'fullscreen',\n ...restProps.backdropProps,\n },\n transitionProps: {\n classNames: transitions,\n ...transitionProps,\n onEntered: handleEntered,\n },\n }\n : {\n wrapperClassName,\n ref,\n transitionProps: {\n classNames: transitions,\n ...transitionProps,\n },\n className: cn(className, mobileStyles.component),\n contentProps: {\n ...restProps.contentProps,\n className: cn(mobileStyles.content, restProps.contentProps?.className),\n },\n };\n\n const contextValue = useMemo(() => ({ size, view, dataTestId }), [size, view, dataTestId]);\n\n return (\n <ResponsiveContext.Provider value={contextValue}>\n <BaseModal {...restProps} {...baseModalProps} dataTestId={dataTestId}>\n {children}\n </BaseModal>\n </ResponsiveContext.Provider>\n );\n },\n);\n\nModal.displayName = 'Modal';\n"],"names":["forwardRef","__rest","useRef","desktopStyles","mergeRefs","cn","getSizeStyle","__assign","transitions","mobileStyles","useMemo","React","ResponsiveContext","BaseModal"],"mappings":"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"}
|
|
@@ -4,24 +4,24 @@ import { Controls } from './components/controls';
|
|
|
4
4
|
import { Footer } from './components/footer/Component';
|
|
5
5
|
import { Header } from './components/header/Component';
|
|
6
6
|
declare const ModalResponsiveComponent: React.ForwardRefExoticComponent<import("@alfalab/core-components-base-modal").BaseModalProps & {
|
|
7
|
-
size?: "fullscreen" | 500 | 600 | 800 | 1140
|
|
8
|
-
fixedPosition?: boolean
|
|
9
|
-
hasCloser?: boolean
|
|
10
|
-
iOSLock?: boolean
|
|
7
|
+
size?: "fullscreen" | 500 | 600 | 800 | 1140;
|
|
8
|
+
fixedPosition?: boolean;
|
|
9
|
+
hasCloser?: boolean;
|
|
10
|
+
iOSLock?: boolean;
|
|
11
11
|
} & {
|
|
12
|
-
breakpoint?: number
|
|
13
|
-
client?: "desktop" | "mobile"
|
|
14
|
-
defaultMatchMediaValue?: boolean | (() => boolean)
|
|
12
|
+
breakpoint?: number;
|
|
13
|
+
client?: "desktop" | "mobile";
|
|
14
|
+
defaultMatchMediaValue?: boolean | (() => boolean);
|
|
15
15
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
16
16
|
export declare const ModalResponsive: React.ForwardRefExoticComponent<import("@alfalab/core-components-base-modal").BaseModalProps & {
|
|
17
|
-
size?: "fullscreen" | 500 | 600 | 800 | 1140
|
|
18
|
-
fixedPosition?: boolean
|
|
19
|
-
hasCloser?: boolean
|
|
20
|
-
iOSLock?: boolean
|
|
17
|
+
size?: "fullscreen" | 500 | 600 | 800 | 1140;
|
|
18
|
+
fixedPosition?: boolean;
|
|
19
|
+
hasCloser?: boolean;
|
|
20
|
+
iOSLock?: boolean;
|
|
21
21
|
} & {
|
|
22
|
-
breakpoint?: number
|
|
23
|
-
client?: "desktop" | "mobile"
|
|
24
|
-
defaultMatchMediaValue?: boolean | (() => boolean)
|
|
22
|
+
breakpoint?: number;
|
|
23
|
+
client?: "desktop" | "mobile";
|
|
24
|
+
defaultMatchMediaValue?: boolean | (() => boolean);
|
|
25
25
|
} & React.RefAttributes<HTMLDivElement>> & {
|
|
26
26
|
Header: React.FC<import("./components/header/Component").HeaderProps>;
|
|
27
27
|
Content: React.FC<import("./typings").ContentProps>;
|
package/Context.d.ts
CHANGED
|
@@ -7,13 +7,13 @@
|
|
|
7
7
|
--modal-s-content-paddings: var(--gap-40) var(--gap-40) var(--gap-0);
|
|
8
8
|
--modal-s-content-only-bottom-padding: var(--gap-40);
|
|
9
9
|
}
|
|
10
|
-
.modal__size-
|
|
11
|
-
.modal__size-
|
|
12
|
-
.modal__size-
|
|
13
|
-
.modal__size-
|
|
14
|
-
.
|
|
10
|
+
.modal__size-500_1jn99,
|
|
11
|
+
.modal__size-600_1jn99,
|
|
12
|
+
.modal__size-800_1jn99,
|
|
13
|
+
.modal__size-1140_1jn99,
|
|
14
|
+
.modal__fullscreen_1jn99 {
|
|
15
15
|
padding: var(--modal-s-content-paddings);
|
|
16
16
|
}
|
|
17
|
-
.modal__size-
|
|
17
|
+
.modal__size-500_1jn99:last-child, .modal__size-600_1jn99:last-child, .modal__size-800_1jn99:last-child, .modal__size-1140_1jn99:last-child, .modal__fullscreen_1jn99:last-child {
|
|
18
18
|
padding-bottom: var(--modal-s-content-only-bottom-padding);
|
|
19
19
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./desktop.css');
|
|
4
4
|
|
|
5
|
-
var desktopStyles = {"size-500":"modal__size-
|
|
5
|
+
var desktopStyles = {"size-500":"modal__size-500_1jn99","size-600":"modal__size-600_1jn99","size-800":"modal__size-800_1jn99","size-1140":"modal__size-1140_1jn99","fullscreen":"modal__fullscreen_1jn99"};
|
|
6
6
|
|
|
7
7
|
module.exports = desktopStyles;
|
|
8
8
|
//# sourceMappingURL=desktop.module.css.js.map
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--gap-0: 0px;
|
|
3
3
|
}
|
|
4
|
-
.
|
|
4
|
+
.modal__content_olpeu {
|
|
5
5
|
position: relative;
|
|
6
6
|
box-sizing: border-box;
|
|
7
7
|
width: 100%;
|
|
8
8
|
z-index: 0;
|
|
9
9
|
}
|
|
10
|
-
.
|
|
10
|
+
.modal__content_olpeu.modal__withHeader_olpeu {
|
|
11
11
|
padding-top: var(--gap-0);
|
|
12
12
|
}
|
|
13
|
-
.
|
|
13
|
+
.modal__flex_olpeu {
|
|
14
14
|
flex: 1;
|
|
15
15
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./index.css');
|
|
4
4
|
|
|
5
|
-
var styles = {"content":"
|
|
5
|
+
var styles = {"content":"modal__content_olpeu","withHeader":"modal__withHeader_olpeu","flex":"modal__flex_olpeu"};
|
|
6
6
|
|
|
7
7
|
module.exports = styles;
|
|
8
8
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
--gap-0: 0px;
|
|
4
4
|
--gap-16: var(--gap-m);
|
|
5
5
|
}
|
|
6
|
-
.
|
|
6
|
+
.modal__content_dds1w {
|
|
7
7
|
padding: var(--gap-16) var(--gap-16) var(--gap-0);
|
|
8
8
|
}
|
|
9
|
-
.
|
|
9
|
+
.modal__content_dds1w:last-child {
|
|
10
10
|
padding-bottom: var(--gap-16);
|
|
11
11
|
}
|
|
@@ -14,20 +14,20 @@
|
|
|
14
14
|
--modal-vertical-padding: var(--gap-40);
|
|
15
15
|
--modal-s-footer-paddings: var(--gap-24) var(--gap-40) var(--gap-40);
|
|
16
16
|
}
|
|
17
|
-
.
|
|
17
|
+
.modal__footer_h0ktq {
|
|
18
18
|
border-bottom-left-radius: var(--modal-border-radius);
|
|
19
19
|
border-bottom-right-radius: var(--modal-border-radius);
|
|
20
20
|
}
|
|
21
|
-
.
|
|
21
|
+
.modal__sticky_h0ktq {
|
|
22
22
|
bottom: calc(var(--modal-vertical-padding) * -1);
|
|
23
23
|
}
|
|
24
|
-
.
|
|
24
|
+
.modal__sticky_h0ktq.modal__fullscreen_h0ktq {
|
|
25
25
|
bottom: var(--gap-0);
|
|
26
26
|
}
|
|
27
|
-
.modal__size-
|
|
28
|
-
.modal__size-
|
|
29
|
-
.modal__size-
|
|
30
|
-
.modal__size-
|
|
31
|
-
.
|
|
27
|
+
.modal__size-500_h0ktq,
|
|
28
|
+
.modal__size-600_h0ktq,
|
|
29
|
+
.modal__size-800_h0ktq,
|
|
30
|
+
.modal__size-1140_h0ktq,
|
|
31
|
+
.modal__fullscreen_h0ktq {
|
|
32
32
|
padding: var(--modal-s-footer-paddings);
|
|
33
33
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./desktop.css');
|
|
4
4
|
|
|
5
|
-
var desktopStyles = {"footer":"
|
|
5
|
+
var desktopStyles = {"footer":"modal__footer_h0ktq","sticky":"modal__sticky_h0ktq","fullscreen":"modal__fullscreen_h0ktq","size-500":"modal__size-500_h0ktq","size-600":"modal__size-600_h0ktq","size-800":"modal__size-800_h0ktq","size-1140":"modal__size-1140_h0ktq"};
|
|
6
6
|
|
|
7
7
|
module.exports = desktopStyles;
|
|
8
8
|
//# sourceMappingURL=desktop.module.css.js.map
|
|
@@ -7,18 +7,18 @@
|
|
|
7
7
|
--modal-footer-highlight-background: var(--color-light-modal-bg-primary);
|
|
8
8
|
--modal-footer-highlight-box-shadow: 0 -1px 0 0 var(--color-light-neutral-300);
|
|
9
9
|
}
|
|
10
|
-
.
|
|
10
|
+
.modal__footer_1976w {
|
|
11
11
|
width: 100%;
|
|
12
12
|
box-sizing: border-box;
|
|
13
13
|
transition:
|
|
14
14
|
box-shadow 0.2s ease,
|
|
15
15
|
background 0.2s ease;
|
|
16
16
|
}
|
|
17
|
-
.
|
|
17
|
+
.modal__sticky_1976w {
|
|
18
18
|
background: var(--modal-footer-background);
|
|
19
19
|
position: sticky;
|
|
20
20
|
}
|
|
21
|
-
.
|
|
21
|
+
.modal__highlighted_1976w {
|
|
22
22
|
background: var(--modal-footer-highlight-background);
|
|
23
23
|
box-shadow: var(--modal-footer-highlight-box-shadow);
|
|
24
24
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./index.css');
|
|
4
4
|
|
|
5
|
-
var styles = {"footer":"
|
|
5
|
+
var styles = {"footer":"modal__footer_1976w","sticky":"modal__sticky_1976w","highlighted":"modal__highlighted_1976w"};
|
|
6
6
|
|
|
7
7
|
module.exports = styles;
|
|
8
8
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -9,48 +9,48 @@
|
|
|
9
9
|
:root {
|
|
10
10
|
--modal-footer-default-gap: var(--gap-16);
|
|
11
11
|
}
|
|
12
|
-
.
|
|
12
|
+
.modal__column_1d4l4 {
|
|
13
13
|
display: flex;
|
|
14
14
|
flex-direction: column;
|
|
15
15
|
}
|
|
16
|
-
.
|
|
16
|
+
.modal__column_1d4l4 > *:not(:last-child):not(:only-child) {
|
|
17
17
|
margin-bottom: var(--modal-footer-default-gap);
|
|
18
18
|
}
|
|
19
|
-
.
|
|
19
|
+
.modal__column_1d4l4.modal__gap-16_1d4l4 > *:not(:last-child):not(:only-child) {
|
|
20
20
|
margin-bottom: var(--gap-16);
|
|
21
21
|
}
|
|
22
|
-
.
|
|
22
|
+
.modal__column_1d4l4.modal__gap-24_1d4l4 > *:not(:last-child):not(:only-child) {
|
|
23
23
|
margin-bottom: var(--gap-24);
|
|
24
24
|
}
|
|
25
|
-
.
|
|
25
|
+
.modal__column_1d4l4.modal__gap-32_1d4l4 > *:not(:last-child):not(:only-child) {
|
|
26
26
|
margin-bottom: var(--gap-32);
|
|
27
27
|
}
|
|
28
|
-
.
|
|
28
|
+
.modal__start_1d4l4 {
|
|
29
29
|
justify-content: flex-start;
|
|
30
30
|
}
|
|
31
|
-
.
|
|
31
|
+
.modal__center_1d4l4 {
|
|
32
32
|
justify-content: center;
|
|
33
33
|
}
|
|
34
|
-
.modal__space-
|
|
34
|
+
.modal__space-between_1d4l4 {
|
|
35
35
|
justify-content: space-between;
|
|
36
36
|
}
|
|
37
|
-
.modal__space-
|
|
37
|
+
.modal__space-between_1d4l4 > * {
|
|
38
38
|
flex: 1;
|
|
39
39
|
}
|
|
40
|
-
.
|
|
41
|
-
.
|
|
42
|
-
.modal__space-
|
|
40
|
+
.modal__start_1d4l4,
|
|
41
|
+
.modal__center_1d4l4,
|
|
42
|
+
.modal__space-between_1d4l4 {
|
|
43
43
|
display: flex;
|
|
44
44
|
}
|
|
45
|
-
.
|
|
45
|
+
.modal__start_1d4l4 > *:not(:last-child):not(:only-child), .modal__center_1d4l4 > *:not(:last-child):not(:only-child), .modal__space-between_1d4l4 > *:not(:last-child):not(:only-child) {
|
|
46
46
|
margin-right: var(--modal-footer-default-gap);
|
|
47
47
|
}
|
|
48
|
-
.
|
|
48
|
+
.modal__start_1d4l4.modal__gap-16_1d4l4 > *:not(:last-child):not(:only-child), .modal__center_1d4l4.modal__gap-16_1d4l4 > *:not(:last-child):not(:only-child), .modal__space-between_1d4l4.modal__gap-16_1d4l4 > *:not(:last-child):not(:only-child) {
|
|
49
49
|
margin-right: var(--gap-16);
|
|
50
50
|
}
|
|
51
|
-
.
|
|
51
|
+
.modal__start_1d4l4.modal__gap-24_1d4l4 > *:not(:last-child):not(:only-child), .modal__center_1d4l4.modal__gap-24_1d4l4 > *:not(:last-child):not(:only-child), .modal__space-between_1d4l4.modal__gap-24_1d4l4 > *:not(:last-child):not(:only-child) {
|
|
52
52
|
margin-right: var(--gap-24);
|
|
53
53
|
}
|
|
54
|
-
.
|
|
54
|
+
.modal__start_1d4l4.modal__gap-32_1d4l4 > *:not(:last-child):not(:only-child), .modal__center_1d4l4.modal__gap-32_1d4l4 > *:not(:last-child):not(:only-child), .modal__space-between_1d4l4.modal__gap-32_1d4l4 > *:not(:last-child):not(:only-child) {
|
|
55
55
|
margin-right: var(--gap-32);
|
|
56
56
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./layout.css');
|
|
4
4
|
|
|
5
|
-
var layoutStyles = {"column":"
|
|
5
|
+
var layoutStyles = {"column":"modal__column_1d4l4","gap-16":"modal__gap-16_1d4l4","gap-24":"modal__gap-24_1d4l4","gap-32":"modal__gap-32_1d4l4","start":"modal__start_1d4l4","center":"modal__center_1d4l4","space-between":"modal__space-between_1d4l4"};
|
|
6
6
|
|
|
7
7
|
module.exports = layoutStyles;
|
|
8
8
|
//# sourceMappingURL=layout.module.css.js.map
|
|
@@ -6,14 +6,14 @@
|
|
|
6
6
|
--gap-0: 0px;
|
|
7
7
|
--gap-16: var(--gap-m);
|
|
8
8
|
}
|
|
9
|
-
.
|
|
9
|
+
.modal__footer_1spnd {
|
|
10
10
|
padding: var(--gap-16);
|
|
11
11
|
}
|
|
12
12
|
@media (display-mode: standalone) {
|
|
13
|
-
.
|
|
13
|
+
.modal__footer_1spnd {
|
|
14
14
|
padding-bottom: calc(var(--sab) + var(--gap-16));
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
|
-
.
|
|
17
|
+
.modal__sticky_1spnd {
|
|
18
18
|
bottom: var(--gap-0);
|
|
19
19
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./mobile.css');
|
|
4
4
|
|
|
5
|
-
var mobileStyles = {"footer":"
|
|
5
|
+
var mobileStyles = {"footer":"modal__footer_1spnd","sticky":"modal__sticky_1spnd"};
|
|
6
6
|
|
|
7
7
|
module.exports = mobileStyles;
|
|
8
8
|
//# sourceMappingURL=mobile.module.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { type FC } from 'react';
|
|
2
2
|
import { type NavigationBarPrivateProps } from '@alfalab/core-components-navigation-bar-private';
|
|
3
|
-
export
|
|
3
|
+
export type HeaderProps = Omit<NavigationBarPrivateProps, 'size' | 'view' | 'parentRef'>;
|
|
4
4
|
export declare const Header: FC<HeaderProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../../src/components/header/Component.tsx"],"sourcesContent":["import React, { type FC, useCallback, useContext, useEffect } from 'react';\nimport cn from 'classnames';\n\nimport {\n NavigationBarPrivate,\n type NavigationBarPrivateProps,\n} from '@alfalab/core-components-navigation-bar-private';\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { ModalContext } from '../../Context';\nimport { ResponsiveContext } from '../../ResponsiveContext';\nimport { getSizeStyle } from '../../utils';\n\nimport desktopStyles from './desktop.module.css';\nimport styles from './index.module.css';\nimport mobileStyles from './mobile.module.css';\n\nexport type HeaderProps = Omit<NavigationBarPrivateProps, 'size' | 'view' | 'parentRef'>;\n\nexport const Header: FC<HeaderProps> = ({\n className,\n sticky,\n title,\n children,\n contentClassName,\n hasCloser = true,\n onClose: onHeaderClose,\n ...restProps\n}) => {\n const { setHasHeader, headerHighlighted, parentRef, onClose } = useContext(ModalContext);\n const { view, size, dataTestId } = useContext(ResponsiveContext);\n\n const handleClose = useCallback<NonNullable<NavigationBarPrivateProps['onClose']>>(\n (...params) => {\n if (onHeaderClose) {\n onHeaderClose(...params);\n }\n if (onClose) {\n onClose(...params);\n }\n },\n [onHeaderClose, onClose],\n );\n\n useEffect(() => {\n setHasHeader(true);\n }, [setHasHeader]);\n\n const hasContent = Boolean(title || children);\n\n return (\n <NavigationBarPrivate\n dataTestId={getDataTestId(dataTestId, 'header')}\n {...restProps}\n scrollableParentRef={parentRef}\n hasCloser={hasCloser}\n sticky={sticky}\n view={view}\n title={title}\n onClose={handleClose}\n className={cn(className, {\n [styles.highlighted]: hasContent && sticky && headerHighlighted,\n [styles.sticky]: sticky,\n [styles.hasContent]: hasContent,\n [desktopStyles.header]: view === 'desktop',\n [desktopStyles.sticky]: view === 'desktop' && sticky,\n [desktopStyles[getSizeStyle(size)]]: view === 'desktop',\n [mobileStyles.header]: view === 'mobile',\n [mobileStyles.sticky]: view === 'mobile' && sticky,\n })}\n contentClassName={cn(contentClassName, {\n [desktopStyles.content]: view === 'desktop',\n [mobileStyles.content]: view === 'mobile',\n })}\n >\n {children}\n </NavigationBarPrivate>\n );\n};\n"],"names":["__rest","useContext","ModalContext","ResponsiveContext","useCallback","useEffect","React","NavigationBarPrivate","getDataTestId","cn","styles","desktopStyles","getSizeStyle","mobileStyles"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAmBO,IAAM,MAAM,GAAoB,UAAC,EASvC,EAAA;;AARG,IAAA,IAAA,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,gBAAgB,GAAA,EAAA,CAAA,gBAAA,EAChB,EAAA,GAAA,EAAA,CAAA,SAAgB,EAAhB,SAAS,GAAG,EAAA,KAAA,MAAA,GAAA,IAAI,GAAA,EAAA,EACP,aAAa,GAAA,EAAA,CAAA,OAAA,EACnB,SAAS,GARwBA,YAAA,CAAA,EAAA,EAAA,CAAA,WAAA,EAAA,QAAA,EAAA,OAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,SAAA,CASvC,CADe;AAEN,IAAA,IAAA,KAA0DC,gBAAU,CAACC,oBAAY,CAAC,EAAhF,YAAY,GAAA,EAAA,CAAA,YAAA,EAAE,iBAAiB,uBAAA,EAAE,SAAS,eAAA,EAAE,OAAO,aAA6B;AAClF,IAAA,IAAA,EAA6B,GAAAD,gBAAU,CAACE,mCAAiB,CAAC,EAAxD,IAAI,GAAA,EAAA,CAAA,IAAA,EAAE,IAAI,GAAA,EAAA,CAAA,IAAA,EAAE,UAAU,gBAAkC;IAEhE,IAAM,WAAW,GAAGC,iBAAW,CAC3B,YAAA;QAAC,IAAS,MAAA,GAAA,EAAA;aAAT,IAAS,EAAA,GAAA,CAAA,EAAT,EAAS,GAAA,SAAA,CAAA,MAAA,EAAT,EAAS,EAAA,EAAA;YAAT,MAAS,CAAA,EAAA,CAAA,GAAA,SAAA,CAAA,EAAA,CAAA;;
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../src/components/header/Component.tsx"],"sourcesContent":["import React, { type FC, useCallback, useContext, useEffect } from 'react';\nimport cn from 'classnames';\n\nimport {\n NavigationBarPrivate,\n type NavigationBarPrivateProps,\n} from '@alfalab/core-components-navigation-bar-private';\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { ModalContext } from '../../Context';\nimport { ResponsiveContext } from '../../ResponsiveContext';\nimport { getSizeStyle } from '../../utils';\n\nimport desktopStyles from './desktop.module.css';\nimport styles from './index.module.css';\nimport mobileStyles from './mobile.module.css';\n\nexport type HeaderProps = Omit<NavigationBarPrivateProps, 'size' | 'view' | 'parentRef'>;\n\nexport const Header: FC<HeaderProps> = ({\n className,\n sticky,\n title,\n children,\n contentClassName,\n hasCloser = true,\n onClose: onHeaderClose,\n ...restProps\n}) => {\n const { setHasHeader, headerHighlighted, parentRef, onClose } = useContext(ModalContext);\n const { view, size, dataTestId } = useContext(ResponsiveContext);\n\n const handleClose = useCallback<NonNullable<NavigationBarPrivateProps['onClose']>>(\n (...params) => {\n if (onHeaderClose) {\n onHeaderClose(...params);\n }\n if (onClose) {\n onClose(...params);\n }\n },\n [onHeaderClose, onClose],\n );\n\n useEffect(() => {\n setHasHeader(true);\n }, [setHasHeader]);\n\n const hasContent = Boolean(title || children);\n\n return (\n <NavigationBarPrivate\n dataTestId={getDataTestId(dataTestId, 'header')}\n {...restProps}\n scrollableParentRef={parentRef}\n hasCloser={hasCloser}\n sticky={sticky}\n view={view}\n title={title}\n onClose={handleClose}\n className={cn(className, {\n [styles.highlighted]: hasContent && sticky && headerHighlighted,\n [styles.sticky]: sticky,\n [styles.hasContent]: hasContent,\n [desktopStyles.header]: view === 'desktop',\n [desktopStyles.sticky]: view === 'desktop' && sticky,\n [desktopStyles[getSizeStyle(size)]]: view === 'desktop',\n [mobileStyles.header]: view === 'mobile',\n [mobileStyles.sticky]: view === 'mobile' && sticky,\n })}\n contentClassName={cn(contentClassName, {\n [desktopStyles.content]: view === 'desktop',\n [mobileStyles.content]: view === 'mobile',\n })}\n >\n {children}\n </NavigationBarPrivate>\n );\n};\n"],"names":["__rest","useContext","ModalContext","ResponsiveContext","useCallback","useEffect","React","NavigationBarPrivate","getDataTestId","cn","styles","desktopStyles","getSizeStyle","mobileStyles"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAmBO,IAAM,MAAM,GAAoB,UAAC,EASvC,EAAA;;AARG,IAAA,IAAA,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,gBAAgB,GAAA,EAAA,CAAA,gBAAA,EAChB,EAAA,GAAA,EAAA,CAAA,SAAgB,EAAhB,SAAS,GAAG,EAAA,KAAA,MAAA,GAAA,IAAI,GAAA,EAAA,EACP,aAAa,GAAA,EAAA,CAAA,OAAA,EACnB,SAAS,GARwBA,YAAA,CAAA,EAAA,EAAA,CAAA,WAAA,EAAA,QAAA,EAAA,OAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,SAAA,CASvC,CADe;AAEN,IAAA,IAAA,KAA0DC,gBAAU,CAACC,oBAAY,CAAC,EAAhF,YAAY,GAAA,EAAA,CAAA,YAAA,EAAE,iBAAiB,uBAAA,EAAE,SAAS,eAAA,EAAE,OAAO,aAA6B;AAClF,IAAA,IAAA,EAA6B,GAAAD,gBAAU,CAACE,mCAAiB,CAAC,EAAxD,IAAI,GAAA,EAAA,CAAA,IAAA,EAAE,IAAI,GAAA,EAAA,CAAA,IAAA,EAAE,UAAU,gBAAkC;IAEhE,IAAM,WAAW,GAAGC,iBAAW,CAC3B,YAAA;QAAC,IAAS,MAAA,GAAA,EAAA;aAAT,IAAS,EAAA,GAAA,CAAA,EAAT,EAAS,GAAA,SAAA,CAAA,MAAA,EAAT,EAAS,EAAA,EAAA;YAAT,MAAS,CAAA,EAAA,CAAA,GAAA,SAAA,CAAA,EAAA,CAAA;;QACN,IAAI,aAAa,EAAE;YACf,aAAa,CAAA,KAAA,CAAA,MAAA,EAAI,MAAM,CAAE;;QAE7B,IAAI,OAAO,EAAE;YACT,OAAO,CAAA,KAAA,CAAA,MAAA,EAAI,MAAM,CAAE;;AAE3B,KAAC,EACD,CAAC,aAAa,EAAE,OAAO,CAAC,CAC3B;AAED,IAAAC,eAAS,CAAC,YAAA;QACN,YAAY,CAAC,IAAI,CAAC;AACtB,KAAC,EAAE,CAAC,YAAY,CAAC,CAAC;IAElB,IAAM,UAAU,GAAG,OAAO,CAAC,KAAK,IAAI,QAAQ,CAAC;AAE7C,IAAA,QACIC,sBAAC,CAAA,aAAA,CAAAC,uDAAoB,mBACjB,UAAU,EAAEC,kCAAa,CAAC,UAAU,EAAE,QAAQ,CAAC,IAC3C,SAAS,EAAA,EACb,mBAAmB,EAAE,SAAS,EAC9B,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,WAAW,EACpB,SAAS,EAAEC,mBAAE,CAAC,SAAS,GAAA,EAAA,GAAA,EAAA;YACnB,EAAC,CAAAC,YAAM,CAAC,WAAW,CAAA,GAAG,UAAU,IAAI,MAAM,IAAI,iBAAiB;AAC/D,YAAA,EAAA,CAACA,YAAM,CAAC,MAAM,CAAA,GAAG,MAAM;AACvB,YAAA,EAAA,CAACA,YAAM,CAAC,UAAU,CAAA,GAAG,UAAU;AAC/B,YAAA,EAAA,CAACC,cAAa,CAAC,MAAM,CAAG,GAAA,IAAI,KAAK,SAAS;YAC1C,EAAC,CAAAA,cAAa,CAAC,MAAM,CAAA,GAAG,IAAI,KAAK,SAAS,IAAI,MAAM;YACpD,EAAC,CAAAA,cAAa,CAACC,kBAAY,CAAC,IAAI,CAAC,CAAC,CAAA,GAAG,IAAI,KAAK,SAAS;AACvD,YAAA,EAAA,CAACC,aAAY,CAAC,MAAM,CAAG,GAAA,IAAI,KAAK,QAAQ;YACxC,EAAC,CAAAA,aAAY,CAAC,MAAM,CAAA,GAAG,IAAI,KAAK,QAAQ,IAAI,MAAM;AACpD,YAAA,EAAA,EAAA,EACF,gBAAgB,EAAEJ,mBAAE,CAAC,gBAAgB,GAAA,EAAA,GAAA,EAAA;AACjC,YAAA,EAAA,CAACE,cAAa,CAAC,OAAO,CAAG,GAAA,IAAI,KAAK,SAAS;AAC3C,YAAA,EAAA,CAACE,aAAY,CAAC,OAAO,CAAG,GAAA,IAAI,KAAK,QAAQ;gBAC3C,EAED,CAAA,EAAA,QAAQ,CACU;AAE/B;;;;"}
|
|
@@ -23,37 +23,37 @@
|
|
|
23
23
|
--modal-s-header-desktop-content-paddings: var(--gap-12);
|
|
24
24
|
--modal-l-header-desktop-content-paddings: var(--gap-6) var(--gap-12) var(--gap-16);
|
|
25
25
|
}
|
|
26
|
-
.
|
|
26
|
+
.modal__header_qf9x8 {
|
|
27
27
|
border-top-left-radius: var(--modal-border-radius);
|
|
28
28
|
border-top-right-radius: var(--modal-border-radius);
|
|
29
29
|
}
|
|
30
|
-
.modal__size-
|
|
31
|
-
.modal__size-
|
|
30
|
+
.modal__size-500_qf9x8 .modal__content_qf9x8,
|
|
31
|
+
.modal__size-600_qf9x8 .modal__content_qf9x8 {
|
|
32
32
|
padding: var(--modal-s-header-desktop-content-paddings);
|
|
33
33
|
font-size: 22px;
|
|
34
34
|
line-height: 26px;
|
|
35
35
|
font-weight: 700;
|
|
36
36
|
font-family: var(--font-family-system);
|
|
37
37
|
}
|
|
38
|
-
.modal__size-
|
|
39
|
-
.modal__size-
|
|
40
|
-
.
|
|
38
|
+
.modal__size-800_qf9x8 .modal__content_qf9x8,
|
|
39
|
+
.modal__size-1140_qf9x8 .modal__content_qf9x8,
|
|
40
|
+
.modal__fullscreen_qf9x8 .modal__content_qf9x8 {
|
|
41
41
|
padding: var(--modal-l-header-desktop-content-paddings);
|
|
42
42
|
font-size: 30px;
|
|
43
43
|
line-height: 36px;
|
|
44
44
|
font-weight: 700;
|
|
45
45
|
font-family: var(--font-family-system);
|
|
46
46
|
}
|
|
47
|
-
.modal__size-
|
|
48
|
-
.modal__size-
|
|
49
|
-
.modal__size-
|
|
50
|
-
.modal__size-
|
|
51
|
-
.
|
|
47
|
+
.modal__size-500_qf9x8,
|
|
48
|
+
.modal__size-600_qf9x8,
|
|
49
|
+
.modal__size-800_qf9x8,
|
|
50
|
+
.modal__size-1140_qf9x8,
|
|
51
|
+
.modal__fullscreen_qf9x8 {
|
|
52
52
|
padding: var(--modal-s-header-paddings);
|
|
53
53
|
}
|
|
54
|
-
.
|
|
54
|
+
.modal__sticky_qf9x8 {
|
|
55
55
|
top: calc(var(--modal-vertical-padding) * -1);
|
|
56
56
|
}
|
|
57
|
-
.
|
|
57
|
+
.modal__sticky_qf9x8.modal__fullscreen_qf9x8 {
|
|
58
58
|
top: var(--gap-0);
|
|
59
59
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./desktop.css');
|
|
4
4
|
|
|
5
|
-
var desktopStyles = {"header":"
|
|
5
|
+
var desktopStyles = {"header":"modal__header_qf9x8","size-500":"modal__size-500_qf9x8","content":"modal__content_qf9x8","size-600":"modal__size-600_qf9x8","size-800":"modal__size-800_qf9x8","size-1140":"modal__size-1140_qf9x8","fullscreen":"modal__fullscreen_qf9x8","sticky":"modal__sticky_qf9x8"};
|
|
6
6
|
|
|
7
7
|
module.exports = desktopStyles;
|
|
8
8
|
//# sourceMappingURL=desktop.module.css.js.map
|
|
@@ -7,14 +7,14 @@
|
|
|
7
7
|
--modal-header-highlight-background: var(--color-light-modal-bg-primary);
|
|
8
8
|
--modal-header-highlight-box-shadow: 0 1px 0 0 var(--color-light-neutral-300);
|
|
9
9
|
}
|
|
10
|
-
.
|
|
10
|
+
.modal__highlighted_1y3xq {
|
|
11
11
|
background: var(--modal-header-highlight-background);
|
|
12
12
|
box-shadow: var(--modal-header-highlight-box-shadow);
|
|
13
13
|
}
|
|
14
|
-
.
|
|
14
|
+
.modal__sticky_1y3xq {
|
|
15
15
|
position: sticky;
|
|
16
16
|
z-index: 1;
|
|
17
17
|
}
|
|
18
|
-
.
|
|
18
|
+
.modal__sticky_1y3xq.modal__hasContent_1y3xq {
|
|
19
19
|
background: var(--modal-header-background);
|
|
20
20
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./index.css');
|
|
4
4
|
|
|
5
|
-
var styles = {"highlighted":"
|
|
5
|
+
var styles = {"highlighted":"modal__highlighted_1y3xq","sticky":"modal__sticky_1y3xq","hasContent":"modal__hasContent_1y3xq"};
|
|
6
6
|
|
|
7
7
|
module.exports = styles;
|
|
8
8
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -19,18 +19,18 @@
|
|
|
19
19
|
--modal-header-mobile-paddings: var(--modal-header-mobile-top-padding) var(--gap-8) var(--gap-4)
|
|
20
20
|
var(--gap-8);
|
|
21
21
|
}
|
|
22
|
-
.
|
|
22
|
+
.modal__header_n7ver {
|
|
23
23
|
padding: var(--modal-header-mobile-paddings);
|
|
24
24
|
}
|
|
25
25
|
@media (display-mode: standalone) {
|
|
26
|
-
.
|
|
26
|
+
.modal__header_n7ver {
|
|
27
27
|
padding-top: calc(var(--sat) + var(--modal-header-mobile-top-padding));
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
|
-
.
|
|
30
|
+
.modal__sticky_n7ver {
|
|
31
31
|
top: var(--gap-0);
|
|
32
32
|
}
|
|
33
|
-
.
|
|
33
|
+
.modal__content_n7ver {
|
|
34
34
|
padding: var(--modal-header-mobile-content-paddings);
|
|
35
35
|
font-size: 20px;
|
|
36
36
|
line-height: 28px;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./mobile.css');
|
|
4
4
|
|
|
5
|
-
var mobileStyles = {"header":"
|
|
5
|
+
var mobileStyles = {"header":"modal__header_n7ver","sticky":"modal__sticky_n7ver","content":"modal__content_n7ver"};
|
|
6
6
|
|
|
7
7
|
module.exports = mobileStyles;
|
|
8
8
|
//# sourceMappingURL=mobile.module.css.js.map
|
package/cssm/Component.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { type View } from './typings';
|
|
3
3
|
export declare const Modal: React.ForwardRefExoticComponent<import("@alfalab/core-components-base-modal").BaseModalProps & {
|
|
4
|
-
size?: "fullscreen" | 500 | 600 | 800 | 1140
|
|
5
|
-
fixedPosition?: boolean
|
|
6
|
-
hasCloser?: boolean
|
|
7
|
-
iOSLock?: boolean
|
|
4
|
+
size?: "fullscreen" | 500 | 600 | 800 | 1140;
|
|
5
|
+
fixedPosition?: boolean;
|
|
6
|
+
hasCloser?: boolean;
|
|
7
|
+
iOSLock?: boolean;
|
|
8
8
|
} & {
|
|
9
9
|
view: View;
|
|
10
10
|
} & React.RefAttributes<HTMLDivElement>>;
|
package/cssm/Component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useRef } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { BaseModal } from '@alfalab/core-components-base-modal';\n\nimport { ResponsiveContext } from './ResponsiveContext';\nimport { type ModalDesktopProps, type View } from './typings';\nimport { getSizeStyle } from './utils';\n\nimport desktopStyles from './desktop/desktop.module.css';\nimport mobileStyles from './mobile/mobile.module.css';\nimport transitions from './transitions.module.css';\n\nexport const Modal = forwardRef<HTMLDivElement, ModalDesktopProps & { view: View }>(\n (\n {\n size = 500,\n fixedPosition,\n children,\n className,\n wrapperClassName,\n transitionProps = {},\n view,\n dataTestId,\n ...restProps\n },\n ref,\n ) => {\n const modalRef = useRef<HTMLElement>(null);\n\n const handleEntered = (node: HTMLElement, isAppearing: boolean) => {\n if (fixedPosition && modalRef.current) {\n const content = modalRef.current.querySelector<HTMLElement>(\n `.${desktopStyles.component}`,\n );\n\n if (content) {\n const { marginTop } = window.getComputedStyle(content);\n\n content.style.marginTop = marginTop;\n }\n }\n\n if (transitionProps.onEntered) {\n transitionProps.onEntered(node, isAppearing);\n }\n };\n\n const baseModalProps =\n view === 'desktop'\n ? {\n ref: mergeRefs([ref, modalRef]),\n wrapperClassName: cn(desktopStyles.wrapper, wrapperClassName, {\n [desktopStyles.fullscreen]: size === 'fullscreen',\n }),\n className: cn(\n desktopStyles.component,\n className,\n desktopStyles[getSizeStyle(size)],\n ),\n backdropProps: {\n invisible: size === 'fullscreen',\n ...restProps.backdropProps,\n },\n transitionProps: {\n classNames: transitions,\n ...transitionProps,\n onEntered: handleEntered,\n },\n }\n : {\n wrapperClassName,\n ref,\n transitionProps: {\n classNames: transitions,\n ...transitionProps,\n },\n className: cn(className, mobileStyles.component),\n contentProps: {\n ...restProps.contentProps,\n className: cn(mobileStyles.content, restProps.contentProps?.className),\n },\n };\n\n const contextValue = useMemo(() => ({ size, view, dataTestId }), [size, view, dataTestId]);\n\n return (\n <ResponsiveContext.Provider value={contextValue}>\n <BaseModal {...restProps} {...baseModalProps} dataTestId={dataTestId}>\n {children}\n </BaseModal>\n </ResponsiveContext.Provider>\n );\n },\n);\n\nModal.displayName = 'Modal';\n"],"names":["forwardRef","__rest","useRef","desktopStyles","mergeRefs","cn","getSizeStyle","__assign","transitions","mobileStyles","useMemo","React","ResponsiveContext","BaseModal"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;IAca,KAAK,GAAGA,gBAAU,CAC3B,UACI,EAUC,EACD,GAAG,EAAA;;;AAVC,IAAA,IAAA,EAAU,GAAA,EAAA,CAAA,IAAA,EAAV,IAAI,GAAA,EAAA,KAAA,MAAA,GAAG,GAAG,GAAA,EAAA,EACV,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,SAAS,eAAA,EACT,gBAAgB,GAAA,EAAA,CAAA,gBAAA,EAChB,uBAAoB,EAApB,eAAe,GAAG,EAAA,KAAA,MAAA,GAAA,EAAE,KAAA,EACpB,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,UAAU,GAAA,EAAA,CAAA,UAAA,EACP,SAAS,GAAAC,YAAA,CAAA,EAAA,EAThB,+GAUC,CADe;AAIhB,IAAA,IAAM,QAAQ,GAAGC,YAAM,CAAc,IAAI,CAAC;AAE1C,IAAA,IAAM,aAAa,GAAG,UAAC,IAAiB,EAAE,WAAoB,EAAA;AAC1D,QAAA,IAAI,aAAa,IAAI,QAAQ,CAAC,OAAO,EAAE;AACnC,YAAA,IAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC,aAAa,CAC1C,GAAA,CAAA,MAAA,CAAIC,8BAAa,CAAC,SAAS,CAAE,CAChC;
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useRef } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { BaseModal } from '@alfalab/core-components-base-modal';\n\nimport { ResponsiveContext } from './ResponsiveContext';\nimport { type ModalDesktopProps, type View } from './typings';\nimport { getSizeStyle } from './utils';\n\nimport desktopStyles from './desktop/desktop.module.css';\nimport mobileStyles from './mobile/mobile.module.css';\nimport transitions from './transitions.module.css';\n\nexport const Modal = forwardRef<HTMLDivElement, ModalDesktopProps & { view: View }>(\n (\n {\n size = 500,\n fixedPosition,\n children,\n className,\n wrapperClassName,\n transitionProps = {},\n view,\n dataTestId,\n ...restProps\n },\n ref,\n ) => {\n const modalRef = useRef<HTMLElement>(null);\n\n const handleEntered = (node: HTMLElement, isAppearing: boolean) => {\n if (fixedPosition && modalRef.current) {\n const content = modalRef.current.querySelector<HTMLElement>(\n `.${desktopStyles.component}`,\n );\n\n if (content) {\n const { marginTop } = window.getComputedStyle(content);\n\n content.style.marginTop = marginTop;\n }\n }\n\n if (transitionProps.onEntered) {\n transitionProps.onEntered(node, isAppearing);\n }\n };\n\n const baseModalProps =\n view === 'desktop'\n ? {\n ref: mergeRefs([ref, modalRef]),\n wrapperClassName: cn(desktopStyles.wrapper, wrapperClassName, {\n [desktopStyles.fullscreen]: size === 'fullscreen',\n }),\n className: cn(\n desktopStyles.component,\n className,\n desktopStyles[getSizeStyle(size)],\n ),\n backdropProps: {\n invisible: size === 'fullscreen',\n ...restProps.backdropProps,\n },\n transitionProps: {\n classNames: transitions,\n ...transitionProps,\n onEntered: handleEntered,\n },\n }\n : {\n wrapperClassName,\n ref,\n transitionProps: {\n classNames: transitions,\n ...transitionProps,\n },\n className: cn(className, mobileStyles.component),\n contentProps: {\n ...restProps.contentProps,\n className: cn(mobileStyles.content, restProps.contentProps?.className),\n },\n };\n\n const contextValue = useMemo(() => ({ size, view, dataTestId }), [size, view, dataTestId]);\n\n return (\n <ResponsiveContext.Provider value={contextValue}>\n <BaseModal {...restProps} {...baseModalProps} dataTestId={dataTestId}>\n {children}\n </BaseModal>\n </ResponsiveContext.Provider>\n );\n },\n);\n\nModal.displayName = 'Modal';\n"],"names":["forwardRef","__rest","useRef","desktopStyles","mergeRefs","cn","getSizeStyle","__assign","transitions","mobileStyles","useMemo","React","ResponsiveContext","BaseModal"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;IAca,KAAK,GAAGA,gBAAU,CAC3B,UACI,EAUC,EACD,GAAG,EAAA;;;AAVC,IAAA,IAAA,EAAU,GAAA,EAAA,CAAA,IAAA,EAAV,IAAI,GAAA,EAAA,KAAA,MAAA,GAAG,GAAG,GAAA,EAAA,EACV,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,SAAS,eAAA,EACT,gBAAgB,GAAA,EAAA,CAAA,gBAAA,EAChB,uBAAoB,EAApB,eAAe,GAAG,EAAA,KAAA,MAAA,GAAA,EAAE,KAAA,EACpB,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,UAAU,GAAA,EAAA,CAAA,UAAA,EACP,SAAS,GAAAC,YAAA,CAAA,EAAA,EAThB,+GAUC,CADe;AAIhB,IAAA,IAAM,QAAQ,GAAGC,YAAM,CAAc,IAAI,CAAC;AAE1C,IAAA,IAAM,aAAa,GAAG,UAAC,IAAiB,EAAE,WAAoB,EAAA;AAC1D,QAAA,IAAI,aAAa,IAAI,QAAQ,CAAC,OAAO,EAAE;AACnC,YAAA,IAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC,aAAa,CAC1C,GAAA,CAAA,MAAA,CAAIC,8BAAa,CAAC,SAAS,CAAE,CAChC;YAED,IAAI,OAAO,EAAE;gBACD,IAAA,SAAS,GAAK,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAA,SAArC;AAEjB,gBAAA,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,SAAS;;;AAI3C,QAAA,IAAI,eAAe,CAAC,SAAS,EAAE;AAC3B,YAAA,eAAe,CAAC,SAAS,CAAC,IAAI,EAAE,WAAW,CAAC;;AAEpD,KAAC;AAED,IAAA,IAAM,cAAc,GAChB,IAAI,KAAK;AACL,UAAE;YACI,GAAG,EAAEC,0BAAS,CAAC,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;AAC/B,YAAA,gBAAgB,EAAEC,mBAAE,CAACF,8BAAa,CAAC,OAAO,EAAE,gBAAgB,GAAA,EAAA,GAAA,EAAA;AACxD,gBAAA,EAAA,CAACA,8BAAa,CAAC,UAAU,CAAG,GAAA,IAAI,KAAK,YAAY;AACnD,gBAAA,EAAA,EAAA;AACF,YAAA,SAAS,EAAEE,mBAAE,CACTF,8BAAa,CAAC,SAAS,EACvB,SAAS,EACTA,8BAAa,CAACG,kBAAY,CAAC,IAAI,CAAC,CAAC,CACpC;YACD,aAAa,EAAAC,cAAA,CAAA,EACT,SAAS,EAAE,IAAI,KAAK,YAAY,EAC7B,EAAA,SAAS,CAAC,aAAa,CAC7B;YACD,eAAe,EAAAA,cAAA,CAAAA,cAAA,CAAA,EACX,UAAU,EAAEC,4BAAW,EAAA,EACpB,eAAe,CAClB,EAAA,EAAA,SAAS,EAAE,aAAa,EAC3B,CAAA;AACJ;AACH,UAAE;AACI,YAAA,gBAAgB,EAAA,gBAAA;AAChB,YAAA,GAAG,EAAA,GAAA;AACH,YAAA,eAAe,mBACX,UAAU,EAAEA,4BAAW,EAAA,EACpB,eAAe,CACrB;YACD,SAAS,EAAEH,mBAAE,CAAC,SAAS,EAAEI,6BAAY,CAAC,SAAS,CAAC;YAChD,YAAY,EAAAF,cAAA,CAAAA,cAAA,CAAA,EAAA,EACL,SAAS,CAAC,YAAY,KACzB,SAAS,EAAEF,mBAAE,CAACI,6BAAY,CAAC,OAAO,EAAE,MAAA,SAAS,CAAC,YAAY,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,SAAS,CAAC,EACzE,CAAA;SACJ;AAEX,IAAA,IAAM,YAAY,GAAGC,aAAO,CAAC,YAAM,EAAA,QAAC,EAAE,IAAI,EAAA,IAAA,EAAE,IAAI,EAAA,IAAA,EAAE,UAAU,EAAA,UAAA,EAAE,EAA3B,EAA4B,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC;IAE1F,QACIC,qCAACC,mCAAiB,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAE,YAAY,EAAA;AAC3C,QAAAD,sBAAA,CAAA,aAAA,CAACE,cAAS,EAAAN,cAAA,CAAA,EAAA,EAAK,SAAS,EAAM,cAAc,EAAE,EAAA,UAAU,EAAE,UAAU,EAC/D,CAAA,EAAA,QAAQ,CACD,CACa;AAErC,CAAC;AAGL,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}
|