@douyinfe/semi-foundation 2.2.0 → 2.3.0

package/modal/modalContentFoundation.ts

@@ -13,6 +13,7 @@ export interface ModalContentProps extends ModalProps {
 
 export interface ModalContentState {
     dialogMouseDown: boolean;
+    prevFocusElement: HTMLElement;
 }
 
 export interface ModalContentAdapter extends DefaultAdapter<ModalContentProps, ModalContentState> {
@@ -22,6 +23,9 @@ export interface ModalContentAdapter extends DefaultAdapter<ModalContentProps, M
     addKeyDownEventListener: () => void;
     removeKeyDownEventListener: () => void;
     getMouseState: () => boolean;
+    modalDialogFocus: () => void;
+    modalDialogBlur: () => void;
+    prevFocusElementReFocus: () => void;
 }
 
 export default class ModalContentFoundation extends BaseFoundation<ModalContentAdapter> {
@@ -32,6 +36,8 @@ export default class ModalContentFoundation extends BaseFoundation<ModalContentA
 
     destroy() {
         this.handleKeyDownEventListenerUnmount();
+        this.modalDialogBlur();
+        this.prevFocusElementReFocus();
     }
 
     handleDialogMouseDown() {
@@ -73,4 +79,16 @@ export default class ModalContentFoundation extends BaseFoundation<ModalContentA
     close(e: any) {
         this._adapter.notifyClose(e);
     }
+
+    modalDialogFocus() {
+        this._adapter.modalDialogFocus();
+    }
+
+    modalDialogBlur() {
+        this._adapter.modalDialogBlur();
+    }
+
+    prevFocusElementReFocus() {
+        this._adapter.prevFocusElementReFocus();
+    }
 }

package/navigation/itemFoundation.ts

@@ -1,5 +1,6 @@
 /* argus-disable unPkgSensitiveInfo */
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+import isEnterPress from '../utils/isEnterPress';
 
 export interface ItemProps {
     text?: any;
@@ -37,6 +38,7 @@ export interface ItemAdapter<P = Record<string, any>, S = Record<string, any>> e
     notifyMouseLeave(e: any): void;
     getIsCollapsed(): boolean;
     getSelected(): boolean;
+    getIsOpen(): boolean;
 }
 
 export default class ItemFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<ItemAdapter<P, S>, P, S> {
@@ -91,4 +93,13 @@ export default class ItemFoundation<P = Record<string, any>, S = Record<string,
         }
         this._adapter.notifyClick({ itemKey, text, domEvent: e });
     }
+
+    /**
+     * A11y: simulate item click
+     */
+    handleKeyPress(e: any) {
+        if (isEnterPress(e)) {
+            this.handleClick(e);
+        }
+    }
 }

package/navigation/subNavFoundation.ts

@@ -1,4 +1,5 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+import isEnterPress from '../utils/isEnterPress';
 
 const addKeys = function addKeys(originKeys: (string | number)[] = [], ...willAddKeys: (string | number)[]) {
     const keySet = new Set(originKeys);
@@ -120,4 +121,15 @@ export default class SubNavFoundation<P = Record<string, any>, S = Record<string
         this._adapter.notifyGlobalOpenChange(cbVal);
         this._adapter.notifyGlobalOnClick(cbVal);
     }
+
+    /**
+     * A11y: simulate sub nav click
+     * @param e 
+     * @param titleRef 
+     */
+    handleKeyPress(e: any, titleRef: any) {
+        if (isEnterPress(e)) {
+            this.handleClick(e, titleRef);
+        }
+    }
 }

package/notification/notificationListFoundation.ts

@@ -4,24 +4,22 @@ import { NoticeInstance, NoticePosition, NoticeProps } from '../notification/not
 import { strings } from './constants';
 
 
