@hh.ru/magritte-ui-action-bar 2.1.20 → 2.2.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 (13) hide show
  1. package/ActionBar.d.ts +2 -2
  2. package/ActionBar.js +70 -17
  3. package/ActionBar.js.map +1 -1
  4. package/index.css +90 -27
  5. package/index.js +4 -2
  6. package/index.js.map +1 -1
  7. package/index.mock.d.ts +1 -0
  8. package/index.mock.js +5 -1
  9. package/index.mock.js.map +1 -1
  10. package/package.json +5 -3
  11. package/types.d.ts +17 -18
  12. package/types.js +8 -0
  13. package/types.js.map +1 -1
package/ActionBar.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- import { FC } from 'react';
1
+ import { FcWithFlag } from '@hh.ru/magritte-types';
2
2
  import { ActionBarProps } from '@hh.ru/magritte-ui-action-bar/types';
3
- export declare const ActionBar: FC<ActionBarProps>;
3
+ export declare const ActionBar: FcWithFlag<ActionBarProps, 'isActionBar'>;
package/ActionBar.js CHANGED
@@ -1,23 +1,31 @@
1
1
  import './index.css';
2
2
  import { jsx, jsxs } from 'react/jsx-runtime';
3
- import { useState, useRef, useEffect } from 'react';
3
+ import { useState, useRef, useEffect, useCallback, useLayoutEffect } from 'react';
4
4
  import classnames from 'classnames';
5
5
  import { throttle } from '@hh.ru/magritte-common-func-utils';
6
6
  import { InternalLayerName } from '@hh.ru/magritte-internal-layer-name';
7
7
  import { shouldShowDividerOrProgress, getScrollableParent } from './utils.js';
8
- import { ButtonStack } from '@hh.ru/magritte-ui-button-stack';
8
+ import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
9
+ import { STRETCHED_WRAPPER_CLASS } from '@hh.ru/magritte-ui-button';
9
10
  import { Divider } from '@hh.ru/magritte-ui-divider';
10
11
  import { Layer } from '@hh.ru/magritte-ui-layer';
11
12
 
12
- var styles = {"action-bar-fixed":"magritte-action-bar-fixed___Ts-0i_2-1-20","actionBarFixed":"magritte-action-bar-fixed___Ts-0i_2-1-20","action-bar-with-progress-bar":"magritte-action-bar-with-progress-bar___mprqw_2-1-20","actionBarWithProgressBar":"magritte-action-bar-with-progress-bar___mprqw_2-1-20","progress-bar":"magritte-progress-bar___tSTjx_2-1-20","progressBar":"magritte-progress-bar___tSTjx_2-1-20","actions-wrapper_mobile":"magritte-actions-wrapper_mobile___DWgfU_2-1-20","actionsWrapperMobile":"magritte-actions-wrapper_mobile___DWgfU_2-1-20","actions-wrapper_modal":"magritte-actions-wrapper_modal___aQs2b_2-1-20","actionsWrapperModal":"magritte-actions-wrapper_modal___aQs2b_2-1-20","actions-wrapper_page":"magritte-actions-wrapper_page___NuaNO_2-1-20","actionsWrapperPage":"magritte-actions-wrapper_page___NuaNO_2-1-20","actions-stack":"magritte-actions-stack___12VkP_2-1-20","actionsStack":"magritte-actions-stack___12VkP_2-1-20","actions-stack-vertical-on-mobile":"magritte-actions-stack-vertical-on-mobile___82xhC_2-1-20","actionsStackVerticalOnMobile":"magritte-actions-stack-vertical-on-mobile___82xhC_2-1-20","actions-stack-vertical-on-page-xs":"magritte-actions-stack-vertical-on-page-xs___F8kiH_2-1-20","actionsStackVerticalOnPageXs":"magritte-actions-stack-vertical-on-page-xs___F8kiH_2-1-20","actions-stack-horizontal-on-gt-xs":"magritte-actions-stack-horizontal-on-gt-xs___QXT--_2-1-20","actionsStackHorizontalOnGtXs":"magritte-actions-stack-horizontal-on-gt-xs___QXT--_2-1-20"};
13
+ var styles = {"action-bar-fixed":"magritte-action-bar-fixed___Ts-0i_2-2-0","actionBarFixed":"magritte-action-bar-fixed___Ts-0i_2-2-0","action-bar-with-progress-bar":"magritte-action-bar-with-progress-bar___mprqw_2-2-0","actionBarWithProgressBar":"magritte-action-bar-with-progress-bar___mprqw_2-2-0","progress-bar":"magritte-progress-bar___tSTjx_2-2-0","progressBar":"magritte-progress-bar___tSTjx_2-2-0","actions-wrapper_mobile":"magritte-actions-wrapper_mobile___DWgfU_2-2-0","actionsWrapperMobile":"magritte-actions-wrapper_mobile___DWgfU_2-2-0","actions-wrapper_modal":"magritte-actions-wrapper_modal___aQs2b_2-2-0","actionsWrapperModal":"magritte-actions-wrapper_modal___aQs2b_2-2-0","actions-wrapper_modal-vertical":"magritte-actions-wrapper_modal-vertical___eQt6U_2-2-0","actionsWrapperModalVertical":"magritte-actions-wrapper_modal-vertical___eQt6U_2-2-0","actions-wrapper_page":"magritte-actions-wrapper_page___NuaNO_2-2-0","actionsWrapperPage":"magritte-actions-wrapper_page___NuaNO_2-2-0","actions-stack":"magritte-actions-stack___12VkP_2-2-0","actionsStack":"magritte-actions-stack___12VkP_2-2-0","right-only-actions":"magritte-right-only-actions___84fc8_2-2-0","rightOnlyActions":"magritte-right-only-actions___84fc8_2-2-0","actions-stack-vertical-on-mobile":"magritte-actions-stack-vertical-on-mobile___82xhC_2-2-0","actionsStackVerticalOnMobile":"magritte-actions-stack-vertical-on-mobile___82xhC_2-2-0","actions-stack-vertical-on-page-xs":"magritte-actions-stack-vertical-on-page-xs___F8kiH_2-2-0","actionsStackVerticalOnPageXs":"magritte-actions-stack-vertical-on-page-xs___F8kiH_2-2-0","additional-content-container":"magritte-additional-content-container___N4Q-l_2-2-0","additionalContentContainer":"magritte-additional-content-container___N4Q-l_2-2-0","additional-content-mobile":"magritte-additional-content-mobile___nbfvk_2-2-0","additionalContentMobile":"magritte-additional-content-mobile___nbfvk_2-2-0","additional-content-overflow-wrapper":"magritte-additional-content-overflow-wrapper___hpCEQ_2-2-0","additionalContentOverflowWrapper":"magritte-additional-content-overflow-wrapper___hpCEQ_2-2-0","additional-content-wrapper":"magritte-additional-content-wrapper___dpdp5_2-2-0","additionalContentWrapper":"magritte-additional-content-wrapper___dpdp5_2-2-0","actions-stack-horizontal-on-gt-xs":"magritte-actions-stack-horizontal-on-gt-xs___QXT--_2-2-0","actionsStackHorizontalOnGtXs":"magritte-actions-stack-horizontal-on-gt-xs___QXT--_2-2-0","horizontal-actions-container":"magritte-horizontal-actions-container___dKSH8_2-2-0","horizontalActionsContainer":"magritte-horizontal-actions-container___dKSH8_2-2-0","vertical-actions-container":"magritte-vertical-actions-container___j1toG_2-2-0","verticalActionsContainer":"magritte-vertical-actions-container___j1toG_2-2-0","actions-stack-modal":"magritte-actions-stack-modal___LzxwQ_2-2-0","actionsStackModal":"magritte-actions-stack-modal___LzxwQ_2-2-0","actions-stack-modal-vertical":"magritte-actions-stack-modal-vertical___93z-V_2-2-0","actionsStackModalVertical":"magritte-actions-stack-modal-vertical___93z-V_2-2-0","actions-stack-wrapper":"magritte-actions-stack-wrapper___OKREs_2-2-0","actionsStackWrapper":"magritte-actions-stack-wrapper___OKREs_2-2-0","additional-content-dimensions":"magritte-additional-content-dimensions___yEIwY_2-2-0","additionalContentDimensions":"magritte-additional-content-dimensions___yEIwY_2-2-0"};
13
14
 
