@cloud-ru/uikit-product-site-header 3.1.2 → 3.1.3-preview-dcc3c4e8.0

package/README.md

@@ -6,3 +6,13 @@
 [Changelog](./CHANGELOG.md)
 
 SiteHeader
+
+## Управляемая видимость
+
+По умолчанию `SiteHeaderBasic` сам скрывается при прокрутке вниз и появляется при прокрутке вверх.
+Передайте `visible`, чтобы управлять видимостью извне — например, скрывать хедер при переходах по якорям
+и согласовывать его положение с навигацией страницы. При заданном `visible` внутренняя реакция на прокрутку отключается.
+
+```tsx
+<SiteHeaderBasic {...props} visible={showHeader} />
+```

package/dist/cjs/components/SiteHeaderBasic/SiteHeaderBasic.d.ts

@@ -28,6 +28,8 @@ export type HeaderProps = WithSupportProps<WithLayoutType<{
     maxWidth?: number;
     /** Флаг открытия мобильного меню */
     mobileMenuOpen: boolean;
+    /** Управляемая видимость. Если не задана, хедер скрывается и появляется при прокрутке. */
+    visible?: boolean;
     /** Внешний вид */
     appearance?: Appearance;
     /** Настройки Логотипа */
@@ -49,4 +51,4 @@ export type HeaderProps = WithSupportProps<WithLayoutType<{
     /** className для левой части хедера */
     leftPartClassName?: string;
 }>>;
-export declare function SiteHeaderBasic({ className, maxWidth, additionalLogoText, middleContent, rightContent, mobileMenuContent, subHeader, fullWidthContent, layoutType, mobileConsultationButton, mobileMenuOpen, onSetMobileMenuOpen, mainHeaderClassName, appearance, logo, leftPartClassName, mobileModalBodyClassName, ...rest }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function SiteHeaderBasic({ className, maxWidth, additionalLogoText, middleContent, rightContent, mobileMenuContent, subHeader, fullWidthContent, layoutType, mobileConsultationButton, mobileMenuOpen, visible, onSetMobileMenuOpen, mainHeaderClassName, appearance, logo, leftPartClassName, mobileModalBodyClassName, ...rest }: HeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/SiteHeaderBasic/SiteHeaderBasic.js

@@ -25,13 +25,14 @@ const hooks_1 = require("../../hooks");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 const HEIGHT_SUBHEADER = 56;
 function SiteHeaderBasic(_a) {
-    var { className, maxWidth, additionalLogoText, middleContent, rightContent, mobileMenuContent, subHeader, fullWidthContent, layoutType, mobileConsultationButton, mobileMenuOpen, onSetMobileMenuOpen, mainHeaderClassName, appearance = 'none', logo, leftPartClassName, mobileModalBodyClassName } = _a, rest = __rest(_a, ["className", "maxWidth", "additionalLogoText", "middleContent", "rightContent", "mobileMenuContent", "subHeader", "fullWidthContent", "layoutType", "mobileConsultationButton", "mobileMenuOpen", "onSetMobileMenuOpen", "mainHeaderClassName", "appearance", "logo", "leftPartClassName", "mobileModalBodyClassName"]);
+    var { className, maxWidth, additionalLogoText, middleContent, rightContent, mobileMenuContent, subHeader, fullWidthContent, layoutType, mobileConsultationButton, mobileMenuOpen, visible, onSetMobileMenuOpen, mainHeaderClassName, appearance = 'none', logo, leftPartClassName, mobileModalBodyClassName } = _a, rest = __rest(_a, ["className", "maxWidth", "additionalLogoText", "middleContent", "rightContent", "mobileMenuContent", "subHeader", "fullWidthContent", "layoutType", "mobileConsultationButton", "mobileMenuOpen", "visible", "onSetMobileMenuOpen", "mainHeaderClassName", "appearance", "logo", "leftPartClassName", "mobileModalBodyClassName"]);
     const refHeader = (0, react_1.useRef)(null);
-    const { showHeader, headerHeight } = (0, hooks_1.useHeaderPosition)(mobileMenuOpen, refHeader);
+    const { showHeader, headerHeight } = (0, hooks_1.useHeaderPosition)(mobileMenuOpen, refHeader, visible === undefined);
+    const headerVisible = visible !== null && visible !== void 0 ? visible : showHeader;
     const isMobileTabletView = layoutType === 'mobile' || layoutType === 'tablet';
     const isMobile = layoutType === 'mobile';
     return ((0, jsx_runtime_1.jsxs)(uikit_product_site_layout_1.Layout.Header, Object.assign({ style: {
-            transform: `translateY(-${!showHeader ? headerHeight + HEIGHT_SUBHEADER : 0}px)`,
+            transform: `translateY(-${!headerVisible ? headerHeight + HEIGHT_SUBHEADER : 0}px)`,
         }, className: (0, classnames_1.default)(styles_module_scss_1.default.root, className), "data-attr": 'layout-header' }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: [subHeader, (0, jsx_runtime_1.jsx)("div", { ref: refHeader, className: (0, classnames_1.default)(styles_module_scss_1.default.headerMaster, styles_module_scss_1.default.dividerHeader, mainHeaderClassName), "data-layout-type": layoutType, "data-appearance": appearance, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.headerPartsContainer, style: {
                         maxWidth,
                     }, children: fullWidthContent !== null && fullWidthContent !== void 0 ? fullWidthContent : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.leftPart, leftPartClassName), "data-layout-type": layoutType, children: (0, jsx_runtime_1.jsx)(helperComponents_1.LogoContent, { additionalLogoText: additionalLogoText, isMobile: isMobile, logo: logo }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.middlePart, children: middleContent }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.rightPart, children: [rightContent, mobileMenuContent && isMobileTabletView && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(helperComponents_1.ButtonBurger, { appearance: appearance, mobileMenuOpen: mobileMenuOpen, onClick: () => onSetMobileMenuOpen(!mobileMenuOpen) }), (0, jsx_runtime_1.jsx)(helperComponents_1.MobileMenu, { mobileModalBodyClassName: mobileModalBodyClassName, mobileConsultationButton: mobileConsultationButton, mobileMenuContent: mobileMenuContent, mobileMenuOpen: mobileMenuOpen, onClickForCloseMobileMenu: () => onSetMobileMenuOpen(false) })] }))] })] })) }) })] })));

