@astral/ui 4.72.0 → 4.73.1

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.
Files changed (150) hide show
  1. package/components/DashboardLayout/Header/styles.js +21 -1
  2. package/components/MenuOrganization/OrganizationButton/styles.js +3 -0
  3. package/components/PageAside/MobileAsideButton/MobileAsideButton.d.ts +6 -0
  4. package/components/PageAside/MobileAsideButton/MobileAsideButton.js +13 -0
  5. package/components/PageAside/MobileAsideButton/index.d.ts +1 -0
  6. package/components/PageAside/MobileAsideButton/index.js +1 -0
  7. package/components/PageAside/MobileAsideButton/styles.d.ts +22 -0
  8. package/components/PageAside/MobileAsideButton/styles.js +31 -0
  9. package/components/PageAside/PageAside.d.ts +2 -9
  10. package/components/PageAside/PageAside.js +21 -4
  11. package/components/PageAside/constants.d.ts +5 -0
  12. package/components/PageAside/constants.js +6 -0
  13. package/components/PageAside/hooks/index.d.ts +1 -0
  14. package/components/PageAside/hooks/index.js +1 -0
  15. package/components/PageAside/hooks/usePageAside/index.d.ts +1 -0
  16. package/components/PageAside/hooks/usePageAside/index.js +1 -0
  17. package/components/PageAside/hooks/usePageAside/usePageAside.d.ts +9 -0
  18. package/components/PageAside/hooks/usePageAside/usePageAside.js +17 -0
  19. package/components/PageAside/index.d.ts +4 -0
  20. package/components/PageAside/index.js +3 -0
  21. package/components/PageAside/public.d.ts +3 -1
  22. package/components/PageAside/public.js +1 -0
  23. package/components/PageAside/styles.d.ts +15 -0
  24. package/components/PageAside/styles.js +36 -7
  25. package/components/PageAside/types.d.ts +24 -0
  26. package/components/PageAside/types.js +1 -0
  27. package/components/PageAsideBlock/styles.js +2 -2
  28. package/components/PageAsideNavigation/PageAsideNavigation.d.ts +2 -0
  29. package/components/PageAsideNavigation/PageAsideNavigation.js +9 -0
  30. package/components/PageAsideNavigation/PageAsideNavigationItem/PageAsideNavigationItem.d.ts +18 -0
  31. package/components/PageAsideNavigation/PageAsideNavigationItem/PageAsideNavigationItem.js +18 -0
  32. package/components/PageAsideNavigation/PageAsideNavigationItem/constants.d.ts +4 -0
  33. package/components/PageAsideNavigation/PageAsideNavigationItem/constants.js +5 -0
  34. package/components/PageAsideNavigation/PageAsideNavigationItem/index.d.ts +3 -0
  35. package/components/PageAsideNavigation/PageAsideNavigationItem/index.js +2 -0
  36. package/components/PageAsideNavigation/PageAsideNavigationItem/styles.d.ts +9 -0
  37. package/components/PageAsideNavigation/PageAsideNavigationItem/styles.js +113 -0
  38. package/components/PageAsideNavigation/PageAsideNavigationItem/types.d.ts +26 -0
  39. package/components/PageAsideNavigation/PageAsideNavigationItem/types.js +1 -0
  40. package/components/PageAsideNavigation/constants.d.ts +3 -0
  41. package/components/PageAsideNavigation/constants.js +4 -0
  42. package/components/PageAsideNavigation/index.d.ts +4 -0
  43. package/components/PageAsideNavigation/index.js +3 -0
  44. package/components/PageAsideNavigation/public.d.ts +3 -0
  45. package/components/PageAsideNavigation/public.js +3 -0
  46. package/components/PageAsideNavigation/styles.d.ts +13 -0
  47. package/components/PageAsideNavigation/styles.js +48 -0
  48. package/components/PageAsideNavigation/types.d.ts +17 -0
  49. package/components/PageAsideNavigation/types.js +1 -0
  50. package/components/PageHeader/HeaderContent/styles.js +0 -2
  51. package/components/PageHeader/PageHeader.js +11 -1
  52. package/components/PageHeader/styles.js +7 -5
  53. package/components/PagePinnableAside/PagePinnableAside.d.ts +1 -1
  54. package/components/PagePinnableAside/PagePinnableAside.js +16 -4
  55. package/components/PagePinnableAside/constants.d.ts +2 -0
  56. package/components/PagePinnableAside/constants.js +2 -0
  57. package/components/PagePinnableAside/styles.js +8 -11
  58. package/components/PagePinnableAside/types.d.ts +17 -1
  59. package/components/PagePinnableAside/useLogic/useLogic.d.ts +4 -2
  60. package/components/PagePinnableAside/useLogic/useLogic.js +10 -2
  61. package/components/Tabs/Tabs.js +2 -2
  62. package/components/Tabs/hooks/index.d.ts +1 -1
  63. package/components/Tabs/hooks/index.js +1 -1
  64. package/components/useScrollToActiveElement/index.d.ts +1 -0
  65. package/components/useScrollToActiveElement/index.js +1 -0
  66. package/components/useScrollToActiveElement/useScrollToActiveElement.d.ts +9 -0
  67. package/components/useScrollToActiveElement/useScrollToActiveElement.js +29 -0
  68. package/node/components/DashboardLayout/Header/styles.js +21 -1
  69. package/node/components/MenuOrganization/OrganizationButton/styles.js +3 -0
  70. package/node/components/PageAside/MobileAsideButton/MobileAsideButton.d.ts +6 -0
  71. package/node/components/PageAside/MobileAsideButton/MobileAsideButton.js +17 -0
  72. package/node/components/PageAside/MobileAsideButton/index.d.ts +1 -0
  73. package/node/components/PageAside/MobileAsideButton/index.js +5 -0
  74. package/node/components/PageAside/MobileAsideButton/styles.d.ts +22 -0
  75. package/node/components/PageAside/MobileAsideButton/styles.js +34 -0
  76. package/node/components/PageAside/PageAside.d.ts +2 -9
  77. package/node/components/PageAside/PageAside.js +19 -2
  78. package/node/components/PageAside/constants.d.ts +5 -0
  79. package/node/components/PageAside/constants.js +7 -1
  80. package/node/components/PageAside/hooks/index.d.ts +1 -0
  81. package/node/components/{Tabs/hooks/useScrollToActiveTab → PageAside/hooks}/index.js +1 -1
  82. package/node/components/PageAside/hooks/usePageAside/index.d.ts +1 -0
  83. package/node/components/PageAside/hooks/usePageAside/index.js +17 -0
  84. package/node/components/PageAside/hooks/usePageAside/usePageAside.d.ts +9 -0
  85. package/node/components/PageAside/hooks/usePageAside/usePageAside.js +21 -0
  86. package/node/components/PageAside/index.d.ts +4 -0
  87. package/node/components/PageAside/index.js +7 -1
  88. package/node/components/PageAside/public.d.ts +3 -1
  89. package/node/components/PageAside/public.js +3 -1
  90. package/node/components/PageAside/styles.d.ts +15 -0
  91. package/node/components/PageAside/styles.js +38 -9
  92. package/node/components/PageAside/types.d.ts +24 -0
  93. package/node/components/PageAside/types.js +2 -0
  94. package/node/components/PageAsideBlock/styles.js +2 -2
  95. package/node/components/PageAsideNavigation/PageAsideNavigation.d.ts +2 -0
  96. package/node/components/PageAsideNavigation/PageAsideNavigation.js +13 -0
  97. package/node/components/PageAsideNavigation/PageAsideNavigationItem/PageAsideNavigationItem.d.ts +18 -0
  98. package/node/components/PageAsideNavigation/PageAsideNavigationItem/PageAsideNavigationItem.js +22 -0
  99. package/node/components/PageAsideNavigation/PageAsideNavigationItem/constants.d.ts +4 -0
  100. package/node/components/PageAsideNavigation/PageAsideNavigationItem/constants.js +8 -0
  101. package/node/components/PageAsideNavigation/PageAsideNavigationItem/index.d.ts +3 -0
  102. package/node/components/PageAsideNavigation/PageAsideNavigationItem/index.js +7 -0
  103. package/node/components/PageAsideNavigation/PageAsideNavigationItem/styles.d.ts +9 -0
  104. package/node/components/PageAsideNavigation/PageAsideNavigationItem/styles.js +116 -0
  105. package/node/components/PageAsideNavigation/PageAsideNavigationItem/types.d.ts +26 -0
  106. package/node/components/PageAsideNavigation/PageAsideNavigationItem/types.js +2 -0
  107. package/node/components/PageAsideNavigation/constants.d.ts +3 -0
  108. package/node/components/PageAsideNavigation/constants.js +7 -0
  109. package/node/components/PageAsideNavigation/index.d.ts +4 -0
  110. package/node/components/PageAsideNavigation/index.js +10 -0
  111. package/node/components/PageAsideNavigation/public.d.ts +3 -0
  112. package/node/components/PageAsideNavigation/public.js +10 -0
  113. package/node/components/PageAsideNavigation/styles.d.ts +13 -0
  114. package/node/components/PageAsideNavigation/styles.js +51 -0
  115. package/node/components/PageAsideNavigation/types.d.ts +17 -0
  116. package/node/components/PageAsideNavigation/types.js +2 -0
  117. package/node/components/PageHeader/HeaderContent/styles.js +0 -2
  118. package/node/components/PageHeader/PageHeader.js +11 -1
  119. package/node/components/PageHeader/styles.js +18 -16
  120. package/node/components/PagePinnableAside/PagePinnableAside.d.ts +1 -1
  121. package/node/components/PagePinnableAside/PagePinnableAside.js +16 -4
  122. package/node/components/PagePinnableAside/constants.d.ts +2 -0
  123. package/node/components/PagePinnableAside/constants.js +2 -0
  124. package/node/components/PagePinnableAside/styles.js +10 -13
  125. package/node/components/PagePinnableAside/types.d.ts +17 -1
  126. package/node/components/PagePinnableAside/useLogic/useLogic.d.ts +4 -2
  127. package/node/components/PagePinnableAside/useLogic/useLogic.js +10 -2
  128. package/node/components/Tabs/Tabs.js +2 -2
  129. package/node/components/Tabs/hooks/index.d.ts +1 -1
  130. package/node/components/Tabs/hooks/index.js +1 -1
  131. package/node/components/useScrollToActiveElement/index.d.ts +1 -0
  132. package/node/components/useScrollToActiveElement/index.js +17 -0
  133. package/node/components/useScrollToActiveElement/useScrollToActiveElement.d.ts +9 -0
  134. package/node/components/useScrollToActiveElement/useScrollToActiveElement.js +33 -0
  135. package/package.json +1 -1
  136. package/components/DashboardLayout/Sidebar/MenuSidebarButton/types.d.ts +0 -0
  137. package/components/DashboardLayout/Sidebar/MenuSidebarButton/types.js +0 -1
  138. package/components/DashboardLayout/Sidebar/Sidebar.d.ts +0 -0
  139. package/components/DashboardLayout/Sidebar/Sidebar.js +0 -1
  140. package/components/Tabs/hooks/useScrollToActiveTab/index.d.ts +0 -1
  141. package/components/Tabs/hooks/useScrollToActiveTab/index.js +0 -1
  142. package/components/Tabs/hooks/useScrollToActiveTab/useScrollToActiveTab.d.ts +0 -4
  143. package/components/Tabs/hooks/useScrollToActiveTab/useScrollToActiveTab.js +0 -24
  144. package/node/components/DashboardLayout/Sidebar/MenuSidebarButton/types.d.ts +0 -0
  145. package/node/components/DashboardLayout/Sidebar/MenuSidebarButton/types.js +0 -1
  146. package/node/components/DashboardLayout/Sidebar/Sidebar.d.ts +0 -0
  147. package/node/components/DashboardLayout/Sidebar/Sidebar.js +0 -1
  148. package/node/components/Tabs/hooks/useScrollToActiveTab/index.d.ts +0 -1
  149. package/node/components/Tabs/hooks/useScrollToActiveTab/useScrollToActiveTab.d.ts +0 -4
  150. package/node/components/Tabs/hooks/useScrollToActiveTab/useScrollToActiveTab.js +0 -28
