@hh.ru/magritte-ui-floating-button 2.1.3 → 3.0.0

package/FloatingButton.d.ts

@@ -1,3 +1,4 @@
 import type { PolymorphicComponentWithRef } from '@hh.ru/magritte-types';
-import type { FloatingButtonProps } from '@hh.ru/magritte-ui-floating-button/types';
+import type { FloatingButtonProps, FloatingButtonPropsWithStackMode } from '@hh.ru/magritte-ui-floating-button/types';
+export declare const FloatingButtonWithStackMode: PolymorphicComponentWithRef<FloatingButtonPropsWithStackMode, "button">;
 export declare const FloatingButton: PolymorphicComponentWithRef<FloatingButtonProps, "button">;

package/FloatingButton.js

@@ -1,16 +1,17 @@
 import './index.css';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useRef, useState, useLayoutEffect } from 'react';
+import { forwardRef, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
 import classnames from 'classnames';
 import { useServerEnv } from '@hh.ru/magritte-common-is-server-env';
+import { tokenSemanticAnimationTimeSDuration } from '@hh.ru/magritte-design-tokens/types';
 import { ComponentWithBadge } from '@hh.ru/magritte-ui-badge';
 import { Layer } from '@hh.ru/magritte-ui-layer';
 import { Loader } from '@hh.ru/magritte-ui-loader';
 import { Text } from '@hh.ru/magritte-ui-typography';
 
-var styles = {"wrapper":"magritte-wrapper___7m9lC_2-1-3","animation-timeout":"magritte-animation-timeout___NL8n0_2-1-3","animationTimeout":"magritte-animation-timeout___NL8n0_2-1-3","button":"magritte-button___nL-Hn_2-1-3","loading":"magritte-loading___C0oPZ_2-1-3","withIconAndLabel":"magritte-withIconAndLabel___Qa-lU_2-1-3","right":"magritte-right___3n0Rz_2-1-3","content":"magritte-content___JNpTZ_2-1-3","left":"magritte-left___GnzU7_2-1-3","center":"magritte-center___MdA40_2-1-3","postfix":"magritte-postfix___r0EZ6_2-1-3","icon":"magritte-icon___VpqJt_2-1-3","textless":"magritte-textless___IbYgp_2-1-3","label":"magritte-label___EPgvj_2-1-3","withPostfix":"magritte-withPostfix___PmQAz_2-1-3","hideLabel":"magritte-hideLabel___K79XM_2-1-3","withLabelOnHover":"magritte-withLabelOnHover___1oktd_2-1-3","loader":"magritte-loader___EPezG_2-1-3","enter-animation":"magritte-enter-animation___2sPz3_2-1-3","enterAnimation":"magritte-enter-animation___2sPz3_2-1-3","enter-animation-active":"magritte-enter-animation-active___Lq9eq_2-1-3","enterAnimationActive":"magritte-enter-animation-active___Lq9eq_2-1-3","exit-animation":"magritte-exit-animation___h2-7a_2-1-3","exitAnimation":"magritte-exit-animation___h2-7a_2-1-3","exit-animation-active":"magritte-exit-animation-active___w0F1a_2-1-3","exitAnimationActive":"magritte-exit-animation-active___w0F1a_2-1-3","button_style-neutral":"magritte-button_style-neutral___bPUwu_2-1-3","buttonStyleNeutral":"magritte-button_style-neutral___bPUwu_2-1-3","stackMode":"magritte-stackMode___RdOTJ_2-1-3","button_style-inverse":"magritte-button_style-inverse___Xgf26_2-1-3","buttonStyleInverse":"magritte-button_style-inverse___Xgf26_2-1-3"};
+var styles = {"wrapper":"magritte-wrapper___7m9lC_3-0-0","animation-timeout":"magritte-animation-timeout___NL8n0_3-0-0","animationTimeout":"magritte-animation-timeout___NL8n0_3-0-0","button":"magritte-button___nL-Hn_3-0-0","loading":"magritte-loading___C0oPZ_3-0-0","withIconAndLabel":"magritte-withIconAndLabel___Qa-lU_3-0-0","right":"magritte-right___3n0Rz_3-0-0","content":"magritte-content___JNpTZ_3-0-0","left":"magritte-left___GnzU7_3-0-0","center":"magritte-center___MdA40_3-0-0","postfix":"magritte-postfix___r0EZ6_3-0-0","icon":"magritte-icon___VpqJt_3-0-0","textless":"magritte-textless___IbYgp_3-0-0","label":"magritte-label___EPgvj_3-0-0","withPostfix":"magritte-withPostfix___PmQAz_3-0-0","hideLabel":"magritte-hideLabel___K79XM_3-0-0","withLabelOnHover":"magritte-withLabelOnHover___1oktd_3-0-0","loader":"magritte-loader___EPezG_3-0-0","enter-animation":"magritte-enter-animation___2sPz3_3-0-0","enterAnimation":"magritte-enter-animation___2sPz3_3-0-0","enter-animation-active":"magritte-enter-animation-active___Lq9eq_3-0-0","enterAnimationActive":"magritte-enter-animation-active___Lq9eq_3-0-0","exit-animation":"magritte-exit-animation___h2-7a_3-0-0","exitAnimation":"magritte-exit-animation___h2-7a_3-0-0","exit-animation-active":"magritte-exit-animation-active___w0F1a_3-0-0","exitAnimationActive":"magritte-exit-animation-active___w0F1a_3-0-0","button_style-neutral":"magritte-button_style-neutral___bPUwu_3-0-0","buttonStyleNeutral":"magritte-button_style-neutral___bPUwu_3-0-0","stackMode":"magritte-stackMode___RdOTJ_3-0-0","button_style-inverse":"magritte-button_style-inverse___Xgf26_3-0-0","buttonStyleInverse":"magritte-button_style-inverse___Xgf26_3-0-0"};
 
 const ALLOWED_BADGE_SIZES = ['small'];
 const FloatingButtonComponent = ({ Element = 'button', style = 'neutral', disabled, borderRadius = 'halfHeight', icon: IconComponent, postfix, loading, host, children, className, inlineStyle, visible, labelOnHover: _labelOnHover, hideLabel: _hideLabel, badge, position = 'right', 'data-qa': dataQa = 'floating-button', stackMode = false, ...restProps }, ref) => {
@@ -18,18 +19,6 @@ const FloatingButtonComponent = ({ Element = 'button', style = 'neutral', disabl
     const hideLabel = _hideLabel && !!IconComponent;
     const isServerEnv = useServerEnv();
     const wrapperRef = useRef(null);
-    const [animationTimeout, setAnimationTimeout] = useState(0);
-    useLayoutEffect(() => {
-        const animationTimeoutElement = document.createElement('div');
-        animationTimeoutElement.classList.add(styles.animationTimeout);
-        document.body.appendChild(animationTimeoutElement);
-        const style = window.getComputedStyle(animationTimeoutElement);
-        const animationTimeout = parseInt(style.getPropertyValue(`--animation-duration`), 10);
-        if (Number.isInteger(animationTimeout)) {
-            setAnimationTimeout(animationTimeout);
-        }
-        document.body.removeChild(animationTimeoutElement);
-    }, []);
     if (isServerEnv) {
         return null;
     }
@@ -66,9 +55,10 @@ const FloatingButtonComponent = ({ Element = 'button', style = 'neutral', disabl
             enterActive: styles.enterAnimationActive,
             exit: styles.exitAnimation,
             exitActive: styles.exitAnimationActive,
-        }, timeout: animationTimeout, unmountOnExit: true, children: jsx(Layer, { layer: "floating-button", children: jsx("div", { className: classnames(styles.wrapper, styles[`${position}`], className), ref: wrapperRef, style: inlineStyle, "data-qa": `${dataQa}-wrapper`, children: button }) }) }), host?.current || document.body);
+        }, timeout: tokenSemanticAnimationTimeSDuration, unmountOnExit: true, children: jsx(Layer, { layer: "floating-button", children: jsx("div", { className: classnames(styles.wrapper, styles[`${position}`], className), ref: wrapperRef, style: inlineStyle, "data-qa": `${dataQa}-wrapper`, children: button }) }) }), host?.current || document.body);
 };
