@douyinfe/semi-foundation 2.7.0-beta.0 → 2.8.0-beta.0

package/button/button.scss

@@ -24,8 +24,16 @@ $module: #{$prefix}-button;
     vertical-align: middle;
     white-space: nowrap;
 
-    &:focus {
-        outline: $width-button-outline solid $color-button_primary-outline-focus;
+    // the specificity of `.#{$module}:focus-visible`  may lower than `reset.css` default `focus-visible` style
+    // so we add a class at the same level
+    &.#{$module}-primary,
+    &.#{$module}-secondary,
+    &.#{$module}-tertiary,
+    &.#{$module}-warning,
+    &.#{$module}-danger {
+        &:focus-visible {
+            outline: $width-button-outline solid $color-button_primary-outline-focus;
+        }
     }
 
     &-danger {
@@ -41,8 +49,8 @@ $module: #{$prefix}-button;
         &.#{$module}-borderless {
             color: $color-button_danger-bg-default;
         }
-        &:not(.#{$module}-borderless):not(.#{$module}-light):focus {
-            outline-color: $color-button_danger-outline-focus;
+        &:not(.#{$module}-borderless):not(.#{$module}-light):focus-visible {
+            outline: $width-button-outline solid $color-button_danger-outline-focus;
         }
     }
     &-warning {
@@ -58,8 +66,8 @@ $module: #{$prefix}-button;
         &.#{$module}-borderless {
             color: $color-button_warning-bg-default;
         }
-        &:not(.#{$module}-borderless):not(.#{$module}-light):focus {
-            outline-color: $color-button_warning-outline-focus;
+        &:not(.#{$module}-borderless):not(.#{$module}-light):focus-visible {
+            outline: $width-button-outline solid $color-button_warning-outline-focus;
         }
     }
     &-tertiary {

package/datePicker/_utils/getDefaultPickerDate.ts

@@ -0,0 +1,54 @@
+import { addMonths, Locale as dateFnsLocale } from 'date-fns';
+import isValidDate from './isValidDate';
+import { compatiableParse } from './parser';
+import isTimestamp from './isTimestamp';
+
+/**
+ * get left panel picker date and right panel picker date
+ */
+export default function getDefaultPickerDate(options: GetDefaultPickerValueDateOptions) {
+    const { defaultPickerValue, format, dateFnsLocale } = options;
+    let nowDate = Array.isArray(defaultPickerValue) ? defaultPickerValue[0] : defaultPickerValue;
+    let nextDate = Array.isArray(defaultPickerValue) ? defaultPickerValue[1] : undefined;
+
+    switch (true) {
+        case isValidDate(nowDate):
+            break;
+        case isTimestamp(nowDate):
+            nowDate = new Date(nowDate);
+            break;
+        case typeof nowDate === 'string':
+            nowDate = compatiableParse(nowDate as string, format, undefined, dateFnsLocale);
+            break;
+        default:
+            nowDate = new Date();
+            break;
+    }
+
+    switch (true) {
+        case isValidDate(nextDate):
+            break;
+        case isTimestamp(nextDate):
+            nextDate = new Date(nextDate);
+            break;
+        case typeof nextDate === 'string':
+            nextDate = compatiableParse(nextDate as string, format, undefined, dateFnsLocale);
+            break;
+        default:
+            nextDate = addMonths(nowDate as Date, 1);
+            break;
+    }
+
+    return {
+        nowDate: nowDate as Date,
+        nextDate: nextDate as Date,
+    };
+}
+
+type BaseValueType = string | number | Date;
+
+interface GetDefaultPickerValueDateOptions {
+    defaultPickerValue?: BaseValueType | BaseValueType[];
+    format: string;
+    dateFnsLocale: dateFnsLocale;
+}

package/datePicker/datePicker.scss

@@ -46,7 +46,7 @@ $module: #{$prefix}-datepicker;
             min-height: $height-datepicker_dateType_yamShowing_min;
         }
 
