fix: 修复 Checkbox.Group 在嵌套情况下影响内部选中状态的问题

package.json

@@ -1,7 +1,7 @@
 {
   "name": "sheinx",
   "private": true,
-  "version": "3.5.6-beta.1",
+  "version": "3.5.6-beta.10",
   "description": "A react library developed with sheinx",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",

packages/base/src/cascader/cascader.tsx

@@ -27,7 +27,7 @@ import { FormFieldContext } from '../form/form-field-context';
 
 import { useConfig, getLocale } from '../config';
 
-const { devUseWarning} = util
+const { devUseWarning } = util;
 
 const Cascader = <DataItem, Value extends KeygenResult[]>(
   props0: CascaderProps<DataItem, Value>,
@@ -423,12 +423,16 @@ const Cascader = <DataItem, Value extends KeygenResult[]>(
         {defaultIcon}
       </span>
     );
+    const close = (
+      <span className={styles.clearIcon} onClick={handleClear}>
+        {Icons.cascader.Close}
+      </span>
+    );
+
     return (
       <>
-        <span className={styles.clearIcon} onClick={handleClear}>
-          {Icons.cascader.Close}
-        </span>
-        {!open && !isEmpty && arrow}
+        {close}
+        {!open && !isEmpty && !focused && arrow}
       </>
     );
   };
@@ -693,7 +697,9 @@ const Cascader = <DataItem, Value extends KeygenResult[]>(
     }
 
     if (mode !== undefined && loader && [0, 1, 2].includes(mode)) {
-      devUseWarning.error(`The mode ${mode} is not supported when loader setted. Only 3 or 4 can be set.`);
+      devUseWarning.error(
+        `The mode ${mode} is not supported when loader setted. Only 3 or 4 can be set.`,
+      );
     }
   }, []);
 

packages/base/src/cascader/filter-node.tsx

