@douyinfe/semi-ui 2.2.0-beta.1 → 2.3.0-beta.0

package/datePicker/datePicker.tsx

@@ -21,9 +21,15 @@ import { RangeType } from '@douyinfe/semi-foundation/datePicker/inputFoundation'
 import { TimePickerProps } from '../timePicker/TimePicker';
 
 export interface DatePickerProps extends DatePickerFoundationProps {
+    'aria-describedby'?: React.AriaAttributes['aria-describedby'];
+    'aria-errormessage'?: React.AriaAttributes['aria-errormessage'];
+    'aria-invalid'?: React.AriaAttributes['aria-invalid'];
+    'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
+    'aria-required'?: React.AriaAttributes['aria-required'];
     timePickerOpts?: TimePickerProps;
     bottomSlot?: React.ReactNode;
     insetLabel?: React.ReactNode;
+    insetLabelId?: string;
     prefix?: React.ReactNode;
     topSlot?: React.ReactNode;
     renderDate?: (dayNumber?: number, fullDate?: string) => React.ReactNode;
@@ -42,6 +48,11 @@ export type DatePickerState = DatePickerFoundationState;
 export default class DatePicker extends BaseComponent<DatePickerProps, DatePickerState> {
     static contextType = ConfigContext;
     static propTypes = {
+        'aria-describedby': PropTypes.string,
+        'aria-errormessage': PropTypes.string,
+        'aria-invalid': PropTypes.bool,
+        'aria-labelledby': PropTypes.string,
+        'aria-required': PropTypes.bool,
         type: PropTypes.oneOf(strings.TYPE_SET),
         size: PropTypes.oneOf(strings.SIZE_SET),
         density: PropTypes.oneOf(strings.DENSITY_SET),
@@ -76,6 +87,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         prefixCls: PropTypes.string,
         prefix: PropTypes.node,
         insetLabel: PropTypes.node,
+        insetLabelId: PropTypes.string,
         zIndex: PropTypes.number,
         position: PropTypes.oneOf(popoverStrings.POSITION_SET),
         getPopupContainer: PropTypes.func,
@@ -206,6 +218,9 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
                     this.clickOutSideHandler = null;
                 }
                 this.clickOutSideHandler = e => {
+                    if (this.adapter.needConfirm()) {
+                        return;
+                    }
                     const triggerEl = this.triggerElRef && this.triggerElRef.current;
                     const panelEl = this.panelRef && this.panelRef.current;
                     const isInTrigger = triggerEl && triggerEl.contains(e.target as Node);
@@ -360,6 +375,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             syncSwitchMonth,
             onPanelChange,
             timeZone,
+            triggerRender
         } = this.props;
         const { value, cachedSelectedValue, motionEnd, rangeInputFocus } = this.state;
 
@@ -405,6 +421,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
                 onPanelChange={onPanelChange}
                 timeZone={timeZone}
                 focusRecordsRef={this.focusRecordsRef}
+                triggerRender={triggerRender}
             />
         );
     }
@@ -447,6 +464,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             disabled,
             showClear,
             insetLabel,
+            insetLabelId,
             placeholder,
             validateStatus,
             inputStyle,
@@ -483,6 +501,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             inputStyle,
             showClear,
             insetLabel,
+            insetLabelId,
             type,
             format,
             multiple,
@@ -637,6 +656,11 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             style,
             className: classnames(className, { [prefixCls]: true }),
             ref: this.setTriggerRef,
+            'aria-invalid': this.props['aria-invalid'],
+            'aria-errormessage': this.props['aria-errormessage'],
+            'aria-labelledby': this.props['aria-labelledby'],
+            'aria-describedby': this.props['aria-describedby'],
+            'aria-required': this.props['aria-required'],
         };
 
         const inner = this.renderInner();

package/datePicker/monthsGrid.tsx

@@ -71,7 +71,8 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
         syncSwitchMonth: PropTypes.bool,
         // Callback function for panel date switching
         onPanelChange: PropTypes.func,
