@alfalab/core-components-bottom-sheet 7.1.0 → 7.2.0

package/moderncssm/components/header/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/header/Component.tsx"],"sourcesContent":["import React, { type FC, type RefObject, useContext, useEffect } from 'react';\nimport cn from 'classnames';\n\nimport { BaseModalContext } from '@alfalab/core-components-base-modal';\nimport {\n    NavigationBarPrivate,\n    type NavigationBarPrivateProps,\n} from '@alfalab/core-components-navigation-bar-private';\n\nimport { type ColorType } from '../../types';\n\nimport defaultColors from './default.module.css';\nimport styles from './index.module.css';\nimport invertedColors from './inverted.module.css';\n\nexport type HeaderProps = Omit<NavigationBarPrivateProps, 'view' | 'size'> & {\n    headerRef: RefObject<HTMLDivElement>;\n    headerOffset: number;\n    colors?: ColorType;\n    showSwipeMarker?: boolean;\n};\n\nconst colorStyles = {\n    default: defaultColors,\n    inverted: invertedColors,\n} as const;\n\nexport const Header: FC<HeaderProps> = ({\n    className,\n    colors = 'default',\n    sticky,\n    headerRef,\n    headerOffset,\n    showSwipeMarker,\n    title,\n    children,\n    ...restProps\n}) => {\n    const { setHeaderOffset, setHasHeader, headerHighlighted, onClose } =\n        useContext(BaseModalContext);\n\n    useEffect(() => {\n        setHeaderOffset(headerOffset);\n    }, [headerOffset, setHeaderOffset]);\n\n    useEffect(() => {\n        setHasHeader(true);\n    }, [setHasHeader]);\n\n    const colorStyle = colorStyles[colors];\n    const hasContent = Boolean(title || children);\n\n    return (\n        <NavigationBarPrivate\n            {...restProps}\n            ref={headerRef}\n            title={title}\n            onClose={onClose}\n            sticky={sticky}\n            view='mobile'\n            className={cn(className, {\n                [styles.headerWrapper]: showSwipeMarker,\n                [styles.headerWrapperWithoutSwipeMarker]: !showSwipeMarker,\n                [colorStyle.highlighted]: hasContent && headerHighlighted && sticky,\n                [colorStyle.hasContent]: hasContent,\n                [styles.sticky]: sticky,\n            })}\n            contentClassName={cn(styles.title)}\n            titleClassName={cn(colorStyle.title)}\n            subtitleClassName={cn(styles.subtitle, colorStyle.subtitle)}\n            colors={colors}\n        >\n            {children}\n        </NavigationBarPrivate>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;AAsBA,MAAM,WAAW,GAAG;AAChB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,QAAQ,EAAE,cAAc;CAClB;AAEH,MAAM,MAAM,GAAoB,CAAC,EACpC,SAAS,EACT,MAAM,GAAG,SAAS,EAClB,MAAM,EACN,SAAS,EACT,YAAY,EACZ,eAAe,EACf,KAAK,EACL,QAAQ,EACR,GAAG,SAAS,EACf,KAAI;AACD,IAAA,MAAM,EAAE,eAAe,EAAE,YAAY,EAAE,iBAAiB,EAAE,OAAO,EAAE,GAC/D,UAAU,CAAC,gBAAgB,CAAC;IAEhC,SAAS,CAAC,MAAK;QACX,eAAe,CAAC,YAAY,CAAC;AACjC,KAAC,EAAE,CAAC,YAAY,EAAE,eAAe,CAAC,CAAC;IAEnC,SAAS,CAAC,MAAK;QACX,YAAY,CAAC,IAAI,CAAC;AACtB,KAAC,EAAE,CAAC,YAAY,CAAC,CAAC;AAElB,IAAA,MAAM,UAAU,GAAG,WAAW,CAAC,MAAM,CAAC;IACtC,MAAM,UAAU,GAAG,OAAO,CAAC,KAAK,IAAI,QAAQ,CAAC;AAE7C,IAAA,QACI,KAAA,CAAA,aAAA,CAAC,oBAAoB,EAAA,EAAA,GACb,SAAS,EACb,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE;AACrB,YAAA,CAAC,MAAM,CAAC,aAAa,GAAG,eAAe;AACvC,YAAA,CAAC,MAAM,CAAC,+BAA+B,GAAG,CAAC,eAAe;YAC1D,CAAC,UAAU,CAAC,WAAW,GAAG,UAAU,IAAI,iBAAiB,IAAI,MAAM;AACnE,YAAA,CAAC,UAAU,CAAC,UAAU,GAAG,UAAU;AACnC,YAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;AAC1B,SAAA,CAAC,EACF,gBAAgB,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,EAClC,cAAc,EAAE,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,EACpC,iBAAiB,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE,UAAU,CAAC,QAAQ,CAAC,EAC3D,MAAM,EAAE,MAAM,IAEb,QAAQ,CACU;AAE/B;;;;"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/header/Component.tsx"],"sourcesContent":["import React, { type FC, type RefObject, useContext, useEffect } from 'react';\nimport cn from 'classnames';\n\nimport { BaseModalContext } from '@alfalab/core-components-base-modal';\nimport {\n    NavigationBarPrivate,\n    type NavigationBarPrivateProps,\n} from '@alfalab/core-components-navigation-bar-private';\n\nimport { type ColorType } from '../../types';\n\nimport defaultColors from './default.module.css';\nimport styles from './index.module.css';\nimport invertedColors from './inverted.module.css';\n\nexport type HeaderProps = Omit<NavigationBarPrivateProps, 'view' | 'size'> & {\n    headerRef: RefObject<HTMLDivElement>;\n    headerOffset: number;\n    colors?: ColorType;\n    showSwipeMarker?: boolean;\n};\n\nconst colorStyles = {\n    default: defaultColors,\n    inverted: invertedColors,\n} as const;\n\nexport const Header: FC<HeaderProps> = ({\n    className,\n    colors = 'default',\n    sticky,\n    headerRef,\n    headerOffset,\n    showSwipeMarker,\n    title,\n    children,\n    contentClassName,\n    ...restProps\n}) => {\n    const { setHeaderOffset, setHasHeader, headerHighlighted, onClose } =\n        useContext(BaseModalContext);\n\n    useEffect(() => {\n        setHeaderOffset(headerOffset);\n    }, [headerOffset, setHeaderOffset]);\n\n    useEffect(() => {\n        setHasHeader(true);\n    }, [setHasHeader]);\n\n    const colorStyle = colorStyles[colors];\n    const hasContent = Boolean(title || children);\n\n    return (\n        <NavigationBarPrivate\n            {...restProps}\n            ref={headerRef}\n            title={title}\n            onClose={onClose}\n            sticky={sticky}\n            view='mobile'\n            className={cn(className, {\n                [styles.headerWrapper]: showSwipeMarker,\n                [styles.headerWrapperWithoutSwipeMarker]: !showSwipeMarker,\n                [colorStyle.highlighted]: hasContent && headerHighlighted && sticky,\n                [colorStyle.hasContent]: hasContent,\n                [styles.sticky]: sticky,\n            })}\n            contentClassName={cn(styles.title, contentClassName)}\n            titleClassName={cn(colorStyle.title)}\n            subtitleClassName={cn(styles.subtitle, colorStyle.subtitle)}\n            colors={colors}\n        >\n            {children}\n        </NavigationBarPrivate>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;AAsBA,MAAM,WAAW,GAAG;AAChB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,QAAQ,EAAE,cAAc;CAClB;AAEH,MAAM,MAAM,GAAoB,CAAC,EACpC,SAAS,EACT,MAAM,GAAG,SAAS,EAClB,MAAM,EACN,SAAS,EACT,YAAY,EACZ,eAAe,EACf,KAAK,EACL,QAAQ,EACR,gBAAgB,EAChB,GAAG,SAAS,EACf,KAAI;AACD,IAAA,MAAM,EAAE,eAAe,EAAE,YAAY,EAAE,iBAAiB,EAAE,OAAO,EAAE,GAC/D,UAAU,CAAC,gBAAgB,CAAC;IAEhC,SAAS,CAAC,MAAK;QACX,eAAe,CAAC,YAAY,CAAC;AACjC,KAAC,EAAE,CAAC,YAAY,EAAE,eAAe,CAAC,CAAC;IAEnC,SAAS,CAAC,MAAK;QACX,YAAY,CAAC,IAAI,CAAC;AACtB,KAAC,EAAE,CAAC,YAAY,CAAC,CAAC;AAElB,IAAA,MAAM,UAAU,GAAG,WAAW,CAAC,MAAM,CAAC;IACtC,MAAM,UAAU,GAAG,OAAO,CAAC,KAAK,IAAI,QAAQ,CAAC;AAE7C,IAAA,QACI,KAAA,CAAA,aAAA,CAAC,oBAAoB,EAAA,EAAA,GACb,SAAS,EACb,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE;AACrB,YAAA,CAAC,MAAM,CAAC,aAAa,GAAG,eAAe;AACvC,YAAA,CAAC,MAAM,CAAC,+BAA+B,GAAG,CAAC,eAAe;YAC1D,CAAC,UAAU,CAAC,WAAW,GAAG,UAAU,IAAI,iBAAiB,IAAI,MAAM;AACnE,YAAA,CAAC,UAAU,CAAC,UAAU,GAAG,UAAU;AACnC,YAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;AAC1B,SAAA,CAAC,EACF,gBAAgB,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,gBAAgB,CAAC,EACpD,cAAc,EAAE,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,EACpC,iBAAiB,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE,UAAU,CAAC,QAAQ,CAAC,EAC3D,MAAM,EAAE,MAAM,IAEb,QAAQ,CACU;AAE/B;;;;"}

package/moderncssm/types.d.ts

@@ -69,6 +69,10 @@ export declare type BottomSheetProps = {
      * Дополнительный класс шапки
      */
     headerClassName?: string;
+    /**
+     * Дополнительный класс для контента шапки
+     */
+    headerContentClassName?: string;
     /**
      * Дополнительный класс футера
      */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-bottom-sheet",
-    "version": "7.1.0",
+    "version": "7.2.0",
     "description": "Bottom sheet mobile component",
     "keywords": [],
     "license": "MIT",

package/src/component.tsx

@@ -66,6 +66,7 @@ export const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
             containerClassName,
             containerProps,
             headerClassName,
+            headerContentClassName,
             footerClassName,
             addonClassName,
             closerClassName,
@@ -186,6 +187,7 @@ export const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
             headerOffset,
             colors,
             className: cn(headerClassName, colorStyle.hasContent),
+            contentClassName: headerContentClassName,
             addonClassName,
             closerClassName,
             backButtonClassName: backerClassName,

package/src/components/header/Component.tsx

@@ -34,6 +34,7 @@ export const Header: FC<HeaderProps> = ({
     showSwipeMarker,
     title,
     children,
+    contentClassName,
     ...restProps
 }) => {
     const { setHeaderOffset, setHasHeader, headerHighlighted, onClose } =
@@ -65,7 +66,7 @@ export const Header: FC<HeaderProps> = ({
                 [colorStyle.hasContent]: hasContent,
                 [styles.sticky]: sticky,
             })}
-            contentClassName={cn(styles.title)}
+            contentClassName={cn(styles.title, contentClassName)}
             titleClassName={cn(colorStyle.title)}
             subtitleClassName={cn(styles.subtitle, colorStyle.subtitle)}
             colors={colors}

package/src/types.ts

@@ -87,6 +87,11 @@ export type BottomSheetProps = {
      */
     headerClassName?: string;
 
+    /**
+     * Дополнительный класс для контента шапки
+     */
+    headerContentClassName?: string;
+
     /**
      * Дополнительный класс футера
      */

package/types.d.ts

@@ -69,6 +69,10 @@ export declare type BottomSheetProps = {
      * Дополнительный класс шапки
      */
     headerClassName?: string;
+    /**
+     * Дополнительный класс для контента шапки
+     */
+    headerContentClassName?: string;
     /**
      * Дополнительный класс футера
      */