@@ -0,0 +1,17 @@
1
+ import type { ReactNode } from 'react';
2
+ export type PageAsideNavigationProps = {
3
+ children?: ReactNode;
4
+ /**
5
+ * Название класса, применяется к корневому компоненту
6
+ */
7
+ className?: string;
8
+ /**
9
+ * Дополнительный контент для навигации
10
+ */
11
+ addonNavigation?: ReactNode;
12
+ /**
13
+ * Позиционирование дополнительного контента для навигации
14
+ * @default 'start'
15
+ */
16
+ addonNavigationPosition?: 'start' | 'end';
17
+ };
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
@@ -20,8 +20,6 @@ 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.components.border.default};
25
23
  }
26
24
  `;
27
25
  exports.DesktopTitleWrapper = styled_1.styled.div `
@@ -25,6 +25,12 @@ const rootCva = (0, cva_1.cva)(constants_1.pageHeaderClassnames.root, {
25
25
  hasActions: {
26
26
  true: constants_1.pageHeaderClassnames.hasActions,
27
27
  },
28
+ hasSubheader: {
29
+ true: constants_1.pageHeaderClassnames.hasSubheader,
30
+ },
31
+ hasFilters: {
32
+ true: constants_1.pageHeaderClassnames.hasFilters,
33
+ },
28
34
  },
29
35
  });
