@douyinfe/semi-ui 2.10.0-beta.0 → 2.10.2-alpha.0

package/button/buttonGroup.tsx

@@ -15,7 +15,7 @@ export interface ButtonGroupProps extends BaseProps {
     size?: Size;
     theme?: Theme;
     className?: string;
-    children?: React.ReactChild;
+    children?: React.ReactNode;
     'aria-label'?: React.AriaAttributes['aria-label'];
 }
 
@@ -44,7 +44,7 @@ export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
         const cls = classNames(`${prefixCls}-group`, className);
 
         if (children) {
-            inner = ((Array.isArray(children) ? children : [children])).map((itm: React.ReactChild, index) => (
+            inner = ((Array.isArray(children) ? children : [children])).map((itm: React.ReactNode, index) => (
                 isValidElement(itm)
                     ? cloneElement(itm, { disabled, size, type, ...itm.props, ...rest, key: index })
                     : itm

package/carousel/CarouselArrow.tsx

@@ -5,7 +5,7 @@ import cls from 'classnames';
 import { cssClasses } from '@douyinfe/semi-foundation/carousel/constants';
 import { CarouselArrowProps } from "./interface";
 import { IconChevronLeft, IconChevronRight } from "@douyinfe/semi-icons";
-import { get, throttle } from 'lodash';
+import { get } from 'lodash';
 
 class CarouselArrow extends React.PureComponent<CarouselArrowProps> {
     renderLeftIcon = () => {
@@ -17,7 +17,7 @@ class CarouselArrow extends React.PureComponent<CarouselArrowProps> {
     }
 
     render(): ReactNode {
-        const { type, theme, prev, next, timing } = this.props;
+        const { type, theme, prev, next } = this.props;
         const classNames = cls( {
             [cssClasses.CAROUSEL_ARROW]: true,
             [`${cssClasses.CAROUSEL_ARROW}-${theme}`]: theme,
@@ -39,7 +39,7 @@ class CarouselArrow extends React.PureComponent<CarouselArrowProps> {
                 <div 
                     // role='button'
                     className={leftClassNames} 
-                    onClick={throttle(prev, timing)}
+                    onClick={prev}
                     {...get(this.props, 'arrowProps.leftArrow.props')}
                 >
                     {this.renderLeftIcon()}
@@ -48,7 +48,7 @@ class CarouselArrow extends React.PureComponent<CarouselArrowProps> {
                     // role='button'
                     // tabIndex={0} 
                     className={rightClassNames} 
-                    onClick={throttle(next, timing)}
+                    onClick={next}
                     {...get(this.props, 'arrowProps.rightArrow.props')}
                 >
                     {this.renderRightIcon()}

package/carousel/CarouselIndicator.tsx

@@ -6,7 +6,6 @@ import PropTypes from 'prop-types';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/carousel/constants';
 import { CarouselIndicatorProps } from "./interface";
 import getDataAttr from "@douyinfe/semi-foundation/utils/getDataAttr";
-import { throttle } from 'lodash';
 
 class CarouselIndicator extends React.PureComponent<CarouselIndicatorProps> {
     static propTypes = {

package/carousel/index.tsx

@@ -155,7 +155,7 @@ class Carousel extends BaseComponent<CarouselProps, CarouselState> {
     }
 
     onIndicatorChange = (activeIndex: number): void => {
-        return this.foundation.throttleChange(activeIndex);
+        return this.foundation.onIndicatorChange(activeIndex);
     };
 
     getChildren  = (): (ReactChild | ReactFragment | ReactPortal)[] => {
@@ -238,7 +238,6 @@ class Carousel extends BaseComponent<CarouselProps, CarouselState> {
     renderArrow = () => {
         const { children } = this.state;
         const { showArrow, arrowType, theme, arrowProps } = this.props;
-        const timing = this.foundation.getSwitchingTime();
 
         if (showArrow && children.length > 1){
             return (
@@ -247,7 +246,6 @@ class Carousel extends BaseComponent<CarouselProps, CarouselState> {
                     theme={theme} 
                     prev={this.prev} 
                     next={this.next}
-                    timing={timing}
                     arrowProps={arrowProps}
                 />
             );

package/carousel/interface.ts

@@ -4,7 +4,7 @@ import { strings } from '@douyinfe/semi-foundation/carousel/constants';
 export interface CarouselMethod {
     next?: () => void;
     prev?: () => void;
-    goTo?: () => void;
+    goTo?: (tagetIndex: number) => void;
     play?: () => void;
     stop?: () => void;
 }
@@ -51,7 +51,6 @@ export interface CarouselArrowProps {
     prev?: () => void;
     next?: () => void;
     arrowProps?: ArrowProps;
-    timing: number;
 }
 
 export interface ArrowButton {

package/checkbox/checkbox.tsx

@@ -171,6 +171,7 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
             const { isCardType, isPureCardType } = this.context.checkboxGroup;
             props.isCardType = isCardType;
             props.isPureCardType = isPureCardType;
+            props['name'] = this.context.checkboxGroup.name;
         }
 
         const prefix = prefixCls || css.PREFIX;
@@ -192,8 +193,6 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
             [`${prefix}-cardType_extra_noChildren`]: props.isCardType && !children,
         });
 
-        const name = inGroup && this.context.checkboxGroup.name;
-
         const renderContent = () => (
             <>
                 {children ? <span id={this.addonId} className={`${prefix}-addon`}>{children}</span> : null}
@@ -220,7 +219,6 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
                     {...props}
                     addonId={children && this.addonId}
                     extraId={extra && this.extraId}
-                    name={name}
                     isPureCardType={props.isPureCardType}
                     ref={ref => {
                         this.checkboxEntity = ref;

package/checkbox/checkboxInner.tsx

@@ -81,26 +81,31 @@ class CheckboxInner extends PureComponent<CheckboxInnerProps> {
             <IconCheckboxIndeterminate />
         ) : null;
 
+        const inputProps: React.InputHTMLAttributes<HTMLInputElement>  = {
+            type: "checkbox",
+            'aria-label': this.props['aria-label'],
+            'aria-disabled': disabled,
+            'aria-checked': checked,
+            'aria-labelledby': addonId,
+            'aria-describedby':extraId || this.props['aria-describedby'],
+            'aria-invalid': this.props['aria-invalid'],
+            'aria-errormessage': this.props['aria-errormessage'],
+            'aria-required': this.props['aria-required'],
+            className: css.INPUT,
+            onChange: noop,
+            checked: checked,
+            disabled: disabled,
+        };
+        
+        name && (inputProps['name'] = name);
+
         return (
             <span className={wrapper}>
                 <input
-                    type="checkbox"
-                    aria-label={this.props['aria-label']}
-                    aria-disabled={disabled}
-                    aria-checked={checked}
-                    aria-labelledby={addonId}
-                    aria-describedby={extraId || this.props['aria-describedby']}
-                    aria-invalid={this.props['aria-invalid']}
-                    aria-errormessage={this.props['aria-errormessage']}
-                    aria-required={this.props['aria-required']}
+                    {...inputProps}
                     ref={ref => {
                         this.inputEntity = ref;
                     }}
-                    className={css.INPUT}
-                    onChange={noop}
-                    checked={checked}
-                    disabled={disabled}
-                    name={name}
                 />
                 <span className={inner}>{icon}</span>
             </span>

package/datePicker/monthsGrid.tsx

@@ -10,7 +10,7 @@ import { format as formatFn, addMonths, isSameDay } from 'date-fns';
 
 import MonthsGridFoundation, { MonthInfo, MonthsGridAdapter, MonthsGridDateAdapter, MonthsGridFoundationProps, MonthsGridFoundationState, MonthsGridRangeAdapter, PanelType } from '@douyinfe/semi-foundation/datePicker/monthsGridFoundation';
 import { strings, numbers, cssClasses } from '@douyinfe/semi-foundation/datePicker/constants';
-import { compatiableParse } from '@douyinfe/semi-foundation/datePicker/_utils/parser';
+import { compatibleParse } from '@douyinfe/semi-foundation/datePicker/_utils/parser';
 import { noop, stubFalse } from 'lodash';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import Navigation from './navigation';
@@ -476,8 +476,8 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
             rangeStart &&
             rangeEnd &&
             isSameDay(
-                (startDate = compatiableParse(rangeStart, dateFormat, undefined, dateFnsLocale)),
-                (endDate = compatiableParse(rangeEnd, dateFormat, undefined, dateFnsLocale))
+                (startDate = compatibleParse(rangeStart, dateFormat, undefined, dateFnsLocale)),
+                (endDate = compatibleParse(rangeEnd, dateFormat, undefined, dateFnsLocale))
             )
         ) {
             if (panelType === strings.PANEL_TYPE_RIGHT) {
@@ -550,10 +550,10 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
 
         if (panelType === strings.PANEL_TYPE_LEFT) {
             panelDetail = monthLeft;
-            dateText = rangeStart ? formatFn(compatiableParse(rangeStart, dateFormat, undefined, dateFnsLocale), FORMAT_SWITCH_DATE) : '';
+            dateText = rangeStart ? formatFn(compatibleParse(rangeStart, dateFormat, undefined, dateFnsLocale), FORMAT_SWITCH_DATE) : '';
         } else {
             panelDetail = monthRight;
-            dateText = rangeEnd ? formatFn(compatiableParse(rangeEnd, dateFormat, undefined, dateFnsLocale), FORMAT_SWITCH_DATE) : '';
+            dateText = rangeEnd ? formatFn(compatibleParse(rangeEnd, dateFormat, undefined, dateFnsLocale), FORMAT_SWITCH_DATE) : '';
         }
 
         const { isTimePickerOpen, showDate } = panelDetail;
@@ -561,7 +561,7 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
 
         const timeText = showDate ? formatFn(showDate, formatTimePicker) : '';
 
-        const showSwithIcon = ['default'].includes(density);
+        const showSwitchIcon = ['default'].includes(density);
 
         const switchCls = classnames(`${prefixCls}-switch`);
         const dateCls = classnames({
@@ -583,7 +583,7 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
                     className={dateCls}
                     onClick={e => this.foundation.showDatePanel(panelType)}
                 >
-                    {showSwithIcon && <IconCalendar aria-hidden />}
+                    {showSwitchIcon && <IconCalendar aria-hidden />}
                     <span className={textCls}>{dateText || monthText}</span>
                 </div>
                 <div
@@ -592,7 +592,7 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
                     className={timeCls}
                     onClick={e => this.foundation.showTimePicker(panelType, true)}
                 >
-                    {showSwithIcon && <IconClock aria-hidden />}
+                    {showSwitchIcon && <IconClock aria-hidden />}
                     <span className={textCls}>{timeText}</span>
                 </div>
             </div>

package/dist/css/semi.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /* shadow */
 /* sizing */
 /* spacing */
@@ -2864,7 +2865,7 @@ body[theme-mode=dark], body .semi-always-dark {
 
 @keyframes semi-carousel-content-item-keyframe-slide-in {
   from {
-    transform: translateX(-100%);
+    transform: translateX(100%);
   }
   to {
     transform: translateX(0);
@@ -2875,12 +2876,12 @@ body[theme-mode=dark], body .semi-always-dark {
     transform: translateX(0);
   }
   to {
-    transform: translateX(100%);
+    transform: translateX(-100%);
   }
 }
 @keyframes semi-carousel-content-item-keyframe-slide-in-reverse {
   from {
-    transform: translateX(100%);
+    transform: translateX(-100%);
   }
   to {
     transform: translateX(0);
@@ -2891,7 +2892,7 @@ body[theme-mode=dark], body .semi-always-dark {
     transform: translateX(0);
   }
   to {
-    transform: translateX(-100%);
+    transform: translateX(100%);
   }
 }
 .semi-rtl .semi-carousel,