@douyinfe/semi-foundation 2.2.0 → 2.3.0

package/lib/cjs/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/lib/cjs/select/foundation.d.ts

@@ -101,6 +101,8 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
     handleMouseEnter(e: MouseEvent): void;
     handleMouseLeave(e: MouseEvent): void;
     handleClearClick(e: MouseEvent): void;
+    handleKeyPress(e: KeyboardEvent): void;
+    handleClearBtnEnterPress(e: KeyboardEvent): void;
     handleOptionMouseEnter(optionIndex: number): void;
     handleListScroll(e: any): void;
     handleTriggerBlur(e: FocusEvent): void;

package/lib/cjs/select/foundation.js

@@ -1,7 +1,11 @@
 "use strict";
 
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
 _Object$defineProperty(exports, "__esModule", {
@@ -46,12 +50,18 @@ var _isNumber2 = _interopRequireDefault(require("lodash/isNumber"));
 
 var _foundation = _interopRequireDefault(require("../base/foundation"));
 
-var _keyCode = _interopRequireDefault(require("../utils/keyCode"));
+var _keyCode = _interopRequireWildcard(require("../utils/keyCode"));
 
 var _warning = _interopRequireDefault(require("../utils/warning"));
 
 var _isNullOrUndefined = _interopRequireDefault(require("../utils/isNullOrUndefined"));
 
+var _isEnterPress = _interopRequireDefault(require("../utils/isEnterPress"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
 
@@ -536,6 +546,10 @@ class SelectFoundation extends _foundation.default {
 
     const selections = this._adapter.getSelections();
 
+    const {
+      autoClearSearchValue
+    } = this.getProps();
+
     if (selections.has(label)) {
       this._notifyDeselect(value, (0, _assign.default)({
         value,
@@ -567,7 +581,10 @@ class SelectFoundation extends _foundation.default {
       this._notifyChange(selections);
 
       if (this._isFilterable()) {
-        this.clearInput();
+        if (autoClearSearchValue) {
+          this.clearInput();
+        }
+
         this.focusInput();
       }
     } else {
@@ -582,11 +599,15 @@ class SelectFoundation extends _foundation.default {
       } = this.getStates(); // Searchable filtering, when selected, resets Input
 
       if (this._isFilterable()) {
-        this.clearInput();
-        this.focusInput(); // At the same time, the filtering of options is also cleared, in order to show all candidates
+        // 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);
+          const sugInput = '';
+          options = this._filterOption(options, sugInput);
+        }
+
+        this.focusInput();
       }
 
       this.updateOptionsActiveStatus(selections, options);
@@ -860,6 +881,7 @@ class SelectFoundation extends _foundation.default {
         break;
 
       case _keyCode.default.ESC:
+      case _keyCode.default.TAB:
         this.close(event);
         break;
 
@@ -1134,6 +1156,18 @@ class SelectFoundation extends _foundation.default {
     e.stopPropagation();
   }
 
+  handleKeyPress(e) {
+    if (e && e.key === _keyCode.ENTER_KEY) {
+      this.handleClick(e);
+    }
+  }
+
+  handleClearBtnEnterPress(e) {
+    if ((0, _isEnterPress.default)(e)) {
+      this.handleClearClick(e);
+    }
+  }
+
   handleOptionMouseEnter(optionIndex) {
     this._adapter.updateFocusIndex(optionIndex);
   }

package/lib/cjs/sideSheet/sideSheetFoundation.d.ts

@@ -25,6 +25,7 @@ export interface SideSheetProps {
     width?: number | string;
     zIndex?: number;
     children?: any;
+    'aria-label'?: string;
 }
 export interface SideSheetState {
     hidden: boolean;

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

@@ -23,6 +23,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 {
     currentValue: number | number[];
@@ -138,7 +142,7 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
      *
      * @memberof SliderFoundation
      */
-    getScrollParent: (element: HTMLElement) => boolean | Element;
+    getScrollParent: (element: HTMLElement) => Element;
     /**
      * Fixed the event location, beyond the maximum, minimum, left and right, etc. directly modified to the effective location
      *
@@ -184,6 +188,7 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
     onHandleEnter: (pos: SliderState['focusPos']) => void;
     onHandleLeave: () => void;
     onHandleUp: (e: any) => boolean;
+    onFocus: (e: any, handler: 'min' | 'max') => void;
     handleWrapClick: (e: any) => void;
     /**
      * Move the slider to the current click position

package/lib/cjs/slider/foundation.js

@@ -286,17 +286,8 @@ class SliderFoundation extends _foundation.default {
       }
 
       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;
-        }
+        // Find nearest step point 
+        stepValue = Math.round(stepValue / step) * step;
       }
 
       if (range && stepValue !== compareValue) {
@@ -610,7 +601,10 @@ class SliderFoundation extends _foundation.default {
       this._adapter.onHandleUpAfter();
 
       return true;
-    };
+    }; // eslint-disable-next-line @typescript-eslint/no-empty-function
+
+
+    this.onFocus = (e, handler) => {};
 
     this.handleWrapClick = e => {
       const {

package/lib/cjs/slider/slider.css

@@ -51,6 +51,7 @@
 }
 .semi-slider-handle-clicked {
   border: solid 1px var(--semi-color-focus-border);
+  cursor: grabbing;
 }
 .semi-slider-track {
   height: 4px;

package/lib/cjs/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/lib/cjs/table/table.css

@@ -52,12 +52,10 @@
   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;

package/lib/cjs/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/lib/cjs/table/utils.d.ts

@@ -93,3 +93,10 @@ export interface GetAllDisabledRowKeysProps {
     rowKey?: string | number | ((record: Record<string, any>) => string | number);
 }
 export declare function warnIfNoDataIndex(column: Record<string, any>): void;
+/**
+ * Whether is tree table
+ */
+export declare function isTreeTable({ dataSource, childrenRecordName }: {
+    dataSource: Record<string, any>;
+    childrenRecordName?: string;
+}): boolean;

package/lib/cjs/table/utils.js

@@ -41,6 +41,7 @@ exports.isLastLeftFixed = isLastLeftFixed;
 exports.isScrollbarColumn = isScrollbarColumn;
 exports.isSelected = isSelected;
 exports.isSelectionColumn = isSelectionColumn;
+exports.isTreeTable = isTreeTable;
 exports.mergeColumns = mergeColumns;
 exports.mergeQueries = mergeQueries;
 exports.sliceColumnsByLevel = sliceColumnsByLevel;
@@ -614,4 +615,29 @@ function warnIfNoDataIndex(column) {
       logger.warn("The column with sorter or filter must pass the 'dataIndex' prop");
     }
   }
+}
+/**
+ * Whether is tree table
+ */
+
+
+function isTreeTable(_ref2) {
+  let {
+    dataSource,
+    childrenRecordName = 'children'
+  } = _ref2;
+  let flag = false;
+
+  if ((0, _isArray.default)(dataSource)) {
+    for (const data of dataSource) {
+      const children = (0, _get2.default)(data, childrenRecordName);
+
+      if ((0, _isArray.default)(children) && children.length) {
+        flag = true;
+        break;
+      }
+    }
+  }
+
+  return flag;
 }

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

@@ -33,6 +33,10 @@ declare class TagInputFoundation extends BaseFoundation<TagInputAdapter> {
     _handleAddTags(e: TagInputChangeEvent): void;
     handleInputBlur(e: TagInputCursorEvent): void;
     handleInputFocus(e: TagInputCursorEvent): void;
+    /**
+     * A11y: simulate clear button click
+     */
+    handleClearEnterPress(e: TagInputKeyboardEvent): void;
     handleClearBtn(e: TagInputMouseEvent): void;
     handleTagClose(index: number): void;
     handleInputMouseEnter(): void;

package/lib/cjs/tagInput/foundation.js

@@ -40,6 +40,8 @@ var _keyCode = _interopRequireDefault(require("../utils/keyCode"));
 
 var _getSplitedArray = _interopRequireDefault(require("./utils/getSplitedArray"));
 
+var _isEnterPress = _interopRequireDefault(require("../utils/isEnterPress"));
+
 class TagInputFoundation extends _foundation.default {
   constructor(adapter) {
     super((0, _assign.default)({}, adapter));
@@ -185,6 +187,16 @@ class TagInputFoundation extends _foundation.default {
 
     this._adapter.notifyFocus(e);
   }
+  /**
+   * A11y: simulate clear button click
+   */
+
+
+  handleClearEnterPress(e) {
+    if ((0, _isEnterPress.default)(e)) {
+      this.handleClearBtn(e);
+    }
+  }
 
   handleClearBtn(e) {
     const {

package/lib/cjs/tooltip/foundation.js

@@ -96,8 +96,6 @@ class Tooltip extends _foundation.default {
       if (trigger === 'custom') {
         // eslint-disable-next-line
         this._adapter.registerClickOutsideHandler(() => {});
-
-        this._togglePortalVisible(true);
       }
       /**
        * trigger类型是click时，仅当portal被插入显示后，才绑定clickOutsideHandler
@@ -643,6 +641,9 @@ class Tooltip extends _foundation.default {
       innerWidth,
       innerHeight
     } = window;
+    const {
+      spacing
+    } = this.getProps();
 
     if (wrapperRect.width > 0 && wrapperRect.height > 0) {
       // let clientLeft = left + translateX * wrapperRect.width - containerRect.scrollLeft;
@@ -666,10 +667,10 @@ class Tooltip extends _foundation.default {
       const widthIsBigger = wrapperRect.width > triggerRect.width;
       const heightIsBigger = wrapperRect.height > triggerRect.height; // 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;
       const shouldReverseLeftSide = restClientLeft < wrapperRect.width && clientRight > wrapperRect.width;

package/lib/cjs/transfer/transfer.css

@@ -85,8 +85,6 @@
   background-color: inherit;
 }
 .semi-transfer-item .semi-transfer-item-close-icon {
-  width: 12px;
-  height: 12px;
   font-size: 12px;
   cursor: pointer;
   visibility: hidden;

package/lib/cjs/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/lib/cjs/tree/foundation.d.ts

@@ -183,6 +183,7 @@ export interface BasicTreeProps {
     value?: BasicValue;
     virtualize?: Virtualize;
     icon?: any;
+    'aria-label'?: string;
 }
 export interface BasicTreeInnerData {
     inputValue: string;

package/lib/cjs/tree/foundation.js

@@ -651,7 +651,7 @@ class TreeFoundation extends _foundation.default {
 
 
     if (dragNode && eventKey === dragOverNodeKey) {
-      const newPos = (0, _treeUtil.calcDropRelativePosition)(event, treeNode);
+      const newPos = (0, _treeUtil.calcDropRelativePosition)(e, treeNode);
 
       if (dropPosition === newPos) {
         return;

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

@@ -27,7 +27,7 @@ export interface BasicOnChange {
     (node: BasicTreeNodeData[] | BasicTreeNodeData, e: any): void;
     (value: BasicTreeNodeData['value'] | Array<BasicTreeNodeData['value']>, node: BasicTreeNodeData[] | BasicTreeNodeData, e: any): void;
 }
-export interface BasicTreeSelectProps extends Pick<BasicTreeProps, 'virtualize' | 'renderFullLabel' | 'renderLabel' | 'autoExpandParent' | 'className' | 'defaultExpandAll' | 'defaultExpandedKeys' | 'defaultValue' | 'disabled' | 'emptyContent' | 'expandAction' | 'expandedKeys' | 'filterTreeNode' | 'labelEllipsis' | 'leafOnly' | 'multiple' | 'onChangeWithObject' | 'showClear' | 'showFilteredOnly' | 'style' | 'treeData' | 'treeNodeFilterProp' | 'value' | 'onExpand' | 'onSearch' | 'expandAll' | 'disableStrictly'> {
+export interface BasicTreeSelectProps extends Pick<BasicTreeProps, 'virtualize' | 'renderFullLabel' | 'renderLabel' | 'autoExpandParent' | 'className' | 'defaultExpandAll' | 'defaultExpandedKeys' | 'defaultValue' | 'disabled' | 'emptyContent' | 'expandAction' | 'expandedKeys' | 'filterTreeNode' | 'labelEllipsis' | 'leafOnly' | 'multiple' | 'onChangeWithObject' | 'showClear' | 'showFilteredOnly' | 'style' | 'treeData' | 'treeNodeFilterProp' | 'value' | 'onExpand' | 'onSearch' | 'expandAll' | 'disableStrictly' | 'aria-label'> {
     motion?: Motion;
     mouseEnterDelay?: number;
     mouseLeaveDelay?: number;
@@ -128,7 +128,15 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
     open(): void;
     close(e: any): void;
     handleClick(e: any): void;
+    /**
+     * A11y: simulate selection click
+     */
+    handleSelectionEnterPress(e: any): void;
     handleClear(e: any): void;
+    /**
+     * A11y: simulate clear button click
+     */
+    handleClearEnterPress(e: any): void;
     removeTag(eventKey: BasicTreeNodeData['key']): void;
     clearInput(): void;
     handleInputChange(sugInput: string): void;

package/lib/cjs/treeSelect/foundation.js

@@ -54,6 +54,8 @@ var _foundation = _interopRequireDefault(require("../base/foundation"));
 
 var _treeUtil = require("../tree/treeUtil");
 
+var _isEnterPress = _interopRequireDefault(require("../utils/isEnterPress"));
+
 // eslint-disable-next-line max-len
 class TreeSelectFoundation extends _foundation.default {
   constructor(adapter) {
@@ -338,6 +340,16 @@ class TreeSelectFoundation extends _foundation.default {
       this.close(e);
     }
   }
+  /**
+   * A11y: simulate selection click
+   */
+
+
+  handleSelectionEnterPress(e) {
+    if ((0, _isEnterPress.default)(e)) {
+      this.handleClick(e);
+    }
+  }
 
   handleClear(e) {
     const {
@@ -379,6 +391,16 @@ class TreeSelectFoundation extends _foundation.default {
       }
     }
   }
+  /**
+   * A11y: simulate clear button click
+   */
+
+
+  handleClearEnterPress(e) {
+    if ((0, _isEnterPress.default)(e)) {
+      this.handleClear(e);
+    }
+  }
 
   removeTag(eventKey) {
     const {

package/lib/cjs/utils/isEnterPress.d.ts

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

package/lib/cjs/utils/isEnterPress.js

@@ -0,0 +1,22 @@
+"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 = void 0;
+
+var _get2 = _interopRequireDefault(require("lodash/get"));
+
+var _keyCode = require("./keyCode");
+
+function isEnterPress(e) {
+  return (0, _get2.default)(e, 'key') === _keyCode.ENTER_KEY ? true : false;
+}
+
+var _default = isEnterPress;
+exports.default = _default;

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

@@ -424,4 +424,6 @@ declare const keyCode: {
      */
     WIN_IME: number;
 };
+export declare const ENTER_KEY = "Enter";
+export declare const TAB_KEY = "Tab";
 export default keyCode;

package/lib/cjs/utils/keyCode.js

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

package/lib/cjs/utils/uuid.d.ts

@@ -1,3 +1,18 @@
 export default function getUuid(prefix: string): string;
 declare function getUuidv4(): string;
-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'
+ */
+declare function getUuidShort(options?: GetUuidShortOptions): string;
+interface GetUuidShortOptions {
+    prefix?: string;
+    length?: number;
+}
+export { getUuid, getUuidv4, getUuidShort };

package/lib/cjs/utils/uuid.js

@@ -9,6 +9,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 
 exports.getUuid = exports.default = getUuid;
+exports.getUuidShort = getUuidShort;
 exports.getUuidv4 = getUuidv4;
 
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
@@ -26,4 +27,35 @@ function getUuidv4() {
   } catch (err) {
     return getUuid('semi');
   }
+}
+/**
+ * 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() {
+  var _context3;
+
+  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  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 ? (0, _concat.default)(_context3 = "".concat(prefix, "-")).call(_context3, randomId) : randomId;
 }

package/lib/es/breadcrumb/foundation.d.ts

@@ -8,6 +8,10 @@ export default class BreadcrumbFoundation<P = Record<string, any>, S = Record<st
     constructor(adapter: BreadcrumbAdapter<P, S>);
     handleClick(info: BreadcrumbItemInfo, event: any): void;
     handleExpand(clickEvent: any): void;
+    /**
+     * A11y: simulate clear button click
+     */
+    handleExpandEnterPress(keyboardEvent: any): void;
     genRoutes(routes: Array<Route>): ({
         name: never;
         _origin: {

package/lib/es/breadcrumb/foundation.js

@@ -3,6 +3,7 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
 
 /* eslint-disable prefer-const */
 import BaseFoundation from '../base/foundation';
+import isEnterPress from '../utils/isEnterPress';
 export default class BreadcrumbFoundation extends BaseFoundation {
   constructor(adapter) {
     super(_Object$assign({}, adapter));
@@ -15,6 +16,16 @@ export default class BreadcrumbFoundation extends BaseFoundation {
   handleExpand(clickEvent) {
     this._adapter.expandCollapsed(clickEvent);
   }
+  /**
+   * A11y: simulate clear button click
+   */
+
+
+  handleExpandEnterPress(keyboardEvent) {
+    if (isEnterPress(keyboardEvent)) {
+      this.handleExpand(keyboardEvent);
+    }
+  }
 
   genRoutes(routes) {
     return _mapInstanceProperty(routes).call(routes, route => {

package/lib/es/checkbox/checkboxFoundation.d.ts

@@ -34,6 +34,7 @@ declare class CheckboxFoundation<P = Record<string, any>, S = Record<string, any
     notifyChange(checked: boolean, e: any): void;
     handleChange(e: any): void;
     handleChangeInGroup(e: any): void;
+    handleEnterPress(e: any): void;
     setChecked(checked: boolean): void;
     destroy(): void;
 }
@@ -52,5 +53,7 @@ export interface BaseCheckboxProps {
     onMouseEnter?: (e: any) => void;
     onMouseLeave?: (e: any) => void;
     extra?: any;
+    addonId?: string;
+    extraId?: string;
 }
 export default CheckboxFoundation;