30
36
  const PageHeader = (props) => {
@@ -33,6 +39,10 @@ const PageHeader = (props) => {
33
39
  return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(styles_1.MobileTitleWrapper, { className: mobilePageHeaderCva({
34
40
  hasTitle: Boolean(title) || isLoading,
35
41
  hasBackButton: Boolean(backButton),
36
- }), 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)(rootCva({ hasActions: Boolean(actions) }), 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 }))] }));
42
+ }), 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)(rootCva({
43
+ hasActions: Boolean(actions),
44
+ hasSubheader: Boolean(subheader),
45
+ hasFilters: Boolean(filters),
46
+ }), 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 }))] }));
37
47
  };
38
48
  exports.PageHeader = PageHeader;
@@ -1,8 +1,9 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.MobileTitleWrapper = exports.Wrapper = void 0;
4
+ const constants_1 = require("../PageAside/constants");
4
5
  const styled_1 = require("../styled");
5
- const constants_1 = require("./constants");
6
+ const constants_2 = require("./constants");
6
7
  exports.Wrapper = styled_1.styled.header `
7
8
  display: grid;
8
9
  grid-column: 1 / -1;
@@ -16,7 +17,7 @@ exports.Wrapper = styled_1.styled.header `
16
17
  ${({ theme }) => theme.breakpoints.down('laptop')} {
17
18
  padding: ${({ theme }) => theme.spacing(0, 4)};
18
19
 
19
- &.${constants_1.pageHeaderClassnames.hasActions} {
20
+ &.${constants_2.pageHeaderClassnames.hasActions} {
20
21
  grid-template-columns: min-content 1fr auto auto;
21
22
  }
22
23
  }
@@ -24,7 +25,7 @@ exports.Wrapper = styled_1.styled.header `
24
25
  ${({ theme }) => theme.breakpoints.down('sm')} {
25
26
  position: sticky;
26
27
  z-index: ${({ theme }) => theme.zIndex.fab};
27
- top: ${constants_1.PAGE_HEADER_HEIGHT_MOBILE};
28
+ top: ${constants_2.PAGE_HEADER_HEIGHT_MOBILE};
28
29
 
29
30
  display: block;
30
31
 
@@ -32,9 +33,13 @@ exports.Wrapper = styled_1.styled.header `
32
33
  padding: unset;
33
34
 
34
35
  background-color: ${({ theme }) => theme.palette.background.default};
36
+
37
+ &.${constants_2.pageHeaderClassnames.hasSubheader}, &.${constants_2.pageHeaderClassnames.hasFilters} {
38
+ border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
39
+ }
35
40
  }
