@gravity-ui/dashkit 8.15.2 → 8.15.3

package/build/cjs/components/GridItem/GridItem.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+const constants_1 = require("../../constants");
 const DashKitContext_1 = require("../../context/DashKitContext");
 const cn_1 = require("../../utils/cn");
 const Item_1 = tslib_1.__importDefault(require("../Item/Item"));
@@ -42,6 +43,29 @@ class GridItem extends react_1.default.PureComponent {
         this.state = {
             isFocused: false,
         };
+        this.onOverlayItemClick = () => {
+            // Creating button element to trigger focus out
+            const focusDummy = document.createElement('button');
+            const styles = {
+                width: '0',
+                height: '0',
+                opacity: '0',
+                position: 'fixed',
+                top: '0',
+                left: '0',
+            };
+            Object.entries(styles).forEach(([key, value]) => {
+                focusDummy.style[key] = value;
+            });
+            // requestAnimationFrame to make call after alert() or confirm()
+            requestAnimationFrame(() => {
+                // Adding elment an changing focus
+                document.body.appendChild(focusDummy);
+                focusDummy.focus();
+                document.body.removeChild(focusDummy);
+                this.setState({ isFocused: false });
+            });
+        };
         this.onFocusHandler = () => {
             this.setState({ isFocused: true });
             if (this.controller) {
@@ -91,10 +115,10 @@ class GridItem extends react_1.default.PureComponent {
         if (!editMode || this.props.item.data._editActive || isPlaceholder) {
             return null;
         }
-        const { item } = this.props;
+        const { item, focusable } = this.props;
         return (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("div", { className: b('overlay') }),
-            react_1.default.createElement(OverlayControls_1.default, { configItem: item })));
+            react_1.default.createElement(OverlayControls_1.default, { configItem: item, onItemClick: focusable ? this.onOverlayItemClick : null })));
     }
     render() {
         // из-за бага, что Grid Items unmounts при изменении static, isDraggable, isResaizable
@@ -104,9 +128,13 @@ class GridItem extends react_1.default.PureComponent {
         const width = Number.parseInt(style.width, 10);
         const height = Number.parseInt(style.height, 10);
         const transform = style.transform;
-        const preparedClassName = editMode
+        const preparedClassName = (editMode
             ? className
-            : className.replace('react-resizable', '').replace('react-draggable', '');
+            : className
+                .replace('react-resizable', '')
+                .replace('react-draggable', '')
+                .replace(constants_1.FOCUSED_CLASS_NAME, '')) +
+            (this.state.isFocused ? ` ${constants_1.FOCUSED_CLASS_NAME}` : '');
         const preparedChildren = editMode ? children : null;
         const reactGridLayoutProps = editMode
             ? { onMouseDown, onMouseUp, onTouchEnd, onTouchStart }

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

@@ -36,6 +36,7 @@ interface OverlayControlsDefaultProps {
 }
 interface OverlayControlsProps extends OverlayControlsDefaultProps {
     configItem: ConfigItem;
+    onItemClick?: () => void | null;
 }
 type PreparedCopyItemOptionsArg = Pick<ConfigItem, 'data' | 'type' | 'defaults' | 'namespace'> & {
     timestamp: number;

package/build/cjs/components/OverlayControls/OverlayControls.js

@@ -28,10 +28,13 @@ class OverlayControls extends react_1.default.Component {
             return (overlayControls && overlayControls[configItem.type]) || [];
         };
         this.renderControlsItem = (item, index, length) => {
-            const { view, size } = this.props;
+            const { view, size, onItemClick } = this.props;
             const { title, handler, icon, iconSize, qa } = item;
             const onItemClickHandler = typeof handler === 'function' ? handler : noop_1.default;
-            return (react_1.default.createElement(uikit_1.Button, { key: index, view: view, size: size, title: title, pin: this.getControlItemPinStyle(index, length), onClick: () => onItemClickHandler(this.props.configItem), qa: qa },
+            return (react_1.default.createElement(uikit_1.Button, { key: index, view: view, size: size, title: title, pin: this.getControlItemPinStyle(index, length), onClick: () => {
+                    onItemClickHandler(this.props.configItem);
+                    onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick();
+                }, qa: qa },
                 react_1.default.createElement(uikit_1.Icon, { data: icon || icons_1.Gear, size: icon ? iconSize : constants_1.OVERLAY_ICON_SIZE })));
         };
         this.getDefaultControls = () => {
@@ -46,6 +49,7 @@ class OverlayControls extends react_1.default.Component {
             // выбираем только items-ы у которых проставлено поле `allWidgetsControls:true`
             // те контролы, которые будут показываться слева от меню
             let controls = [];
+            const { onItemClick } = this.props;
             for (const controlItem of Object.values(this.context.overlayControls || {})) {
                 controls = controls.concat((controlItem.filter((item) => {
                     var _a;
@@ -62,14 +66,19 @@ class OverlayControls extends react_1.default.Component {
                         return item;
                     }
                     return Object.assign(Object.assign({}, item), { handler: typeof item.handler === 'function'
-                            ? item.handler
+                            ? (...args) => {
+                                var _a;
+                                const result = (_a = item.handler) === null || _a === void 0 ? void 0 : _a.call(item, ...args);
+                                onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick();
+                                return result;
+                            }
                             : ((_a = this.getDropDownMenuItemConfig(item.id)) === null || _a === void 0 ? void 0 : _a.action) || (() => { }) });
                 }));
             }
             return controls;
         };
         this.onCopyItem = () => {
-            var _a;
+            var _a, _b, _c;
             const { configItem } = this.props;
             const correspondedItemLayout = this.context.getLayoutItem(configItem.id);
             let options = {
@@ -89,13 +98,18 @@ class OverlayControls extends react_1.default.Component {
             localStorage.setItem(constants_1.COPIED_WIDGET_STORE_KEY, JSON.stringify(options));
             // https://stackoverflow.com/questions/35865481/storage-event-not-firing
             window.dispatchEvent(new Event('storage'));
+            (_c = (_b = this.props).onItemClick) === null || _c === void 0 ? void 0 : _c.call(_b);
         };
         this.onEditItem = () => {
+            var _a, _b;
             this.context.editItem(this.props.configItem);
+            (_b = (_a = this.props).onItemClick) === null || _b === void 0 ? void 0 : _b.call(_a);
         };
         this.onRemoveItem = () => {
+            var _a, _b;
             const { id } = this.props.configItem;
             this.context.removeItem(id);
+            (_b = (_a = this.props).onItemClick) === null || _b === void 0 ? void 0 : _b.call(_a);
         };
     }
     render() {
@@ -161,7 +175,7 @@ class OverlayControls extends react_1.default.Component {
         return menu === null || menu === void 0 ? void 0 : menu.every((item) => Object.values(constants_1.MenuItems).includes(String(item)));
     }
     renderDropdownMenu(isOnlyOneItem) {
-        const { view, size } = this.props;
+        const { view, size, onItemClick } = this.props;
         const { menu: contextMenu, itemsParams, itemsState } = this.context;
         const configItem = this.props.configItem;
         const itemParams = itemsParams[configItem.id];
@@ -187,7 +201,11 @@ class OverlayControls extends react_1.default.Component {
                 }
                 const itemHandler = item.handler;
                 const itemAction = typeof itemHandler === 'function'
-                    ? () => itemHandler(configItem, itemParams, itemState)
+                    ? () => {
+                        const result = itemHandler(configItem, itemParams, itemState);
+                        onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick();
+                        return result;
+                    }
                     : ((_a = this.getDropDownMenuItemConfig(item.id)) === null || _a === void 0 ? void 0 : _a.action) || (() => { });
                 memo.push({
                     // @ts-expect-error

package/build/cjs/constants/common.d.ts

@@ -14,3 +14,4 @@ export declare const DEFAULT_WIDGET_WIDTH = 3;
 export declare const DEFAULT_GROUP = "__default";
 export declare const COMPACT_TYPE_HORIZONTAL_NOWRAP = "horizontal-nowrap";
 export declare const DRAGGABLE_CANCEL_CLASS_NAME = "dashkit_draggable_cancel";
+export declare const FOCUSED_CLASS_NAME = "dashkit_focused";

package/build/cjs/constants/common.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DRAGGABLE_CANCEL_CLASS_NAME = exports.COMPACT_TYPE_HORIZONTAL_NOWRAP = exports.DEFAULT_GROUP = exports.DEFAULT_WIDGET_WIDTH = exports.DEFAULT_WIDGET_HEIGHT = exports.MenuItems = exports.TEMPORARY_ITEM_ID = exports.OVERLAY_ICON_SIZE = exports.OVERLAY_CLASS_NAME = exports.OVERLAY_CONTROLS_CLASS_NAME = exports.DEFAULT_NAMESPACE = exports.COPIED_WIDGET_STORE_KEY = void 0;
+exports.FOCUSED_CLASS_NAME = exports.DRAGGABLE_CANCEL_CLASS_NAME = exports.COMPACT_TYPE_HORIZONTAL_NOWRAP = exports.DEFAULT_GROUP = exports.DEFAULT_WIDGET_WIDTH = exports.DEFAULT_WIDGET_HEIGHT = exports.MenuItems = exports.TEMPORARY_ITEM_ID = exports.OVERLAY_ICON_SIZE = exports.OVERLAY_CLASS_NAME = exports.OVERLAY_CONTROLS_CLASS_NAME = exports.DEFAULT_NAMESPACE = exports.COPIED_WIDGET_STORE_KEY = void 0;
 exports.COPIED_WIDGET_STORE_KEY = 'dashCopiedItem';
 exports.DEFAULT_NAMESPACE = 'default';
 exports.OVERLAY_CONTROLS_CLASS_NAME = 'dashkit-overlay-controls';
@@ -17,3 +17,4 @@ exports.DEFAULT_WIDGET_WIDTH = 3;
 exports.DEFAULT_GROUP = '__default';
 exports.COMPACT_TYPE_HORIZONTAL_NOWRAP = 'horizontal-nowrap';
 exports.DRAGGABLE_CANCEL_CLASS_NAME = 'dashkit_draggable_cancel';
+exports.FOCUSED_CLASS_NAME = 'dashkit_focused';

package/build/esm/components/GridItem/GridItem.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { FOCUSED_CLASS_NAME } from '../../constants';
 import { DashKitContext } from '../../context/DashKitContext';
 import { cn } from '../../utils/cn';
 import Item from '../Item/Item';
@@ -40,6 +41,29 @@ class GridItem extends React.PureComponent {
         this.state = {
             isFocused: false,
         };
+        this.onOverlayItemClick = () => {
+            // Creating button element to trigger focus out
+            const focusDummy = document.createElement('button');
+            const styles = {
+                width: '0',
+                height: '0',
+                opacity: '0',
+                position: 'fixed',
+                top: '0',
+                left: '0',
+            };
+            Object.entries(styles).forEach(([key, value]) => {
+                focusDummy.style[key] = value;
+            });
+            // requestAnimationFrame to make call after alert() or confirm()
+            requestAnimationFrame(() => {
+                // Adding elment an changing focus
+                document.body.appendChild(focusDummy);
+                focusDummy.focus();
+                document.body.removeChild(focusDummy);
+                this.setState({ isFocused: false });
+            });
+        };
         this.onFocusHandler = () => {
             this.setState({ isFocused: true });
             if (this.controller) {
@@ -89,10 +113,10 @@ class GridItem extends React.PureComponent {
         if (!editMode || this.props.item.data._editActive || isPlaceholder) {
             return null;
         }
-        const { item } = this.props;
+        const { item, focusable } = this.props;
         return (React.createElement(React.Fragment, null,
             React.createElement("div", { className: b('overlay') }),
-            React.createElement(OverlayControls, { configItem: item })));
+            React.createElement(OverlayControls, { configItem: item, onItemClick: focusable ? this.onOverlayItemClick : null })));
     }
     render() {
         // из-за бага, что Grid Items unmounts при изменении static, isDraggable, isResaizable
@@ -102,9 +126,13 @@ class GridItem extends React.PureComponent {
         const width = Number.parseInt(style.width, 10);
         const height = Number.parseInt(style.height, 10);
         const transform = style.transform;
-        const preparedClassName = editMode
+        const preparedClassName = (editMode
             ? className
-            : className.replace('react-resizable', '').replace('react-draggable', '');
+            : className
+                .replace('react-resizable', '')
+                .replace('react-draggable', '')
+                .replace(FOCUSED_CLASS_NAME, '')) +
+            (this.state.isFocused ? ` ${FOCUSED_CLASS_NAME}` : '');
         const preparedChildren = editMode ? children : null;
         const reactGridLayoutProps = editMode
             ? { onMouseDown, onMouseUp, onTouchEnd, onTouchStart }

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

@@ -37,6 +37,7 @@ interface OverlayControlsDefaultProps {
 }
 interface OverlayControlsProps extends OverlayControlsDefaultProps {
     configItem: ConfigItem;
+    onItemClick?: () => void | null;
 }
 type PreparedCopyItemOptionsArg = Pick<ConfigItem, 'data' | 'type' | 'defaults' | 'namespace'> & {
     timestamp: number;

package/build/esm/components/OverlayControls/OverlayControls.js

@@ -25,10 +25,13 @@ class OverlayControls extends React.Component {
             return (overlayControls && overlayControls[configItem.type]) || [];
         };
         this.renderControlsItem = (item, index, length) => {
-            const { view, size } = this.props;
+            const { view, size, onItemClick } = this.props;
             const { title, handler, icon, iconSize, qa } = item;
             const onItemClickHandler = typeof handler === 'function' ? handler : noop;
-            return (React.createElement(Button, { key: index, view: view, size: size, title: title, pin: this.getControlItemPinStyle(index, length), onClick: () => onItemClickHandler(this.props.configItem), qa: qa },
+            return (React.createElement(Button, { key: index, view: view, size: size, title: title, pin: this.getControlItemPinStyle(index, length), onClick: () => {
+                    onItemClickHandler(this.props.configItem);
+                    onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick();
+                }, qa: qa },
                 React.createElement(Icon, { data: icon || Gear, size: icon ? iconSize : OVERLAY_ICON_SIZE })));
         };
         this.getDefaultControls = () => {
@@ -43,6 +46,7 @@ class OverlayControls extends React.Component {
             // выбираем только items-ы у которых проставлено поле `allWidgetsControls:true`
             // те контролы, которые будут показываться слева от меню
             let controls = [];
+            const { onItemClick } = this.props;
             for (const controlItem of Object.values(this.context.overlayControls || {})) {
                 controls = controls.concat((controlItem.filter((item) => {
                     var _a;
@@ -59,14 +63,19 @@ class OverlayControls extends React.Component {
                         return item;
                     }
                     return Object.assign(Object.assign({}, item), { handler: typeof item.handler === 'function'
-                            ? item.handler
+                            ? (...args) => {
+                                var _a;
+                                const result = (_a = item.handler) === null || _a === void 0 ? void 0 : _a.call(item, ...args);
+                                onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick();
+                                return result;
+                            }
                             : ((_a = this.getDropDownMenuItemConfig(item.id)) === null || _a === void 0 ? void 0 : _a.action) || (() => { }) });
                 }));
             }
             return controls;
         };
         this.onCopyItem = () => {
-            var _a;
+            var _a, _b, _c;
             const { configItem } = this.props;
             const correspondedItemLayout = this.context.getLayoutItem(configItem.id);
             let options = {
@@ -86,13 +95,18 @@ class OverlayControls extends React.Component {
             localStorage.setItem(COPIED_WIDGET_STORE_KEY, JSON.stringify(options));
             // https://stackoverflow.com/questions/35865481/storage-event-not-firing
             window.dispatchEvent(new Event('storage'));
+            (_c = (_b = this.props).onItemClick) === null || _c === void 0 ? void 0 : _c.call(_b);
         };
         this.onEditItem = () => {
+            var _a, _b;
             this.context.editItem(this.props.configItem);
+            (_b = (_a = this.props).onItemClick) === null || _b === void 0 ? void 0 : _b.call(_a);
         };
         this.onRemoveItem = () => {
+            var _a, _b;
             const { id } = this.props.configItem;
             this.context.removeItem(id);
+            (_b = (_a = this.props).onItemClick) === null || _b === void 0 ? void 0 : _b.call(_a);
         };
     }
     render() {
@@ -158,7 +172,7 @@ class OverlayControls extends React.Component {
         return menu === null || menu === void 0 ? void 0 : menu.every((item) => Object.values(MenuItems).includes(String(item)));
     }
     renderDropdownMenu(isOnlyOneItem) {
-        const { view, size } = this.props;
+        const { view, size, onItemClick } = this.props;
         const { menu: contextMenu, itemsParams, itemsState } = this.context;
         const configItem = this.props.configItem;
         const itemParams = itemsParams[configItem.id];
@@ -184,7 +198,11 @@ class OverlayControls extends React.Component {
                 }
                 const itemHandler = item.handler;
                 const itemAction = typeof itemHandler === 'function'
-                    ? () => itemHandler(configItem, itemParams, itemState)
+                    ? () => {
+                        const result = itemHandler(configItem, itemParams, itemState);
+                        onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick();
+                        return result;
+                    }
                     : ((_a = this.getDropDownMenuItemConfig(item.id)) === null || _a === void 0 ? void 0 : _a.action) || (() => { });
                 memo.push({
                     // @ts-expect-error

package/build/esm/constants/common.d.ts

@@ -14,3 +14,4 @@ export declare const DEFAULT_WIDGET_WIDTH = 3;
 export declare const DEFAULT_GROUP = "__default";
 export declare const COMPACT_TYPE_HORIZONTAL_NOWRAP = "horizontal-nowrap";
 export declare const DRAGGABLE_CANCEL_CLASS_NAME = "dashkit_draggable_cancel";
+export declare const FOCUSED_CLASS_NAME = "dashkit_focused";

package/build/esm/constants/common.js

@@ -14,3 +14,4 @@ export const DEFAULT_WIDGET_WIDTH = 3;
 export const DEFAULT_GROUP = '__default';
 export const COMPACT_TYPE_HORIZONTAL_NOWRAP = 'horizontal-nowrap';
 export const DRAGGABLE_CANCEL_CLASS_NAME = 'dashkit_draggable_cancel';
+export const FOCUSED_CLASS_NAME = 'dashkit_focused';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dashkit",
-  "version": "8.15.2",
+  "version": "8.15.3",
   "description": "Library for rendering dashboard grid layout",
   "license": "MIT",
   "repository": {