@astral/ui 4.48.0 → 4.49.0
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/components/PageHeader/HeaderContent/HeaderContent.js +1 -1
- package/components/PageHeader/HeaderContent/styles.js +2 -0
- package/components/PageHeader/PageHeader.js +16 -2
- package/components/PageHeader/constants.d.ts +3 -0
- package/components/PageHeader/constants.js +3 -0
- package/components/PageHeader/styles.js +8 -2
- package/components/PageHeader/useLogic/useLogic.d.ts +1 -2
- package/components/PageHeader/useLogic/useLogic.js +2 -10
- package/components/Stepper/index.d.ts +1 -0
- package/components/Stepper/index.js +1 -0
- package/components/Stepper/public.d.ts +1 -0
- package/components/Stepper/public.js +1 -0
- package/icons/StepFillMd/StepFillMd.d.ts +3 -0
- package/icons/StepFillMd/StepFillMd.js +3 -0
- package/icons/StepFillMd/index.d.ts +1 -0
- package/icons/StepFillMd/index.js +1 -0
- package/icons/StepFillMd/public.d.ts +1 -0
- package/icons/StepFillMd/public.js +1 -0
- package/icons/index.d.ts +1 -0
- package/icons/index.js +1 -0
- package/node/components/PageHeader/HeaderContent/HeaderContent.js +1 -1
- package/node/components/PageHeader/HeaderContent/styles.js +2 -0
- package/node/components/PageHeader/PageHeader.js +16 -2
- package/node/components/PageHeader/constants.d.ts +3 -0
- package/node/components/PageHeader/constants.js +3 -0
- package/node/components/PageHeader/styles.js +8 -2
- package/node/components/PageHeader/useLogic/useLogic.d.ts +1 -2
- package/node/components/PageHeader/useLogic/useLogic.js +1 -9
- package/node/components/Stepper/index.d.ts +1 -0
- package/node/components/Stepper/index.js +3 -0
- package/node/components/Stepper/public.d.ts +1 -0
- package/node/components/Stepper/public.js +3 -0
- package/node/icons/StepFillMd/StepFillMd.d.ts +3 -0
- package/node/icons/StepFillMd/StepFillMd.js +7 -0
- package/node/icons/StepFillMd/index.d.ts +1 -0
- package/node/icons/StepFillMd/index.js +5 -0
- package/node/icons/StepFillMd/public.d.ts +1 -0
- package/node/icons/StepFillMd/public.js +5 -0
- package/node/icons/index.d.ts +1 -0
- package/node/icons/index.js +8 -6
- package/package.json +1 -1
|
@@ -14,5 +14,5 @@ export const HeaderContent = ({ backButton, description, subheader, breadcrumbs,
|
|
|
14
14
|
}
|
|
15
15
|
return (_jsx(BreadcrumbsWrapper, { children: Array.isArray(breadcrumbs) ? (_jsx(Breadcrumbs, { children: breadcrumbs })) : (breadcrumbs) }));
|
|
16
16
|
};
|
|
17
|
-
return (_jsxs(_Fragment, { children: [renderBreadcrumbs(), _jsx(DesktopTitleWrapper, { children: _jsx(Title, { backButton: backButton, title: title, isLoading: isLoading, hasDescription: Boolean(description), hasBreadcrumbs: Boolean(breadcrumbs) }) }), _jsx(Description, { description: description, isLoading: isLoading }), actions && (_jsx(PageActions, { className: classNames(pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, size: "medium", withCollapseOnLaptop: Boolean(filters), ...actions })), filters && (_jsx(FormFiltersProvider, { filtersClassName: pageHeaderClassnames.filters, quickFiltersClassName: pageHeaderClassnames.quickFilters, children: filters })), subheader && _jsx(PageSubheader, { children: subheader })] }));
|
|
17
|
+
return (_jsxs(_Fragment, { children: [renderBreadcrumbs(), _jsx(DesktopTitleWrapper, { children: _jsx(Title, { backButton: backButton, title: title, isLoading: isLoading, hasDescription: Boolean(description), hasBreadcrumbs: Boolean(breadcrumbs) }) }), _jsx(Description, { description: description, isLoading: isLoading }), actions && (_jsx(PageActions, { className: classNames(pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, size: "medium", withCollapseOnLaptop: Boolean(filters), ...actions })), filters && (_jsx(FormFiltersProvider, { filtersClassName: pageHeaderClassnames.filters, quickFiltersClassName: pageHeaderClassnames.quickFilters, children: filters })), subheader && (_jsx(PageSubheader, { className: pageHeaderClassnames.subheader, children: subheader }))] }));
|
|
18
18
|
};
|
|
@@ -17,6 +17,8 @@ export const PageSubheader = styled.div `
|
|
|
17
17
|
|
|
18
18
|
${({ theme }) => theme.breakpoints.down('sm')} {
|
|
19
19
|
padding: ${({ theme }) => theme.spacing(0, 4, 4, 4)};
|
|
20
|
+
|
|
21
|
+
border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
|
|
20
22
|
}
|
|
21
23
|
`;
|
|
22
24
|
export const DesktopTitleWrapper = styled.div `
|
|
@@ -1,13 +1,27 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { classNames } from '../utils/classNames';
|
|
3
|
+
import { cva } from '../utils/cva';
|
|
3
4
|
import { pageHeaderClassnames } from './constants';
|
|
4
5
|
import { HeaderContent } from './HeaderContent';
|
|
5
6
|
import { MobilePageActions } from './MobilePageActions';
|
|
6
7
|
import { MobileTitleWrapper, Wrapper } from './styles';
|
|
7
8
|
import { Title } from './Title';
|
|
8
9
|
import { useLogic } from './useLogic';
|
|
10
|
+
const mobilePageHeader = cva(pageHeaderClassnames.pageHeaderMobileTitle, {
|
|
11
|
+
variants: {
|
|
12
|
+
hasTitle: {
|
|
13
|
+
true: pageHeaderClassnames.hasTitle,
|
|
14
|
+
},
|
|
15
|
+
hasBackButton: {
|
|
16
|
+
true: pageHeaderClassnames.hasBackButton,
|
|
17
|
+
},
|
|
18
|
+
},
|
|
19
|
+
});
|
|
9
20
|
export const PageHeader = (props) => {
|
|
10
21
|
const { title, description, subheader, breadcrumbs, actions, backButton, className, filters, } = props;
|
|
11
|
-
const { isLoading, mobileTitleActions, isShowMobileActions
|
|
12
|
-
return (_jsxs(_Fragment, { children: [_jsxs(MobileTitleWrapper, { className:
|
|
22
|
+
const { isLoading, mobileTitleActions, isShowMobileActions } = useLogic(props);
|
|
23
|
+
return (_jsxs(_Fragment, { children: [_jsxs(MobileTitleWrapper, { className: mobilePageHeader({
|
|
24
|
+
hasTitle: Boolean(title) || isLoading,
|
|
25
|
+
hasBackButton: Boolean(backButton),
|
|
26
|
+
}), children: [_jsx(Title, { backButton: backButton, title: title, isLoading: isLoading }), mobileTitleActions && mobileTitleActions] }), _jsx(Wrapper, { className: classNames(pageHeaderClassnames.root, className), children: _jsx(HeaderContent, { breadcrumbs: breadcrumbs, backButton: backButton, title: title, description: description, actions: actions, subheader: subheader, filters: filters, isLoading: isLoading }) }), isShowMobileActions && (_jsx(MobilePageActions, { className: classNames(pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, ...actions }))] }));
|
|
13
27
|
};
|
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
export declare const pageHeaderClassnames: {
|
|
2
|
+
root: string;
|
|
2
3
|
pageHeaderMobileTitle: string;
|
|
3
4
|
pageHeaderActions: string;
|
|
4
5
|
hasBackButton: string;
|
|
5
6
|
hasTitle: string;
|
|
6
7
|
filters: string;
|
|
8
|
+
subheader: string;
|
|
7
9
|
quickFilters: string;
|
|
8
10
|
hasFilters: string;
|
|
11
|
+
hasSubheader: string;
|
|
9
12
|
};
|
|
10
13
|
export declare const PAGE_HEADER_HEIGHT_MOBILE = "48px";
|
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
import { createUIKitClassname } from '../utils/createUIKitClassname';
|
|
2
2
|
export const pageHeaderClassnames = {
|
|
3
|
+
root: createUIKitClassname('page-header'),
|
|
3
4
|
pageHeaderMobileTitle: createUIKitClassname('page-header__mobile-title'),
|
|
4
5
|
pageHeaderActions: createUIKitClassname('page-header__actions'),
|
|
5
6
|
hasBackButton: createUIKitClassname('page-header_has-back-button'),
|
|
6
7
|
hasTitle: createUIKitClassname('page-header_has-title'),
|
|
7
8
|
filters: createUIKitClassname('page-header__filters'),
|
|
9
|
+
subheader: createUIKitClassname('page-header__subheader'),
|
|
8
10
|
quickFilters: createUIKitClassname('page-header__quick-filters'),
|
|
9
11
|
hasFilters: createUIKitClassname('page-header_has-filters'),
|
|
12
|
+
hasSubheader: createUIKitClassname('page-header_has-subheader'),
|
|
10
13
|
};
|
|
11
14
|
export const PAGE_HEADER_HEIGHT_MOBILE = '48px';
|
|
@@ -69,10 +69,16 @@ export const MobileTitleWrapper = styled.div `
|
|
|
69
69
|
|
|
70
70
|
background-color: ${({ theme }) => theme.palette.background.default};
|
|
71
71
|
|
|
72
|
-
|
|
72
|
+
/* Причина игнора: прогрессивное улучшение */
|
|
73
|
+
/* stylelint-disable plugin/no-unsupported-browser-features */
|
|
74
|
+
&:not(:has(+ .${pageHeaderClassnames.root} :is(
|
|
75
|
+
.${pageHeaderClassnames.filters},
|
|
76
|
+
.${pageHeaderClassnames.subheader}
|
|
77
|
+
))) {
|
|
73
78
|
border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
|
|
74
79
|
}
|
|
75
|
-
|
|
80
|
+
/* stylelint-enable plugin/no-unsupported-browser-features */
|
|
81
|
+
|
|
76
82
|
&.${pageHeaderClassnames.hasTitle} {
|
|
77
83
|
display: flex;
|
|
78
84
|
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import { type ElementType } from 'react';
|
|
2
2
|
import type { PageHeaderProps } from '../types';
|
|
3
3
|
type UseLogicParams<TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType, TBackButtonComponent extends ElementType = ElementType> = PageHeaderProps<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>;
|
|
4
|
-
export declare const useLogic: <TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType, TBackButtonComponent extends ElementType = ElementType>({ shouldUpdateDocumentTitle, title, actions, htmlTitle,
|
|
4
|
+
export declare const useLogic: <TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType, TBackButtonComponent extends ElementType = ElementType>({ shouldUpdateDocumentTitle, title, actions, htmlTitle, }: UseLogicParams<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>) => {
|
|
5
5
|
isShowMobileActions: boolean | undefined;
|
|
6
6
|
isLoading: boolean | undefined;
|
|
7
7
|
mobileTitleActions: import("react").ReactNode;
|
|
8
|
-
mobileClassnames: string;
|
|
9
8
|
};
|
|
10
9
|
export {};
|
|
@@ -1,22 +1,14 @@
|
|
|
1
|
-
import { useContext
|
|
1
|
+
import { useContext } from 'react';
|
|
2
2
|
import { PageContext } from '../../PageContext';
|
|
3
|
-
import { classNames } from '../../utils/classNames';
|
|
4
|
-
import { pageHeaderClassnames } from '../constants';
|
|
5
3
|
import { usePageTitle } from '../hooks/usePageTitle';
|
|
6
|
-
export const useLogic = ({ shouldUpdateDocumentTitle, title, actions, htmlTitle,
|
|
4
|
+
export const useLogic = ({ shouldUpdateDocumentTitle, title, actions, htmlTitle, }) => {
|
|
7
5
|
//Переопределение Html title на title из параметров
|
|
8
6
|
usePageTitle({ shouldUpdateDocumentTitle, htmlTitle, title });
|
|
9
7
|
const { mobileTitleActions, isLoading } = useContext(PageContext);
|
|
10
8
|
const isShowMobileActions = actions && !mobileTitleActions;
|
|
11
|
-
const mobileClassnames = useMemo(() => classNames(pageHeaderClassnames.pageHeaderMobileTitle, {
|
|
12
|
-
[pageHeaderClassnames.hasTitle]: Boolean(title) || isLoading,
|
|
13
|
-
[pageHeaderClassnames.hasBackButton]: Boolean(backButton),
|
|
14
|
-
[pageHeaderClassnames.hasFilters]: Boolean(filters),
|
|
15
|
-
}), [title, backButton, isLoading]);
|
|
16
9
|
return {
|
|
17
10
|
isShowMobileActions,
|
|
18
11
|
isLoading,
|
|
19
12
|
mobileTitleActions,
|
|
20
|
-
mobileClassnames,
|
|
21
13
|
};
|
|
22
14
|
};
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { SvgIcon } from '../../components/SvgIcon';
|
|
3
|
+
export const StepFillMd = ({ ...props }) => (_jsx(SvgIcon, { ...props, children: _jsx("path", { d: "M16 2C19.3137 2 22 4.68629 22 8V16C22 19.3137 19.3137 22 16 22H8C4.68629 22 2 19.3137 2 16V8C2 4.68629 4.68629 2 8 2H16Z" }) }));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { StepFillMd } from './StepFillMd';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { StepFillMd } from './StepFillMd';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { StepFillMd } from './StepFillMd';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { StepFillMd } from './StepFillMd';
|
package/icons/index.d.ts
CHANGED
|
@@ -30,6 +30,7 @@ export { SentFillMd } from './SentFillMd';
|
|
|
30
30
|
export { SettingsFillMd } from './SettingsFillMd';
|
|
31
31
|
export { StepDefaultFillMd } from './StepDefaultFillMd';
|
|
32
32
|
export { StepErrorFillMd } from './StepErrorFillMd';
|
|
33
|
+
export { StepFillMd } from './StepFillMd';
|
|
33
34
|
export { StepSuccessFillMd } from './StepSuccessFillMd';
|
|
34
35
|
export { SuccessFillMd } from './SuccessFillMd';
|
|
35
36
|
export { SupportFillMd } from './SupportFillMd';
|
package/icons/index.js
CHANGED
|
@@ -30,6 +30,7 @@ export { SentFillMd } from './SentFillMd';
|
|
|
30
30
|
export { SettingsFillMd } from './SettingsFillMd';
|
|
31
31
|
export { StepDefaultFillMd } from './StepDefaultFillMd';
|
|
32
32
|
export { StepErrorFillMd } from './StepErrorFillMd';
|
|
33
|
+
export { StepFillMd } from './StepFillMd';
|
|
33
34
|
export { StepSuccessFillMd } from './StepSuccessFillMd';
|
|
34
35
|
export { SuccessFillMd } from './SuccessFillMd';
|
|
35
36
|
export { SupportFillMd } from './SupportFillMd';
|
|
@@ -17,6 +17,6 @@ const HeaderContent = ({ backButton, description, subheader, breadcrumbs, action
|
|
|
17
17
|
}
|
|
18
18
|
return ((0, jsx_runtime_1.jsx)(styles_1.BreadcrumbsWrapper, { children: Array.isArray(breadcrumbs) ? ((0, jsx_runtime_1.jsx)(Breadcrumbs_1.Breadcrumbs, { children: breadcrumbs })) : (breadcrumbs) }));
|
|
19
19
|
};
|
|
20
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderBreadcrumbs(), (0, jsx_runtime_1.jsx)(styles_1.DesktopTitleWrapper, { children: (0, jsx_runtime_1.jsx)(Title_1.Title, { backButton: backButton, title: title, isLoading: isLoading, hasDescription: Boolean(description), hasBreadcrumbs: Boolean(breadcrumbs) }) }), (0, jsx_runtime_1.jsx)(Description_1.Description, { description: description, isLoading: isLoading }), actions && ((0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { className: (0, classNames_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, size: "medium", withCollapseOnLaptop: Boolean(filters), ...actions })), filters && ((0, jsx_runtime_1.jsx)(FormFiltersProvider_1.FormFiltersProvider, { filtersClassName: constants_1.pageHeaderClassnames.filters, quickFiltersClassName: constants_1.pageHeaderClassnames.quickFilters, children: filters })), subheader && (0, jsx_runtime_1.jsx)(styles_1.PageSubheader, { children: subheader })] }));
|
|
20
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderBreadcrumbs(), (0, jsx_runtime_1.jsx)(styles_1.DesktopTitleWrapper, { children: (0, jsx_runtime_1.jsx)(Title_1.Title, { backButton: backButton, title: title, isLoading: isLoading, hasDescription: Boolean(description), hasBreadcrumbs: Boolean(breadcrumbs) }) }), (0, jsx_runtime_1.jsx)(Description_1.Description, { description: description, isLoading: isLoading }), actions && ((0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { className: (0, classNames_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, size: "medium", withCollapseOnLaptop: Boolean(filters), ...actions })), filters && ((0, jsx_runtime_1.jsx)(FormFiltersProvider_1.FormFiltersProvider, { filtersClassName: constants_1.pageHeaderClassnames.filters, quickFiltersClassName: constants_1.pageHeaderClassnames.quickFilters, children: filters })), subheader && ((0, jsx_runtime_1.jsx)(styles_1.PageSubheader, { className: constants_1.pageHeaderClassnames.subheader, children: subheader }))] }));
|
|
21
21
|
};
|
|
22
22
|
exports.HeaderContent = HeaderContent;
|
|
@@ -20,6 +20,8 @@ exports.PageSubheader = styled_1.styled.div `
|
|
|
20
20
|
|
|
21
21
|
${({ theme }) => theme.breakpoints.down('sm')} {
|
|
22
22
|
padding: ${({ theme }) => theme.spacing(0, 4, 4, 4)};
|
|
23
|
+
|
|
24
|
+
border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
|
|
23
25
|
}
|
|
24
26
|
`;
|
|
25
27
|
exports.DesktopTitleWrapper = styled_1.styled.div `
|
|
@@ -3,15 +3,29 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.PageHeader = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const classNames_1 = require("../utils/classNames");
|
|
6
|
+
const cva_1 = require("../utils/cva");
|
|
6
7
|
const constants_1 = require("./constants");
|
|
7
8
|
const HeaderContent_1 = require("./HeaderContent");
|
|
8
9
|
const MobilePageActions_1 = require("./MobilePageActions");
|
|
9
10
|
const styles_1 = require("./styles");
|
|
10
11
|
const Title_1 = require("./Title");
|
|
11
12
|
const useLogic_1 = require("./useLogic");
|
|
13
|
+
const mobilePageHeader = (0, cva_1.cva)(constants_1.pageHeaderClassnames.pageHeaderMobileTitle, {
|
|
14
|
+
variants: {
|
|
15
|
+
hasTitle: {
|
|
16
|
+
true: constants_1.pageHeaderClassnames.hasTitle,
|
|
17
|
+
},
|
|
18
|
+
hasBackButton: {
|
|
19
|
+
true: constants_1.pageHeaderClassnames.hasBackButton,
|
|
20
|
+
},
|
|
21
|
+
},
|
|
22
|
+
});
|
|
12
23
|
const PageHeader = (props) => {
|
|
13
24
|
const { title, description, subheader, breadcrumbs, actions, backButton, className, filters, } = props;
|
|
14
|
-
const { isLoading, mobileTitleActions, isShowMobileActions
|
|
15
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(styles_1.MobileTitleWrapper, { className:
|
|
25
|
+
const { isLoading, mobileTitleActions, isShowMobileActions } = (0, useLogic_1.useLogic)(props);
|
|
26
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(styles_1.MobileTitleWrapper, { className: mobilePageHeader({
|
|
27
|
+
hasTitle: Boolean(title) || isLoading,
|
|
28
|
+
hasBackButton: Boolean(backButton),
|
|
29
|
+
}), 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: (0, classNames_1.classNames)(constants_1.pageHeaderClassnames.root, className), children: (0, jsx_runtime_1.jsx)(HeaderContent_1.HeaderContent, { breadcrumbs: breadcrumbs, backButton: backButton, title: title, description: description, actions: actions, subheader: subheader, filters: filters, isLoading: isLoading }) }), isShowMobileActions && ((0, jsx_runtime_1.jsx)(MobilePageActions_1.MobilePageActions, { className: (0, classNames_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, ...actions }))] }));
|
|
16
30
|
};
|
|
17
31
|
exports.PageHeader = PageHeader;
|
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
export declare const pageHeaderClassnames: {
|
|
2
|
+
root: string;
|
|
2
3
|
pageHeaderMobileTitle: string;
|
|
3
4
|
pageHeaderActions: string;
|
|
4
5
|
hasBackButton: string;
|
|
5
6
|
hasTitle: string;
|
|
6
7
|
filters: string;
|
|
8
|
+
subheader: string;
|
|
7
9
|
quickFilters: string;
|
|
8
10
|
hasFilters: string;
|
|
11
|
+
hasSubheader: string;
|
|
9
12
|
};
|
|
10
13
|
export declare const PAGE_HEADER_HEIGHT_MOBILE = "48px";
|
|
@@ -3,12 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.PAGE_HEADER_HEIGHT_MOBILE = exports.pageHeaderClassnames = void 0;
|
|
4
4
|
const createUIKitClassname_1 = require("../utils/createUIKitClassname");
|
|
5
5
|
exports.pageHeaderClassnames = {
|
|
6
|
+
root: (0, createUIKitClassname_1.createUIKitClassname)('page-header'),
|
|
6
7
|
pageHeaderMobileTitle: (0, createUIKitClassname_1.createUIKitClassname)('page-header__mobile-title'),
|
|
7
8
|
pageHeaderActions: (0, createUIKitClassname_1.createUIKitClassname)('page-header__actions'),
|
|
8
9
|
hasBackButton: (0, createUIKitClassname_1.createUIKitClassname)('page-header_has-back-button'),
|
|
9
10
|
hasTitle: (0, createUIKitClassname_1.createUIKitClassname)('page-header_has-title'),
|
|
10
11
|
filters: (0, createUIKitClassname_1.createUIKitClassname)('page-header__filters'),
|
|
12
|
+
subheader: (0, createUIKitClassname_1.createUIKitClassname)('page-header__subheader'),
|
|
11
13
|
quickFilters: (0, createUIKitClassname_1.createUIKitClassname)('page-header__quick-filters'),
|
|
12
14
|
hasFilters: (0, createUIKitClassname_1.createUIKitClassname)('page-header_has-filters'),
|
|
15
|
+
hasSubheader: (0, createUIKitClassname_1.createUIKitClassname)('page-header_has-subheader'),
|
|
13
16
|
};
|
|
14
17
|
exports.PAGE_HEADER_HEIGHT_MOBILE = '48px';
|
|
@@ -72,10 +72,16 @@ exports.MobileTitleWrapper = styled_1.styled.div `
|
|
|
72
72
|
|
|
73
73
|
background-color: ${({ theme }) => theme.palette.background.default};
|
|
74
74
|
|
|
75
|
-
|
|
75
|
+
/* Причина игнора: прогрессивное улучшение */
|
|
76
|
+
/* stylelint-disable plugin/no-unsupported-browser-features */
|
|
77
|
+
&:not(:has(+ .${constants_1.pageHeaderClassnames.root} :is(
|
|
78
|
+
.${constants_1.pageHeaderClassnames.filters},
|
|
79
|
+
.${constants_1.pageHeaderClassnames.subheader}
|
|
80
|
+
))) {
|
|
76
81
|
border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
|
|
77
82
|
}
|
|
78
|
-
|
|
83
|
+
/* stylelint-enable plugin/no-unsupported-browser-features */
|
|
84
|
+
|
|
79
85
|
&.${constants_1.pageHeaderClassnames.hasTitle} {
|
|
80
86
|
display: flex;
|
|
81
87
|
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import { type ElementType } from 'react';
|
|
2
2
|
import type { PageHeaderProps } from '../types';
|
|
3
3
|
type UseLogicParams<TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType, TBackButtonComponent extends ElementType = ElementType> = PageHeaderProps<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>;
|
|
4
|
-
export declare const useLogic: <TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType, TBackButtonComponent extends ElementType = ElementType>({ shouldUpdateDocumentTitle, title, actions, htmlTitle,
|
|
4
|
+
export declare const useLogic: <TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType, TBackButtonComponent extends ElementType = ElementType>({ shouldUpdateDocumentTitle, title, actions, htmlTitle, }: UseLogicParams<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>) => {
|
|
5
5
|
isShowMobileActions: boolean | undefined;
|
|
6
6
|
isLoading: boolean | undefined;
|
|
7
7
|
mobileTitleActions: import("react").ReactNode;
|
|
8
|
-
mobileClassnames: string;
|
|
9
8
|
};
|
|
10
9
|
export {};
|
|
@@ -3,24 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.useLogic = void 0;
|
|
4
4
|
const react_1 = require("react");
|
|
5
5
|
const PageContext_1 = require("../../PageContext");
|
|
6
|
-
const classNames_1 = require("../../utils/classNames");
|
|
7
|
-
const constants_1 = require("../constants");
|
|
8
6
|
const usePageTitle_1 = require("../hooks/usePageTitle");
|
|
9
|
-
const useLogic = ({ shouldUpdateDocumentTitle, title, actions, htmlTitle,
|
|
7
|
+
const useLogic = ({ shouldUpdateDocumentTitle, title, actions, htmlTitle, }) => {
|
|
10
8
|
//Переопределение Html title на title из параметров
|
|
11
9
|
(0, usePageTitle_1.usePageTitle)({ shouldUpdateDocumentTitle, htmlTitle, title });
|
|
12
10
|
const { mobileTitleActions, isLoading } = (0, react_1.useContext)(PageContext_1.PageContext);
|
|
13
11
|
const isShowMobileActions = actions && !mobileTitleActions;
|
|
14
|
-
const mobileClassnames = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderMobileTitle, {
|
|
15
|
-
[constants_1.pageHeaderClassnames.hasTitle]: Boolean(title) || isLoading,
|
|
16
|
-
[constants_1.pageHeaderClassnames.hasBackButton]: Boolean(backButton),
|
|
17
|
-
[constants_1.pageHeaderClassnames.hasFilters]: Boolean(filters),
|
|
18
|
-
}), [title, backButton, isLoading]);
|
|
19
12
|
return {
|
|
20
13
|
isShowMobileActions,
|
|
21
14
|
isLoading,
|
|
22
15
|
mobileTitleActions,
|
|
23
|
-
mobileClassnames,
|
|
24
16
|
};
|
|
25
17
|
};
|
|
26
18
|
exports.useLogic = useLogic;
|
|
@@ -14,9 +14,12 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
14
14
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
exports.stepperClassnames = void 0;
|
|
17
18
|
__exportStar(require("./Step"), exports);
|
|
18
19
|
__exportStar(require("./StepButton"), exports);
|
|
19
20
|
__exportStar(require("./StepConnector"), exports);
|
|
20
21
|
__exportStar(require("./StepContent"), exports);
|
|
21
22
|
__exportStar(require("./StepLabel"), exports);
|
|
22
23
|
__exportStar(require("./Stepper"), exports);
|
|
24
|
+
var constants_1 = require("./constants");
|
|
25
|
+
Object.defineProperty(exports, "stepperClassnames", { enumerable: true, get: function () { return constants_1.stepperClassnames; } });
|
|
@@ -14,6 +14,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
14
14
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
exports.stepperClassnames = void 0;
|
|
18
|
+
var constants_1 = require("./constants");
|
|
19
|
+
Object.defineProperty(exports, "stepperClassnames", { enumerable: true, get: function () { return constants_1.stepperClassnames; } });
|
|
17
20
|
__exportStar(require("./Step"), exports);
|
|
18
21
|
__exportStar(require("./StepButton"), exports);
|
|
19
22
|
__exportStar(require("./StepConnector"), exports);
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.StepFillMd = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const SvgIcon_1 = require("../../components/SvgIcon");
|
|
6
|
+
const StepFillMd = ({ ...props }) => ((0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M16 2C19.3137 2 22 4.68629 22 8V16C22 19.3137 19.3137 22 16 22H8C4.68629 22 2 19.3137 2 16V8C2 4.68629 4.68629 2 8 2H16Z" }) }));
|
|
7
|
+
exports.StepFillMd = StepFillMd;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { StepFillMd } from './StepFillMd';
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.StepFillMd = void 0;
|
|
4
|
+
var StepFillMd_1 = require("./StepFillMd");
|
|
5
|
+
Object.defineProperty(exports, "StepFillMd", { enumerable: true, get: function () { return StepFillMd_1.StepFillMd; } });
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { StepFillMd } from './StepFillMd';
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.StepFillMd = void 0;
|
|
4
|
+
var StepFillMd_1 = require("./StepFillMd");
|
|
5
|
+
Object.defineProperty(exports, "StepFillMd", { enumerable: true, get: function () { return StepFillMd_1.StepFillMd; } });
|
package/node/icons/index.d.ts
CHANGED
|
@@ -30,6 +30,7 @@ export { SentFillMd } from './SentFillMd';
|
|
|
30
30
|
export { SettingsFillMd } from './SettingsFillMd';
|
|
31
31
|
export { StepDefaultFillMd } from './StepDefaultFillMd';
|
|
32
32
|
export { StepErrorFillMd } from './StepErrorFillMd';
|
|
33
|
+
export { StepFillMd } from './StepFillMd';
|
|
33
34
|
export { StepSuccessFillMd } from './StepSuccessFillMd';
|
|
34
35
|
export { SuccessFillMd } from './SuccessFillMd';
|
|
35
36
|
export { SupportFillMd } from './SupportFillMd';
|
package/node/icons/index.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.
|
|
4
|
-
exports.
|
|
5
|
-
exports.
|
|
6
|
-
exports.
|
|
7
|
-
exports.
|
|
8
|
-
exports.TransferOutlineSm = exports.SuccessOutlineSm = exports.SortingOutlineSm = exports.SearchOutlineSm = exports.RouteOutlineSm = exports.RequestOutlineSm = exports.RefreshOutlineSm = exports.ProfileOutlineSm = exports.PageOutlineSm = exports.OpenLinkOutlineSm = exports.MessageOutlineSm = exports.LoaderOutlineSm = exports.LikeOutlineSm = exports.InfoOutlineSm = void 0;
|
|
3
|
+
exports.PhoneFillSm = exports.PauseFillSm = exports.MailFillSm = exports.LocationFillSm = exports.LikeFillSm = exports.InfoFillSm = exports.ErrorFillSm = exports.DislikeFillSm = exports.ClockFillSm = exports.CircleErrorFillSm = exports.ArrowUpFillSm = exports.ArrowDFillSm = exports.WebFillMd = exports.WarningFillMd = exports.SupportFillMd = exports.SuccessFillMd = exports.StepSuccessFillMd = exports.StepFillMd = exports.StepErrorFillMd = exports.StepDefaultFillMd = exports.SettingsFillMd = exports.SentFillMd = exports.SendFillMd = exports.SaveFillMd = exports.QuestionFillMd = exports.ProfileFillMd = exports.ProductsFillMd = exports.PlusFillMd = exports.PluginFillMd = exports.PhotoFillMd = exports.LikeFillMd = exports.KeyFillMd = exports.InfoFillMd = exports.FilterFillMd = exports.EyeFillMd = exports.ErrorFillMd = exports.EducationFillMd = exports.EditFillMd = exports.DocSuccessFillMd = exports.DislikeFillMd = exports.CopyMailFillMd = exports.CompanyPicFillMd = exports.ClockFillMd = exports.CircleErrorFillMd = exports.CalculatorFillMd = exports.BookmarkFillMd = exports.BellFillMd = exports.AutosaveLoaderFillMd = exports.AutosaveFillMd = exports.AutosaveErrorFillMd = void 0;
|
|
4
|
+
exports.BinOutlineMd = exports.BellOutlineMd = exports.BasketOutlineMd = exports.BankOutlineMd = exports.AutosaveOutlineMd = exports.AutosaveLoaderOutlineMd = exports.AutosaveErrorOutlineMd = exports.AttachmentOutlineMd = exports.ArrowUpOutlineMd = exports.ArrowROutlineMd = exports.ArrowLOutlineMd = exports.ArrowDwnOutlineMd = exports.ArrayPatternOutlineMd = exports.ArchiveOutlineMd = exports.AnalyticOutlineMd = exports.AllCheckOutlineMd = exports.AddWorkplaceOutlineMd = exports.AddUserOutlineMd = exports.AddOutlineMd = exports.AddDocumentOutlineMd = exports.AddArrayOutlineMd = exports.AIOutlineMd = exports.AIBotOutlineMd = exports.YoutubeMonochromeFillMd = exports.YoutubeFillMd = exports.VkMonochromeFillMd = exports.VkFillMd = exports.TelegramMonochromeFillMd = exports.TelegramIconMonochromeFillMd = exports.TelegramFillMd = exports.RutokenFillMd = exports.OkMonochromeFillMd = exports.OkFillMd = exports.JacartaFillMd = exports.GoogleMonochromeFillMd = exports.GoogleFillMd = exports.FacebookFillMd = exports.CryptoProFillMd = exports.WarningFillSm = exports.UpToDateFillSm = exports.SuccessFillSm = exports.StarFillSm = exports.SortUpFillSm = exports.SortFillSm = exports.SortDownFillSm = exports.SentFillSm = exports.RoundFillSm = exports.RectangleFillSm = exports.PlayFillSm = exports.PitFillSm = void 0;
|
|
5
|
+
exports.DragOutlineMd = exports.DraftOutlineMd = exports.DownloadVOutlineMd = exports.DownloadOutlineMd = exports.DownOutlineMd = exports.DoublePreviousOutlineMd = exports.DoubleNextOutlineMd = exports.DotsVOutlineMd = exports.DotsOutlineMd = exports.DocumentsOutlineMd = exports.DocumentOutlineMd = exports.DocsArrayOutlineMd = exports.DocSignedOutlineMd = exports.DocRejectOutlineMd = exports.DocPatternOutlineMd = exports.DocOutlineMd = exports.DocNoSignatureOutlineMd = exports.DocIncomingOutlineMd = exports.DivisionsOutlineMd = exports.DislikeOutlineMd = exports.DialogOutlineMd = exports.DelegateOutlineMd = exports.CrossOutlineMd = exports.CreditCardOutlineMd = exports.CopyOutlineMd = exports.ContractorsOutlineMd = exports.CompanyOutlineMd = exports.CompanyAddOutlineMd = exports.ClockwiseOutlineMd = exports.ClockOutlineMd = exports.ChevronUpOutlineMd = exports.ChevronROutlineMd = exports.ChevronLOutlineMd = exports.ChevronDOutlineMd = exports.CheckOutlineMd = exports.CheckListOutlineMd = exports.CertOutlineMd = exports.CertGivenOutlineMd = exports.CertAddOutlineMd = exports.CassOutlineMd = exports.CashReceiptOutlineMd = exports.CaseOutlineMd = exports.CartOutlineMd = exports.CancelRouteOutlineMd = exports.CalendarOutlineMd = exports.BoxesOutlineMd = exports.BoxOutlineMd = exports.BookOutlineMd = exports.BlockOutlineMd = exports.BlockMessageOutlineMd = void 0;
|
|
6
|
+
exports.QuitOutlineMd = exports.QuestionOutlineMd = exports.QrOutlineMd = exports.ProxyOutlineMd = exports.ProfileOutlineMd = exports.PrintOutlineMd = exports.PreviousOutlineMd = exports.PinOutlineMd = exports.PhoneOutlineMd = exports.PeopleOutlineMd = exports.PageDotOutlineMd = exports.OutcomingDocumentOutlineMd = exports.OpenLinkOutlineMd = exports.NumberOutlineMd = exports.NextOutlineMd = exports.NewsOutlineMd = exports.MinusOutlineMd = exports.MinimizeOutlineMd = exports.MessageOutlineMd = exports.MenuOnOutlineMd = exports.MenuOffOutlineMd = exports.MegaphoneOutlineMd = exports.MedListOutlineMd = exports.MarkDocOutlineMd = exports.MailOutlineMd = exports.LogisticOutlineMd = exports.LockOutlineMd = exports.LoaderOutlineMd = exports.ListDataOutlineMd = exports.LinkOutlineMd = exports.LikeOutlineMd = exports.LightingOnOutlineMd = exports.LightingOffOutlineMd = exports.InfoOutlineMd = exports.InArchiveOutlineMd = exports.HomeOutlineMd = exports.HistoryOutlineMd = exports.GroupsOutlineMd = exports.GroupOutlineMd = exports.GoToFolderOutlineMd = exports.FullSizeOutlineMd = exports.FolderOpOutlineMd = exports.FolderClOutlineMd = exports.FilterOutlineMd = exports.Filter2OutlineMd = exports.EyeOutlineMd = exports.EyeCrossedOutlineMd = exports.ExportOutlineMd = exports.EditOutlineMd = exports.DuplicateOutlineMd = void 0;
|
|
7
|
+
exports.DownloadVOutlineSm = exports.DoubleCheckOutlineSm = exports.DotOutlineSm = exports.DocumentsOutlineSm = exports.DocumentOutlineSm = exports.DislikeOutlineSm = exports.CrossSmOutlineSm = exports.CrossOutlineSm = exports.CopyOutlineSm = exports.ClockOutlineSm = exports.CheckOutlineSm = exports.BlockOutlineSm = exports.ArrowUpOutlineSm = exports.ArrowROutlineSm = exports.ArrowLOutlineSm = exports.ArrowDwnOutlineSm = exports.AddSmOutlineSm = exports.AddOutlineSm = exports.UserCrossOutlineMd = exports.UserCheckOutlineMd = exports.UserArrowUpOutlineMd = exports.UserArrowDownOutlineMd = exports.UploadOutlineMd = exports.UpOutlineMd = exports.UnreadOutlineMd = exports.UnpinOutlineMd = exports.UnlockOutlineMd = exports.UnlinkOutlineMd = exports.UnGroupOutlineMd = exports.TreeOutlineMd = exports.TransferOutlineMd = exports.TagOutlineMd = exports.SupportOutlineMd = exports.StorageOutlineMd = exports.SortingVOutlineMd = exports.SortingOutlineMd = exports.Sorting2OutlineMd = exports.SortOutlineMd = exports.ShareOutlineMd = exports.SettingsOutlineMd = exports.SentMessageOutlineMd = exports.SendOutlineMd = exports.SearchOutlineMd = exports.SaveOutlineMd = exports.SaveCheckOutlineMd = exports.RouteOutlineMd = exports.RetryOutlineMd = exports.RequirementOutlineMd = exports.RefreshOutlineMd = exports.ReestablishOutlineMd = void 0;
|
|
8
|
+
exports.TransferOutlineSm = exports.SuccessOutlineSm = exports.SortingOutlineSm = exports.SearchOutlineSm = exports.RouteOutlineSm = exports.RequestOutlineSm = exports.RefreshOutlineSm = exports.ProfileOutlineSm = exports.PageOutlineSm = exports.OpenLinkOutlineSm = exports.MessageOutlineSm = exports.LoaderOutlineSm = exports.LikeOutlineSm = exports.InfoOutlineSm = exports.EditOutlineSm = void 0;
|
|
9
9
|
var AutosaveErrorFillMd_1 = require("./AutosaveErrorFillMd");
|
|
10
10
|
Object.defineProperty(exports, "AutosaveErrorFillMd", { enumerable: true, get: function () { return AutosaveErrorFillMd_1.AutosaveErrorFillMd; } });
|
|
11
11
|
var AutosaveFillMd_1 = require("./AutosaveFillMd");
|
|
@@ -70,6 +70,8 @@ var StepDefaultFillMd_1 = require("./StepDefaultFillMd");
|
|
|
70
70
|
Object.defineProperty(exports, "StepDefaultFillMd", { enumerable: true, get: function () { return StepDefaultFillMd_1.StepDefaultFillMd; } });
|
|
71
71
|
var StepErrorFillMd_1 = require("./StepErrorFillMd");
|
|
72
72
|
Object.defineProperty(exports, "StepErrorFillMd", { enumerable: true, get: function () { return StepErrorFillMd_1.StepErrorFillMd; } });
|
|
73
|
+
var StepFillMd_1 = require("./StepFillMd");
|
|
74
|
+
Object.defineProperty(exports, "StepFillMd", { enumerable: true, get: function () { return StepFillMd_1.StepFillMd; } });
|
|
73
75
|
var StepSuccessFillMd_1 = require("./StepSuccessFillMd");
|
|
74
76
|
Object.defineProperty(exports, "StepSuccessFillMd", { enumerable: true, get: function () { return StepSuccessFillMd_1.StepSuccessFillMd; } });
|
|
75
77
|
var SuccessFillMd_1 = require("./SuccessFillMd");
|