package/dist/cjs/hooks/useHeaderPosition.d.ts

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-export declare const useHeaderPosition: (isModalMenuOpen?: boolean, refHeader?: RefObject<HTMLDivElement>) => {
+export declare const useHeaderPosition: (isModalMenuOpen?: boolean, refHeader?: RefObject<HTMLDivElement>, autoHide?: boolean) => {
     showHeader: boolean;
     headerPosition: number;
     headerHeight: number;

package/dist/cjs/hooks/useHeaderPosition.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useHeaderPosition = void 0;
 const react_1 = require("react");
-const useHeaderPosition = (isModalMenuOpen, refHeader) => {
+const useHeaderPosition = (isModalMenuOpen, refHeader, autoHide = true) => {
     const [showHeader, setShowHeader] = (0, react_1.useState)(true);
     const [headerPosition, setHeaderPosition] = (0, react_1.useState)(0);
     const [headerHeight, setHeaderHeight] = (0, react_1.useState)(0);
@@ -30,14 +30,16 @@ const useHeaderPosition = (isModalMenuOpen, refHeader) => {
             updateHeaderHeight();
         };
         updateHeaderHeight();
-        targetScroll();
-        window.addEventListener('scroll', targetScroll);
+        if (autoHide) {
+            targetScroll();
+            window.addEventListener('scroll', targetScroll);
+        }
         window.addEventListener('scroll', handleResize);
         return () => {
             window.removeEventListener('scroll', targetScroll);
             window.removeEventListener('scroll', handleResize);
         };
-    }, [showHeader, headerPosition, isModalMenuOpen, refHeader]);
+    }, [showHeader, headerPosition, isModalMenuOpen, refHeader, autoHide]);
     return {
         showHeader,
         headerPosition,

package/dist/esm/components/SiteHeaderBasic/SiteHeaderBasic.d.ts

@@ -28,6 +28,8 @@ export type HeaderProps = WithSupportProps<WithLayoutType<{
     maxWidth?: number;
     /** Флаг открытия мобильного меню */
     mobileMenuOpen: boolean;
+    /** Управляемая видимость. Если не задана, хедер скрывается и появляется при прокрутке. */
+    visible?: boolean;
     /** Внешний вид */
     appearance?: Appearance;
     /** Настройки Логотипа */
@@ -49,4 +51,4 @@ export type HeaderProps = WithSupportProps<WithLayoutType<{
     /** className для левой части хедера */
     leftPartClassName?: string;
 }>>;
-export declare function SiteHeaderBasic({ className, maxWidth, additionalLogoText, middleContent, rightContent, mobileMenuContent, subHeader, fullWidthContent, layoutType, mobileConsultationButton, mobileMenuOpen, onSetMobileMenuOpen, mainHeaderClassName, appearance, logo, leftPartClassName, mobileModalBodyClassName, ...rest }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function SiteHeaderBasic({ className, maxWidth, additionalLogoText, middleContent, rightContent, mobileMenuContent, subHeader, fullWidthContent, layoutType, mobileConsultationButton, mobileMenuOpen, visible, onSetMobileMenuOpen, mainHeaderClassName, appearance, logo, leftPartClassName, mobileModalBodyClassName, ...rest }: HeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/SiteHeaderBasic/SiteHeaderBasic.js

@@ -19,13 +19,14 @@ import { useHeaderPosition } from '../../hooks';
 import styles from './styles.module.css';
 const HEIGHT_SUBHEADER = 56;
 export function SiteHeaderBasic(_a) {
-    var { className, maxWidth, additionalLogoText, middleContent, rightContent, mobileMenuContent, subHeader, fullWidthContent, layoutType, mobileConsultationButton, mobileMenuOpen, onSetMobileMenuOpen, mainHeaderClassName, appearance = 'none', logo, leftPartClassName, mobileModalBodyClassName } = _a, rest = __rest(_a, ["className", "maxWidth", "additionalLogoText", "middleContent", "rightContent", "mobileMenuContent", "subHeader", "fullWidthContent", "layoutType", "mobileConsultationButton", "mobileMenuOpen", "onSetMobileMenuOpen", "mainHeaderClassName", "appearance", "logo", "leftPartClassName", "mobileModalBodyClassName"]);
+    var { className, maxWidth, additionalLogoText, middleContent, rightContent, mobileMenuContent, subHeader, fullWidthContent, layoutType, mobileConsultationButton, mobileMenuOpen, visible, onSetMobileMenuOpen, mainHeaderClassName, appearance = 'none', logo, leftPartClassName, mobileModalBodyClassName } = _a, rest = __rest(_a, ["className", "maxWidth", "additionalLogoText", "middleContent", "rightContent", "mobileMenuContent", "subHeader", "fullWidthContent", "layoutType", "mobileConsultationButton", "mobileMenuOpen", "visible", "onSetMobileMenuOpen", "mainHeaderClassName", "appearance", "logo", "leftPartClassName", "mobileModalBodyClassName"]);
     const refHeader = useRef(null);
-    const { showHeader, headerHeight } = useHeaderPosition(mobileMenuOpen, refHeader);
+    const { showHeader, headerHeight } = useHeaderPosition(mobileMenuOpen, refHeader, visible === undefined);
+    const headerVisible = visible !== null && visible !== void 0 ? visible : showHeader;
     const isMobileTabletView = layoutType === 'mobile' || layoutType === 'tablet';
     const isMobile = layoutType === 'mobile';
     return (_jsxs(Layout.Header, Object.assign({ style: {
-            transform: `translateY(-${!showHeader ? headerHeight + HEIGHT_SUBHEADER : 0}px)`,
+            transform: `translateY(-${!headerVisible ? headerHeight + HEIGHT_SUBHEADER : 0}px)`,
         }, className: cn(styles.root, className), "data-attr": 'layout-header' }, extractSupportProps(rest), { children: [subHeader, _jsx("div", { ref: refHeader, className: cn(styles.headerMaster, styles.dividerHeader, mainHeaderClassName), "data-layout-type": layoutType, "data-appearance": appearance, children: _jsx("div", { className: styles.headerPartsContainer, style: {
                         maxWidth,
                     }, children: fullWidthContent !== null && fullWidthContent !== void 0 ? fullWidthContent : (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(styles.leftPart, leftPartClassName), "data-layout-type": layoutType, children: _jsx(LogoContent, { additionalLogoText: additionalLogoText, isMobile: isMobile, logo: logo }) }), _jsx("div", { className: styles.middlePart, children: middleContent }), _jsxs("div", { className: styles.rightPart, children: [rightContent, mobileMenuContent && isMobileTabletView && (_jsxs(_Fragment, { children: [_jsx(ButtonBurger, { appearance: appearance, mobileMenuOpen: mobileMenuOpen, onClick: () => onSetMobileMenuOpen(!mobileMenuOpen) }), _jsx(MobileMenu, { mobileModalBodyClassName: mobileModalBodyClassName, mobileConsultationButton: mobileConsultationButton, mobileMenuContent: mobileMenuContent, mobileMenuOpen: mobileMenuOpen, onClickForCloseMobileMenu: () => onSetMobileMenuOpen(false) })] }))] })] })) }) })] })));

