@astral/ui 4.1.0 → 4.1.1

package/components/PageLayout/PageHeader/PageHeader.js

@@ -8,6 +8,6 @@ import { Title } from './Title';
 import { useLogic } from './useLogic';
 export const PageHeader = (props) => {
     const { title, description, subheader, breadcrumbs, actions, backButton, className, } = props;
-    const { isLoading, mobileTitleActions, isShowMobileActions } = useLogic(props);
-    return (_jsxs(_Fragment, { children: [_jsxs(MobileTitleWrapper, { "$hasBackButton": Boolean(backButton), className: classNames(pageHeaderClassnames.pageHeaderMobileTitle), children: [_jsx(Title, { backButton: backButton, title: title, isLoading: isLoading }), mobileTitleActions && mobileTitleActions] }), _jsx(Wrapper, { className: className, children: _jsx(HeaderContent, { breadcrumbs: breadcrumbs, backButton: backButton, title: title, description: description, actions: actions, subheader: subheader, isLoading: isLoading }) }), isShowMobileActions && (_jsx(MobilePageActions, Object.assign({ className: classNames(pageHeaderClassnames.pageHeaderActions), isLoading: isLoading }, actions)))] }));
+    const { isLoading, mobileTitleActions, isShowMobileActions, mobileClassnames, } = useLogic(props);
+    return (_jsxs(_Fragment, { children: [_jsxs(MobileTitleWrapper, { className: mobileClassnames, children: [_jsx(Title, { backButton: backButton, title: title, isLoading: isLoading }), mobileTitleActions && mobileTitleActions] }), _jsx(Wrapper, { className: className, children: _jsx(HeaderContent, { breadcrumbs: breadcrumbs, backButton: backButton, title: title, description: description, actions: actions, subheader: subheader, isLoading: isLoading }) }), isShowMobileActions && (_jsx(MobilePageActions, Object.assign({ className: classNames(pageHeaderClassnames.pageHeaderActions), isLoading: isLoading }, actions)))] }));
 };

package/components/PageLayout/PageHeader/constants.d.ts

@@ -1,5 +1,7 @@
 export declare const pageHeaderClassnames: {
     pageHeaderMobileTitle: string;
     pageHeaderActions: string;
+    hasBackButton: string;
+    hasTitle: string;
 };
 export declare const PAGE_HEADER_HEIGHT_MOBILE = "48px";

package/components/PageLayout/PageHeader/constants.js

@@ -2,5 +2,7 @@ import { createUIKitClassname } from '../../utils';
 export const pageHeaderClassnames = {
     pageHeaderMobileTitle: createUIKitClassname('page-header__mobile-title'),
     pageHeaderActions: createUIKitClassname('page-header__actions'),
+    hasBackButton: createUIKitClassname('page-header_has-back-button'),
+    hasTitle: createUIKitClassname('page-header_has-title'),
 };
 export const PAGE_HEADER_HEIGHT_MOBILE = '48px';

package/components/PageLayout/PageHeader/styles.d.ts

@@ -6,6 +6,4 @@ export declare const Wrapper: import("@emotion/styled").StyledComponent<{
 export declare const MobileTitleWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-} & {
-    $hasBackButton: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/PageLayout/PageHeader/styles.js

@@ -1,5 +1,5 @@
 import { styled } from '../../styles';
-import { PAGE_HEADER_HEIGHT_MOBILE } from './constants';
+import { PAGE_HEADER_HEIGHT_MOBILE, pageHeaderClassnames } from './constants';
 export const Wrapper = styled.header `
   display: grid;
   grid-column: 1 / -1;
@@ -19,24 +19,29 @@ export const Wrapper = styled.header `
     background-color: ${({ theme }) => theme.palette.background.default};
   }
 `;
-export const MobileTitleWrapper = styled('div', {
-    shouldForwardProp: (prop) => !['$hasBackButton'].includes(prop),
-}) `
+export const MobileTitleWrapper = styled.div `
   display: none;
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     position: sticky;
     z-index: ${({ theme }) => theme.zIndex.fab};
     top: 0;
-
-    display: flex;
+    
     align-items: center;
     order: 1;
-
-    height: ${PAGE_HEADER_HEIGHT_MOBILE};
-    min-height: ${PAGE_HEADER_HEIGHT_MOBILE};
-    padding: ${({ theme, $hasBackButton }) => $hasBackButton ? theme.spacing(0, 4, 0, 1) : theme.spacing(4)};
-
+    
     background-color: ${({ theme }) => theme.palette.background.default};
+    
+    &.${pageHeaderClassnames.hasTitle} {
+      display: flex;
+
+      height: ${PAGE_HEADER_HEIGHT_MOBILE};
+      min-height: ${PAGE_HEADER_HEIGHT_MOBILE};
+      padding: ${({ theme }) => theme.spacing(4)};
+    }
+
+    &.${pageHeaderClassnames.hasBackButton} {
+      padding: ${({ theme }) => theme.spacing(0, 4, 0, 1)};
+    }
   }
 `;

