@rainbow-oh/yee-c 0.8.8 → 0.8.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rainbow-oh/yee-c",
-  "version": "0.8.8",
+  "version": "0.8.9",
   "description": "yee basic components",
   "keywords": [
     "react",

package/src/Popover/popover.tsx

@@ -33,6 +33,9 @@ const Popover = (baseprops: PopoverProps) => {
     ...rest
   } = props;
 
+  const mergedArrow =
+    arrow === true ? { className: `${prefixCls}-arrow` } : arrow;
+
   const [mergedOpen, setMergedOpen] = useMergedState(false, {
     value: open,
     defaultValue: defaultOpen,
@@ -49,7 +52,7 @@ const Popover = (baseprops: PopoverProps) => {
 
     return (
       <div
-        className={clsx(prefixCls, [`${prefixCls}-${placement}`], className)}
+        className={clsx(`${prefixCls}-container`, className)}
         style={style}
         role="dialog"
         ref={popupRef}
@@ -96,12 +99,12 @@ const Popover = (baseprops: PopoverProps) => {
   return (
     <Trigger
       {...rest}
-      arrow={arrow}
+      arrow={mergedArrow}
       trigger={trigger}
       placement={placement}
       popup={popup}
       open={mergedOpen}
-      popupClassName={clsx(`${prefixCls}-popup`, popupClassName)}
+      popupClassName={clsx(`${prefixCls}`, popupClassName)}
       onOpenChange={handleOpenChange}
     >
       {children}

package/src/Popover/style/index.less

@@ -2,11 +2,14 @@
 
 @{pls} {
   max-width: var(--yee-popover-max-width);
-  padding: var(--yee-popover-padding);
   color: var(--yee-color-text);
   background-color: var(--yee-popover-bg-color);
   border-radius: var(--yee-popover-border-radius);
-  overflow: hidden;
+
+  &-container {
+    padding: var(--yee-popover-padding);
+    overflow: auto;
+  }
 
   &-header {
     margin-bottom: var(--yee-popover-header-margin-bottom);

package/src/Table/style/index.less

@@ -72,8 +72,6 @@
   }
 
   &-filter {
-    padding: var(--yee-table-filter-popup-padding);
-
     &-trigger {
       display: inline-flex;
       cursor: pointer;

package/src/Table/theader/filter.tsx

@@ -24,7 +24,7 @@ const getStrLower = (str: any) => {
 };
 
 const HeaderFilter = React.memo((props: any) => {
-  const { filter, column, getContainer, onInternalFilter } = props;
+  const { filter, column, getPopupContainer, onInternalFilter } = props;
   const { prefixCls } = useContext(TableCtx);
   const { locale } = useLocale();
   const { table: tableLocale } = locale;
@@ -36,11 +36,13 @@ const HeaderFilter = React.memo((props: any) => {
   const [searchValue, setSearchValue] = useState('');
 
   useEffect(() => {
-    if (open) {
-      requestAnimationFrame(() => {
-        inputRef.current?.focus({ preventScroll: true });
-      });
-    }
+    if (!open) return;
+
+    const raf = requestAnimationFrame(() => {
+      inputRef.current?.focus({ preventScroll: true });
+    });
+
+    return () => cancelAnimationFrame(raf);
   }, [open]);
 
   const inputChange = (value: string) => {
@@ -187,12 +189,12 @@ const HeaderFilter = React.memo((props: any) => {
     <Popover
       trigger="click"
       placement="bottomRight"
-      className={clsx(`${prefixCls}-filter`)}
+      popupClassName={clsx(`${prefixCls}-filter`)}
       content={popup}
       arrow
       open={open}
       hideOnClick={false}
-      getPopupContainer={getContainer}
+      getPopupContainer={getPopupContainer}
       onOpenChange={handleOpenChange}
     >
       {renderTrigger()}

package/src/Trigger/style/index.less

@@ -3,6 +3,7 @@
 @{pls} {
   position: absolute;
   z-index: var(--yee-trigger-z-index);
+  border-radius: var(--yee-trigger-border-radius);
 
   &-hidden {
     display: none;

package/src/style/size.css

@@ -393,9 +393,9 @@
   /* --Popover-- */
   --yee-popover-z-index: var(--yee-z-index-tooltip);
   --yee-popover-max-width: 704px;
-  --yee-popover-padding: 16px;
+  --yee-popover-padding: 12px;
   --yee-popover-border-radius: 4px;
-  --yee-popover-header-margin-bottom: 16px;
+  --yee-popover-header-margin-bottom: 8px;
   --yee-popover-header-font-weight: 500;
   --yee-popover-header-font-size: 16px;
   --yee-popover-header-line-height: 24px;
@@ -849,6 +849,7 @@
 
   /* --Trigger-- */
   --yee-trigger-z-index: var(--yee-z-index-popup);
+  --yee-trigger-border-radius: 6px;
   --yee-trigger-box-shadow: 0 8px 24px 0 var(--yee-box-shadow-color);
   --yee-trigger-arrow-margin-left: -4px;
   --yee-trigger-animation-duration: 0.2s;

package/src/utils/focusStack.ts

@@ -35,7 +35,9 @@ const focusInitialElement = (entry: FocusStackEntry) => {
 
   const firstFocusable =
     entry.container.querySelector<HTMLElement>(focusableSelector);
-  (firstFocusable ?? entry.container).focus();
+  // Focusing popup content must not move the page or a scrollable ancestor.
+  // Consumers can still scroll explicitly after focus when that behavior is needed.
+  (firstFocusable ?? entry.container).focus({ preventScroll: true });
 };
 
 export const pushFocus = (

package/src/version.ts

@@ -4,7 +4,7 @@ declare global {
   }
 }
 
-export const version = "0.8.8";
+export const version = "0.8.9";
 
 if (typeof window !== 'undefined') {
   window.__yee_c_version__ = version;