fix(CompositeBar): recalc mounted PopupPosition if compact mode chang…

…ed (#138)
gravity-ui · Oct 17, 2023 · 56ac451 · 56ac451
1 parent a88cbf0
commit 56ac451
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git a/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx b/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx
@@ -155,6 +155,7 @@ export const AsideHeaderShowcase: FC<AsideHeaderShowcaseProps> = ({
                             popupPlacement={['right-end']}
                             popupOffset={[-20, 10]}
                             onClosePopup={() => setPopupVisible(false)}
+                            popupKeepMounted={true}
                             renderPopupContent={() => {
                                 return (
                                     <div className={b('settings')}>

diff --git a/src/components/CompositeBar/Item/Item.tsx b/src/components/CompositeBar/Item/Item.tsx
@@ -102,6 +102,19 @@ export const Item: React.FC<ItemInnerProps> = (props) => {
     const iconSize = item.iconSize || ASIDE_HEADER_ICON_SIZE;
     const collapsedItem = item.id === COLLAPSE_ITEM_ID;
 
+    const modifiers: Required<PopupProps>['modifiers'] = React.useMemo(
+        () => [
+            {
+                name: 'compact',
+                enabled: true,
+                options: {compact},
+                phase: 'main',
+                fn() {},
+            },
+        ],
+        [compact],
+    );
+
     const onClose = React.useCallback(
         (event: MouseEvent | KeyboardEvent) => {
             if (
@@ -191,6 +204,7 @@ export const Item: React.FC<ItemInnerProps> = (props) => {
                         offset={popupOffset}
                         anchorRef={anchorRef}
                         onClose={onClose}
+                        modifiers={modifiers}
                     >
                         {renderPopupContent()}
                     </Popup>