@os-design/core 1.0.276 → 1.0.278

package/src/Select/index.tsx

@@ -1,7 +1,7 @@
 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 {
   type WithSize,
   ellipsisStyles,
@@ -12,11 +12,9 @@ import { ThemeOverrider, clr, useTheme } from '@os-design/theming';
 import {
   omitEmotionProps,
   useBrowserLayoutEffect,
-  useEvent,
   useFontSize,
   useForwardedRef,
   useForwardedState,
-  useResizeObserver,
   useSize,
 } from '@os-design/utils';
 import React, {
@@ -264,17 +262,10 @@ export const SelectContainer = styled(
   ${selectContainerUnborderedHoverStyles};
 `;
 
-interface SelectMenuProps {
-  width: number;
-}
-const SelectMenu = styled(Menu, omitEmotionProps('width'))<SelectMenuProps>`
+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`
@@ -493,13 +484,12 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(
       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<any>({
@@ -526,26 +516,6 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(
       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) as EventTarget,
-      'resize',
-      resizeHandler
-    );
-
     // Replace the aria-haspopup attribute from menu to listbox
     useBrowserLayoutEffect(() => {
       if (!containerRef.current) return;
@@ -966,7 +936,6 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(
           visible={opened}
           onClose={() => setOpened(false)}
           size={size}
-          width={width}
           closeOnSelect={!multiple}
           modalTitle={placeholder}
           placement={placement}