npm - @hh.ru/magritte-ui-action-bar - Versions diffs - 5.3.0 → 5.3.2 - Mend

@hh.ru/magritte-ui-action-bar 5.3.0 → 5.3.2

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

package/ActionBar.js +47 -29
package/ActionBar.js.map +1 -1
package/ActionBarViewportAdapter.js +1 -1
package/index.css +32 -38
package/package.json +3 -3

package/ActionBar.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import './index.css';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useState, useRef, useEffect, useCallback, useLayoutEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef, useEffect, useCallback, useLayoutEffect, Children, isValidElement, Fragment as Fragment$1 } from 'react';
 import classnames from 'classnames';
 import { throttle } from '@hh.ru/magritte-common-func-utils';
 import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
@@ -10,7 +10,7 @@ import { STRETCHED_WRAPPER_CLASS } from '@hh.ru/magritte-ui-button';
 import { Divider } from '@hh.ru/magritte-ui-divider';
 import { Layer } from '@hh.ru/magritte-ui-layer';
-var styles = {"action-bar":"magritte-action-bar___Tkm7C_5-3-0","actionBar":"magritte-action-bar___Tkm7C_5-3-0","action-bar-is-fixed":"magritte-action-bar-is-fixed___Zjqtf_5-3-0","actionBarIsFixed":"magritte-action-bar-is-fixed___Zjqtf_5-3-0","action-bar-is-sticky":"magritte-action-bar-is-sticky___q272C_5-3-0","actionBarIsSticky":"magritte-action-bar-is-sticky___q272C_5-3-0","action-bar-with-default-padding":"magritte-action-bar-with-default-padding___QcKnA_5-3-0","actionBarWithDefaultPadding":"magritte-action-bar-with-default-padding___QcKnA_5-3-0","action-bar-with-progress-bar":"magritte-action-bar-with-progress-bar___mprqw_5-3-0","actionBarWithProgressBar":"magritte-action-bar-with-progress-bar___mprqw_5-3-0","actions-stack":"magritte-actions-stack___12VkP_5-3-0","actionsStack":"magritte-actions-stack___12VkP_5-3-0","right-only-actions":"magritte-right-only-actions___84fc8_5-3-0","rightOnlyActions":"magritte-right-only-actions___84fc8_5-3-0","actions-stack_auto":"magritte-actions-stack_auto___ayohg_5-3-0","actionsStackAuto":"magritte-actions-stack_auto___ayohg_5-3-0","actions-stack_horizontal":"magritte-actions-stack_horizontal___p3HgB_5-3-0","actionsStackHorizontal":"magritte-actions-stack_horizontal___p3HgB_5-3-0","actions-stack_vertical":"magritte-actions-stack_vertical___5UtzF_5-3-0","actionsStackVertical":"magritte-actions-stack_vertical___5UtzF_5-3-0","additional-content-container":"magritte-additional-content-container___N4Q-l_5-3-0","additionalContentContainer":"magritte-additional-content-container___N4Q-l_5-3-0","additional-content-overflow-wrapper":"magritte-additional-content-overflow-wrapper___hpCEQ_5-3-0","additionalContentOverflowWrapper":"magritte-additional-content-overflow-wrapper___hpCEQ_5-3-0","additional-content-vertical":"magritte-additional-content-vertical___3Ba1i_5-3-0","additionalContentVertical":"magritte-additional-content-vertical___3Ba1i_5-3-0","additional-content-wrapper":"magritte-additional-content-wrapper___dpdp5_5-3-0","additionalContentWrapper":"magritte-additional-content-wrapper___dpdp5_5-3-0","additional-content-dimensions":"magritte-additional-content-dimensions___yEIwY_5-3-0","additionalContentDimensions":"magritte-additional-content-dimensions___yEIwY_5-3-0","horizontal-actions-container":"magritte-horizontal-actions-container___dKSH8_5-3-0","horizontalActionsContainer":"magritte-horizontal-actions-container___dKSH8_5-3-0","vertical-actions-container":"magritte-vertical-actions-container___j1toG_5-3-0","verticalActionsContainer":"magritte-vertical-actions-container___j1toG_5-3-0","primary-actions":"magritte-primary-actions___jJlQv_5-3-0","primaryActions":"magritte-primary-actions___jJlQv_5-3-0","secondary-actions":"magritte-secondary-actions___A9JUv_5-3-0","secondaryActions":"magritte-secondary-actions___A9JUv_5-3-0","progress-bar":"magritte-progress-bar___tSTjx_5-3-0","progressBar":"magritte-progress-bar___tSTjx_5-3-0"};
+var styles = {"action-bar":"magritte-action-bar___Tkm7C_5-3-2","actionBar":"magritte-action-bar___Tkm7C_5-3-2","action-bar-is-fixed":"magritte-action-bar-is-fixed___Zjqtf_5-3-2","actionBarIsFixed":"magritte-action-bar-is-fixed___Zjqtf_5-3-2","action-bar-is-sticky":"magritte-action-bar-is-sticky___q272C_5-3-2","actionBarIsSticky":"magritte-action-bar-is-sticky___q272C_5-3-2","action-bar-with-default-padding":"magritte-action-bar-with-default-padding___QcKnA_5-3-2","actionBarWithDefaultPadding":"magritte-action-bar-with-default-padding___QcKnA_5-3-2","action-bar-with-progress-bar":"magritte-action-bar-with-progress-bar___mprqw_5-3-2","actionBarWithProgressBar":"magritte-action-bar-with-progress-bar___mprqw_5-3-2","actions-stack":"magritte-actions-stack___12VkP_5-3-2","actionsStack":"magritte-actions-stack___12VkP_5-3-2","right-only-actions":"magritte-right-only-actions___84fc8_5-3-2","rightOnlyActions":"magritte-right-only-actions___84fc8_5-3-2","actions-stack_horizontal":"magritte-actions-stack_horizontal___p3HgB_5-3-2","actionsStackHorizontal":"magritte-actions-stack_horizontal___p3HgB_5-3-2","actions-stack_vertical":"magritte-actions-stack_vertical___5UtzF_5-3-2","actionsStackVertical":"magritte-actions-stack_vertical___5UtzF_5-3-2","additional-content-overflow-wrapper":"magritte-additional-content-overflow-wrapper___hpCEQ_5-3-2","additionalContentOverflowWrapper":"magritte-additional-content-overflow-wrapper___hpCEQ_5-3-2","additional-content-container":"magritte-additional-content-container___N4Q-l_5-3-2","additionalContentContainer":"magritte-additional-content-container___N4Q-l_5-3-2","additional-content-vertical":"magritte-additional-content-vertical___3Ba1i_5-3-2","additionalContentVertical":"magritte-additional-content-vertical___3Ba1i_5-3-2","additional-content-wrapper":"magritte-additional-content-wrapper___dpdp5_5-3-2","additionalContentWrapper":"magritte-additional-content-wrapper___dpdp5_5-3-2","additional-content-dimensions":"magritte-additional-content-dimensions___yEIwY_5-3-2","additionalContentDimensions":"magritte-additional-content-dimensions___yEIwY_5-3-2","horizontal-actions-container":"magritte-horizontal-actions-container___dKSH8_5-3-2","horizontalActionsContainer":"magritte-horizontal-actions-container___dKSH8_5-3-2","vertical-actions-container":"magritte-vertical-actions-container___j1toG_5-3-2","verticalActionsContainer":"magritte-vertical-actions-container___j1toG_5-3-2","reverse":"magritte-reverse___mFIgd_5-3-2","progress-bar":"magritte-progress-bar___tSTjx_5-3-2","progressBar":"magritte-progress-bar___tSTjx_5-3-2"};
 const SCROLL_HANDLER_THROTTLE_MS = 50;
 const ActionBarComponent = forwardRef(({ type = 'horizontal', showDivider = 'with-scroll', showProgress = false, primaryActions, secondaryActions, additionalContent, padding, vertPadding, bottom = 0, isFixed = false, isSticky = false, onDomPositionReached, className, }, ref) => {
@@ -28,6 +28,8 @@ const ActionBarComponent = forwardRef(({ type = 'horizontal', showDivider = 'wit
     const wasHandledScroll = useRef(false);
     const onDomPositionReachedRef = useRef(onDomPositionReached);
     onDomPositionReachedRef.current = onDomPositionReached;
+    const [verticalLayout, setVerticalLayout] = useState(null);
+    const verticalLayoutRef = useRef(null);
     const { shouldShowProgress, shouldShowDivider } = shouldShowDividerOrProgress({
         isMobile,
         showDivider,
@@ -86,23 +88,30 @@ const ActionBarComponent = forwardRef(({ type = 'horizontal', showDivider = 'wit
     // Эффект проверяющий уместилось ли все содержимое и переключающий отображение на вертикальное
     useLayoutEffect(() => {
         if (!actionsStackRef.current || !actionsStackWrapperRef.current) {
-            return void 0;
+            return;
         }
         if (type !== 'auto') {
-            return void 0;
+            const enableVerticalLayout = type === 'vertical';
+            verticalLayoutRef.current = enableVerticalLayout;
+            setVerticalLayout(enableVerticalLayout);
+        }
+        else {
+            toggleVerticalLayout(false);
+            const enableVerticalLayout = (!!additionalContentRef.current &&
+                !!additionalContentWrapperRef.current &&
+                (additionalContentRef.current.offsetHeight > additionalContentWrapperRef.current.offsetHeight ||
+                    additionalContentRef.current.offsetWidth >
+                        additionalContentWrapperRef.current.offsetWidth)) ||
+                actionsStackRef.current.scrollWidth > actionsStackWrapperRef.current.offsetWidth;
+            if (enableVerticalLayout !== verticalLayoutRef.current) {
+                verticalLayoutRef.current = enableVerticalLayout;
+                setVerticalLayout(enableVerticalLayout);
+            }
+            else {
+                toggleVerticalLayout(verticalLayoutRef.current);
+            }
         }
-        toggleVerticalLayout(false);
-        const enableVerticalLayout = (!!additionalContentRef.current &&
-            !!additionalContentWrapperRef.current &&
-            (additionalContentRef.current.offsetHeight > additionalContentWrapperRef.current.offsetHeight ||
-                additionalContentRef.current.offsetWidth > additionalContentWrapperRef.current.offsetWidth)) ||
-            actionsStackRef.current.scrollWidth > actionsStackWrapperRef.current.offsetWidth;
-        toggleVerticalLayout(enableVerticalLayout);
-        return void 0;
     }, [type, primaryActions, secondaryActions, additionalContent, breakpoint, toggleVerticalLayout]);
-    if (!primaryActions && !secondaryActions && !additionalContent) {
-        return null;
-    }
     const paddingValue = padding ? `${vertPadding ?? padding}px ${padding}px` : '';
     return (jsx(Layer, { layer: "action-bar", children: jsxs("div", { ref: actionBarRefCallback, "data-qa": "action-bar", style: bottom ? { bottom: `${bottom}px` } : {}, className: classnames(styles.actionBar, {
                 [styles.actionBarIsFixed]: isFixed,
@@ -110,20 +119,29 @@ const ActionBarComponent = forwardRef(({ type = 'horizontal', showDivider = 'wit
                 [styles.actionBarWithProgressBar]: shouldShowProgress,
             }, className), children: [shouldShowDivider && (jsx("div", { "data-qa": "divider", children: jsx(Divider, { mode: "horizontal" }) })), shouldShowProgress && (jsx("div", { "data-qa": "progress-bar", className: styles.progressBar, children: showProgress })), jsx("div", { "data-qa": "actions-container", className: classnames({
                         [styles.actionBarWithDefaultPadding]: isFixedOrSticky && !paddingValue,
-                    }), style: paddingValue ? { padding: paddingValue } : {}, children: jsx("div", { ref: actionsStackWrapperRef, className: styles.actionsStackWrapper, children: jsxs("div", { className: classnames(styles.actionsStack, styles[`actions-stack_${type}`], {
+                    }), style: paddingValue ? { padding: paddingValue } : {}, children: jsx("div", { ref: actionsStackWrapperRef, className: styles.actionsStackWrapper, children: jsx("div", { className: classnames(styles.actionsStack, {
+                                [styles.actionsStackHorizontal]: !verticalLayout,
+                                [styles.actionsStackVertical]: verticalLayout,
                                 [styles.rightOnlyActions]: !secondaryActions && !additionalContent,
-                            }), ref: actionsStackRef, "data-qa": `actions-container-${type}`, children: [!!secondaryActions && (jsx("div", { className: classnames(styles.secondaryActions, {
-                                        [styles.horizontalActionsContainer]: type === 'horizontal' || type === 'auto',
-                                        [styles.verticalActionsContainer]: type === 'vertical',
-                                        [STRETCHED_WRAPPER_CLASS]: type === 'vertical',
-                                    }), ref: secondaryActionsRef, "data-qa": "secondary-actions", children: secondaryActions })), !!additionalContent && (jsx("div", { className: classnames(styles.additionalContentContainer), children: jsx("div", { className: classnames(styles.additionalContentWrapper, {
-                                            [styles.additionalContentVertical]: type === 'vertical',
-                                            [styles.additionalContentOverflowWrapper]: !!primaryActions || !!secondaryActions,
-                                        }), ref: additionalContentWrapperRef, children: jsx("div", { ref: additionalContentRef, className: styles.additionalContentDimensions, "data-qa": "additional-content", children: additionalContent }) }) })), !!primaryActions && (jsx("div", { className: classnames(styles.primaryActions, {
-                                        [styles.horizontalActionsContainer]: type === 'horizontal' || type === 'auto',
-                                        [styles.verticalActionsContainer]: type === 'vertical',
-                                        [STRETCHED_WRAPPER_CLASS]: type === 'vertical',
-                                    }), ref: primaryActionsRef, "data-qa": "primary-actions", children: primaryActions }))] }) }) })] }) }));
+                            }), ref: actionsStackRef, "data-qa": `actions-container-${type}`, children: verticalLayout ? (jsxs(Fragment, { children: [!!additionalContent && (jsx("div", { className: classnames(styles.additionalContentContainer), children: jsx("div", { className: classnames(styles.additionalContentWrapper, styles.additionalContentVertical, {
+                                                [styles.additionalContentOverflowWrapper]: !!primaryActions || !!secondaryActions,
+                                            }), ref: additionalContentWrapperRef, children: jsx("div", { className: styles.additionalContentDimensions, ref: additionalContentRef, "data-qa": "additional-content", children: additionalContent }) }) }, "additional-content")), !!primaryActions &&
+                                        (() => {
+                                            let verticalPrimaryActions = primaryActions;
+                                            let reverseFlexOrder = true;
+                                            if (Array.isArray(primaryActions)) {
+                                                verticalPrimaryActions = Children.toArray(primaryActions).reverse();
+                                                reverseFlexOrder = false;
+                                            }
+                                            else if (isValidElement(primaryActions) &&
+                                                primaryActions.type === Fragment$1) {
+                                                verticalPrimaryActions = Children.toArray(primaryActions.props.children).reverse();
+                                                reverseFlexOrder = false;
+                                            }
+                                            return (jsx("div", { className: classnames(styles.verticalActionsContainer, { [styles.reverse]: reverseFlexOrder }, STRETCHED_WRAPPER_CLASS), "data-qa": "primary-actions", ref: primaryActionsRef, children: verticalPrimaryActions }, "primary-actions"));
+                                        })(), !!secondaryActions && (jsx("div", { className: classnames(styles.verticalActionsContainer, STRETCHED_WRAPPER_CLASS), "data-qa": "secondary-actions", ref: secondaryActionsRef, children: secondaryActions }, "secondary-actions"))] })) : (jsxs(Fragment, { children: [!!secondaryActions && (jsx("div", { className: classnames(styles.horizontalActionsContainer), "data-qa": "secondary-actions", ref: secondaryActionsRef, children: secondaryActions }, "secondary-actions")), !!additionalContent && (jsx("div", { className: classnames(styles.additionalContentContainer), children: jsx("div", { className: classnames(styles.additionalContentWrapper, {
+                                                [styles.additionalContentOverflowWrapper]: !!primaryActions || !!secondaryActions,
+                                            }), ref: additionalContentWrapperRef, children: jsx("div", { ref: additionalContentRef, className: styles.additionalContentDimensions, "data-qa": "additional-content", children: additionalContent }) }) }, "additional-content")), !!primaryActions && (jsx("div", { className: classnames(styles.horizontalActionsContainer), "data-qa": "primary-actions", ref: primaryActionsRef, children: primaryActions }, "primary-actions"))] })) }) }) })] }) }));
 });
 ActionBarComponent.displayName = 'ActionBar';
 const ActionBar = ActionBarComponent;

package/ActionBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ActionBar.js","sources":["../src/ActionBar.tsx"],"sourcesContent":["import { useEffect, useRef, useState, useLayoutEffect, useCallback, forwardRef } from 'react';\nimport classnames from 'classnames';\n\nimport { throttle } from '@hh.ru/magritte-common-func-utils';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { ActionBarProps, OnDomPositionReached } 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\nconst ActionBarComponent = forwardRef<HTMLElement, ActionBarProps>(\n (\n {\n type = 'horizontal',\n showDivider = 'with-scroll',\n showProgress = false,\n primaryActions,\n secondaryActions,\n additionalContent,\n padding,\n vertPadding,\n bottom = 0,\n isFixed = false,\n isSticky = false,\n onDomPositionReached,\n className,\n },\n ref\n ) => {\n const isFixedOrSticky = isFixed \|\| isSticky;\n const { breakpoint, isMobile } = useBreakpoint();\n const [isScrollEnd, setIsScrollEnd] = useState(false);\n const actionBarRef = useRef<HTMLDivElement>(null);\n const actionBarRefCallback = useMultipleRefs(ref, actionBarRef);\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 const wasHandledScroll = useRef<boolean>(false);\n const onDomPositionReachedRef = useRef<OnDomPositionReached \| undefined>(onDomPositionReached);\n onDomPositionReachedRef.current = onDomPositionReached;\n\n const { shouldShowProgress, shouldShowDivider } = shouldShowDividerOrProgress({\n isMobile,\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 if (!scrollableParent) {\n return void 0;\n }\n let handleScroll = throttle(() => {\n wasHandledScroll.current = true;\n const isScrollEnd =\n scrollableParent &&\n Math.abs(\n scrollableParent.scrollHeight - scrollableParent.clientHeight - scrollableParent.scrollTop\n ) < 1;\n setIsScrollEnd(!!isScrollEnd);\n }, SCROLL_HANDLER_THROTTLE_MS);\n\n // для sticky дивайдер надо скрыть, когда блок встал на свое место в dom\n if (isSticky) {\n handleScroll = throttle(() => {\n wasHandledScroll.current = true;\n const bottomRect = actionBarRef.current?.getBoundingClientRect().bottom \|\| 0;\n setIsScrollEnd(Math.abs(bottomRect - window.innerHeight) > 1);\n }, SCROLL_HANDLER_THROTTLE_MS);\n }\n\n if (scrollableParent === document.documentElement) {\n window.addEventListener('scroll', handleScroll);\n } else {\n scrollableParent.addEventListener('scroll', handleScroll);\n }\n return () => {\n wasHandledScroll.current = false;\n window.removeEventListener('scroll', handleScroll);\n scrollableParent?.removeEventListener('scroll', handleScroll);\n };\n }, [shouldShowProgress, showDivider, isSticky]);\n\n useEffect(() => {\n if (!wasHandledScroll.current \|\| !isFixedOrSticky) {\n return;\n }\n onDomPositionReachedRef.current?.(isScrollEnd);\n }, [isScrollEnd, isFixedOrSticky]);\n\n const toggleVerticalLayout = useCallback((enable: boolean) => {\n actionsStackRef.current?.classList.toggle(styles.actionsStackVertical, 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 useLayoutEffect(() => {\n if (!actionsStackRef.current \|\| !actionsStackWrapperRef.current) {\n return void 0;\n }\n if (type !== 'auto') {\n return void 0;\n }\n toggleVerticalLayout(false);\n const enableVerticalLayout =\n (!!additionalContentRef.current &&\n !!additionalContentWrapperRef.current &&\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 return void 0;\n }, [type, primaryActions, secondaryActions, additionalContent, breakpoint, toggleVerticalLayout]);\n\n if (!primaryActions && !secondaryActions && !additionalContent) {\n return null;\n }\n\n const paddingValue = padding ? `${vertPadding ?? padding}px ${padding}px` : '';\n return (\n <Layer layer=\"action-bar\">\n <div\n ref={actionBarRefCallback}\n data-qa=\"action-bar\"\n style={bottom ? { bottom: `${bottom}px` } : {}}\n className={classnames(\n styles.actionBar,\n {\n [styles.actionBarIsFixed]: isFixed,\n [styles.actionBarIsSticky]: isSticky,\n [styles.actionBarWithProgressBar]: shouldShowProgress,\n },\n className\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\n data-qa=\"actions-container\"\n className={classnames({\n [styles.actionBarWithDefaultPadding]: isFixedOrSticky && !paddingValue,\n })}\n style={paddingValue ? { padding: paddingValue } : {}}\n >\n <div ref={actionsStackWrapperRef} className={styles.actionsStackWrapper}>\n <div\n className={classnames(styles.actionsStack, styles[`actions-stack_${type}`], {\n [styles.rightOnlyActions]: !secondaryActions && !additionalContent,\n })}\n ref={actionsStackRef}\n data-qa={`actions-container-${type}`}\n >\n {!!secondaryActions && (\n <div\n className={classnames(styles.secondaryActions, {\n [styles.horizontalActionsContainer]:\n type === 'horizontal' \|\| type === 'auto',\n [styles.verticalActionsContainer]: type === 'vertical',\n [STRETCHED_WRAPPER_CLASS]: type === '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.additionalContentVertical]: type === 'vertical',\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(styles.primaryActions, {\n [styles.horizontalActionsContainer]:\n type === 'horizontal' \|\| type === 'auto',\n [styles.verticalActionsContainer]: type === 'vertical',\n [STRETCHED_WRAPPER_CLASS]: type === 'vertical',\n })}\n ref={primaryActionsRef}\n data-qa=\"primary-actions\"\n >\n {primaryActions}\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n </Layer>\n );\n }\n);\n\nActionBarComponent.displayName = 'ActionBar';\nconst ActionBar = ActionBarComponent as typeof ActionBarComponent & { isActionBar: true };\nActionBar.isActionBar = true;\n\nexport { ActionBar };\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
1	+ {"version":3,"file":"ActionBar.js","sources":["../src/ActionBar.tsx"],"sourcesContent":["import {\n Children,\n Fragment,\n forwardRef,\n isValidElement,\n useCallback,\n useEffect,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\nimport classnames from 'classnames';\n\nimport { throttle } from '@hh.ru/magritte-common-func-utils';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { ActionBarProps, OnDomPositionReached } 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\nconst ActionBarComponent = forwardRef<HTMLElement, ActionBarProps>(\n (\n {\n type = 'horizontal',\n showDivider = 'with-scroll',\n showProgress = false,\n primaryActions,\n secondaryActions,\n additionalContent,\n padding,\n vertPadding,\n bottom = 0,\n isFixed = false,\n isSticky = false,\n onDomPositionReached,\n className,\n },\n ref\n ) => {\n const isFixedOrSticky = isFixed \|\| isSticky;\n const { breakpoint, isMobile } = useBreakpoint();\n const [isScrollEnd, setIsScrollEnd] = useState(false);\n const actionBarRef = useRef<HTMLDivElement>(null);\n const actionBarRefCallback = useMultipleRefs(ref, actionBarRef);\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 const wasHandledScroll = useRef<boolean>(false);\n const onDomPositionReachedRef = useRef<OnDomPositionReached \| undefined>(onDomPositionReached);\n onDomPositionReachedRef.current = onDomPositionReached;\n const [verticalLayout, setVerticalLayout] = useState<boolean \| null>(null);\n const verticalLayoutRef = useRef<boolean \| null>(null);\n\n const { shouldShowProgress, shouldShowDivider } = shouldShowDividerOrProgress({\n isMobile,\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 if (!scrollableParent) {\n return void 0;\n }\n let handleScroll = throttle(() => {\n wasHandledScroll.current = true;\n const isScrollEnd =\n scrollableParent &&\n Math.abs(\n scrollableParent.scrollHeight - scrollableParent.clientHeight - scrollableParent.scrollTop\n ) < 1;\n setIsScrollEnd(!!isScrollEnd);\n }, SCROLL_HANDLER_THROTTLE_MS);\n\n // для sticky дивайдер надо скрыть, когда блок встал на свое место в dom\n if (isSticky) {\n handleScroll = throttle(() => {\n wasHandledScroll.current = true;\n const bottomRect = actionBarRef.current?.getBoundingClientRect().bottom \|\| 0;\n setIsScrollEnd(Math.abs(bottomRect - window.innerHeight) > 1);\n }, SCROLL_HANDLER_THROTTLE_MS);\n }\n\n if (scrollableParent === document.documentElement) {\n window.addEventListener('scroll', handleScroll);\n } else {\n scrollableParent.addEventListener('scroll', handleScroll);\n }\n return () => {\n wasHandledScroll.current = false;\n window.removeEventListener('scroll', handleScroll);\n scrollableParent?.removeEventListener('scroll', handleScroll);\n };\n }, [shouldShowProgress, showDivider, isSticky]);\n\n useEffect(() => {\n if (!wasHandledScroll.current \|\| !isFixedOrSticky) {\n return;\n }\n onDomPositionReachedRef.current?.(isScrollEnd);\n }, [isScrollEnd, isFixedOrSticky]);\n\n const toggleVerticalLayout = useCallback((enable: boolean) => {\n actionsStackRef.current?.classList.toggle(styles.actionsStackVertical, 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 useLayoutEffect(() => {\n if (!actionsStackRef.current \|\| !actionsStackWrapperRef.current) {\n return;\n }\n\n if (type !== 'auto') {\n const enableVerticalLayout = type === 'vertical';\n verticalLayoutRef.current = enableVerticalLayout;\n setVerticalLayout(enableVerticalLayout);\n } else {\n toggleVerticalLayout(false);\n const enableVerticalLayout =\n (!!additionalContentRef.current &&\n !!additionalContentWrapperRef.current &&\n (additionalContentRef.current.offsetHeight > additionalContentWrapperRef.current.offsetHeight \|\|\n additionalContentRef.current.offsetWidth >\n additionalContentWrapperRef.current.offsetWidth)) \|\|\n actionsStackRef.current.scrollWidth > actionsStackWrapperRef.current.offsetWidth;\n if (enableVerticalLayout !== verticalLayoutRef.current) {\n verticalLayoutRef.current = enableVerticalLayout;\n setVerticalLayout(enableVerticalLayout);\n } else {\n toggleVerticalLayout(verticalLayoutRef.current);\n }\n }\n }, [type, primaryActions, secondaryActions, additionalContent, breakpoint, toggleVerticalLayout]);\n\n const paddingValue = padding ? `${vertPadding ?? padding}px ${padding}px` : '';\n return (\n <Layer layer=\"action-bar\">\n <div\n ref={actionBarRefCallback}\n data-qa=\"action-bar\"\n style={bottom ? { bottom: `${bottom}px` } : {}}\n className={classnames(\n styles.actionBar,\n {\n [styles.actionBarIsFixed]: isFixed,\n [styles.actionBarIsSticky]: isSticky,\n [styles.actionBarWithProgressBar]: shouldShowProgress,\n },\n className\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\n data-qa=\"actions-container\"\n className={classnames({\n [styles.actionBarWithDefaultPadding]: isFixedOrSticky && !paddingValue,\n })}\n style={paddingValue ? { padding: paddingValue } : {}}\n >\n <div ref={actionsStackWrapperRef} className={styles.actionsStackWrapper}>\n <div\n className={classnames(styles.actionsStack, {\n [styles.actionsStackHorizontal]: !verticalLayout,\n [styles.actionsStackVertical]: verticalLayout,\n [styles.rightOnlyActions]: !secondaryActions && !additionalContent,\n })}\n ref={actionsStackRef}\n data-qa={`actions-container-${type}`}\n >\n {verticalLayout ? (\n <>\n {!!additionalContent && (\n <div\n className={classnames(styles.additionalContentContainer)}\n key=\"additional-content\"\n >\n <div\n className={classnames(\n styles.additionalContentWrapper,\n styles.additionalContentVertical,\n {\n [styles.additionalContentOverflowWrapper]:\n !!primaryActions \|\| !!secondaryActions,\n }\n )}\n ref={additionalContentWrapperRef}\n >\n <div\n className={styles.additionalContentDimensions}\n ref={additionalContentRef}\n data-qa=\"additional-content\"\n >\n {additionalContent}\n </div>\n </div>\n </div>\n )}\n {!!primaryActions &&\n (() => {\n let verticalPrimaryActions = primaryActions;\n let reverseFlexOrder = true;\n if (Array.isArray(primaryActions)) {\n verticalPrimaryActions = Children.toArray(primaryActions).reverse();\n reverseFlexOrder = false;\n } else if (\n isValidElement(primaryActions) &&\n primaryActions.type === Fragment\n ) {\n verticalPrimaryActions = Children.toArray(\n (primaryActions.props as React.PropsWithChildren).children\n ).reverse();\n reverseFlexOrder = false;\n }\n\n return (\n <div\n className={classnames(\n styles.verticalActionsContainer,\n { [styles.reverse]: reverseFlexOrder },\n STRETCHED_WRAPPER_CLASS\n )}\n data-qa=\"primary-actions\"\n key=\"primary-actions\"\n ref={primaryActionsRef}\n >\n {verticalPrimaryActions}\n </div>\n );\n })()}\n {!!secondaryActions && (\n <div\n className={classnames(\n styles.verticalActionsContainer,\n STRETCHED_WRAPPER_CLASS\n )}\n data-qa=\"secondary-actions\"\n key=\"secondary-actions\"\n ref={secondaryActionsRef}\n >\n {secondaryActions}\n </div>\n )}\n </>\n ) : (\n <>\n {!!secondaryActions && (\n <div\n className={classnames(styles.horizontalActionsContainer)}\n data-qa=\"secondary-actions\"\n key=\"secondary-actions\"\n ref={secondaryActionsRef}\n >\n {secondaryActions}\n </div>\n )}\n {!!additionalContent && (\n <div\n className={classnames(styles.additionalContentContainer)}\n key=\"additional-content\"\n >\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(styles.horizontalActionsContainer)}\n data-qa=\"primary-actions\"\n key=\"primary-actions\"\n ref={primaryActionsRef}\n >\n {primaryActions}\n </div>\n )}\n </>\n )}\n </div>\n </div>\n </div>\n </div>\n </Layer>\n );\n }\n);\n\nActionBarComponent.displayName = 'ActionBar';\nconst ActionBar = ActionBarComponent as typeof ActionBarComponent & { isActionBar: true };\nActionBar.isActionBar = true;\n\nexport { ActionBar };\n"],"names":["_jsx","_jsxs","_Fragment","Fragment"],"mappings":"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"}

package/ActionBarViewportAdapter.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { getScrollbarWidth } from '@hh.ru/magritte-common-modal-helper';
 import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
 import { isActionBarComponent } from './types.js';
-var styles = {"action-bar-viewport-adapter":"magritte-action-bar-viewport-adapter___yKxEe_5-3-0","actionBarViewportAdapter":"magritte-action-bar-viewport-adapter___yKxEe_5-3-0"};
+var styles = {"action-bar-viewport-adapter":"magritte-action-bar-viewport-adapter___yKxEe_5-3-2","actionBarViewportAdapter":"magritte-action-bar-viewport-adapter___yKxEe_5-3-2"};
 const ActionBarViewportAdapter = ({ children }) => {
     const isActionBarIntoChildren = isActionBarComponent(children);

package/index.css CHANGED Viewed

@@ -5,147 +5,141 @@
 .magritte-night-theme{
   --magritte-color-background-body-v24-3-0:#000000;
 }
-.magritte-action-bar___Tkm7C_5-3-0{
+.magritte-action-bar___Tkm7C_5-3-2{
   --magritte-ui-action-bar-scroll-width:0;
   background-color:var(--magritte-ui-action-bar-background-color-override, var(--magritte-ui-container-background-color-override, var(--magritte-color-background-body-v24-3-0)));
 }
-.magritte-action-bar-is-fixed___Zjqtf_5-3-0{
+.magritte-action-bar-is-fixed___Zjqtf_5-3-2{
   position:fixed;
   bottom:0;
   left:0;
   width:100%;
 }
-.magritte-action-bar-is-sticky___q272C_5-3-0{
+.magritte-action-bar-is-sticky___q272C_5-3-2{
   position:sticky;
   bottom:0;
   left:0;
   width:100%;
   margin-left:calc(-50vw + 50%);
 }
-.magritte-action-bar-with-default-padding___QcKnA_5-3-0{
+.magritte-action-bar-with-default-padding___QcKnA_5-3-2{
   padding:16px 0;
 }
-body:not(.magritte-old-layout) .magritte-action-bar-with-default-padding___QcKnA_5-3-0{
+body:not(.magritte-old-layout) .magritte-action-bar-with-default-padding___QcKnA_5-3-2{
   padding:16px;
 }
 @media (min-width: 600px){
-  body:not(.magritte-old-layout) .magritte-action-bar-with-default-padding___QcKnA_5-3-0{
+  body:not(.magritte-old-layout) .magritte-action-bar-with-default-padding___QcKnA_5-3-2{
     padding:16px 56px;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-action-bar-with-default-padding___QcKnA_5-3-0{
+  body:not(.magritte-old-layout) .magritte-action-bar-with-default-padding___QcKnA_5-3-2{
     margin:0 auto;
     padding:16px 0px;
     width:888px;
   }
 }
 @media (min-width: 1280px){
-  body:not(.magritte-old-layout) .magritte-action-bar-with-default-padding___QcKnA_5-3-0{
+  body:not(.magritte-old-layout) .magritte-action-bar-with-default-padding___QcKnA_5-3-2{
     width:1128px;
   }
 }
 @media (min-width: 1440px){
-  body:not(.magritte-old-layout) .magritte-action-bar-with-default-padding___QcKnA_5-3-0{
+  body:not(.magritte-old-layout) .magritte-action-bar-with-default-padding___QcKnA_5-3-2{
     width:1224px;
   }
 }
 @media (min-width: 1920px){
-  body:not(.magritte-old-layout) .magritte-action-bar-with-default-padding___QcKnA_5-3-0{
+  body:not(.magritte-old-layout) .magritte-action-bar-with-default-padding___QcKnA_5-3-2{
     width:1416px;
   }
 }
-body.magritte-old-layout .magritte-action-bar-with-default-padding___QcKnA_5-3-0{
+body.magritte-old-layout .magritte-action-bar-with-default-padding___QcKnA_5-3-2{
   padding:15px;
 }
 @media (min-width: 700px){
-  body.magritte-old-layout .magritte-action-bar-with-default-padding___QcKnA_5-3-0{
+  body.magritte-old-layout .magritte-action-bar-with-default-padding___QcKnA_5-3-2{
     margin:0 auto;
     width:610px;
   }
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-action-bar-with-default-padding___QcKnA_5-3-0{
+  body.magritte-old-layout .magritte-action-bar-with-default-padding___QcKnA_5-3-2{
     width:930px;
   }
 }
 @media (min-width: 1340px){
-  body.magritte-old-layout .magritte-action-bar-with-default-padding___QcKnA_5-3-0{
+  body.magritte-old-layout .magritte-action-bar-with-default-padding___QcKnA_5-3-2{
     width:1250px;
   }
 }
-.magritte-action-bar-with-progress-bar___mprqw_5-3-0{
+.magritte-action-bar-with-progress-bar___mprqw_5-3-2{
   border-radius:8px 8px 0 0;
 }
-.magritte-actions-stack___12VkP_5-3-0{
+.magritte-actions-stack___12VkP_5-3-2{
   display:flex;
   width:100%;
 }
-.magritte-actions-stack___12VkP_5-3-0.magritte-right-only-actions___84fc8_5-3-0{
+.magritte-actions-stack___12VkP_5-3-2.magritte-right-only-actions___84fc8_5-3-2{
   justify-content:flex-end;
 }
-.magritte-actions-stack_auto___ayohg_5-3-0,
-.magritte-actions-stack_horizontal___p3HgB_5-3-0{
+.magritte-actions-stack_horizontal___p3HgB_5-3-2{
   display:flex;
   flex-direction:row;
   justify-content:space-between;
   gap:24px;
 }
-.magritte-actions-stack_vertical___5UtzF_5-3-0{
+.magritte-actions-stack_vertical___5UtzF_5-3-2{
   display:flex;
-  flex-direction:column-reverse;
+  flex-direction:column;
   gap:12px;
 }
-.magritte-actions-stack_vertical___5UtzF_5-3-0 .magritte-additional-content-container___N4Q-l_5-3-0{
-  order:2;
-}
-.magritte-actions-stack_vertical___5UtzF_5-3-0 .magritte-additional-content-overflow-wrapper___hpCEQ_5-3-0{
+.magritte-actions-stack_vertical___5UtzF_5-3-2 .magritte-additional-content-overflow-wrapper___hpCEQ_5-3-2{
   position:static;
 }
-.magritte-additional-content-container___N4Q-l_5-3-0{
+.magritte-additional-content-container___N4Q-l_5-3-2{
   display:flex;
   flex:1 1 100%;
   overflow:hidden;
   position:relative;
 }
-.magritte-additional-content-container___N4Q-l_5-3-0.magritte-additional-content-vertical___3Ba1i_5-3-0{
+.magritte-additional-content-container___N4Q-l_5-3-2.magritte-additional-content-vertical___3Ba1i_5-3-2{
   margin-bottom:2px;
 }
-.magritte-additional-content-overflow-wrapper___hpCEQ_5-3-0{
+.magritte-additional-content-overflow-wrapper___hpCEQ_5-3-2{
   position:absolute;
   inset:0;
 }
-.magritte-additional-content-wrapper___dpdp5_5-3-0{
+.magritte-additional-content-wrapper___dpdp5_5-3-2{
   width:100%;
 }
-.magritte-additional-content-dimensions___yEIwY_5-3-0{
+.magritte-additional-content-dimensions___yEIwY_5-3-2{
   display:flex;
   align-items:center;
   width:100%;
   min-height:100%;
 }
-.magritte-horizontal-actions-container___dKSH8_5-3-0{
+.magritte-horizontal-actions-container___dKSH8_5-3-2{
   display:flex;
   flex:0 0 auto;
   gap:12px;
   align-items:center;
 }
-.magritte-vertical-actions-container___j1toG_5-3-0{
+.magritte-vertical-actions-container___j1toG_5-3-2{
   display:flex;
+  flex-direction:column;
   gap:12px;
   align-items:center;
 }
-.magritte-vertical-actions-container___j1toG_5-3-0.magritte-primary-actions___jJlQv_5-3-0{
+.magritte-vertical-actions-container___j1toG_5-3-2.magritte-reverse___mFIgd_5-3-2{
   flex-direction:column-reverse;
 }
-.magritte-vertical-actions-container___j1toG_5-3-0.magritte-secondary-actions___A9JUv_5-3-0{
-  flex-direction:column;
-}
-.magritte-progress-bar___tSTjx_5-3-0{
+.magritte-progress-bar___tSTjx_5-3-2{
   padding:4px 4px 0;
 }
-.magritte-action-bar-viewport-adapter___yKxEe_5-3-0{
+.magritte-action-bar-viewport-adapter___yKxEe_5-3-2{
   width:calc(100vw - var(--magritte-ui-action-bar-scroll-width));
   margin-left:calc(-50vw + 50% + var(--magritte-ui-action-bar-scroll-width) / 2);
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-action-bar",
-  "version": "5.3.0",
+  "version": "5.3.2",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -26,7 +26,7 @@
     "@hh.ru/magritte-internal-layer-name": "3.3.0",
     "@hh.ru/magritte-types": "5.0.5",
     "@hh.ru/magritte-ui-breakpoint": "6.0.6",
-    "@hh.ru/magritte-ui-button": "7.1.1",
+    "@hh.ru/magritte-ui-button": "7.1.2",
     "@hh.ru/magritte-ui-divider": "3.0.15",
     "@hh.ru/magritte-ui-grid": "2.2.48",
     "@hh.ru/magritte-ui-layer": "3.2.0",
@@ -39,5 +39,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "83b35a5f729c8f70b4da1d92e4b8022cc7cb2127"
+  "gitHead": "c9930c21240dac1610236be666e8d0c45c60f4bc"
 }