@hh.ru/magritte-ui-action-bar 2.0.0

package/ActionBar.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { ActionBarProps } from './types';
+export declare const ActionBar: FC<ActionBarProps>;

package/ActionBar.js

@@ -0,0 +1,68 @@
+import './index.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import classnames from 'classnames';
+import { throttle } from '@hh.ru/magritte-common-func-utils';
+import { shouldShowDividerOrProgress, getScrollableParent } from './utils.js';
+import { ButtonStack } from '@hh.ru/magritte-ui-button-stack';
+import { Divider } from '@hh.ru/magritte-ui-divider';
+
+var styles = {"action-bar-fixed":"magritte-action-bar-fixed___Ts-0i_2-0-0","actionBarFixed":"magritte-action-bar-fixed___Ts-0i_2-0-0","action-bar-with-progress-bar":"magritte-action-bar-with-progress-bar___mprqw_2-0-0","actionBarWithProgressBar":"magritte-action-bar-with-progress-bar___mprqw_2-0-0","progress-bar":"magritte-progress-bar___tSTjx_2-0-0","progressBar":"magritte-progress-bar___tSTjx_2-0-0","actions-wrapper_mobile":"magritte-actions-wrapper_mobile___DWgfU_2-0-0","actionsWrapperMobile":"magritte-actions-wrapper_mobile___DWgfU_2-0-0","actions-wrapper_modal":"magritte-actions-wrapper_modal___aQs2b_2-0-0","actionsWrapperModal":"magritte-actions-wrapper_modal___aQs2b_2-0-0","actions-wrapper_page":"magritte-actions-wrapper_page___NuaNO_2-0-0","actionsWrapperPage":"magritte-actions-wrapper_page___NuaNO_2-0-0","actions-stack":"magritte-actions-stack___12VkP_2-0-0","actionsStack":"magritte-actions-stack___12VkP_2-0-0","actions-stack-vertical-on-mobile":"magritte-actions-stack-vertical-on-mobile___82xhC_2-0-0","actionsStackVerticalOnMobile":"magritte-actions-stack-vertical-on-mobile___82xhC_2-0-0","actions-stack-vertical-on-page-xs":"magritte-actions-stack-vertical-on-page-xs___F8kiH_2-0-0","actionsStackVerticalOnPageXs":"magritte-actions-stack-vertical-on-page-xs___F8kiH_2-0-0","actions-stack-horizontal-on-gt-xs":"magritte-actions-stack-horizontal-on-gt-xs___QXT--_2-0-0","actionsStackHorizontalOnGtXs":"magritte-actions-stack-horizontal-on-gt-xs___QXT--_2-0-0"};
+
+const SCROLL_HANDLER_THROTTLE_MS = 50;
+const ActionBar = ({ type, showDivider, showProgress = false, primaryActions = [], secondaryActions = [], wrapperRef, }) => {
+    const [isScrollEnd, setIsScrollEnd] = useState(false);
+    const actionBarRef = useRef(null);
+    const { shouldShowProgress, shouldShowDivider } = shouldShowDividerOrProgress({
+        type,
+        showDivider,
+        showProgress,
+        isScrollEnd,
+    });
+    useEffect(() => {
+        if (shouldShowProgress || typeof showDivider === 'boolean') {
+            return void 0;
+        }
+        const scrollableParent = getScrollableParent(actionBarRef.current);
+        const handleScroll = throttle(() => {
+            if (scrollableParent &&
+                Math.abs(scrollableParent.scrollHeight - scrollableParent.clientHeight - scrollableParent.scrollTop) < 1) {
+                setIsScrollEnd(true);
+            }
+            else {
+                setIsScrollEnd(false);
+            }
+        }, SCROLL_HANDLER_THROTTLE_MS);
+        if (scrollableParent === document.documentElement) {
+            window.addEventListener('scroll', handleScroll);
+        }
+        else if (scrollableParent) {
+            scrollableParent.addEventListener('scroll', handleScroll);
+        }
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+            scrollableParent?.removeEventListener('scroll', handleScroll);
+        };
+    }, [shouldShowProgress, showDivider]);
+    useEffect(() => {
+        if (wrapperRef && actionBarRef.current) {
+            wrapperRef.current = actionBarRef.current.offsetHeight;
+        }
+    }, [wrapperRef, type, primaryActions, secondaryActions]);
+    if (primaryActions.length === 0 && secondaryActions.length === 0) {
+        return null;
+    }
+    return (jsxs("div", { ref: actionBarRef, "data-qa": "action-bar", className: classnames({
+            [styles.actionBarFixed]: type === 'page',
+            [styles.actionBarWithProgressBar]: shouldShowProgress,
+        }), children: [shouldShowDivider && (jsx("div", { "data-qa": "divider", children: jsx(Divider, { mode: "horizontal" }) })), shouldShowProgress && (jsx("div", { "data-qa": "progress-bar", className: styles.progressBar, children: showProgress })), jsxs("div", { "data-qa": "actions-container", className: styles[`actions-wrapper_${type}`], children: [jsx("div", { className: classnames(styles.actionsStack, {
+                            [styles.actionsStackVerticalOnMobile]: type === 'mobile',
+                            [styles.actionsStackVerticalOnPageXs]: type === 'page',
+                        }), children: jsx(ButtonStack, { orientation: "vertical", children: [...primaryActions, ...secondaryActions] }) }), jsxs("div", { className: classnames(styles.actionsStack, {
+                            [styles.actionsStackHorizontalOnGtXs]: type === 'modal' || type === 'page',
+                        }), children: [secondaryActions && jsx(ButtonStack, { orientation: "horizontal", children: secondaryActions }), primaryActions && jsx(ButtonStack, { orientation: "horizontal", children: primaryActions })] })] })] }));
+};
+ActionBar.displayName = 'ActionBar';
+
+export { ActionBar };
+//# sourceMappingURL=ActionBar.js.map

