@alfalab/core-components-side-panel 6.0.1 → 6.0.3
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.responsive.d.ts +2 -2
- package/Component.responsive.js.map +1 -1
- package/Context.js.map +1 -1
- package/ResponsiveContext.d.ts +1 -1
- package/ResponsiveContext.js.map +1 -1
- package/components/content/Component.d.ts +1 -1
- package/components/content/Component.desktop.d.ts +2 -2
- package/components/content/Component.desktop.js.map +1 -1
- package/components/content/Component.js.map +1 -1
- package/components/content/Component.mobile.d.ts +2 -2
- package/components/content/Component.mobile.js.map +1 -1
- package/components/content/desktop.css +3 -3
- package/components/content/desktop.module.css.js +1 -1
- package/components/content/index.css +4 -4
- package/components/content/index.module.css.js +1 -1
- package/components/content/mobile.css +3 -3
- package/components/content/mobile.module.css.js +1 -1
- package/components/controls/Component.d.ts +1 -1
- package/components/controls/Component.js.map +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/Component.desktop.d.ts +2 -2
- package/components/footer/Component.desktop.js.map +1 -1
- package/components/footer/Component.js +3 -0
- package/components/footer/Component.js.map +1 -1
- package/components/footer/Component.mobile.d.ts +2 -2
- package/components/footer/Component.mobile.js.map +1 -1
- package/components/footer/desktop.css +2 -2
- package/components/footer/desktop.module.css.js +1 -1
- package/components/footer/index.css +6 -4
- package/components/footer/index.module.css.js +1 -1
- package/components/footer/index.module.css.js.map +1 -1
- package/components/footer/layout.css +19 -19
- package/components/footer/layout.module.css.js +1 -1
- package/components/footer/mobile.css +5 -5
- package/components/footer/mobile.module.css.js +1 -1
- package/components/header/Component.d.ts +2 -2
- package/components/header/Component.js.map +1 -1
- package/components/header/desktop.css +6 -6
- package/components/header/desktop.module.css.js +1 -1
- package/components/header/index.css +18 -16
- package/components/header/index.module.css.js +1 -1
- package/components/header/index.module.css.js.map +1 -1
- package/components/header/mobile.css +8 -8
- package/components/header/mobile.module.css.js +1 -1
- package/cssm/Component.responsive.d.ts +2 -2
- package/cssm/Component.responsive.js.map +1 -1
- package/cssm/Context.js.map +1 -1
- package/cssm/ResponsiveContext.d.ts +1 -1
- package/cssm/ResponsiveContext.js.map +1 -1
- package/cssm/components/content/Component.d.ts +1 -1
- package/cssm/components/content/Component.desktop.d.ts +2 -2
- package/cssm/components/content/Component.desktop.js.map +1 -1
- package/cssm/components/content/Component.js.map +1 -1
- package/cssm/components/content/Component.mobile.d.ts +2 -2
- package/cssm/components/content/Component.mobile.js.map +1 -1
- package/cssm/components/content/desktop.module.css +1 -1
- package/cssm/components/content/index.module.css +1 -1
- package/cssm/components/content/mobile.module.css +1 -1
- package/cssm/components/controls/Component.d.ts +1 -1
- package/cssm/components/controls/Component.js.map +1 -1
- package/cssm/components/footer/Component.d.ts +1 -1
- package/cssm/components/footer/Component.desktop.d.ts +2 -2
- package/cssm/components/footer/Component.desktop.js.map +1 -1
- package/cssm/components/footer/Component.js +3 -0
- package/cssm/components/footer/Component.js.map +1 -1
- package/cssm/components/footer/Component.mobile.d.ts +2 -2
- package/cssm/components/footer/Component.mobile.js.map +1 -1
- package/cssm/components/footer/index.module.css +3 -1
- package/cssm/components/footer/layout.module.css +3 -3
- package/cssm/components/footer/mobile.module.css +2 -2
- package/cssm/components/header/Component.d.ts +2 -2
- package/cssm/components/header/Component.js.map +1 -1
- package/cssm/components/header/desktop.module.css +2 -2
- package/cssm/components/header/index.module.css +5 -3
- package/cssm/components/header/mobile.module.css +4 -4
- package/cssm/desktop/Component.desktop.d.ts +4 -4
- package/cssm/desktop/Component.desktop.js.map +1 -1
- package/cssm/desktop/transitions.desktop.module.css +9 -3
- package/cssm/mobile/Component.mobile.d.ts +2 -2
- package/cssm/mobile/Component.mobile.js.map +1 -1
- package/cssm/mobile/mobile.module.css +1 -1
- package/cssm/mobile/transitions.mobile.module.css +6 -2
- package/desktop/Component.desktop.d.ts +4 -4
- package/desktop/Component.desktop.js.map +1 -1
- package/desktop/desktop.css +2 -2
- package/desktop/desktop.module.css.js +1 -1
- package/desktop/transitions.desktop.css +15 -9
- package/desktop/transitions.desktop.module.css.js +1 -1
- package/desktop/transitions.desktop.module.css.js.map +1 -1
- package/esm/Component.responsive.d.ts +2 -2
- package/esm/Component.responsive.js.map +1 -1
- package/esm/Context.js.map +1 -1
- package/esm/ResponsiveContext.d.ts +1 -1
- package/esm/ResponsiveContext.js.map +1 -1
- package/esm/components/content/Component.d.ts +1 -1
- package/esm/components/content/Component.desktop.d.ts +2 -2
- package/esm/components/content/Component.desktop.js.map +1 -1
- package/esm/components/content/Component.js.map +1 -1
- package/esm/components/content/Component.mobile.d.ts +2 -2
- package/esm/components/content/Component.mobile.js.map +1 -1
- package/esm/components/content/desktop.css +3 -3
- package/esm/components/content/desktop.module.css.js +1 -1
- package/esm/components/content/index.css +4 -4
- package/esm/components/content/index.module.css.js +1 -1
- package/esm/components/content/mobile.css +3 -3
- package/esm/components/content/mobile.module.css.js +1 -1
- package/esm/components/controls/Component.d.ts +1 -1
- package/esm/components/controls/Component.js.map +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/Component.desktop.d.ts +2 -2
- package/esm/components/footer/Component.desktop.js.map +1 -1
- package/esm/components/footer/Component.js +3 -0
- package/esm/components/footer/Component.js.map +1 -1
- package/esm/components/footer/Component.mobile.d.ts +2 -2
- package/esm/components/footer/Component.mobile.js.map +1 -1
- package/esm/components/footer/desktop.css +2 -2
- package/esm/components/footer/desktop.module.css.js +1 -1
- package/esm/components/footer/index.css +6 -4
- package/esm/components/footer/index.module.css.js +1 -1
- package/esm/components/footer/index.module.css.js.map +1 -1
- package/esm/components/footer/layout.css +19 -19
- package/esm/components/footer/layout.module.css.js +1 -1
- package/esm/components/footer/mobile.css +5 -5
- package/esm/components/footer/mobile.module.css.js +1 -1
- package/esm/components/header/Component.d.ts +2 -2
- package/esm/components/header/Component.js.map +1 -1
- package/esm/components/header/desktop.css +6 -6
- package/esm/components/header/desktop.module.css.js +1 -1
- package/esm/components/header/index.css +18 -16
- package/esm/components/header/index.module.css.js +1 -1
- package/esm/components/header/index.module.css.js.map +1 -1
- package/esm/components/header/mobile.css +8 -8
- package/esm/components/header/mobile.module.css.js +1 -1
- package/esm/desktop/Component.desktop.d.ts +4 -4
- package/esm/desktop/Component.desktop.js.map +1 -1
- package/esm/desktop/desktop.css +2 -2
- package/esm/desktop/desktop.module.css.js +1 -1
- package/esm/desktop/transitions.desktop.css +15 -9
- package/esm/desktop/transitions.desktop.module.css.js +1 -1
- package/esm/desktop/transitions.desktop.module.css.js.map +1 -1
- package/esm/mobile/Component.mobile.d.ts +2 -2
- package/esm/mobile/Component.mobile.js.map +1 -1
- package/esm/mobile/mobile.css +5 -5
- package/esm/mobile/mobile.module.css.js +1 -1
- package/esm/mobile/transitions.mobile.css +13 -9
- package/esm/mobile/transitions.mobile.module.css.js +1 -1
- package/esm/mobile/transitions.mobile.module.css.js.map +1 -1
- package/mobile/Component.mobile.d.ts +2 -2
- package/mobile/Component.mobile.js.map +1 -1
- package/mobile/mobile.css +5 -5
- package/mobile/mobile.module.css.js +1 -1
- package/mobile/transitions.mobile.css +13 -9
- package/mobile/transitions.mobile.module.css.js +1 -1
- package/mobile/transitions.mobile.module.css.js.map +1 -1
- package/modern/Component.responsive.d.ts +2 -2
- package/modern/Component.responsive.js.map +1 -1
- package/modern/Context.js.map +1 -1
- package/modern/ResponsiveContext.d.ts +1 -1
- package/modern/ResponsiveContext.js.map +1 -1
- package/modern/components/content/Component.d.ts +1 -1
- package/modern/components/content/Component.desktop.d.ts +2 -2
- package/modern/components/content/Component.desktop.js.map +1 -1
- package/modern/components/content/Component.js.map +1 -1
- package/modern/components/content/Component.mobile.d.ts +2 -2
- package/modern/components/content/Component.mobile.js.map +1 -1
- package/modern/components/content/desktop.css +3 -3
- package/modern/components/content/desktop.module.css.js +1 -1
- package/modern/components/content/index.css +4 -4
- package/modern/components/content/index.module.css.js +1 -1
- package/modern/components/content/mobile.css +3 -3
- package/modern/components/content/mobile.module.css.js +1 -1
- package/modern/components/controls/Component.d.ts +1 -1
- package/modern/components/controls/Component.js.map +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/Component.desktop.d.ts +2 -2
- package/modern/components/footer/Component.desktop.js.map +1 -1
- package/modern/components/footer/Component.js +3 -0
- package/modern/components/footer/Component.js.map +1 -1
- package/modern/components/footer/Component.mobile.d.ts +2 -2
- package/modern/components/footer/Component.mobile.js.map +1 -1
- package/modern/components/footer/desktop.css +2 -2
- package/modern/components/footer/desktop.module.css.js +1 -1
- package/modern/components/footer/index.css +6 -4
- package/modern/components/footer/index.module.css.js +1 -1
- package/modern/components/footer/index.module.css.js.map +1 -1
- package/modern/components/footer/layout.css +19 -19
- package/modern/components/footer/layout.module.css.js +1 -1
- package/modern/components/footer/mobile.css +5 -5
- package/modern/components/footer/mobile.module.css.js +1 -1
- package/modern/components/header/Component.d.ts +2 -2
- package/modern/components/header/Component.js.map +1 -1
- package/modern/components/header/desktop.css +6 -6
- package/modern/components/header/desktop.module.css.js +1 -1
- package/modern/components/header/index.css +18 -16
- package/modern/components/header/index.module.css.js +1 -1
- package/modern/components/header/index.module.css.js.map +1 -1
- package/modern/components/header/mobile.css +8 -8
- package/modern/components/header/mobile.module.css.js +1 -1
- package/modern/desktop/Component.desktop.d.ts +4 -4
- package/modern/desktop/Component.desktop.js.map +1 -1
- package/modern/desktop/desktop.css +2 -2
- package/modern/desktop/desktop.module.css.js +1 -1
- package/modern/desktop/transitions.desktop.css +15 -9
- package/modern/desktop/transitions.desktop.module.css.js +1 -1
- package/modern/desktop/transitions.desktop.module.css.js.map +1 -1
- package/modern/mobile/Component.mobile.d.ts +2 -2
- package/modern/mobile/Component.mobile.js.map +1 -1
- package/modern/mobile/mobile.css +5 -5
- package/modern/mobile/mobile.module.css.js +1 -1
- package/modern/mobile/transitions.mobile.css +13 -9
- package/modern/mobile/transitions.mobile.module.css.js +1 -1
- package/modern/mobile/transitions.mobile.module.css.js.map +1 -1
- package/moderncssm/Component.responsive.d.ts +2 -2
- package/moderncssm/Component.responsive.js.map +1 -1
- package/moderncssm/Context.js.map +1 -1
- package/moderncssm/ResponsiveContext.d.ts +1 -1
- package/moderncssm/ResponsiveContext.js.map +1 -1
- package/moderncssm/components/content/Component.d.ts +1 -1
- package/moderncssm/components/content/Component.desktop.d.ts +2 -2
- package/moderncssm/components/content/Component.desktop.js.map +1 -1
- package/moderncssm/components/content/Component.js.map +1 -1
- package/moderncssm/components/content/Component.mobile.d.ts +2 -2
- package/moderncssm/components/content/Component.mobile.js.map +1 -1
- package/moderncssm/components/content/desktop.module.css +3 -1
- package/moderncssm/components/content/index.module.css +3 -1
- package/moderncssm/components/content/mobile.module.css +3 -1
- package/moderncssm/components/controls/Component.d.ts +1 -1
- package/moderncssm/components/controls/Component.js.map +1 -1
- package/moderncssm/components/footer/Component.d.ts +1 -1
- package/moderncssm/components/footer/Component.desktop.d.ts +2 -2
- package/moderncssm/components/footer/Component.desktop.js.map +1 -1
- package/moderncssm/components/footer/Component.js +3 -0
- package/moderncssm/components/footer/Component.js.map +1 -1
- package/moderncssm/components/footer/Component.mobile.d.ts +2 -2
- package/moderncssm/components/footer/Component.mobile.js.map +1 -1
- package/moderncssm/components/footer/desktop.module.css +2 -0
- package/moderncssm/components/footer/index.module.css +5 -1
- package/moderncssm/components/footer/layout.module.css +5 -3
- package/moderncssm/components/footer/mobile.module.css +2 -2
- package/moderncssm/components/header/Component.d.ts +2 -2
- package/moderncssm/components/header/Component.js.map +1 -1
- package/moderncssm/components/header/desktop.module.css +2 -0
- package/moderncssm/components/header/index.module.css +7 -3
- package/moderncssm/components/header/mobile.module.css +2 -2
- package/moderncssm/desktop/Component.desktop.d.ts +4 -4
- package/moderncssm/desktop/Component.desktop.js.map +1 -1
- package/moderncssm/desktop/desktop.module.css +2 -0
- package/moderncssm/desktop/transitions.desktop.module.css +9 -3
- package/moderncssm/mobile/Component.mobile.d.ts +2 -2
- package/moderncssm/mobile/Component.mobile.js.map +1 -1
- package/moderncssm/mobile/mobile.module.css +1 -1
- package/moderncssm/mobile/transitions.mobile.module.css +6 -2
- package/package.json +4 -4
- package/src/Component.responsive.tsx +4 -4
- package/src/ResponsiveContext.ts +1 -1
- package/src/components/content/Component.desktop.tsx +2 -2
- package/src/components/content/Component.mobile.tsx +2 -2
- package/src/components/content/Component.tsx +1 -1
- package/src/components/controls/Component.tsx +1 -1
- package/src/components/footer/Component.desktop.tsx +2 -2
- package/src/components/footer/Component.mobile.tsx +2 -2
- package/src/components/footer/Component.tsx +5 -1
- package/src/components/footer/index.module.css +3 -1
- package/src/components/header/Component.tsx +2 -2
- package/src/components/header/index.module.css +3 -1
- package/src/desktop/Component.desktop.tsx +5 -5
- package/src/desktop/transitions.desktop.module.css +6 -2
- package/src/mobile/Component.mobile.tsx +3 -3
- package/src/mobile/transitions.mobile.module.css +6 -2
- package/src/vars.css +1 -1
- /package/src/{Context.tsx → Context.ts} +0 -0
|
@@ -11,7 +11,9 @@
|
|
|
11
11
|
.enterActive {
|
|
12
12
|
opacity: 1;
|
|
13
13
|
transform: translateX(0);
|
|
14
|
-
transition:
|
|
14
|
+
transition:
|
|
15
|
+
opacity 200ms ease-in,
|
|
16
|
+
transform 200ms ease-in;
|
|
15
17
|
}
|
|
16
18
|
|
|
17
19
|
.exit {
|
|
@@ -21,12 +23,16 @@
|
|
|
21
23
|
|
|
22
24
|
.exitActiveRight {
|
|
23
25
|
opacity: 0;
|
|
24
|
-
transition:
|
|
26
|
+
transition:
|
|
27
|
+
opacity 200ms ease-out,
|
|
28
|
+
transform 200ms ease-out;
|
|
25
29
|
transform: translateX(15px);
|
|
26
30
|
}
|
|
27
31
|
|
|
28
32
|
.exitActiveLeft {
|
|
29
33
|
opacity: 0;
|
|
30
|
-
transition:
|
|
34
|
+
transition:
|
|
35
|
+
opacity 200ms ease-out,
|
|
36
|
+
transform 200ms ease-out;
|
|
31
37
|
transform: translateX(-15px);
|
|
32
38
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { BaseModalProps } from '@alfalab/core-components-base-modal/cssm';
|
|
2
|
+
import { type BaseModalProps } from '@alfalab/core-components-base-modal/cssm';
|
|
3
3
|
import { ContentMobile } from '../components/content/Component.mobile';
|
|
4
|
-
import { ControlsProps } from '../components/controls';
|
|
4
|
+
import { type ControlsProps } from '../components/controls';
|
|
5
5
|
import { FooterMobile } from '../components/footer/Component.mobile';
|
|
6
6
|
import { Header } from '../components/header/Component';
|
|
7
7
|
export declare type SidePanelMobileProps = BaseModalProps & {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.mobile.js","sources":["../../src/mobile/Component.mobile.tsx"],"sourcesContent":["import React, { forwardRef, useContext, useMemo } from 'react';\nimport cn from 'classnames';\n\nimport { BaseModal, BaseModalProps } from '@alfalab/core-components-base-modal';\n\nimport { ContentMobile } from '../components/content/Component.mobile';\nimport { Controls, ControlsProps } from '../components/controls';\nimport { FooterMobile } from '../components/footer/Component.mobile';\nimport { Header } from '../components/header/Component';\nimport { ResponsiveContext } from '../ResponsiveContext';\nimport { TResponsiveModalContext } from '../typings';\n\nimport styles from './mobile.module.css';\nimport transitions from './transitions.mobile.module.css';\n\nexport type SidePanelMobileProps = BaseModalProps & {\n /**\n * Управление наличием закрывающего крестика\n * @default false\n */\n hasCloser?: boolean;\n};\n\nconst SidePanelMobileComponent = forwardRef<HTMLDivElement, SidePanelMobileProps>(\n ({ children, className, transitionProps, dataTestId, ...restProps }, ref) => {\n const responsiveContext = useContext(ResponsiveContext);\n const contextValue = useMemo<TResponsiveModalContext>(\n () => ({ size: 500, view: 'mobile', dataTestId }),\n [dataTestId],\n );\n\n const renderContent = () => (\n <BaseModal\n {...restProps}\n dataTestId={dataTestId}\n ref={ref}\n transitionProps={{\n classNames: transitions,\n ...transitionProps,\n }}\n className={cn(className, styles.component)}\n scrollHandler='content'\n contentProps={{\n ...restProps.contentProps,\n className: cn(styles.content, restProps.contentProps?.className),\n }}\n >\n <div className={styles.mobileContent}>{children}</div>\n </BaseModal>\n );\n\n const renderWithContext = () => (\n <ResponsiveContext.Provider value={contextValue}>\n {renderContent()}\n </ResponsiveContext.Provider>\n );\n\n return responsiveContext ? renderContent() : renderWithContext();\n },\n);\n\nconst ControlsMobile = Controls as React.FC<Omit<ControlsProps, 'mobileLayout'>>;\n\nconst SidePanelMobile = Object.assign(SidePanelMobileComponent, {\n Content: ContentMobile,\n Header,\n Footer: FooterMobile,\n Controls: ControlsMobile,\n});\n\nexport {\n SidePanelMobile,\n SidePanelMobileComponent as SidePanelComponentMobile,\n ContentMobile,\n Header as HeaderMobile,\n FooterMobile,\n ControlsMobile,\n};\n"],"names":["forwardRef","__rest","useContext","ResponsiveContext","useMemo","React","BaseModal","__assign","transitions","cn","styles","Controls","ContentMobile","Header","FooterMobile"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAuBA,IAAM,wBAAwB,GAAGA,gBAAU,CACvC,UAAC,EAAkE,EAAE,GAAG,EAAA;AAArE,IAAA,IAAA,QAAQ,GAAA,EAAA,CAAA,QAAA,EAAE,SAAS,eAAA,EAAE,eAAe,GAAA,EAAA,CAAA,eAAA,EAAE,UAAU,GAAA,EAAA,CAAA,UAAA,EAAK,SAAS,GAAAC,YAAA,CAAA,EAAA,EAAhE,0DAAkE,CAAF;AAC7D,IAAA,IAAM,iBAAiB,GAAGC,gBAAU,CAACC,mCAAiB,CAAC;IACvD,IAAM,YAAY,GAAGC,aAAO,CACxB,YAAA,EAAM,QAAC,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAA,UAAA,EAAE,EAAC,EAAA,EACjD,CAAC,UAAU,CAAC,CACf;AAED,IAAA,IAAM,aAAa,GAAG,YAAA;;QAAM,QACxBC,sBAAC,CAAA,aAAA,CAAAC,cAAS,EACFC,cAAA,CAAA,EAAA,EAAA,SAAS,EACb,EAAA,UAAU,EAAE,UAAU,EACtB,GAAG,EAAE,GAAG,EACR,eAAe,EAAAA,cAAA,CAAA,EACX,UAAU,EAAEC,4BAAW,EAAA,EACpB,eAAe,CAAA,EAEtB,SAAS,EAAEC,mBAAE,CAAC,SAAS,EAAEC,uBAAM,CAAC,SAAS,CAAC,EAC1C,aAAa,EAAC,SAAS,EACvB,YAAY,EAAAH,cAAA,CAAAA,cAAA,CAAA,EAAA,EACL,SAAS,CAAC,YAAY,CAAA,EAAA,EACzB,SAAS,EAAEE,mBAAE,CAACC,uBAAM,CAAC,OAAO,EAAE,CAAA,EAAA,GAAA,SAAS,CAAC,YAAY,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,SAAS,CAAC,EAAA,CAAA,EAAA,CAAA;YAGpEL,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEK,uBAAM,CAAC,aAAa,IAAG,QAAQ,CAAO,CAC9C;KACf;IAED,IAAM,iBAAiB,GAAG,YAAM,EAAA,QAC5BL,sBAAC,CAAA,aAAA,CAAAF,mCAAiB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,YAAY,IAC1C,aAAa,EAAE,CACS,EAChC,EAAA;IAED,OAAO,iBAAiB,GAAG,aAAa,EAAE,GAAG,iBAAiB,EAAE;AACpE,CAAC;AAGC,IAAA,cAAc,GAAGQ;AAEvB,IAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,wBAAwB,EAAE;AAC5D,IAAA,OAAO,EAAEC,8BAAa;AACtB,IAAA,MAAM,EAAAC,gBAAA;AACN,IAAA,MAAM,EAAEC,+BAAY;AACpB,IAAA,QAAQ,EAAE,cAAc;AAC3B,CAAA;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"Component.mobile.js","sources":["../../src/mobile/Component.mobile.tsx"],"sourcesContent":["import React, { forwardRef, useContext, useMemo } from 'react';\nimport cn from 'classnames';\n\nimport { BaseModal, type BaseModalProps } from '@alfalab/core-components-base-modal';\n\nimport { ContentMobile } from '../components/content/Component.mobile';\nimport { Controls, type ControlsProps } from '../components/controls';\nimport { FooterMobile } from '../components/footer/Component.mobile';\nimport { Header } from '../components/header/Component';\nimport { ResponsiveContext } from '../ResponsiveContext';\nimport { type TResponsiveModalContext } from '../typings';\n\nimport styles from './mobile.module.css';\nimport transitions from './transitions.mobile.module.css';\n\nexport type SidePanelMobileProps = BaseModalProps & {\n /**\n * Управление наличием закрывающего крестика\n * @default false\n */\n hasCloser?: boolean;\n};\n\nconst SidePanelMobileComponent = forwardRef<HTMLDivElement, SidePanelMobileProps>(\n ({ children, className, transitionProps, dataTestId, ...restProps }, ref) => {\n const responsiveContext = useContext(ResponsiveContext);\n const contextValue = useMemo<TResponsiveModalContext>(\n () => ({ size: 500, view: 'mobile', dataTestId }),\n [dataTestId],\n );\n\n const renderContent = () => (\n <BaseModal\n {...restProps}\n dataTestId={dataTestId}\n ref={ref}\n transitionProps={{\n classNames: transitions,\n ...transitionProps,\n }}\n className={cn(className, styles.component)}\n scrollHandler='content'\n contentProps={{\n ...restProps.contentProps,\n className: cn(styles.content, restProps.contentProps?.className),\n }}\n >\n <div className={styles.mobileContent}>{children}</div>\n </BaseModal>\n );\n\n const renderWithContext = () => (\n <ResponsiveContext.Provider value={contextValue}>\n {renderContent()}\n </ResponsiveContext.Provider>\n );\n\n return responsiveContext ? renderContent() : renderWithContext();\n },\n);\n\nconst ControlsMobile = Controls as React.FC<Omit<ControlsProps, 'mobileLayout'>>;\n\nconst SidePanelMobile = Object.assign(SidePanelMobileComponent, {\n Content: ContentMobile,\n Header,\n Footer: FooterMobile,\n Controls: ControlsMobile,\n});\n\nexport {\n SidePanelMobile,\n SidePanelMobileComponent as SidePanelComponentMobile,\n ContentMobile,\n Header as HeaderMobile,\n FooterMobile,\n ControlsMobile,\n};\n"],"names":["forwardRef","__rest","useContext","ResponsiveContext","useMemo","React","BaseModal","__assign","transitions","cn","styles","Controls","ContentMobile","Header","FooterMobile"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAuBA,IAAM,wBAAwB,GAAGA,gBAAU,CACvC,UAAC,EAAkE,EAAE,GAAG,EAAA;AAArE,IAAA,IAAA,QAAQ,GAAA,EAAA,CAAA,QAAA,EAAE,SAAS,eAAA,EAAE,eAAe,GAAA,EAAA,CAAA,eAAA,EAAE,UAAU,GAAA,EAAA,CAAA,UAAA,EAAK,SAAS,GAAAC,YAAA,CAAA,EAAA,EAAhE,0DAAkE,CAAF;AAC7D,IAAA,IAAM,iBAAiB,GAAGC,gBAAU,CAACC,mCAAiB,CAAC;IACvD,IAAM,YAAY,GAAGC,aAAO,CACxB,YAAA,EAAM,QAAC,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAA,UAAA,EAAE,EAAC,EAAA,EACjD,CAAC,UAAU,CAAC,CACf;AAED,IAAA,IAAM,aAAa,GAAG,YAAA;;QAAM,QACxBC,sBAAC,CAAA,aAAA,CAAAC,cAAS,EACFC,cAAA,CAAA,EAAA,EAAA,SAAS,EACb,EAAA,UAAU,EAAE,UAAU,EACtB,GAAG,EAAE,GAAG,EACR,eAAe,EAAAA,cAAA,CAAA,EACX,UAAU,EAAEC,4BAAW,EAAA,EACpB,eAAe,CAAA,EAEtB,SAAS,EAAEC,mBAAE,CAAC,SAAS,EAAEC,uBAAM,CAAC,SAAS,CAAC,EAC1C,aAAa,EAAC,SAAS,EACvB,YAAY,EAAAH,cAAA,CAAAA,cAAA,CAAA,EAAA,EACL,SAAS,CAAC,YAAY,CAAA,EAAA,EACzB,SAAS,EAAEE,mBAAE,CAACC,uBAAM,CAAC,OAAO,EAAE,CAAA,EAAA,GAAA,SAAS,CAAC,YAAY,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,SAAS,CAAC,EAAA,CAAA,EAAA,CAAA;YAGpEL,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEK,uBAAM,CAAC,aAAa,IAAG,QAAQ,CAAO,CAC9C;KACf;IAED,IAAM,iBAAiB,GAAG,YAAM,EAAA,QAC5BL,sBAAC,CAAA,aAAA,CAAAF,mCAAiB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,YAAY,IAC1C,aAAa,EAAE,CACS,EAChC,EAAA;IAED,OAAO,iBAAiB,GAAG,aAAa,EAAE,GAAG,iBAAiB,EAAE;AACpE,CAAC;AAGC,IAAA,cAAc,GAAGQ;AAEvB,IAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,wBAAwB,EAAE;AAC5D,IAAA,OAAO,EAAEC,8BAAa;AACtB,IAAA,MAAM,EAAAC,gBAAA;AACN,IAAA,MAAM,EAAEC,+BAAY;AACpB,IAAA,QAAQ,EAAE,cAAc;AAC3B,CAAA;;;;;;;;;"}
|
|
@@ -8,7 +8,9 @@
|
|
|
8
8
|
.enterActive {
|
|
9
9
|
opacity: 1;
|
|
10
10
|
transform: translateY(0);
|
|
11
|
-
transition:
|
|
11
|
+
transition:
|
|
12
|
+
opacity 200ms ease-in,
|
|
13
|
+
transform 200ms ease-in;
|
|
12
14
|
}
|
|
13
15
|
|
|
14
16
|
.exit {
|
|
@@ -20,5 +22,7 @@
|
|
|
20
22
|
.exitDone {
|
|
21
23
|
opacity: 0;
|
|
22
24
|
transform: translateY(15px);
|
|
23
|
-
transition:
|
|
25
|
+
transition:
|
|
26
|
+
opacity 200ms ease-out,
|
|
27
|
+
transform 200ms ease-out;
|
|
24
28
|
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { BaseModalProps } from '@alfalab/core-components-base-modal';
|
|
3
|
-
import { DrawerProps } from '@alfalab/core-components-drawer';
|
|
2
|
+
import { type BaseModalProps } from '@alfalab/core-components-base-modal';
|
|
3
|
+
import { type DrawerProps } from '@alfalab/core-components-drawer';
|
|
4
4
|
import { ContentDesktop } from '../components/content/Component.desktop';
|
|
5
|
-
import { ControlsProps } from '../components/controls';
|
|
5
|
+
import { type ControlsProps } from '../components/controls';
|
|
6
6
|
import { FooterDesktop } from '../components/footer/Component.desktop';
|
|
7
|
-
import { HeaderProps } from '../components/header/Component';
|
|
7
|
+
import { type HeaderProps } from '../components/header/Component';
|
|
8
8
|
export declare type SidePanelDesktopProps = BaseModalProps & Pick<DrawerProps, 'placement' | 'nativeScrollbar' | 'contentTransitionProps'> & {
|
|
9
9
|
/**
|
|
10
10
|
* Ширина модального окна
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.desktop.js","sources":["../src/desktop/Component.desktop.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, isValidElement, useContext, useRef } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { BaseModalProps } from '@alfalab/core-components-base-modal';\nimport { Drawer, DrawerProps } from '@alfalab/core-components-drawer';\n\nimport { ContentDesktop } from '../components/content/Component.desktop';\nimport { Controls, ControlsProps } from '../components/controls';\nimport { FooterDesktop } from '../components/footer/Component.desktop';\nimport { Header, HeaderProps } from '../components/header/Component';\nimport { SIZE_TO_CLASSNAME_MAP } from '../consts';\nimport { ResponsiveContext } from '../ResponsiveContext';\nimport { TResponsiveModalContext } from '../typings';\n\nimport styles from './desktop.module.css';\nimport transitions from './transitions.desktop.module.css';\n\nexport type SidePanelDesktopProps = BaseModalProps &\n Pick<DrawerProps, 'placement' | 'nativeScrollbar' | 'contentTransitionProps'> & {\n /**\n * Ширина модального окна\n * @default \"s\"\n */\n size?: 's' | 500;\n\n /**\n * Управление наличием закрывающего крестика\n * @default false\n */\n hasCloser?: boolean;\n };\n\nconst SidePanelDesktopComponent = forwardRef<HTMLDivElement, SidePanelDesktopProps>(\n (\n {\n size = 500,\n children,\n className,\n wrapperClassName,\n contentTransitionProps = {},\n backdropProps,\n placement = 'right',\n dataTestId,\n ...restProps\n },\n ref,\n ) => {\n const responsiveContext = useContext(ResponsiveContext);\n const modalRef = useRef<HTMLElement>(null);\n\n const enterCn = cn({\n [transitions.appearRight]: placement === 'right',\n [transitions.appearLeft]: placement === 'left',\n });\n\n const exitCn = cn({\n [transitions.exitActiveRight]: placement === 'right',\n [transitions.exitActiveLeft]: placement === 'left',\n });\n\n const contextValue = React.useMemo<TResponsiveModalContext>(\n () => ({ size, view: 'desktop', dataTestId }),\n [size, dataTestId],\n );\n\n const renderContent = () => (\n <Drawer\n {...restProps}\n dataTestId={dataTestId}\n ref={mergeRefs([ref, modalRef])}\n placement={placement}\n wrapperClassName={wrapperClassName}\n className={cn(className, styles[SIZE_TO_CLASSNAME_MAP[size]], styles.hidden)}\n backdropProps={backdropProps}\n contentTransitionProps={{\n classNames: {\n appear: enterCn,\n enter: enterCn,\n appearActive: transitions.enterActive,\n enterActive: transitions.enterActive,\n exit: transitions.exit,\n exitActive: exitCn,\n exitDone: exitCn,\n },\n ...contentTransitionProps,\n }}\n >\n {React.Children.map(children, (child) =>\n isValidElement(child) ? cloneElement(child, { size }) : child,\n )}\n </Drawer>\n );\n\n const renderWithContext = () => (\n <ResponsiveContext.Provider value={contextValue}>\n {renderContent()}\n </ResponsiveContext.Provider>\n );\n\n return responsiveContext ? renderContent() : renderWithContext();\n },\n);\n\nconst HeaderDesktop = Header as React.FC<Omit<HeaderProps, 'titleSize' | 'subtitle'>>;\nconst ControlsDesktop = Controls as React.FC<Omit<ControlsProps, 'mobileLayout'>>;\n\nconst SidePanelDesktop = Object.assign(SidePanelDesktopComponent, {\n Content: ContentDesktop,\n Header: HeaderDesktop,\n Footer: FooterDesktop,\n Controls: ControlsDesktop,\n});\n\nexport {\n SidePanelDesktop,\n SidePanelDesktopComponent as SidePanelComponentDesktop,\n ContentDesktop,\n HeaderDesktop,\n FooterDesktop,\n ControlsDesktop,\n};\n"],"names":["forwardRef","__rest","useContext","ResponsiveContext","useRef","cn","transitions","React","Drawer","__assign","mergeRefs","styles","SIZE_TO_CLASSNAME_MAP","isValidElement","cloneElement","Header","Controls","ContentDesktop","FooterDesktop"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Component.desktop.js","sources":["../src/desktop/Component.desktop.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, isValidElement, useContext, useRef } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { type BaseModalProps } from '@alfalab/core-components-base-modal';\nimport { Drawer, type DrawerProps } from '@alfalab/core-components-drawer';\n\nimport { ContentDesktop } from '../components/content/Component.desktop';\nimport { Controls, type ControlsProps } from '../components/controls';\nimport { FooterDesktop } from '../components/footer/Component.desktop';\nimport { Header, type HeaderProps } from '../components/header/Component';\nimport { SIZE_TO_CLASSNAME_MAP } from '../consts';\nimport { ResponsiveContext } from '../ResponsiveContext';\nimport { type TResponsiveModalContext } from '../typings';\n\nimport styles from './desktop.module.css';\nimport transitions from './transitions.desktop.module.css';\n\nexport type SidePanelDesktopProps = BaseModalProps &\n Pick<DrawerProps, 'placement' | 'nativeScrollbar' | 'contentTransitionProps'> & {\n /**\n * Ширина модального окна\n * @default \"s\"\n */\n size?: 's' | 500;\n\n /**\n * Управление наличием закрывающего крестика\n * @default false\n */\n hasCloser?: boolean;\n };\n\nconst SidePanelDesktopComponent = forwardRef<HTMLDivElement, SidePanelDesktopProps>(\n (\n {\n size = 500,\n children,\n className,\n wrapperClassName,\n contentTransitionProps = {},\n backdropProps,\n placement = 'right',\n dataTestId,\n ...restProps\n },\n ref,\n ) => {\n const responsiveContext = useContext(ResponsiveContext);\n const modalRef = useRef<HTMLElement>(null);\n\n const enterCn = cn({\n [transitions.appearRight]: placement === 'right',\n [transitions.appearLeft]: placement === 'left',\n });\n\n const exitCn = cn({\n [transitions.exitActiveRight]: placement === 'right',\n [transitions.exitActiveLeft]: placement === 'left',\n });\n\n const contextValue = React.useMemo<TResponsiveModalContext>(\n () => ({ size, view: 'desktop', dataTestId }),\n [size, dataTestId],\n );\n\n const renderContent = () => (\n <Drawer\n {...restProps}\n dataTestId={dataTestId}\n ref={mergeRefs([ref, modalRef])}\n placement={placement}\n wrapperClassName={wrapperClassName}\n className={cn(className, styles[SIZE_TO_CLASSNAME_MAP[size]], styles.hidden)}\n backdropProps={backdropProps}\n contentTransitionProps={{\n classNames: {\n appear: enterCn,\n enter: enterCn,\n appearActive: transitions.enterActive,\n enterActive: transitions.enterActive,\n exit: transitions.exit,\n exitActive: exitCn,\n exitDone: exitCn,\n },\n ...contentTransitionProps,\n }}\n >\n {React.Children.map(children, (child) =>\n isValidElement(child) ? cloneElement(child, { size }) : child,\n )}\n </Drawer>\n );\n\n const renderWithContext = () => (\n <ResponsiveContext.Provider value={contextValue}>\n {renderContent()}\n </ResponsiveContext.Provider>\n );\n\n return responsiveContext ? renderContent() : renderWithContext();\n },\n);\n\nconst HeaderDesktop = Header as React.FC<Omit<HeaderProps, 'titleSize' | 'subtitle'>>;\nconst ControlsDesktop = Controls as React.FC<Omit<ControlsProps, 'mobileLayout'>>;\n\nconst SidePanelDesktop = Object.assign(SidePanelDesktopComponent, {\n Content: ContentDesktop,\n Header: HeaderDesktop,\n Footer: FooterDesktop,\n Controls: ControlsDesktop,\n});\n\nexport {\n SidePanelDesktop,\n SidePanelDesktopComponent as SidePanelComponentDesktop,\n ContentDesktop,\n HeaderDesktop,\n FooterDesktop,\n ControlsDesktop,\n};\n"],"names":["forwardRef","__rest","useContext","ResponsiveContext","useRef","cn","transitions","React","Drawer","__assign","mergeRefs","styles","SIZE_TO_CLASSNAME_MAP","isValidElement","cloneElement","Header","Controls","ContentDesktop","FooterDesktop"],"mappings":"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"}
|
package/desktop/desktop.css
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--side-panel-s-width: 500px;
|
|
3
|
-
} .side-panel__size-
|
|
3
|
+
} .side-panel__size-500_13ds1.side-panel__size-500_13ds1 {
|
|
4
4
|
width: var(--side-panel-s-width);
|
|
5
|
-
} .side-
|
|
5
|
+
} .side-panel__hidden_13ds1 {
|
|
6
6
|
overflow-x: hidden;
|
|
7
7
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./desktop.css');
|
|
4
4
|
|
|
5
|
-
var styles = {"size-500":"side-panel__size-
|
|
5
|
+
var styles = {"size-500":"side-panel__size-500_13ds1","hidden":"side-panel__hidden_13ds1"};
|
|
6
6
|
|
|
7
7
|
module.exports = styles;
|
|
8
8
|
//# sourceMappingURL=desktop.module.css.js.map
|
|
@@ -1,32 +1,38 @@
|
|
|
1
|
-
.side-
|
|
1
|
+
.side-panel__enterRight_1kb42 {
|
|
2
2
|
opacity: 0;
|
|
3
3
|
transform: translateX(15px);
|
|
4
4
|
}
|
|
5
5
|
|
|
6
|
-
.side-
|
|
6
|
+
.side-panel__enterLeft_1kb42 {
|
|
7
7
|
opacity: 0;
|
|
8
8
|
transform: translateX(-15px);
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
-
.side-
|
|
11
|
+
.side-panel__enterActive_1kb42 {
|
|
12
12
|
opacity: 1;
|
|
13
13
|
transform: translateX(0);
|
|
14
|
-
transition:
|
|
14
|
+
transition:
|
|
15
|
+
opacity 200ms ease-in,
|
|
16
|
+
transform 200ms ease-in;
|
|
15
17
|
}
|
|
16
18
|
|
|
17
|
-
.side-
|
|
19
|
+
.side-panel__exit_1kb42 {
|
|
18
20
|
opacity: 1;
|
|
19
21
|
transform: translateX(0);
|
|
20
22
|
}
|
|
21
23
|
|
|
22
|
-
.side-
|
|
24
|
+
.side-panel__exitActiveRight_1kb42 {
|
|
23
25
|
opacity: 0;
|
|
24
|
-
transition:
|
|
26
|
+
transition:
|
|
27
|
+
opacity 200ms ease-out,
|
|
28
|
+
transform 200ms ease-out;
|
|
25
29
|
transform: translateX(15px);
|
|
26
30
|
}
|
|
27
31
|
|
|
28
|
-
.side-
|
|
32
|
+
.side-panel__exitActiveLeft_1kb42 {
|
|
29
33
|
opacity: 0;
|
|
30
|
-
transition:
|
|
34
|
+
transition:
|
|
35
|
+
opacity 200ms ease-out,
|
|
36
|
+
transform 200ms ease-out;
|
|
31
37
|
transform: translateX(-15px);
|
|
32
38
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./transitions.desktop.css');
|
|
4
4
|
|
|
5
|
-
var transitions = {"enterActive":"side-
|
|
5
|
+
var transitions = {"enterActive":"side-panel__enterActive_1kb42","exit":"side-panel__exit_1kb42","exitActiveRight":"side-panel__exitActiveRight_1kb42","exitActiveLeft":"side-panel__exitActiveLeft_1kb42"};
|
|
6
6
|
|
|
7
7
|
module.exports = transitions;
|
|
8
8
|
//# sourceMappingURL=transitions.desktop.module.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"transitions.desktop.module.css.js","sources":["../src/desktop/transitions.desktop.module.css"],"sourcesContent":["@define-mixin exit-active {\n opacity: 0;\n transition
|
|
1
|
+
{"version":3,"file":"transitions.desktop.module.css.js","sources":["../src/desktop/transitions.desktop.module.css"],"sourcesContent":["@define-mixin exit-active {\n opacity: 0;\n transition:\n opacity 200ms ease-out,\n transform 200ms ease-out;\n}\n\n.enterRight {\n opacity: 0;\n transform: translateX(15px);\n}\n\n.enterLeft {\n opacity: 0;\n transform: translateX(-15px);\n}\n\n.enterActive {\n opacity: 1;\n transform: translateX(0);\n transition:\n opacity 200ms ease-in,\n transform 200ms ease-in;\n}\n\n.exit {\n opacity: 1;\n transform: translateX(0);\n}\n\n.exitActiveRight {\n @mixin exit-active;\n transform: translateX(15px);\n}\n\n.exitActiveLeft {\n @mixin exit-active;\n transform: translateX(-15px);\n}\n"],"names":[],"mappings":";;;;AAEgB,kBAAe,CAAuF,aAAa,CAAC,+BAA+B,CAAC,MAAM,CAAC,wBAAwB,CAAC,iBAAiB,CAAC,mCAAmC,CAAC,gBAAgB,CAAC,kCAAkC,CAAC;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { BaseModalProps } from '@alfalab/core-components-base-modal/esm';
|
|
3
|
-
import { DrawerProps } from '@alfalab/core-components-drawer/esm';
|
|
2
|
+
import { type BaseModalProps } from '@alfalab/core-components-base-modal/esm';
|
|
3
|
+
import { type DrawerProps } from '@alfalab/core-components-drawer/esm';
|
|
4
4
|
import { Controls } from './components/controls';
|
|
5
5
|
import { Header } from './components/header/Component';
|
|
6
6
|
export declare type SidePanelResponsiveProps = BaseModalProps & Pick<DrawerProps, 'contentTransitionProps' | 'placement' | 'nativeScrollbar'> & {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.responsive.js","sources":["../src/Component.responsive.tsx"],"sourcesContent":["import React, { FC, forwardRef, useContext, useMemo } from 'react';\n\nimport { BaseModalProps } from '@alfalab/core-components-base-modal';\nimport { DrawerProps } from '@alfalab/core-components-drawer';\nimport { useIsDesktop } from '@alfalab/core-components-mq';\n\nimport { Controls } from './components/controls';\nimport { Header } from './components/header/Component';\nimport { SidePanelDesktop } from './desktop';\nimport { SidePanelMobile } from './mobile';\nimport { ResponsiveContext } from './ResponsiveContext';\nimport { TResponsiveModalContext } from './typings';\n\nexport type SidePanelResponsiveProps = BaseModalProps &\n Pick<DrawerProps, 'contentTransitionProps' | 'placement' | 'nativeScrollbar'> & {\n /**\n * Ширина модального окна\n * @default \"s\"\n */\n size?: 's' | 500;\n\n /**\n * Управление наличием закрывающего крестика\n * @default false\n */\n hasCloser?: boolean;\n\n /**\n * Контрольная точка, с нее начинается desktop версия\n * @default 1024\n */\n breakpoint?: number;\n\n /**\n * Версия, которая будет использоваться при серверном рендеринге\n */\n client?: 'desktop' | 'mobile';\n\n /**\n * Значение по-умолчанию для хука useMatchMedia\n * @deprecated Используйте client\n */\n defaultMatchMediaValue?: boolean | (() => boolean);\n };\n\nfunction createResponsive<DesktopType extends FC, MobileType extends FC>(\n desktop: DesktopType,\n mobile: MobileType,\n) {\n // eslint-disable-next-line\n function ResponsiveChild(props: any) {\n const { view = 'desktop' } = useContext(ResponsiveContext) || {};\n\n const Child = view === 'desktop' ? desktop : mobile;\n\n return <Child {...props} />;\n }\n\n return ResponsiveChild as DesktopType | MobileType;\n}\n\nconst SidePanelResponsiveComponent = forwardRef<HTMLDivElement, SidePanelResponsiveProps>(\n (\n {\n children,\n breakpoint,\n client,\n defaultMatchMediaValue = client === undefined ? undefined : client === 'desktop',\n size = 500,\n dataTestId,\n ...restProps\n },\n ref,\n ) => {\n const isDesktop = useIsDesktop(breakpoint, defaultMatchMediaValue);\n\n const view = isDesktop ? 'desktop' : 'mobile';\n\n const contextValue = useMemo<TResponsiveModalContext>(\n () => ({ view, size, dataTestId }),\n [view, size, dataTestId],\n );\n\n const Component = isDesktop ? SidePanelDesktop : SidePanelMobile;\n\n return (\n <ResponsiveContext.Provider value={contextValue}>\n <Component ref={ref} size={size} dataTestId={dataTestId} {...restProps}>\n {children}\n </Component>\n </ResponsiveContext.Provider>\n );\n },\n);\n\nconst ContentResponsive = createResponsive(SidePanelDesktop.Content, SidePanelMobile.Content);\nconst FooterResponsive = createResponsive(SidePanelDesktop.Footer, SidePanelMobile.Footer);\n\n/** Респонсив компаунд */\nconst SidePanelResponsive = Object.assign(SidePanelResponsiveComponent, {\n Header,\n Controls,\n Content: ContentResponsive,\n Footer: FooterResponsive,\n});\n\nSidePanelResponsiveComponent.displayName = 'SidePanelResponsiveComponent';\n\nexport {\n SidePanelResponsive,\n SidePanelResponsiveComponent as SidePanelComponentResponsive,\n Header as HeaderResponsive,\n Controls as ControlsResponsive,\n ContentResponsive,\n FooterResponsive,\n};\n"],"names":[],"mappings":";;;;;;;;;AA6CA,SAAS,gBAAgB,CACrB,OAAoB,EACpB,MAAkB,EAAA;;IAGlB,SAAS,eAAe,CAAC,KAAU,EAAA;AACvB,QAAA,IAAA,EAAqB,GAAA,CAAA,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAE,MAAxC,EAAhB,IAAI,GAAG,EAAA,KAAA,MAAA,GAAA,SAAS,KAAA;AAExB,QAAA,IAAM,KAAK,GAAG,IAAI,KAAK,SAAS,GAAG,OAAO,GAAG,MAAM;AAEnD,QAAA,OAAO,KAAC,CAAA,aAAA,CAAA,KAAK,EAAK,QAAA,CAAA,EAAA,EAAA,KAAK,EAAI;;AAG/B,IAAA,OAAO,eAA2C;AACtD;AAEA,IAAM,4BAA4B,GAAG,UAAU,CAC3C,UACI,EAQC,EACD,GAAG,EAAA;AARC,IAAA,IAAA,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,EAAgF,GAAA,EAAA,CAAA,sBAAA,EAAhF,sBAAsB,GAAG,EAAA,KAAA,MAAA,GAAA,MAAM,KAAK,SAAS,GAAG,SAAS,GAAG,MAAM,KAAK,SAAS,GAAA,EAAA,EAChF,YAAU,EAAV,IAAI,mBAAG,GAAG,GAAA,EAAA,EACV,UAAU,GAAA,EAAA,CAAA,UAAA,EACP,SAAS,GAAA,MAAA,CAAA,EAAA,EAPhB,oFAQC,CADe;IAIhB,IAAM,SAAS,GAAG,YAAY,CAAC,UAAU,EAAE,sBAAsB,CAAC;IAElE,IAAM,IAAI,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ;AAE7C,IAAA,IAAM,YAAY,GAAG,OAAO,CACxB,YAAM,EAAA,QAAC,EAAE,IAAI,EAAA,IAAA,EAAE,IAAI,EAAA,IAAA,EAAE,UAAU,EAAA,UAAA,EAAE,EAA3B,EAA4B,EAClC,CAAC,IAAI,EAAE,IAAI,EAAE,UAAU,CAAC,CAC3B;IAED,IAAM,SAAS,GAAG,SAAS,GAAG,gBAAgB,GAAG,eAAe;IAEhE,QACI,oBAAC,iBAAiB,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAE,YAAY,EAAA;QAC3C,KAAC,CAAA,aAAA,CAAA,SAAS,aAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,IAAM,SAAS,CAAA,EACjE,QAAQ,CACD,CACa;AAErC,CAAC;AAGL,IAAM,iBAAiB,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,OAAO,EAAE,eAAe,CAAC,OAAO;AAC5F,IAAM,gBAAgB,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,MAAM,EAAE,eAAe,CAAC,MAAM;AAEzF;AACA,IAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,CAAC,4BAA4B,EAAE;AACpE,IAAA,MAAM,EAAA,MAAA;AACN,IAAA,QAAQ,EAAA,QAAA;AACR,IAAA,OAAO,EAAE,iBAAiB;AAC1B,IAAA,MAAM,EAAE,gBAAgB;AAC3B,CAAA;AAED,4BAA4B,CAAC,WAAW,GAAG,8BAA8B;;;;"}
|
|
1
|
+
{"version":3,"file":"Component.responsive.js","sources":["../src/Component.responsive.tsx"],"sourcesContent":["import React, { type FC, forwardRef, useContext, useMemo } from 'react';\n\nimport { type BaseModalProps } from '@alfalab/core-components-base-modal';\nimport { type DrawerProps } from '@alfalab/core-components-drawer';\nimport { useIsDesktop } from '@alfalab/core-components-mq';\n\nimport { Controls } from './components/controls';\nimport { Header } from './components/header/Component';\nimport { SidePanelDesktop } from './desktop';\nimport { SidePanelMobile } from './mobile';\nimport { ResponsiveContext } from './ResponsiveContext';\nimport { type TResponsiveModalContext } from './typings';\n\nexport type SidePanelResponsiveProps = BaseModalProps &\n Pick<DrawerProps, 'contentTransitionProps' | 'placement' | 'nativeScrollbar'> & {\n /**\n * Ширина модального окна\n * @default \"s\"\n */\n size?: 's' | 500;\n\n /**\n * Управление наличием закрывающего крестика\n * @default false\n */\n hasCloser?: boolean;\n\n /**\n * Контрольная точка, с нее начинается desktop версия\n * @default 1024\n */\n breakpoint?: number;\n\n /**\n * Версия, которая будет использоваться при серверном рендеринге\n */\n client?: 'desktop' | 'mobile';\n\n /**\n * Значение по-умолчанию для хука useMatchMedia\n * @deprecated Используйте client\n */\n defaultMatchMediaValue?: boolean | (() => boolean);\n };\n\nfunction createResponsive<DesktopType extends FC, MobileType extends FC>(\n desktop: DesktopType,\n mobile: MobileType,\n) {\n // eslint-disable-next-line\n function ResponsiveChild(props: any) {\n const { view = 'desktop' } = useContext(ResponsiveContext) || {};\n\n const Child = view === 'desktop' ? desktop : mobile;\n\n return <Child {...props} />;\n }\n\n return ResponsiveChild as DesktopType | MobileType;\n}\n\nconst SidePanelResponsiveComponent = forwardRef<HTMLDivElement, SidePanelResponsiveProps>(\n (\n {\n children,\n breakpoint,\n client,\n defaultMatchMediaValue = client === undefined ? undefined : client === 'desktop',\n size = 500,\n dataTestId,\n ...restProps\n },\n ref,\n ) => {\n const isDesktop = useIsDesktop(breakpoint, defaultMatchMediaValue);\n\n const view = isDesktop ? 'desktop' : 'mobile';\n\n const contextValue = useMemo<TResponsiveModalContext>(\n () => ({ view, size, dataTestId }),\n [view, size, dataTestId],\n );\n\n const Component = isDesktop ? SidePanelDesktop : SidePanelMobile;\n\n return (\n <ResponsiveContext.Provider value={contextValue}>\n <Component ref={ref} size={size} dataTestId={dataTestId} {...restProps}>\n {children}\n </Component>\n </ResponsiveContext.Provider>\n );\n },\n);\n\nconst ContentResponsive = createResponsive(SidePanelDesktop.Content, SidePanelMobile.Content);\nconst FooterResponsive = createResponsive(SidePanelDesktop.Footer, SidePanelMobile.Footer);\n\n/** Респонсив компаунд */\nconst SidePanelResponsive = Object.assign(SidePanelResponsiveComponent, {\n Header,\n Controls,\n Content: ContentResponsive,\n Footer: FooterResponsive,\n});\n\nSidePanelResponsiveComponent.displayName = 'SidePanelResponsiveComponent';\n\nexport {\n SidePanelResponsive,\n SidePanelResponsiveComponent as SidePanelComponentResponsive,\n Header as HeaderResponsive,\n Controls as ControlsResponsive,\n ContentResponsive,\n FooterResponsive,\n};\n"],"names":[],"mappings":";;;;;;;;;AA6CA,SAAS,gBAAgB,CACrB,OAAoB,EACpB,MAAkB,EAAA;;IAGlB,SAAS,eAAe,CAAC,KAAU,EAAA;AACvB,QAAA,IAAA,EAAqB,GAAA,CAAA,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAE,MAAxC,EAAhB,IAAI,GAAG,EAAA,KAAA,MAAA,GAAA,SAAS,KAAA;AAExB,QAAA,IAAM,KAAK,GAAG,IAAI,KAAK,SAAS,GAAG,OAAO,GAAG,MAAM;AAEnD,QAAA,OAAO,KAAC,CAAA,aAAA,CAAA,KAAK,EAAK,QAAA,CAAA,EAAA,EAAA,KAAK,EAAI;;AAG/B,IAAA,OAAO,eAA2C;AACtD;AAEA,IAAM,4BAA4B,GAAG,UAAU,CAC3C,UACI,EAQC,EACD,GAAG,EAAA;AARC,IAAA,IAAA,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,EAAgF,GAAA,EAAA,CAAA,sBAAA,EAAhF,sBAAsB,GAAG,EAAA,KAAA,MAAA,GAAA,MAAM,KAAK,SAAS,GAAG,SAAS,GAAG,MAAM,KAAK,SAAS,GAAA,EAAA,EAChF,YAAU,EAAV,IAAI,mBAAG,GAAG,GAAA,EAAA,EACV,UAAU,GAAA,EAAA,CAAA,UAAA,EACP,SAAS,GAAA,MAAA,CAAA,EAAA,EAPhB,oFAQC,CADe;IAIhB,IAAM,SAAS,GAAG,YAAY,CAAC,UAAU,EAAE,sBAAsB,CAAC;IAElE,IAAM,IAAI,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ;AAE7C,IAAA,IAAM,YAAY,GAAG,OAAO,CACxB,YAAM,EAAA,QAAC,EAAE,IAAI,EAAA,IAAA,EAAE,IAAI,EAAA,IAAA,EAAE,UAAU,EAAA,UAAA,EAAE,EAA3B,EAA4B,EAClC,CAAC,IAAI,EAAE,IAAI,EAAE,UAAU,CAAC,CAC3B;IAED,IAAM,SAAS,GAAG,SAAS,GAAG,gBAAgB,GAAG,eAAe;IAEhE,QACI,oBAAC,iBAAiB,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAE,YAAY,EAAA;QAC3C,KAAC,CAAA,aAAA,CAAA,SAAS,aAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,IAAM,SAAS,CAAA,EACjE,QAAQ,CACD,CACa;AAErC,CAAC;AAGL,IAAM,iBAAiB,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,OAAO,EAAE,eAAe,CAAC,OAAO;AAC5F,IAAM,gBAAgB,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,MAAM,EAAE,eAAe,CAAC,MAAM;AAEzF;AACA,IAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,CAAC,4BAA4B,EAAE;AACpE,IAAA,MAAM,EAAA,MAAA;AACN,IAAA,QAAQ,EAAA,QAAA;AACR,IAAA,OAAO,EAAE,iBAAiB;AAC1B,IAAA,MAAM,EAAE,gBAAgB;AAC3B,CAAA;AAED,4BAA4B,CAAC,WAAW,GAAG,8BAA8B;;;;"}
|
package/esm/Context.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Context.js","sources":["../src/Context.
|
|
1
|
+
{"version":3,"file":"Context.js","sources":["../src/Context.ts"],"sourcesContent":["import { BaseModalContext } from '@alfalab/core-components-base-modal';\n\nexport const ModalContext = BaseModalContext;\n"],"names":[],"mappings":";;AAEO,IAAM,YAAY,GAAG;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ResponsiveContext.js","sources":["../src/ResponsiveContext.ts"],"sourcesContent":["import React from 'react';\n\nimport type
|
|
1
|
+
{"version":3,"file":"ResponsiveContext.js","sources":["../src/ResponsiveContext.ts"],"sourcesContent":["import React from 'react';\n\nimport { type TResponsiveModalContext } from './typings';\n\nexport const ResponsiveContext = React.createContext<TResponsiveModalContext>(null);\n"],"names":[],"mappings":";;AAIa,IAAA,iBAAiB,GAAG,KAAK,CAAC,aAAa,CAA0B,IAAI;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
2
|
-
import { ContentProps } from './Component';
|
|
1
|
+
import { type FC } from 'react';
|
|
2
|
+
import { type ContentProps } from './Component';
|
|
3
3
|
export declare type ContentDesktopProps = ContentProps & {
|
|
4
4
|
/**
|
|
5
5
|
* Размер (только для desktop версии компонента)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.desktop.js","sources":["../../../src/components/content/Component.desktop.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport cn from 'classnames';\n\nimport { SIZE_TO_CLASSNAME_MAP } from '../../consts';\n\nimport { Content, ContentProps } from './Component';\n\nimport styles from './desktop.module.css';\n\nexport type ContentDesktopProps = ContentProps & {\n /**\n * Размер (только для desktop версии компонента)\n */\n size?: 's' | 500;\n};\n\nexport const ContentDesktop: FC<ContentDesktopProps> = ({\n size = 500,\n className,\n ...restProps\n}) => (\n <Content\n className={cn(className, size && styles[SIZE_TO_CLASSNAME_MAP[size]])}\n {...restProps}\n />\n);\n"],"names":[],"mappings":";;;;;;;AAgBO,IAAM,cAAc,GAA4B,UAAC,EAIvD,EAAA;AAHG,IAAA,IAAA,EAAU,GAAA,EAAA,CAAA,IAAA,EAAV,IAAI,GAAA,EAAA,KAAA,MAAA,GAAG,GAAG,GAAA,EAAA,EACV,SAAS,GAAA,EAAA,CAAA,SAAA,EACN,SAAS,GAAA,MAAA,CAAA,EAAA,EAHwC,qBAIvD,CADe;IACV,QACF,KAAC,CAAA,aAAA,CAAA,OAAO,EACJ,QAAA,CAAA,EAAA,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,IAAI,IAAI,MAAM,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,CAAC,EACjE,EAAA,SAAS,CACf,CAAA;;;;;"}
|
|
1
|
+
{"version":3,"file":"Component.desktop.js","sources":["../../../src/components/content/Component.desktop.tsx"],"sourcesContent":["import React, { type FC } from 'react';\nimport cn from 'classnames';\n\nimport { SIZE_TO_CLASSNAME_MAP } from '../../consts';\n\nimport { Content, type ContentProps } from './Component';\n\nimport styles from './desktop.module.css';\n\nexport type ContentDesktopProps = ContentProps & {\n /**\n * Размер (только для desktop версии компонента)\n */\n size?: 's' | 500;\n};\n\nexport const ContentDesktop: FC<ContentDesktopProps> = ({\n size = 500,\n className,\n ...restProps\n}) => (\n <Content\n className={cn(className, size && styles[SIZE_TO_CLASSNAME_MAP[size]])}\n {...restProps}\n />\n);\n"],"names":[],"mappings":";;;;;;;AAgBO,IAAM,cAAc,GAA4B,UAAC,EAIvD,EAAA;AAHG,IAAA,IAAA,EAAU,GAAA,EAAA,CAAA,IAAA,EAAV,IAAI,GAAA,EAAA,KAAA,MAAA,GAAG,GAAG,GAAA,EAAA,EACV,SAAS,GAAA,EAAA,CAAA,SAAA,EACN,SAAS,GAAA,MAAA,CAAA,EAAA,EAHwC,qBAIvD,CADe;IACV,QACF,KAAC,CAAA,aAAA,CAAA,OAAO,EACJ,QAAA,CAAA,EAAA,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,IAAI,IAAI,MAAM,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,CAAC,EACjE,EAAA,SAAS,CACf,CAAA;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../../../src/components/content/Component.tsx"],"sourcesContent":["import React, { FC, ReactNode, Ref, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { ModalContext } from '../../Context';\nimport { ResponsiveContext } from '../../ResponsiveContext';\n\nimport styles from './index.module.css';\n\nexport type ContentProps = {\n /**\n * Контент\n */\n children?: ReactNode;\n\n /**\n * Дополнительный класс\n */\n className?: string;\n\n /**\n * Идентификатор для систем автоматизированного тестирования\n */\n dataTestId?: string;\n};\n\nexport const Content: FC<ContentProps> = ({ children, className, dataTestId }) => {\n const { contentRef, hasHeader } = useContext(ModalContext);\n const responsiveContext = useContext(ResponsiveContext);\n\n return (\n <div\n className={cn(styles.content, className, styles.flex, {\n [styles.withHeader]: hasHeader,\n })}\n ref={contentRef as Ref<HTMLDivElement>}\n data-test-id={dataTestId || getDataTestId(responsiveContext?.dataTestId, 'content')}\n >\n {children}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;AA2BO,IAAM,OAAO,GAAqB,UAAC,EAAmC,EAAA;;AAAjC,IAAA,IAAA,QAAQ,cAAA,EAAE,SAAS,GAAA,EAAA,CAAA,SAAA,EAAE,UAAU,GAAA,EAAA,CAAA,UAAA;IACjE,IAAA,EAAA,GAA4B,UAAU,CAAC,YAAY,CAAC,EAAlD,UAAU,GAAA,EAAA,CAAA,UAAA,EAAE,SAAS,GAAA,EAAA,CAAA,SAA6B;AAC1D,IAAA,IAAM,iBAAiB,GAAG,UAAU,CAAC,iBAAiB,CAAC;AAEvD,IAAA,QACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,GAAA,EAAA,GAAA,EAAA;AAChD,YAAA,EAAA,CAAC,MAAM,CAAC,UAAU,CAAA,GAAG,SAAS;gBAChC,EACF,GAAG,EAAE,UAAiC,EAAA,cAAA,EACxB,UAAU,IAAI,aAAa,CAAC,iBAAiB,KAAjB,IAAA,IAAA,iBAAiB,uBAAjB,iBAAiB,CAAE,UAAU,EAAE,SAAS,CAAC,EAElF,EAAA,QAAQ,CACP;AAEd;;;;"}
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../../src/components/content/Component.tsx"],"sourcesContent":["import React, { type FC, type ReactNode, type Ref, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { ModalContext } from '../../Context';\nimport { ResponsiveContext } from '../../ResponsiveContext';\n\nimport styles from './index.module.css';\n\nexport type ContentProps = {\n /**\n * Контент\n */\n children?: ReactNode;\n\n /**\n * Дополнительный класс\n */\n className?: string;\n\n /**\n * Идентификатор для систем автоматизированного тестирования\n */\n dataTestId?: string;\n};\n\nexport const Content: FC<ContentProps> = ({ children, className, dataTestId }) => {\n const { contentRef, hasHeader } = useContext(ModalContext);\n const responsiveContext = useContext(ResponsiveContext);\n\n return (\n <div\n className={cn(styles.content, className, styles.flex, {\n [styles.withHeader]: hasHeader,\n })}\n ref={contentRef as Ref<HTMLDivElement>}\n data-test-id={dataTestId || getDataTestId(responsiveContext?.dataTestId, 'content')}\n >\n {children}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;AA2BO,IAAM,OAAO,GAAqB,UAAC,EAAmC,EAAA;;AAAjC,IAAA,IAAA,QAAQ,cAAA,EAAE,SAAS,GAAA,EAAA,CAAA,SAAA,EAAE,UAAU,GAAA,EAAA,CAAA,UAAA;IACjE,IAAA,EAAA,GAA4B,UAAU,CAAC,YAAY,CAAC,EAAlD,UAAU,GAAA,EAAA,CAAA,UAAA,EAAE,SAAS,GAAA,EAAA,CAAA,SAA6B;AAC1D,IAAA,IAAM,iBAAiB,GAAG,UAAU,CAAC,iBAAiB,CAAC;AAEvD,IAAA,QACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,GAAA,EAAA,GAAA,EAAA;AAChD,YAAA,EAAA,CAAC,MAAM,CAAC,UAAU,CAAA,GAAG,SAAS;gBAChC,EACF,GAAG,EAAE,UAAiC,EAAA,cAAA,EACxB,UAAU,IAAI,aAAa,CAAC,iBAAiB,KAAjB,IAAA,IAAA,iBAAiB,uBAAjB,iBAAiB,CAAE,UAAU,EAAE,SAAS,CAAC,EAElF,EAAA,QAAQ,CACP;AAEd;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
2
|
-
import { ContentProps } from './Component';
|
|
1
|
+
import { type FC } from 'react';
|
|
2
|
+
import { type ContentProps } from './Component';
|
|
3
3
|
export declare type ContentMobileProps = ContentProps;
|
|
4
4
|
export declare const ContentMobile: FC<ContentMobileProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.mobile.js","sources":["../../../src/components/content/Component.mobile.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport cn from 'classnames';\n\nimport { Content, ContentProps } from './Component';\n\nimport styles from './mobile.module.css';\n\nexport type ContentMobileProps = ContentProps;\n\nexport const ContentMobile: FC<ContentMobileProps> = ({ className, ...restProps }) => (\n <Content className={cn(className, styles.content)} {...restProps} />\n);\n"],"names":[],"mappings":";;;;;;AASO,IAAM,aAAa,GAA2B,UAAC,EAA2B,EAAA;AAAzB,IAAA,IAAA,SAAS,GAAA,EAAA,CAAA,SAAA,EAAK,SAAS,GAAA,MAAA,CAAA,EAAA,EAAzB,aAA2B,CAAF;AAAO,IAAA,QAClF,KAAC,CAAA,aAAA,CAAA,OAAO,aAAC,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,IAAM,SAAS,CAAA,CAAI;;;;;"}
|
|
1
|
+
{"version":3,"file":"Component.mobile.js","sources":["../../../src/components/content/Component.mobile.tsx"],"sourcesContent":["import React, { type FC } from 'react';\nimport cn from 'classnames';\n\nimport { Content, type ContentProps } from './Component';\n\nimport styles from './mobile.module.css';\n\nexport type ContentMobileProps = ContentProps;\n\nexport const ContentMobile: FC<ContentMobileProps> = ({ className, ...restProps }) => (\n <Content className={cn(className, styles.content)} {...restProps} />\n);\n"],"names":[],"mappings":";;;;;;AASO,IAAM,aAAa,GAA2B,UAAC,EAA2B,EAAA;AAAzB,IAAA,IAAA,SAAS,GAAA,EAAA,CAAA,SAAA,EAAK,SAAS,GAAA,MAAA,CAAA,EAAA,EAAzB,aAA2B,CAAF;AAAO,IAAA,QAClF,KAAC,CAAA,aAAA,CAAA,OAAO,aAAC,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,IAAM,SAAS,CAAA,CAAI;;;;;"}
|
|
@@ -6,8 +6,8 @@
|
|
|
6
6
|
--gap-40: var(--gap-3xl);
|
|
7
7
|
} :root {
|
|
8
8
|
--side-panel-s-content-paddings: var(--gap-40) var(--gap-40) var(--gap-0);
|
|
9
|
-
} .side-panel__size-
|
|
10
|
-
padding: var(--side-panel-s-content-paddings)
|
|
11
|
-
} .side-panel__size-
|
|
9
|
+
} .side-panel__size-500_esw6a {
|
|
10
|
+
padding: var(--side-panel-s-content-paddings);
|
|
11
|
+
} .side-panel__size-500_esw6a:last-child {
|
|
12
12
|
padding-bottom: var(--gap-32);
|
|
13
13
|
}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--gap-0: 0px;
|
|
3
|
-
} .side-
|
|
3
|
+
} .side-panel__content_10mri {
|
|
4
4
|
position: relative;
|
|
5
5
|
box-sizing: border-box;
|
|
6
6
|
width: 100%;
|
|
7
|
-
z-index: 0
|
|
8
|
-
} .side-
|
|
7
|
+
z-index: 0;
|
|
8
|
+
} .side-panel__content_10mri.side-panel__withHeader_10mri {
|
|
9
9
|
padding-top: var(--gap-0);
|
|
10
|
-
} .side-
|
|
10
|
+
} .side-panel__flex_10mri {
|
|
11
11
|
flex: 1 1 auto;
|
|
12
12
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
var styles = {"content":"side-
|
|
3
|
+
var styles = {"content":"side-panel__content_10mri","withHeader":"side-panel__withHeader_10mri","flex":"side-panel__flex_10mri"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
--gap-m: 16px;
|
|
3
3
|
--gap-0: 0px;
|
|
4
4
|
--gap-16: var(--gap-m);
|
|
5
|
-
} .side-
|
|
6
|
-
padding: var(--gap-16) var(--gap-16) var(--gap-0)
|
|
7
|
-
} .side-
|
|
5
|
+
} .side-panel__content_1und9 {
|
|
6
|
+
padding: var(--gap-16) var(--gap-16) var(--gap-0);
|
|
7
|
+
} .side-panel__content_1und9:last-child {
|
|
8
8
|
padding-bottom: var(--gap-16);
|
|
9
9
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../../../src/components/controls/Component.tsx"],"sourcesContent":["import React, { ReactNode, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { ResponsiveContext } from '../../ResponsiveContext';\n\nimport layoutStyles from '../footer/layout.module.css';\nimport styles from './index.module.css';\n\nexport interface ControlsProps {\n /**\n * Основной слот\n */\n primary?: ReactNode;\n\n /**\n * Дополнительный слот\n */\n secondary?: ReactNode;\n\n /**\n * Выравнивание элементов футера\n * @default start\n */\n layout?: 'start' | 'center' | 'space-between' | 'column';\n\n /**\n * Выравнивание элементов футера (мобильный view)\n * @default start\n */\n mobileLayout?: 'start' | 'center' | 'space-between' | 'column';\n\n /**\n * Отступы между элементами футера\n */\n gap?: 16 | 24 | 32;\n}\n\nexport const Controls: React.FC<ControlsProps> = ({\n primary,\n secondary,\n gap,\n layout: layoutProp = 'start',\n mobileLayout = layoutProp,\n}) => {\n const context = useContext(ResponsiveContext);\n const { view = 'desktop', dataTestId } = context || {};\n\n const layout = view === 'mobile' ? mobileLayout : layoutProp;\n\n const shouldReverse = view === 'mobile' && layout !== 'column';\n\n return (\n <div\n data-test-id={getDataTestId(dataTestId, 'controls')}\n className={cn(\n styles.component,\n layoutStyles[layout],\n gap && layoutStyles[`gap-${gap}`],\n )}\n >\n {shouldReverse ? (\n <React.Fragment>\n {secondary}\n {primary}\n </React.Fragment>\n ) : (\n <React.Fragment>\n {primary}\n {secondary}\n </React.Fragment>\n )}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;AAuCO,IAAM,QAAQ,GAA4B,UAAC,EAMjD,EAAA;QALG,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,GAAG,GAAA,EAAA,CAAA,GAAA,EACH,EAA4B,GAAA,EAAA,CAAA,MAAA,EAApB,UAAU,GAAG,EAAA,KAAA,MAAA,GAAA,OAAO,KAAA,EAC5B,EAAA,GAAA,EAAA,CAAA,YAAyB,EAAzB,YAAY,GAAA,EAAA,KAAA,MAAA,GAAG,UAAU,GAAA,EAAA;AAEzB,IAAA,IAAM,OAAO,GAAG,UAAU,CAAC,iBAAiB,CAAC;AACvC,IAAA,IAAA,EAAmC,GAAA,OAAO,IAAI,EAAE,EAA9C,EAAgB,GAAA,EAAA,CAAA,IAAA,EAAhB,IAAI,GAAA,EAAA,KAAA,MAAA,GAAG,SAAS,GAAA,EAAA,EAAE,UAAU,gBAAkB;AAEtD,IAAA,IAAM,MAAM,GAAG,IAAI,KAAK,QAAQ,GAAG,YAAY,GAAG,UAAU;IAE5D,IAAM,aAAa,GAAG,IAAI,KAAK,QAAQ,IAAI,MAAM,KAAK,QAAQ;AAE9D,IAAA,QACI,KACkB,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,cAAA,EAAA,aAAa,CAAC,UAAU,EAAE,UAAU,CAAC,EACnD,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,SAAS,EAChB,YAAY,CAAC,MAAM,CAAC,EACpB,GAAG,IAAI,YAAY,CAAC,MAAO,CAAA,MAAA,CAAA,GAAG,CAAE,CAAC,CACpC,EAEA,EAAA,aAAa,IACV,KAAC,CAAA,aAAA,CAAA,KAAK,CAAC,QAAQ,EAAA,IAAA;QACV,SAAS;QACT,OAAO,CACK,KAEjB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAQ,EAAA,IAAA;QACV,OAAO;AACP,QAAA,SAAS,CACG,CACpB,CACC;AAEd;;;;"}
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../../src/components/controls/Component.tsx"],"sourcesContent":["import React, { type ReactNode, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { ResponsiveContext } from '../../ResponsiveContext';\n\nimport layoutStyles from '../footer/layout.module.css';\nimport styles from './index.module.css';\n\nexport interface ControlsProps {\n /**\n * Основной слот\n */\n primary?: ReactNode;\n\n /**\n * Дополнительный слот\n */\n secondary?: ReactNode;\n\n /**\n * Выравнивание элементов футера\n * @default start\n */\n layout?: 'start' | 'center' | 'space-between' | 'column';\n\n /**\n * Выравнивание элементов футера (мобильный view)\n * @default start\n */\n mobileLayout?: 'start' | 'center' | 'space-between' | 'column';\n\n /**\n * Отступы между элементами футера\n */\n gap?: 16 | 24 | 32;\n}\n\nexport const Controls: React.FC<ControlsProps> = ({\n primary,\n secondary,\n gap,\n layout: layoutProp = 'start',\n mobileLayout = layoutProp,\n}) => {\n const context = useContext(ResponsiveContext);\n const { view = 'desktop', dataTestId } = context || {};\n\n const layout = view === 'mobile' ? mobileLayout : layoutProp;\n\n const shouldReverse = view === 'mobile' && layout !== 'column';\n\n return (\n <div\n data-test-id={getDataTestId(dataTestId, 'controls')}\n className={cn(\n styles.component,\n layoutStyles[layout],\n gap && layoutStyles[`gap-${gap}`],\n )}\n >\n {shouldReverse ? (\n <React.Fragment>\n {secondary}\n {primary}\n </React.Fragment>\n ) : (\n <React.Fragment>\n {primary}\n {secondary}\n </React.Fragment>\n )}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;AAuCO,IAAM,QAAQ,GAA4B,UAAC,EAMjD,EAAA;QALG,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,GAAG,GAAA,EAAA,CAAA,GAAA,EACH,EAA4B,GAAA,EAAA,CAAA,MAAA,EAApB,UAAU,GAAG,EAAA,KAAA,MAAA,GAAA,OAAO,KAAA,EAC5B,EAAA,GAAA,EAAA,CAAA,YAAyB,EAAzB,YAAY,GAAA,EAAA,KAAA,MAAA,GAAG,UAAU,GAAA,EAAA;AAEzB,IAAA,IAAM,OAAO,GAAG,UAAU,CAAC,iBAAiB,CAAC;AACvC,IAAA,IAAA,EAAmC,GAAA,OAAO,IAAI,EAAE,EAA9C,EAAgB,GAAA,EAAA,CAAA,IAAA,EAAhB,IAAI,GAAA,EAAA,KAAA,MAAA,GAAG,SAAS,GAAA,EAAA,EAAE,UAAU,gBAAkB;AAEtD,IAAA,IAAM,MAAM,GAAG,IAAI,KAAK,QAAQ,GAAG,YAAY,GAAG,UAAU;IAE5D,IAAM,aAAa,GAAG,IAAI,KAAK,QAAQ,IAAI,MAAM,KAAK,QAAQ;AAE9D,IAAA,QACI,KACkB,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,cAAA,EAAA,aAAa,CAAC,UAAU,EAAE,UAAU,CAAC,EACnD,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,SAAS,EAChB,YAAY,CAAC,MAAM,CAAC,EACpB,GAAG,IAAI,YAAY,CAAC,MAAO,CAAA,MAAA,CAAA,GAAG,CAAE,CAAC,CACpC,EAEA,EAAA,aAAa,IACV,KAAC,CAAA,aAAA,CAAA,KAAK,CAAC,QAAQ,EAAA,IAAA;QACV,SAAS;QACT,OAAO,CACK,KAEjB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAQ,EAAA,IAAA;QACV,OAAO;AACP,QAAA,SAAS,CACG,CACpB,CACC;AAEd;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
2
|
-
import { FooterProps } from './Component';
|
|
1
|
+
import { type FC } from 'react';
|
|
2
|
+
import { type FooterProps } from './Component';
|
|
3
3
|
export declare type FooterDesktopProps = FooterProps & {
|
|
4
4
|
/**
|
|
5
5
|
* Размер (только для desktop версии компонента)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.desktop.js","sources":["../../../src/components/footer/Component.desktop.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport cn from 'classnames';\n\nimport { SIZE_TO_CLASSNAME_MAP } from '../../consts';\n\nimport { Footer, FooterProps } from './Component';\n\nimport styles from './desktop.module.css';\n\nexport type FooterDesktopProps = FooterProps & {\n /**\n * Размер (только для desktop версии компонента)\n */\n size?: 's' | 500;\n};\n\nexport const FooterDesktop: FC<FooterDesktopProps> = ({\n size = 500,\n className,\n sticky,\n ...restProps\n}) => (\n <Footer\n className={cn(className, size && styles[SIZE_TO_CLASSNAME_MAP[size]], {\n [styles.sticky]: sticky,\n })}\n sticky={sticky}\n {...restProps}\n />\n);\n"],"names":[],"mappings":";;;;;;;AAgBO,IAAM,aAAa,GAA2B,UAAC,EAKrD,EAAA;;AAJG,IAAA,IAAA,YAAU,EAAV,IAAI,GAAG,EAAA,KAAA,MAAA,GAAA,GAAG,KAAA,EACV,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,MAAM,GAAA,EAAA,CAAA,MAAA,EACH,SAAS,GAAA,MAAA,CAAA,EAAA,EAJsC,+BAKrD,CADe;AACV,IAAA,QACF,KAAC,CAAA,aAAA,CAAA,MAAM,aACH,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,IAAI,IAAI,MAAM,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,GAAA,EAAA,GAAA,EAAA;AAChE,YAAA,EAAA,CAAC,MAAM,CAAC,MAAM,CAAA,GAAG,MAAM;AACzB,YAAA,EAAA,EAAA,EACF,MAAM,EAAE,MAAM,IACV,SAAS,CAAA,CACf;;;;;"}
|
|
1
|
+
{"version":3,"file":"Component.desktop.js","sources":["../../../src/components/footer/Component.desktop.tsx"],"sourcesContent":["import React, { type FC } from 'react';\nimport cn from 'classnames';\n\nimport { SIZE_TO_CLASSNAME_MAP } from '../../consts';\n\nimport { Footer, type FooterProps } from './Component';\n\nimport styles from './desktop.module.css';\n\nexport type FooterDesktopProps = FooterProps & {\n /**\n * Размер (только для desktop версии компонента)\n */\n size?: 's' | 500;\n};\n\nexport const FooterDesktop: FC<FooterDesktopProps> = ({\n size = 500,\n className,\n sticky,\n ...restProps\n}) => (\n <Footer\n className={cn(className, size && styles[SIZE_TO_CLASSNAME_MAP[size]], {\n [styles.sticky]: sticky,\n })}\n sticky={sticky}\n {...restProps}\n />\n);\n"],"names":[],"mappings":";;;;;;;AAgBO,IAAM,aAAa,GAA2B,UAAC,EAKrD,EAAA;;AAJG,IAAA,IAAA,YAAU,EAAV,IAAI,GAAG,EAAA,KAAA,MAAA,GAAA,GAAG,KAAA,EACV,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,MAAM,GAAA,EAAA,CAAA,MAAA,EACH,SAAS,GAAA,MAAA,CAAA,EAAA,EAJsC,+BAKrD,CADe;AACV,IAAA,QACF,KAAC,CAAA,aAAA,CAAA,MAAM,aACH,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,IAAI,IAAI,MAAM,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,GAAA,EAAA,GAAA,EAAA;AAChE,YAAA,EAAA,CAAC,MAAM,CAAC,MAAM,CAAA,GAAG,MAAM;AACzB,YAAA,EAAA,EAAA,EACF,MAAM,EAAE,MAAM,IACV,SAAS,CAAA,CACf;;;;;"}
|
|
@@ -13,6 +13,9 @@ var Footer = function (_a) {
|
|
|
13
13
|
var responsiveContext = useContext(ResponsiveContext);
|
|
14
14
|
useEffect(function () {
|
|
15
15
|
setHasFooter(true);
|
|
16
|
+
return function () {
|
|
17
|
+
setHasFooter(false);
|
|
18
|
+
};
|
|
16
19
|
}, [setHasFooter]);
|
|
17
20
|
return (React.createElement("div", { className: cn(styles.footer, className, layoutStyles[layout], gap && layoutStyles["gap-".concat(gap)], (_b = {},
|
|
18
21
|
_b[styles.highlighted] = sticky && footerHighlighted,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../../../src/components/footer/Component.tsx"],"sourcesContent":["import React, { FC, ReactNode, useContext, useEffect } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { ModalContext } from '../../Context';\nimport { ResponsiveContext } from '../../ResponsiveContext';\n\nimport styles from './index.module.css';\nimport layoutStyles from './layout.module.css';\n\nexport type FooterProps = {\n /**\n * Контент футера\n */\n children?: ReactNode;\n\n /**\n * Дополнительный класс\n */\n className?: string;\n\n /**\n * Фиксирует футер\n */\n sticky?: boolean;\n\n /**\n * Выравнивание элементов футера\n */\n layout?: 'start' | 'center' | 'space-between' | 'column';\n\n /**\n * Отступы между элементами футера\n */\n gap?: 16 | 24 | 32;\n\n /**\n * Идентификатор для систем автоматизированного тестирования\n */\n dataTestId?: string;\n};\n\nexport const Footer: FC<FooterProps> = ({\n children,\n className,\n sticky,\n layout = 'start',\n gap,\n dataTestId,\n}) => {\n const { footerHighlighted, setHasFooter } = useContext(ModalContext);\n const responsiveContext = useContext(ResponsiveContext);\n\n useEffect(() => {\n setHasFooter(true);\n }, [setHasFooter]);\n\n return (\n <div\n className={cn(\n styles.footer,\n className,\n layoutStyles[layout],\n gap && layoutStyles[`gap-${gap}`],\n {\n [styles.highlighted]: sticky && footerHighlighted,\n [styles.sticky]: sticky,\n },\n )}\n data-test-id={dataTestId || getDataTestId(responsiveContext?.dataTestId, 'footer')}\n >\n {children}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;AA2CO,IAAM,MAAM,GAAoB,UAAC,EAOvC,EAAA;;AANG,IAAA,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,MAAM,YAAA,EACN,EAAA,GAAA,EAAA,CAAA,MAAgB,EAAhB,MAAM,GAAA,EAAA,KAAA,MAAA,GAAG,OAAO,GAAA,EAAA,EAChB,GAAG,GAAA,EAAA,CAAA,GAAA,EACH,UAAU,GAAA,EAAA,CAAA,UAAA;IAEJ,IAAA,EAAA,GAAsC,UAAU,CAAC,YAAY,CAAC,EAA5D,iBAAiB,GAAA,EAAA,CAAA,iBAAA,EAAE,YAAY,GAAA,EAAA,CAAA,YAA6B;AACpE,IAAA,IAAM,iBAAiB,GAAG,UAAU,CAAC,iBAAiB,CAAC;AAEvD,IAAA,SAAS,CAAC,YAAA;QACN,YAAY,CAAC,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../../src/components/footer/Component.tsx"],"sourcesContent":["import React, { type FC, type ReactNode, useContext, useEffect } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { ModalContext } from '../../Context';\nimport { ResponsiveContext } from '../../ResponsiveContext';\n\nimport styles from './index.module.css';\nimport layoutStyles from './layout.module.css';\n\nexport type FooterProps = {\n /**\n * Контент футера\n */\n children?: ReactNode;\n\n /**\n * Дополнительный класс\n */\n className?: string;\n\n /**\n * Фиксирует футер\n */\n sticky?: boolean;\n\n /**\n * Выравнивание элементов футера\n */\n layout?: 'start' | 'center' | 'space-between' | 'column';\n\n /**\n * Отступы между элементами футера\n */\n gap?: 16 | 24 | 32;\n\n /**\n * Идентификатор для систем автоматизированного тестирования\n */\n dataTestId?: string;\n};\n\nexport const Footer: FC<FooterProps> = ({\n children,\n className,\n sticky,\n layout = 'start',\n gap,\n dataTestId,\n}) => {\n const { footerHighlighted, setHasFooter } = useContext(ModalContext);\n const responsiveContext = useContext(ResponsiveContext);\n\n useEffect(() => {\n setHasFooter(true);\n\n return () => {\n setHasFooter(false);\n };\n }, [setHasFooter]);\n\n return (\n <div\n className={cn(\n styles.footer,\n className,\n layoutStyles[layout],\n gap && layoutStyles[`gap-${gap}`],\n {\n [styles.highlighted]: sticky && footerHighlighted,\n [styles.sticky]: sticky,\n },\n )}\n data-test-id={dataTestId || getDataTestId(responsiveContext?.dataTestId, 'footer')}\n >\n {children}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;AA2CO,IAAM,MAAM,GAAoB,UAAC,EAOvC,EAAA;;AANG,IAAA,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,MAAM,YAAA,EACN,EAAA,GAAA,EAAA,CAAA,MAAgB,EAAhB,MAAM,GAAA,EAAA,KAAA,MAAA,GAAG,OAAO,GAAA,EAAA,EAChB,GAAG,GAAA,EAAA,CAAA,GAAA,EACH,UAAU,GAAA,EAAA,CAAA,UAAA;IAEJ,IAAA,EAAA,GAAsC,UAAU,CAAC,YAAY,CAAC,EAA5D,iBAAiB,GAAA,EAAA,CAAA,iBAAA,EAAE,YAAY,GAAA,EAAA,CAAA,YAA6B;AACpE,IAAA,IAAM,iBAAiB,GAAG,UAAU,CAAC,iBAAiB,CAAC;AAEvD,IAAA,SAAS,CAAC,YAAA;QACN,YAAY,CAAC,IAAI,CAAC;QAElB,OAAO,YAAA;YACH,YAAY,CAAC,KAAK,CAAC;AACvB,SAAC;AACL,KAAC,EAAE,CAAC,YAAY,CAAC,CAAC;IAElB,QACI,KACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,MAAM,EACb,SAAS,EACT,YAAY,CAAC,MAAM,CAAC,EACpB,GAAG,IAAI,YAAY,CAAC,MAAA,CAAA,MAAA,CAAO,GAAG,CAAE,CAAC,GAAA,EAAA,GAAA,EAAA;AAE7B,YAAA,EAAA,CAAC,MAAM,CAAC,WAAW,CAAG,GAAA,MAAM,IAAI,iBAAiB;AACjD,YAAA,EAAA,CAAC,MAAM,CAAC,MAAM,CAAA,GAAG,MAAM;AAE9B,YAAA,EAAA,EAAA,EAAA,cAAA,EACa,UAAU,IAAI,aAAa,CAAC,iBAAiB,KAAA,IAAA,IAAjB,iBAAiB,KAAjB,MAAA,GAAA,MAAA,GAAA,iBAAiB,CAAE,UAAU,EAAE,QAAQ,CAAC,IAEjF,QAAQ,CACP;AAEd;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
2
|
-
import { FooterProps } from './Component';
|
|
1
|
+
import { type FC } from 'react';
|
|
2
|
+
import { type FooterProps } from './Component';
|
|
3
3
|
export declare type FooterMobileProps = FooterProps;
|
|
4
4
|
export declare const FooterMobile: FC<FooterMobileProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.mobile.js","sources":["../../../src/components/footer/Component.mobile.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport cn from 'classnames';\n\nimport { Footer, FooterProps } from './Component';\n\nimport styles from './mobile.module.css';\n\nexport type FooterMobileProps = FooterProps;\n\nexport const FooterMobile: FC<FooterMobileProps> = ({\n className,\n sticky,\n layout = 'start',\n ...restProps\n}) => (\n <Footer\n className={cn(className, styles.footer, {\n [styles.sticky]: sticky,\n })}\n sticky={sticky}\n layout={layout}\n {...restProps}\n />\n);\n"],"names":[],"mappings":";;;;;;AASO,IAAM,YAAY,GAA0B,UAAC,EAKnD,EAAA;;AAJG,IAAA,IAAA,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,EAAgB,GAAA,EAAA,CAAA,MAAA,EAAhB,MAAM,GAAA,EAAA,KAAA,MAAA,GAAG,OAAO,GAAA,EAAA,EACb,SAAS,GAAA,MAAA,CAAA,EAAA,EAJoC,iCAKnD,CADe;AACV,IAAA,QACF,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,QAAA,CAAA,EACH,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,GAAA,EAAA,GAAA,EAAA;AAClC,YAAA,EAAA,CAAC,MAAM,CAAC,MAAM,CAAA,GAAG,MAAM;gBACzB,EACF,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACV,EAAA,SAAS,CACf,CAAA;;;;;"}
|
|
1
|
+
{"version":3,"file":"Component.mobile.js","sources":["../../../src/components/footer/Component.mobile.tsx"],"sourcesContent":["import React, { type FC } from 'react';\nimport cn from 'classnames';\n\nimport { Footer, type FooterProps } from './Component';\n\nimport styles from './mobile.module.css';\n\nexport type FooterMobileProps = FooterProps;\n\nexport const FooterMobile: FC<FooterMobileProps> = ({\n className,\n sticky,\n layout = 'start',\n ...restProps\n}) => (\n <Footer\n className={cn(className, styles.footer, {\n [styles.sticky]: sticky,\n })}\n sticky={sticky}\n layout={layout}\n {...restProps}\n />\n);\n"],"names":[],"mappings":";;;;;;AASO,IAAM,YAAY,GAA0B,UAAC,EAKnD,EAAA;;AAJG,IAAA,IAAA,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,EAAgB,GAAA,EAAA,CAAA,MAAA,EAAhB,MAAM,GAAA,EAAA,KAAA,MAAA,GAAG,OAAO,GAAA,EAAA,EACb,SAAS,GAAA,MAAA,CAAA,EAAA,EAJoC,iCAKnD,CADe;AACV,IAAA,QACF,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,QAAA,CAAA,EACH,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,GAAA,EAAA,GAAA,EAAA;AAClC,YAAA,EAAA,CAAC,MAAM,CAAC,MAAM,CAAA,GAAG,MAAM;gBACzB,EACF,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACV,EAAA,SAAS,CACf,CAAA;;;;;"}
|
|
@@ -6,8 +6,8 @@
|
|
|
6
6
|
--gap-40: var(--gap-3xl);
|
|
7
7
|
} :root {
|
|
8
8
|
--side-panel-s-footer-paddings: var(--gap-24) var(--gap-40) var(--gap-40);
|
|
9
|
-
} .side-
|
|
9
|
+
} .side-panel__sticky_lhh1j {
|
|
10
10
|
bottom: var(--gap-0);
|
|
11
|
-
} .side-panel__size-
|
|
11
|
+
} .side-panel__size-500_lhh1j {
|
|
12
12
|
padding: var(--side-panel-s-footer-paddings);
|
|
13
13
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './desktop.css';
|
|
2
2
|
|
|
3
|
-
var styles = {"sticky":"side-
|
|
3
|
+
var styles = {"sticky":"side-panel__sticky_lhh1j","size-500":"side-panel__size-500_lhh1j"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=desktop.module.css.js.map
|
|
@@ -5,15 +5,17 @@
|
|
|
5
5
|
--side-panel-footer-background: var(--color-light-modal-bg-primary);
|
|
6
6
|
--side-panel-footer-highlight-background: var(--color-light-modal-bg-primary);
|
|
7
7
|
--side-panel-footer-highlight-box-shadow: 0 -1px 0 0 var(--color-light-neutral-300);
|
|
8
|
-
} .side-
|
|
8
|
+
} .side-panel__footer_1yeas {
|
|
9
9
|
width: 100%;
|
|
10
10
|
box-sizing: border-box;
|
|
11
|
-
transition:
|
|
12
|
-
|
|
11
|
+
transition:
|
|
12
|
+
box-shadow 0.2s ease,
|
|
13
|
+
background 0.2s ease;
|
|
14
|
+
} .side-panel__sticky_1yeas {
|
|
13
15
|
background: var(--side-panel-footer-background);
|
|
14
16
|
position: sticky;
|
|
15
17
|
z-index: 1;
|
|
16
|
-
} .side-
|
|
18
|
+
} .side-panel__highlighted_1yeas {
|
|
17
19
|
background: var(--side-panel-footer-highlight-background);
|
|
18
20
|
box-shadow: var(--side-panel-footer-highlight-box-shadow);
|
|
19
21
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
var styles = {"footer":"side-
|
|
3
|
+
var styles = {"footer":"side-panel__footer_1yeas","sticky":"side-panel__sticky_1yeas","highlighted":"side-panel__highlighted_1yeas"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|