-        &[x-insetInput=true] {
+        &[x-insetinput=true] {
             .#{$module}-month-grid-left,
             .#{$module}-month-grid-right {
                 &[x-open-type=year] {
@@ -928,7 +928,7 @@ $module: #{$prefix}-datepicker;
             }
         }
 
-        &[x-insetInput=true] {
+        &[x-insetinput=true] {
             .#{$module}-month-grid-left,
             .#{$module}-month-grid-right {
                 &[x-open-type=year] {

package/form/form.scss

@@ -91,18 +91,18 @@ $rating: #{$prefix}-rating;
         }
 
         &-with-extra {
-            .#{$field}-label-text,
-            .#{$field}-label-extra {
+            .#{$field}-label-text {
                 display: inline-block;
             }
             .#{$field}-label-extra {
+                display: flex;
+                align-items: center;
                 margin-left: $spacing-form_label_extra-marginLeft;
             }
         }
 
         &-required {
             .#{$field}-label-text {
-
                 &::after {
                     content: "*";
                     margin-left: $spacing-form_label_required-marginLeft;
@@ -156,6 +156,11 @@ $rating: #{$prefix}-rating;
             padding-top: $spacing-form_label_posTop-paddingTop;
             padding-bottom: $spacing-form_label_posTop-paddingBottom;
         }
+        .#{$field}-label-with-extra {
+            display: flex;
+            align-items: center;
+        }
+
     }
 
     &[x-label-pos="left"] {
@@ -168,7 +173,10 @@ $rating: #{$prefix}-rating;
             padding-top: $spacing-form_label-paddingTop;
             padding-bottom: $spacing-form_label-paddingTop;
         }
-
+        .#{$field}-label-with-extra {
+            display: flex;
+            align-items: center;
+        }
         .#{$checkboxGroup},
         .#{$radioGroup} {
             padding-top: $spacing-form_label-paddingTop;

package/inputNumber/foundation.ts