14
15
  const SCROLL_HANDLER_THROTTLE_MS = 50;
15
- const ActionBar = ({ type, showDivider, showProgress = false, primaryActions = [], secondaryActions = [], wrapperRef, }) => {
16
+ const ActionBar = ({ type = 'page', showDivider, showProgress = false, primaryActions, secondaryActions, additionalContent, wrapperRef, }) => {
17
+ const { breakpoint } = useBreakpoint();
16
18
  const [isScrollEnd, setIsScrollEnd] = useState(false);
17
19
  const actionBarRef = useRef(null);
20
+ const additionalContentRef = useRef(null);
21
+ const additionalContentWrapperRef = useRef(null);
22
+ const actionsStackWrapperRef = useRef(null);
23
+ const actionsStackRef = useRef(null);
24
+ const primaryActionsRef = useRef(null);
25
+ const secondaryActionsRef = useRef(null);
18
26
  const { shouldShowProgress, shouldShowDivider } = shouldShowDividerOrProgress({
19
27
  type,
20
- showDivider,
28
+ showDivider: type === 'modal' || type === 'modal-vertical' ? false : showDivider,
21
29
  showProgress,
22
30
  isScrollEnd,
23
31
  });
@@ -27,13 +35,10 @@ const ActionBar = ({ type, showDivider, showProgress = false, primaryActions = [
27
35
  }
28
36
  const scrollableParent = getScrollableParent(actionBarRef.current);
29
37
  const handleScroll = throttle(() => {
30
- if (scrollableParent &&
31
- Math.abs(scrollableParent.scrollHeight - scrollableParent.clientHeight - scrollableParent.scrollTop) < 1) {
32
- setIsScrollEnd(true);
33
- }
34
- else {
35
- setIsScrollEnd(false);
36
- }
38
+ const isScrollEnd = scrollableParent &&
39
+ Math.abs(scrollableParent.scrollHeight - scrollableParent.clientHeight - scrollableParent.scrollTop) <
40
+ 1;
41
+ setIsScrollEnd(!!isScrollEnd);
37
42
  }, SCROLL_HANDLER_THROTTLE_MS);
38
43
  if (scrollableParent === document.documentElement) {
39
44
  window.addEventListener('scroll', handleScroll);
@@ -51,19 +56,67 @@ const ActionBar = ({ type, showDivider, showProgress = false, primaryActions = [
51
56
  wrapperRef.current = actionBarRef.current.offsetHeight;
52
57
  }
53
58
  }, [wrapperRef, type, primaryActions, secondaryActions]);
54
- if (primaryActions.length === 0 && secondaryActions.length === 0) {
59
+ const toggleVerticalLayout = useCallback((enable) => {
60
+ actionsStackRef.current?.classList.toggle(styles.actionsStackModalVertical, enable);
61
+ primaryActionsRef.current?.classList.toggle(STRETCHED_WRAPPER_CLASS, enable);
62
+ primaryActionsRef.current?.classList.toggle(styles.verticalActionsContainer, enable);
63
+ primaryActionsRef.current?.classList.toggle(styles.horizontalActionsContainer, !enable);
64
+ secondaryActionsRef.current?.classList.toggle(STRETCHED_WRAPPER_CLASS, enable);
65
+ secondaryActionsRef.current?.classList.toggle(styles.verticalActionsContainer, enable);
66
+ secondaryActionsRef.current?.classList.toggle(styles.horizontalActionsContainer, !enable);
67
+ }, []);
68
+ // Эффект проверяющий уместилось ли все содержимое экшн бара в его контейнер и переключающий отображение на
69
+ // вертикальное если не уместилось. Работает только для модалки. Намеренно не триггерится на ресайз контента,
70
+ // чтобы ориентация определялась только при первичном рендере и при смене брейкпоинтов. Чтобы если например
71
+ // кнопка из-за смены надписи стала на пару десятков пикселей шире интерфейс модалки резко не перепрыгивал
72
+ // в вертикальный вариант.
73
+ useLayoutEffect(() => {
74
+ if (type !== 'modal' ||
75
+ !additionalContentRef.current ||
76
+ !additionalContentWrapperRef.current ||
77
+ !actionsStackRef.current ||
78
+ !actionsStackWrapperRef.current) {
79
+ return void 0;
80
+ }
81
+ toggleVerticalLayout(false);
82
+ const enableVerticalLayout = additionalContentRef.current.offsetHeight > additionalContentWrapperRef.current.offsetHeight ||
83
+ additionalContentRef.current.offsetWidth > additionalContentWrapperRef.current.offsetWidth ||
84
+ actionsStackRef.current.scrollWidth > actionsStackWrapperRef.current.offsetWidth;
85
+ toggleVerticalLayout(enableVerticalLayout);
86
+ return void 0;
87
+ }, [type, primaryActions, secondaryActions, additionalContent, breakpoint, toggleVerticalLayout]);
88
+ if (!primaryActions && !secondaryActions && !additionalContent) {
55
89
  return null;
56
90
  }
91
+ const dataQa = `actions-container-${type}`;
57
92
  return (jsx(Layer, { layer: InternalLayerName.ActionBar, children: jsxs("div", { ref: actionBarRef, "data-qa": "action-bar", className: classnames({
58
93
  [styles.actionBarFixed]: type === 'page',
59
94
  [styles.actionBarWithProgressBar]: shouldShowProgress,
60
- }), children: [shouldShowDivider && (jsx("div", { "data-qa": "divider", children: jsx(Divider, { mode: "horizontal" }) })), shouldShowProgress && (jsx("div", { "data-qa": "progress-bar", className: styles.progressBar, children: showProgress })), jsxs("div", { "data-qa": "actions-container", className: styles[`actions-wrapper_${type}`], children: [jsx("div", { className: classnames(styles.actionsStack, {
95
+ }), children: [shouldShowDivider && (jsx("div", { "data-qa": "divider", children: jsx(Divider, { mode: "horizontal" }) })), shouldShowProgress && (jsx("div", { "data-qa": "progress-bar", className: styles.progressBar, children: showProgress })), jsxs("div", { "data-qa": "actions-container", className: styles[`actions-wrapper_${type}`], children: [(type === 'page' || type === 'mobile') && (jsxs("div", { className: classnames(styles.actionsStack, {
61
96
  [styles.actionsStackVerticalOnMobile]: type === 'mobile',
62
97
  [styles.actionsStackVerticalOnPageXs]: type === 'page',
63
- }), "data-qa": "actions-container-mobile", children: jsx(ButtonStack, { orientation: "vertical", children: [...primaryActions, ...secondaryActions] }) }), jsxs("div", { className: classnames(styles.actionsStack, {
64
- [styles.actionsStackHorizontalOnGtXs]: type === 'modal' || type === 'page',
65
- }), "data-qa": "actions-container-desktop", children: [secondaryActions && jsx(ButtonStack, { orientation: "horizontal", children: secondaryActions }), primaryActions && jsx(ButtonStack, { orientation: "horizontal", children: primaryActions })] })] })] }) }));
98
+ }), "data-qa": dataQa, children: [!!additionalContent && (jsx("div", { className: classnames(styles.additionalContentContainer, {
99
+ [styles.additionalContentMobile]: type === 'mobile',
100
+ }), "data-qa": "additional-content", children: additionalContent })), !!primaryActions && (jsx("div", { className: `${STRETCHED_WRAPPER_CLASS} ${styles.verticalActionsContainer}`, "data-qa": "primary-actions", children: primaryActions })), !!secondaryActions && (jsx("div", { className: `${STRETCHED_WRAPPER_CLASS} ${styles.verticalActionsContainer}`, "data-qa": "secondary-actions", children: secondaryActions }))] })), type === 'page' && (jsxs("div", { className: classnames(styles.actionsStack, styles.actionsStackHorizontalOnGtXs, {
101
+ [styles.rightOnlyActions]: !secondaryActions && !additionalContent,
102
+ }), "data-qa": dataQa, children: [!!secondaryActions && (jsx("div", { className: styles.horizontalActionsContainer, "data-qa": "secondary-actions", children: secondaryActions })), !!additionalContent && (jsx("div", { className: styles.additionalContentContainer, children: jsx("div", { className: classnames(styles.additionalContentWrapper, {
103
+ [styles.additionalContentOverflowWrapper]: !!primaryActions || !!secondaryActions,
104
+ }), "data-qa": "additional-content", children: additionalContent }) })), !!primaryActions && (jsx("div", { className: styles.horizontalActionsContainer, "data-qa": "primary-actions", children: primaryActions }))] })), (type === 'modal' || type === 'modal-vertical') && (jsx("div", { ref: actionsStackWrapperRef, className: styles.actionsStackWrapper, children: jsxs("div", { className: classnames(styles.actionsStack, styles.actionsStackModal, {
105
+ [styles.actionsStackModalVertical]: type === 'modal-vertical',
106
+ [styles.rightOnlyActions]: !secondaryActions && !additionalContent,
107
+ }), ref: actionsStackRef, "data-qa": dataQa, children: [!!secondaryActions && (jsx("div", { className: classnames({
108
+ [styles.horizontalActionsContainer]: type === 'modal',
109
+ [styles.verticalActionsContainer]: type === 'modal-vertical',
110
+ [STRETCHED_WRAPPER_CLASS]: type === 'modal-vertical',
111
+ }), ref: secondaryActionsRef, "data-qa": "secondary-actions", children: secondaryActions })), !!additionalContent && (jsx("div", { className: classnames(styles.additionalContentContainer), children: jsx("div", { className: classnames(styles.additionalContentWrapper, {
112
+ [styles.additionalContentOverflowWrapper]: !!primaryActions || !!secondaryActions,
113
+ }), ref: additionalContentWrapperRef, children: jsx("div", { ref: additionalContentRef, className: styles.additionalContentDimensions, "data-qa": "additional-content", children: additionalContent }) }) })), !!primaryActions && (jsx("div", { className: classnames({
114
+ [styles.horizontalActionsContainer]: type === 'modal',
115
+ [styles.verticalActionsContainer]: type === 'modal-vertical',
116
+ [STRETCHED_WRAPPER_CLASS]: type === 'modal-vertical',
117
+ }), ref: primaryActionsRef, "data-qa": "primary-actions", children: primaryActions }))] }) }))] })] }) }));
66
118
  };
