@cloud-ru/uikit-product-site-header 0.4.8 → 0.4.10

package/dist/esm/helperComponents/MobileMenu/MobileMenu.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+type MobileMenuProps = {
+    mobileMenuOpen: boolean;
+    mobileMenuContent: ReactNode;
+    mobileConsultationButton?: ReactNode;
+    onClickForCloseMobileMenu: () => void;
+};
+export declare function MobileMenu({ mobileMenuOpen, onClickForCloseMobileMenu, mobileMenuContent, mobileConsultationButton, }: MobileMenuProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/helperComponents/MobileMenu/MobileMenu.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MobileModalCustom } from '@sbercloud/uikit-product-mobile-modal';
+import styles from './styles.module.css';
+export function MobileMenu({ mobileMenuOpen, onClickForCloseMobileMenu, mobileMenuContent, mobileConsultationButton, }) {
+    return (_jsxs(MobileModalCustom, { open: mobileMenuOpen, onClose: onClickForCloseMobileMenu, className: styles.mobileMenu, children: [_jsx(MobileModalCustom.Header, { title: '\u041C\u0435\u043D\u044E', align: 'center' }), _jsx(MobileModalCustom.Body, { content: mobileMenuContent }), mobileConsultationButton && _jsx(MobileModalCustom.Footer, { actions: mobileConsultationButton })] }));
+}

package/dist/esm/helperComponents/MobileMenu/index.d.ts

@@ -0,0 +1 @@
+export * from './MobileMenu';

package/dist/esm/helperComponents/MobileMenu/index.js

@@ -0,0 +1 @@
+export * from './MobileMenu';

package/dist/esm/helperComponents/MobileMenu/styles.module.css

@@ -0,0 +1,7 @@
+.mobileMenu{
+  scrollbar-width:none;
+  -ms-overflow-style:none;
+}
+.mobileMenu::-webkit-scrollbar{
+  display:none;
+}

package/dist/esm/helperComponents/MoreButton/MoreButton.d.ts