package/components/PageLayout/PageHeader/useLogic/useLogic.d.ts

@@ -1,9 +1,10 @@
 import { type ElementType } from 'react';
 import type { PageHeaderProps } from '../types';
 type UseLogicParams<TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType, TBackButtonComponent extends ElementType = ElementType> = PageHeaderProps<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>;
-export declare const useLogic: <TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType, TBackButtonComponent extends ElementType = ElementType>({ shouldUpdateDocumentTitle, title, actions, htmlTitle, }: UseLogicParams<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>) => {
+export declare const useLogic: <TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType, TBackButtonComponent extends ElementType = ElementType>({ shouldUpdateDocumentTitle, title, actions, htmlTitle, backButton, }: UseLogicParams<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>) => {
     isShowMobileActions: boolean | undefined;
     isLoading: boolean | undefined;
     mobileTitleActions: import("react").ReactNode;
+    mobileClassnames: string;
 };
 export {};

package/components/PageLayout/PageHeader/useLogic/useLogic.js

@@ -1,10 +1,21 @@
-import { useContext } from 'react';
+import { useContext, useMemo } from 'react';
+import { classNames } from '../../../utils';
 import { PageContext } from '../../PageContext';
+import { pageHeaderClassnames } from '../constants';
 import { usePageTitle } from '../hooks';
-export const useLogic = ({ shouldUpdateDocumentTitle, title, actions, htmlTitle, }) => {
+export const useLogic = ({ shouldUpdateDocumentTitle, title, actions, htmlTitle, backButton, }) => {
     //Переопределение Html title на title из параметров
     usePageTitle({ shouldUpdateDocumentTitle, htmlTitle, title });
     const { mobileTitleActions, isLoading } = useContext(PageContext);
     const isShowMobileActions = actions && !mobileTitleActions;
-    return { isShowMobileActions, isLoading, mobileTitleActions };
+    const mobileClassnames = useMemo(() => classNames(pageHeaderClassnames.pageHeaderMobileTitle, {
+        [pageHeaderClassnames.hasTitle]: Boolean(title) || isLoading,
+        [pageHeaderClassnames.hasBackButton]: Boolean(backButton),
+    }), [title, backButton, isLoading]);
+    return {
+        isShowMobileActions,
+        isLoading,
+        mobileTitleActions,
+        mobileClassnames,
+    };
 };

package/node/components/PageLayout/PageHeader/PageHeader.js

@@ -11,7 +11,7 @@ const Title_1 = require("./Title");
 const useLogic_1 = require("./useLogic");
 const PageHeader = (props) => {
     const { title, description, subheader, breadcrumbs, actions, backButton, className, } = props;
-    const { isLoading, mobileTitleActions, isShowMobileActions } = (0, useLogic_1.useLogic)(props);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(styles_1.MobileTitleWrapper, { "$hasBackButton": Boolean(backButton), className: (0, utils_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderMobileTitle), children: [(0, jsx_runtime_1.jsx)(Title_1.Title, { backButton: backButton, title: title, isLoading: isLoading }), mobileTitleActions && mobileTitleActions] }), (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: className, children: (0, jsx_runtime_1.jsx)(HeaderContent_1.HeaderContent, { breadcrumbs: breadcrumbs, backButton: backButton, title: title, description: description, actions: actions, subheader: subheader, isLoading: isLoading }) }), isShowMobileActions && ((0, jsx_runtime_1.jsx)(MobilePageActions_1.MobilePageActions, Object.assign({ className: (0, utils_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderActions), isLoading: isLoading }, actions)))] }));
+    const { isLoading, mobileTitleActions, isShowMobileActions, mobileClassnames, } = (0, useLogic_1.useLogic)(props);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(styles_1.MobileTitleWrapper, { className: mobileClassnames, children: [(0, jsx_runtime_1.jsx)(Title_1.Title, { backButton: backButton, title: title, isLoading: isLoading }), mobileTitleActions && mobileTitleActions] }), (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: className, children: (0, jsx_runtime_1.jsx)(HeaderContent_1.HeaderContent, { breadcrumbs: breadcrumbs, backButton: backButton, title: title, description: description, actions: actions, subheader: subheader, isLoading: isLoading }) }), isShowMobileActions && ((0, jsx_runtime_1.jsx)(MobilePageActions_1.MobilePageActions, Object.assign({ className: (0, utils_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderActions), isLoading: isLoading }, actions)))] }));
 };
 exports.PageHeader = PageHeader;

package/node/components/PageLayout/PageHeader/constants.d.ts

@@ -1,5 +1,7 @@
 export declare const pageHeaderClassnames: {
     pageHeaderMobileTitle: string;
     pageHeaderActions: string;
+    hasBackButton: string;
+    hasTitle: string;
 };
 export declare const PAGE_HEADER_HEIGHT_MOBILE = "48px";