@@ -432,7 +432,7 @@ class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {
 
     _adjustPrec(num: string | number) {
         const precision = this.getProp('precision');
-        if (typeof precision === 'number') {
+        if (typeof precision === 'number' && num !== '') {
             num = Number(num).toFixed(precision);
         }
         return toString(num);

package/lib/cjs/button/button.css

@@ -44,7 +44,7 @@
   vertical-align: middle;
   white-space: nowrap;
 }
-.semi-button:focus {
+.semi-button.semi-button-primary:focus-visible, .semi-button.semi-button-secondary:focus-visible, .semi-button.semi-button-tertiary:focus-visible, .semi-button.semi-button-warning:focus-visible, .semi-button.semi-button-danger:focus-visible {
   outline: 2px solid var(--semi-color-primary-light-active);
 }
 .semi-button-danger {
@@ -60,8 +60,8 @@
 .semi-button-danger.semi-button-light, .semi-button-danger.semi-button-borderless {
   color: var(--semi-color-danger);
 }
-.semi-button-danger:not(.semi-button-borderless):not(.semi-button-light):focus {
-  outline-color: var(--semi-color-danger-light-active);
+.semi-button-danger:not(.semi-button-borderless):not(.semi-button-light):focus-visible {
+  outline: 2px solid var(--semi-color-danger-light-active);
 }
 .semi-button-warning {
   background-color: var(--semi-color-warning);
@@ -76,8 +76,8 @@
 .semi-button-warning.semi-button-light, .semi-button-warning.semi-button-borderless {
   color: var(--semi-color-warning);
 }
-.semi-button-warning:not(.semi-button-borderless):not(.semi-button-light):focus {
-  outline-color: var(--semi-color-warning-light-active);
+.semi-button-warning:not(.semi-button-borderless):not(.semi-button-light):focus-visible {
+  outline: 2px solid var(--semi-color-warning-light-active);
 }
 .semi-button-tertiary {
   background-color: var(--semi-color-tertiary);

package/lib/cjs/button/button.scss

@@ -24,8 +24,16 @@ $module: #{$prefix}-button;
     vertical-align: middle;
     white-space: nowrap;
 
-    &:focus {
-        outline: $width-button-outline solid $color-button_primary-outline-focus;
+    // the specificity of `.#{$module}:focus-visible`  may lower than `reset.css` default `focus-visible` style
+    // so we add a class at the same level
+    &.#{$module}-primary,
+    &.#{$module}-secondary,
+    &.#{$module}-tertiary,
+    &.#{$module}-warning,
+    &.#{$module}-danger {
+        &:focus-visible {
+            outline: $width-button-outline solid $color-button_primary-outline-focus;
+        }
     }
 
     &-danger {
@@ -41,8 +49,8 @@ $module: #{$prefix}-button;
         &.#{$module}-borderless {
             color: $color-button_danger-bg-default;
         }
-        &:not(.#{$module}-borderless):not(.#{$module}-light):focus {
-            outline-color: $color-button_danger-outline-focus;
+        &:not(.#{$module}-borderless):not(.#{$module}-light):focus-visible {
+            outline: $width-button-outline solid $color-button_danger-outline-focus;
         }
     }
     &-warning {
@@ -58,8 +66,8 @@ $module: #{$prefix}-button;
         &.#{$module}-borderless {
             color: $color-button_warning-bg-default;
         }
-        &:not(.#{$module}-borderless):not(.#{$module}-light):focus {
-            outline-color: $color-button_warning-outline-focus;
+        &:not(.#{$module}-borderless):not(.#{$module}-light):focus-visible {
+            outline: $width-button-outline solid $color-button_warning-outline-focus;
         }
     }
     &-tertiary {

package/lib/cjs/datePicker/_utils/getDefaultPickerDate.d.ts

@@ -0,0 +1,15 @@
+import { Locale as dateFnsLocale } from 'date-fns';
+/**
+ * get left panel picker date and right panel picker date
+ */
+export default function getDefaultPickerDate(options: GetDefaultPickerValueDateOptions): {
+    nowDate: Date;
+    nextDate: Date;
+};
+declare type BaseValueType = string | number | Date;
+interface GetDefaultPickerValueDateOptions {
+    defaultPickerValue?: BaseValueType | BaseValueType[];
+    format: string;
+    dateFnsLocale: dateFnsLocale;
+}
+export {};

package/lib/cjs/datePicker/_utils/getDefaultPickerDate.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = getDefaultPickerDate;
+
+var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
+
+var _dateFns = require("date-fns");
+
+var _isValidDate = _interopRequireDefault(require("./isValidDate"));
+
+var _parser = require("./parser");
+
+var _isTimestamp = _interopRequireDefault(require("./isTimestamp"));
+
+/**
+ * get left panel picker date and right panel picker date
+ */
+function getDefaultPickerDate(options) {
+  const {
+    defaultPickerValue,
+    format,
+    dateFnsLocale
+  } = options;
+  let nowDate = (0, _isArray.default)(defaultPickerValue) ? defaultPickerValue[0] : defaultPickerValue;
+  let nextDate = (0, _isArray.default)(defaultPickerValue) ? defaultPickerValue[1] : undefined;
+
+  switch (true) {
+    case (0, _isValidDate.default)(nowDate):
+      break;
+
+    case (0, _isTimestamp.default)(nowDate):
+      nowDate = new Date(nowDate);
+      break;
+
+    case typeof nowDate === 'string':
+      nowDate = (0, _parser.compatiableParse)(nowDate, format, undefined, dateFnsLocale);
+      break;
+
+    default:
+      nowDate = new Date();
+      break;
+  }
+
+  switch (true) {
+    case (0, _isValidDate.default)(nextDate):
+      break;
+
+    case (0, _isTimestamp.default)(nextDate):
+      nextDate = new Date(nextDate);
+      break;
+
+    case typeof nextDate === 'string':
+      nextDate = (0, _parser.compatiableParse)(nextDate, format, undefined, dateFnsLocale);
+      break;
+
+    default:
+      nextDate = (0, _dateFns.addMonths)(nowDate, 1);
+      break;
+  }
+
+  return {
+    nowDate: nowDate,
+    nextDate: nextDate
+  };
+}

package/lib/cjs/datePicker/datePicker.css

@@ -30,22 +30,22 @@
 .semi-datepicker-month-grid[x-type=date] .semi-datepicker-yam-showing {
   min-height: 325px;
 }
-.semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-month-grid-left[x-open-type=year],
-.semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-month-grid-right[x-open-type=year] {
+.semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-left[x-open-type=year],
+.semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-right[x-open-type=year] {
   min-height: 312px;
 }
-.semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-month-grid-left[x-open-type=time],
-.semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-month-grid-right[x-open-type=time] {
+.semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-left[x-open-type=time],
+.semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-right[x-open-type=time] {
   min-height: 314px;
 }
-.semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-navigation {
+.semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-navigation {
   padding-top: 8px;
   padding-bottom: 8px;
 }
-.semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-tpk {
+.semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-tpk {
   min-height: 100%;
 }
-.semi-datepicker-month-grid[x-insetInput=true][x-type=dateTime] .semi-datepicker-yam, .semi-datepicker-month-grid[x-insetInput=true][x-type=dateTimeRange] .semi-datepicker-yam {
+.semi-datepicker-month-grid[x-insetinput=true][x-type=dateTime] .semi-datepicker-yam, .semi-datepicker-month-grid[x-insetinput=true][x-type=dateTimeRange] .semi-datepicker-yam {
   height: 100%;
 }
 .semi-datepicker-month-grid .semi-datepicker-yearmonth-header {
@@ -620,21 +620,21 @@
 .semi-datepicker-compact .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=left] .semi-datepicker-weeks, .semi-datepicker-compact .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=right] .semi-datepicker-weeks {
   min-height: 168px;
 }
-.semi-datepicker-compact .semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-month-grid-left[x-open-type=year],
-.semi-datepicker-compact .semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-month-grid-right[x-open-type=year] {
+.semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-left[x-open-type=year],
+.semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-right[x-open-type=year] {
   min-height: 236px;
 }
-.semi-datepicker-compact .semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-month-grid-left[x-open-type=time],
-.semi-datepicker-compact .semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-month-grid-right[x-open-type=time] {
+.semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-left[x-open-type=time],
+.semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-right[x-open-type=time] {
   min-height: 236px;
 }
-.semi-datepicker-compact .semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-yam-showing {
+.semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-yam-showing {
   min-height: 236px;
 }
-.semi-datepicker-compact .semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-tpk {
+.semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-tpk {
   min-height: 100%;
 }
-.semi-datepicker-compact .semi-datepicker-month-grid[x-insetInput=true][x-type=dateTime] .semi-datepicker-yam, .semi-datepicker-compact .semi-datepicker-month-grid[x-insetInput=true][x-type=dateTimeRange] .semi-datepicker-yam {
+.semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true][x-type=dateTime] .semi-datepicker-yam, .semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true][x-type=dateTimeRange] .semi-datepicker-yam {
   height: 100%;
 }
 .semi-datepicker-compact.semi-datepicker-panel-yam .semi-scrolllist {

package/lib/cjs/datePicker/datePicker.scss

@@ -46,7 +46,7 @@ $module: #{$prefix}-datepicker;
             min-height: $height-datepicker_dateType_yamShowing_min;
         }
 
-        &[x-insetInput=true] {
+        &[x-insetinput=true] {
             .#{$module}-month-grid-left,
             .#{$module}-month-grid-right {
                 &[x-open-type=year] {
@@ -928,7 +928,7 @@ $module: #{$prefix}-datepicker;
             }
         }
 
-        &[x-insetInput=true] {
+        &[x-insetinput=true] {
             .#{$module}-month-grid-left,
             .#{$module}-month-grid-right {
                 &[x-open-type=year] {

package/lib/cjs/form/form.css

@@ -52,11 +52,12 @@
 .semi-form-field-label-disabled {
   color: var(--semi-color-disabled-text);
 }
-.semi-form-field-label-with-extra .semi-form-field-label-text,
-.semi-form-field-label-with-extra .semi-form-field-label-extra {
+.semi-form-field-label-with-extra .semi-form-field-label-text {
   display: inline-block;
 }
 .semi-form-field-label-with-extra .semi-form-field-label-extra {
+  display: flex;
+  align-items: center;
   margin-left: 4px;
 }
 .semi-form-field-label-required .semi-form-field-label-text::after {
@@ -97,6 +98,10 @@
   padding-top: 4px;
   padding-bottom: 4px;
 }
+.semi-form-field[x-label-pos=top] .semi-form-field-label-with-extra {
+  display: flex;
+  align-items: center;
+}
 .semi-form-field[x-label-pos=left] {
   display: flex;
 }
@@ -106,6 +111,10 @@
   padding-top: 6px;
   padding-bottom: 6px;
 }
+.semi-form-field[x-label-pos=left] .semi-form-field-label-with-extra {
+  display: flex;
+  align-items: center;
+}
 .semi-form-field[x-label-pos=left] .semi-checkboxGroup,
 .semi-form-field[x-label-pos=left] .semi-radioGroup {
   padding-top: 6px;

package/lib/cjs/form/form.scss

@@ -91,18 +91,18 @@ $rating: #{$prefix}-rating;
         }
 
         &-with-extra {
-            .#{$field}-label-text,
-            .#{$field}-label-extra {
+            .#{$field}-label-text {
                 display: inline-block;
             }
             .#{$field}-label-extra {
+                display: flex;
+                align-items: center;
                 margin-left: $spacing-form_label_extra-marginLeft;
             }
         }
 
         &-required {
             .#{$field}-label-text {
-
                 &::after {
                     content: "*";
                     margin-left: $spacing-form_label_required-marginLeft;
@@ -156,6 +156,11 @@ $rating: #{$prefix}-rating;
             padding-top: $spacing-form_label_posTop-paddingTop;
             padding-bottom: $spacing-form_label_posTop-paddingBottom;
         }
+        .#{$field}-label-with-extra {
+            display: flex;
+            align-items: center;
+        }
+
     }
 
     &[x-label-pos="left"] {
@@ -168,7 +173,10 @@ $rating: #{$prefix}-rating;
             padding-top: $spacing-form_label-paddingTop;
             padding-bottom: $spacing-form_label-paddingTop;
         }
-
+        .#{$field}-label-with-extra {
+            display: flex;
+            align-items: center;
+        }
         .#{$checkboxGroup},
         .#{$radioGroup} {
             padding-top: $spacing-form_label-paddingTop;

package/lib/cjs/inputNumber/foundation.js

@@ -489,7 +489,7 @@ class InputNumberFoundation extends _foundation.default {
   _adjustPrec(num) {
     const precision = this.getProp('precision');
 
-    if (typeof precision === 'number') {
+    if (typeof precision === 'number' && num !== '') {
       num = Number(num).toFixed(precision);
     }
 

package/lib/cjs/tooltip/foundation.d.ts

@@ -25,6 +25,7 @@ export interface TooltipAdapter<P = Record<string, any>, S = Record<string, any>
         click: string;
         focus: string;
         blur: string;
+        keydown: string;
     };
     registerTriggerEvent(...args: any[]): void;
     getTriggerBounding(...args: any[]): DOMRect;
@@ -40,6 +41,12 @@ export interface TooltipAdapter<P = Record<string, any>, S = Record<string, any>
     updateContainerPosition(): void;
     updatePlacementAttr(placement: Position): void;
     getContainerPosition(): string;
+    getFocusableElements(node: any): any[];
+    getActiveElement(): any;
+    getContainer(): any;
+    setInitialFocus(): void;
+    notifyEscKeydown(event: any): void;
+    getTriggerNode(): any;
 }
 export declare type Position = ArrayElement<typeof strings.POSITION_SET>;
 export interface PopupContainerDOMRect extends DOMRectLikeType {
@@ -63,7 +70,9 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
     _reversePos(position?: string, isVertical?: boolean): string;
     clearDelayTimer(): void;
     _generateEvent(types: ArrayElement<typeof strings.TRIGGER_SET>): {
-        triggerEventSet: {};
+        triggerEventSet: {
+            [x: string]: (event: any) => void;
+        };
         portalEventSet: {};
     };
     onResize: () => void;
@@ -96,4 +105,21 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
     _bindScrollEvent(): void;
     _unBindScrollEvent(): void;
     _initContainerPosition(): void;
+    handleContainerKeydown: (event: any) => void;
+    _handleTriggerKeydown(event: any): void;
+    /**
+     * focus trigger
+     *
+     * when trigger is 'focus' or 'hover', onFocus is bind to show popup
+     * if we focus trigger, popup will show again
+     *
+     * 如果 trigger 是 focus 或者 hover，则它绑定了 onFocus，这里我们如果重新 focus 的话，popup 会再次打开
+     * 因此 returnFocusOnClose 只支持 click trigger
+     */
+    _focusTrigger(): void;
+    _handleEscKeyDown(event: any): void;
+    _handleContainerTabKeyDown(focusableElements: any[], event: any): void;
+    _handleContainerShiftTabKeyDown(focusableElements: any[], event: any): void;
+    _handleTriggerArrowDownKeydown(focusableElements: any[], event: any): void;
+    _handleTriggerArrowUpKeydown(focusableElements: any[], event: any): void;
 }