-
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface NotificationListProps{
+export interface NotificationListProps {
 
 }
 
-export interface NotificationListState{
+export interface NotificationListState {
     notices: NoticeInstance[];
     removedItems: NoticeInstance[];
 }
 
-export interface NotificationListAdapter extends DefaultAdapter<NotificationListProps, NotificationListState>{
+export interface NotificationListAdapter extends DefaultAdapter<NotificationListProps, NotificationListState> {
     updateNotices: (notices: NoticeInstance[], removedItems?: NoticeInstance[]) => void;
     getNotices: () => NoticeInstance[];
 }
 
 
-
 export interface ConfigProps {
     top?: number | string;
     bottom?: number | string;
@@ -34,8 +32,6 @@ export interface ConfigProps {
 }
 
 
-
-
 export default class NotificationListFoundation extends BaseFoundation<NotificationListAdapter> {
 
     addNotice(opts: NoticeProps) {
@@ -48,7 +44,7 @@ export default class NotificationListFoundation extends BaseFoundation<Notificat
         //         this.removeNotice(opts.id);
         //     }, opts.duration * 1000);
         // }
-        this._adapter.updateNotices([...notices, opts]);
+        this._adapter.updateNotices([opts, ...notices]);
         // return id;
     }
 

package/package.json

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

package/radio/radio.scss

@@ -317,9 +317,16 @@ $inner-width: $width-icon-medium;
         }
     }
 
+    // A11y: arrow keyboard control
     .#{$module}-inner-buttonRadio,
     .#{$module}-inner-pureCardRadio  {
-        display: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: -1;
+        opacity: 0;
     }
 
     &-disabled {

package/select/foundation.ts

@@ -1,11 +1,12 @@
 /* argus-disable unPkgSensitiveInfo */
 /* eslint-disable max-len */
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-import KeyCode from '../utils/keyCode';
 import { isNumber, isString, isEqual, omit } from 'lodash';
+import KeyCode, { ENTER_KEY } from '../utils/keyCode';
 import warning from '../utils/warning';
 import isNullOrUndefined from '../utils/isNullOrUndefined';
 import { BasicOptionProps } from './optionFoundation';
+import isEnterPress from '../utils/isEnterPress';
 
 export interface SelectAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     getTriggerWidth(): number;
@@ -405,7 +406,7 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
     _handleMultipleSelect({ value, label, ...rest }: BasicOptionProps, event: MouseEvent | KeyboardEvent) {
         const maxLimit = this._adapter.getMaxLimit();
         const selections = this._adapter.getSelections();
-
+        const { autoClearSearchValue } = this.getProps();
         if (selections.has(label)) {
             this._notifyDeselect(value, { value, label, ...rest });
             selections.delete(label);
@@ -420,7 +421,9 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
             // Controlled components, directly notified
             this._notifyChange(selections);
             if (this._isFilterable()) {
-                this.clearInput();
+                if (autoClearSearchValue) {
+                    this.clearInput();
+                }
                 this.focusInput();
             }
         } else {
@@ -431,11 +434,14 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
             let { options } = this.getStates();
             // Searchable filtering, when selected, resets Input
             if (this._isFilterable()) {
-                this.clearInput();
+                // When filter active，if autoClearSearchValue is true，reset input after select
+                if (autoClearSearchValue) {
+                    this.clearInput();
+                    // At the same time, the filtering of options is also cleared, in order to show all candidates
+                    const sugInput = '';
+                    options = this._filterOption(options, sugInput);
+                }
                 this.focusInput();
-                // At the same time, the filtering of options is also cleared, in order to show all candidates
-                const sugInput = '';
-                options = this._filterOption(options, sugInput);
             }
             this.updateOptionsActiveStatus(selections, options);
             this._notifyChange(selections);
@@ -650,6 +656,7 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
                 this._handleEnterKeyDown(event);
                 break;
             case KeyCode.ESC:
+            case KeyCode.TAB:
                 this.close(event);
                 break;
             default:
@@ -871,6 +878,18 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
         e.stopPropagation();
     }
 
+    handleKeyPress(e: KeyboardEvent) {
+        if (e && e.key === ENTER_KEY) {
+            this.handleClick(e);
+        }
+    }
+
+    handleClearBtnEnterPress(e: KeyboardEvent) {
+        if (isEnterPress(e)) {
+            this.handleClearClick(e as any);
+        }
+    }
+
     handleOptionMouseEnter(optionIndex: number) {
         this._adapter.updateFocusIndex(optionIndex);
     }

package/sideSheet/sideSheetFoundation.ts

@@ -29,13 +29,14 @@ export interface SideSheetProps {
     width?: number | string;
     zIndex?: number;
     children?: any;
+    'aria-label'?: string;
 }
 
-export interface SideSheetState{
+export interface SideSheetState {
     hidden: boolean;
 }
 
-export interface SideSheetAdapter extends DefaultAdapter<SideSheetProps, SideSheetState>{
+export interface SideSheetAdapter extends DefaultAdapter<SideSheetProps, SideSheetState> {
     disabledBodyScroll: () => void;
     enabledBodyScroll: () => void;
     notifyCancel: (e: any) => void;
@@ -46,9 +47,6 @@ export interface SideSheetAdapter extends DefaultAdapter<SideSheetProps, SideShe
 }
 
 
-
-
-
 export default class SideSheetFoundation extends BaseFoundation<SideSheetAdapter> {
     constructor(adapter: SideSheetAdapter) {
         super({ ...SideSheetFoundation.defaultAdapter, ...adapter });

package/slider/foundation.ts

@@ -31,6 +31,10 @@ export interface SliderProps{
     showBoundary?: boolean;
     railStyle?: Record<string, any>;
     verticalReverse?: boolean;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-valuetext'?: string;
+    getAriaValueText?: (value: number) => string;
 }
 
 export interface SliderState {
@@ -235,7 +239,7 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
 
         const scroll = (node: Element) => regex.test(style(node, 'overflow') + style(node, 'overflow-y') + style(node, 'overflow-x'));
 
-        const scrollParent = (node: Element): Element | boolean => (
+        const scrollParent = (node: Element): Element => (
             !node || node === document.body ? document.body : scroll(node) ? node : scrollParent(node.parentNode as Element)
         );
 
@@ -316,18 +320,8 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
         } else {
             compareValue = currentValue;
         }
-        if (step !== 1) {
-            // Existence step
-            if (stepValue > compareValue && Math.round(stepValue / step) * step >= stepValue) {
-                // Move right
-                stepValue = Math.round(stepValue / step) * step;
-            } else if (stepValue < compareValue && Math.round(stepValue / step) * step <= stepValue) {
-                // Move left
-                stepValue = Math.round(stepValue / step) * step;
-            } else {
-                // Other moves are invalid, click valid
-                stepValue = compareValue;
-            }
+        if (step !== 1) { // Find nearest step point 
+            stepValue = Math.round(stepValue / step) * step;
         }
         if (range && stepValue !== compareValue) {
             if (vertical && verticalReverse) {
@@ -559,6 +553,9 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
         return true;
     };
 
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onFocus = (e:any, handler: 'min'| 'max') => {}
+
     handleWrapClick = (e: any) => {
         const { disabled, isDrag } = this._adapter.getStates();
         if (isDrag || disabled || this._adapter.isEventFromHandle(e)) {

package/slider/slider.scss

@@ -63,6 +63,7 @@ $module: #{$prefix}-slider;
 
     &-handle-clicked {
         border: solid $width-slider_handle_clicked $color-slider_handle-border-focus;
+        cursor: grabbing;
     }
 
     &-track {

package/table/table.scss

@@ -25,7 +25,6 @@ $module: #{$prefix}-table;
     }
 
     &-middle {
-        .#{$module}-thead > .#{$module}-row > .#{$module}-row-head,
         .#{$module}-tbody > .#{$module}-row > .#{$module}-row-cell {
             padding-top: $spacing-table_middle-paddingY;
             padding-bottom: $spacing-table_middle-paddingY;
@@ -33,7 +32,6 @@ $module: #{$prefix}-table;
     }
 
     &-small {
-        .#{$module}-thead > .#{$module}-row > .#{$module}-row-head,
         .#{$module}-tbody > .#{$module}-row > .#{$module}-row-cell {
             padding-top: $spacing-table_small-paddingY;
             padding-bottom: $spacing-table_small-paddingY;

package/table/utils.ts

@@ -484,4 +484,20 @@ export function warnIfNoDataIndex(column: Record<string, any>) {
             logger.warn(`The column with sorter or filter must pass the 'dataIndex' prop`);
         }
     }
+}
+/**
+ * Whether is tree table
+ */
+export function isTreeTable({ dataSource, childrenRecordName = 'children' }: { dataSource: Record<string, any>; childrenRecordName?: string; }) {
+    let flag = false;
+    if (Array.isArray(dataSource)) {
+        for (const data of dataSource) {
+            const children = get(data, childrenRecordName);
+            if (Array.isArray(children) && children.length) {
+                flag = true;
+                break;
+            }
+        }
+    }
+    return flag;
 }

package/tagInput/foundation.ts

@@ -7,6 +7,7 @@ import {
     isUndefined
 } from 'lodash';
 import getSplitedArray from './utils/getSplitedArray';
+import isEnterPress from '../utils/isEnterPress';
 
 export type TagInputChangeEvent = any;
 export type TagInputCursorEvent = any;
@@ -143,6 +144,15 @@ class TagInputFoundation extends BaseFoundation<TagInputAdapter> {
         this._adapter.notifyFocus(e);
     }
 
+    /**
+     * A11y: simulate clear button click
+     */
+    handleClearEnterPress(e: TagInputKeyboardEvent) {
+        if (isEnterPress(e)) {
+            this.handleClearBtn(e);
+        }
+    }
+
     handleClearBtn(e: TagInputMouseEvent) {
         const { inputValue, tagsArray } = this._adapter.getStates();
         if (tagsArray.length > 0) {

package/tooltip/foundation.ts

@@ -270,7 +270,6 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
         if (trigger === 'custom') {
             // eslint-disable-next-line
             this._adapter.registerClickOutsideHandler(() => {});
-            this._togglePortalVisible(true);
         }
 
         /**
@@ -571,6 +570,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
     // place the dom correctly
     adjustPosIfNeed(position: Position | string, style: Record<string, any>, triggerRect: DOMRect, wrapperRect: DOMRect, containerRect: PopupContainerDOMRect) {
         const { innerWidth, innerHeight } = window;
+        const { spacing } = this.getProps();
 
         if (wrapperRect.width > 0 && wrapperRect.height > 0) {
             // let clientLeft = left + translateX * wrapperRect.width - containerRect.scrollLeft;
@@ -600,10 +600,10 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
 
             // The wrapperR ect.top|bottom equivalent cannot be directly used here for comparison, which is easy to cause jitter
 
-            const shouldReverseTop = clientTop < wrapperRect.height && restClientBottom > wrapperRect.height;
-            const shouldReverseLeft = clientLeft < wrapperRect.width && restClientRight > wrapperRect.width;
-            const sholdReverseBottom = restClientBottom < wrapperRect.height && clientTop > wrapperRect.height;
-            const shouldReverseRight = restClientRight < wrapperRect.width && clientLeft > wrapperRect.width;
+            const shouldReverseTop = clientTop < wrapperRect.height + spacing && restClientBottom > wrapperRect.height + spacing;
+            const shouldReverseLeft = clientLeft < wrapperRect.width + spacing && restClientRight > wrapperRect.width + spacing;
+            const sholdReverseBottom = restClientBottom < wrapperRect.height + spacing && clientTop > wrapperRect.height + spacing;
+            const shouldReverseRight = restClientRight < wrapperRect.width + spacing && clientLeft > wrapperRect.width + spacing;
 
             const shouldReverseTopSide = restClientTop < wrapperRect.height && clientBottom > wrapperRect.height;
             const shouldReverseBottomSide = clientBottom < wrapperRect.height && restClientTop > wrapperRect.height;

package/transfer/transfer.scss

@@ -93,8 +93,6 @@ $module: #{$prefix}-transfer;
         }
 
         .#{$module}-item-close-icon {
-            width: $width-transfer_item_close-icon;
-            height: $width-transfer_item_close-icon;
             font-size: $width-transfer_item_close-icon;
             cursor: pointer;
             visibility: hidden;

package/tree/foundation.ts

@@ -233,6 +233,7 @@ export interface BasicTreeProps {
     value?: BasicValue;
     virtualize?: Virtualize;
     icon?: any;
+    'aria-label'?: string;
 }
 
 /* Data maintained internally. At the React framework level, corresponding to state */
@@ -783,7 +784,7 @@ export default class TreeFoundation extends BaseFoundation<TreeAdapter, BasicTre
 
         // Update the drag position
         if (dragNode && eventKey === dragOverNodeKey) {
-            const newPos = calcDropRelativePosition(event, treeNode);
+            const newPos = calcDropRelativePosition(e, treeNode);
             if (dropPosition === newPos) {
                 return;
             }

package/treeSelect/foundation.ts

@@ -23,6 +23,7 @@ import {
     BasicExpandedOtherProps
 } from '../tree/foundation';
 import { Motion } from '../utils/type';
+import isEnterPress from '../utils/isEnterPress';
 
 /* Here ValidateStatus is the same as ValidateStatus in baseComponent */
 export type ValidateStatus = 'error' | 'warning' | 'default';
@@ -93,6 +94,7 @@ export interface BasicTreeSelectProps extends Pick<BasicTreeProps,
 | 'onSearch'
 | 'expandAll'
 | 'disableStrictly'
+| 'aria-label'
 > {
     motion?: Motion;
     mouseEnterDelay?: number;
@@ -417,6 +419,15 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         }
     }
 
+    /**
+     * A11y: simulate selection click
+     */
+    handleSelectionEnterPress(e: any) {
+        if (isEnterPress(e)) {
+            this.handleClick(e);
+        }
+    }
+
     handleClear(e: any) {
         const { searchPosition, filterTreeNode } = this.getProps();
         const { inputValue, selectedKeys } = this.getStates();
@@ -445,6 +456,15 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         }
     }
 
+    /**
+     * A11y: simulate clear button click
+     */
+    handleClearEnterPress(e: any) {
+        if (isEnterPress(e)) {
+            this.handleClear(e);
+        }
+    }
+
     removeTag(eventKey: BasicTreeNodeData['key']) {
         const { disableStrictly } = this.getProps();
         const { keyEntities, disabledKeys } = this.getStates();

package/utils/isEnterPress.ts

@@ -0,0 +1,8 @@
+import { get } from 'lodash';
+import { ENTER_KEY } from './keyCode';
+
+function isEnterPress<T extends { key: string }>(e: T) {
+    return get(e, 'key') === ENTER_KEY ? true : false;
+}
+
+export default isEnterPress;

package/utils/keyCode.ts

@@ -426,4 +426,7 @@ const keyCode = {
     WIN_IME: 229,
 };
 
+export const ENTER_KEY = 'Enter';
+export const TAB_KEY = 'Tab';
+
 export default keyCode;

package/utils/uuid.ts

@@ -13,4 +13,32 @@ function getUuidv4() {
     }
 }
 
-export { getUuid, getUuidv4 };
+/**
+ * Get a random id with prefix, it not strictly guarantee id uniqueness
+ * 
+ * Note: the return value of getUuid is too long, we need a short one
+ * 
+ * @example
+ * getUuidShort({ prefix: 'semi' }) => 'semi-46dinzc'
+ * getUuidShort({ prefix: '' }) => '0eer2i0'
+ * getUuidShort({ prefix: 'semi', length: 4 }) => 'semi-8jts'
+ */
+function getUuidShort(options: GetUuidShortOptions = {}) {
+    const { prefix = '', length = 7 } = options;
+    const characters = '0123456789abcdefghijklmnopqrstuvwxyz';
+    const total = characters.length;
+    let randomId = '';
+    for (let i = 0; i < length; i++) {
+        const random = Math.floor(Math.random() * total);
+        randomId += characters.charAt(random);
+    }
+
+    return prefix ? `${prefix}-${randomId}` : randomId;
+}
+
+interface GetUuidShortOptions {
+    prefix?: string;
+    length?: number;
+}
+
+export { getUuid, getUuidv4, getUuidShort };