@os-design/core 1.0.276 → 1.0.278

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/core",
-  "version": "1.0.276",
+  "version": "1.0.278",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "type": "module",
@@ -39,7 +39,7 @@
     "@os-design/styles": "^1.0.65",
     "@os-design/theming": "^1.0.61",
     "@os-design/time-picker-utils": "^1.0.23",
-    "@os-design/utils": "^1.0.86",
+    "@os-design/utils": "^1.0.87",
     "facepaint": "^1.2.1",
     "react-focus-lock": "^2.13.2",
     "react-window": "^1.8.10"
@@ -58,5 +58,5 @@
     "react": "18",
     "react-dom": "18"
   },
-  "gitHead": "59dea037dfe43e783a9e6f5e3d45788fdcc0ce97"
+  "gitHead": "d7b2d28720454ff073af76be76e9dedd1486fe52"
 }

package/src/Popover/index.tsx

@@ -24,20 +24,22 @@ import {
 import usePopoverPosition, {
   type Placement,
   type Rect,
+  type ScrollableRect,
+  type Size,
 } from './utils/usePopoverPosition.js';
 
 type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
 export interface PopoverProps extends JsxDivProps, WithSize {
-  /**
-   * The element next to which the popover appears.
-   * @default undefined
-   */
-  trigger?: RefObject<Element> | Rect;
   /**
    * Where the popover will be rendered.
    * @default document.body
    */
-  container?: Element | RefObject<Element>;
+  container?: RefObject<Element> | Element | null;
+  /**
+   * The element next to which the popover appears.
+   * @default undefined
+   */
+  trigger?: RefObject<Element> | Element | Rect | null;
   /**
    * On which side of the element the popover will appear.
    * @default top
@@ -75,6 +77,18 @@ const fadeOut = keyframes`
   to { opacity: 0; }
 `;
 
+const widthStyles = (p) =>
+  p.width !== null &&
+  css`
+    width: ${p.width}px;
+  `;
+
+const heightStyles = (p) =>
+  p.height !== null &&
+  css`
+    height: ${p.height}px;
+  `;
+
 const visibleStyles = (p) =>
   p.visible &&
   css`
@@ -90,6 +104,8 @@ const invisibleStyles = (p) =>
 interface ContainerProps extends Pick<PopoverProps, 'visible' | 'size'> {
   top: number;
   left: number;
+  width: number | null;
+  height: number | null;
 }
 const Container = styled(
   'div',
@@ -106,26 +122,21 @@ const Container = styled(
   box-shadow: 0 0.15em 0.8em ${(p) => clr(p.theme.popoverColorBoxShadow)};
   z-index: 1000; // Greater than the z-index of the Drawer
 
+  ${widthStyles};
+  ${heightStyles};
   ${visibleStyles};
   ${invisibleStyles};
   ${sizeStyles};
 `;
 
-const emptyRect: Rect = {
-  top: 0,
-  left: 0,
-  width: 0,
-  height: 0,
-};
-
 /**
  * The pop-up window located next to the element.
  */
 const Popover = forwardRef<HTMLDivElement, PopoverProps>(
   (
     {
-      trigger,
       container,
+      trigger,
       placement = 'top',
       gap = 0.2,
       flip = true,
@@ -138,64 +149,144 @@ const Popover = forwardRef<HTMLDivElement, PopoverProps>(
     ref
   ) => {
     const [popoverRef, mergedPopoverRef] = useForwardedRef(ref);
-    const [popoverRect, setPopoverRect] = useState(emptyRect);
-    const [triggerRect, setTriggerRect] = useState(emptyRect);
+    const [popoverSize, setPopoverSize] = useState<Size | null>(null);
+    const [containerRect, setContainerRect] = useState<ScrollableRect | null>(
+      null
+    );
+    const [triggerRect, setTriggerRect] = useState<Rect | null>(null);
+
     const { theme } = useTheme();
     const mounted = useClosable(visible, theme.transitionDelay);
 
-    // Init the rect of the popover and update it when the popover size changes
-    const popoverResizeListener = useCallback(() => {
-      if (!popoverRef.current) return;
-      setPopoverRect(popoverRef.current.getBoundingClientRect());
-    }, [popoverRef]);
-    useResizeObserver(
-      popoverRef.current as HTMLDivElement,
-      popoverResizeListener
-    );
-
+    // Save the popover size when it has been rendered
     const measuredPopoverRef = useCallback<RefCallback<HTMLDivElement>>(
       (node) => {
         if (node === null) return;
-        setPopoverRect(node.getBoundingClientRect());
+        const rect = node.getBoundingClientRect();
+        setPopoverSize({
+          width: rect.width,
+          height: rect.height,
+        });
         mergedPopoverRef(node);
       },
       [mergedPopoverRef]
     );
 
-    // Init the rect of the trigger and update it when the window was resized
-    // or scrolled
-    const triggerResizeListener = useCallback(() => {
+    // Update the popover size when it has been resized
+    const popoverResizeListener = useCallback(() => {
       window.requestAnimationFrame(() => {
-        if (!trigger) return;
-        const { current } = trigger as RefObject<Element>;
-        if (!current) return;
-        setTriggerRect(current.getBoundingClientRect());
+        if (!popoverRef.current) return;
+        const rect = popoverRef.current.getBoundingClientRect();
+        setPopoverSize({
+          width: rect.width,
+          height: rect.height,
+        });
       });
-    }, [trigger]);
-    useBrowserLayoutEffect(() => {
+    }, [popoverRef]);
+    useResizeObserver(popoverRef.current, popoverResizeListener);
+
+    const containerRef = useMemo<RefObject<Element>>(() => {
+      if (typeof window === 'undefined') {
+        return { current: null };
+      }
+      if (!container) {
+        return { current: document.body };
+      }
+      return 'current' in container ? container : { current: container };
+    }, [container]);
+
+    // Update the container size and its scroll offsets initially and when it has been changed.
+    // Must depend on `visible` to update the position when the popover is visible.
+    const containerListener = useCallback(() => {
       if (!visible) return;
-      triggerResizeListener();
-    }, [triggerResizeListener, visible]);
-    useResizeObserver(trigger as never, triggerResizeListener);
+      window.requestAnimationFrame(() => {
+        if (containerRef.current) {
+          if (containerRef.current === document.body) {
+            setContainerRect({
+              top: 0,
+              left: 0,
+              width: window.innerWidth,
+              height: window.innerHeight,
+              scrollTop: window.scrollY,
+              scrollLeft: window.scrollX,
+            });
+          } else {
+            const rect = containerRef.current.getBoundingClientRect();
+            setContainerRect({
+              top: rect.top,
+              left: rect.left,
+              width: rect.width,
+              height: rect.height,
+              scrollTop: containerRef.current.scrollTop,
+              scrollLeft: containerRef.current.scrollLeft,
+            });
+          }
+        }
+      });
+    }, [containerRef, visible]);
+    useBrowserLayoutEffect(() => {
+      containerListener();
+    }, [containerListener]);
     useEvent(
-      (typeof window === 'undefined' ? null : window) as never,
+      typeof window !== 'undefined' && containerRef.current === document.body
+        ? window
+        : null,
       'resize',
-      triggerResizeListener
+      containerListener
+    );
+    useResizeObserver(
+      typeof window !== 'undefined' && containerRef.current !== document.body
+        ? containerRef.current
+        : null,
+      containerListener
+    );
+    useEvent(
+      typeof window !== 'undefined'
+        ? containerRef.current === document.body
+          ? document
+          : containerRef.current
+        : null,
+      'scroll',
+      containerListener
     );
-    useEvent(document, 'scroll', triggerResizeListener);
 
+    const triggerRef = useMemo<RefObject<Element>>(() => {
+      if (!trigger || 'top' in trigger) {
+        return { current: null };
+      }
+      return 'current' in trigger ? trigger : { current: trigger };
+    }, [trigger]);
+
+    // Update the trigger size and its position initially and when it has been changed
+    const triggerListener = useCallback(() => {
+      if (!containerRect) return;
+      window.requestAnimationFrame(() => {
+        if (triggerRef.current) {
+          const triggerRect = triggerRef.current.getBoundingClientRect();
+          setTriggerRect({
+            top: triggerRect.top - containerRect.top,
+            left: triggerRect.left - containerRect.left,
+            width: triggerRect.width,
+            height: triggerRect.height,
+          });
+        }
+      });
+    }, [containerRect, triggerRef]);
+    useBrowserLayoutEffect(() => {
+      triggerListener();
+    }, [triggerListener]);
+    useResizeObserver(triggerRef.current, triggerListener);
     useEffect(() => {
-      if (!trigger || (trigger as RefObject<Element>).current !== undefined)
-        return;
-      setTriggerRect(trigger as Rect);
+      if (trigger && 'top' in trigger) {
+        setTriggerRect(trigger);
+      }
     }, [trigger]);
 
+    // Set the aria tags to support accessibility features
     const popoverId = useMemo(
       () => id || `popover-${Math.random().toString(36).slice(2, 11)}`,
       [id]
     );
-
-    // Set the aria tags to support accessibility features
     useBrowserLayoutEffect(() => {
       if (!trigger) return;
       const { current } = trigger as RefObject<Element>;
@@ -214,23 +305,40 @@ const Popover = forwardRef<HTMLDivElement, PopoverProps>(
 
     // Get the popover coordinates
     const { top, left } = usePopoverPosition({
-      elementRect: triggerRect,
-      popoverRect,
+      popoverSize,
+      containerRect,
+      triggerRect,
       placement,
       gap,
       flip,
     });
 
+    const width = useMemo(() => {
+      if (!triggerRect) return null;
+      return placement === 'top-full' || placement === 'bottom-full'
+        ? triggerRect.width
+        : null;
+    }, [placement, triggerRect]);
+
+    const height = useMemo(() => {
+      if (!triggerRect) return null;
+      return placement === 'left-full' || placement === 'right-full'
+        ? triggerRect.width
+        : null;
+    }, [placement, triggerRect]);
+
     // Close the popover when the user clicks outside of it
     useClickOutside(popoverRef, onClose);
 
     if (!mounted) return null;
 
     return (
-      <Portal container={container}>
+      <Portal container={containerRef.current}>
         <Container
           top={top}
           left={left}
+          width={width}
+          height={height}
           visible={visible}
           id={popoverId}
           role='dialog'

package/src/Popover/utils/usePopoverPosition.ts

@@ -2,27 +2,39 @@ import { useFontSize } from '@os-design/utils';
 import { useMemo } from 'react';
 
 type Side = 'top' | 'left' | 'right' | 'bottom';
-type Alignment = 'start' | 'end';
+type Alignment = 'start' | 'end' | 'full';
 type AlignedPlacement = `${Side}-${Alignment}`;
 
 export type Placement = Side | AlignedPlacement;
 
-export interface Rect {
-  top: number;
-  left: number;
+export interface Size {
   width: number;
   height: number;
 }
 
+export interface Rect extends Size {
+  top: number;
+  left: number;
+}
+
+export interface ScrollableRect extends Rect {
+  scrollTop: number;
+  scrollLeft: number;
+}
+
 interface UsePopoverPositionProps {
   /**
-   * The rect of the element.
+   * The size of the popover.
    */
-  elementRect: Rect;
+  popoverSize: Size | null;
   /**
-   * The rect of the popover.
+   * The rect of the container.
    */
-  popoverRect: Rect;
+  containerRect: ScrollableRect | null;
+  /**
+   * The rect of the element.
+   */
+  triggerRect: Rect | null;
   /**
    * On which side of the element the popover will appear.
    * @default top
@@ -41,8 +53,9 @@ interface UsePopoverPositionProps {
 }
 
 interface PopoverPositionGetterOptions {
-  elementRect: Rect;
-  popoverRect: Rect;
+  popoverSize: Size;
+  containerRect: ScrollableRect;
+  triggerRect: Rect;
   gap: number;
   flip: boolean;
 }
@@ -53,46 +66,45 @@ type PopoverPositionGetterFn = (
 type PopoverPositionGetters = Record<PositionKeys, PopoverPositionGetterFn>;
 type FitToWindow = Pick<
   PopoverPositionGetterOptions,
-  'elementRect' | 'popoverRect'
+  'popoverSize' | 'containerRect' | 'triggerRect'
 >;
 
 const popoverPositionGetters = (
   rectKey: 'top' | 'left'
 ): PopoverPositionGetters => {
   const sizeKey = rectKey === 'top' ? 'height' : 'width';
-  const windowSizeKey = rectKey === 'top' ? 'innerHeight' : 'innerWidth';
-  const windowOffsetKey = rectKey === 'top' ? 'pageYOffset' : 'pageXOffset';
+  const scrollOffsetKey = rectKey === 'top' ? 'scrollTop' : 'scrollLeft';
 
-  const fitToWindow = (
+  const fitToContainer = (
     start: number,
-    { elementRect, popoverRect }: FitToWindow
+    { popoverSize, containerRect, triggerRect }: FitToWindow
   ): number => {
     let popoverStart = start;
-    const windowStart = window[windowOffsetKey];
-    const windowEnd = windowStart + window[windowSizeKey];
-    const elementStart = windowStart + elementRect[rectKey];
-    const elementEnd = elementStart + elementRect[sizeKey];
-    const popoverEnd = popoverStart + popoverRect[sizeKey];
-
-    // Fit the popover to the end of the window
-    if (popoverEnd > windowEnd) {
-      if (elementEnd < windowEnd)
-        popoverStart = windowEnd - popoverRect[sizeKey];
-      else if (popoverRect[sizeKey] > elementRect[sizeKey])
-        popoverStart = elementEnd - popoverRect[sizeKey];
-      else if (windowEnd - elementStart > popoverRect[sizeKey])
-        popoverStart = windowEnd - popoverRect[sizeKey];
-      else popoverStart = elementStart;
+    const containerStart = containerRect[scrollOffsetKey];
+    const containerEnd = containerStart + containerRect[sizeKey];
+    const triggerStart = containerStart + triggerRect[rectKey];
+    const triggerEnd = triggerStart + triggerRect[sizeKey];
+    const popoverEnd = popoverStart + popoverSize[sizeKey];
+
+    // Fit the popover to the end of the container
+    if (popoverEnd > containerEnd) {
+      if (triggerEnd < containerEnd)
+        popoverStart = containerEnd - popoverSize[sizeKey];
+      else if (popoverSize[sizeKey] > triggerRect[sizeKey])
+        popoverStart = triggerEnd - popoverSize[sizeKey];
+      else if (containerEnd - triggerStart > popoverSize[sizeKey])
+        popoverStart = containerEnd - popoverSize[sizeKey];
+      else popoverStart = triggerStart;
     }
 
-    // Fit the popover to the beginning of the window
-    if (popoverStart < windowStart) {
-      if (elementStart > windowStart) popoverStart = windowStart;
-      else if (popoverRect[sizeKey] > elementRect[sizeKey])
-        popoverStart = elementStart;
-      else if (elementEnd - windowStart > popoverRect[sizeKey])
-        popoverStart = windowStart;
-      else popoverStart = elementEnd - popoverRect[sizeKey];
+    // Fit the popover to the beginning of the container
+    if (popoverStart < containerStart) {
+      if (triggerStart > containerStart) popoverStart = containerStart;
+      else if (popoverSize[sizeKey] > triggerRect[sizeKey])
+        popoverStart = triggerStart;
+      else if (triggerEnd - containerStart > popoverSize[sizeKey])
+        popoverStart = containerStart;
+      else popoverStart = triggerEnd - popoverSize[sizeKey];
     }
 
     return popoverStart;
@@ -100,56 +112,69 @@ const popoverPositionGetters = (
 
   return {
     before(options) {
-      const { elementRect, popoverRect, gap, flip } = options;
-      const windowStart = window[windowOffsetKey];
-      const windowEnd = windowStart + window[windowSizeKey];
-      const elementStart = windowStart + elementRect[rectKey];
-      const popoverStart = elementStart - popoverRect[sizeKey] - gap;
-      if (flip && popoverStart < windowStart) {
+      const { popoverSize, containerRect, triggerRect, gap, flip } = options;
+      const containerStart = containerRect[scrollOffsetKey];
+      const containerEnd = containerStart + containerRect[sizeKey];
+      const triggerStart = containerStart + triggerRect[rectKey];
+      const popoverStart = triggerStart - popoverSize[sizeKey] - gap;
+      if (flip && popoverStart < containerStart) {
         const afterPopoverStart = this.after({ ...options, flip: false });
-        const afterPopoverEnd = afterPopoverStart + popoverRect[sizeKey];
-        const diffStart = windowStart - popoverStart;
-        const diffEnd = afterPopoverEnd - windowEnd;
-        if (afterPopoverEnd <= windowEnd || diffStart > diffEnd)
+        const afterPopoverEnd = afterPopoverStart + popoverSize[sizeKey];
+        const diffStart = containerStart - popoverStart;
+        const diffEnd = afterPopoverEnd - containerEnd;
+        if (afterPopoverEnd <= containerEnd || diffStart > diffEnd)
           return afterPopoverStart;
       }
       return popoverStart;
     },
     after(options) {
-      const { elementRect, popoverRect, gap, flip } = options;
-      const windowStart = window[windowOffsetKey];
-      const windowEnd = windowStart + window[windowSizeKey];
-      const elementStart = windowStart + elementRect[rectKey];
-      const elementEnd = elementStart + elementRect[sizeKey];
-      const popoverStart = elementEnd + gap;
-      const popoverEnd = popoverStart + popoverRect[sizeKey];
-      if (flip && popoverEnd > windowEnd) {
+      const { popoverSize, containerRect, triggerRect, gap, flip } = options;
+      const containerStart = containerRect[scrollOffsetKey];
+      const containerEnd = containerStart + containerRect[sizeKey];
+      const triggerStart = containerStart + triggerRect[rectKey];
+      const triggerEnd = triggerStart + triggerRect[sizeKey];
+      const popoverStart = triggerEnd + gap;
+      const popoverEnd = popoverStart + popoverSize[sizeKey];
+      console.log(popoverEnd, containerEnd);
+      if (flip && popoverEnd > containerEnd) {
         const beforePopoverStart = this.before({ ...options, flip: false });
-        const diffStart = windowStart - beforePopoverStart;
-        const diffEnd = popoverEnd - windowEnd;
-        if (beforePopoverStart >= windowStart || diffEnd > diffStart)
+        const diffStart = containerStart - beforePopoverStart;
+        const diffEnd = popoverEnd - containerEnd;
+        if (beforePopoverStart >= containerStart || diffEnd > diffStart)
           return beforePopoverStart;
       }
       return popoverStart;
     },
-    start: ({ elementRect, popoverRect }) => {
-      const windowStart = window[windowOffsetKey];
-      const elementStart = windowStart + elementRect[rectKey];
-      return fitToWindow(elementStart, { elementRect, popoverRect });
+    start: ({ popoverSize, containerRect, triggerRect }) => {
+      const containerStart = containerRect[scrollOffsetKey];
+      const triggerStart = containerStart + triggerRect[rectKey];
+      return fitToContainer(triggerStart, {
+        popoverSize,
+        containerRect,
+        triggerRect,
+      });
     },
-    end: ({ elementRect, popoverRect }) => {
-      const windowStart = window[windowOffsetKey];
-      const elementStart = windowStart + elementRect[rectKey];
-      const elementEnd = elementStart + elementRect[sizeKey];
-      const popoverStart = elementEnd - popoverRect[sizeKey];
-      return fitToWindow(popoverStart, { elementRect, popoverRect });
+    end: ({ popoverSize, containerRect, triggerRect }) => {
+      const containerStart = containerRect[scrollOffsetKey];
+      const triggerStart = containerStart + triggerRect[rectKey];
+      const triggerEnd = triggerStart + triggerRect[sizeKey];
+      const popoverStart = triggerEnd - popoverSize[sizeKey];
+      return fitToContainer(popoverStart, {
+        popoverSize,
+        containerRect,
+        triggerRect,
+      });
     },
-    center: ({ elementRect, popoverRect }) => {
-      const windowStart = window[windowOffsetKey];
-      const elementStart = windowStart + elementRect[rectKey];
+    center: ({ popoverSize, containerRect, triggerRect }) => {
+      const containerStart = containerRect[scrollOffsetKey];
+      const triggerStart = containerStart + triggerRect[rectKey];
       const popoverStart =
-        elementStart + (elementRect[sizeKey] - popoverRect[sizeKey]) / 2;
-      return fitToWindow(popoverStart, { elementRect, popoverRect });
+        triggerStart + (triggerRect[sizeKey] - popoverSize[sizeKey]) / 2;
+      return fitToContainer(popoverStart, {
+        popoverSize,
+        containerRect,
+        triggerRect,
+      });
     },
   };
 };
@@ -171,12 +196,16 @@ const placementPositionKeysMap: PlacementPositionKeysMap = {
   right: ['center', 'after'],
   'top-start': ['before', 'start'],
   'top-end': ['before', 'end'],
+  'top-full': ['before', 'start'],
   'bottom-start': ['after', 'start'],
   'bottom-end': ['after', 'end'],
+  'bottom-full': ['after', 'start'],
   'left-start': ['start', 'before'],
   'left-end': ['end', 'before'],
+  'left-full': ['start', 'before'],
   'right-start': ['start', 'after'],
   'right-end': ['end', 'after'],
+  'right-full': ['start', 'after'],
 };
 
 interface PopoverPosition {
@@ -190,8 +219,9 @@ interface PopoverPosition {
  * In most cases, it will be the window.
  */
 const usePopoverPosition = ({
-  elementRect,
-  popoverRect,
+  popoverSize,
+  containerRect,
+  triggerRect,
   placement = 'top',
   gap = 0.5,
   flip = true,
@@ -199,15 +229,25 @@ const usePopoverPosition = ({
   const bodyFontSize = useFontSize(document.body);
   const gapPx = useMemo(() => gap * bodyFontSize, [gap, bodyFontSize]);
 
-  const positionKeys = useMemo(() => {
-    if (typeof placement === 'string' && !!placementPositionKeysMap[placement])
-      return placementPositionKeysMap[placement];
-    return placementPositionKeysMap.top;
-  }, [placement]);
+  const positionKeys = useMemo(
+    () =>
+      typeof placement === 'string' && !!placementPositionKeysMap[placement]
+        ? placementPositionKeysMap[placement]
+        : placementPositionKeysMap.top,
+    [placement]
+  );
+
+  if (!popoverSize || !containerRect || !triggerRect) {
+    return {
+      top: -10000,
+      left: -10000,
+    };
+  }
 
   return getPopoverPosition(...positionKeys, {
-    elementRect,
-    popoverRect,
+    popoverSize,
+    containerRect,
+    triggerRect,
     gap: gapPx,
     flip,
   });