@rainbow-oh/yee-c 0.8.8 → 0.8.10

package/package.json

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

package/src/Popconfirm/popconfirm.tsx

@@ -74,7 +74,7 @@ const Popconfirm: React.FC<PopconfirmProps> = (baseprops) => {
       ref={(node) => {
         if (node) {
           const btn = node.querySelector<HTMLButtonElement>('[data-confirm]');
-          if (btn) btn.focus();
+          if (btn) btn.focus({ preventScroll: true });
         }
       }}
     >
@@ -127,7 +127,11 @@ const Popconfirm: React.FC<PopconfirmProps> = (baseprops) => {
       open={mergedOpen}
       onOpenChange={handleOpenChange}
     >
-      <div className={`${prefixCls}-trigger`}>{children}</div>
+      {React.isValidElement(children) ? (
+        children
+      ) : (
+        <span className={`${prefixCls}-trigger`}>{children}</span>
+      )}
     </Trigger>
   );
 };

package/src/Popconfirm/style/index.less

@@ -11,10 +11,13 @@
     display: flex;
     gap: var(--yee-popconfirm-header-gap);
     align-items: center;
+    margin-bottom: var(--yee-popconfirm-header-margin-bottom);
   }
 
   &-title {
-    margin: var(--yee-popconfirm-title-margin);
+    margin: 0;
+    font-size: var(--yee-popconfirm-title-font-size);
+    font-weight: var(--yee-popconfirm-title-font-weight);
   }
 
   &-footer {

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

@@ -383,19 +383,21 @@
 
   /* --Popconfirm-- */
   --yee-popconfirm-z-index: var(--yee-z-index-tooltip);
-  --yee-popconfirm-padding: 16px;
+  --yee-popconfirm-padding: 12px;
   --yee-popconfirm-border-radius: 4px;
   --yee-popconfirm-box-shadow: 0 8px 24px 0 var(--yee-box-shadow-color);
   --yee-popconfirm-header-gap: 16px;
-  --yee-popconfirm-title-margin: 0;
+  --yee-popconfirm-header-margin-bottom: 8px;
   --yee-popconfirm-footer-margin-top: 16px;
+  --yee-popconfirm-title-font-size: 16px;
+  --yee-popconfirm-title-font-weight: 600;
 
   /* --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 +851,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.10";
 
 if (typeof window !== 'undefined') {
   window.__yee_c_version__ = version;