@gravity-ui/components - npm Package Compare versions

Comparing version 1.6.0 to 1.6.1

build/cjs/components/ActionsPanel/components/CollapseActions.js

@@ -15,3 +15,3 @@ "use strict";
     const { buttonActions, dropdownItems, parentRef, offset, visibilityMap } = (0, hooks_1.useCollapseActions)(actions);
-    const showDropdown = dropdownItems.length > 0;
+    const showDropdown = Object.keys(visibilityMap).length > 0 && dropdownItems.length > 0;
     return (react_1.default.createElement("div", { className: b() },
@@ -21,3 +21,3 @@ react_1.default.createElement("div", { className: b('container'), ref: parentRef }, buttonActions.map((action) => {
             const attr = { [hooks_1.OBSERVER_TARGET_ATTR]: id };
-            const invisible = !visibilityMap[id];
+            const invisible = visibilityMap[id] === false;
             const switcher = (react_1.default.createElement(uikit_1.Button, Object.assign({ view: "flat-contrast", size: "m" }, action.button.props)));
@@ -24,0 +24,0 @@ const node = Array.isArray(action.dropdown.item.items) ? (react_1.default.createElement(uikit_1.DropdownMenu, { size: "s", items: action.dropdown.item.items, switcher: switcher })) : (switcher);

build/cjs/components/ActionsPanel/components/hooks/useCollapseActions.js

@@ -12,2 +12,3 @@ "use strict";
 const useCollapseActions = (actions) => {
+    const updateObserveKey = react_1.default.useMemo(() => actions.map(({ id }) => id).join('/'), [actions]);
     const [buttonActions, restActions] = react_1.default.useMemo(() => {
@@ -26,3 +27,3 @@ const buttonItems = [];
     }, [actions]);
-    const { parentRef, visibilityMap, offset } = (0, useObserveIntersection_1.useObserveIntersection)(actions);
+    const { parentRef, visibilityMap, offset } = (0, useObserveIntersection_1.useObserveIntersection)(updateObserveKey);
     const dropdownItems = (0, useDropdownActions_1.useDropdownActions)({ buttonActions, restActions, visibilityMap });
@@ -29,0 +30,0 @@ return {

build/cjs/components/ActionsPanel/components/hooks/useObserveIntersection.d.ts

 import React from 'react';
-import { ActionItem } from '../../types';
 import { VisibilityMap } from './types';
 export declare const OBSERVER_TARGET_ATTR = "data-observer-id";
-export declare const useObserveIntersection: (actions: ActionItem[]) => {
+export declare const useObserveIntersection: (updateObserveKey: string) => {
     parentRef: React.RefObject<HTMLDivElement>;
@@ -7,0 +6,0 @@ visibilityMap: VisibilityMap;

build/cjs/components/ActionsPanel/components/hooks/useObserveIntersection.js

@@ -10,3 +10,3 @@ "use strict";
 const GAP = 8;
-const useObserveIntersection = (actions) => {
+const useObserveIntersection = (updateObserveKey) => {
     const parentRef = react_1.default.useRef(null);
@@ -62,5 +62,5 @@ const [visibilityMap, setVisibilityMap] = react_1.default.useState({});
         return () => observer.disconnect();
-    }, [actions]);
+    }, [updateObserveKey]);
     return { parentRef, visibilityMap, offset };
 };
 exports.useObserveIntersection = useObserveIntersection;

build/esm/components/ActionsPanel/components/CollapseActions.js

@@ -10,3 +10,3 @@ import React from 'react';
     const { buttonActions, dropdownItems, parentRef, offset, visibilityMap } = useCollapseActions(actions);
-    const showDropdown = dropdownItems.length > 0;
+    const showDropdown = Object.keys(visibilityMap).length > 0 && dropdownItems.length > 0;
     return (React.createElement("div", { className: b() },
@@ -16,3 +16,3 @@ React.createElement("div", { className: b('container'), ref: parentRef }, buttonActions.map((action) => {
             const attr = { [OBSERVER_TARGET_ATTR]: id };
-            const invisible = !visibilityMap[id];
+            const invisible = visibilityMap[id] === false;
             const switcher = (React.createElement(Button, Object.assign({ view: "flat-contrast", size: "m" }, action.button.props)));
@@ -19,0 +19,0 @@ const node = Array.isArray(action.dropdown.item.items) ? (React.createElement(DropdownMenu, { size: "s", items: action.dropdown.item.items, switcher: switcher })) : (switcher);

build/esm/components/ActionsPanel/components/hooks/useCollapseActions.js

@@ -6,2 +6,3 @@ import React from 'react';
 export const useCollapseActions = (actions) => {
+    const updateObserveKey = React.useMemo(() => actions.map(({ id }) => id).join('/'), [actions]);
     const [buttonActions, restActions] = React.useMemo(() => {
@@ -20,3 +21,3 @@ const buttonItems = [];
     }, [actions]);
-    const { parentRef, visibilityMap, offset } = useObserveIntersection(actions);
+    const { parentRef, visibilityMap, offset } = useObserveIntersection(updateObserveKey);
     const dropdownItems = useDropdownActions({ buttonActions, restActions, visibilityMap });
@@ -23,0 +24,0 @@ return {

build/esm/components/ActionsPanel/components/hooks/useObserveIntersection.d.ts

 import React from 'react';
-import { ActionItem } from '../../types';
 import { VisibilityMap } from './types';
 export declare const OBSERVER_TARGET_ATTR = "data-observer-id";
-export declare const useObserveIntersection: (actions: ActionItem[]) => {
+export declare const useObserveIntersection: (updateObserveKey: string) => {
     parentRef: React.RefObject<HTMLDivElement>;
@@ -7,0 +6,0 @@ visibilityMap: VisibilityMap;

build/esm/components/ActionsPanel/components/hooks/useObserveIntersection.js

 import React from 'react';
 export const OBSERVER_TARGET_ATTR = 'data-observer-id';
 const GAP = 8;
-export const useObserveIntersection = (actions) => {
+export const useObserveIntersection = (updateObserveKey) => {
     const parentRef = React.useRef(null);
@@ -55,4 +55,4 @@ const [visibilityMap, setVisibilityMap] = React.useState({});
         return () => observer.disconnect();
-    }, [actions]);
+    }, [updateObserveKey]);
     return { parentRef, visibilityMap, offset };
 };

CHANGELOG.md

 # Changelog
 
+## [1.6.1](https://github.com/gravity-ui/components/compare/v1.6.0...v1.6.1) (2023-05-18)
+
+
+### Bug Fixes
+
+* **ActionsPanel:** fixed blinking of elements when rerendering ([#51](https://github.com/gravity-ui/components/issues/51)) ([b73ea50](https://github.com/gravity-ui/components/commit/b73ea5025b9c65a4791f905b0242989540b4c3b9))
+
 ## [1.6.0](https://github.com/gravity-ui/components/compare/v1.5.2...v1.6.0) (2023-05-18)
@@ -4,0 +11,0 @@

package.json

 {
   "name": "@gravity-ui/components",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "description": "",
@@ -5,0 +5,0 @@ "license": "MIT",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

197863

increased by0.31%

No dependency changes