package/node/components/PageLayout/PageHeader/constants.js

@@ -5,5 +5,7 @@ const utils_1 = require("../../utils");
 exports.pageHeaderClassnames = {
     pageHeaderMobileTitle: (0, utils_1.createUIKitClassname)('page-header__mobile-title'),
     pageHeaderActions: (0, utils_1.createUIKitClassname)('page-header__actions'),
+    hasBackButton: (0, utils_1.createUIKitClassname)('page-header_has-back-button'),
+    hasTitle: (0, utils_1.createUIKitClassname)('page-header_has-title'),
 };
 exports.PAGE_HEADER_HEIGHT_MOBILE = '48px';

package/node/components/PageLayout/PageHeader/styles.d.ts

@@ -6,6 +6,4 @@ export declare const Wrapper: import("@emotion/styled").StyledComponent<{
 export declare const MobileTitleWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-} & {
-    $hasBackButton: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/node/components/PageLayout/PageHeader/styles.js

@@ -22,24 +22,29 @@ exports.Wrapper = styles_1.styled.header `
     background-color: ${({ theme }) => theme.palette.background.default};
   }
 `;
-exports.MobileTitleWrapper = (0, styles_1.styled)('div', {
-    shouldForwardProp: (prop) => !['$hasBackButton'].includes(prop),
-}) `
+exports.MobileTitleWrapper = styles_1.styled.div `
   display: none;
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     position: sticky;
     z-index: ${({ theme }) => theme.zIndex.fab};
     top: 0;
-
-    display: flex;
+    
     align-items: center;
     order: 1;
-
-    height: ${constants_1.PAGE_HEADER_HEIGHT_MOBILE};
-    min-height: ${constants_1.PAGE_HEADER_HEIGHT_MOBILE};
-    padding: ${({ theme, $hasBackButton }) => $hasBackButton ? theme.spacing(0, 4, 0, 1) : theme.spacing(4)};
-
+    
     background-color: ${({ theme }) => theme.palette.background.default};
+    
+    &.${constants_1.pageHeaderClassnames.hasTitle} {
+      display: flex;
+
+      height: ${constants_1.PAGE_HEADER_HEIGHT_MOBILE};
+      min-height: ${constants_1.PAGE_HEADER_HEIGHT_MOBILE};
+      padding: ${({ theme }) => theme.spacing(4)};
+    }
+
+    &.${constants_1.pageHeaderClassnames.hasBackButton} {
+      padding: ${({ theme }) => theme.spacing(0, 4, 0, 1)};
+    }
   }
 `;

package/node/components/PageLayout/PageHeader/useLogic/useLogic.d.ts

@@ -1,9 +1,10 @@
 import { type ElementType } from 'react';
 import type { PageHeaderProps } from '../types';
 type UseLogicParams<TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType, TBackButtonComponent extends ElementType = ElementType> = PageHeaderProps<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>;
-export declare const useLogic: <TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType, TBackButtonComponent extends ElementType = ElementType>({ shouldUpdateDocumentTitle, title, actions, htmlTitle, }: UseLogicParams<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>) => {
+export declare const useLogic: <TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType, TBackButtonComponent extends ElementType = ElementType>({ shouldUpdateDocumentTitle, title, actions, htmlTitle, backButton, }: UseLogicParams<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>) => {
     isShowMobileActions: boolean | undefined;
     isLoading: boolean | undefined;
     mobileTitleActions: import("react").ReactNode;
+    mobileClassnames: string;
 };
 export {};

package/node/components/PageLayout/PageHeader/useLogic/useLogic.js

@@ -2,13 +2,24 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
+const utils_1 = require("../../../utils");
 const PageContext_1 = require("../../PageContext");
+const constants_1 = require("../constants");
 const hooks_1 = require("../hooks");
-const useLogic = ({ shouldUpdateDocumentTitle, title, actions, htmlTitle, }) => {
+const useLogic = ({ shouldUpdateDocumentTitle, title, actions, htmlTitle, backButton, }) => {
     //Переопределение Html title на title из параметров
     (0, hooks_1.usePageTitle)({ shouldUpdateDocumentTitle, htmlTitle, title });
     const { mobileTitleActions, isLoading } = (0, react_1.useContext)(PageContext_1.PageContext);
     const isShowMobileActions = actions && !mobileTitleActions;
-    return { isShowMobileActions, isLoading, mobileTitleActions };
+    const mobileClassnames = (0, react_1.useMemo)(() => (0, utils_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderMobileTitle, {
+        [constants_1.pageHeaderClassnames.hasTitle]: Boolean(title) || isLoading,
+        [constants_1.pageHeaderClassnames.hasBackButton]: Boolean(backButton),
+    }), [title, backButton, isLoading]);
+    return {
+        isShowMobileActions,
+        isLoading,
+        mobileTitleActions,
+        mobileClassnames,
+    };
 };
 exports.useLogic = useLogic;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {