@os-design/core 1.0.277 → 1.0.278

package/dist/Popover/index.d.ts

@@ -3,16 +3,16 @@ import { type RefObject } from 'react';
 import { type Placement, type Rect } 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?: 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

package/dist/Popover/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Popover/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAW9D,OAAO,EAGL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AACf,OAA2B,EACzB,KAAK,SAAS,EACd,KAAK,IAAI,EACV,MAAM,+BAA+B,CAAC;AAEvC,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,YAAa,SAAQ,WAAW,EAAE,QAAQ;IACzD;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC;IAChD;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAuDD;;GAEG;AACH,QAAA,MAAM,OAAO,yGAkIZ,CAAC;AAIF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Popover/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAW9D,OAAO,EAGL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AACf,OAA2B,EACzB,KAAK,SAAS,EACd,KAAK,IAAI,EAGV,MAAM,+BAA+B,CAAC;AAEvC,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,YAAa,SAAQ,WAAW,EAAE,QAAQ;IACzD;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC;IAChD;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,GAAG,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC;IACrD;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAgED;;GAEG;AACH,QAAA,MAAM,OAAO,yGA0NZ,CAAC;AAIF,eAAe,OAAO,CAAC"}

package/dist/Popover/index.js

@@ -15,6 +15,12 @@ const fadeOut = keyframes`
   from { opacity: 1; }
   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`
     animation: ${fadeIn} ${p.theme.transitionDelay}ms forwards;
   `;
@@ -33,23 +39,19 @@ const Container = styled('div', omitEmotionProps('top', 'left', 'visible', 'size
   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 = {
-  top: 0,
-  left: 0,
-  width: 0,
-  height: 0
-};
 
 /**
  * The pop-up window located next to the element.
  */
 const Popover = /*#__PURE__*/forwardRef(({
-  trigger,
   container,
+  trigger,
   placement = 'top',
   gap = 0.2,
   flip = true,
@@ -60,59 +62,126 @@ const Popover = /*#__PURE__*/forwardRef(({
   ...rest
 }, ref) => {
   const [popoverRef, mergedPopoverRef] = useForwardedRef(ref);
-  const [popoverRect, setPopoverRect] = useState(emptyRect);
-  const [triggerRect, setTriggerRect] = useState(emptyRect);
+  const [popoverSize, setPopoverSize] = useState(null);
+  const [containerRect, setContainerRect] = useState(null);
+  const [triggerRect, setTriggerRect] = useState(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, popoverResizeListener);
+  // Save the popover size when it has been rendered
   const measuredPopoverRef = useCallback(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 (!popoverRef.current) return;
+      const rect = popoverRef.current.getBoundingClientRect();
+      setPopoverSize({
+        width: rect.width,
+        height: rect.height
+      });
+    });
+  }, [popoverRef]);
+  useResizeObserver(popoverRef.current, popoverResizeListener);
+  const containerRef = useMemo(() => {
+    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;
     window.requestAnimationFrame(() => {
-      if (!trigger) return;
-      const {
-        current
-      } = trigger;
-      if (!current) return;
-      const rect = current.getBoundingClientRect();
-      if (container) {
-        const containerElement = container instanceof Element ? container : container.current;
-        if (!containerElement) return;
-        const containerRect = containerElement.getBoundingClientRect();
-        rect.x -= containerRect.x;
-        rect.y -= containerRect.y;
+      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
+          });
+        }
       }
-      setTriggerRect(rect);
     });
-  }, [container, trigger]);
+  }, [containerRef, visible]);
   useBrowserLayoutEffect(() => {
-    if (!visible) return;
-    triggerResizeListener();
-  }, [triggerResizeListener, visible]);
-  useResizeObserver(trigger, triggerResizeListener);
-  useEvent(typeof window === 'undefined' ? null : window, 'resize', triggerResizeListener);
-  useEvent(document, 'scroll', triggerResizeListener);
+    containerListener();
+  }, [containerListener]);
+  useEvent(typeof window !== 'undefined' && containerRef.current === document.body ? window : null, 'resize', 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);
+  const triggerRef = useMemo(() => {
+    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.current !== undefined) return;
-    setTriggerRect(trigger);
+    if (trigger && 'top' in trigger) {
+      setTriggerRect(trigger);
+    }
   }, [trigger]);
-  const popoverId = useMemo(() => id || `popover-${Math.random().toString(36).slice(2, 11)}`, [id]);
 
   // Set the aria tags to support accessibility features
+  const popoverId = useMemo(() => id || `popover-${Math.random().toString(36).slice(2, 11)}`, [id]);
   useBrowserLayoutEffect(() => {
     if (!trigger) return;
     const {
@@ -138,21 +207,32 @@ const Popover = /*#__PURE__*/forwardRef(({
     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 /*#__PURE__*/_jsx(Portal, {
-    container: container,
+    container: containerRef.current,
     children: /*#__PURE__*/_jsx(Container, {
       top: top,
       left: left,
+      width: width,
+      height: height,
       visible: visible,
       id: popoverId,
       role: "dialog",

package/dist/Popover/utils/usePopoverPosition.d.ts

@@ -1,22 +1,32 @@
 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.
+     */
+    containerRect: ScrollableRect | null;
+    /**
+     * The rect of the element.
      */
-    popoverRect: Rect;
+    triggerRect: Rect | null;
     /**
      * On which side of the element the popover will appear.
      * @default top
@@ -42,6 +52,6 @@ interface PopoverPosition {
  * Note that you must change the elementRect when the scroll and resize events of the parent scrollable container occur.
  * In most cases, it will be the window.
  */
-declare const usePopoverPosition: ({ elementRect, popoverRect, placement, gap, flip, }: UsePopoverPositionProps) => PopoverPosition;
+declare const usePopoverPosition: ({ popoverSize, containerRect, triggerRect, placement, gap, flip, }: UsePopoverPositionProps) => PopoverPosition;
 export default usePopoverPosition;
 //# sourceMappingURL=usePopoverPosition.d.ts.map

package/dist/Popover/utils/usePopoverPosition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePopoverPosition.d.ts","sourceRoot":"","sources":["../../../src/Popover/utils/usePopoverPosition.ts"],"names":[],"mappings":"AAGA,KAAK,IAAI,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAChD,KAAK,SAAS,GAAG,OAAO,GAAG,KAAK,CAAC;AACjC,KAAK,gBAAgB,GAAG,GAAG,IAAI,IAAI,SAAS,EAAE,CAAC;AAE/C,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,gBAAgB,CAAC;AAEhD,MAAM,WAAW,IAAI;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,uBAAuB;IAC/B;;OAEG;IACH,WAAW,EAAE,IAAI,CAAC;IAClB;;OAEG;IACH,WAAW,EAAE,IAAI,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AA6ID,UAAU,eAAe;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;GAIG;AACH,QAAA,MAAM,kBAAkB,wDAMrB,uBAAuB,KAAG,eAgB5B,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"usePopoverPosition.d.ts","sourceRoot":"","sources":["../../../src/Popover/utils/usePopoverPosition.ts"],"names":[],"mappings":"AAGA,KAAK,IAAI,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAChD,KAAK,SAAS,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;AAC1C,KAAK,gBAAgB,GAAG,GAAG,IAAI,IAAI,SAAS,EAAE,CAAC;AAE/C,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,gBAAgB,CAAC;AAEhD,MAAM,WAAW,IAAI;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,IAAK,SAAQ,IAAI;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI;IAC1C,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,uBAAuB;IAC/B;;OAEG;IACH,WAAW,EAAE,IAAI,GAAG,IAAI,CAAC;IACzB;;OAEG;IACH,aAAa,EAAE,cAAc,GAAG,IAAI,CAAC;IACrC;;OAEG;IACH,WAAW,EAAE,IAAI,GAAG,IAAI,CAAC;IACzB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AA8JD,UAAU,eAAe;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;GAIG;AACH,QAAA,MAAM,kBAAkB,uEAOrB,uBAAuB,KAAG,eA0B5B,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/Popover/utils/usePopoverPosition.js

@@ -2,112 +2,121 @@ import { useFontSize } from '@os-design/utils';
 import { useMemo } from 'react';
 const popoverPositionGetters = rectKey => {
   const sizeKey = rectKey === 'top' ? 'height' : 'width';
-  const windowSizeKey = rectKey === 'top' ? 'innerHeight' : 'innerWidth';
-  const windowOffsetKey = rectKey === 'top' ? 'pageYOffset' : 'pageXOffset';
-  const fitToWindow = (start, {
-    elementRect,
-    popoverRect
+  const scrollOffsetKey = rectKey === 'top' ? 'scrollTop' : 'scrollLeft';
+  const fitToContainer = (start, {
+    popoverSize,
+    containerRect,
+    triggerRect
   }) => {
     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];
+    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 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;
+    // 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;
   };
   return {
     before(options) {
       const {
-        elementRect,
-        popoverRect,
+        popoverSize,
+        containerRect,
+        triggerRect,
         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 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) return afterPopoverStart;
+        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,
+        popoverSize,
+        containerRect,
+        triggerRect,
         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 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) return beforePopoverStart;
+        const diffStart = containerStart - beforePopoverStart;
+        const diffEnd = popoverEnd - containerEnd;
+        if (beforePopoverStart >= containerStart || diffEnd > diffStart) return beforePopoverStart;
       }
       return popoverStart;
     },
     start: ({
-      elementRect,
-      popoverRect
+      popoverSize,
+      containerRect,
+      triggerRect
     }) => {
-      const windowStart = window[windowOffsetKey];
-      const elementStart = windowStart + elementRect[rectKey];
-      return fitToWindow(elementStart, {
-        elementRect,
-        popoverRect
+      const containerStart = containerRect[scrollOffsetKey];
+      const triggerStart = containerStart + triggerRect[rectKey];
+      return fitToContainer(triggerStart, {
+        popoverSize,
+        containerRect,
+        triggerRect
       });
     },
     end: ({
-      elementRect,
-      popoverRect
+      popoverSize,
+      containerRect,
+      triggerRect
     }) => {
-      const windowStart = window[windowOffsetKey];
-      const elementStart = windowStart + elementRect[rectKey];
-      const elementEnd = elementStart + elementRect[sizeKey];
-      const popoverStart = elementEnd - popoverRect[sizeKey];
-      return fitToWindow(popoverStart, {
-        elementRect,
-        popoverRect
+      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
+      popoverSize,
+      containerRect,
+      triggerRect
     }) => {
-      const windowStart = window[windowOffsetKey];
-      const elementStart = windowStart + elementRect[rectKey];
-      const popoverStart = elementStart + (elementRect[sizeKey] - popoverRect[sizeKey]) / 2;
-      return fitToWindow(popoverStart, {
-        elementRect,
-        popoverRect
+      const containerStart = containerRect[scrollOffsetKey];
+      const triggerStart = containerStart + triggerRect[rectKey];
+      const popoverStart = triggerStart + (triggerRect[sizeKey] - popoverSize[sizeKey]) / 2;
+      return fitToContainer(popoverStart, {
+        popoverSize,
+        containerRect,
+        triggerRect
       });
     }
   };
@@ -123,12 +132,16 @@ const 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-end': ['end', 'after'],
+  'right-full': ['start', 'after']
 };
 /**
  * Computes the position of the popover.
@@ -136,21 +149,26 @@ const placementPositionKeysMap = {
  * In most cases, it will be the window.
  */
 const usePopoverPosition = ({
-  elementRect,
-  popoverRect,
+  popoverSize,
+  containerRect,
+  triggerRect,
   placement = 'top',
   gap = 0.5,
   flip = true
 }) => {
   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
   });

package/dist/Select/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Select/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Select/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,QAAQ,EAId,MAAM,mBAAmB,CAAC;AAU3B,OAAO,KAON,MAAM,OAAO,CAAC;AAIf,OAAoB,EAAE,KAAK,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAG7E,OAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAExD,OAAsB,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE5E,MAAM,WAAW,MAAO,SAAQ,aAAa;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,KAAK,WAAW,GAAG,IAAI,CACrB,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,KAAK,CAC9C,CAAC;AACF,UAAU,eAAe,CAAC,CAAC,CACzB,SAAQ,WAAW,EACjB,QAAQ,EACR,IAAI,CAAC,YAAY,EAAE,WAAW,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC;IACV;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AACD,MAAM,WAAW,sBAAuB,SAAQ,eAAe,CAAC,MAAM,GAAG,IAAI,CAAC;IAC5E;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB;AACD,MAAM,WAAW,mBAAoB,SAAQ,eAAe,CAAC,MAAM,EAAE,CAAC;IACpE;;;OAGG;IACH,QAAQ,EAAE,IAAI,CAAC;CAChB;AACD,MAAM,MAAM,WAAW,GAAG,sBAAsB,GAAG,mBAAmB,CAAC;AAuCvE,UAAU,oBAAoB;IAC5B,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,eAAO,MAAM,eAAe;;SA5CM,MAAO,WAAW;;;;;;iCA6DnD,CAAC;AAsBF,eAAO,MAAM,eAAe;;SAvQtB,MAAO,WACJ;qFA2QR,CAAC;AAeF,UAAU,kBAAkB;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AACD,eAAO,MAAM,aAAa;;SA5GQ,MAAO,WAAW;0GAoHnD,CAAC;AAEF,eAAO,MAAM,WAAW;;SA1SlB,MAAO,WACJ;uFA4SR,CAAC;AAeF,KAAK,UAAU,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,YAAY,CAAC,CAAC;AAC/D,eAAO,MAAM,KAAK;;SAzIgB,MAAO,WAAW;oGAiJnD,CAAC;AAyDF,UAAU,wBAAwB;IAChC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AACD,eAAO,MAAM,mBAAmB;;SA7ME,MAAO,WAAW;kHAoNnD,CAAC;AAEF,eAAO,MAAM,SAAS;;UAErB,CAAC;AAEF,UAAU,UAAU;IAClB,UAAU,EAAE,OAAO,CAAC;CACrB;AAYD,eAAO,MAAM,eAAe;;SAxOM,MAAO,WAAW;;;UA+OnD,CAAC;AAEF,eAAO,MAAM,gBAAgB;;SAjPK,MAAO,WAAW;;;UAwPnD,CAAC;AAEF;;GAEG;AACH,QAAA,MAAM,MAAM,oFAigBX,CAAC;AAIF,eAAe,MAAM,CAAC"}

package/dist/Select/index.js

@@ -1,10 +1,10 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Close, CloseCircle, Down, Loading, Up } from '@os-design/icons';
-import { m, useIsMinWidth } from '@os-design/media';
+import { useIsMinWidth } from '@os-design/media';
 import { ellipsisStyles, resetButtonStyles, transitionStyles } from '@os-design/styles';
 import { ThemeOverrider, clr, useTheme } from '@os-design/theming';
-import { omitEmotionProps, useBrowserLayoutEffect, useEvent, useFontSize, useForwardedRef, useForwardedState, useResizeObserver, useSize } from '@os-design/utils';
+import { omitEmotionProps, useBrowserLayoutEffect, useFontSize, useForwardedRef, useForwardedState, useSize } from '@os-design/utils';
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { FixedSizeList } from 'react-window';
 import Button from '../Button/index.js';
@@ -54,14 +54,10 @@ export const SelectContainer = styled(InputContainer, omitEmotionProps('opened',
   ${selectContainerUnborderedStyles};
   ${selectContainerUnborderedHoverStyles};
 `;
-const SelectMenu = styled(Menu, omitEmotionProps('width'))`
+const SelectMenu = styled(Menu)`
   padding-top: 0;
   padding-bottom: 0;
   max-height: unset;
-
-  ${m.min.xs} {
-    width: ${p => p.width}px;
-  }
 `;
 const NotFound = styled.div`
   height: ${p => p.theme.menuItemHeight}em;
@@ -219,11 +215,10 @@ const Select = /*#__PURE__*/forwardRef(({
   onClose = () => {},
   onBlur = () => {},
   size,
-  placement,
+  placement = 'bottom-full',
   ...rest
 }, ref) => {
   const [containerRef, mergedContainerRef] = useForwardedRef(ref);
-  const [width, setWidth] = useState(0);
   const [opened, setOpened] = useState(autoOpen);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [forwardedValue, setForwardedValue] = useForwardedState({
@@ -247,22 +242,6 @@ const Select = /*#__PURE__*/forwardRef(({
     if (!opened) onCloseRef.current();
   }, [opened]);
 
-  /**
-   * Detect the width of the container when the select was opened and update
-   * it when either the container size or the window size has been changed.
-   */
-  const resizeHandler = useCallback(() => {
-    window.requestAnimationFrame(() => {
-      if (!opened || !containerRef.current) return;
-      const nextWidth = containerRef.current.getBoundingClientRect().width;
-      if (width === nextWidth) return;
-      setWidth(nextWidth);
-    });
-  }, [opened, containerRef, width]);
-  useBrowserLayoutEffect(() => resizeHandler(), [resizeHandler]);
-  useResizeObserver(containerRef, resizeHandler);
-  useEvent(typeof window !== 'undefined' ? window : undefined, 'resize', resizeHandler);
-
   // Replace the aria-haspopup attribute from menu to listbox
   useBrowserLayoutEffect(() => {
     if (!containerRef.current) return;
@@ -529,7 +508,6 @@ const Select = /*#__PURE__*/forwardRef(({
       visible: opened,
       onClose: () => setOpened(false),
       size: size,
-      width: width,
       closeOnSelect: !multiple,
       modalTitle: placeholder,
       placement: placement,