119
+ ActionBar.isActionBar = true;
67
120
  ActionBar.displayName = 'ActionBar';
68
121
 
69
122
  export { ActionBar };
package/ActionBar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ActionBar.js","sources":["../src/ActionBar.tsx"],"sourcesContent":["import { useEffect, useRef, useState, FC } from 'react';\nimport classnames from 'classnames';\n\nimport { throttle } from '@hh.ru/magritte-common-func-utils';\nimport { InternalLayerName } from '@hh.ru/magritte-internal-layer-name';\nimport { ActionBarProps } from '@hh.ru/magritte-ui-action-bar/types';\nimport { getScrollableParent, shouldShowDividerOrProgress } from '@hh.ru/magritte-ui-action-bar/utils';\nimport { ButtonStack } from '@hh.ru/magritte-ui-button-stack';\nimport { Divider } from '@hh.ru/magritte-ui-divider';\nimport { Layer } from '@hh.ru/magritte-ui-layer';\n\nimport styles from './action-bar.less';\n\nconst SCROLL_HANDLER_THROTTLE_MS = 50;\n\nexport const ActionBar: FC<ActionBarProps> = ({\n type,\n showDivider,\n showProgress = false,\n primaryActions = [],\n secondaryActions = [],\n wrapperRef,\n}) => {\n const [isScrollEnd, setIsScrollEnd] = useState(false);\n const actionBarRef = useRef<HTMLDivElement>(null);\n const { shouldShowProgress, shouldShowDivider } = shouldShowDividerOrProgress({\n type,\n showDivider,\n showProgress,\n isScrollEnd,\n });\n\n useEffect(() => {\n if (shouldShowProgress || typeof showDivider === 'boolean') {\n return void 0;\n }\n const scrollableParent = getScrollableParent(actionBarRef.current);\n const handleScroll = throttle(() => {\n if (\n scrollableParent &&\n Math.abs(scrollableParent.scrollHeight - scrollableParent.clientHeight - scrollableParent.scrollTop) < 1\n ) {\n setIsScrollEnd(true);\n } else {\n setIsScrollEnd(false);\n }\n }, SCROLL_HANDLER_THROTTLE_MS);\n\n if (scrollableParent === document.documentElement) {\n window.addEventListener('scroll', handleScroll);\n } else if (scrollableParent) {\n scrollableParent.addEventListener('scroll', handleScroll);\n }\n\n return () => {\n window.removeEventListener('scroll', handleScroll);\n scrollableParent?.removeEventListener('scroll', handleScroll);\n };\n }, [shouldShowProgress, showDivider]);\n\n useEffect(() => {\n if (wrapperRef && actionBarRef.current) {\n wrapperRef.current = actionBarRef.current.offsetHeight;\n }\n }, [wrapperRef, type, primaryActions, secondaryActions]);\n\n if (primaryActions.length === 0 && secondaryActions.length === 0) {\n return null;\n }\n\n return (\n <Layer layer={InternalLayerName.ActionBar}>\n <div\n ref={actionBarRef}\n data-qa=\"action-bar\"\n className={classnames({\n [styles.actionBarFixed]: type === 'page',\n [styles.actionBarWithProgressBar]: shouldShowProgress,\n })}\n >\n {shouldShowDivider && (\n <div data-qa=\"divider\">\n <Divider mode=\"horizontal\" />\n </div>\n )}\n {shouldShowProgress && (\n <div data-qa=\"progress-bar\" className={styles.progressBar}>\n {showProgress}\n </div>\n )}\n <div data-qa=\"actions-container\" className={styles[`actions-wrapper_${type}`]}>\n {/* Не получилось заюзать useBreakpoint, т.к. он по умолчанию при первичном рендере возвращает isXS = true\n Из-за этого для type=\"page\" на >XS экранах сначала рендерится вертикальный стэк хотя должен быть горизонтальный\n это может быть критично для определения высоты экшен бара */}\n <div\n className={classnames(styles.actionsStack, {\n [styles.actionsStackVerticalOnMobile]: type === 'mobile',\n [styles.actionsStackVerticalOnPageXs]: type === 'page',\n })}\n data-qa=\"actions-container-mobile\"\n >\n <ButtonStack orientation=\"vertical\">{[...primaryActions, ...secondaryActions]}</ButtonStack>\n </div>\n <div\n className={classnames(styles.actionsStack, {\n [styles.actionsStackHorizontalOnGtXs]: type === 'modal' || type === 'page',\n })}\n data-qa=\"actions-container-desktop\"\n >\n {secondaryActions && <ButtonStack orientation=\"horizontal\">{secondaryActions}</ButtonStack>}\n {primaryActions && <ButtonStack orientation=\"horizontal\">{primaryActions}</ButtonStack>}\n </div>\n </div>\n </div>\n </Layer>\n );\n};\n\nActionBar.displayName = 'ActionBar';\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
1
+ {"version":3,"file":"ActionBar.js","sources":["../src/ActionBar.tsx"],"sourcesContent":["import { useEffect, useRef, useState, useLayoutEffect, useCallback } from 'react';\nimport classnames from 'classnames';\n\nimport { throttle } from '@hh.ru/magritte-common-func-utils';\nimport { InternalLayerName } from '@hh.ru/magritte-internal-layer-name';\nimport { FcWithFlag } from '@hh.ru/magritte-types';\nimport { ActionBarProps } from '@hh.ru/magritte-ui-action-bar/types';\nimport { getScrollableParent, shouldShowDividerOrProgress } from '@hh.ru/magritte-ui-action-bar/utils';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { STRETCHED_WRAPPER_CLASS } from '@hh.ru/magritte-ui-button';\nimport { Divider } from '@hh.ru/magritte-ui-divider';\nimport { Layer } from '@hh.ru/magritte-ui-layer';\n\nimport styles from './action-bar.less';\n\nconst SCROLL_HANDLER_THROTTLE_MS = 50;\n\nexport const ActionBar: FcWithFlag<ActionBarProps, 'isActionBar'> = ({\n type = 'page',\n showDivider,\n showProgress = false,\n primaryActions,\n secondaryActions,\n additionalContent,\n wrapperRef,\n}) => {\n const { breakpoint } = useBreakpoint();\n\n const [isScrollEnd, setIsScrollEnd] = useState(false);\n const actionBarRef = useRef<HTMLDivElement>(null);\n const additionalContentRef = useRef<HTMLDivElement>(null);\n const additionalContentWrapperRef = useRef<HTMLDivElement>(null);\n const actionsStackWrapperRef = useRef<HTMLDivElement>(null);\n const actionsStackRef = useRef<HTMLDivElement>(null);\n const primaryActionsRef = useRef<HTMLDivElement>(null);\n const secondaryActionsRef = useRef<HTMLDivElement>(null);\n\n const { shouldShowProgress, shouldShowDivider } = shouldShowDividerOrProgress({\n type,\n showDivider: type === 'modal' || type === 'modal-vertical' ? false : showDivider,\n showProgress,\n isScrollEnd,\n });\n\n useEffect(() => {\n if (shouldShowProgress || typeof showDivider === 'boolean') {\n return void 0;\n }\n const scrollableParent = getScrollableParent(actionBarRef.current);\n const handleScroll = throttle(() => {\n const isScrollEnd =\n scrollableParent &&\n Math.abs(scrollableParent.scrollHeight - scrollableParent.clientHeight - scrollableParent.scrollTop) <\n 1;\n setIsScrollEnd(!!isScrollEnd);\n }, SCROLL_HANDLER_THROTTLE_MS);\n\n if (scrollableParent === document.documentElement) {\n window.addEventListener('scroll', handleScroll);\n } else if (scrollableParent) {\n scrollableParent.addEventListener('scroll', handleScroll);\n }\n\n return () => {\n window.removeEventListener('scroll', handleScroll);\n scrollableParent?.removeEventListener('scroll', handleScroll);\n };\n }, [shouldShowProgress, showDivider]);\n\n useEffect(() => {\n if (wrapperRef && actionBarRef.current) {\n wrapperRef.current = actionBarRef.current.offsetHeight;\n }\n }, [wrapperRef, type, primaryActions, secondaryActions]);\n\n const toggleVerticalLayout = useCallback((enable: boolean) => {\n actionsStackRef.current?.classList.toggle(styles.actionsStackModalVertical, enable);\n primaryActionsRef.current?.classList.toggle(STRETCHED_WRAPPER_CLASS, enable);\n primaryActionsRef.current?.classList.toggle(styles.verticalActionsContainer, enable);\n primaryActionsRef.current?.classList.toggle(styles.horizontalActionsContainer, !enable);\n secondaryActionsRef.current?.classList.toggle(STRETCHED_WRAPPER_CLASS, enable);\n secondaryActionsRef.current?.classList.toggle(styles.verticalActionsContainer, enable);\n secondaryActionsRef.current?.classList.toggle(styles.horizontalActionsContainer, !enable);\n }, []);\n\n // Эффект проверяющий уместилось ли все содержимое экшн бара в его контейнер и переключающий отображение на\n // вертикальное если не уместилось. Работает только для модалки. Намеренно не триггерится на ресайз контента,\n // чтобы ориентация определялась только при первичном рендере и при смене брейкпоинтов. Чтобы если например\n // кнопка из-за смены надписи стала на пару десятков пикселей шире интерфейс модалки резко не перепрыгивал\n // в вертикальный вариант.\n useLayoutEffect(() => {\n if (\n type !== 'modal' ||\n !additionalContentRef.current ||\n !additionalContentWrapperRef.current ||\n !actionsStackRef.current ||\n !actionsStackWrapperRef.current\n ) {\n return void 0;\n }\n\n toggleVerticalLayout(false);\n const enableVerticalLayout =\n additionalContentRef.current.offsetHeight > additionalContentWrapperRef.current.offsetHeight ||\n additionalContentRef.current.offsetWidth > additionalContentWrapperRef.current.offsetWidth ||\n actionsStackRef.current.scrollWidth > actionsStackWrapperRef.current.offsetWidth;\n toggleVerticalLayout(enableVerticalLayout);\n\n return void 0;\n }, [type, primaryActions, secondaryActions, additionalContent, breakpoint, toggleVerticalLayout]);\n\n if (!primaryActions && !secondaryActions && !additionalContent) {\n return null;\n }\n\n const dataQa = `actions-container-${type}`;\n\n return (\n <Layer layer={InternalLayerName.ActionBar}>\n <div\n ref={actionBarRef}\n data-qa=\"action-bar\"\n className={classnames({\n [styles.actionBarFixed]: type === 'page',\n [styles.actionBarWithProgressBar]: shouldShowProgress,\n })}\n >\n {shouldShowDivider && (\n <div data-qa=\"divider\">\n <Divider mode=\"horizontal\" />\n </div>\n )}\n {shouldShowProgress && (\n <div data-qa=\"progress-bar\" className={styles.progressBar}>\n {showProgress}\n </div>\n )}\n <div data-qa=\"actions-container\" className={styles[`actions-wrapper_${type}`]}>\n {/* Не получилось заюзать useBreakpoint, т.к. он по умолчанию при первичном рендере возвращает isXS = true\n Из-за этого для type=\"page\" на >XS экранах сначала рендерится вертикальный стэк хотя должен быть горизонтальный\n это может быть критично для определения высоты экшен бара */}\n {(type === 'page' || type === 'mobile') && (\n <div\n className={classnames(styles.actionsStack, {\n [styles.actionsStackVerticalOnMobile]: type === 'mobile',\n [styles.actionsStackVerticalOnPageXs]: type === 'page',\n })}\n data-qa={dataQa}\n >\n {!!additionalContent && (\n <div\n className={classnames(styles.additionalContentContainer, {\n [styles.additionalContentMobile]: type === 'mobile',\n })}\n data-qa=\"additional-content\"\n >\n {additionalContent}\n </div>\n )}\n {!!primaryActions && (\n <div\n className={`${STRETCHED_WRAPPER_CLASS} ${styles.verticalActionsContainer}`}\n data-qa=\"primary-actions\"\n >\n {primaryActions}\n </div>\n )}\n {!!secondaryActions && (\n <div\n className={`${STRETCHED_WRAPPER_CLASS} ${styles.verticalActionsContainer}`}\n data-qa=\"secondary-actions\"\n >\n {secondaryActions}\n </div>\n )}\n </div>\n )}\n {type === 'page' && (\n <div\n className={classnames(styles.actionsStack, styles.actionsStackHorizontalOnGtXs, {\n [styles.rightOnlyActions]: !secondaryActions && !additionalContent,\n })}\n data-qa={dataQa}\n >\n {!!secondaryActions && (\n <div className={styles.horizontalActionsContainer} data-qa=\"secondary-actions\">\n {secondaryActions}\n </div>\n )}\n {!!additionalContent && (\n <div className={styles.additionalContentContainer}>\n <div\n className={classnames(styles.additionalContentWrapper, {\n [styles.additionalContentOverflowWrapper]:\n !!primaryActions || !!secondaryActions,\n })}\n data-qa=\"additional-content\"\n >\n {additionalContent}\n </div>\n </div>\n )}\n {!!primaryActions && (\n <div className={styles.horizontalActionsContainer} data-qa=\"primary-actions\">\n {primaryActions}\n </div>\n )}\n </div>\n )}\n {(type === 'modal' || type === 'modal-vertical') && (\n <div ref={actionsStackWrapperRef} className={styles.actionsStackWrapper}>\n <div\n className={classnames(styles.actionsStack, styles.actionsStackModal, {\n [styles.actionsStackModalVertical]: type === 'modal-vertical',\n [styles.rightOnlyActions]: !secondaryActions && !additionalContent,\n })}\n ref={actionsStackRef}\n data-qa={dataQa}\n >\n {!!secondaryActions && (\n <div\n className={classnames({\n [styles.horizontalActionsContainer]: type === 'modal',\n [styles.verticalActionsContainer]: type === 'modal-vertical',\n [STRETCHED_WRAPPER_CLASS]: type === 'modal-vertical',\n })}\n ref={secondaryActionsRef}\n data-qa=\"secondary-actions\"\n >\n {secondaryActions}\n </div>\n )}\n {!!additionalContent && (\n <div className={classnames(styles.additionalContentContainer)}>\n <div\n className={classnames(styles.additionalContentWrapper, {\n [styles.additionalContentOverflowWrapper]:\n !!primaryActions || !!secondaryActions,\n })}\n ref={additionalContentWrapperRef}\n >\n <div\n ref={additionalContentRef}\n className={styles.additionalContentDimensions}\n data-qa=\"additional-content\"\n >\n {additionalContent}\n </div>\n </div>\n </div>\n )}\n {!!primaryActions && (\n <div\n className={classnames({\n [styles.horizontalActionsContainer]: type === 'modal',\n [styles.verticalActionsContainer]: type === 'modal-vertical',\n [STRETCHED_WRAPPER_CLASS]: type === 'modal-vertical',\n })}\n ref={primaryActionsRef}\n data-qa=\"primary-actions\"\n >\n {primaryActions}\n </div>\n )}\n </div>\n </div>\n )}\n </div>\n </div>\n </Layer>\n );\n};\n\nActionBar.isActionBar = true;\nActionBar.displayName = 'ActionBar';\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
package/index.css CHANGED
@@ -4,105 +4,168 @@
4
4
  .magritte-night-theme{
5
5
  --magritte-color-background-primary-v19-0-0:#1B1B1B;
6
6
  }
7
- .magritte-action-bar-fixed___Ts-0i_2-1-20{
7
+ .magritte-action-bar-fixed___Ts-0i_2-2-0{
8
8
  background-color:var(--magritte-color-background-primary-v19-0-0);
9
9
  position:fixed;
10
10
  bottom:0;
11
11
  left:0;
12
12
  width:100%;
13
13
  }
14
- .magritte-action-bar-with-progress-bar___mprqw_2-1-20{
14
+ .magritte-action-bar-with-progress-bar___mprqw_2-2-0{
15
15
  border-radius:8px 8px 0 0;
16
16
  }
17
- .magritte-progress-bar___tSTjx_2-1-20{
17
+ .magritte-progress-bar___tSTjx_2-2-0{
18
18
  padding:4px 4px 0;
19
19
  }
20
- .magritte-actions-wrapper_mobile___DWgfU_2-1-20{
20
+ .magritte-actions-wrapper_mobile___DWgfU_2-2-0{
21
21
  padding:16px;
22
22
  }
23
- .magritte-actions-wrapper_modal___aQs2b_2-1-20{
24
- padding:32px;
23
+ .magritte-actions-wrapper_modal___aQs2b_2-2-0{
24
+ padding:24px;
25
25
  }
26
- .magritte-actions-wrapper_page___NuaNO_2-1-20{
26
+ .magritte-actions-wrapper_modal-vertical___eQt6U_2-2-0{
27
+ padding:24px;
28
+ }
29
+ .magritte-actions-wrapper_page___NuaNO_2-2-0{
27
30
  padding:16px;
28
31
  }
29
32
  @media (min-width: 1020px){
30
- body.magritte-old-layout .magritte-actions-wrapper_page___NuaNO_2-1-20{
33
+ body.magritte-old-layout .magritte-actions-wrapper_page___NuaNO_2-2-0{
31
34
  padding:16px 68px;
32
35
  }
33
36
  }
34
37
  @media (min-width: 1024px){
35
- body:not(.magritte-old-layout) .magritte-actions-wrapper_page___NuaNO_2-1-20{
38
+ body:not(.magritte-old-layout) .magritte-actions-wrapper_page___NuaNO_2-2-0{
36
39
  padding:16px 68px;
37
40
  }
38
41
  }
39
42
  @media (min-width: 1340px){
40
- body.magritte-old-layout .magritte-actions-wrapper_page___NuaNO_2-1-20{
43
+ body.magritte-old-layout .magritte-actions-wrapper_page___NuaNO_2-2-0{
41
44
  padding:16px 76px;
42
45
  }
43
46
  }
44
47
  @media (min-width: 1280px){
45
- body:not(.magritte-old-layout) .magritte-actions-wrapper_page___NuaNO_2-1-20{
48
+ body:not(.magritte-old-layout) .magritte-actions-wrapper_page___NuaNO_2-2-0{
46
49
  padding:16px 76px;
47
50
  }
48
51
  }
49
52
  @media (min-width: 1440px){
50
- body:not(.magritte-old-layout) .magritte-actions-wrapper_page___NuaNO_2-1-20{
53
+ body:not(.magritte-old-layout) .magritte-actions-wrapper_page___NuaNO_2-2-0{
51
54
  padding:16px 108px;
52
55
  }
53
56
  }
54
57
  @media (min-width: 1920px){
55
- body:not(.magritte-old-layout) .magritte-actions-wrapper_page___NuaNO_2-1-20{
58
+ body:not(.magritte-old-layout) .magritte-actions-wrapper_page___NuaNO_2-2-0{
56
59
  padding:16px 252px;
57
60
  }
58
61
  }
59
- .magritte-actions-stack___12VkP_2-1-20{
62
+ .magritte-actions-stack___12VkP_2-2-0{
60
63
  display:none;
64
+ width:100%;
65
+ }
66
+ .magritte-actions-stack___12VkP_2-2-0.magritte-right-only-actions___84fc8_2-2-0{
67
+ justify-content:flex-end;
61
68
  }
62
- .magritte-actions-stack-vertical-on-mobile___82xhC_2-1-20{
63
- display:block;
69
+ .magritte-actions-stack-vertical-on-mobile___82xhC_2-2-0{
70
+ display:flex;
71
+ flex-direction:column;
72
+ gap:12px;
64
73
  }
65
74
  @media (min-width: 1020px){
66
- body.magritte-old-layout .magritte-actions-stack-vertical-on-mobile___82xhC_2-1-20{
75
+ body.magritte-old-layout .magritte-actions-stack-vertical-on-mobile___82xhC_2-2-0{
67
76
  display:none;
68
77
  }
69
78
  }
70
79
  @media (min-width: 1024px){
71
- body:not(.magritte-old-layout) .magritte-actions-stack-vertical-on-mobile___82xhC_2-1-20{
80
+ body:not(.magritte-old-layout) .magritte-actions-stack-vertical-on-mobile___82xhC_2-2-0{
72
81
  display:none;
73
82
  }
74
83
  }
75
- .magritte-actions-stack-vertical-on-page-xs___F8kiH_2-1-20{
76
- display:block;
84
+ .magritte-actions-stack-vertical-on-page-xs___F8kiH_2-2-0{
85
+ display:flex;
86
+ flex-direction:column;
87
+ gap:16px;
77
88
  }
78
89
  @media (min-width: 700px){
79
- body.magritte-old-layout .magritte-actions-stack-vertical-on-page-xs___F8kiH_2-1-20{
90
+ body.magritte-old-layout .magritte-actions-stack-vertical-on-page-xs___F8kiH_2-2-0{
80
91
  display:none;
81
92
  }
82
93
  }
83
94
  @media (min-width: 600px){
84
- body:not(.magritte-old-layout) .magritte-actions-stack-vertical-on-page-xs___F8kiH_2-1-20{
95
+ body:not(.magritte-old-layout) .magritte-actions-stack-vertical-on-page-xs___F8kiH_2-2-0{
85
96
  display:none;
86
97
  }
87
98
  }
88
- .magritte-actions-stack-horizontal-on-gt-xs___QXT--_2-1-20{
99
+ .magritte-additional-content-container___N4Q-l_2-2-0{
100
+ display:flex;
101
+ flex:1 1 100%;
102
+ overflow:hidden;
103
+ position:relative;
104
+ }
105
+ .magritte-additional-content-container___N4Q-l_2-2-0.magritte-additional-content-mobile___nbfvk_2-2-0{
106
+ margin-bottom:2px;
107
+ }
108
+ .magritte-additional-content-overflow-wrapper___hpCEQ_2-2-0{
109
+ position:absolute;
110
+ inset:0;
111
+ }
112
+ .magritte-additional-content-wrapper___dpdp5_2-2-0{
113
+ width:100%;
114
+ }
115
+ .magritte-actions-stack-horizontal-on-gt-xs___QXT--_2-2-0{
89
116
  display:none;
90
117
  }
91
118
  @media (min-width: 700px){
92
- body.magritte-old-layout .magritte-actions-stack-horizontal-on-gt-xs___QXT--_2-1-20{
119
+ body.magritte-old-layout .magritte-actions-stack-horizontal-on-gt-xs___QXT--_2-2-0{
93
120
  display:flex;
94
- flex-grow:1;
95
121
  flex-direction:row;
96
122
  justify-content:space-between;
123
+ align-items:stretch;
97
124
  gap:12px;
98
125
  }
99
126
  }
100
127
  @media (min-width: 600px){
101
- body:not(.magritte-old-layout) .magritte-actions-stack-horizontal-on-gt-xs___QXT--_2-1-20{
128
+ body:not(.magritte-old-layout) .magritte-actions-stack-horizontal-on-gt-xs___QXT--_2-2-0{
102
129
  display:flex;
103
- flex-grow:1;
104
130
  flex-direction:row;
105
131
  justify-content:space-between;
132
+ align-items:stretch;
106
133
  gap:12px;
107
134
  }
108
135
  }
136
+ .magritte-horizontal-actions-container___dKSH8_2-2-0{
137
+ display:flex;
138
+ flex:0 0 auto;
139
+ gap:12px;
140
+ align-items:center;
141
+ }
142
+ .magritte-vertical-actions-container___j1toG_2-2-0{
143
+ display:flex;
144
+ gap:12px;
145
+ flex-direction:column-reverse;
146
+ align-items:center;
147
+ }
148
+ .magritte-actions-stack-modal___LzxwQ_2-2-0{
149
+ display:flex;
150
+ flex-direction:row;
151
+ justify-content:space-between;
152
+ gap:12px;
153
+ }
154
+ .magritte-actions-stack-modal___LzxwQ_2-2-0.magritte-actions-stack-modal-vertical___93z-V_2-2-0{
155
+ flex-direction:column-reverse;
156
+ }
157
+ .magritte-actions-stack-modal___LzxwQ_2-2-0.magritte-actions-stack-modal-vertical___93z-V_2-2-0 .magritte-additional-content-container___N4Q-l_2-2-0{
158
+ order:2;
159
+ }
160
+ .magritte-actions-stack-modal___LzxwQ_2-2-0.magritte-actions-stack-modal-vertical___93z-V_2-2-0 .magritte-additional-content-overflow-wrapper___hpCEQ_2-2-0{
161
+ position:static;
162
+ }
163
+ .magritte-actions-stack-wrapper___OKREs_2-2-0{
164
+ width:100%;
165
+ }
166
+ .magritte-additional-content-dimensions___yEIwY_2-2-0{
167
+ display:flex;
168
+ align-items:center;
169
+ width:100%;
170
+ min-height:100%;
171
+ }
package/index.js CHANGED
@@ -1,12 +1,14 @@
1
1
  import './index.css';
2
+ export { isActionBarComponent } from './types.js';
2
3
  export { ActionBar } from './ActionBar.js';
3
- import 'react/jsx-runtime';
4
4
  import 'react';
5
+ import 'react/jsx-runtime';
5
6
  import 'classnames';
6
7
  import '@hh.ru/magritte-common-func-utils';
7
8
  import '@hh.ru/magritte-internal-layer-name';
8
9
  import './utils.js';
9
- import '@hh.ru/magritte-ui-button-stack';
10
+ import '@hh.ru/magritte-ui-breakpoint';
11
+ import '@hh.ru/magritte-ui-button';
10
12
  import '@hh.ru/magritte-ui-divider';
11
13
  import '@hh.ru/magritte-ui-layer';
12
14
  //# sourceMappingURL=index.js.map
package/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
package/index.mock.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  import { FC } from 'react';
2
2
  export declare const ActionBar: FC<Record<string, unknown>>;
3
+ export declare const isActionBarComponent: (component: import("react").ReactNode) => component is import("react").ReactElement<import("@hh.ru/magritte-ui-action-bar/types").ActionBarProps, string | import("react").JSXElementConstructor<any>>;
package/index.mock.js CHANGED
@@ -1,9 +1,13 @@
1
1
  import './index.css';
2
+ import { isActionBarComponent as isActionBarComponent$1 } from './types.js';
2
3
  import { mockComponent } from '@hh.ru/magritte-ui-mock-component';
4
+ import 'react';
3
5
 
4
6
  const ActionBar = mockComponent('ActionBar', undefined, {
5
7
  withChildren: false,
6
8
  });
9
+ ActionBar.isActionBar = true;
10
+ const isActionBarComponent = isActionBarComponent$1;
7
11
 
8
- export { ActionBar };
12
+ export { ActionBar, isActionBarComponent };
9
13
  //# sourceMappingURL=index.mock.js.map
package/index.mock.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.mock.js","sources":["../src/index.mock.ts"],"sourcesContent":["import { FC } from 'react';\n\nimport { mockComponent } from '@hh.ru/magritte-ui-mock-component';\n\nexport const ActionBar: FC<Record<string, unknown>> = mockComponent('ActionBar', undefined, {\n withChildren: false,\n});\n"],"names":[],"mappings":";;MAIa,SAAS,GAAgC,aAAa,CAAC,WAAW,EAAE,SAAS,EAAE;AACxF,IAAA,YAAY,EAAE,KAAK;AACtB,CAAA;;;;"}
1
+ {"version":3,"file":"index.mock.js","sources":["../src/index.mock.ts"],"sourcesContent":["import { FC } from 'react';\n\nimport { FcWithFlag } from '@hh.ru/magritte-types';\nimport { isActionBarComponent as checkFunction } from '@hh.ru/magritte-ui-action-bar/types';\nimport { mockComponent } from '@hh.ru/magritte-ui-mock-component';\n\nexport const ActionBar: FC<Record<string, unknown>> = mockComponent('ActionBar', undefined, {\n withChildren: false,\n});\n\n(ActionBar as FcWithFlag<Record<string, unknown>, 'isActionBar'>).isActionBar = true;\n\nexport const isActionBarComponent = checkFunction;\n"],"names":["checkFunction"],"mappings":";;;;MAMa,SAAS,GAAgC,aAAa,CAAC,WAAW,EAAE,SAAS,EAAE;AACxF,IAAA,YAAY,EAAE,KAAK;AACtB,CAAA,EAAE;AAEF,SAAgE,CAAC,WAAW,GAAG,IAAI,CAAC;AAE9E,MAAM,oBAAoB,GAAGA;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hh.ru/magritte-ui-action-bar",
3
- "version": "2.1.20",
3
+ "version": "2.2.0",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -22,7 +22,9 @@
22
22
  "dependencies": {
23
23
  "@hh.ru/magritte-common-func-utils": "1.3.7",
24
24
  "@hh.ru/magritte-internal-layer-name": "2.2.0",
25
- "@hh.ru/magritte-ui-button-stack": "2.1.18",
25
+ "@hh.ru/magritte-types": "4.0.2",
26
+ "@hh.ru/magritte-ui-breakpoint": "4.0.3",
27
+ "@hh.ru/magritte-ui-button": "5.2.0",
26
28
  "@hh.ru/magritte-ui-divider": "1.1.32",
27
29
  "@hh.ru/magritte-ui-layer": "2.0.6",
28
30
  "@hh.ru/magritte-ui-mock-component": "1.0.11"
@@ -34,5 +36,5 @@
34
36
  "publishConfig": {
35
37
  "access": "public"
36
38
  },
37
- "gitHead": "3c4f2093fd3faa228641a472332f4ebf2fad784d"
39
+ "gitHead": "2366e6aabcfc1050b4cc1ae8bd16a3851db008db"
38
40
  }
package/types.d.ts CHANGED
@@ -1,36 +1,35 @@
1
- import { MutableRefObject, ReactNode } from 'react';
2
- import { ButtonElement } from '@hh.ru/magritte-ui-button-stack';
3
- export type ActionBarType = 'page' | 'modal' | 'mobile';
1
+ import { MutableRefObject, type ReactNode, type ReactElement } from 'react';
2
+ export type ActionBarType = 'page' | 'modal' | 'modal-vertical' | 'mobile';
4
3
  interface BaseActionBarProps {
5
4
  /** ActionBar тип */
6
- type: ActionBarType;
5
+ type?: ActionBarType;
7
6
  /** wrapperRef для получения высоты экшен бара */
8
7
  wrapperRef?: MutableRefObject<number | undefined>;
9
- }
10
- interface ActionBarWithPrimaryProps extends BaseActionBarProps {
11
- /** Массив с primary кнопками */
12
- primaryActions: ButtonElement[];
13
- /** Массив с secondary кнопками */
14
- secondaryActions?: ButtonElement[];
15
- }
16
- interface ActionBarWithSecondaryProps extends BaseActionBarProps {
17
- primaryActions?: ButtonElement[];
18
- secondaryActions: ButtonElement[];
8
+ /**
9
+ * Дополнительный контент размещаемый в контейнере над кнопками для вертикального отображения, либо в контейнере
10
+ * между кнопками для горизонтального отображения
11
+ */
12
+ additionalContent?: ReactNode;
13
+ /** primary кнопки */
14
+ primaryActions?: ReactNode;
15
+ /** secondary кнопки */
16
+ secondaryActions?: ReactNode;
19
17
  }
20
18
  type ActionBarDividerProgressProps = {
21
- type: Extract<ActionBarType, 'mobile'>;
19
+ type: 'mobile';
22
20
  /** Показывать ли разделитель */
23
21
  showDivider?: boolean;
24
22
  /** Показывать ли прогресс бар */
25
23
  showProgress?: never;
26
24
  } | {
27
- type: Exclude<ActionBarType, 'mobile'>;
25
+ type?: Exclude<ActionBarType, 'mobile'>;
28
26
  showDivider?: boolean;
29
27
  showProgress?: never;
30
28
  } | {
31
- type: Exclude<ActionBarType, 'mobile'>;
29
+ type?: Exclude<ActionBarType, 'mobile'>;
32
30
  showDivider?: never;
33
31
  showProgress?: ReactNode;
34
32
  };
35
- export type ActionBarProps = (ActionBarWithPrimaryProps | ActionBarWithSecondaryProps) & ActionBarDividerProgressProps;
33
+ export type ActionBarProps = BaseActionBarProps & ActionBarDividerProgressProps;
34
+ export declare const isActionBarComponent: (component: ReactNode) => component is ReactElement<ActionBarProps, string | import("react").JSXElementConstructor<any>>;
36
35
  export {};
package/types.js CHANGED
@@ -1,3 +1,11 @@
1
1
  import './index.css';
2
+ import { isValidElement } from 'react';
2
3
 
4
+ const isActionBarComponent = (component) => {
5
+ return (isValidElement(component) &&
6
+ typeof component.type === 'function' &&
7
+ 'isActionBar' in component?.type);
8
+ };
9
+
10
+ export { isActionBarComponent };
3
11
  //# sourceMappingURL=types.js.map
package/types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
1
+ {"version":3,"file":"types.js","sources":["../src/types.ts"],"sourcesContent":["import { MutableRefObject, type ReactNode, type ReactElement, isValidElement } from 'react';\n\nexport type ActionBarType = 'page' | 'modal' | 'modal-vertical' | 'mobile';\n\ninterface BaseActionBarProps {\n /** ActionBar тип */\n type?: ActionBarType;\n /** wrapperRef для получения высоты экшен бара */\n wrapperRef?: MutableRefObject<number | undefined>;\n /**\n * Дополнительный контент размещаемый в контейнере над кнопками для вертикального отображения, либо в контейнере\n * между кнопками для горизонтального отображения\n */\n additionalContent?: ReactNode;\n /** primary кнопки */\n primaryActions?: ReactNode;\n /** secondary кнопки */\n secondaryActions?: ReactNode;\n}\n\ntype ActionBarDividerProgressProps =\n | {\n type: 'mobile';\n /** Показывать ли разделитель */\n showDivider?: boolean;\n /** Показывать ли прогресс бар */\n showProgress?: never;\n }\n | { type?: Exclude<ActionBarType, 'mobile'>; showDivider?: boolean; showProgress?: never }\n | { type?: Exclude<ActionBarType, 'mobile'>; showDivider?: never; showProgress?: ReactNode };\n\nexport type ActionBarProps = BaseActionBarProps & ActionBarDividerProgressProps;\n\nexport const isActionBarComponent = (component: ReactNode): component is ReactElement<ActionBarProps> => {\n return (\n isValidElement(component) &&\n typeof component.type === 'function' &&\n 'isActionBar' in (component?.type as object)\n );\n};\n"],"names":[],"mappings":";;AAiCa,MAAA,oBAAoB,GAAG,CAAC,SAAoB,KAA+C;AACpG,IAAA,QACI,cAAc,CAAC,SAAS,CAAC;AACzB,QAAA,OAAO,SAAS,CAAC,IAAI,KAAK,UAAU;AACpC,QAAA,aAAa,IAAK,SAAS,EAAE,IAAe,EAC9C;AACN;;;;"}