@zat-design/sisyphus-react 4.5.8-beta.6 → 4.5.9-beta.1

package/es/ProLayout/index.js

@@ -17,6 +17,7 @@ import headerBg from "../assets/header_bg.png";
 // 全局上下文
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const LayoutContext = /*#__PURE__*/createContext(undefined);
+const TABS_HEADER_MEASURE_SELECTOR = '[data-pro-layout-tabs-measure="true"]';
 const ProLayout = props => {
   const {
     children,
@@ -94,26 +95,45 @@ const ProLayout = props => {
   useLayoutEffect(() => {
     const noticeEl = notice && !isIframePure ? noticeElRef.current : null;
     const visibleTabsBarEl = isTabsLayout && hasTabs && !isIframePure ? tabsBarEl : null;
+    const visibleTabsHeaderEl = visibleTabsBarEl?.querySelector(TABS_HEADER_MEASURE_SELECTOR);
     let active = true;
+    let animationFrameId;
     const measureStickyElements = () => {
       if (!active) return;
       const nextHeights = {
         notice: noticeEl?.getBoundingClientRect().height ?? 0,
-        tabsBar: visibleTabsBarEl?.getBoundingClientRect().height ?? 0
+        tabsBar: visibleTabsHeaderEl?.getBoundingClientRect().height ?? 0
       };
       setStickyHeights(currentHeights => currentHeights.notice === nextHeights.notice && currentHeights.tabsBar === nextHeights.tabsBar ? currentHeights : nextHeights);
     };
     measureStickyElements();
-    const observedElements = [noticeEl, visibleTabsBarEl].filter(element => element !== null);
+    if (typeof window.requestAnimationFrame === 'function') {
+      animationFrameId = window.requestAnimationFrame(measureStickyElements);
+    }
+    const handleTabsTransitionEnd = event => {
+      if (event.target === visibleTabsBarEl && event.propertyName === 'grid-template-rows') {
+        measureStickyElements();
+      }
+    };
+    visibleTabsBarEl?.addEventListener('transitionend', handleTabsTransitionEnd);
+    const observedElements = [noticeEl, visibleTabsHeaderEl].filter(element => element !== null && element !== undefined);
     if (observedElements.length === 0 || typeof ResizeObserver === 'undefined') {
       return () => {
         active = false;
+        if (animationFrameId !== undefined) {
+          window.cancelAnimationFrame(animationFrameId);
+        }
+        visibleTabsBarEl?.removeEventListener('transitionend', handleTabsTransitionEnd);
       };
     }
     const resizeObserver = new ResizeObserver(measureStickyElements);
     observedElements.forEach(element => resizeObserver.observe(element));
     return () => {
       active = false;
+      if (animationFrameId !== undefined) {
+        window.cancelAnimationFrame(animationFrameId);
+      }
+      visibleTabsBarEl?.removeEventListener('transitionend', handleTabsTransitionEnd);
       resizeObserver.disconnect();
     };
   }, [hasTabs, isIframePure, isTabsLayout, notice, tabsBarEl]);

package/es/ProLayout/style/index.less

@@ -388,11 +388,10 @@
 
       .pro-layout-tabs-content {
         > .tab-pane {
-          // ProStep 以 ProHeader 开头时，去掉 tabs 内容区的顶部/右侧外层留白。
-          // ProStep 保持默认 right: 0，内容与收起态步骤条保留 16px 间距；左侧缩进不变。
+          // ProStep 以 ProHeader 开头时，仅去掉 tabs 内容区的顶部留白。
+          // 保留右侧内边距，让 ProStep wrapper 继续为贴右步骤条预留 16px 间距。
           > .pro-step-wrapper:has(> .pro-header:first-child) {
             margin-top: calc(-1px - var(--zaui-space-size-md, 16px));
-            margin-right: calc(-1px - var(--zaui-space-size-md, 16px));
           }
 
           > .pro-header.pro-header-no-describe:first-child {

package/es/ProTable/components/EditableCell/EditIcon.js

@@ -1,18 +1,15 @@
+import { EditOutlined } from '@ant-design/icons';
+import classNames from 'classnames';
 import React from 'react';
-import ProIcon from "../../../ProIcon";
-import editSvg from "../../../assets/edit.svg";
-import styles from "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 const EditIcon = ({
   onClick
 }) => {
+  const cls = classNames('pro-table-editable-cell-edit-icon');
   return /*#__PURE__*/_jsx("span", {
-    className: styles['editable-cell-edit-icon'],
+    className: cls,
     onClick: onClick,
-    children: /*#__PURE__*/_jsx(ProIcon, {
-      src: editSvg,
-      size: "20px"
-    })
+    children: /*#__PURE__*/_jsx(EditOutlined, {})
   });
 };
 export default EditIcon;

package/es/ProTable/components/EditableCell/index.js

@@ -1,9 +1,9 @@
 import _isEqual from "lodash/isEqual";
 import React, { useState, useRef } from 'react';
 import { Form } from 'antd';
+import classNames from 'classnames';
 import * as componentMap from "../../../ProForm/components";
 import EditIcon from "./EditIcon";
-import styles from "./index.less";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const InternalCell = ({
   value,
@@ -29,6 +29,7 @@ const InternalCell = ({
     ...restFieldProps
   } = fieldProps;
   const Component = componentMap[type] ?? componentMap.Input;
+  const wrapperClassName = classNames('pro-table-editable-cell-wrapper');
   const handleEditIconClick = () => {
     snapshotRef.current = value;
     form.setFieldValue(fieldName, value);
@@ -57,7 +58,7 @@ const InternalCell = ({
   };
   if (!editing) {
     return /*#__PURE__*/_jsxs("span", {
-      className: styles['editable-cell-wrapper'],
+      className: wrapperClassName,
       children: [/*#__PURE__*/_jsx("span", {
         children: displayContent ?? '-'
       }), /*#__PURE__*/_jsx(EditIcon, {

package/es/ProTable/style/index.less

@@ -624,6 +624,32 @@
       }
     }
   }
+
+  .pro-table-editable-cell-wrapper {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    justify-content: space-between;
+    gap: 4px;
+    white-space: nowrap;
+  }
+
+  .pro-table-editable-cell-edit-icon {
+    display: inline-flex;
+    align-items: center;
+    color: #d8d8d8;
+    cursor: pointer;
+    visibility: hidden;
+    flex-shrink: 0;
+
+    &:hover {
+      color: var(--zaui-brand, #006aff);
+    }
+  }
+
+  td:hover .pro-table-editable-cell-edit-icon {
+    visibility: visible;
+  }
 }
 
 .@{ant-prefix}-dropdown-placement-bottomLeft {

package/es/ProTreeModal/components/Trigger.js

@@ -26,11 +26,13 @@ function Trigger(props) {
   const {
     disabled: appointDisabled
   } = appointProps || {};
-  const _tempAppointDisabled = appointDisabled || false;
-  const _tempDisabled = disabled || false;
-  const [beforeDisabled, afterDisabled] = Array.isArray(disabled) ? disabled : [_tempDisabled, _tempDisabled];
-  const [allDisabled, specifyDisabled] = Array.isArray(appointDisabled) ? appointDisabled : [_tempAppointDisabled, _tempAppointDisabled];
-  const [state, setState] = useSetState({
+  const normalizedAppointDisabled = appointDisabled || false;
+  const normalizedDisabled = disabled || false;
+  const [beforeDisabled, afterDisabled] = Array.isArray(disabled) ? disabled : [normalizedDisabled, normalizedDisabled];
+  const [allDisabled, specifyDisabled] = Array.isArray(appointDisabled) ? appointDisabled : [normalizedAppointDisabled, normalizedAppointDisabled];
+  const [{
+    mode
+  }, setState] = useSetState({
     mode: 'appoint'
   });
   useEffect(() => {
@@ -45,17 +47,17 @@ function Trigger(props) {
     }
   }, [allValue, value, appoint, checkAll]);
   const onIconClick = () => {
-    if (appoint && state.mode === 'all') {
+    if (appoint && mode === 'all') {
       return;
     }
     handleClick();
   };
   const viewIconClassName = classNames('pro-tree-modal-view-svg', {
-    'pro-tree-modal-view-svg-active': !!isView && checkedValues.length > 0 && state.mode !== 'all' && !afterDisabled,
-    'pro-tree-modal-view-svg-not-allowed': appoint && state.mode === 'all'
+    'pro-tree-modal-view-svg-active': !!isView && checkedValues.length > 0 && mode !== 'all' && !afterDisabled,
+    'pro-tree-modal-view-svg-not-allowed': appoint && mode === 'all'
   });
   const addonAfterClassName = classNames('pro-enum-input-addonAfter', {
-    'pro-enum-input-addonAfter-not-allowed': appoint && state.mode === 'all',
+    'pro-enum-input-addonAfter-not-allowed': appoint && mode === 'all',
     'trigger-no-hover': afterDisabled
   });
   if (isView) {
@@ -63,7 +65,8 @@ function Trigger(props) {
     return /*#__PURE__*/_jsxs("div", {
       className: "pro-tree-modal-isView",
       children: [/*#__PURE__*/_jsx("div", {
-        children: !hasValue ? '-' : state.mode === 'all' ? formatMessage(locale?.ProTreeModal.checkAll1, {
+        className: "pro-tree-modal-isView-value",
+        children: !hasValue ? '-' : mode === 'all' ? formatMessage(locale?.ProTreeModal.checkAll1, {
           all: label
         }) : formatMessage(locale?.ProTreeModal?.checkNumber, {
           num: checkedValues.length
@@ -92,6 +95,7 @@ function Trigger(props) {
     if (appoint) {
       return /*#__PURE__*/_jsxs(Space.Compact, {
         block: true,
+        className: "pro-tree-modal-appoint-compact",
         style: {
           ...triggerStyle
         },
@@ -102,7 +106,7 @@ function Trigger(props) {
           disabled: beforeDisabled,
           className: classNames(disabled ? 'trigger-no-hover' : '', appoint ? 'pro-tree-modal-input-appoint' : ''),
           defaultValue: "appoint",
-          value: state.mode,
+          value: mode,
           onChange: onAppointChange,
           options: [{
             value: 'all',
@@ -125,17 +129,17 @@ function Trigger(props) {
   const inputProps = {
     className: classNames(afterDisabled ? 'trigger-no-hover' : '', appoint ? 'pro-tree-modal-input-appoint' : ''),
     onClick: handleClick,
-    value: checkedValues.length === 0 ? null : state.mode === 'all' ? formatMessage(locale?.ProTreeModal.checkAll1, {
+    value: checkedValues.length === 0 ? null : mode === 'all' ? formatMessage(locale?.ProTreeModal.checkAll1, {
       all: label
     }) : formatMessage(locale?.ProTreeModal?.checkNumber, {
       num: checkedValues.length
     }),
     placeholder: locale?.ProTreeModal?.select,
-    disabled: afterDisabled || state.mode === 'all'
+    disabled: afterDisabled || mode === 'all'
   };
 
   // 如果 mode === 'all'，不显示 addonAfter，直接返回 Input
-  if (state.mode === 'all') {
+  if (mode === 'all') {
     return /*#__PURE__*/_jsx(TriggerComponent, {
       children: /*#__PURE__*/_jsx(Input, {
         ...inputProps,