@douyinfe/semi-ui 2.12.1-alpha.2 → 2.13.0-beta.0

package/cascader/index.tsx

@@ -122,7 +122,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
             PropTypes.shape({
                 value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
                 label: PropTypes.any,
-            })
+            }),
         ),
         treeNodeFilterProp: PropTypes.string,
         suffix: PropTypes.node,
@@ -199,7 +199,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         onDropdownVisibleChange: noop,
         onListScroll: noop,
         enableLeafClick: false,
-        'aria-label': 'Cascader',
+        'aria-label': 'Cascader'
     };
 
     options: any;
@@ -247,7 +247,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
             /* Keys of loading item */
             loadingKeys: new Set(),
             /* Mark whether this rendering has triggered asynchronous loading of data */
-            loading: false,
+            loading: false
         };
         this.options = {};
         this.isEmpty = false;
@@ -274,9 +274,10 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
                 }
             },
         };
-        const cascaderAdapter: Pick<
-            CascaderAdapter,
-            'registerClickOutsideHandler' | 'unregisterClickOutsideHandler' | 'rePositionDropdown'
+        const cascaderAdapter: Pick<CascaderAdapter,
+        'registerClickOutsideHandler'
+        | 'unregisterClickOutsideHandler'
+        | 'rePositionDropdown'
         > = {
             registerClickOutsideHandler: cb => {
                 const clickOutsideHandler = (e: Event) => {
@@ -367,10 +368,17 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
     }
 
     static getDerivedStateFromProps(props: CascaderProps, prevState: CascaderState) {
-        const { multiple, value, defaultValue, onChangeWithObject, leafOnly, autoMergeValue } = props;
+        const {
+            multiple,
+            value,
+            defaultValue,
+            onChangeWithObject,
+            leafOnly,
+            autoMergeValue,
+        } = props;
         const { prevProps } = prevState;
         let keyEntities = prevState.keyEntities || {};
-        const newState: Partial<CascaderState> = {};
+        const newState: Partial<CascaderState> = { };
         const needUpdate = (name: string) => {
             const firstInProps = isEmpty(prevProps) && name in props;
             const nameHasChange = prevProps && !isEqual(prevProps[name], props[name]);
@@ -400,18 +408,18 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
                     const realValue = needUpdate('value') ? value : defaultValue;
                     // eslint-disable-next-line max-depth
                     if (Array.isArray(realValue)) {
-                        normallizedValue = Array.isArray(realValue[0])
-                            ? (realValue as SimpleValueType[][])
-                            : ([realValue] as SimpleValueType[][]);
+                        normallizedValue = Array.isArray(realValue[0]) ?
+                            realValue as SimpleValueType[][] :
+                            [realValue] as SimpleValueType[][];
                     } else {
                         normallizedValue = [[realValue]];
                     }
                     // formatValuePath is used to save value of valuePath
                     const formatValuePath: (string | number)[][] = [];
                     normallizedValue.forEach((valueItem: SimpleValueType[]) => {
-                        const formatItem: (string | number)[] = onChangeWithObject
-                            ? (valueItem as CascaderData[]).map(i => i.value)
-                            : (valueItem as (string | number)[]);
+                        const formatItem: (string | number)[] = onChangeWithObject ?
+                            (valueItem as CascaderData[]).map(i => i.value) :
+                            valueItem as (string | number)[];
                         formatValuePath.push(formatItem);
                     });
                     // formatKeys is used to save key of value
@@ -472,9 +480,12 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
     renderTagItem = (value: string | Array<string>, idx: number, type: string) => {
         const { keyEntities, disabledKeys } = this.state;
         const { size, disabled, displayProp, displayRender, disableStrictly } = this.props;
-        const nodeKey = type === strings.IS_VALUE ? findKeysForValues(value, keyEntities)[0] : value;
-        const isDsiabled =
-            disabled || keyEntities[nodeKey].data.disabled || (disableStrictly && disabledKeys.has(nodeKey));
+        const nodeKey = type === strings.IS_VALUE ?
+            findKeysForValues(value, keyEntities)[0] :
+            value;
+        const isDsiabled = disabled ||
+            keyEntities[nodeKey].data.disabled ||
+            (disableStrictly && disabledKeys.has(nodeKey));
         if (!isEmpty(keyEntities) && !isEmpty(keyEntities[nodeKey])) {
             const tagCls = cls(`${prefixcls}-selection-tag`, {
                 [`${prefixcls}-selection-tag-disabled`]: isDsiabled,
@@ -482,7 +493,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
             // custom render tags
             if (isFunction(displayRender)) {
                 return displayRender(keyEntities[nodeKey], idx);
-                // default render tags
+            // default render tags
             } else {
                 return (
                     <Tag
@@ -506,11 +517,25 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
     };
 
     renderTagInput() {
-        const { size, disabled, placeholder, maxTagCount, showRestTagsPopover, restTagsPopoverProps } = this.props;
-        const { inputValue, checkedKeys, keyEntities, resolvedCheckedKeys } = this.state;
+        const {
+            size,
+            disabled,
+            placeholder,
+            maxTagCount,
+            showRestTagsPopover,
+            restTagsPopoverProps,
+        } = this.props;
+        const {
+            inputValue,
+            checkedKeys,
+            keyEntities,
+            resolvedCheckedKeys
+        } = this.state;
         const tagInputcls = cls(`${prefixcls}-tagInput-wrapper`);
         const tagValue: Array<Array<string>> = [];
-        const realKeys = this.mergeType === strings.NONE_MERGE_TYPE ? checkedKeys : resolvedCheckedKeys;
+        const realKeys = this.mergeType === strings.NONE_MERGE_TYPE
+            ? checkedKeys
+            : resolvedCheckedKeys;
         [...realKeys].forEach(checkedKey => {
             if (!isEmpty(keyEntities[checkedKey])) {
                 tagValue.push(keyEntities[checkedKey].valuePath);
@@ -523,7 +548,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
                 disabled={disabled}
                 size={size}
                 // TODO Modify logic, not modify type
-                value={(tagValue as unknown) as string[]}
+                value={tagValue as unknown as string[]}
                 showRestTagsPopover={showRestTagsPopover}
                 restTagsPopoverProps={restTagsPopoverProps}
                 maxTagCount={maxTagCount}
@@ -531,7 +556,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
                 inputValue={inputValue}
                 onInputChange={this.handleInputChange}
                 // TODO Modify logic, not modify type
-                onRemove={v => this.handleTagRemove(null, (v as unknown) as (string | number)[])}
+                onRemove={v => this.handleTagRemove(null, v as unknown as (string | number)[])}
                 placeholder={placeholder}
             />
         );
@@ -553,7 +578,11 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         });
         return (
             <div className={wrappercls}>
-                <Input ref={this.inputRef as any} size={size} {...inputProps} />
+                <Input
+                    ref={this.inputRef as any}
+                    size={size}
+                    {...inputProps}
+                />
             </div>
         );
     }
@@ -583,7 +612,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
             checkedKeys,
             halfCheckedKeys,
             loadedKeys,
-            loadingKeys,
+            loadingKeys
         } = this.state;
         const {
             filterTreeNode,
@@ -595,7 +624,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
             topSlot,
             bottomSlot,
             showNext,
-            multiple,
+            multiple
         } = this.props;
         const searchable = Boolean(filterTreeNode) && isSearching;
         const popoverCls = cls(dropdownClassName, `${prefixcls}-popover`);
@@ -632,29 +661,37 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
     renderPlusN = (hiddenTag: Array<ReactNode>) => {
         const { disabled, showRestTagsPopover, restTagsPopoverProps } = this.props;
         const plusNCls = cls(`${prefixcls}-selection-n`, {
-            [`${prefixcls}-selection-n-disabled`]: disabled,
+            [`${prefixcls}-selection-n-disabled`]: disabled
         });
-        const renderPlusNChildren = <span className={plusNCls}>+{hiddenTag.length}</span>;
-        return showRestTagsPopover && !disabled ? (
-            <Popover
-                content={hiddenTag}
-                showArrow
-                trigger="hover"
-                position="top"
-                autoAdjustOverflow
-                {...restTagsPopoverProps}
-            >
-                {renderPlusNChildren}
-            </Popover>
-        ) : (
-            renderPlusNChildren
+        const renderPlusNChildren = (
+            <span className={plusNCls}>
+                +{hiddenTag.length}
+            </span>
+        );
+        return (
+            showRestTagsPopover && !disabled ?
+                (
+                    <Popover
+                        content={hiddenTag}
+                        showArrow
+                        trigger="hover"
+                        position="top"
+                        autoAdjustOverflow
+                        {...restTagsPopoverProps}
+                    >
+                        {renderPlusNChildren}
+                    </Popover>
+                ) :
+                renderPlusNChildren
         );
     };
 
     renderMultipleTags = () => {
         const { autoMergeValue, maxTagCount } = this.props;
         const { checkedKeys, resolvedCheckedKeys } = this.state;
-        const realKeys = this.mergeType === strings.NONE_MERGE_TYPE ? checkedKeys : resolvedCheckedKeys;
+        const realKeys = this.mergeType === strings.NONE_MERGE_TYPE
+            ? checkedKeys
+            : resolvedCheckedKeys;
         const displayTag: Array<ReactNode> = [];
         const hiddenTag: Array<ReactNode> = [];
         [...realKeys].forEach((checkedKey, idx) => {
@@ -683,22 +720,19 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
             if (displayRender && typeof displayRender === 'function') {
                 displayText = displayRender(displayPath);
             } else {
-                displayText = displayPath.map((path: ReactNode, index: number) => (
+                displayText = displayPath.map((path: ReactNode, index: number)=>(
                     <Fragment key={`${path}-${index}`}>
-                        {index < displayPath.length - 1 ? (
-                            <>
-                                {path}
-                                {separator}
-                            </>
-                        ) : (
-                            path
-                        )}
+                        {
+                            index<displayPath.length-1
+                                ? <>{path}{separator}</>
+                                : path
+                        }
                     </Fragment>
                 ));
             }
         }
         return displayText;
-    };
+    }
 
     renderSelectContent = () => {
         const { placeholder, filterTreeNode, multiple } = this.props;
@@ -729,11 +763,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
             [`${prefixcls}-suffix-text`]: suffix && isString(suffix),
             [`${prefixcls}-suffix-icon`]: isSemiIcon(suffix),
         });
-        return (
-            <div className={suffixWrapperCls} x-semi-prop="suffix">
-                {suffix}
-            </div>
-        );
+        return <div className={suffixWrapperCls}>{suffix}</div>;
     };
 
     renderPrefix = () => {
@@ -748,11 +778,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
             [`${prefixcls}-prefix-icon`]: isSemiIcon(labelNode),
         });
 
-        return (
-            <div className={prefixWrapperCls} id={insetLabelId} x-semi-prop="prefix,insetLabel">
-                {labelNode}
-            </div>
-        );
+        return <div className={prefixWrapperCls} id={insetLabelId}>{labelNode}</div>;
     };
 
     renderCustomTrigger = () => {
@@ -821,7 +847,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
                     className={clearCls}
                     onClick={this.handleClear}
                     onKeyPress={this.handleClearEnterPress}
-                    role="button"
+                    role='button'
                     tabIndex={0}
                 >
                     <IconClear />
@@ -837,11 +863,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         if (showClearBtn) {
             return null;
         }
-        return arrowIcon ? (
-            <div className={cls(`${prefixcls}-arrow`)} x-semi-prop="arrowIcon">
-                {arrowIcon}
-            </div>
-        ) : null;
+        return arrowIcon ? <div className={cls(`${prefixcls}-arrow`)}>{arrowIcon}</div> : null;
     };
 
     renderSelection = () => {
@@ -863,40 +885,40 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         const { isOpen, isFocus, isInput, checkedKeys } = this.state;
         const filterable = Boolean(filterTreeNode);
         const useCustomTrigger = typeof triggerRender === 'function';
-        const classNames = useCustomTrigger
-            ? cls(className)
-            : cls(prefixcls, className, {
-                  [`${prefixcls}-focus`]: isFocus || (isOpen && !isInput),
-                  [`${prefixcls}-disabled`]: disabled,
-                  [`${prefixcls}-single`]: true,
-                  [`${prefixcls}-filterable`]: filterable,
-                  [`${prefixcls}-error`]: validateStatus === 'error',
-                  [`${prefixcls}-warning`]: validateStatus === 'warning',
-                  [`${prefixcls}-small`]: size === 'small',
-                  [`${prefixcls}-large`]: size === 'large',
-                  [`${prefixcls}-with-prefix`]: prefix || insetLabel,
-                  [`${prefixcls}-with-suffix`]: suffix,
-              });
-        const mouseEvent = showClear
-            ? {
-                  onMouseEnter: () => this.handleMouseOver(),
-                  onMouseLeave: () => this.handleMouseLeave(),
-              }
-            : {};
+        const classNames = useCustomTrigger ?
+            cls(className) :
+            cls(prefixcls, className, {
+                [`${prefixcls}-focus`]: isFocus || (isOpen && !isInput),
+                [`${prefixcls}-disabled`]: disabled,
+                [`${prefixcls}-single`]: true,
+                [`${prefixcls}-filterable`]: filterable,
+                [`${prefixcls}-error`]: validateStatus === 'error',
+                [`${prefixcls}-warning`]: validateStatus === 'warning',
+                [`${prefixcls}-small`]: size === 'small',
+                [`${prefixcls}-large`]: size === 'large',
+                [`${prefixcls}-with-prefix`]: prefix || insetLabel,
+                [`${prefixcls}-with-suffix`]: suffix,
+            });
+        const mouseEvent = showClear ?
+            {
+                onMouseEnter: () => this.handleMouseOver(),
+                onMouseLeave: () => this.handleMouseLeave(),
+            } :
+            {};
         const sectionCls = cls(`${prefixcls}-selection`, {
             [`${prefixcls}-selection-multiple`]: multiple && !isEmpty(checkedKeys),
         });
-        const inner = useCustomTrigger
-            ? this.renderCustomTrigger()
-            : [
-                  <Fragment key={'prefix'}>{prefix || insetLabel ? this.renderPrefix() : null}</Fragment>,
-                  <Fragment key={'selection'}>
-                      <div className={sectionCls}>{this.renderSelectContent()}</div>
-                  </Fragment>,
-                  <Fragment key={'clearbtn'}>{this.renderClearBtn()}</Fragment>,
-                  <Fragment key={'suffix'}>{suffix ? this.renderSuffix() : null}</Fragment>,
-                  <Fragment key={'arrow'}>{this.renderArrow()}</Fragment>,
-              ];
+        const inner = useCustomTrigger ?
+            this.renderCustomTrigger() :
+            [
+                <Fragment key={'prefix'}>{prefix || insetLabel ? this.renderPrefix() : null}</Fragment>,
+                <Fragment key={'selection'}>
+                    <div className={sectionCls}>{this.renderSelectContent()}</div>
+                </Fragment>,
+                <Fragment key={'clearbtn'}>{this.renderClearBtn()}</Fragment>,
+                <Fragment key={'suffix'}>{suffix ? this.renderSuffix() : null}</Fragment>,
+                <Fragment key={'arrow'}>{this.renderArrow()}</Fragment>,
+            ];
         /**
          * Reasons for disabling the a11y eslint rule:
          * The following attributes(aria-controls,aria-expanded) will be automatically added by Tooltip, no need to declare here
@@ -912,12 +934,12 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
                 aria-errormessage={this.props['aria-errormessage']}
                 aria-label={this.props['aria-label']}
                 aria-labelledby={this.props['aria-labelledby']}
-                aria-describedby={this.props['aria-describedby']}
+                aria-describedby={this.props["aria-describedby"]}
                 aria-required={this.props['aria-required']}
                 id={id}
                 {...mouseEvent}
                 // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
-                role="combobox"
+                role='combobox'
                 tabIndex={0}
             >
                 {inner}

package/cascader/item.tsx

@@ -291,7 +291,7 @@ export default class Item extends PureComponent<CascaderItemProps> {
             <LocaleConsumer componentName="Cascader">
                 {(locale: Locale['Cascader']) => (
                     <ul className={`${prefixcls} ${prefixcls}-empty`} key={'empty-list'}>
-                        <span className={`${prefixcls}-label`} x-semi-prop="emptyContent">
+                        <span className={`${prefixcls}-label`}>
                             {emptyContent || locale.emptyText}
                         </span>
                     </ul>

package/checkbox/checkbox.tsx

@@ -36,6 +36,7 @@ interface CheckboxState {
     checked: boolean;
     addonId?: string;
     extraId?: string;
+    focusVisible?: boolean;
 }
 class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
     static contextType = Context;
@@ -99,13 +100,17 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
             },
             setExtraId: () => {
                 this.setState({ extraId: getUuidShort({ prefix: 'extra' }) });
-            }
+            },
+            setFocusVisible: (focusVisible: boolean): void => {
+                this.setState({ focusVisible });
+            },
+            focusCheckboxEntity: () => {
+                this.focus();
+            },
         };
     }
 
     foundation: CheckboxFoundation;
-    addonId: string;
-    extraId: string;
     constructor(props: CheckboxProps) {
         super(props);
 
@@ -115,6 +120,7 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
             checked: props.checked || props.defaultChecked || checked,
             addonId: props.addonId,
             extraId: props.extraId,
+            focusVisible: false
         };
 
         this.checkboxEntity = null;
@@ -147,6 +153,14 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
 
     handleEnterPress = (e: React.KeyboardEvent<HTMLSpanElement>) => this.foundation.handleEnterPress(e);
 
+    handleFocusVisible = (event: React.FocusEvent) => {
+        this.foundation.handleFocusVisible(event);
+    }
+
+    handleBlur = (event: React.FocusEvent) => {
+        this.foundation.handleBlur();
+    }
+
     render() {
         const {
             disabled,
@@ -163,7 +177,7 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
             tabIndex,
             id
         } = this.props;
-        const { checked, addonId, extraId } = this.state;
+        const { checked, addonId, extraId, focusVisible } = this.state;
         const props: Record<string, any> = {
             checked,
             disabled,
@@ -186,6 +200,8 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
 
         const prefix = prefixCls || css.PREFIX;
 
+        const focusOuter = props.isCardType || props.isPureCardType;
+
         const wrapper = classnames(prefix, {
             [`${prefix}-disabled`]: props.disabled,
             [`${prefix}-indeterminate`]: indeterminate,
@@ -197,32 +213,21 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
             [`${prefix}-cardType_checked`]: props.isCardType && props.checked && !props.disabled,
             [`${prefix}-cardType_checked_disabled`]: props.isCardType && props.checked && props.disabled,
             [className]: Boolean(className),
+            [`${prefix}-focus`]: focusVisible && focusOuter,
         });
 
         const extraCls = classnames(`${prefix}-extra`, {
             [`${prefix}-cardType_extra_noChildren`]: props.isCardType && !children,
         });
 
-        const name = inGroup && this.context.checkboxGroup.name;
-        const xSemiPropChildren = this.props['x-semi-children-alias'] || 'children';
-
         const renderContent = () => (
             <>
-                {children ? (
-                    <span id={this.addonId} className={`${prefix}-addon`} x-semi-prop={xSemiPropChildren}>
-                        {children}
-                    </span>
-                ) : null}
-                {extra ? (
-                    <div id={this.extraId} className={extraCls} x-semi-prop="extra">
-                        {extra}
-                    </div>
-                ) : null}
+                {children ? <span id={addonId} className={`${prefix}-addon`}>{children}</span> : null}
+                {extra ? <div id={extraId} className={extraCls}>{extra}</div> : null}
             </>
         );
         return (
             // label is better than span, however span is here which is to solve gitlab issue #364
-            // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
             <span
                 role={role}
                 tabIndex={tabIndex}
@@ -238,12 +243,15 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
                 <CheckboxInner
                     {...this.props}
                     {...props}
-                    addonId={children && this.addonId}
-                    extraId={extra && this.extraId}
+                    addonId={children && addonId}
+                    extraId={extra && extraId}
                     isPureCardType={props.isPureCardType}
                     ref={ref => {
                         this.checkboxEntity = ref;
                     }}
+                    focusInner={focusVisible && !focusOuter}
+                    onInputFocus={this.handleFocusVisible}
+                    onInputBlur={this.handleBlur}
                 />
                 {
                     props.isCardType ?

package/checkbox/checkboxInner.tsx

@@ -23,6 +23,9 @@ export interface CheckboxInnerProps {
     addonId?: string;
     extraId?: string;
     'aria-label'?: React.AriaAttributes['aria-label'];
+    focusInner?: boolean;
+    onInputFocus?: (e: any) => void;
+    onInputBlur?: (e: any) => void;
 }
 
 class CheckboxInner extends PureComponent<CheckboxInnerProps> {
@@ -43,6 +46,9 @@ class CheckboxInner extends PureComponent<CheckboxInnerProps> {
         isPureCardType: PropTypes.bool,
         addonId: PropTypes.string,
         extraId: PropTypes.string,
+        focusInner: PropTypes.bool,
+        onInputFocus: PropTypes.func,
+        onInputBlur: PropTypes.func,
     };
 
     static defaultProps = {
@@ -59,7 +65,7 @@ class CheckboxInner extends PureComponent<CheckboxInnerProps> {
     }
 
     render() {
-        const { indeterminate, checked, disabled, prefixCls, name, isPureCardType, addonId, extraId } = this.props;
+        const { indeterminate, checked, disabled, prefixCls, name, isPureCardType, addonId, extraId, focusInner, onInputFocus, onInputBlur } = this.props;
         const prefix = prefixCls || css.PREFIX;
 
         const wrapper = classnames(
@@ -73,6 +79,8 @@ class CheckboxInner extends PureComponent<CheckboxInnerProps> {
 
         const inner = classnames({
             [`${prefix}-inner-display`]: true,
+            [`${prefix}-focus`]: focusInner,
+            [`${prefix}-focus-border`]:  focusInner && !checked,
         });
 
         const icon = checked ? (
@@ -95,6 +103,8 @@ class CheckboxInner extends PureComponent<CheckboxInnerProps> {
             onChange: noop,
             checked: checked,
             disabled: disabled,
+            onFocus: onInputFocus,
+            onBlur: onInputBlur,
         };
         
         name && (inputProps['name'] = name);

package/collapsible/index.tsx

@@ -92,14 +92,7 @@ const Collapsible = (props: CollapsibleProps) => {
         const wrapperCls = cls(`${cssClasses.PREFIX}-wrapper`, className);
         return (
             <div style={wrapperstyle} className={wrapperCls} ref={ref}>
-                <div
-                    ref={setHeight}
-                    style={{ overflow: 'hidden' }} 
-                    id={id}
-                    x-semi-prop="children"
-                >
-                    {children}
-                </div>
+                <div ref={setHeight} style={{ overflow: 'hidden' }} id={id}>{children}</div>
             </div>
         );
     };

package/datePicker/dateInput.tsx

@@ -172,7 +172,6 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
             <div
                 className={`${prefixCls}-range-input-prefix`}
                 onClick={e => !disabled && !rangeInputFocus && this.handleRangeStartFocus(e)}
-                x-semi-prop="prefix,insetLabel"
             >
                 {labelNode}
             </div>

package/datePicker/datePicker.tsx

@@ -653,21 +653,13 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
 
         return (
             <div ref={this.panelRef} className={wrapCls} style={dropdownStyle}>
-                {topSlot && (
-                    <div className={`${cssClasses.PREFIX}-topSlot`} x-semi-prop="topSlot">
-                        {topSlot}
-                    </div>
-                )}
+                {topSlot && <div className={`${cssClasses.PREFIX}-topSlot`}>{topSlot}</div>}
                 {insetInput && <DateInput {...insetInputProps} insetInput={true} />}
-                {this.adapter.typeIsYearOrMonth()
-                    ? this.renderYearMonthPanel(locale, localeCode)
-                    : this.renderMonthGrid(locale, localeCode, dateFnsLocale)}
+                {this.adapter.typeIsYearOrMonth() ?
+                    this.renderYearMonthPanel(locale, localeCode) :
+                    this.renderMonthGrid(locale, localeCode, dateFnsLocale)}
                 {this.renderQuickControls()}
-                {bottomSlot && (
-                    <div className={`${cssClasses.PREFIX}-bottomSlot`} x-semi-prop="bottomSlot">
-                        {bottomSlot}
-                    </div>
-                )}
+                {bottomSlot && <div className={`${cssClasses.PREFIX}-bottomSlot`}>{bottomSlot}</div>}
                 {this.renderFooter(locale, localeCode)}
             </div>
         );

package/dist/css/semi.css

@@ -3443,7 +3443,9 @@ body[theme-mode=dark], body .semi-always-dark {
   font-size: 16px;
 }
 .semi-checkbox-inner-pureCardType {
-  display: none;
+  opacity: 0;
+  width: 0;
+  margin-right: 0 !important;
 }
 .semi-checkbox-inner-checked .semi-checkbox-inner-display {
   background: var(--semi-color-primary);
@@ -3622,6 +3624,12 @@ body[theme-mode=dark], body .semi-always-dark {
   color: var(--semi-color-text-2);
   margin-top: 4px;
 }
+.semi-checkbox-focus {
+  outline: 2px solid var(--semi-color-primary-light-active);
+}
+.semi-checkbox-focus-border {
+  box-shadow: inset 0 0 0 1px var(--semi-color-focus-border);
+}
 
 .semi-checkboxGroup {
   font-size: 14px;