package/dist/esm/hooks/useHeaderPosition.d.ts

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-export declare const useHeaderPosition: (isModalMenuOpen?: boolean, refHeader?: RefObject<HTMLDivElement>) => {
+export declare const useHeaderPosition: (isModalMenuOpen?: boolean, refHeader?: RefObject<HTMLDivElement>, autoHide?: boolean) => {
     showHeader: boolean;
     headerPosition: number;
     headerHeight: number;

package/dist/esm/hooks/useHeaderPosition.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-export const useHeaderPosition = (isModalMenuOpen, refHeader) => {
+export const useHeaderPosition = (isModalMenuOpen, refHeader, autoHide = true) => {
     const [showHeader, setShowHeader] = useState(true);
     const [headerPosition, setHeaderPosition] = useState(0);
     const [headerHeight, setHeaderHeight] = useState(0);
@@ -27,14 +27,16 @@ export const useHeaderPosition = (isModalMenuOpen, refHeader) => {
             updateHeaderHeight();
         };
         updateHeaderHeight();
-        targetScroll();
-        window.addEventListener('scroll', targetScroll);
+        if (autoHide) {
+            targetScroll();
+            window.addEventListener('scroll', targetScroll);
+        }
         window.addEventListener('scroll', handleResize);
         return () => {
             window.removeEventListener('scroll', targetScroll);
             window.removeEventListener('scroll', handleResize);
         };
-    }, [showHeader, headerPosition, isModalMenuOpen, refHeader]);
+    }, [showHeader, headerPosition, isModalMenuOpen, refHeader, autoHide]);
     return {
         showHeader,
         headerPosition,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-site-header",
   "title": "Siteheader",
-  "version": "3.1.2",
+  "version": "3.1.3-preview-dcc3c4e8.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -43,12 +43,12 @@
     "@snack-uikit/link": "^1.0.1",
     "@snack-uikit/typography": "^1.0.1",
     "classnames": "^2.5.1",
-    "@cloud-ru/uikit-product-button-predefined": "^2.0.2",
-    "@cloud-ru/uikit-product-icons": "^19.2.0",
-    "@cloud-ru/uikit-product-mobile-alert": "^2.0.2",
-    "@cloud-ru/uikit-product-mobile-modal": "^3.0.2",
-    "@cloud-ru/uikit-product-site-layout": "^2.0.0",
-    "@cloud-ru/uikit-product-utils": "^10.0.0"
+    "@cloud-ru/uikit-product-utils": "10.0.0",
+    "@cloud-ru/uikit-product-button-predefined": "2.0.2",
+    "@cloud-ru/uikit-product-icons": "19.2.0",
+    "@cloud-ru/uikit-product-mobile-alert": "2.0.2",
+    "@cloud-ru/uikit-product-mobile-modal": "3.0.2",
+    "@cloud-ru/uikit-product-site-layout": "2.0.0"
   },
   "peerDependencies": {
     "@cloud-ru/figma-tokens-web": "*"

package/src/components/SiteHeaderBasic/SiteHeaderBasic.tsx

@@ -40,6 +40,8 @@ export type HeaderProps = WithSupportProps<
     maxWidth?: number;
     /** Флаг открытия мобильного меню */
     mobileMenuOpen: boolean;
+    /** Управляемая видимость. Если не задана, хедер скрывается и появляется при прокрутке. */
+    visible?: boolean;
     /** Внешний вид */
     appearance?: Appearance;
     /** Настройки Логотипа */
@@ -77,6 +79,7 @@ export function SiteHeaderBasic({
   layoutType,
   mobileConsultationButton,
   mobileMenuOpen,
+  visible,
   onSetMobileMenuOpen,
   mainHeaderClassName,
   appearance = 'none',
@@ -86,14 +89,15 @@ export function SiteHeaderBasic({
   ...rest
 }: HeaderProps) {
   const refHeader = useRef<HTMLDivElement>(null);
-  const { showHeader, headerHeight } = useHeaderPosition(mobileMenuOpen, refHeader);
+  const { showHeader, headerHeight } = useHeaderPosition(mobileMenuOpen, refHeader, visible === undefined);
+  const headerVisible = visible ?? showHeader;
   const isMobileTabletView = layoutType === 'mobile' || layoutType === 'tablet';
   const isMobile = layoutType === 'mobile';
 
   return (
     <Layout.Header
       style={{
-        transform: `translateY(-${!showHeader ? headerHeight + HEIGHT_SUBHEADER : 0}px)`,
+        transform: `translateY(-${!headerVisible ? headerHeight + HEIGHT_SUBHEADER : 0}px)`,
       }}
       className={cn(styles.root, className)}
       data-attr='layout-header'

package/src/hooks/useHeaderPosition.ts

@@ -1,6 +1,10 @@
 import { RefObject, useEffect, useState } from 'react';
 
-export const useHeaderPosition = (isModalMenuOpen?: boolean, refHeader?: RefObject<HTMLDivElement>) => {
+export const useHeaderPosition = (
+  isModalMenuOpen?: boolean,
+  refHeader?: RefObject<HTMLDivElement>,
+  autoHide = true,
+) => {
   const [showHeader, setShowHeader] = useState(true);
   const [headerPosition, setHeaderPosition] = useState(0);
   const [headerHeight, setHeaderHeight] = useState(0);
@@ -33,16 +37,17 @@ export const useHeaderPosition = (isModalMenuOpen?: boolean, refHeader?: RefObje
     };
 
     updateHeaderHeight();
-    targetScroll();
-
-    window.addEventListener('scroll', targetScroll);
+    if (autoHide) {
+      targetScroll();
+      window.addEventListener('scroll', targetScroll);
+    }
     window.addEventListener('scroll', handleResize);
 
     return () => {
       window.removeEventListener('scroll', targetScroll);
       window.removeEventListener('scroll', handleResize);
     };
-  }, [showHeader, headerPosition, isModalMenuOpen, refHeader]);
+  }, [showHeader, headerPosition, isModalMenuOpen, refHeader, autoHide]);
 
   return {
     showHeader,