@doyourjob/gravity-ui-page-constructor-addons 2.1.19 → 2.1.20

package/build/cjs/components/HeaderStripe/HeaderStripe.css

@@ -23,6 +23,15 @@ unpredictable css rules order in build */
     animation: expand-desktop 0.5s ease forwards;
   }
 }
+.pc-addons-header-stripe__root_closing {
+  animation: constrict-mobile 0.5s ease forwards;
+}
+
+@media (min-width: 769px) {
+  .pc-addons-header-stripe__root_closing {
+    animation: constrict-desktop 0.5s ease forwards;
+  }
+}
 .pc-addons-header-stripe__content {
   position: relative;
   display: flex;
@@ -126,6 +135,14 @@ unpredictable css rules order in build */
     max-height: 56px;
   }
 }
+@keyframes constrict-mobile {
+  from {
+    max-height: 56px;
+  }
+  to {
+    max-height: 0;
+  }
+}
 @keyframes expand-desktop {
   from {
     max-height: 0;
@@ -133,4 +150,12 @@ unpredictable css rules order in build */
   to {
     max-height: 36px;
   }
+}
+@keyframes constrict-desktop {
+  from {
+    max-height: 36px;
+  }
+  to {
+    max-height: 0;
+  }
 }

package/build/cjs/components/HeaderStripe/HeaderStripe.d.ts

@@ -13,7 +13,8 @@ export type HeaderStripeProps = {
     items: HeaderStripeItemType[];
     onlyDesktop?: boolean;
     isAbsolute?: boolean;
+    canClose?: boolean;
     onClose?: () => void;
 };
-export declare const HeaderStripe: ({ duration, items, textColor, background, backgroundImage, onlyDesktop, onClose, }: HeaderStripeProps) => React.JSX.Element;
+export declare const HeaderStripe: ({ duration, items, textColor, background, backgroundImage, onlyDesktop, canClose, onClose, }: HeaderStripeProps) => React.JSX.Element;
 export {};

package/build/cjs/components/HeaderStripe/HeaderStripe.js

@@ -7,6 +7,7 @@ const gravity_ui_page_constructor_1 = require("@doyourjob/gravity-ui-page-constr
 const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const cn_1 = require("../../utils/cn");
+const i18n_1 = tslib_1.__importDefault(require("./i18n"));
 const b = (0, cn_1.block)('header-stripe');
 const renderItemContent = (item) => {
     if (typeof item === 'string') {
@@ -19,12 +20,17 @@ const renderItemContent = (item) => {
         return item.text;
     }
 };
-const HeaderStripe = ({ duration = 8000, items, textColor, background, backgroundImage, onlyDesktop, onClose, }) => {
+const HeaderStripe = ({ duration = 8000, items, textColor, background, backgroundImage, onlyDesktop, canClose, onClose, }) => {
     const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
+    const [isClosing, setIsClosing] = (0, react_1.useState)(false);
     const isMobile = (0, uikit_1.useMobile)();
     const filteredItems = (0, react_1.useMemo)(() => isMobile
         ? items.filter((item) => (typeof item === 'object' ? !item.onlyDesktop : true))
         : items, [items, isMobile]);
+    const handleClose = (0, react_1.useCallback)(() => {
+        setIsClosing(true);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [onClose]);
     (0, react_1.useEffect)(() => {
         if (filteredItems.length > 0) {
             setActiveIndex(0);
@@ -53,7 +59,7 @@ const HeaderStripe = ({ duration = 8000, items, textColor, background, backgroun
         }
         return properties;
     }, [textColor, background, backgroundImage]);
-    return (react_1.default.createElement("div", { className: b('root', { 'only-desktop': onlyDesktop }), style: rootStyle },
+    return (react_1.default.createElement("div", { className: b('root', { 'only-desktop': onlyDesktop, closing: isClosing }), style: rootStyle },
         react_1.default.createElement(gravity_ui_page_constructor_1.Grid, null,
             react_1.default.createElement(gravity_ui_page_constructor_1.Col, null,
                 react_1.default.createElement("div", { className: b('content', { 'with-close': Boolean(onClose) }) },
@@ -70,7 +76,7 @@ const HeaderStripe = ({ duration = 8000, items, textColor, background, backgroun
                             }) },
                             react_1.default.createElement("div", { className: b('item-content') }, renderItemContent(item))));
                     }),
-                    onClose && (react_1.default.createElement("button", { className: b('close'), onClick: onClose },
+                    canClose && (react_1.default.createElement("button", { "aria-label": (0, i18n_1.default)('close'), className: b('close'), onClick: handleClose },
                         react_1.default.createElement(uikit_1.Icon, { data: icons_1.Xmark, className: b('close-icon'), size: 16 }))))))));
 };
 exports.HeaderStripe = HeaderStripe;

package/build/cjs/components/HeaderStripe/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "close": "Close"
+}

package/build/cjs/components/HeaderStripe/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/build/cjs/components/HeaderStripe/i18n/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const registerKeyset_1 = require("../../../utils/registerKeyset");
+const en_json_1 = tslib_1.__importDefault(require("./en.json"));
+const ru_json_1 = tslib_1.__importDefault(require("./ru.json"));
+const COMPONENT = 'HeaderStripe';
+exports.default = (0, registerKeyset_1.registerKeyset)({ en: en_json_1.default, ru: ru_json_1.default }, COMPONENT);

package/build/cjs/components/HeaderStripe/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "close": "Закрыть"
+}

package/build/esm/components/HeaderStripe/HeaderStripe.css

@@ -23,6 +23,15 @@ unpredictable css rules order in build */
     animation: expand-desktop 0.5s ease forwards;
   }
 }
+.pc-addons-header-stripe__root_closing {
+  animation: constrict-mobile 0.5s ease forwards;
+}
+
+@media (min-width: 769px) {
+  .pc-addons-header-stripe__root_closing {
+    animation: constrict-desktop 0.5s ease forwards;
+  }
+}
 .pc-addons-header-stripe__content {
   position: relative;
   display: flex;
@@ -126,6 +135,14 @@ unpredictable css rules order in build */
     max-height: 56px;
   }
 }
+@keyframes constrict-mobile {
+  from {
+    max-height: 56px;
+  }
+  to {
+    max-height: 0;
+  }
+}
 @keyframes expand-desktop {
   from {
     max-height: 0;
@@ -133,4 +150,12 @@ unpredictable css rules order in build */
   to {
     max-height: 36px;
   }
+}
+@keyframes constrict-desktop {
+  from {
+    max-height: 36px;
+  }
+  to {
+    max-height: 0;
+  }
 }

package/build/esm/components/HeaderStripe/HeaderStripe.d.ts

@@ -14,7 +14,8 @@ export type HeaderStripeProps = {
     items: HeaderStripeItemType[];
     onlyDesktop?: boolean;
     isAbsolute?: boolean;
+    canClose?: boolean;
     onClose?: () => void;
 };
-export declare const HeaderStripe: ({ duration, items, textColor, background, backgroundImage, onlyDesktop, onClose, }: HeaderStripeProps) => React.JSX.Element;
+export declare const HeaderStripe: ({ duration, items, textColor, background, backgroundImage, onlyDesktop, canClose, onClose, }: HeaderStripeProps) => React.JSX.Element;
 export {};

package/build/esm/components/HeaderStripe/HeaderStripe.js

@@ -1,8 +1,9 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Col, Grid } from '@doyourjob/gravity-ui-page-constructor';
 import { Xmark } from '@gravity-ui/icons';
 import { Icon, useMobile } from '@gravity-ui/uikit';
 import { block } from '../../utils/cn';
+import i18n from './i18n';
 import './HeaderStripe.css';
 const b = block('header-stripe');
 const renderItemContent = (item) => {
@@ -16,12 +17,17 @@ const renderItemContent = (item) => {
         return item.text;
     }
 };
-export const HeaderStripe = ({ duration = 8000, items, textColor, background, backgroundImage, onlyDesktop, onClose, }) => {
+export const HeaderStripe = ({ duration = 8000, items, textColor, background, backgroundImage, onlyDesktop, canClose, onClose, }) => {
     const [activeIndex, setActiveIndex] = useState(0);
+    const [isClosing, setIsClosing] = useState(false);
     const isMobile = useMobile();
     const filteredItems = useMemo(() => isMobile
         ? items.filter((item) => (typeof item === 'object' ? !item.onlyDesktop : true))
         : items, [items, isMobile]);
+    const handleClose = useCallback(() => {
+        setIsClosing(true);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [onClose]);
     useEffect(() => {
         if (filteredItems.length > 0) {
             setActiveIndex(0);
@@ -50,7 +56,7 @@ export const HeaderStripe = ({ duration = 8000, items, textColor, background, ba
         }
         return properties;
     }, [textColor, background, backgroundImage]);
-    return (React.createElement("div", { className: b('root', { 'only-desktop': onlyDesktop }), style: rootStyle },
+    return (React.createElement("div", { className: b('root', { 'only-desktop': onlyDesktop, closing: isClosing }), style: rootStyle },
         React.createElement(Grid, null,
             React.createElement(Col, null,
                 React.createElement("div", { className: b('content', { 'with-close': Boolean(onClose) }) },
@@ -67,6 +73,6 @@ export const HeaderStripe = ({ duration = 8000, items, textColor, background, ba
                             }) },
                             React.createElement("div", { className: b('item-content') }, renderItemContent(item))));
                     }),
-                    onClose && (React.createElement("button", { className: b('close'), onClick: onClose },
+                    canClose && (React.createElement("button", { "aria-label": i18n('close'), className: b('close'), onClick: handleClose },
                         React.createElement(Icon, { data: Xmark, className: b('close-icon'), size: 16 }))))))));
 };

package/build/esm/components/HeaderStripe/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "close": "Close"
+}

package/build/esm/components/HeaderStripe/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/build/esm/components/HeaderStripe/i18n/index.js

@@ -0,0 +1,5 @@
+import { registerKeyset } from '../../../utils/registerKeyset';
+import en from './en.json';
+import ru from './ru.json';
+const COMPONENT = 'HeaderStripe';
+export default registerKeyset({ en, ru }, COMPONENT);

package/build/esm/components/HeaderStripe/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "close": "Закрыть"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@doyourjob/gravity-ui-page-constructor-addons",
-  "version": "2.1.19",
+  "version": "2.1.20",
   "description": "Components and plugins for @doyourjob/gravity-ui-page-constructor",
   "license": "MIT",
   "repository": {