@astral/ui 4.32.2 → 4.34.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.
Files changed (5) hide show
  1. package/components/PageHeader/PageActions/useLogic/useLogic.js +10 -5
  2. package/components/Tabs/styles.js +1 -1
  3. package/node/components/PageHeader/PageActions/useLogic/useLogic.js +9 -4
  4. package/node/components/Tabs/styles.js +1 -1
  5. package/package.json +1 -1
package/components/PageHeader/PageActions/useLogic/useLogic.js CHANGED
@@ -1,4 +1,4 @@
1
- import { useCallback, useContext, useMemo } from 'react';
1
+ import { useContext, useMemo } from 'react';
2
2
  import { useActionsState } from '../../../ActionGroup';
3
3
  import { NextFeatureFlagsContext } from '../../../ConfigProvider/NextFeatureFlagsContext';
4
4
  import { DashboardContext } from '../../../DashboardContext';
@@ -19,7 +19,7 @@ export const useLogic = ({ main, secondary, secondaryVisible, withCollapseOnLapt
19
19
  ? 'Свернуть и вернуть шапку сервиса'
20
20
  : 'Раскрыть на весь экран';
21
21
  // Все действия убираются в кнопку с троеточием на laptop разрешениях
22
- const getCollapsedActions = useCallback(() => {
22
+ const collapsedActions = useMemo(() => {
23
23
  const fromMain = main?.flatMap((action) => {
24
24
  if ('isNested' in action && action.isNested) {
25
25
  return action.actions.map((nested) => ({
@@ -40,15 +40,20 @@ export const useLogic = ({ main, secondary, secondaryVisible, withCollapseOnLapt
40
40
  ...rest,
41
41
  disabled: disabledAction || disabled,
42
42
  }));
43
- return [
43
+ const allActions = [
44
44
  ...(fromMain || []),
45
45
  ...(fromSecondaryVisible || []),
46
46
  ...(fromSecondary || []),
47
47
  ];
48
+ // Если действие только одно — схлопывание не происходит
49
+ if (allActions.length <= 1) {
50
+ return [];
51
+ }
52
+ return allActions;
48
53
  }, [main, secondary, secondaryVisible, disabledAction]);
49
54
  const classnames = useMemo(() => {
50
55
  return classNames({
51
- [actionsClassnames.withCollapseOnLaptop]: withCollapseOnLaptop,
56
+ [actionsClassnames.withCollapseOnLaptop]: withCollapseOnLaptop && collapsedActions.length > 0,
52
57
  });
53
58
  }, [withCollapseOnLaptop]);
54
59
  return {
@@ -57,7 +62,7 @@ export const useLogic = ({ main, secondary, secondaryVisible, withCollapseOnLapt
57
62
  isFocusedMode,
58
63
  handleClick,
59
64
  tooltipTitle,
60
- collapsedActions: getCollapsedActions(),
65
+ collapsedActions,
61
66
  classnames,
62
67
  };
63
68
  };
package/components/Tabs/styles.js CHANGED
@@ -10,7 +10,7 @@ export const Divider = styled.div `
10
10
  bottom: 2px;
11
11
 
12
12
  width: 100%;
13
- height: 2px;
13
+ height: 1px;
14
14
 
15
15
  background-color: ${({ theme }) => theme.palette.grey[200]};
16
16
  `;
package/node/components/PageHeader/PageActions/useLogic/useLogic.js CHANGED
@@ -22,7 +22,7 @@ const useLogic = ({ main, secondary, secondaryVisible, withCollapseOnLaptop = fa
22
22
  ? 'Свернуть и вернуть шапку сервиса'
23
23
  : 'Раскрыть на весь экран';
24
24
  // Все действия убираются в кнопку с троеточием на laptop разрешениях
25
- const getCollapsedActions = (0, react_1.useCallback)(() => {
25
+ const collapsedActions = (0, react_1.useMemo)(() => {
26
26
  const fromMain = main?.flatMap((action) => {
27
27
  if ('isNested' in action && action.isNested) {
28
28
  return action.actions.map((nested) => ({
@@ -43,15 +43,20 @@ const useLogic = ({ main, secondary, secondaryVisible, withCollapseOnLaptop = fa
43
43
  ...rest,
44
44
  disabled: disabledAction || disabled,
45
45
  }));
46
- return [
46
+ const allActions = [
47
47
  ...(fromMain || []),
48
48
  ...(fromSecondaryVisible || []),
49
49
  ...(fromSecondary || []),
50
50
  ];
51
+ // Если действие только одно — схлопывание не происходит
52
+ if (allActions.length <= 1) {
53
+ return [];
54
+ }
55
+ return allActions;
51
56
  }, [main, secondary, secondaryVisible, disabledAction]);
52
57
  const classnames = (0, react_1.useMemo)(() => {
53
58
  return (0, classNames_1.classNames)({
54
- [constants_1.actionsClassnames.withCollapseOnLaptop]: withCollapseOnLaptop,
59
+ [constants_1.actionsClassnames.withCollapseOnLaptop]: withCollapseOnLaptop && collapsedActions.length > 0,
55
60
  });
56
61
  }, [withCollapseOnLaptop]);
57
62
  return {
@@ -60,7 +65,7 @@ const useLogic = ({ main, secondary, secondaryVisible, withCollapseOnLaptop = fa
60
65
  isFocusedMode,
61
66
  handleClick,
62
67
  tooltipTitle,
63
- collapsedActions: getCollapsedActions(),
68
+ collapsedActions,
64
69
  classnames,
65
70
  };
66
71
  };
package/node/components/Tabs/styles.js CHANGED
@@ -36,7 +36,7 @@ exports.Divider = styled_1.styled.div `
36
36
  bottom: 2px;
37
37
 
38
38
  width: 100%;
39
- height: 2px;
39
+ height: 1px;
40
40
 
41
41
  background-color: ${({ theme }) => theme.palette.grey[200]};
42
42
  `;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@astral/ui",
3
- "version": "4.32.2",
3
+ "version": "4.34.0",
4
4
  "browser": "./index.js",
5
5
  "main": "./node/index.js",
6
6
  "dependencies": {