@gravity-ui/dashkit 8.24.3 → 8.26.0

package/README.md

@@ -57,7 +57,11 @@ interface DashKitProps {
   overlayControls?: Record<string, OverlayControlItem[]> | null;
   overlayMenuItems?: MenuItems[] | null;
   noOverlay?: boolean;
+
   focusable?: boolean;
+  onItemFocus: (item: ConfigItem) => void;
+  onItemBlur: (item: ConfigItem) => void;
+
   draggableHandleClassName?: string;
   getPreparedCopyItemOptions?: (options: PreparedCopyItemOptions) => PreparedCopyItemOptions;
   onCopyFulfill?: (error: null | Error, data?: PreparedCopyItemOptions) => void;
@@ -79,6 +83,8 @@ interface DashKitProps {
 - **overlayMenuItems**: Custom dropdown menu items
 - **noOverlay**: If `true`, overlay and controls are not displayed while editing.
 - **focusable**: If `true`, grid items will be focusable.
+- **onItemFocus**: Called when `focusable` is true and item is focused.
+- **onItemBlur**: Called when `focusable` is true and item is focused out.
 - **draggableHandleClassName** : СSS class name of the element that makes the widget draggable.
 - **onDragStart**: ReactGridLayout called when item drag started
 - **onDrag**: ReactGridLayout called while item drag

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

@@ -33,6 +33,8 @@ interface DashKitDefaultProps {
     onItemRender?: (item: ConfigItem) => void;
     getPreparedCopyItemOptions?: (options: PreparedCopyItemOptions) => PreparedCopyItemOptions;
     onCopyFulfill?: (error: null | Error, data?: PreparedCopyItemOptions) => void;
+    onItemFocus?: (item: ConfigItem) => void;
+    onItemBlur?: (item: ConfigItem) => void;
     onDragStart?: ItemManipulationCallback;
     onDrag?: ItemManipulationCallback;
     onDragStop?: ItemManipulationCallback;

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

@@ -27,7 +27,7 @@ class WindowFocusObserver {
         window.addEventListener('focus', this.focusHandler, true);
     }
     // Method to get state after all blur\focus events in document are triggered
-    async getFocuseState() {
+    async getFocusedState() {
         return new Promise((resolve) => {
             requestAnimationFrame(() => {
                 resolve(this.isFocused);
@@ -68,15 +68,24 @@ class GridItem extends react_1.default.PureComponent {
         };
         this.onFocusHandler = () => {
             this.setState({ isFocused: true });
+            if (this.props.onItemFocus) {
+                // Sync focus and blur handlers
+                windowFocusObserver.getFocusedState().then(() => {
+                    var _a, _b;
+                    (_b = (_a = this.props).onItemFocus) === null || _b === void 0 ? void 0 : _b.call(_a, this.props.item);
+                });
+            }
             if (this.controller) {
                 this.controller.abort();
             }
         };
         this.onBlurHandler = () => {
             this.controller = new AbortController();
-            windowFocusObserver.getFocuseState().then((isWindowFocused) => {
-                if (!this.controller.signal.aborted && isWindowFocused) {
+            windowFocusObserver.getFocusedState().then((isWindowFocused) => {
+                var _a, _b, _c;
+                if (!((_a = this.controller) === null || _a === void 0 ? void 0 : _a.signal.aborted) && isWindowFocused) {
                     this.setState({ isFocused: false });
+                    (_c = (_b = this.props).onItemBlur) === null || _c === void 0 ? void 0 : _c.call(_b, this.props.item);
                 }
                 this.controller = null;
             });
@@ -155,6 +164,8 @@ GridItem.propTypes = {
     onMouseUp: prop_types_1.default.func,
     onTouchEnd: prop_types_1.default.func,
     onTouchStart: prop_types_1.default.func,
+    onItemFocus: prop_types_1.default.func,
+    onItemBlur: prop_types_1.default.func,
 };
 GridItem.contextType = context_1.DashKitContext;
 const GridItemForwarderRef = react_1.default.forwardRef((props, ref) => {

package/build/cjs/components/GridLayout/GridLayout.js

@@ -417,7 +417,7 @@ class GridLayout extends react_1.default.PureComponent {
         return (react_1.default.createElement(GridItem_1.default, { key: id, id: id, item: { id, type, data: {} }, layout: temporaryLayout.data, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, isPlaceholder: true, noOverlay: noOverlay, withCustomHandle: Boolean(draggableHandleClassName), gridLayout: gridLayout }));
     }
     renderGroup(group, renderLayout, renderItems, offset = 0, groupGridProperties) {
-        const { registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, onItemMountChange, onItemRender, } = this.context;
+        const { registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, onItemMountChange, onItemRender, onItemFocus, onItemBlur, } = this.context;
         const { currentDraggingElement, draggedOverGroup } = this.state;
         const hasOwnGroupProperties = typeof groupGridProperties === 'function';
         const properties = hasOwnGroupProperties
@@ -448,7 +448,7 @@ class GridLayout extends react_1.default.PureComponent {
                 const itemNoOverlay = hasOwnGroupProperties && 'noOverlay' in properties
                     ? properties.noOverlay
                     : noOverlay;
-                return (react_1.default.createElement(GridItem_1.default, { forwardedPluginRef: this.getMemoForwardRefCallback(offset + i), key: keyId, id: keyId, item: item, layout: layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: isDragging, isDraggedOut: isDraggedOut, noOverlay: itemNoOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), onItemMountChange: onItemMountChange, onItemRender: onItemRender, gridLayout: properties }));
+                return (react_1.default.createElement(GridItem_1.default, { forwardedPluginRef: this.getMemoForwardRefCallback(offset + i), key: keyId, id: keyId, item: item, layout: layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: isDragging, isDraggedOut: isDraggedOut, noOverlay: itemNoOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), onItemMountChange: onItemMountChange, onItemRender: onItemRender, gridLayout: properties, onItemFocus: onItemFocus, onItemBlur: onItemBlur }));
             }),
             this.renderTemporaryPlaceholder(properties)));
     }

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

@@ -2,6 +2,7 @@ export declare const COPIED_WIDGET_STORE_KEY = "dashCopiedItem";
 export declare const DEFAULT_NAMESPACE = "default";
 export declare const OVERLAY_CONTROLS_CLASS_NAME = "dashkit-overlay-controls";
 export declare const OVERLAY_CLASS_NAME = "dashkit-grid-item__overlay";
+export declare const ITEM_CLASS_NAME = "dashkit-grid-item";
 export declare const OVERLAY_ICON_SIZE = 16;
 export declare const TEMPORARY_ITEM_ID = "__dropping-elem__";
 export declare const MenuItems: {

package/build/cjs/constants/common.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DROPPING_ELEMENT_CLASS_NAME = 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.DROPPING_ELEMENT_CLASS_NAME = 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.ITEM_CLASS_NAME = 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';
 exports.OVERLAY_CLASS_NAME = 'dashkit-grid-item__overlay';
+exports.ITEM_CLASS_NAME = 'dashkit-grid-item';
 exports.OVERLAY_ICON_SIZE = 16;
 exports.TEMPORARY_ITEM_ID = '__dropping-elem__';
 exports.MenuItems = {

package/build/cjs/hocs/withContext.js

@@ -343,6 +343,8 @@ function useMemoStateContext(props) {
         onDropDragOver,
         outerDnDEnable,
         dragOverPlugin,
+        onItemFocus: props.onItemFocus,
+        onItemBlur: props.onItemBlur,
         /* default handlers bypass */
         onDragStart: props.onDragStart,
         onDrag: props.onDrag,
@@ -378,6 +380,8 @@ function useMemoStateContext(props) {
         props.draggableHandleClassName,
         outerDnDEnable,
         dragOverPlugin,
+        props.onItemFocus,
+        props.onItemBlur,
         props.onDragStart,
         props.onDrag,
         props.onDragStop,

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

@@ -33,6 +33,8 @@ interface DashKitDefaultProps {
     onItemRender?: (item: ConfigItem) => void;
     getPreparedCopyItemOptions?: (options: PreparedCopyItemOptions) => PreparedCopyItemOptions;
     onCopyFulfill?: (error: null | Error, data?: PreparedCopyItemOptions) => void;
+    onItemFocus?: (item: ConfigItem) => void;
+    onItemBlur?: (item: ConfigItem) => void;
     onDragStart?: ItemManipulationCallback;
     onDrag?: ItemManipulationCallback;
     onDragStop?: ItemManipulationCallback;

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

@@ -25,7 +25,7 @@ class WindowFocusObserver {
         window.addEventListener('focus', this.focusHandler, true);
     }
     // Method to get state after all blur\focus events in document are triggered
-    async getFocuseState() {
+    async getFocusedState() {
         return new Promise((resolve) => {
             requestAnimationFrame(() => {
                 resolve(this.isFocused);
@@ -66,15 +66,24 @@ class GridItem extends React.PureComponent {
         };
         this.onFocusHandler = () => {
             this.setState({ isFocused: true });
+            if (this.props.onItemFocus) {
+                // Sync focus and blur handlers
+                windowFocusObserver.getFocusedState().then(() => {
+                    var _a, _b;
+                    (_b = (_a = this.props).onItemFocus) === null || _b === void 0 ? void 0 : _b.call(_a, this.props.item);
+                });
+            }
             if (this.controller) {
                 this.controller.abort();
             }
         };
         this.onBlurHandler = () => {
             this.controller = new AbortController();
-            windowFocusObserver.getFocuseState().then((isWindowFocused) => {
-                if (!this.controller.signal.aborted && isWindowFocused) {
+            windowFocusObserver.getFocusedState().then((isWindowFocused) => {
+                var _a, _b, _c;
+                if (!((_a = this.controller) === null || _a === void 0 ? void 0 : _a.signal.aborted) && isWindowFocused) {
                     this.setState({ isFocused: false });
+                    (_c = (_b = this.props).onItemBlur) === null || _c === void 0 ? void 0 : _c.call(_b, this.props.item);
                 }
                 this.controller = null;
             });
@@ -153,6 +162,8 @@ GridItem.propTypes = {
     onMouseUp: PropTypes.func,
     onTouchEnd: PropTypes.func,
     onTouchStart: PropTypes.func,
+    onItemFocus: PropTypes.func,
+    onItemBlur: PropTypes.func,
 };
 GridItem.contextType = DashKitContext;
 const GridItemForwarderRef = React.forwardRef((props, ref) => {

package/build/esm/components/GridLayout/GridLayout.js

@@ -414,7 +414,7 @@ class GridLayout extends React.PureComponent {
         return (React.createElement(GridItem, { key: id, id: id, item: { id, type, data: {} }, layout: temporaryLayout.data, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, isPlaceholder: true, noOverlay: noOverlay, withCustomHandle: Boolean(draggableHandleClassName), gridLayout: gridLayout }));
     }
     renderGroup(group, renderLayout, renderItems, offset = 0, groupGridProperties) {
-        const { registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, onItemMountChange, onItemRender, } = this.context;
+        const { registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, onItemMountChange, onItemRender, onItemFocus, onItemBlur, } = this.context;
         const { currentDraggingElement, draggedOverGroup } = this.state;
         const hasOwnGroupProperties = typeof groupGridProperties === 'function';
         const properties = hasOwnGroupProperties
@@ -445,7 +445,7 @@ class GridLayout extends React.PureComponent {
                 const itemNoOverlay = hasOwnGroupProperties && 'noOverlay' in properties
                     ? properties.noOverlay
                     : noOverlay;
-                return (React.createElement(GridItem, { forwardedPluginRef: this.getMemoForwardRefCallback(offset + i), key: keyId, id: keyId, item: item, layout: layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: isDragging, isDraggedOut: isDraggedOut, noOverlay: itemNoOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), onItemMountChange: onItemMountChange, onItemRender: onItemRender, gridLayout: properties }));
+                return (React.createElement(GridItem, { forwardedPluginRef: this.getMemoForwardRefCallback(offset + i), key: keyId, id: keyId, item: item, layout: layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: isDragging, isDraggedOut: isDraggedOut, noOverlay: itemNoOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), onItemMountChange: onItemMountChange, onItemRender: onItemRender, gridLayout: properties, onItemFocus: onItemFocus, onItemBlur: onItemBlur }));
             }),
             this.renderTemporaryPlaceholder(properties)));
     }

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

@@ -2,6 +2,7 @@ export declare const COPIED_WIDGET_STORE_KEY = "dashCopiedItem";
 export declare const DEFAULT_NAMESPACE = "default";
 export declare const OVERLAY_CONTROLS_CLASS_NAME = "dashkit-overlay-controls";
 export declare const OVERLAY_CLASS_NAME = "dashkit-grid-item__overlay";
+export declare const ITEM_CLASS_NAME = "dashkit-grid-item";
 export declare const OVERLAY_ICON_SIZE = 16;
 export declare const TEMPORARY_ITEM_ID = "__dropping-elem__";
 export declare const MenuItems: {

package/build/esm/constants/common.js

@@ -2,6 +2,7 @@ export const COPIED_WIDGET_STORE_KEY = 'dashCopiedItem';
 export const DEFAULT_NAMESPACE = 'default';
 export const OVERLAY_CONTROLS_CLASS_NAME = 'dashkit-overlay-controls';
 export const OVERLAY_CLASS_NAME = 'dashkit-grid-item__overlay';
+export const ITEM_CLASS_NAME = 'dashkit-grid-item';
 export const OVERLAY_ICON_SIZE = 16;
 export const TEMPORARY_ITEM_ID = '__dropping-elem__';
 export const MenuItems = {

package/build/esm/hocs/withContext.js

@@ -340,6 +340,8 @@ function useMemoStateContext(props) {
         onDropDragOver,
         outerDnDEnable,
         dragOverPlugin,
+        onItemFocus: props.onItemFocus,
+        onItemBlur: props.onItemBlur,
         /* default handlers bypass */
         onDragStart: props.onDragStart,
         onDrag: props.onDrag,
@@ -375,6 +377,8 @@ function useMemoStateContext(props) {
         props.draggableHandleClassName,
         outerDnDEnable,
         dragOverPlugin,
+        props.onItemFocus,
+        props.onItemBlur,
         props.onDragStart,
         props.onDrag,
         props.onDragStop,

package/package.json

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