@@ -0,0 +1,7 @@
+import { LinkItem } from '../../components/HeaderItems/types';
+type MoreButtonProps = {
+    linkItemsArray: LinkItem[];
+    activeItemId?: string;
+};
+export declare function MoreButton({ linkItemsArray, activeItemId }: MoreButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/helperComponents/MoreButton/MoreButton.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'classnames';
+import { useState } from 'react';
+import { MoreSVG } from '@sbercloud/uikit-product-icons';
+import { Dropdown } from '@snack-uikit/dropdown';
+import { LinkItemHeader } from '../LinkItemHeader';
+import styles from './styles.module.css';
+export function MoreButton({ linkItemsArray, activeItemId }) {
+    const [open, setOpen] = useState(false);
+    const onClickOpen = () => {
+        setOpen(prev => !prev);
+    };
+    return (_jsx(Dropdown, { placement: 'bottom-start', open: open, outsideClick: () => {
+            onClickOpen();
+            return false;
+        }, content: _jsx("div", { className: styles.tagRowDropListScroll, children: linkItemsArray.map(item => (_jsx("div", { className: cn(styles.rowLinkMore, {
+                    [styles.hovered]: !item.href,
+                    [styles.active]: item.id === activeItemId && !item.href,
+                }), children: _jsx(LinkItemHeader, { label: item.label, onClick: () => {
+                        item.onClick && item.onClick();
+                        onClickOpen();
+                    }, href: item.href, withoutHover: true }) }, item.id))) }), children: _jsx("button", { className: styles.button, onClick: onClickOpen, children: _jsx(MoreSVG, {}) }) }));
+}

package/dist/esm/helperComponents/MoreButton/index.d.ts

@@ -0,0 +1 @@
+export * from './MoreButton';

package/dist/esm/helperComponents/MoreButton/index.js

@@ -0,0 +1 @@
+export * from './MoreButton';

package/dist/esm/helperComponents/MoreButton/styles.module.css

@@ -0,0 +1,33 @@
+.tagRowDropListScroll{
+  display:flex;
+  flex-direction:column;
+  align-items:start;
+  width:140px;
+}
+
+.rowLinkMore{
+  padding:8px 10px;
+  border-left:2px solid transparent;
+  transition:color 0.3s ease-in-out;
+}
+
+.hovered:hover{
+  border-left:2px solid var(--sys-primary-accent-default, #26d07c);
+}
+
+.button{
+  background-color:transparent;
+  border:none;
+  box-shadow:none;
+  padding:0;
+  display:flex;
+  align-items:center;
+  cursor:pointer;
+}
+.button:active, .button:focus{
+  outline:none;
+}
+
+.active{
+  border-left:2px solid var(--sys-primary-accent-default, #26d07c);
+}

package/dist/esm/helperComponents/UserInfo/UserInfo.d.ts

@@ -0,0 +1,7 @@
+type UserInfoProps = {
+    userName: string;
+    lastName: string;
+    className?: string;
+};
+export declare function UserInfo({ userName, lastName, className }: UserInfoProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/helperComponents/UserInfo/UserInfo.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { Avatar } from '@snack-uikit/avatar';
+import { Typography } from '@snack-uikit/typography';
+import styles from './styles.module.css';
+export function UserInfo({ userName, lastName, className }) {
+    const fullName = `${lastName} ${userName}`;
+    return (_jsxs("div", { className: cn(styles.root, className), children: [_jsx(Avatar, { name: fullName, size: 'xs', showTwoSymbols: true, appearance: 'green' }), _jsx(Typography, { tag: 'div', size: 's', purpose: 'body', family: 'sans', className: styles.text, children: fullName })] }));
+}

package/dist/esm/helperComponents/UserInfo/index.d.ts

@@ -0,0 +1 @@
+export * from './UserInfo';

package/dist/esm/helperComponents/UserInfo/index.js

@@ -0,0 +1 @@
+export * from './UserInfo';

package/dist/esm/helperComponents/UserInfo/styles.module.css

@@ -0,0 +1,13 @@
+.root{
+  display:grid;
+  grid-template-columns:24px 188px;
+  align-items:center;
+  gap:8px;
+}
+
+.text{
+  text-overflow:ellipsis;
+  overflow:hidden;
+  white-space:nowrap;
+  color:var(--sys-neutral-text-main, #41424e);
+}

package/dist/esm/helperComponents/index.d.ts

@@ -0,0 +1,5 @@
+export * from './MoreButton';
+export * from './LinkItemHeader';
+export * from './ButtonBurger';
+export * from './LogoContent';
+export * from './MobileMenu';

package/dist/esm/helperComponents/index.js

@@ -0,0 +1,5 @@
+export * from './MoreButton';
+export * from './LinkItemHeader';
+export * from './ButtonBurger';
+export * from './LogoContent';
+export * from './MobileMenu';

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

@@ -0,0 +1,2 @@
+export * from './useResizeObserver';
+export * from './useHeaderPosition';

package/dist/esm/hooks/index.js

@@ -0,0 +1,2 @@
+export * from './useResizeObserver';
+export * from './useHeaderPosition';

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

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

package/dist/esm/hooks/useHeaderPosition.js

@@ -0,0 +1,43 @@
+import { useEffect, useState } from 'react';
+export const useHeaderPosition = (isModalMenuOpen, refHeader) => {
+    const [showHeader, setShowHeader] = useState(true);
+    const [headerPosition, setHeaderPosition] = useState(0);
+    const [headerHeight, setHeaderHeight] = useState(0);
+    useEffect(() => {
+        const targetScroll = () => {
+            const lastScrollPos = window.scrollY;
+            if (headerPosition !== 0) {
+                if (!isModalMenuOpen && lastScrollPos > headerPosition && showHeader && lastScrollPos > 150) {
+                    setShowHeader(false);
+                    setHeaderPosition(lastScrollPos);
+                }
+                else if (lastScrollPos < headerPosition && !showHeader) {
+                    setShowHeader(true);
+                }
+            }
+            setHeaderPosition(lastScrollPos);
+        };
+        const updateHeaderHeight = () => {
+            if (refHeader && refHeader.current) {
+                const height = refHeader.current.offsetHeight;
+                setHeaderHeight(Math.floor(height));
+            }
+        };
+        const handleResize = () => {
+            updateHeaderHeight();
+        };
+        updateHeaderHeight();
+        targetScroll();
+        window.addEventListener('scroll', targetScroll);
+        window.addEventListener('scroll', handleResize);
+        return () => {
+            window.removeEventListener('scroll', targetScroll);
+            window.removeEventListener('scroll', handleResize);
+        };
+    }, [showHeader, headerPosition, isModalMenuOpen, refHeader]);
+    return {
+        showHeader,
+        headerPosition,
+        headerHeight,
+    };
+};

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

@@ -0,0 +1,3 @@
+export declare const useResizeObserver: (element: HTMLElement | null) => {
+    width: number;
+};

package/dist/esm/hooks/useResizeObserver.js

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+export const useResizeObserver = (element) => {
+    const [width, setWidth] = useState(0);
+    useEffect(() => {
+        if (!element) {
+            return;
+        }
+        const resizeObserver = new ResizeObserver(() => {
+            if (element.offsetWidth !== width) {
+                setWidth(element.offsetWidth);
+            }
+        });
+        resizeObserver.observe(element);
+        return () => resizeObserver.disconnect();
+    }, [element, width]);
+    return { width };
+};

package/dist/esm/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/dist/esm/index.js

@@ -0,0 +1 @@
+export * from './components';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-site-header",
   "title": "Siteheader",
-  "version": "0.4.8",
+  "version": "0.4.10",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -30,16 +30,17 @@
     "name": "Akhremenko Grigorii",
     "url": "https://github.com/AGrigorii"
   },
+  "contributors": [],
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public"
   },
   "scripts": {},
   "dependencies": {
-    "@cloud-ru/uikit-product-icons": "15.1.1",
-    "@cloud-ru/uikit-product-mobile-modal": "0.9.18",
-    "@cloud-ru/uikit-product-site-layout": "0.2.2",
-    "@cloud-ru/uikit-product-utils": "7.0.0",
+    "@cloud-ru/uikit-product-icons": "15.1.3",
+    "@cloud-ru/uikit-product-mobile-modal": "0.9.20",
+    "@cloud-ru/uikit-product-site-layout": "0.2.4",
+    "@cloud-ru/uikit-product-utils": "7.0.2",
     "@snack-uikit/alert": "0.16.17",
     "@snack-uikit/avatar": "0.8.15",
     "@snack-uikit/button": "0.19.16",
@@ -51,5 +52,5 @@
   "peerDependencies": {
     "@sbercloud/figma-tokens-web": "*"
   },
-  "gitHead": "e8bd79bc92b26a8f52611972eec98a867536ccd3"
+  "gitHead": "bf479ecf7238ef20b78f20acaef439efa535d1a1"
 }