+const FloatingButtonWithStackMode = forwardRef(FloatingButtonComponent);
 const FloatingButton = forwardRef(FloatingButtonComponent);
 
-export { FloatingButton };
+export { FloatingButton, FloatingButtonWithStackMode };
 //# sourceMappingURL=FloatingButton.js.map

package/FloatingButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingButton.js","sources":["../src/FloatingButton.tsx"],"sourcesContent":["import React, { forwardRef, useLayoutEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { CSSTransition } from 'react-transition-group';\nimport classnames from 'classnames';\n\nimport { useServerEnv } from '@hh.ru/magritte-common-is-server-env';\nimport type { PolymorphicComponentWithRef, PolymorphicForwardRefRenderFunc } from '@hh.ru/magritte-types';\nimport { BadgeSize, ComponentWithBadge } from '@hh.ru/magritte-ui-badge';\nimport type { FloatingButtonProps, FloatingButtonPropsWithStackMode } from '@hh.ru/magritte-ui-floating-button/types';\nimport { Layer } from '@hh.ru/magritte-ui-layer';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './floating-button.less';\n\nconst ALLOWED_BADGE_SIZES: BadgeSize[] = ['small'];\n\nconst FloatingButtonComponent: PolymorphicForwardRefRenderFunc<FloatingButtonPropsWithStackMode, 'button'> = (\n    {\n        Element = 'button',\n        style = 'neutral',\n        disabled,\n        borderRadius = 'halfHeight',\n        icon: IconComponent,\n        postfix,\n        loading,\n        host,\n        children,\n        className,\n        inlineStyle,\n        visible,\n        labelOnHover: _labelOnHover,\n        hideLabel: _hideLabel,\n        badge,\n        position = 'right',\n        'data-qa': dataQa = 'floating-button',\n        stackMode = false,\n        ...restProps\n    },\n    ref\n) => {\n    const labelOnHover = _labelOnHover && !!IconComponent;\n    const hideLabel = _hideLabel && !!IconComponent;\n    const isServerEnv = useServerEnv();\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const [animationTimeout, setAnimationTimeout] = useState(0);\n\n    useLayoutEffect(() => {\n        const animationTimeoutElement = document.createElement('div');\n        animationTimeoutElement.classList.add(styles.animationTimeout);\n        document.body.appendChild(animationTimeoutElement);\n        const style = window.getComputedStyle(animationTimeoutElement);\n        const animationTimeout = parseInt(style.getPropertyValue(`--animation-duration`), 10);\n        if (Number.isInteger(animationTimeout)) {\n            setAnimationTimeout(animationTimeout);\n        }\n        document.body.removeChild(animationTimeoutElement);\n    }, []);\n\n    if (isServerEnv) {\n        return null;\n    }\n\n    const additionalAttributes: Record<string, unknown> = {\n        'data-qa': dataQa,\n    };\n    if (Element === 'button') {\n        additionalAttributes.type = 'button';\n    } else {\n        additionalAttributes.role = Element !== 'a' ? 'button' : undefined;\n        additionalAttributes['aria-disabled'] = disabled;\n    }\n    additionalAttributes.ref = ref;\n\n    let button = (\n        <Element\n            {...additionalAttributes}\n            {...restProps}\n            disabled={!!disabled}\n            tabIndex={disabled || loading ? -1 : 0}\n            className={classnames(styles.button, styles[`button_style-${style}`], {\n                [styles.loading]: !!loading,\n                [styles.withLabelOnHover]: !!labelOnHover,\n                [styles.hideLabel]: !!hideLabel || !children,\n                [styles.withPostfix]: !!postfix,\n                [styles.textless]: !postfix && (!children || !!hideLabel),\n                [styles.withIconAndLabel]: !!IconComponent && !!children && !hideLabel,\n                [styles.stackMode]: !!stackMode,\n            })}\n            style={{ borderRadius: borderRadius === 'halfHeight' ? '9999px' : `${borderRadius}px` }}\n        >\n            <span className={styles.content}>\n                {IconComponent && (\n                    <span className={styles.icon}>\n                        <IconComponent data-qa={`${dataQa}-icon`} />\n                    </span>\n                )}\n                <span className={styles.label} data-qa={`${dataQa}-label`}>\n                    <Text typography={'subtitle-1-semibold'}>{children}</Text>\n                </span>\n                {postfix && (\n                    <span className={styles.postfix} data-qa={`${dataQa}-postfix`}>\n                        <Text typography={'subtitle-1-semibold'}>{postfix}</Text>\n                    </span>\n                )}\n\n                {loading && (\n                    <span className={styles.loader}>\n                        <Loader size={24} />\n                    </span>\n                )}\n            </span>\n        </Element>\n    );\n\n    if (badge && !disabled) {\n        button = (\n            <ComponentWithBadge allowedSizes={ALLOWED_BADGE_SIZES} badge={badge} offset={stackMode ? 12 : 4} noClip>\n                {button}\n            </ComponentWithBadge>\n        );\n    }\n\n    if (stackMode) {\n        return button;\n    }\n\n    return createPortal(\n        <CSSTransition\n            appear\n            in={!!visible && !isServerEnv}\n            nodeRef={wrapperRef}\n            classNames={{\n                appear: styles.enterAnimation,\n                appearActive: styles.enterAnimationActive,\n                enter: styles.enterAnimation,\n                enterActive: styles.enterAnimationActive,\n                exit: styles.exitAnimation,\n                exitActive: styles.exitAnimationActive,\n            }}\n            timeout={animationTimeout}\n            unmountOnExit\n        >\n            <Layer layer=\"floating-button\">\n                <div\n                    className={classnames(styles.wrapper, styles[`${position}`], className)}\n                    ref={wrapperRef}\n                    style={inlineStyle}\n                    data-qa={`${dataQa}-wrapper`}\n                >\n                    {button}\n                </div>\n            </Layer>\n        </CSSTransition>,\n        host?.current || document.body\n    );\n};\n\nexport const FloatingButton = forwardRef(FloatingButtonComponent) as PolymorphicComponentWithRef<\n    FloatingButtonProps,\n    'button'\n>;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"FloatingButton.js","sources":["../src/FloatingButton.tsx"],"sourcesContent":["import { forwardRef, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport { CSSTransition } from 'react-transition-group';\nimport classnames from 'classnames';\n\nimport { useServerEnv } from '@hh.ru/magritte-common-is-server-env';\nimport { tokenSemanticAnimationTimeSDuration } from '@hh.ru/magritte-design-tokens/types';\nimport type { PolymorphicComponentWithRef, PolymorphicForwardRefRenderFunc } from '@hh.ru/magritte-types';\nimport { BadgeSize, ComponentWithBadge } from '@hh.ru/magritte-ui-badge';\nimport type { FloatingButtonProps, FloatingButtonPropsWithStackMode } from '@hh.ru/magritte-ui-floating-button/types';\nimport { Layer } from '@hh.ru/magritte-ui-layer';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './floating-button.less';\n\nconst ALLOWED_BADGE_SIZES: BadgeSize[] = ['small'];\n\nconst FloatingButtonComponent: PolymorphicForwardRefRenderFunc<FloatingButtonPropsWithStackMode, 'button'> = (\n    {\n        Element = 'button',\n        style = 'neutral',\n        disabled,\n        borderRadius = 'halfHeight',\n        icon: IconComponent,\n        postfix,\n        loading,\n        host,\n        children,\n        className,\n        inlineStyle,\n        visible,\n        labelOnHover: _labelOnHover,\n        hideLabel: _hideLabel,\n        badge,\n        position = 'right',\n        'data-qa': dataQa = 'floating-button',\n        stackMode = false,\n        ...restProps\n    },\n    ref\n) => {\n    const labelOnHover = _labelOnHover && !!IconComponent;\n    const hideLabel = _hideLabel && !!IconComponent;\n    const isServerEnv = useServerEnv();\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    if (isServerEnv) {\n        return null;\n    }\n\n    const additionalAttributes: Record<string, unknown> = {\n        'data-qa': dataQa,\n    };\n    if (Element === 'button') {\n        additionalAttributes.type = 'button';\n    } else {\n        additionalAttributes.role = Element !== 'a' ? 'button' : undefined;\n        additionalAttributes['aria-disabled'] = disabled;\n    }\n    additionalAttributes.ref = ref;\n\n    let button = (\n        <Element\n            {...additionalAttributes}\n            {...restProps}\n            disabled={!!disabled}\n            tabIndex={disabled || loading ? -1 : 0}\n            className={classnames(styles.button, styles[`button_style-${style}`], {\n                [styles.loading]: !!loading,\n                [styles.withLabelOnHover]: !!labelOnHover,\n                [styles.hideLabel]: !!hideLabel || !children,\n                [styles.withPostfix]: !!postfix,\n                [styles.textless]: !postfix && (!children || !!hideLabel),\n                [styles.withIconAndLabel]: !!IconComponent && !!children && !hideLabel,\n                [styles.stackMode]: !!stackMode,\n            })}\n            style={{ borderRadius: borderRadius === 'halfHeight' ? '9999px' : `${borderRadius}px` }}\n        >\n            <span className={styles.content}>\n                {IconComponent && (\n                    <span className={styles.icon}>\n                        <IconComponent data-qa={`${dataQa}-icon`} />\n                    </span>\n                )}\n                <span className={styles.label} data-qa={`${dataQa}-label`}>\n                    <Text typography={'subtitle-1-semibold'}>{children}</Text>\n                </span>\n                {postfix && (\n                    <span className={styles.postfix} data-qa={`${dataQa}-postfix`}>\n                        <Text typography={'subtitle-1-semibold'}>{postfix}</Text>\n                    </span>\n                )}\n\n                {loading && (\n                    <span className={styles.loader}>\n                        <Loader size={24} />\n                    </span>\n                )}\n            </span>\n        </Element>\n    );\n\n    if (badge && !disabled) {\n        button = (\n            <ComponentWithBadge allowedSizes={ALLOWED_BADGE_SIZES} badge={badge} offset={stackMode ? 12 : 4} noClip>\n                {button}\n            </ComponentWithBadge>\n        );\n    }\n\n    if (stackMode) {\n        return button;\n    }\n\n    return createPortal(\n        <CSSTransition\n            appear\n            in={!!visible && !isServerEnv}\n            nodeRef={wrapperRef}\n            classNames={{\n                appear: styles.enterAnimation,\n                appearActive: styles.enterAnimationActive,\n                enter: styles.enterAnimation,\n                enterActive: styles.enterAnimationActive,\n                exit: styles.exitAnimation,\n                exitActive: styles.exitAnimationActive,\n            }}\n            timeout={tokenSemanticAnimationTimeSDuration}\n            unmountOnExit\n        >\n            <Layer layer=\"floating-button\">\n                <div\n                    className={classnames(styles.wrapper, styles[`${position}`], className)}\n                    ref={wrapperRef}\n                    style={inlineStyle}\n                    data-qa={`${dataQa}-wrapper`}\n                >\n                    {button}\n                </div>\n            </Layer>\n        </CSSTransition>,\n        host?.current || document.body\n    );\n};\n\nexport const FloatingButtonWithStackMode = forwardRef(FloatingButtonComponent) as PolymorphicComponentWithRef<\n    FloatingButtonPropsWithStackMode,\n    'button'\n>;\n\nexport const FloatingButton = forwardRef(FloatingButtonComponent) as PolymorphicComponentWithRef<\n    FloatingButtonProps,\n    'button'\n>;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/FloatingButtonStack.d.ts

@@ -1,3 +1,8 @@
-import React from 'react';
+import { FloatingButtonStackItem } from '@hh.ru/magritte-ui-floating-button/FloatingButtonStackItem';
 import type { FloatingButtonStackProps } from '@hh.ru/magritte-ui-floating-button/types';
-export declare const FloatingButtonStack: React.ForwardRefExoticComponent<FloatingButtonStackProps & React.RefAttributes<HTMLDivElement>>;
+export interface FloatingButtonStackComponents {
+    Item: typeof FloatingButtonStackItem;
+}
+export declare const FloatingButtonStackComponent: import("react").ForwardRefExoticComponent<FloatingButtonStackProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const FloatingButtonStack: typeof FloatingButtonStackComponent & FloatingButtonStackComponents;
+export { FloatingButtonStack };

package/FloatingButtonStack.js

@@ -1,45 +1,34 @@
 import './index.css';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, Children, isValidElement, cloneElement } from 'react';
+import { forwardRef } from 'react';
 import { createPortal } from 'react-dom';
 import classnames from 'classnames';
 import { useServerEnv } from '@hh.ru/magritte-common-is-server-env';
-import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
-import { ArrowUpOutlinedSize24 } from '@hh.ru/magritte-ui-icon/variants/icon';
+import { FloatingButtonStackProvider } from './FloatingButtonStackContext.js';
+import { FloatingButtonStackItem } from './FloatingButtonStackItem.js';
+import { FloatingButtonStackItems } from './FloatingButtonStackItems.js';
+import { FloatingButtonStackUpButton } from './FloatingButtonStackUpButton.js';
 import { Layer } from '@hh.ru/magritte-ui-layer';
+import { s as styles } from './floating-button-stack-Pk_JvFI1.js';
+import 'react-transition-group';
+import '@hh.ru/magritte-design-tokens/types';
+import './FloatingButton.js';
+import '@hh.ru/magritte-ui-badge';
+import '@hh.ru/magritte-ui-loader';
+import '@hh.ru/magritte-ui-typography';
+import '@hh.ru/magritte-ui-breakpoint';
+import '@hh.ru/magritte-ui-icon/variants/icon';
 
-var styles = {"stack":"magritte-stack___v7QhJ_2-1-3","right":"magritte-right___v4PFa_2-1-3","left":"magritte-left___JXzpq_2-1-3","center":"magritte-center___rV3kK_2-1-3","up-button":"magritte-up-button___M-Jgi_2-1-3","upButton":"magritte-up-button___M-Jgi_2-1-3","visible":"magritte-visible___lDPdq_2-1-3","has-visibled-children":"magritte-has-visibled-children___rA8xx_2-1-3","hasVisibledChildren":"magritte-has-visibled-children___rA8xx_2-1-3","floating-buttons":"magritte-floating-buttons___oi9Yx_2-1-3","floatingButtons":"magritte-floating-buttons___oi9Yx_2-1-3","floating-buttons_neutral":"magritte-floating-buttons_neutral___LCnTQ_2-1-3","floatingButtonsNeutral":"magritte-floating-buttons_neutral___LCnTQ_2-1-3","disabled":"magritte-disabled___XSSqS_2-1-3","floating-buttons_inverse":"magritte-floating-buttons_inverse___xhm17_2-1-3","floatingButtonsInverse":"magritte-floating-buttons_inverse___xhm17_2-1-3","floating-button-wrapper":"magritte-floating-button-wrapper___HlTzE_2-1-3","floatingButtonWrapper":"magritte-floating-button-wrapper___HlTzE_2-1-3"};
-
-const FloatingButtonStack = forwardRef(({ style = 'neutral', host, children, className, inlineStyle, upButtonVisible, disabled = false, position = 'right', onUpButtonClick, 'data-qa': dataQa = 'floating-button-stack', }, ref) => {
+const FloatingButtonStackComponent = forwardRef(({ style = 'neutral', host, children, className, inlineStyle, upButtonVisible, disabled = false, position = 'right', onUpButtonClick, 'data-qa': dataQa = 'floating-button-stack', }, ref) => {
     const isServerEnv = useServerEnv();
-    const { isMobile } = useBreakpoint();
     if (isServerEnv) {
         return null;
     }
-    const preparedChildren = Children.toArray(children)
-        .filter((isValidElement))
-        .map((child) => cloneElement(child, {
-        style,
-        disabled,
-        stackMode: true,
-        children: null,
-        postfix: null,
-    }));
-    const hasVisibledChildren = preparedChildren.filter((floatingButton) => floatingButton.props.visible).length > 0;
-    return createPortal(jsx(Layer, { layer: "floating-button-stack", children: jsxs("div", { ref: ref, className: classnames(styles.stack, styles[`${position}`], className), style: inlineStyle, "data-qa": dataQa, children: [jsx("div", { className: classnames(styles.upButton, {
-                        [styles.visible]: upButtonVisible,
-                        [styles.hasVisibledChildren]: hasVisibledChildren,
-                    }), children: jsx(ArrowUpOutlinedSize24, { padding: isMobile ? 16 : 24, onClick: onUpButtonClick, backgroundStyle: "secondary", borderRadius: 'halfHeight', disabled: disabled, "data-qa": `${dataQa}-up-button` }) }), jsx("div", { className: classnames(styles.floatingButtons, styles[`floating-buttons_${style}`], {
-                        [styles.disabled]: disabled,
-                        [styles.hasVisibledChildren]: hasVisibledChildren,
-                    }), children: preparedChildren.map((floatingButton) => {
-                        const visible = floatingButton.props.visible;
-                        return (jsx("div", { className: classnames(styles.floatingButtonWrapper, {
-                                [styles.visible]: visible,
-                            }), children: floatingButton }, floatingButton.key));
-                    }) })] }) }), host?.current || document.body);
+    return createPortal(jsx(Layer, { layer: "floating-button-stack", children: jsx("div", { ref: ref, className: classnames(styles.stack, styles[`${position}`], className), style: inlineStyle, "data-qa": dataQa, children: jsxs(FloatingButtonStackProvider, { style: style, disabled: disabled, children: [jsx(FloatingButtonStackUpButton, { upButtonVisible: upButtonVisible, disabled: disabled, onUpButtonClick: onUpButtonClick, "data-qa": dataQa }), jsx(FloatingButtonStackItems, { children: children })] }) }) }), host?.current || document.body);
 });
-FloatingButtonStack.displayName = 'FloatingButtonStack';
+FloatingButtonStackComponent.displayName = 'FloatingButtonStack';
+const FloatingButtonStack = FloatingButtonStackComponent;
+FloatingButtonStack.Item = FloatingButtonStackItem;
 
-export { FloatingButtonStack };
+export { FloatingButtonStack, FloatingButtonStackComponent };
 //# sourceMappingURL=FloatingButtonStack.js.map

package/FloatingButtonStack.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingButtonStack.js","sources":["../src/FloatingButtonStack.tsx"],"sourcesContent":["import React, { Children, cloneElement, isValidElement, forwardRef, type LegacyRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport classnames from 'classnames';\n\nimport { useServerEnv } from '@hh.ru/magritte-common-is-server-env';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport type {\n    FloatingButtonStackProps,\n    FloatingButtonPropsWithStackMode,\n} from '@hh.ru/magritte-ui-floating-button/types';\nimport { ArrowUpOutlinedSize24 } from '@hh.ru/magritte-ui-icon/variants/icon';\nimport { Layer } from '@hh.ru/magritte-ui-layer';\n\nimport styles from './floating-button-stack.less';\n\nexport const FloatingButtonStack = forwardRef<HTMLDivElement, FloatingButtonStackProps>(\n    (\n        {\n            style = 'neutral',\n            host,\n            children,\n            className,\n            inlineStyle,\n            upButtonVisible,\n            disabled = false,\n            position = 'right',\n            onUpButtonClick,\n            'data-qa': dataQa = 'floating-button-stack',\n        },\n        ref\n    ) => {\n        const isServerEnv = useServerEnv();\n        const { isMobile } = useBreakpoint();\n\n        if (isServerEnv) {\n            return null;\n        }\n\n        const preparedChildren = Children.toArray(children)\n            .filter(isValidElement<FloatingButtonPropsWithStackMode>)\n            .map((child) =>\n                cloneElement(child, {\n                    style,\n                    disabled,\n                    stackMode: true,\n                    children: null,\n                    postfix: null,\n                })\n            );\n        const hasVisibledChildren =\n            preparedChildren.filter((floatingButton) => floatingButton.props.visible).length > 0;\n\n        return createPortal(\n            <Layer layer=\"floating-button-stack\">\n                <div\n                    ref={ref as LegacyRef<HTMLDivElement>}\n                    className={classnames(styles.stack, styles[`${position}`], className)}\n                    style={inlineStyle}\n                    data-qa={dataQa}\n                >\n                    <div\n                        className={classnames(styles.upButton, {\n                            [styles.visible]: upButtonVisible,\n                            [styles.hasVisibledChildren]: hasVisibledChildren,\n                        })}\n                    >\n                        <ArrowUpOutlinedSize24\n                            padding={isMobile ? 16 : 24}\n                            onClick={onUpButtonClick}\n                            backgroundStyle=\"secondary\"\n                            borderRadius={'halfHeight'}\n                            disabled={disabled}\n                            data-qa={`${dataQa}-up-button`}\n                        />\n                    </div>\n                    <div\n                        className={classnames(styles.floatingButtons, styles[`floating-buttons_${style}`], {\n                            [styles.disabled]: disabled,\n                            [styles.hasVisibledChildren]: hasVisibledChildren,\n                        })}\n                    >\n                        {preparedChildren.map((floatingButton) => {\n                            const visible = floatingButton.props.visible;\n                            return (\n                                <div\n                                    key={floatingButton.key as React.Key}\n                                    className={classnames(styles.floatingButtonWrapper, {\n                                        [styles.visible]: visible,\n                                    })}\n                                >\n                                    {floatingButton}\n                                </div>\n                            );\n                        })}\n                    </div>\n                </div>\n            </Layer>,\n            host?.current || document.body\n        );\n    }\n);\n\nFloatingButtonStack.displayName = 'FloatingButtonStack';\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"FloatingButtonStack.js","sources":["../src/FloatingButtonStack.tsx"],"sourcesContent":["import { forwardRef, type LegacyRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport classnames from 'classnames';\n\nimport { useServerEnv } from '@hh.ru/magritte-common-is-server-env';\nimport { FloatingButtonStackProvider } from '@hh.ru/magritte-ui-floating-button/FloatingButtonStackContext';\nimport { FloatingButtonStackItem } from '@hh.ru/magritte-ui-floating-button/FloatingButtonStackItem';\nimport { FloatingButtonStackItems } from '@hh.ru/magritte-ui-floating-button/FloatingButtonStackItems';\nimport { FloatingButtonStackUpButton } from '@hh.ru/magritte-ui-floating-button/FloatingButtonStackUpButton';\nimport type { FloatingButtonStackProps } from '@hh.ru/magritte-ui-floating-button/types';\nimport { Layer } from '@hh.ru/magritte-ui-layer';\n\nimport styles from './floating-button-stack.less';\n\nexport interface FloatingButtonStackComponents {\n    Item: typeof FloatingButtonStackItem;\n}\n\nexport const FloatingButtonStackComponent = forwardRef<HTMLDivElement, FloatingButtonStackProps>(\n    (\n        {\n            style = 'neutral',\n            host,\n            children,\n            className,\n            inlineStyle,\n            upButtonVisible,\n            disabled = false,\n            position = 'right',\n            onUpButtonClick,\n            'data-qa': dataQa = 'floating-button-stack',\n        },\n        ref\n    ) => {\n        const isServerEnv = useServerEnv();\n\n        if (isServerEnv) {\n            return null;\n        }\n\n        return createPortal(\n            <Layer layer=\"floating-button-stack\">\n                <div\n                    ref={ref as LegacyRef<HTMLDivElement>}\n                    className={classnames(styles.stack, styles[`${position}`], className)}\n                    style={inlineStyle}\n                    data-qa={dataQa}\n                >\n                    <FloatingButtonStackProvider style={style} disabled={disabled}>\n                        <FloatingButtonStackUpButton\n                            upButtonVisible={upButtonVisible}\n                            disabled={disabled}\n                            onUpButtonClick={onUpButtonClick}\n                            data-qa={dataQa}\n                        />\n                        <FloatingButtonStackItems>{children}</FloatingButtonStackItems>\n                    </FloatingButtonStackProvider>\n                </div>\n            </Layer>,\n            host?.current || document.body\n        );\n    }\n);\n\nFloatingButtonStackComponent.displayName = 'FloatingButtonStack';\n\nconst FloatingButtonStack = FloatingButtonStackComponent as typeof FloatingButtonStackComponent &\n    FloatingButtonStackComponents;\n\nFloatingButtonStack.Item = FloatingButtonStackItem;\n\nexport { FloatingButtonStack };\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;AAkBa,MAAA,4BAA4B,GAAG,UAAU,CAClD,CACI,EACI,KAAK,GAAG,SAAS,EACjB,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,WAAW,EACX,eAAe,EACf,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,OAAO,EAClB,eAAe,EACf,SAAS,EAAE,MAAM,GAAG,uBAAuB,GAC9C,EACD,GAAG,KACH;AACA,IAAA,MAAM,WAAW,GAAG,YAAY,EAAE,CAAC;IAEnC,IAAI,WAAW,EAAE;AACb,QAAA,OAAO,IAAI,CAAC;KACf;AAED,IAAA,OAAO,YAAY,CACfA,GAAA,CAAC,KAAK,EAAC,EAAA,KAAK,EAAC,uBAAuB,EAAA,QAAA,EAChCA,GACI,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,GAAgC,EACrC,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA,EAAG,QAAQ,CAAE,CAAA,CAAC,EAAE,SAAS,CAAC,EACrE,KAAK,EAAE,WAAW,EAAA,SAAA,EACT,MAAM,EAEf,QAAA,EAAAC,IAAA,CAAC,2BAA2B,EAAC,EAAA,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EACzD,QAAA,EAAA,CAAAD,GAAA,CAAC,2BAA2B,EACxB,EAAA,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,eAAe,EAAA,SAAA,EACvB,MAAM,EAAA,CACjB,EACFA,GAAC,CAAA,wBAAwB,cAAE,QAAQ,EAAA,CAA4B,IACrC,EAC5B,CAAA,EAAA,CACF,EACR,IAAI,EAAE,OAAO,IAAI,QAAQ,CAAC,IAAI,CACjC,CAAC;AACN,CAAC,EACH;AAEF,4BAA4B,CAAC,WAAW,GAAG,qBAAqB,CAAC;AAE3D,MAAA,mBAAmB,GAAG,6BACM;AAElC,mBAAmB,CAAC,IAAI,GAAG,uBAAuB;;;;"}

package/FloatingButtonStackContext.d.ts

@@ -0,0 +1,23 @@
+import { type FC, type PropsWithChildren } from 'react';
+import type { FloatingButtonStyle } from '@hh.ru/magritte-ui-floating-button/types';
+type ButtonsSet = Set<string>;
+interface FloatingButtonStackContextProps {
+    /** floating кнопки */
+    visibleButtons: ButtonsSet;
+    /** флаг включения анимаций стака */
+    animationsEnabled: boolean;
+    /** стиль floating стака */
+    style?: FloatingButtonStyle;
+    /** флаг активности кропки */
+    disabled?: boolean;
+    /** callback для переключения видимости */
+    setVisible: (id: string, visible: boolean) => void;
+}
+export declare const FloatingButtonStackContext: import("react").Context<FloatingButtonStackContextProps>;
+export declare const useFloatingButtonStack: () => FloatingButtonStackContextProps;
+interface FloatingButtonStackProviderProps extends PropsWithChildren {
+    style?: FloatingButtonStyle;
+    disabled?: boolean;
+}
+export declare const FloatingButtonStackProvider: FC<FloatingButtonStackProviderProps>;
+export {};

package/FloatingButtonStackContext.js

@@ -0,0 +1,49 @@
+import './index.css';
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useState, useEffect, useCallback, useMemo } from 'react';
+
+const FloatingButtonStackContext = createContext({
+    visibleButtons: new Set(),
+    animationsEnabled: false,
+    setVisible: () => null,
+});
+const useFloatingButtonStack = () => useContext(FloatingButtonStackContext);
+const FloatingButtonStackProvider = ({ style, disabled, children }) => {
+    const [visibleButtons, setVisibleButtons] = useState(() => new Set());
+    const [animationsEnabled, setAnimationsEnabled] = useState(false);
+    useEffect(() => {
+        if (animationsEnabled) {
+            return;
+        }
+        if (visibleButtons.size > 0) {
+            setAnimationsEnabled(true);
+        }
+    }, [visibleButtons, animationsEnabled]);
+    const setVisible = useCallback((id, visible) => {
+        setVisibleButtons((prev) => {
+            const has = prev.has(id);
+            if (has === visible) {
+                return prev;
+            }
+            const next = new Set(prev);
+            if (visible) {
+                next.add(id);
+            }
+            else {
+                next.delete(id);
+            }
+            return next;
+        });
+    }, []);
+    const contextValue = useMemo(() => ({
+        style,
+        disabled,
+        animationsEnabled,
+        setVisible,
+        visibleButtons,
+    }), [style, disabled, animationsEnabled, setVisible, visibleButtons]);
+    return jsx(FloatingButtonStackContext.Provider, { value: contextValue, children: children });
+};
+
+export { FloatingButtonStackContext, FloatingButtonStackProvider, useFloatingButtonStack };
+//# sourceMappingURL=FloatingButtonStackContext.js.map

package/FloatingButtonStackContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingButtonStackContext.js","sources":["../src/FloatingButtonStackContext.tsx"],"sourcesContent":["import {\n    createContext,\n    useContext,\n    useState,\n    useCallback,\n    useMemo,\n    useEffect,\n    type FC,\n    type PropsWithChildren,\n} from 'react';\n\nimport type { FloatingButtonStyle } from '@hh.ru/magritte-ui-floating-button/types';\n\ntype ButtonsSet = Set<string>;\n\ninterface FloatingButtonStackContextProps {\n    /** floating кнопки */\n    visibleButtons: ButtonsSet;\n    /** флаг включения анимаций стака */\n    animationsEnabled: boolean;\n    /** стиль floating стака */\n    style?: FloatingButtonStyle;\n    /** флаг активности кропки */\n    disabled?: boolean;\n    /** callback для переключения видимости */\n    setVisible: (id: string, visible: boolean) => void;\n}\n\nexport const FloatingButtonStackContext = createContext<FloatingButtonStackContextProps>({\n    visibleButtons: new Set(),\n    animationsEnabled: false,\n    setVisible: () => null,\n});\n\nexport const useFloatingButtonStack = (): FloatingButtonStackContextProps => useContext(FloatingButtonStackContext);\n\ninterface FloatingButtonStackProviderProps extends PropsWithChildren {\n    style?: FloatingButtonStyle;\n    disabled?: boolean;\n}\n\nexport const FloatingButtonStackProvider: FC<FloatingButtonStackProviderProps> = ({ style, disabled, children }) => {\n    const [visibleButtons, setVisibleButtons] = useState<ButtonsSet>(() => new Set());\n    const [animationsEnabled, setAnimationsEnabled] = useState(false);\n\n    useEffect(() => {\n        if (animationsEnabled) {\n            return;\n        }\n        if (visibleButtons.size > 0) {\n            setAnimationsEnabled(true);\n        }\n    }, [visibleButtons, animationsEnabled]);\n\n    const setVisible = useCallback<FloatingButtonStackContextProps['setVisible']>((id, visible) => {\n        setVisibleButtons((prev) => {\n            const has = prev.has(id);\n            if (has === visible) {\n                return prev;\n            }\n            const next = new Set(prev);\n            if (visible) {\n                next.add(id);\n            } else {\n                next.delete(id);\n            }\n            return next;\n        });\n    }, []);\n\n    const contextValue = useMemo(\n        () => ({\n            style,\n            disabled,\n            animationsEnabled,\n            setVisible,\n            visibleButtons,\n        }),\n        [style, disabled, animationsEnabled, setVisible, visibleButtons]\n    );\n\n    return <FloatingButtonStackContext.Provider value={contextValue}>{children}</FloatingButtonStackContext.Provider>;\n};\n"],"names":["_jsx"],"mappings":";;;AA4BO,MAAM,0BAA0B,GAAG,aAAa,CAAkC;IACrF,cAAc,EAAE,IAAI,GAAG,EAAE;AACzB,IAAA,iBAAiB,EAAE,KAAK;AACxB,IAAA,UAAU,EAAE,MAAM,IAAI;AACzB,CAAA,EAAE;AAEU,MAAA,sBAAsB,GAAG,MAAuC,UAAU,CAAC,0BAA0B,EAAE;AAO7G,MAAM,2BAA2B,GAAyC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAI;AAC/G,IAAA,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAa,MAAM,IAAI,GAAG,EAAE,CAAC,CAAC;IAClF,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElE,SAAS,CAAC,MAAK;QACX,IAAI,iBAAiB,EAAE;YACnB,OAAO;SACV;AACD,QAAA,IAAI,cAAc,CAAC,IAAI,GAAG,CAAC,EAAE;YACzB,oBAAoB,CAAC,IAAI,CAAC,CAAC;SAC9B;AACL,KAAC,EAAE,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAExC,MAAM,UAAU,GAAG,WAAW,CAAgD,CAAC,EAAE,EAAE,OAAO,KAAI;AAC1F,QAAA,iBAAiB,CAAC,CAAC,IAAI,KAAI;YACvB,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;AACzB,YAAA,IAAI,GAAG,KAAK,OAAO,EAAE;AACjB,gBAAA,OAAO,IAAI,CAAC;aACf;AACD,YAAA,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,CAAC;YAC3B,IAAI,OAAO,EAAE;AACT,gBAAA,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;aAChB;iBAAM;AACH,gBAAA,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;aACnB;AACD,YAAA,OAAO,IAAI,CAAC;AAChB,SAAC,CAAC,CAAC;KACN,EAAE,EAAE,CAAC,CAAC;AAEP,IAAA,MAAM,YAAY,GAAG,OAAO,CACxB,OAAO;QACH,KAAK;QACL,QAAQ;QACR,iBAAiB;QACjB,UAAU;QACV,cAAc;AACjB,KAAA,CAAC,EACF,CAAC,KAAK,EAAE,QAAQ,EAAE,iBAAiB,EAAE,UAAU,EAAE,cAAc,CAAC,CACnE,CAAC;IAEF,OAAOA,GAAA,CAAC,0BAA0B,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,YAAY,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAuC,CAAC;AACtH;;;;"}

package/FloatingButtonStackItem.d.ts

@@ -0,0 +1,3 @@
+import type { PolymorphicComponentWithRef } from '@hh.ru/magritte-types';
+import type { FloatingButtonStackItemProps } from '@hh.ru/magritte-ui-floating-button/types';
+export declare const FloatingButtonStackItem: PolymorphicComponentWithRef<FloatingButtonStackItemProps, "button">;

package/FloatingButtonStackItem.js

@@ -0,0 +1,39 @@
+import './index.css';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useId, useRef, useEffect } from 'react';
+import { CSSTransition } from 'react-transition-group';
+import classnames from 'classnames';
+import { tokenSemanticAnimationTimeSDuration } from '@hh.ru/magritte-design-tokens/types';
+import { FloatingButtonWithStackMode } from './FloatingButton.js';
+import { useFloatingButtonStack } from './FloatingButtonStackContext.js';
+import { s as styles } from './floating-button-stack-Pk_JvFI1.js';
+import 'react-dom';
+import '@hh.ru/magritte-common-is-server-env';
+import '@hh.ru/magritte-ui-badge';
+import '@hh.ru/magritte-ui-layer';
+import '@hh.ru/magritte-ui-loader';
+import '@hh.ru/magritte-ui-typography';
+
+const FloatingButtonStackItemComponent = ({ Element = 'button', visible = false, ...otherProps }, ref) => {
+    const uid = useId();
+    const { setVisible, animationsEnabled, style, disabled } = useFloatingButtonStack();
+    const nodeRef = useRef(null);
+    useEffect(() => {
+        setVisible(uid, visible);
+    }, [uid, setVisible, visible]);
+    useEffect(() => {
+        return () => {
+            setVisible(uid, false);
+        };
+    }, [uid, setVisible]);
+    return (jsx(CSSTransition, { in: visible, enter: animationsEnabled, exit: animationsEnabled, classNames: {
+            enter: styles.enterFloatingButtonAnimation,
+            enterActive: styles.enterFloatingButtonAnimationActive,
+            exit: styles.exitFloatingButtonAnimation,
+            exitActive: styles.exitFloatingButtonAnimationActive,
+        }, nodeRef: nodeRef, timeout: tokenSemanticAnimationTimeSDuration, unmountOnExit: true, children: jsx("div", { ref: nodeRef, className: classnames(styles.floatingButtonWrapper), children: jsx(FloatingButtonWithStackMode, { Element: Element, ref: ref, ...otherProps, style: style, disabled: disabled, stackMode: true }) }) }));
+};
+const FloatingButtonStackItem = forwardRef(FloatingButtonStackItemComponent);
+
+export { FloatingButtonStackItem };
+//# sourceMappingURL=FloatingButtonStackItem.js.map

package/FloatingButtonStackItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingButtonStackItem.js","sources":["../src/FloatingButtonStackItem.tsx"],"sourcesContent":["import { useEffect, useId, useRef, forwardRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport classnames from 'classnames';\n\nimport { tokenSemanticAnimationTimeSDuration } from '@hh.ru/magritte-design-tokens/types';\nimport type { PolymorphicForwardRefRenderFunc, PolymorphicComponentWithRef } from '@hh.ru/magritte-types';\nimport { FloatingButtonWithStackMode } from '@hh.ru/magritte-ui-floating-button/FloatingButton';\nimport { useFloatingButtonStack } from '@hh.ru/magritte-ui-floating-button/FloatingButtonStackContext';\nimport type { FloatingButtonStackItemProps } from '@hh.ru/magritte-ui-floating-button/types';\n\nimport styles from './floating-button-stack.less';\n\nconst FloatingButtonStackItemComponent: PolymorphicForwardRefRenderFunc<FloatingButtonStackItemProps, 'button'> = (\n    { Element = 'button', visible = false, ...otherProps },\n    ref\n) => {\n    const uid = useId();\n    const { setVisible, animationsEnabled, style, disabled } = useFloatingButtonStack();\n    const nodeRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        setVisible(uid, visible);\n    }, [uid, setVisible, visible]);\n\n    useEffect(() => {\n        return () => {\n            setVisible(uid, false);\n        };\n    }, [uid, setVisible]);\n\n    return (\n        <CSSTransition\n            in={visible}\n            enter={animationsEnabled}\n            exit={animationsEnabled}\n            classNames={{\n                enter: styles.enterFloatingButtonAnimation,\n                enterActive: styles.enterFloatingButtonAnimationActive,\n                exit: styles.exitFloatingButtonAnimation,\n                exitActive: styles.exitFloatingButtonAnimationActive,\n            }}\n            nodeRef={nodeRef}\n            timeout={tokenSemanticAnimationTimeSDuration}\n            unmountOnExit\n        >\n            <div ref={nodeRef} className={classnames(styles.floatingButtonWrapper)}>\n                <FloatingButtonWithStackMode\n                    Element={Element}\n                    ref={ref}\n                    {...otherProps}\n                    style={style}\n                    disabled={disabled}\n                    stackMode\n                />\n            </div>\n        </CSSTransition>\n    );\n};\n\nexport const FloatingButtonStackItem = forwardRef(FloatingButtonStackItemComponent) as PolymorphicComponentWithRef<\n    FloatingButtonStackItemProps,\n    'button'\n>;\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;AAYA,MAAM,gCAAgC,GAA4E,CAC9G,EAAE,OAAO,GAAG,QAAQ,EAAE,OAAO,GAAG,KAAK,EAAE,GAAG,UAAU,EAAE,EACtD,GAAG,KACH;AACA,IAAA,MAAM,GAAG,GAAG,KAAK,EAAE,CAAC;AACpB,IAAA,MAAM,EAAE,UAAU,EAAE,iBAAiB,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,sBAAsB,EAAE,CAAC;AACpF,IAAA,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE7C,SAAS,CAAC,MAAK;AACX,QAAA,UAAU,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;KAC5B,EAAE,CAAC,GAAG,EAAE,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;IAE/B,SAAS,CAAC,MAAK;AACX,QAAA,OAAO,MAAK;AACR,YAAA,UAAU,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;AAC3B,SAAC,CAAC;AACN,KAAC,EAAE,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,CAAC;AAEtB,IAAA,QACIA,GAAC,CAAA,aAAa,EACV,EAAA,EAAE,EAAE,OAAO,EACX,KAAK,EAAE,iBAAiB,EACxB,IAAI,EAAE,iBAAiB,EACvB,UAAU,EAAE;YACR,KAAK,EAAE,MAAM,CAAC,4BAA4B;YAC1C,WAAW,EAAE,MAAM,CAAC,kCAAkC;YACtD,IAAI,EAAE,MAAM,CAAC,2BAA2B;YACxC,UAAU,EAAE,MAAM,CAAC,iCAAiC;SACvD,EACD,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,mCAAmC,EAC5C,aAAa,EAEb,IAAA,EAAA,QAAA,EAAAA,GAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,qBAAqB,CAAC,EAClE,QAAA,EAAAA,GAAA,CAAC,2BAA2B,EACxB,EAAA,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,EACJ,GAAA,UAAU,EACd,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,SAAS,EACX,IAAA,EAAA,CAAA,EAAA,CACA,EACM,CAAA,EAClB;AACN,CAAC,CAAC;MAEW,uBAAuB,GAAG,UAAU,CAAC,gCAAgC;;;;"}

package/FloatingButtonStackItems.d.ts

@@ -0,0 +1,2 @@
+import { type FC, type PropsWithChildren } from 'react';
+export declare const FloatingButtonStackItems: FC<PropsWithChildren>;

package/FloatingButtonStackItems.js

@@ -0,0 +1,18 @@
+import './index.css';
+import { jsx } from 'react/jsx-runtime';
+import classnames from 'classnames';
+import { useFloatingButtonStack } from './FloatingButtonStackContext.js';
+import { s as styles } from './floating-button-stack-Pk_JvFI1.js';
+import 'react';
+
+const FloatingButtonStackItems = ({ children }) => {
+    const { visibleButtons, animationsEnabled, style, disabled } = useFloatingButtonStack();
+    return (jsx("div", { className: classnames(styles.floatingButtons, styles[`floating-buttons_${style}`], {
+            [styles.disabled]: disabled,
+            [styles.visibled]: visibleButtons.size > 0,
+            [styles.animated]: animationsEnabled,
+        }), children: children }));
+};
+
+export { FloatingButtonStackItems };
+//# sourceMappingURL=FloatingButtonStackItems.js.map

package/FloatingButtonStackItems.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingButtonStackItems.js","sources":["../src/FloatingButtonStackItems.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren } from 'react';\nimport classnames from 'classnames';\n\nimport { useFloatingButtonStack } from '@hh.ru/magritte-ui-floating-button/FloatingButtonStackContext';\n\nimport styles from './floating-button-stack.less';\n\nexport const FloatingButtonStackItems: FC<PropsWithChildren> = ({ children }) => {\n    const { visibleButtons, animationsEnabled, style, disabled } = useFloatingButtonStack();\n    return (\n        <div\n            className={classnames(styles.floatingButtons, styles[`floating-buttons_${style}`], {\n                [styles.disabled]: disabled,\n                [styles.visibled]: visibleButtons.size > 0,\n                [styles.animated]: animationsEnabled,\n            })}\n        >\n            {children}\n        </div>\n    );\n};\n"],"names":["_jsx"],"mappings":";;;;;;MAOa,wBAAwB,GAA0B,CAAC,EAAE,QAAQ,EAAE,KAAI;AAC5E,IAAA,MAAM,EAAE,cAAc,EAAE,iBAAiB,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,sBAAsB,EAAE,CAAC;AACxF,IAAA,QACIA,GACI,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAA,iBAAA,EAAoB,KAAK,CAAA,CAAE,CAAC,EAAE;AAC/E,YAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;YAC3B,CAAC,MAAM,CAAC,QAAQ,GAAG,cAAc,CAAC,IAAI,GAAG,CAAC;AAC1C,YAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,iBAAiB;AACvC,SAAA,CAAC,EAED,QAAA,EAAA,QAAQ,EACP,CAAA,EACR;AACN;;;;"}

package/FloatingButtonStackUpButton.d.ts

@@ -0,0 +1,5 @@
+import { type FC } from 'react';
+import type { FloatingButtonStackProps } from '@hh.ru/magritte-ui-floating-button/types';
+type FloatingButtonStackUpButtonProps = Pick<FloatingButtonStackProps, 'upButtonVisible' | 'disabled' | 'onUpButtonClick' | 'data-qa'>;
+export declare const FloatingButtonStackUpButton: FC<FloatingButtonStackUpButtonProps>;
+export {};

package/FloatingButtonStackUpButton.js

@@ -0,0 +1,24 @@
+import './index.css';
+import { jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import { CSSTransition } from 'react-transition-group';
+import { tokenSemanticAnimationTimeSDuration } from '@hh.ru/magritte-design-tokens/types';
+import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
+import { useFloatingButtonStack } from './FloatingButtonStackContext.js';
+import { ArrowUpOutlinedSize24 } from '@hh.ru/magritte-ui-icon/variants/icon';
+import { s as styles } from './floating-button-stack-Pk_JvFI1.js';
+
+const FloatingButtonStackUpButton = ({ upButtonVisible, disabled = false, onUpButtonClick, 'data-qa': dataQa, }) => {
+    const { animationsEnabled } = useFloatingButtonStack();
+    const { isMobile } = useBreakpoint();
+    const upButtonRef = useRef(null);
+    return (jsx(CSSTransition, { in: upButtonVisible, enter: animationsEnabled, exit: animationsEnabled, classNames: {
+            enter: styles.enterUpButtonAnimation,
+            enterActive: styles.enterUpButtonAnimationActive,
+            exit: styles.exitUpButtonAnimation,
+            exitActive: styles.exitUpButtonAnimationActive,
+        }, nodeRef: upButtonRef, timeout: tokenSemanticAnimationTimeSDuration, unmountOnExit: true, children: jsx("div", { ref: upButtonRef, className: styles.upButton, children: jsx(ArrowUpOutlinedSize24, { padding: isMobile ? 16 : 24, onClick: onUpButtonClick, backgroundStyle: "secondary", borderRadius: 'halfHeight', disabled: disabled, "data-qa": `${dataQa}-up-button` }) }) }));
+};
+
+export { FloatingButtonStackUpButton };
+//# sourceMappingURL=FloatingButtonStackUpButton.js.map

package/FloatingButtonStackUpButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingButtonStackUpButton.js","sources":["../src/FloatingButtonStackUpButton.tsx"],"sourcesContent":["import { useRef, type FC } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport { tokenSemanticAnimationTimeSDuration } from '@hh.ru/magritte-design-tokens/types';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { useFloatingButtonStack } from '@hh.ru/magritte-ui-floating-button/FloatingButtonStackContext';\nimport type { FloatingButtonStackProps } from '@hh.ru/magritte-ui-floating-button/types';\nimport { ArrowUpOutlinedSize24 } from '@hh.ru/magritte-ui-icon/variants/icon';\n\nimport styles from './floating-button-stack.less';\n\ntype FloatingButtonStackUpButtonProps = Pick<\n    FloatingButtonStackProps,\n    'upButtonVisible' | 'disabled' | 'onUpButtonClick' | 'data-qa'\n>;\n\nexport const FloatingButtonStackUpButton: FC<FloatingButtonStackUpButtonProps> = ({\n    upButtonVisible,\n    disabled = false,\n    onUpButtonClick,\n    'data-qa': dataQa,\n}) => {\n    const { animationsEnabled } = useFloatingButtonStack();\n    const { isMobile } = useBreakpoint();\n    const upButtonRef = useRef<HTMLDivElement>(null);\n\n    return (\n        <CSSTransition\n            in={upButtonVisible}\n            enter={animationsEnabled}\n            exit={animationsEnabled}\n            classNames={{\n                enter: styles.enterUpButtonAnimation,\n                enterActive: styles.enterUpButtonAnimationActive,\n                exit: styles.exitUpButtonAnimation,\n                exitActive: styles.exitUpButtonAnimationActive,\n            }}\n            nodeRef={upButtonRef}\n            timeout={tokenSemanticAnimationTimeSDuration}\n            unmountOnExit\n        >\n            <div ref={upButtonRef} className={styles.upButton}>\n                <ArrowUpOutlinedSize24\n                    padding={isMobile ? 16 : 24}\n                    onClick={onUpButtonClick}\n                    backgroundStyle=\"secondary\"\n                    borderRadius={'halfHeight'}\n                    disabled={disabled}\n                    data-qa={`${dataQa}-up-button`}\n                />\n            </div>\n        </CSSTransition>\n    );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;AAgBa,MAAA,2BAA2B,GAAyC,CAAC,EAC9E,eAAe,EACf,QAAQ,GAAG,KAAK,EAChB,eAAe,EACf,SAAS,EAAE,MAAM,GACpB,KAAI;AACD,IAAA,MAAM,EAAE,iBAAiB,EAAE,GAAG,sBAAsB,EAAE,CAAC;AACvD,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,aAAa,EAAE,CAAC;AACrC,IAAA,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;AAEjD,IAAA,QACIA,GAAC,CAAA,aAAa,EACV,EAAA,EAAE,EAAE,eAAe,EACnB,KAAK,EAAE,iBAAiB,EACxB,IAAI,EAAE,iBAAiB,EACvB,UAAU,EAAE;YACR,KAAK,EAAE,MAAM,CAAC,sBAAsB;YACpC,WAAW,EAAE,MAAM,CAAC,4BAA4B;YAChD,IAAI,EAAE,MAAM,CAAC,qBAAqB;YAClC,UAAU,EAAE,MAAM,CAAC,2BAA2B;SACjD,EACD,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,mCAAmC,EAC5C,aAAa,EAEb,IAAA,EAAA,QAAA,EAAAA,GAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAA,QAAA,EAC7CA,GAAC,CAAA,qBAAqB,EAClB,EAAA,OAAO,EAAE,QAAQ,GAAG,EAAE,GAAG,EAAE,EAC3B,OAAO,EAAE,eAAe,EACxB,eAAe,EAAC,WAAW,EAC3B,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EACT,SAAA,EAAA,CAAA,EAAG,MAAM,CAAA,UAAA,CAAY,EAChC,CAAA,EAAA,CACA,EACM,CAAA,EAClB;AACN;;;;"}

package/floating-button-stack-Pk_JvFI1.js

@@ -0,0 +1,5 @@
+import './index.css';
+var styles = {"stack":"magritte-stack___v7QhJ_3-0-0","right":"magritte-right___v4PFa_3-0-0","left":"magritte-left___JXzpq_3-0-0","center":"magritte-center___rV3kK_3-0-0","up-button":"magritte-up-button___M-Jgi_3-0-0","upButton":"magritte-up-button___M-Jgi_3-0-0","enter-up-button-animation":"magritte-enter-up-button-animation___-n3rG_3-0-0","enterUpButtonAnimation":"magritte-enter-up-button-animation___-n3rG_3-0-0","enter-up-button-animation-active":"magritte-enter-up-button-animation-active___8pejQ_3-0-0","enterUpButtonAnimationActive":"magritte-enter-up-button-animation-active___8pejQ_3-0-0","exit-up-button-animation":"magritte-exit-up-button-animation___80DEE_3-0-0","exitUpButtonAnimation":"magritte-exit-up-button-animation___80DEE_3-0-0","exit-up-button-animation-active":"magritte-exit-up-button-animation-active___f1LjL_3-0-0","exitUpButtonAnimationActive":"magritte-exit-up-button-animation-active___f1LjL_3-0-0","floating-buttons":"magritte-floating-buttons___oi9Yx_3-0-0","floatingButtons":"magritte-floating-buttons___oi9Yx_3-0-0","animated":"magritte-animated___z--5Y_3-0-0","visibled":"magritte-visibled___hHvF6_3-0-0","floating-buttons_neutral":"magritte-floating-buttons_neutral___LCnTQ_3-0-0","floatingButtonsNeutral":"magritte-floating-buttons_neutral___LCnTQ_3-0-0","disabled":"magritte-disabled___XSSqS_3-0-0","floating-buttons_inverse":"magritte-floating-buttons_inverse___xhm17_3-0-0","floatingButtonsInverse":"magritte-floating-buttons_inverse___xhm17_3-0-0","floating-button-wrapper":"magritte-floating-button-wrapper___HlTzE_3-0-0","floatingButtonWrapper":"magritte-floating-button-wrapper___HlTzE_3-0-0","enter-floating-button-animation":"magritte-enter-floating-button-animation___nke2I_3-0-0","enterFloatingButtonAnimation":"magritte-enter-floating-button-animation___nke2I_3-0-0","enter-floating-button-animation-active":"magritte-enter-floating-button-animation-active___AayrW_3-0-0","enterFloatingButtonAnimationActive":"magritte-enter-floating-button-animation-active___AayrW_3-0-0","exit-floating-button-animation":"magritte-exit-floating-button-animation___dXSTW_3-0-0","exitFloatingButtonAnimation":"magritte-exit-floating-button-animation___dXSTW_3-0-0","exit-floating-button-animation-active":"magritte-exit-floating-button-animation-active___DhIfE_3-0-0","exitFloatingButtonAnimationActive":"magritte-exit-floating-button-animation-active___DhIfE_3-0-0"};
+
+export { styles as s };
+//# sourceMappingURL=floating-button-stack-Pk_JvFI1.js.map

package/floating-button-stack-Pk_JvFI1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"floating-button-stack-Pk_JvFI1.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}