@douyinfe/semi-ui 2.19.0-alpha.7 → 2.19.0-beta.0

package/_utils/index.ts

@@ -47,12 +47,16 @@ export function cloneDeep(value: any, customizer?: (value: any) => void) {
                     set(newArray, key, v[key]);
                 });
                 // internal-issues:887
-                warning(
-                    get(process, 'env.NODE_ENV') !== 'production',
-                    `[Semi] You may use an out-of-bounds array. In some cases, your program may not behave as expected.
+                try {
+                    warning(
+                        get(process, 'env.NODE_ENV') !== 'production',
+                        `[Semi] You may use an out-of-bounds array. In some cases, your program may not behave as expected.
                     The maximum length of an array is 4294967295.
                     Please check whether the array subscript in your data exceeds the maximum value of the JS array subscript`
-                );
+                    );
+                } catch (e){
+
+                }
                 return newArray;
             } else {
                 return undefined;
@@ -191,4 +195,4 @@ export function getFocusableElements(node: HTMLElement) {
     // we are not filtered elements which are invisible
     const focusableElements = Array.from(node.querySelectorAll<HTMLElement>(focusableSelectorsStr));
     return focusableElements;
-}
+}

package/avatar/index.tsx

@@ -31,6 +31,7 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
         onMouseLeave: noop,
     };
 
+    static elementType: string;
     static propTypes = {
         children: PropTypes.node,
         color: PropTypes.oneOf(colorSet),
@@ -192,7 +193,7 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
             const finalProps = clickable ? { ...props, ...a11yFocusProps } : props;
             content = (
                 <span className={`${prefixCls}-content`}>
-                    <span {...finalProps}  x-semi-prop="children">{children}</span>
+                    <span {...finalProps} x-semi-prop="children">{children}</span>
                 </span>
             );
         }
@@ -234,3 +235,4 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
         );
     }
 }
+Avatar.elementType = 'Avatar';

package/checkbox/_story/checkbox.stories.js

@@ -31,6 +31,8 @@ export const CheckboxDefault = () => {
       </Checkbox>
       <br />
       <Checkbox indeterminate>indeterminate</Checkbox>
+      <Checkbox onChange={e => console.log(e)} value={1} onChange={v => console.log(v)}>
+      </Checkbox>
     </div>
   );
 };

package/checkbox/checkbox.tsx

@@ -81,6 +81,8 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
         onMouseLeave: noop,
         type: 'default',
     };
+    static elementType: string;
+
     checkboxEntity: CheckboxInner;
     context: CheckboxContextType;
 
@@ -235,20 +237,27 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
         const name = inGroup && this.context.checkboxGroup.name;
         const xSemiPropChildren = this.props['x-semi-children-alias'] || 'children';
 
-        const renderContent = () => (
-            <>
-                {children ? (
-                    <span id={addonId} className={`${prefix}-addon`} x-semi-prop={xSemiPropChildren}>
-                        {children}
-                    </span>
-                ) : null}
-                {extra ? (
-                    <div id={extraId} className={extraCls} x-semi-prop="extra">
-                        {extra}
-                    </div>
-                ) : null}
-            </>
-        );
+        const renderContent = () => {
+            if (!children && !extra) {
+                return null;
+            }
+
+            return (
+                <div className={`${prefix}-content`}>
+                    {children ? (
+                        <span id={addonId} className={`${prefix}-addon`} x-semi-prop={xSemiPropChildren}>
+                            {children}
+                        </span>
+                    ) : null}
+                    {extra ? (
+                        <div id={extraId} className={extraCls} x-semi-prop="extra">
+                            {extra}
+                        </div>
+                    ) : null}
+                </div>
+            );
+        };
+
         return (
             // label is better than span, however span is here which is to solve gitlab issue #364
             <span
@@ -276,15 +285,11 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
                     onInputFocus={this.handleFocusVisible}
                     onInputBlur={this.handleBlur}
                 />
-                {
-                    props.isCardType ?
-                        <div>{renderContent()}</div> :
-                        renderContent()
-                }
+                {renderContent()}
             </span>
         );
     }
 }
-
+Checkbox.elementType = 'Checkbox';
 
 export default Checkbox;

package/checkbox/checkboxGroup.tsx

@@ -120,6 +120,7 @@ class CheckboxGroup extends BaseComponent<CheckboxGroupProps, CheckboxGroupState
             [`${prefix }-wrapper`]: true,
             [`${prefix }-${ direction}`]: direction,
             [`${prefix}-${direction}-cardType`]: direction && isCardType,
+            [`${prefix}-${direction}-pureCardType`]: direction && isPureCardType,
         }, className);
 
         const realValue = this.state.value.slice();

package/dist/css/semi.css

@@ -3508,7 +3508,7 @@ body {
   box-sizing: border-box;
   position: relative;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   flex-wrap: wrap;
   font-size: 14px;
   line-height: 20px;
@@ -3516,6 +3516,7 @@ body {
   cursor: pointer;
   transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), border var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
   transform: scale(var(--semi-transform_scale-none));
+  column-gap: 8px;
 }
 .semi-checkbox input[type=checkbox] {
   position: absolute;
@@ -3526,11 +3527,16 @@ body {
   margin: 0;
   opacity: 0;
 }
+.semi-checkbox-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  row-gap: 4px;
+}
 .semi-checkbox-addon {
   display: flex;
   flex: 1;
   align-items: center;
-  padding-left: 8px;
   color: var(--semi-color-text-0);
   line-height: 20px;
   user-select: none;
@@ -3633,7 +3639,6 @@ body {
 }
 .semi-checkbox-cardType .semi-checkbox-inner {
   position: relative;
-  margin-right: 8px;
   flex-shrink: 0;
 }
 .semi-checkbox-cardType .semi-checkbox-inner-display {
@@ -3642,22 +3647,18 @@ body {
 .semi-checkbox-cardType .semi-checkbox-inner-pureCardType {
   opacity: 0;
   width: 0;
-  margin-right: 0;
 }
 .semi-checkbox-cardType .semi-checkbox-addon {
   font-weight: 600;
   font-size: 14px;
   line-height: 20px;
   color: var(--semi-color-text-0);
-  margin-left: 0;
-  padding-left: 0;
 }
 .semi-checkbox-cardType .semi-checkbox-extra {
   font-weight: normal;
   font-size: 14px;
   line-height: 20px;
   color: var(--semi-color-text-2);
-  padding-left: 0;
 }
 .semi-checkbox-cardType .semi-checkbox-extra.semi-checkbox-cardType_extra_noChildren {
   margin-top: 0;
@@ -3759,9 +3760,7 @@ body {
   flex-grow: 1;
   flex-basis: 100%;
   box-sizing: border-box;
-  padding-left: 24px;
   color: var(--semi-color-text-2);
-  margin-top: 4px;
 }
 .semi-checkbox-focus {
   outline: 2px solid var(--semi-color-primary-light-active);
@@ -3779,21 +3778,24 @@ body {
 .semi-checkboxGroup .semi-checkbox.semi-checkbox-vertical {
   margin-bottom: 16px;
 }
+.semi-checkboxGroup-horizontal {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
 .semi-checkboxGroup-horizontal .semi-checkbox {
-  margin-right: 16px;
   display: inline-flex;
 }
-.semi-checkboxGroup-horizontal .semi-checkbox:last-of-type {
-  margin-right: 0;
-}
-.semi-checkboxGroup-vertical .semi-checkbox {
-  margin-bottom: 12px;
+.semi-checkboxGroup-vertical {
+  display: flex;
+  flex-direction: column;
+  row-gap: 12px;
 }
-.semi-checkboxGroup-vertical .semi-checkbox:last-of-type {
-  margin-bottom: 0;
+.semi-checkboxGroup-vertical-cardType {
+  row-gap: 16px;
 }
-.semi-checkboxGroup-vertical-cardType .semi-checkbox {
-  margin-bottom: 16px;
+.semi-checkboxGroup-vertical-pureCardType .semi-checkbox {
+  column-gap: 0;
 }
 
 .semi-rtl .semi-checkbox,
@@ -3805,43 +3807,10 @@ body {
   left: auto;
   right: 0;
 }
-.semi-rtl .semi-checkbox-addon,
-.semi-portal-rtl .semi-checkbox-addon {
-  padding-left: 0;
-  padding-right: 8px;
-}
-.semi-rtl .semi-checkbox-extra,
-.semi-portal-rtl .semi-checkbox-extra {
-  padding-left: 0;
-  padding-right: 24px;
-}
-.semi-rtl .semi-checkbox-cardType .semi-checkbox-inner,
-.semi-portal-rtl .semi-checkbox-cardType .semi-checkbox-inner {
-  margin-right: 0;
-  margin-left: 8px;
-}
-.semi-rtl .semi-checkbox-cardType .semi-checkbox-addon,
-.semi-portal-rtl .semi-checkbox-cardType .semi-checkbox-addon {
-  margin-right: 0;
-  padding-right: 0;
-}
-.semi-rtl .semi-checkbox-cardType .semi-checkbox-extra,
-.semi-portal-rtl .semi-checkbox-cardType .semi-checkbox-extra {
-  padding-right: 0;
-}
 .semi-rtl .semi-checkboxGroup,
 .semi-portal-rtl .semi-checkboxGroup {
   direction: rtl;
 }
-.semi-rtl .semi-checkboxGroup-horizontal .semi-checkbox,
-.semi-portal-rtl .semi-checkboxGroup-horizontal .semi-checkbox {
-  margin-right: 0;
-  margin-left: 16px;
-}
-.semi-rtl .semi-checkboxGroup-horizontal .semi-checkbox:last-of-type,
-.semi-portal-rtl .semi-checkboxGroup-horizontal .semi-checkbox:last-of-type {
-  margin-left: 0;
-}
 
 .semi-collapse-item {
   border-bottom: 1px solid var(--semi-color-border);
@@ -14324,14 +14293,8 @@ body {
   display: inline-flex;
   flex-direction: column;
 }
-.semi-popconfirm-header-content {
-  color: var(--semi-color-text-2);
-}
-.semi-popconfirm-header-content > p {
-  margin: 0;
-  padding: 0;
-}
 .semi-popconfirm-body {
+  margin-left: 36px;
   color: var(--semi-color-text-2);
 }
 .semi-popconfirm-body > p {
@@ -15816,6 +15779,7 @@ body {
 .semi-sidesheet-body {
   padding: 0 24px;
   flex: 1;
+  overflow: auto;
 }
 .semi-sidesheet-content {
   height: 100%;
@@ -19654,6 +19618,9 @@ body {
   user-select: none;
   cursor: not-allowed;
 }
+.semi-tree-option-list .semi-checkboxGroup-vertical {
+  row-gap: 0;
+}
 
 .semi-tree-option-list-block .semi-tree-option:hover {
   background-color: var(--semi-color-fill-0);