@@ -20,30 +20,30 @@ const FilterNode = <DataItem, Value extends KeygenResult[]>(
 
   const styles = jssStyle?.cascader?.() as CascaderClasses;
 
-  const handleSelectItem = (index: number, e?: any) => {
+  const handleSelectItem = (index: number, d: DataItem, e?: any) => {
     const isFinal = data && index === data.length - 1;
     if (shouldFinal && !isFinal) return;
     if (e) e.stopPropagation();
     const item = data[index];
     const isDisabled = datum.isDisabled(datum.getKey(item));
     if (isDisabled) return;
     const keys = data.slice(0, index + 1).map((i: DataItem) => datum.getKey(i)) as Value;
-    if (onChange) onChange(keys);
+    if (onChange) onChange(keys, d);
     onPathChange(datum.getKey(item), item, keys.slice(0, keys.length - 1) as Value, true);
     setInputText('');
     setFilterText('');
   };
 
   const handleSelect = () => {
-    handleSelectItem(data.length - 1);
+    handleSelectItem(data.length - 1, data?.[data.length - 1]);
   };
 
   return (
     <div className={classNames(styles.option, styles.filterOption)} onClick={handleSelect}>
       <div className={classNames(styles.optionInner)}>
         {data.map((item, index) => {
           const handleClick = (e: any) => {
-            handleSelectItem(index, e);
+            handleSelectItem(index, item, e);
           };
           const isDisabled = datum.isDisabled(datum.getKey(item));
           const content = (

packages/base/src/cascader/filter-node.type.ts

@@ -10,7 +10,7 @@ export interface FilterNodeProps<DataItem, Value extends KeygenResult[]> {
   renderItem: (data: DataItem, active?: boolean, id?: Value[0] | undefined) => React.ReactNode;
   setInputText: (text: string) => void;
   setFilterText: (text: string) => void;
-  onChange: (item: Value) => void;
+  onChange: (item: Value, selected?: DataItem) => void;
   onPathChange: (
     id: KeygenResult,
     item: DataItem | null,

packages/base/src/checkbox/checkbox.tsx

@@ -7,7 +7,7 @@ import GroupContext from './group-context';
 import useCheckboxInputable from './use-checkbox-inputable';
 import Input from '../input';
 
-const {devUseWarning} = util
+const { devUseWarning } = util;
 
 const Checkbox = <T,>(props: CheckboxProps<T>) => {
   const {
@@ -55,9 +55,12 @@ const Checkbox = <T,>(props: CheckboxProps<T>) => {
     }
 
     // 兼容Checkbox在createPortal中使用时，无法改变勾选状态的问题
-    if ('value' in props &&  props.checked === undefined) {
+    if ('value' in props && props.checked === undefined) {
       onInputableCheckboxChange(checked);
     }
+    if (props.onRawChange) {
+      props.onRawChange(checked ? htmlValue : undefined, checked, htmlValue);
+    }
     onChange?.(checked ? htmlValue : undefined, checked, htmlValue);
   });
 
@@ -106,7 +109,16 @@ const Checkbox = <T,>(props: CheckboxProps<T>) => {
 
 const CheckboxWithContext = <T,>(props: CheckboxProps<T>) => {
   return (
-    <GroupContext.Consumer>{(value) => <Checkbox {...props} {...value} />}</GroupContext.Consumer>
+    <GroupContext.Consumer>
+      {(value) => (
+        <Checkbox
+          {...props}
+          {...value}
+          onRawChange={props.onChange}
+          checked={'checked' in props ? props.checked : value.checked}
+        />
+      )}
+    </GroupContext.Consumer>
   );
 };
 

packages/base/src/checkbox/checkbox.type.ts

@@ -71,6 +71,11 @@ export interface CheckboxProps<T>
    * @cn 值改变回调函数
    */
   onChange?: (value: T | undefined, checked: boolean, raw: T) => void;
+  /**
+   * @en Value chane callback
+   * @cn 值改变回调函数
+   */
+  onRawChange?: (value: T | undefined, checked: boolean, raw: T) => void;
   /**
    * @en If not set, use (value === htmlValue)
    * @cn checked 传入时为受控组件

packages/base/src/date-picker/date-picker.tsx

@@ -119,13 +119,25 @@ const DatePicker = <Value extends DatePickerValueType>(props0: DatePickerProps<V
         }
       } else {
         func.finishEdit();
+
+        // 如果是通过 props.open 控制的，那么需要在关闭时，将组件再次进入编辑状态
+        if (props.open === true) {
+          func.startEdit();
+        }
       }
 
       setIsCloseFromConfirm(false);
     }
     props.onCollapse?.(isOpen);
   });
 
+  // 如果一开始就打开了板子，那么需要初始化让组件进入编辑状态
+  useEffect(() => {
+    if (props.open) {
+      func.startEdit();
+    }
+  }, []);
+
   const { open, position, targetRef, popupRef, openPop, closePop } = usePopup({
     open: props.open,
     onCollapse: onCollapse,
@@ -169,7 +181,6 @@ const DatePicker = <Value extends DatePickerValueType>(props0: DatePickerProps<V
   const handleClose = (isFromConfirm?: boolean) => {
     setIsCloseFromConfirm(isFromConfirm || false);
     closePop();
-
     if (isFromConfirm) {
       func.finishEdit();
     }

packages/base/src/radio/radio-group.tsx

@@ -1,6 +1,6 @@
 import { RadioGroupProps } from './radio-group.type';
 import { useInputAble, useListSelectSingle, usePersistFn, util } from '@sheinx/hooks';
-import groupContext from './group-context';
+import GroupContext from './group-context';
 import Radio from './radio';
 import React, { useContext } from 'react';
 import classNames from 'classnames';
@@ -106,7 +106,7 @@ const Group = <DataItem, Value>(props0: RadioGroupProps<DataItem, Value>) => {
 
   const Radios =
     props.data === undefined ? (
-      <groupContext.Provider value={providerValue}>{children}</groupContext.Provider>
+      <GroupContext.Provider value={providerValue}>{children}</GroupContext.Provider>
     ) : (
       <>
         {props.data.map((d, i) => (
@@ -116,6 +116,7 @@ const Group = <DataItem, Value>(props0: RadioGroupProps<DataItem, Value>) => {
             disabled={datum.disabledCheck(d)}
             key={util.getKey(keygen, d, i)}
             htmlValue={i}
+            size={size}
             onChange={handleIndexChange}
             renderRadio={renderRadio}
           >

packages/base/src/select/result.tsx

@@ -380,6 +380,13 @@ const Result = <DataItem, Value>(props: ResultProps<DataItem, Value>) => {
     mounted.current = true;
   }, [focus, placeholder, multiple]);
 
+  // Select多选模式下，且开启了onFilter，自动聚焦
+  useLayoutEffect(() => {
+    if (multiple && focus && inputRef?.current) {
+      inputRef.current.focus();
+    }
+  }, [focus, multiple]);
+
   useLayoutEffect(() => {
     handleResetMore();
   }, [valueProp, data]);

packages/hooks/src/components/use-form/use-form.ts

@@ -103,9 +103,18 @@ const useForm = <T extends ObjectType>(props: UseFormProps<T>) => {
     } else {
       const names = isArray(name) ? name : [name];
       names.forEach((key) => {
-        context.updateMap[key]?.forEach((update) => {
-          update(context.value, context.errors, context.serverErrors);
-        });
+        // 外部直接设置user.name这种格式的，但是又没有显性的声明user.name绑定的表单元素；
+        // 这里需要手动触发，否则会导致Input输入过程中光标跳到末尾的异常
+        if (!context.updateMap[key]) {
+          const parentKey = key.split('.')[0];
+          context.updateMap[parentKey]?.forEach((update) => {
+            update(context.value, context.errors, context.serverErrors);
+          });
+        } else {
+          context.updateMap[key]?.forEach((update) => {
+            update(context.value, context.errors, context.serverErrors);
+          });
+        }
         context.flowMap[key]?.forEach((update) => {
           update();
         });

packages/shineout-style/src/spin/ring.ts

@@ -5,8 +5,8 @@ export default {
   boxSizing: 'border-box',
   position: 'relative',
   borderStyle: 'solid',
-  borderColor: Token.spinColor,
+  borderColor: `transparent ${Token.spinColor} ${Token.spinColor} ${Token.spinColor}`,
   borderRadius: '50%',
   animation: '$ring 1s linear infinite',
-  borderTopColor: 'transparent',
 };
+

packages/shineout-style/src/steps/steps.ts

@@ -45,23 +45,70 @@ const stepsStyle: JsStyles<StepsClassType> = {
   small: {
     fontSize: Token.stepsIconFontSize,
     '&$arrow': {
+      '& $step[dir=rtl]:after': {
+        left: -12,
+      },
       '& $step:not(:last-child)': {
+        '&$widthDescription': {
+          '&:after': {
+            borderLeftWidth: 22,
+            borderTopWidth: 28,
+            borderBottomWidth: 28,
+          },
+          '&:before': {
+            borderLeftWidth: 22,
+            borderTopWidth: 28,
+            borderBottomWidth: 28,
+          },
+          '&[dir=ltr]:after': { right: -22 },
+          '&[dir=rtl]:after': { left: -22 },
+        },
+        '&[dir=rtl]:after': {
+          left: -12,
+          right: 'auto',
+        },
         '&:after': {
-          top: `calc(100% - 28px)`,
-          width: 56,
-          height: 56,
+          top: 0,
+          right: -12,
+          width: 12,
+          height: 32,
+          borderLeftWidth: 12,
+          borderTopWidth: 16,
+          borderBottomWidth: 16,
         },
         '&:before': {
-          top: `calc(100% - 28px)`,
-          width: 56,
-          height: 56,
+          top: 0,
+          width: 12,
+          height: 32,
+          borderLeftWidth: 12,
+          borderTopWidth: 16,
+          borderBottomWidth: 16,
+          right: -12,
+        },
+        '&[dir=rtl]:before': {
+          right: 0,
+        },
+      },
+      '& $step:last-child': {
+        '&$widthDescription': {
+          '&:before': {
+            borderLeftWidth: 22,
+            borderTopWidth: 28,
+            borderBottomWidth: 28,
+          },
+        },
+        '&:before': {
+          borderLeftWidth: 12,
+          borderTopWidth: 16,
+          borderBottomWidth: 16,
         },
       },
       '& $content': {
         padding: `${Token.stepsSmallArrowPaddingY} ${Token.stepsSmallArrowPaddingX}`,
         boxSizing: 'border-box',
       },
     },
+
     '&$dot': {
       '&$vertical': {
         '& $tail': {},
@@ -135,9 +182,63 @@ const stepsStyle: JsStyles<StepsClassType> = {
   },
   large: {
     '&$arrow': {
-      '& $step': {
-        '&:after': {},
-        '&:before': {},
+      '& $step:not(:last-child)': {
+        '&$widthDescription': {
+          '&:after': {
+            top: 0,
+            width: 30,
+            height: 72,
+            borderLeftWidth: 30,
+            borderTopWidth: 36,
+            borderBottomWidth: 36,
+          },
+          '&:before': {
+            borderLeftWidth: 30,
+            borderTopWidth: 36,
+            borderBottomWidth: 36,
+          },
+          '&[dir=ltr]:after': { right: -30 },
+          '&[dir=rtl]:after': { left: -30 },
+        },
+        '&[dir=rtl]:after': {
+          left: -20,
+          right: 'auto',
+        },
+        '&[dir=rtl]:before': {
+          right: 0,
+        },
+        '&:after': {
+          top: 0,
+          width: 20,
+          height: 48,
+          borderLeftWidth: 20,
+          borderTopWidth: 24,
+          borderBottomWidth: 24,
+          right: -20,
+        },
+        '&:before': {
+          top: 0,
+          width: 20,
+          height: 48,
+          borderLeftWidth: 20,
+          borderTopWidth: 24,
+          borderBottomWidth: 24,
+          right: -20,
+        },
+      },
+      '& $step:last-child': {
+        '&$widthDescription': {
+          '&:before': {
+            borderLeftWidth: 30,
+            borderTopWidth: 36,
+            borderBottomWidth: 36,
+          },
+        },
+        '&:before': {
+          borderLeftWidth: 20,
+          borderTopWidth: 24,
+          borderBottomWidth: 24,
+        },
       },
       '& $content': {
         padding: `${Token.stepsLargeArrowPaddingY} ${Token.stepsLargeArrowPaddingX}`,