@gravity-ui/dashkit 8.0.2-beta.1 → 8.0.2-beta.3

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));

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

@@ -43,12 +43,17 @@ class GridItem extends react_1.default.PureComponent {
         };
         this.onFocusHandler = () => {
             this.setState({ isFocused: true });
+            if (this.controller) {
+                this.controller.abort();
+            }
         };
         this.onBlurHandler = () => {
+            this.controller = new AbortController();
             windowFocusObserver.getFocuseState().then((isWindowFocused) => {
-                if (isWindowFocused) {
+                if (!this.controller.signal.aborted && isWindowFocused) {
                     this.setState({ isFocused: false });
                 }
+                this.controller = null;
             });
         };
     }
@@ -67,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);
@@ -84,7 +89,13 @@ class GridItem extends react_1.default.PureComponent {
                 '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, { onFocus: this.onFocusHandler, onBlur: this.onBlurHandler, tabIndex: -1 }),
+            }, 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(),
@@ -105,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));

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

@@ -41,12 +41,17 @@ class GridItem extends React.PureComponent {
         };
         this.onFocusHandler = () => {
             this.setState({ isFocused: true });
+            if (this.controller) {
+                this.controller.abort();
+            }
         };
         this.onBlurHandler = () => {
+            this.controller = new AbortController();
             windowFocusObserver.getFocuseState().then((isWindowFocused) => {
-                if (isWindowFocused) {
+                if (!this.controller.signal.aborted && isWindowFocused) {
                     this.setState({ isFocused: false });
                 }
+                this.controller = null;
             });
         };
     }
@@ -65,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);
@@ -82,7 +87,13 @@ class GridItem extends React.PureComponent {
                 '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, { onFocus: this.onFocusHandler, onBlur: this.onBlurHandler, tabIndex: -1 }),
+            }, 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(),
@@ -103,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-beta.1",
+  "version": "8.0.2-beta.3",
   "description": "Library for rendering dashboard grid layout",
   "license": "MIT",
   "repository": {