package/ActionBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionBar.js","sources":["../src/ActionBar.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState, FC } from 'react';\nimport classnames from 'classnames';\n\nimport { throttle } from '@hh.ru/magritte-common-func-utils';\nimport { ActionBarProps } from '@hh.ru/magritte-ui-action-bar/types';\nimport { getScrollableParent, shouldShowDividerOrProgress } from '@hh.ru/magritte-ui-action-bar/utils';\nimport { ButtonStack } from '@hh.ru/magritte-ui-button-stack';\nimport { Divider } from '@hh.ru/magritte-ui-divider';\n\nimport styles from './action-bar.less';\n\nconst SCROLL_HANDLER_THROTTLE_MS = 50;\n\nexport const ActionBar: FC<ActionBarProps> = ({\n    type,\n    showDivider,\n    showProgress = false,\n    primaryActions = [],\n    secondaryActions = [],\n    wrapperRef,\n}) => {\n    const [isScrollEnd, setIsScrollEnd] = useState(false);\n    const actionBarRef = useRef<HTMLDivElement>(null);\n    const { shouldShowProgress, shouldShowDivider } = shouldShowDividerOrProgress({\n        type,\n        showDivider,\n        showProgress,\n        isScrollEnd,\n    });\n\n    useEffect(() => {\n        if (shouldShowProgress || typeof showDivider === 'boolean') {\n            return void 0;\n        }\n        const scrollableParent = getScrollableParent(actionBarRef.current);\n        const handleScroll = throttle(() => {\n            if (\n                scrollableParent &&\n                Math.abs(scrollableParent.scrollHeight - scrollableParent.clientHeight - scrollableParent.scrollTop) < 1\n            ) {\n                setIsScrollEnd(true);\n            } else {\n                setIsScrollEnd(false);\n            }\n        }, SCROLL_HANDLER_THROTTLE_MS);\n\n        if (scrollableParent === document.documentElement) {\n            window.addEventListener('scroll', handleScroll);\n        } else if (scrollableParent) {\n            scrollableParent.addEventListener('scroll', handleScroll);\n        }\n\n        return () => {\n            window.removeEventListener('scroll', handleScroll);\n            scrollableParent?.removeEventListener('scroll', handleScroll);\n        };\n    }, [shouldShowProgress, showDivider]);\n\n    useEffect(() => {\n        if (wrapperRef && actionBarRef.current) {\n            wrapperRef.current = actionBarRef.current.offsetHeight;\n        }\n    }, [wrapperRef, type, primaryActions, secondaryActions]);\n\n    if (primaryActions.length === 0 && secondaryActions.length === 0) {\n        return null;\n    }\n\n    return (\n        <div\n            ref={actionBarRef}\n            data-qa=\"action-bar\"\n            className={classnames({\n                [styles.actionBarFixed]: type === 'page',\n                [styles.actionBarWithProgressBar]: shouldShowProgress,\n            })}\n        >\n            {shouldShowDivider && (\n                <div data-qa=\"divider\">\n                    <Divider mode=\"horizontal\" />\n                </div>\n            )}\n            {shouldShowProgress && (\n                <div data-qa=\"progress-bar\" className={styles.progressBar}>\n                    {showProgress}\n                </div>\n            )}\n            <div data-qa=\"actions-container\" className={styles[`actions-wrapper_${type}`]}>\n                {/* Не получилось заюзать useBreakpoint, т.к. он по умолчанию при первичном рендере возвращает isXS = true\n                    Из-за этого для type=\"page\" на >XS экранах сначала рендерится вертикальный стэк хотя должен быть горизонтальный\n                    это может быть критично для определения высоты экшен бара */}\n                <div\n                    className={classnames(styles.actionsStack, {\n                        [styles.actionsStackVerticalOnMobile]: type === 'mobile',\n                        [styles.actionsStackVerticalOnPageXs]: type === 'page',\n                    })}\n                >\n                    <ButtonStack orientation=\"vertical\">{[...primaryActions, ...secondaryActions]}</ButtonStack>\n                </div>\n                <div\n                    className={classnames(styles.actionsStack, {\n                        [styles.actionsStackHorizontalOnGtXs]: type === 'modal' || type === 'page',\n                    })}\n                >\n                    {secondaryActions && <ButtonStack orientation=\"horizontal\">{secondaryActions}</ButtonStack>}\n                    {primaryActions && <ButtonStack orientation=\"horizontal\">{primaryActions}</ButtonStack>}\n                </div>\n            </div>\n        </div>\n    );\n};\n\nActionBar.displayName = 'ActionBar';\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/index.css

@@ -0,0 +1,108 @@
+:root{
+  --magritte-color-background-primary-v18-1-2:#ffffff;
+}
+.magritte-night-theme{
+  --magritte-color-background-primary-v18-1-2:#000000;
+}
+.magritte-action-bar-fixed___Ts-0i_2-0-0{
+  background-color:var(--magritte-color-background-primary-v18-1-2);
+  position:fixed;
+  bottom:0;
+  left:0;
+  width:100%;
+}
+.magritte-action-bar-with-progress-bar___mprqw_2-0-0{
+  border-radius:8px 8px 0 0;
+}
+.magritte-progress-bar___tSTjx_2-0-0{
+  padding:4px 4px 0;
+}
+.magritte-actions-wrapper_mobile___DWgfU_2-0-0{
+  padding:16px;
+}
+.magritte-actions-wrapper_modal___aQs2b_2-0-0{
+  padding:32px;
+}
+.magritte-actions-wrapper_page___NuaNO_2-0-0{
+  padding:16px;
+}
+@media (min-width: 1020px){
+  body.magritte-old-layout .magritte-actions-wrapper_page___NuaNO_2-0-0{
+    padding:16px 68px;
+  }
+}
+@media (min-width: 1024px){
+  body:not(.magritte-old-layout) .magritte-actions-wrapper_page___NuaNO_2-0-0{
+    padding:16px 68px;
+  }
+}
+@media (min-width: 1340px){
+  body.magritte-old-layout .magritte-actions-wrapper_page___NuaNO_2-0-0{
+    padding:16px 76px;
+  }
+}
+@media (min-width: 1280px){
+  body:not(.magritte-old-layout) .magritte-actions-wrapper_page___NuaNO_2-0-0{
+    padding:16px 76px;
+  }
+}
+@media (min-width: 1440px){
+  body:not(.magritte-old-layout) .magritte-actions-wrapper_page___NuaNO_2-0-0{
+    padding:16px 108px;
+  }
+}
+@media (min-width: 1920px){
+  body:not(.magritte-old-layout) .magritte-actions-wrapper_page___NuaNO_2-0-0{
+    padding:16px 252px;
+  }
+}
+.magritte-actions-stack___12VkP_2-0-0{
+  display:none;
+}
+.magritte-actions-stack-vertical-on-mobile___82xhC_2-0-0{
+  display:block;
+}
+@media (min-width: 1020px){
+  body.magritte-old-layout .magritte-actions-stack-vertical-on-mobile___82xhC_2-0-0{
+    display:none;
+  }
+}
+@media (min-width: 1024px){
+  body:not(.magritte-old-layout) .magritte-actions-stack-vertical-on-mobile___82xhC_2-0-0{
+    display:none;
+  }
+}
+.magritte-actions-stack-vertical-on-page-xs___F8kiH_2-0-0{
+  display:block;
+}
+@media (min-width: 700px){
+  body.magritte-old-layout .magritte-actions-stack-vertical-on-page-xs___F8kiH_2-0-0{
+    display:none;
+  }
+}
+@media (min-width: 600px){
+  body:not(.magritte-old-layout) .magritte-actions-stack-vertical-on-page-xs___F8kiH_2-0-0{
+    display:none;
+  }
+}
+.magritte-actions-stack-horizontal-on-gt-xs___QXT--_2-0-0{
+  display:none;
+}
+@media (min-width: 700px){
+  body.magritte-old-layout .magritte-actions-stack-horizontal-on-gt-xs___QXT--_2-0-0{
+    display:flex;
+    flex-grow:1;
+    flex-direction:row;
+    justify-content:space-between;
+    gap:12px;
+  }
+}
+@media (min-width: 600px){
+  body:not(.magritte-old-layout) .magritte-actions-stack-horizontal-on-gt-xs___QXT--_2-0-0{
+    display:flex;
+    flex-grow:1;
+    flex-direction:row;
+    justify-content:space-between;
+    gap:12px;
+  }
+}

package/index.d.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './ActionBar';

package/index.js

@@ -0,0 +1,10 @@
+import './index.css';
+export { ActionBar } from './ActionBar.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'classnames';
+import '@hh.ru/magritte-common-func-utils';
+import './utils.js';
+import '@hh.ru/magritte-ui-button-stack';
+import '@hh.ru/magritte-ui-divider';
+//# sourceMappingURL=index.js.map

package/index.js.map

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

package/index.mock.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const ActionBar: FC<Record<string, unknown>>;

package/index.mock.js

@@ -0,0 +1,9 @@
+import './index.css';
+import { mockComponent } from '@hh.ru/magritte-ui-mock-component';
+
+const ActionBar = mockComponent('ActionBar', undefined, {
+    withChildren: false,
+});
+
+export { ActionBar };
+//# sourceMappingURL=index.mock.js.map

package/index.mock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mock.js","sources":["../src/index.mock.ts"],"sourcesContent":["import { FC } from 'react';\n\nimport { mockComponent } from '@hh.ru/magritte-ui-mock-component';\n\nexport const ActionBar: FC<Record<string, unknown>> = mockComponent('ActionBar', undefined, {\n    withChildren: false,\n});\n"],"names":[],"mappings":";;MAIa,SAAS,GAAgC,aAAa,CAAC,WAAW,EAAE,SAAS,EAAE;AACxF,IAAA,YAAY,EAAE,KAAK;AACtB,CAAA;;;;"}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@hh.ru/magritte-ui-action-bar",
+  "version": "2.0.0",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "sideEffects": [
+    "index.css"
+  ],
+  "scripts": {
+    "build": "yarn root:build $(pwd)",
+    "build-test-branch": "yarn root:build-test-branch $(pwd)",
+    "changelog": "yarn root:changelog $(pwd)",
+    "prepack": "yarn root:prepack $(pwd)",
+    "postpublish": "yarn root:postpublish $(pwd)",
+    "stylelint-test": "yarn root:stylelint-test $(pwd)",
+    "eslint-test": "yarn root:eslint-test $(pwd)",
+    "ts-config": "yarn root:ts-config $(pwd)",
+    "ts-check": "yarn root:ts-check $(pwd)",
+    "test": "yarn root:test $(pwd)"
+  },
+  "dependencies": {
+    "@hh.ru/magritte-common-func-utils": "1.3.6",
+    "@hh.ru/magritte-ui-button": "4.0.0",
+    "@hh.ru/magritte-ui-button-stack": "2.0.7",
+    "@hh.ru/magritte-ui-divider": "1.1.25",
+    "@hh.ru/magritte-ui-mock-component": "1.0.10"
+  },
+  "peerDependencies": {
+    "classnames": ">=2.3.2",
+    "react": ">=18.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "be4048efc0a1d6bed295e4fda829c6e0bd0f0838"
+}

package/types.d.ts

@@ -0,0 +1,38 @@
+import { ComponentProps, MutableRefObject, ReactElement, ReactNode } from 'react';
+import { Button } from '@hh.ru/magritte-ui-button';
+export type ActionBarType = 'page' | 'modal' | 'mobile';
+export type NonEmptyArray<T> = [T, ...T[]];
+export type ButtonElement = ReactElement<ComponentProps<typeof Button>>;
+interface BaseActionBarProps {
+    /** ActionBar тип */
+    type: ActionBarType;
+    /** wrapperRef для получения высоты экшен бара */
+    wrapperRef?: MutableRefObject<number | undefined>;
+}
+interface ActionBarWithPrimaryProps extends BaseActionBarProps {
+    /** Массив с primary кнопками */
+    primaryActions: NonEmptyArray<ButtonElement>;
+    /** Массив с secondary кнопками */
+    secondaryActions?: NonEmptyArray<ButtonElement>;
+}
+interface ActionBarWithSecondaryProps extends BaseActionBarProps {
+    primaryActions?: NonEmptyArray<ButtonElement>;
+    secondaryActions: NonEmptyArray<ButtonElement>;
+}
+type ActionBarDividerProgressProps = {
+    type: Extract<ActionBarType, 'mobile'>;
+    /** Показывать ли разделитель */
+    showDivider?: boolean;
+    /** Показывать ли прогресс бар */
+    showProgress?: never;
+} | {
+    type: Exclude<ActionBarType, 'mobile'>;
+    showDivider?: boolean;
+    showProgress?: never;
+} | {
+    type: Exclude<ActionBarType, 'mobile'>;
+    showDivider?: never;
+    showProgress?: ReactNode;
+};
+export type ActionBarProps = (ActionBarWithPrimaryProps | ActionBarWithSecondaryProps) & ActionBarDividerProgressProps;
+export {};

package/types.js

@@ -0,0 +1,3 @@
+import './index.css';
+
+//# sourceMappingURL=types.js.map

package/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/utils.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { ActionBarType } from './types';
+export declare const getScrollableParent: (node: HTMLElement | null) => HTMLElement | null;
+export declare const shouldShowDividerOrProgress: ({ type, showDivider, showProgress, isScrollEnd, }: {
+    type: ActionBarType;
+    showDivider: boolean | undefined;
+    showProgress: ReactNode | undefined;
+    isScrollEnd: boolean;
+}) => {
+    shouldShowProgress: boolean;
+    shouldShowDivider: boolean;
+};

package/utils.js

@@ -0,0 +1,29 @@
+import './index.css';
+import React from 'react';
+
+const getScrollableParent = (node) => {
+    if (node == null) {
+        return null;
+    }
+    if (node.scrollHeight > node.clientHeight) {
+        return node;
+    }
+    return getScrollableParent(node.parentElement);
+};
+const shouldShowDividerOrProgress = ({ type, showDivider, showProgress, isScrollEnd, }) => {
+    const shouldShowProgress = type === 'mobile' ? false : React.isValidElement(showProgress);
+    if (shouldShowProgress) {
+        return {
+            shouldShowProgress,
+            shouldShowDivider: false,
+        };
+    }
+    const shouldShowDivider = typeof showDivider === 'boolean' ? showDivider : !isScrollEnd;
+    return {
+        shouldShowProgress: false,
+        shouldShowDivider,
+    };
+};
+
+export { getScrollableParent, shouldShowDividerOrProgress };
+//# sourceMappingURL=utils.js.map

package/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../src/utils.ts"],"sourcesContent":["import React, { ReactNode } from 'react';\n\nimport { ActionBarType } from '@hh.ru/magritte-ui-action-bar/types';\n\nexport const getScrollableParent = (node: HTMLElement | null): HTMLElement | null => {\n    if (node == null) {\n        return null;\n    }\n    if (node.scrollHeight > node.clientHeight) {\n        return node;\n    }\n    return getScrollableParent(node.parentElement);\n};\n\nexport const shouldShowDividerOrProgress = ({\n    type,\n    showDivider,\n    showProgress,\n    isScrollEnd,\n}: {\n    type: ActionBarType;\n    showDivider: boolean | undefined;\n    showProgress: ReactNode | undefined;\n    isScrollEnd: boolean;\n}): { shouldShowProgress: boolean; shouldShowDivider: boolean } => {\n    const shouldShowProgress = type === 'mobile' ? false : React.isValidElement(showProgress);\n    if (shouldShowProgress) {\n        return {\n            shouldShowProgress,\n            shouldShowDivider: false,\n        };\n    }\n    const shouldShowDivider = typeof showDivider === 'boolean' ? showDivider : !isScrollEnd;\n    return {\n        shouldShowProgress: false,\n        shouldShowDivider,\n    };\n};\n"],"names":[],"mappings":";;AAIa,MAAA,mBAAmB,GAAG,CAAC,IAAwB,KAAwB;IAChF,IAAI,IAAI,IAAI,IAAI,EAAE;AACd,QAAA,OAAO,IAAI,CAAC;AACf,KAAA;AACD,IAAA,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,EAAE;AACvC,QAAA,OAAO,IAAI,CAAC;AACf,KAAA;AACD,IAAA,OAAO,mBAAmB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;AACnD,EAAE;AAEK,MAAM,2BAA2B,GAAG,CAAC,EACxC,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,WAAW,GAMd,KAAiE;AAC9D,IAAA,MAAM,kBAAkB,GAAG,IAAI,KAAK,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;AAC1F,IAAA,IAAI,kBAAkB,EAAE;QACpB,OAAO;YACH,kBAAkB;AAClB,YAAA,iBAAiB,EAAE,KAAK;SAC3B,CAAC;AACL,KAAA;AACD,IAAA,MAAM,iBAAiB,GAAG,OAAO,WAAW,KAAK,SAAS,GAAG,WAAW,GAAG,CAAC,WAAW,CAAC;IACxF,OAAO;AACH,QAAA,kBAAkB,EAAE,KAAK;QACzB,iBAAiB;KACpB,CAAC;AACN;;;;"}