@gravity-ui/dashkit 8.0.2 → 8.1.0

package/README.md

@@ -49,6 +49,7 @@ interface DashKitProps {
 - **context**: Object that will be propped up on all widgets.
 - **overlayControls**: Object that overrides widget controls at the time of editing. If not transmitted, basic controls will be displayed.
 - **noOverlay**: If `true`, overlay and controls are not displayed while editing.
+- **focusable**: If `true`, grid items will be focusable.
 - **draggableHandleClassName** : СSS class name of the element that makes the widget draggable.
 
 ## Usage

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

@@ -21,6 +21,7 @@ interface DashKitDefaultProps {
     settings: SettingsProps;
     context: ContextProps;
     noOverlay: boolean;
+    focusable?: boolean;
 }
 export interface DashKitProps extends DashKitGeneralProps, Partial<DashKitDefaultProps> {
 }

package/build/cjs/components/DashKit/DashKit.js

@@ -68,4 +68,5 @@ DashKit.defaultProps = {
     },
     context: {},
     noOverlay: false,
+    focusable: false,
 };

package/build/cjs/components/GridItem/GridItem.css

@@ -1,6 +1,9 @@
 .dashkit-grid-item {
   position: relative;
 }
+.dashkit-grid-item:focus {
+  outline: none;
+}
 .dashkit-grid-item__overlay {
   --_-dashkit-overlay-color: var(--dashkit-overlay-color, var(--g-color-base-generic));
   --_-dashkit-overlay-border-color: var(--dashkit-overlay-border-color, rgba(0, 0, 0, 0.1));
@@ -56,6 +59,10 @@
   will-change: transform;
 }
 
