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

package/lib/cjs/utils/keyCode.js

@@ -6,7 +6,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.default = exports.TAB_KEY = exports.ENTER_KEY = void 0;
+exports.default = exports.TAB_KEY = exports.ESC_KEY = exports.ENTER_KEY = void 0;
 
 /**
  * @ignore
@@ -542,5 +542,7 @@ const ENTER_KEY = 'Enter';
 exports.ENTER_KEY = ENTER_KEY;
 const TAB_KEY = 'Tab';
 exports.TAB_KEY = TAB_KEY;
+const ESC_KEY = 'Escape';
+exports.ESC_KEY = ESC_KEY;
 var _default = keyCode;
 exports.default = _default;

package/lib/es/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/es/datePicker/_utils/getDefaultPickerDate.js

@@ -0,0 +1,57 @@
+import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
+import { addMonths } 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) {
+  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, 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, format, undefined, dateFnsLocale);
+      break;
+
+    default:
+      nextDate = addMonths(nowDate, 1);
+      break;
+  }
+
+  return {
+    nowDate: nowDate,
+    nextDate: nextDate
+  };
+}

package/lib/es/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/es/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/es/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/es/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/es/inputNumber/foundation.js

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

package/lib/es/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;
 }

package/lib/es/tooltip/foundation.js

@@ -175,6 +175,42 @@ export default class Tooltip extends BaseFoundation {
       }
     };
 
+    this.handleContainerKeydown = event => {
+      const {
+        guardFocus,
+        closeOnEsc
+      } = this.getProps();
+
+      switch (event && event.key) {
+        case "Escape":
+          closeOnEsc && this._handleEscKeyDown(event);
+          break;
+
+        case "Tab":
+          if (guardFocus) {
+            const container = this._adapter.getContainer();
+
+            const focusableElements = this._adapter.getFocusableElements(container);
+
+            const focusableNum = focusableElements.length;
+
+            if (focusableNum) {
+              // Shift + Tab will move focus backward
+              if (event.shiftKey) {
+                this._handleContainerShiftTabKeyDown(focusableElements, event);
+              } else {
+                this._handleContainerTabKeyDown(focusableElements, event);
+              }
+            }
+          }
+
+          break;
+
+        default:
+          break;
+      }
+    };
+
     this._timer = null;
   }
 
@@ -272,7 +308,12 @@ export default class Tooltip extends BaseFoundation {
   _generateEvent(types) {
     const eventNames = this._adapter.getEventName();
 
-    const triggerEventSet = {};
+    const triggerEventSet = {
+      // bind esc keydown on trigger for a11y
+      [eventNames.keydown]: event => {
+        this._handleTriggerKeydown(event);
+      }
+    };
     let portalEventSet = {};
 
     switch (types) {
@@ -308,6 +349,15 @@ export default class Tooltip extends BaseFoundation {
         triggerEventSet[eventNames.mouseLeave] = () => {
           // console.log(e);
           this.delayHide(); // this.hide('trigger');
+        }; // bind focus to hover trigger for a11y
+
+
+        triggerEventSet[eventNames.focus] = () => {
+          this.delayShow();
+        };
+
+        triggerEventSet[eventNames.blur] = () => {
+          this.delayHide();
         };
 
         portalEventSet = _Object$assign({}, triggerEventSet);
@@ -331,7 +381,7 @@ export default class Tooltip extends BaseFoundation {
 
       case 'custom':
         // when trigger type is 'custom', no need to bind eventHandler
-        // show/hide completely depond on props.visible which change by user
+        // show/hide completely depend on props.visible which change by user
         break;
 
       default:
@@ -357,7 +407,13 @@ export default class Tooltip extends BaseFoundation {
     const nowVisible = this.getState('visible');
 
     if (nowVisible !== isVisible) {
-      this._adapter.togglePortalVisible(isVisible, () => this._adapter.notifyVisibleChange(isVisible));
+      this._adapter.togglePortalVisible(isVisible, () => {
+        if (isVisible) {
+          this._adapter.setInitialFocus();
+        }
+
+        this._adapter.notifyVisibleChange(isVisible);
+      });
     }
   }
 
@@ -860,4 +916,104 @@ export default class Tooltip extends BaseFoundation {
     this._adapter.updateContainerPosition();
   }
 
+  _handleTriggerKeydown(event) {
+    const {
+      closeOnEsc
+    } = this.getProps();
+
+    const container = this._adapter.getContainer();
+
+    const focusableElements = this._adapter.getFocusableElements(container);
+
+    const focusableNum = focusableElements.length;
+
+    switch (event && event.key) {
+      case "Escape":
+        closeOnEsc && this._handleEscKeyDown(event);
+        break;
+
+      case "ArrowUp":
+        focusableNum && this._handleTriggerArrowUpKeydown(focusableElements, event);
+        break;
+
+      case "ArrowDown":
+        focusableNum && this._handleTriggerArrowDownKeydown(focusableElements, event);
+        break;
+
+      default:
+        break;
+    }
+  }
+  /**
+   * 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() {
+    const {
+      trigger,
+      returnFocusOnClose
+    } = this.getProps();
+
+    if (returnFocusOnClose && trigger === 'click') {
+      const triggerNode = this._adapter.getTriggerNode();
+
+      if (triggerNode && 'focus' in triggerNode) {
+        triggerNode.focus();
+      }
+    }
+  }
+
+  _handleEscKeyDown(event) {
+    const {
+      trigger
+    } = this.getProps();
+
+    if (trigger !== 'custom') {
+      this.hide();
+
+      this._focusTrigger();
+    }
+
+    this._adapter.notifyEscKeydown(event);
+  }
+
+  _handleContainerTabKeyDown(focusableElements, event) {
+    const activeElement = this._adapter.getActiveElement();
+
+    const isLastCurrentFocus = focusableElements[focusableElements.length - 1] === activeElement;
+
+    if (isLastCurrentFocus) {
+      focusableElements[0].focus();
+      event.preventDefault(); // prevent browser default tab move behavior
+    }
+  }
+
+  _handleContainerShiftTabKeyDown(focusableElements, event) {
+    const activeElement = this._adapter.getActiveElement();
+
+    const isFirstCurrentFocus = focusableElements[0] === activeElement;
+
+    if (isFirstCurrentFocus) {
+      focusableElements[focusableElements.length - 1].focus();
+      event.preventDefault(); // prevent browser default tab move behavior
+    }
+  }
+
+  _handleTriggerArrowDownKeydown(focusableElements, event) {
+    focusableElements[0].focus();
+    event.preventDefault(); // prevent browser default scroll behavior
+  }
+
+  _handleTriggerArrowUpKeydown(focusableElements, event) {
+    focusableElements[focusableElements.length - 1].focus();
+    event.preventDefault(); // prevent browser default scroll behavior
+  }
+
 }

package/lib/es/utils/isEscPress.d.ts

@@ -0,0 +1,4 @@
+declare function isEscPress<T extends {
+    key: string;
+}>(e: T): boolean;
+export default isEscPress;

package/lib/es/utils/isEscPress.js

@@ -0,0 +1,8 @@
+import _get from "lodash/get";
+import { ESC_KEY } from './keyCode';
+
+function isEscPress(e) {
+  return _get(e, 'key') === ESC_KEY ? true : false;
+}
+
+export default isEscPress;

package/lib/es/utils/keyCode.d.ts

@@ -426,4 +426,5 @@ declare const keyCode: {
 };
 export declare const ENTER_KEY = "Enter";
 export declare const TAB_KEY = "Tab";
+export declare const ESC_KEY = "Escape";
 export default keyCode;

package/lib/es/utils/keyCode.js

@@ -530,4 +530,5 @@ const keyCode = {
 };
 export const ENTER_KEY = 'Enter';
 export const TAB_KEY = 'Tab';
+export const ESC_KEY = 'Escape';
 export default keyCode;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.7.1",
+    "version": "2.8.0-beta.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -8,7 +8,7 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation": "2.7.1",
+        "@douyinfe/semi-animation": "2.8.0-beta.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.9.0",
@@ -24,7 +24,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "d0dbd6f932a74386b429dedbc32ae92d9e0af7b9",
+    "gitHead": "05140034ad843d6a8d3a4a205e71f02b429f78fe",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",