@alfalab/core-components-popover 6.1.0 → 6.2.1

package/src/Component.tsx

@@ -19,6 +19,7 @@ import maxSize from 'popper-max-size-modifier';
 
 import { Portal } from '@alfalab/core-components-portal';
 import { Stack, stackingOrder } from '@alfalab/core-components-stack';
+import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
 
 import styles from './index.module.css';
 
@@ -54,7 +55,7 @@ export type PopoverProps = {
 
     /**
      * Запрещает поповеру менять свою позицию.
-     * Например, если места снизу недостаточно,то он все равно будет показан снизу
+     * Например, если места снизу недостаточно, то он все равно будет показан снизу
      */
     preventFlip?: boolean;
 
@@ -118,7 +119,7 @@ export type PopoverProps = {
     /**
      * Хранит функцию, с помощью которой можно обновить положение компонента
      */
-    update?: MutableRefObject<() => void>;
+    update?: MutableRefObject<(() => void) | undefined>;
 
     /**
      * Дополнительный класс
@@ -175,11 +176,36 @@ const availableHieghtModifier = {
     },
 };
 
-/**
- * Минимальный размер anchorElement,
- * при котором возможно смещение стрелочки относительно центра
- */
-const MIN_ARROW_SHIFT_SIZE = 75;
+const DEFAULT_OFFSET = [0, 0];
+
+// Минимальное расстояние стрелки до края поповера
+const MIN_DISTANCE_TO_EDGE = 24;
+
+function getArrowPadding({
+    placement,
+}: {
+    popper: { height: number; width: number };
+    reference: { height: number; width: number };
+    placement: Position;
+}) {
+    if (placement === 'right-end' || placement === 'left-end') {
+        return { top: MIN_DISTANCE_TO_EDGE, right: 0, bottom: 0, left: 0 };
+    }
+
+    if (placement === 'top-start' || placement === 'bottom-start') {
+        return { top: 0, right: MIN_DISTANCE_TO_EDGE, bottom: 0, left: 0 };
+    }
+
+    if (placement === 'right-start' || placement === 'left-start') {
+        return { top: 0, right: 0, bottom: MIN_DISTANCE_TO_EDGE, left: 0 };
+    }
+
+    if (placement === 'top-end' || placement === 'bottom-end') {
+        return { top: 0, right: 0, bottom: 0, left: MIN_DISTANCE_TO_EDGE };
+    }
+
+    return 0;
+}
 
 export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
     (
@@ -189,7 +215,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
             transition = DEFAULT_TRANSITION,
             anchorElement,
             useAnchorWidth,
-            offset = [0, 0],
+            offset = DEFAULT_OFFSET,
             withArrow = false,
             withTransition = true,
             position = 'left',
@@ -211,7 +237,6 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
         const [referenceElement, setReferenceElement] = useState<RefElement>(anchorElement);
         const [popperElement, setPopperElement] = useState<RefElement>(null);
         const [arrowElement, setArrowElement] = useState<RefElement>(null);
-        const [arrowShift, setArrowShift] = useState(false);
 
         const updatePopperRef = useRef<() => void>();
 
@@ -222,7 +247,13 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
             const modifiers: PopperModifier[] = [{ name: 'offset', options: { offset } }];
 
             if (withArrow) {
-                modifiers.push({ name: 'arrow', options: { element: arrowElement } });
+                modifiers.push({
+                    name: 'arrow',
+                    options: {
+                        element: arrowElement,
+                        padding: getArrowPadding,
+                    },
+                });
             }
 
             if (preventFlip) {
@@ -266,7 +297,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
             updatePopperRef.current = updatePopper;
         }
 
-        useEffect(() => {
+        useLayoutEffect_SAFE_FOR_SSR(() => {
             setReferenceElement(anchorElement);
         }, [anchorElement]);
 
@@ -277,7 +308,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
         }, [updatePopper, arrowElement, children]);
 
         useEffect(() => {
-            if (update && !update.current && updatePopper) {
+            if (update && updatePopper) {
                 // eslint-disable-next-line no-param-reassign
                 update.current = updatePopper;
             }
@@ -301,25 +332,6 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
             return () => ({});
         }, [anchorElement, useAnchorWidth]);
 
-        /**
-         * По дизайну, если у тултипа позиционирование -start/-end, то стрелочка немного сдвигается вбок.
-         * Но если anchorElement слишком маленький, то стрелочка сдвигаться не должна.
-         */
-        useEffect(() => {
-            const shiftedPosition = position.includes('-start') || position.includes('-end');
-
-            if (shiftedPosition && referenceElement) {
-                const { width, height } = referenceElement.getBoundingClientRect();
-
-                const size =
-                    position.includes('left') || position.includes('right') ? height : width;
-
-                if (size >= MIN_ARROW_SHIFT_SIZE) {
-                    setArrowShift(true);
-                }
-            }
-        }, [referenceElement, position]);
-
         const renderContent = (computedZIndex: number) => (
             <div
                 ref={mergeRefs([ref, popperRef, setPopperElement])}
@@ -330,9 +342,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
                     ...(popperStyles.popper?.transform ? null : { visibility: 'hidden' }),
                 }}
                 data-test-id={dataTestId}
-                className={cn(styles.component, className, {
-                    [styles.arrowShift]: arrowShift,
-                })}
+                className={cn(styles.component, className)}
                 {...attributes.popper}
             >
                 <div className={cn(styles.inner, popperClassName)} ref={innerRef}>

package/src/index.module.css

@@ -11,7 +11,7 @@
 
 .inner {
     position: relative;
-    background-color: var(--color-light-bg-primary);
+    background-color: var(--color-light-modal-bg-primary);
     box-shadow: var(--shadow-m);
     border: 1px solid var(--popover-border-color);
     box-sizing: border-box;
@@ -34,7 +34,7 @@
     position: absolute;
     width: 12px;
     height: 12px;
-    background-color: var(--color-light-bg-primary);
+    background-color: var(--color-light-modal-bg-primary);
     border: 1px solid var(--popover-border-color);
     box-sizing: border-box;
     transform: rotate(45deg);
@@ -52,14 +52,6 @@
     }
 }
 
-.component[data-popper-placement='left-start'].arrowShift .arrow:after {
-    top: -7px;
-}
-
-.component[data-popper-placement='left-end'].arrowShift .arrow:after {
-    top: -5px;
-}
-
 .component[data-popper-placement='right'] .arrow,
 .component[data-popper-placement='right-start'] .arrow,
 .component[data-popper-placement='right-end'] .arrow {
@@ -72,14 +64,6 @@
     }
 }
 
-.component[data-popper-placement='right-start'].arrowShift .arrow:after {
-    top: -7px;
-}
-
-.component[data-popper-placement='right-end'].arrowShift .arrow:after {
-    top: -5px;
-}
-
 .component[data-popper-placement='top'] .arrow,
 .component[data-popper-placement='top-start'] .arrow,
 .component[data-popper-placement='top-end'] .arrow {
@@ -92,14 +76,6 @@
     }
 }
 
-.component[data-popper-placement='top-start'].arrowShift .arrow:after {
-    left: -17px;
-}
-
-.component[data-popper-placement='top-end'].arrowShift .arrow:after {
-    left: 5px;
-}
-
 .component[data-popper-placement='bottom'] .arrow,
 .component[data-popper-placement='bottom-start'] .arrow,
 .component[data-popper-placement='bottom-end'] .arrow {
@@ -112,14 +88,6 @@
     }
 }
 
-.component[data-popper-placement='bottom-start'].arrowShift .arrow:after {
-    left: -17px;
-}
-
-.component[data-popper-placement='bottom-end'].arrowShift .arrow:after {
-    left: 5px;
-}
-
 .enter .inner {
     opacity: 0;
     transform: scale(0.98);