+.react-grid-item.dashkit-grid-item_is-focused {
+  z-index: 2;
+}
+
 .react-grid-item.react-grid-placeholder {
   --_-dashkit-placeholder-color: var(--dashkit-placeholder-color, #fc0);
   --_-dashkit-placeholder-opacity: var(--dashkit-placeholder-opacity, 0.2);

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

@@ -8,7 +8,55 @@ const cn_1 = require("../../utils/cn");
 const Item_1 = tslib_1.__importDefault(require("../Item/Item"));
 const OverlayControls_1 = tslib_1.__importDefault(require("../OverlayControls/OverlayControls"));
 const b = (0, cn_1.cn)('dashkit-grid-item');
+class WindowFocusObserver {
+    constructor() {
+        this.blurHandler = (e) => {
+            if (e.target === window) {
+                this.isFocused = false;
+            }
+        };
+        this.focusHandler = (e) => {
+            if (e.target === window) {
+                this.isFocused = true;
+            }
+        };
+        this.subscribers = 0;
+        this.isFocused = !document.hidden;
+        window.addEventListener('blur', this.blurHandler, true);
+        window.addEventListener('focus', this.focusHandler, true);
+    }
+    // Method to get state after all blur\focus events in document are triggered
+    async getFocuseState() {
+        return new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                resolve(this.isFocused);
+            });
+        });
+    }
+}
+const windowFocusObserver = new WindowFocusObserver();
 class GridItem extends react_1.default.PureComponent {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            isFocused: false,
+        };
+        this.onFocusHandler = () => {
+            this.setState({ isFocused: true });
+            if (this.controller) {
+                this.controller.abort();
+            }
+        };
+        this.onBlurHandler = () => {
+            this.controller = new AbortController();
+            windowFocusObserver.getFocuseState().then((isWindowFocused) => {
+                if (!this.controller.signal.aborted && isWindowFocused) {
+                    this.setState({ isFocused: false });
+                }
+                this.controller = null;
+            });
+        };
+    }
     renderOverlay() {
         const { overlayControls } = this.props;
         const { editMode } = this.context;
@@ -24,7 +72,7 @@ class GridItem extends react_1.default.PureComponent {
     render() {
         // из-за бага, что Grid Items unmounts при изменении static, isDraggable, isResaizable
         // https://github.com/STRML/react-grid-layout/issues/721
-        const { style, onMouseDown, onMouseUp, onTouchEnd, onTouchStart, children, className, isDragging, noOverlay, withCustomHandle, } = this.props;
+        const { style, onMouseDown, onMouseUp, onTouchEnd, onTouchStart, children, className, isDragging, noOverlay, focusable, withCustomHandle, } = this.props;
         const { editMode } = this.context;
         const width = Number.parseInt(style.width, 10);
         const height = Number.parseInt(style.height, 10);
@@ -39,8 +87,15 @@ class GridItem extends react_1.default.PureComponent {
         const { _editActive } = this.props.item.data;
         return (react_1.default.createElement("div", Object.assign({ className: b({
                 'is-dragging': isDragging,
+                'is-focused': this.state.isFocused,
                 'with-custom-handle': withCustomHandle,
-            }, preparedClassName), "data-qa": "dashkit-grid-item", style: style, ref: this.props.forwardedRef }, reactGridLayoutProps),
+            }, preparedClassName), "data-qa": "dashkit-grid-item", style: style, ref: this.props.forwardedRef }, reactGridLayoutProps, (focusable
+            ? {
+                onFocus: this.onFocusHandler,
+                onBlur: this.onBlurHandler,
+                tabIndex: -1,
+            }
+            : {})),
             react_1.default.createElement("div", { className: b('item', { editMode: editMode && !_editActive && !noOverlay }) },
                 react_1.default.createElement(Item_1.default, { id: this.props.id, item: this.props.item, shouldItemUpdate: !isDragging, width: width, height: height, transform: transform, adjustWidgetLayout: this.props.adjustWidgetLayout, layout: this.props.layout, forwardedPluginRef: this.props.forwardedPluginRef })),
             !noOverlay && this.renderOverlay(),
@@ -61,6 +116,7 @@ GridItem.propTypes = {
     className: prop_types_1.default.string,
     style: prop_types_1.default.object,
     noOverlay: prop_types_1.default.bool,
+    focusable: prop_types_1.default.bool,
     withCustomHandle: prop_types_1.default.bool,
     onMouseDown: prop_types_1.default.func,
     onMouseUp: prop_types_1.default.func,

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

@@ -72,14 +72,14 @@ class GridLayout extends react_1.default.PureComponent {
         }
     }
     render() {
-        const { layout, config, registerManager, editMode, noOverlay, draggableHandleClassName } = this.context;
+        const { layout, config, registerManager, editMode, noOverlay, focusable, draggableHandleClassName, } = this.context;
         this.pluginsRefs.length = config.items.length;
         return (react_1.default.createElement(Layout, Object.assign({}, registerManager.gridLayout, { layout: layout, isDraggable: editMode, isResizable: editMode, onDragStart: this._onStart, onDragStop: this._onStop, onResizeStart: this._onStart, onResizeStop: this._onStop }, (draggableHandleClassName
             ? { draggableHandle: `.${draggableHandleClassName}` }
             : null), { draggableCancel: `.${constants_1.OVERLAY_CONTROLS_CLASS_NAME}` }), config.items.map((item, i) => {
             return (react_1.default.createElement(GridItem_1.default, { forwardedPluginRef: (pluginRef) => {
                     this.pluginsRefs[i] = pluginRef;
-                }, key: item.id, id: item.id, item: item, layout: layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
+                }, key: item.id, id: item.id, item: item, layout: layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
         })));
     }
 }

package/build/cjs/hocs/withContext.js

@@ -129,6 +129,7 @@ function useMemoStateContext(props) {
         config: props.config,
         context: props.context,
         noOverlay: props.noOverlay,
+        focusable: props.focusable,
         defaultGlobalParams: props.globalParams,
         globalParams: props.globalParams,
         editMode: props.editMode,
@@ -151,6 +152,7 @@ function useMemoStateContext(props) {
         props.config,
         props.context,
         props.noOverlay,
+        props.focusable,
         props.globalParams,
         props.editMode,
         props.settings,

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

@@ -21,6 +21,7 @@ interface DashKitDefaultProps {
     settings: SettingsProps;
     context: ContextProps;
     noOverlay: boolean;
+    focusable?: boolean;
 }
 export interface DashKitProps extends DashKitGeneralProps, Partial<DashKitDefaultProps> {
 }

package/build/esm/components/DashKit/DashKit.js

@@ -63,4 +63,5 @@ DashKit.defaultProps = {
     },
     context: {},
     noOverlay: false,
+    focusable: false,
 };

package/build/esm/components/GridItem/GridItem.css

@@ -1,6 +1,9 @@
 .dashkit-grid-item {
   position: relative;
 }
+.dashkit-grid-item:focus {
+  outline: none;
+}
 .dashkit-grid-item__overlay {
   --_-dashkit-overlay-color: var(--dashkit-overlay-color, var(--g-color-base-generic));
   --_-dashkit-overlay-border-color: var(--dashkit-overlay-border-color, rgba(0, 0, 0, 0.1));
@@ -56,6 +59,10 @@
   will-change: transform;
 }
 
+.react-grid-item.dashkit-grid-item_is-focused {
+  z-index: 2;
+}
+
 .react-grid-item.react-grid-placeholder {
   --_-dashkit-placeholder-color: var(--dashkit-placeholder-color, #fc0);
   --_-dashkit-placeholder-opacity: var(--dashkit-placeholder-opacity, 0.2);

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

@@ -6,7 +6,55 @@ import Item from '../Item/Item';
 import OverlayControls from '../OverlayControls/OverlayControls';
 import './GridItem.css';
 const b = cn('dashkit-grid-item');
+class WindowFocusObserver {
+    constructor() {
+        this.blurHandler = (e) => {
+            if (e.target === window) {
+                this.isFocused = false;
+            }
+        };
+        this.focusHandler = (e) => {
+            if (e.target === window) {
+                this.isFocused = true;
+            }
+        };
+        this.subscribers = 0;
+        this.isFocused = !document.hidden;
+        window.addEventListener('blur', this.blurHandler, true);
+        window.addEventListener('focus', this.focusHandler, true);
+    }
+    // Method to get state after all blur\focus events in document are triggered
+    async getFocuseState() {
+        return new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                resolve(this.isFocused);
+            });
+        });
+    }
+}
+const windowFocusObserver = new WindowFocusObserver();
 class GridItem extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            isFocused: false,
+        };
+        this.onFocusHandler = () => {
+            this.setState({ isFocused: true });
+            if (this.controller) {
+                this.controller.abort();
+            }
+        };
+        this.onBlurHandler = () => {
+            this.controller = new AbortController();
+            windowFocusObserver.getFocuseState().then((isWindowFocused) => {
+                if (!this.controller.signal.aborted && isWindowFocused) {
+                    this.setState({ isFocused: false });
+                }
+                this.controller = null;
+            });
+        };
+    }
     renderOverlay() {
         const { overlayControls } = this.props;
         const { editMode } = this.context;
@@ -22,7 +70,7 @@ class GridItem extends React.PureComponent {
     render() {
         // из-за бага, что Grid Items unmounts при изменении static, isDraggable, isResaizable
         // https://github.com/STRML/react-grid-layout/issues/721
-        const { style, onMouseDown, onMouseUp, onTouchEnd, onTouchStart, children, className, isDragging, noOverlay, withCustomHandle, } = this.props;
+        const { style, onMouseDown, onMouseUp, onTouchEnd, onTouchStart, children, className, isDragging, noOverlay, focusable, withCustomHandle, } = this.props;
         const { editMode } = this.context;
         const width = Number.parseInt(style.width, 10);
         const height = Number.parseInt(style.height, 10);
@@ -37,8 +85,15 @@ class GridItem extends React.PureComponent {
         const { _editActive } = this.props.item.data;
         return (React.createElement("div", Object.assign({ className: b({
                 'is-dragging': isDragging,
+                'is-focused': this.state.isFocused,
                 'with-custom-handle': withCustomHandle,
-            }, preparedClassName), "data-qa": "dashkit-grid-item", style: style, ref: this.props.forwardedRef }, reactGridLayoutProps),
+            }, preparedClassName), "data-qa": "dashkit-grid-item", style: style, ref: this.props.forwardedRef }, reactGridLayoutProps, (focusable
+            ? {
+                onFocus: this.onFocusHandler,
+                onBlur: this.onBlurHandler,
+                tabIndex: -1,
+            }
+            : {})),
             React.createElement("div", { className: b('item', { editMode: editMode && !_editActive && !noOverlay }) },
                 React.createElement(Item, { id: this.props.id, item: this.props.item, shouldItemUpdate: !isDragging, width: width, height: height, transform: transform, adjustWidgetLayout: this.props.adjustWidgetLayout, layout: this.props.layout, forwardedPluginRef: this.props.forwardedPluginRef })),
             !noOverlay && this.renderOverlay(),
@@ -59,6 +114,7 @@ GridItem.propTypes = {
     className: PropTypes.string,
     style: PropTypes.object,
     noOverlay: PropTypes.bool,
+    focusable: PropTypes.bool,
     withCustomHandle: PropTypes.bool,
     onMouseDown: PropTypes.func,
     onMouseUp: PropTypes.func,

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

@@ -69,14 +69,14 @@ class GridLayout extends React.PureComponent {
         }
     }
     render() {
-        const { layout, config, registerManager, editMode, noOverlay, draggableHandleClassName } = this.context;
+        const { layout, config, registerManager, editMode, noOverlay, focusable, draggableHandleClassName, } = this.context;
         this.pluginsRefs.length = config.items.length;
         return (React.createElement(Layout, Object.assign({}, registerManager.gridLayout, { layout: layout, isDraggable: editMode, isResizable: editMode, onDragStart: this._onStart, onDragStop: this._onStop, onResizeStart: this._onStart, onResizeStop: this._onStop }, (draggableHandleClassName
             ? { draggableHandle: `.${draggableHandleClassName}` }
             : null), { draggableCancel: `.${OVERLAY_CONTROLS_CLASS_NAME}` }), config.items.map((item, i) => {
             return (React.createElement(GridItem, { forwardedPluginRef: (pluginRef) => {
                     this.pluginsRefs[i] = pluginRef;
-                }, key: item.id, id: item.id, item: item, layout: layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
+                }, key: item.id, id: item.id, item: item, layout: layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
         })));
     }
 }

package/build/esm/hocs/withContext.js

@@ -125,6 +125,7 @@ function useMemoStateContext(props) {
         config: props.config,
         context: props.context,
         noOverlay: props.noOverlay,
+        focusable: props.focusable,
         defaultGlobalParams: props.globalParams,
         globalParams: props.globalParams,
         editMode: props.editMode,
@@ -147,6 +148,7 @@ function useMemoStateContext(props) {
         props.config,
         props.context,
         props.noOverlay,
+        props.focusable,
         props.globalParams,
         props.editMode,
         props.settings,

package/package.json

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