36
41
 
37
- .${constants_1.pageHeaderClassnames.filters} {
42
+ .${constants_2.pageHeaderClassnames.filters} {
38
43
  grid-column: 1 / -1;
39
44
  grid-row: 4;
40
45
 
@@ -42,13 +47,9 @@ exports.Wrapper = styled_1.styled.header `
42
47
  grid-column: 3;
43
48
  grid-row: 1 / -1;
44
49
  }
45
-
46
- ${({ theme }) => theme.breakpoints.down('sm')} {
47
- border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
48
- }
49
50
  }
50
51
 
51
- .${constants_1.pageHeaderClassnames.quickFilters} {
52
+ .${constants_2.pageHeaderClassnames.quickFilters} {
52
53
  grid-column: 1 / -1;
53
54
  grid-row: 5;
54
55
 
@@ -78,23 +79,24 @@ exports.MobileTitleWrapper = styled_1.styled.div `
78
79
 
79
80
  /* Причина игнора: прогрессивное улучшение */
80
81
  /* stylelint-disable plugin/no-unsupported-browser-features */
81
- &:not(:has(+ .${constants_1.pageHeaderClassnames.root} :is(
82
- .${constants_1.pageHeaderClassnames.filters},
83
- .${constants_1.pageHeaderClassnames.subheader}
82
+ &:not(:has(+ .${constants_2.pageHeaderClassnames.root} :is(
83
+ .${constants_2.pageHeaderClassnames.filters},
84
+ .${constants_2.pageHeaderClassnames.subheader},
85
+ .${constants_1.pageAsideClassnames.mobileNavigation}
84
86
  ))) {
85
87
  border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
86
88
  }
87
89
  /* stylelint-enable plugin/no-unsupported-browser-features */
88
90
 
89
- &.${constants_1.pageHeaderClassnames.hasTitle} {
91
+ &.${constants_2.pageHeaderClassnames.hasTitle} {
90
92
  display: flex;
91
93
 
92
- height: ${constants_1.PAGE_HEADER_HEIGHT_MOBILE};
93
- min-height: ${constants_1.PAGE_HEADER_HEIGHT_MOBILE};
94
+ height: ${constants_2.PAGE_HEADER_HEIGHT_MOBILE};
95
+ min-height: ${constants_2.PAGE_HEADER_HEIGHT_MOBILE};
94
96
  padding: ${({ theme }) => theme.spacing(4)};
95
97
  }
96
98
 
97
- &.${constants_1.pageHeaderClassnames.hasBackButton} {
99
+ &.${constants_2.pageHeaderClassnames.hasBackButton} {
98
100
  padding: ${({ theme }) => theme.spacing(0, 4, 0, 1)};
99
101
  }
100
102
  }
@@ -2,4 +2,4 @@ import type { PagePinnableAsideProps } from './types';
2
2
  /**
3
3
  * Открепляемый aside
4
4
  */
5
- export declare const PagePinnableAside: ({ children, className, ...restProps }: PagePinnableAsideProps) => import("react/jsx-runtime").JSX.Element;
5
+ export declare const PagePinnableAside: ({ header, children, className, navigation, ...restProps }: PagePinnableAsideProps) => import("react/jsx-runtime").JSX.Element;
@@ -2,17 +2,29 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.PagePinnableAside = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const react_dom_1 = require("react-dom");
5
6
  const MenuOnOutlineMd_1 = require("../../icons/MenuOnOutlineMd");
7
+ const PageAside_1 = require("../PageAside");
8
+ const styles_1 = require("../PageAside/styles");
6
9
  const PinButton_1 = require("../PinButton");
7
10
  const classNames_1 = require("../utils/classNames");
11
+ const cva_1 = require("../utils/cva");
8
12
  const constants_1 = require("./constants");
9
- const styles_1 = require("./styles");
13
+ const styles_2 = require("./styles");
10
14
  const useLogic_1 = require("./useLogic");
15
+ const asideCva = (0, cva_1.cva)(constants_1.pinnableAsideClassnames.root, {
16
+ variants: {
17
+ withHeader: {
18
+ true: constants_1.pinnableAsideClassnames.withHeader,
19
+ },
20
+ },
21
+ });
11
22
  /**
12
23
  * Открепляемый aside
13
24
  */
14
- const PagePinnableAside = ({ children, className, ...restProps }) => {
15
- const { isPinned, togglePin } = (0, useLogic_1.useLogic)(restProps);
16
- return ((0, jsx_runtime_1.jsxs)(styles_1.Aside, { "$isPinned": isPinned, children: [(0, jsx_runtime_1.jsx)(styles_1.Dummy, { "$isPinned": isPinned, children: (0, jsx_runtime_1.jsx)(MenuOnOutlineMd_1.MenuOnOutlineMd, {}) }), (0, jsx_runtime_1.jsxs)(styles_1.Content, { "$isPinned": isPinned, className: (0, classNames_1.classNames)(className, constants_1.pinnableAsideClassnames.content), children: [(0, jsx_runtime_1.jsx)(styles_1.ChildrenWrapper, { children: children }), (0, jsx_runtime_1.jsx)(styles_1.Footer, { children: (0, jsx_runtime_1.jsx)(PinButton_1.PinButton, { isPinned: isPinned, isUseCollapse: false, onClick: togglePin }) })] })] }));
25
+ const PagePinnableAside = ({ header, children, className, navigation, ...restProps }) => {
26
+ const { isPinned, togglePin, pageHeaderContainer, isMobileNavigationVisible, } = (0, useLogic_1.useLogic)({ navigation, ...restProps });
27
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isMobileNavigationVisible &&
28
+ (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(styles_1.MobileAsideNavigation, { className: PageAside_1.pageAsideClassnames.mobileNavigation, children: navigation }), pageHeaderContainer), header && (0, jsx_runtime_1.jsx)(styles_1.MobileAsideHeader, { children: header }), (0, jsx_runtime_1.jsx)(PageAside_1.MobileAsideButton, { content: children }), (0, jsx_runtime_1.jsxs)(styles_2.Aside, { "$isPinned": isPinned, className: asideCva({ withHeader: Boolean(header) }), children: [(0, jsx_runtime_1.jsx)(styles_2.Dummy, { "$isPinned": isPinned, children: (0, jsx_runtime_1.jsx)(MenuOnOutlineMd_1.MenuOnOutlineMd, {}) }), (0, jsx_runtime_1.jsxs)(styles_2.Content, { "$isPinned": isPinned, className: (0, classNames_1.classNames)(className, constants_1.pinnableAsideClassnames.content), children: [(0, jsx_runtime_1.jsxs)(styles_2.ChildrenWrapper, { children: [header && ((0, jsx_runtime_1.jsxs)(styles_1.AsideHeader, { children: [header, (0, jsx_runtime_1.jsx)(styles_1.StyledDivider, {})] })), navigation, children] }), (0, jsx_runtime_1.jsx)(styles_2.Footer, { children: (0, jsx_runtime_1.jsx)(PinButton_1.PinButton, { isPinned: isPinned, isUseCollapse: false, onClick: togglePin }) })] })] })] }));
17
29
  };
18
30
  exports.PagePinnableAside = PagePinnableAside;
@@ -1,4 +1,6 @@
1
1
  export declare const pinnableAsideClassnames: {
2
2
  content: string;
3
+ withHeader: string;
4
+ root: string;
3
5
  };
4
6
  export declare const ASIDE_LOCAL_STORAGE_KEY: string;
@@ -5,5 +5,7 @@ const createUIKitClassname_1 = require("../utils/createUIKitClassname");
5
5
  const generateLocalStorageKey_1 = require("../utils/generateLocalStorageKey");
6
6
  exports.pinnableAsideClassnames = {
7
7
  content: (0, createUIKitClassname_1.createUIKitClassname)('pinnable-aside__content'),
8
+ withHeader: (0, createUIKitClassname_1.createUIKitClassname)('pinnable-aside_with-header'),
9
+ root: (0, createUIKitClassname_1.createUIKitClassname)('pinnable-aside'),
8
10
  };
9
11
  exports.ASIDE_LOCAL_STORAGE_KEY = (0, generateLocalStorageKey_1.generateLocalStorageKey)('Aside', 'isPinned');
@@ -3,8 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.Footer = exports.ChildrenWrapper = exports.Content = exports.Dummy = exports.Aside = void 0;
4
4
  const constants_1 = require("../constants");
5
5
  const PageAside_1 = require("../PageAside");
6
+ const constants_2 = require("../PageAsideNavigation/constants");
6
7
  const styled_1 = require("../styled");
7
- const constants_2 = require("./constants");
8
+ const constants_3 = require("./constants");
8
9
  exports.Aside = (0, styled_1.styled)('aside', {
9
10
  shouldForwardProp: (prop) => !['$isPinned'].includes(prop),
10
11
  }) `
@@ -19,23 +20,19 @@ exports.Aside = (0, styled_1.styled)('aside', {
19
20
  border-bottom-right-radius: ${({ theme }) => theme.shape.medium};
20
21
 
21
22
  &:hover {
22
- .${constants_2.pinnableAsideClassnames.content} {
23
+ .${constants_3.pinnableAsideClassnames.content} {
23
24
  transform: translateX(0);
24
25
  }
25
26
  }
26
27
 
27
- ${({ theme }) => theme.breakpoints.down('sm')} {
28
- z-index: 0;
29
-
30
- overflow: unset;
31
- order: 3;
32
-
33
- width: ${({ theme }) => `calc(100% - ${theme.spacing(8)})`};
34
- margin: ${({ theme }) => theme.spacing(0, 4, 4)};
28
+ &.${constants_3.pinnableAsideClassnames.withHeader} {
29
+ & .${constants_2.pageAsideNavigationClassnames.root} {
30
+ padding-top: ${({ theme }) => theme.spacing(5)};
31
+ }
32
+ }
35
33
 
36
- background-color: ${({ theme }) => theme.palette.background.default};
37
- border: 1px solid ${({ theme }) => theme.palette.components.border.default};
38
- border-radius: ${({ theme }) => theme.shape.medium};
34
+ ${({ theme }) => theme.breakpoints.down('sm')} {
35
+ display: none;
39
36
  }
40
37
  `;
41
38
  exports.Dummy = (0, styled_1.styled)('div', {
@@ -1,6 +1,6 @@
1
1
  import type { ReactNode } from 'react';
2
2
  export type PagePinnableAsideProps = {
3
- children: ReactNode;
3
+ children?: ReactNode;
4
4
  /**
5
5
  * Название класса, применяется к корневому компоненту
6
6
  */
@@ -27,4 +27,20 @@ export type PagePinnableAsideProps = {
27
27
  */
28
28
  id: string;
29
29
  };
30
+ /**
31
+ * Заголовок боковой панели
32
+ */
33
+ header?: ReactNode;
34
+ /**
35
+ * Компонент для отображения навигации
36
+ * @example
37
+ * <PagePinnableAside navigation={
38
+ * <PageAsideNavigation>
39
+ * <PageAsideNavigationItem>
40
+ * Home
41
+ * </PageAsideNavigationItem>
42
+ * </PageAsideNavigation>}
43
+ * />
44
+ */
45
+ navigation?: ReactNode;
30
46
  };
@@ -1,7 +1,9 @@
1
1
  import type { PagePinnableAsideProps } from '../types';
2
- type UseLogicParams = Pick<PagePinnableAsideProps, 'isPinned' | 'onPin' | 'persistState'>;
3
- export declare const useLogic: ({ isPinned: isPinnedProp, onPin: onPinProp, persistState, }: UseLogicParams) => {
2
+ type UseLogicParams = Pick<PagePinnableAsideProps, 'isPinned' | 'onPin' | 'persistState' | 'navigation'>;
3
+ export declare const useLogic: ({ isPinned: isPinnedProp, onPin: onPinProp, persistState, navigation, }: UseLogicParams) => {
4
4
  isPinned: boolean;
5
5
  togglePin: () => void;
6
+ pageHeaderContainer: Element | null;
7
+ isMobileNavigationVisible: false | "" | 0 | 0n | Element | null | undefined;
6
8
  };
7
9
  export {};
@@ -2,9 +2,11 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.useLogic = void 0;
4
4
  const react_1 = require("react");
5
+ const PageAside_1 = require("../../PageAside");
5
6
  const useLocalStorage_1 = require("../../useLocalStorage");
6
7
  const constants_1 = require("../constants");
7
- const useLogic = ({ isPinned: isPinnedProp, onPin: onPinProp, persistState, }) => {
8
+ const useLogic = ({ isPinned: isPinnedProp, onPin: onPinProp, persistState, navigation, }) => {
9
+ const { pageHeaderContainer } = (0, PageAside_1.usePageAside)({ navigation });
8
10
  (0, react_1.useEffect)(() => {
9
11
  const hasIsPinned = isPinnedProp !== undefined;
10
12
  const hasOnPin = onPinProp !== undefined;
@@ -34,6 +36,12 @@ const useLogic = ({ isPinned: isPinnedProp, onPin: onPinProp, persistState, }) =
34
36
  }
35
37
  setStoredValue(newValue);
36
38
  };
37
- return { isPinned, togglePin };
39
+ const isMobileNavigationVisible = navigation && pageHeaderContainer;
40
+ return {
41
+ isPinned,
42
+ togglePin,
43
+ pageHeaderContainer,
44
+ isMobileNavigationVisible,
45
+ };
38
46
  };
39
47
  exports.useLogic = useLogic;
@@ -2,10 +2,10 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.Tabs = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
- const hooks_1 = require("./hooks");
5
+ const useScrollToActiveElement_1 = require("../useScrollToActiveElement");
6
6
  const styles_1 = require("./styles");
7
7
  const Tabs = ({ ...tabsProps }) => {
8
- const { containerRef } = (0, hooks_1.useScrollToActiveTab)();
8
+ const { containerRef } = (0, useScrollToActiveElement_1.useScrollToActiveElement)();
9
9
  return ((0, jsx_runtime_1.jsx)(styles_1.Container, { children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [(0, jsx_runtime_1.jsx)(styles_1.StyledTabs, { ...tabsProps, ref: containerRef }), (0, jsx_runtime_1.jsx)(styles_1.Divider, {})] }) }));
10
10
  };
11
11
  exports.Tabs = Tabs;
@@ -1 +1 @@
1
- export * from './useScrollToActiveTab';
1
+ export * from '../../useScrollToActiveElement';
@@ -14,4 +14,4 @@ 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
- __exportStar(require("./useScrollToActiveTab"), exports);
17
+ __exportStar(require("../../useScrollToActiveElement"), exports);
@@ -0,0 +1 @@
1
+ export * from './useScrollToActiveElement';
@@ -0,0 +1,17 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ __exportStar(require("./useScrollToActiveElement"), exports);
@@ -0,0 +1,9 @@
1
+ /// <reference types="react" />
2
+ export type UseScrollToActiveElementParams = {
3
+ behavior?: ScrollBehavior;
4
+ block?: ScrollLogicalPosition;
5
+ inline?: ScrollLogicalPosition;
6
+ };
7
+ export declare const useScrollToActiveElement: <T extends HTMLElement = HTMLDivElement>(params?: UseScrollToActiveElementParams) => {
8
+ containerRef: import("react").RefObject<T | null>;
9
+ };
@@ -0,0 +1,33 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.useScrollToActiveElement = void 0;
4
+ const react_1 = require("react");
5
+ const useViewportType_1 = require("../useViewportType");
6
+ const useScrollToActiveElement = (params) => {
7
+ const { behavior = 'smooth', block = 'nearest', inline = 'nearest', } = params || {};
8
+ const containerRef = (0, react_1.useRef)(null);
9
+ const { isMobile } = (0, useViewportType_1.useViewportType)();
10
+ (0, react_1.useEffect)(() => {
11
+ if (!containerRef.current || !isMobile) {
12
+ return;
13
+ }
14
+ const container = containerRef.current;
15
+ const performScroll = () => {
16
+ const activeItem = container.querySelector('[aria-selected="true"]');
17
+ if (activeItem) {
18
+ activeItem.scrollIntoView({
19
+ behavior,
20
+ block,
21
+ inline,
22
+ });
23
+ }
24
+ };
25
+ if (document.fonts) {
26
+ document.fonts.ready.then(() => {
27
+ performScroll();
28
+ });
29
+ }
30
+ }, []);
31
+ return { containerRef };
32
+ };
33
+ exports.useScrollToActiveElement = useScrollToActiveElement;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@astral/ui",
3
- "version": "4.72.0",
3
+ "version": "4.73.1",
4
4
  "browser": "./index.js",
5
5
  "main": "./node/index.js",
6
6
  "dependencies": {
File without changes
@@ -1 +0,0 @@
1
- "use strict";
@@ -1 +0,0 @@
1
- export * from './useScrollToActiveTab';
@@ -1 +0,0 @@
1
- export * from './useScrollToActiveTab';
@@ -1,4 +0,0 @@
1
- /// <reference types="react" />
2
- export declare const useScrollToActiveTab: () => {
3
- containerRef: import("react").RefObject<HTMLDivElement | null>;
4
- };
@@ -1,24 +0,0 @@
1
- import { useEffect, useRef } from 'react';
2
- import { useViewportType } from '../../../useViewportType';
3
- export const useScrollToActiveTab = () => {
4
- const containerRef = useRef(null);
5
- const { isMobile } = useViewportType();
6
- useEffect(() => {
7
- if (!containerRef.current || !isMobile) {
8
- return;
9
- }
10
- const selectedTab = containerRef.current.querySelector('[aria-selected="true"]');
11
- const runScroll = () => {
12
- if (selectedTab) {
13
- selectedTab.scrollIntoView({
14
- behavior: 'smooth',
15
- });
16
- }
17
- };
18
- // TODO: Убрать setTimeout после отказа от MUI в компоненте
19
- setTimeout(() => {
20
- runScroll();
21
- }, 200);
22
- }, []);
23
- return { containerRef };
24
- };
@@ -1 +0,0 @@
1
- "use strict";
@@ -1 +0,0 @@
1
- export * from './useScrollToActiveTab';
@@ -1,4 +0,0 @@
1
- /// <reference types="react" />
2
- export declare const useScrollToActiveTab: () => {
3
- containerRef: import("react").RefObject<HTMLDivElement | null>;
4
- };
@@ -1,28 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useScrollToActiveTab = void 0;
4
- const react_1 = require("react");
5
- const useViewportType_1 = require("../../../useViewportType");
6
- const useScrollToActiveTab = () => {
7
- const containerRef = (0, react_1.useRef)(null);
8
- const { isMobile } = (0, useViewportType_1.useViewportType)();
9
- (0, react_1.useEffect)(() => {
10
- if (!containerRef.current || !isMobile) {
11
- return;
12
- }
13
- const selectedTab = containerRef.current.querySelector('[aria-selected="true"]');
14
- const runScroll = () => {
15
- if (selectedTab) {
16
- selectedTab.scrollIntoView({
17
- behavior: 'smooth',
18
- });
19
- }
20
- };
21
- // TODO: Убрать setTimeout после отказа от MUI в компоненте
22
- setTimeout(() => {
23
- runScroll();
24
- }, 200);
25
- }, []);
26
- return { containerRef };
27
- };
28
- exports.useScrollToActiveTab = useScrollToActiveTab;