-        focusRecordsRef: PropTypes.object
+        focusRecordsRef: PropTypes.object,
+        triggerRender: PropTypes.func,
     };
 
     static defaultProps = {

package/dist/css/semi.css

@@ -3524,6 +3524,12 @@ body[theme-mode=dark], body .semi-always-dark {
   text-align: right;
   background-color: var(--semi-color-fill-0);
 }
+.semi-datepicker-footer .semi-button:first-of-type {
+  margin-right: 12px;
+}
+.semi-datepicker-footer .semi-button:nth-of-type(2) {
+  margin-right: 8px;
+}
 .semi-datepicker-yam {
   position: absolute;
   top: 0;
@@ -4131,6 +4137,16 @@ body[theme-mode=dark], body .semi-always-dark {
   padding-left: 8px;
   text-align: left;
 }
+.semi-rtl .semi-datepicker-footer .semi-button:first-of-type,
+.semi-portal-rtl .semi-datepicker-footer .semi-button:first-of-type {
+  margin-left: 0;
+  margin-right: 0;
+}
+.semi-rtl .semi-datepicker-footer .semi-button:nth-of-type(2),
+.semi-portal-rtl .semi-datepicker-footer .semi-button:nth-of-type(2) {
+  margin-right: 12px;
+  margin-left: 0;
+}
 .semi-rtl .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main,
 .semi-portal-rtl .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main {
   border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
@@ -4166,12 +4182,20 @@ body[theme-mode=dark], body .semi-always-dark {
   margin-right: 8px;
 }
 .semi-rtl .semi-datepicker-navigation .semi-icon-chevron_left,
-.semi-rtl .semi-datepicker-navigation .semi-icon-chevron_right, .semi-rtl .semi-datepicker-yam .semi-icon-chevron_left,
+.semi-rtl .semi-datepicker-navigation .semi-icon-chevron_right,
+.semi-rtl .semi-datepicker-navigation .semi-icon-double_chevron_left,
+.semi-rtl .semi-datepicker-navigation .semi-icon-double_chevron_right, .semi-rtl .semi-datepicker-yam .semi-icon-chevron_left,
 .semi-rtl .semi-datepicker-yam .semi-icon-chevron_right,
+.semi-rtl .semi-datepicker-yam .semi-icon-double_chevron_left,
+.semi-rtl .semi-datepicker-yam .semi-icon-double_chevron_right,
 .semi-portal-rtl .semi-datepicker-navigation .semi-icon-chevron_left,
 .semi-portal-rtl .semi-datepicker-navigation .semi-icon-chevron_right,
+.semi-portal-rtl .semi-datepicker-navigation .semi-icon-double_chevron_left,
+.semi-portal-rtl .semi-datepicker-navigation .semi-icon-double_chevron_right,
 .semi-portal-rtl .semi-datepicker-yam .semi-icon-chevron_left,
-.semi-portal-rtl .semi-datepicker-yam .semi-icon-chevron_right {
+.semi-portal-rtl .semi-datepicker-yam .semi-icon-chevron_right,
+.semi-portal-rtl .semi-datepicker-yam .semi-icon-double_chevron_left,
+.semi-portal-rtl .semi-datepicker-yam .semi-icon-double_chevron_right {
   transform: scaleX(-1);
 }
 .semi-rtl .semi-datepicker-range-input-prefix,
@@ -13895,7 +13919,13 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-radio .semi-radio-inner-buttonRadio,
 .semi-radio .semi-radio-inner-pureCardRadio {
-  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  opacity: 0;
 }
 .semi-radio-disabled, .semi-radio-disabled:hover {
   cursor: not-allowed;
@@ -15035,6 +15065,7 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-slider-handle-clicked {
   border: solid 1px var(--semi-color-focus-border);
+  cursor: grabbing;
 }
 .semi-slider-track {
   height: 4px;
@@ -16104,12 +16135,10 @@ body[theme-mode=dark], body .semi-always-dark {
   color: var(--semi-color-text-0);
   width: 100%;
 }
-.semi-table-middle .semi-table-thead > .semi-table-row > .semi-table-row-head,
 .semi-table-middle .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
   padding-top: 12px;
   padding-bottom: 12px;
 }
-.semi-table-small .semi-table-thead > .semi-table-row > .semi-table-row-head,
 .semi-table-small .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
   padding-top: 8px;
   padding-bottom: 8px;
@@ -18224,8 +18253,6 @@ body[theme-mode=dark], body .semi-always-dark {
   background-color: inherit;
 }
 .semi-transfer-item .semi-transfer-item-close-icon {
-  width: 12px;
-  height: 12px;
   font-size: 12px;
   cursor: pointer;
   visibility: hidden;