@douyinfe/semi-foundation 2.14.0 → 2.15.0-beta.0

package/cascader/cascader.scss

@@ -175,6 +175,17 @@ $module: #{$prefix}-cascader;
                 height: $height-cascader_selection_tagInput_input_large;
             }
         }
+
+        &-text {
+
+            &-inactive {
+                color: $color-cascader_selection_text_inactive;
+            }
+
+            &-hide {
+                display: none;
+            }
+        }
     }
 
     &-arrow,
@@ -294,8 +305,17 @@ $module: #{$prefix}-cascader;
     .#{$module}-selection {
         .#{$module}-search-wrapper {
             width: 100%;
+            height: $height-cascader_selection_wrapper;
+            display: flex;
+            align-items: center;
+            position: relative;
 
             .#{$prefix}-input-wrapper {
+                position: absolute;
+                top: 0;
+                left: 0;
+                border: none;
+                background-color: transparent;
                 height: 100%;
                 width: 100%;
                 border: $color-cascader_input-border-default;

package/cascader/foundation.ts

@@ -145,6 +145,7 @@ export interface BasicCascaderProps {
     disableStrictly?: boolean;
     leafOnly?: boolean;
     enableLeafClick?: boolean;
+    preventScroll?: boolean;
     onClear?: () => void;
     triggerRender?: (props: BasicTriggerRenderProps) => any;
     onListScroll?: (e: any, panel: BasicScrollPanelProps) => void;
@@ -183,6 +184,7 @@ export interface BasicCascaderInnerData {
     isFocus?: boolean;
     isInput?: boolean;
     disabledKeys?: Set<string>;
+    showInput?: boolean;
 }
 
 export interface CascaderAdapter extends DefaultAdapter<BasicCascaderProps, BasicCascaderInnerData> {
@@ -208,6 +210,8 @@ export interface CascaderAdapter extends DefaultAdapter<BasicCascaderProps, Basi
     notifyOnLoad: (newLoadedKeys: Set<string>, data: BasicCascaderData) => void;
     notifyListScroll: (e: any, panel: BasicScrollPanelProps) => void;
     notifyOnExceed: (data: BasicEntity[]) => void;
+    toggleInputShow: (show: boolean, cb: () => void) => void;
+    updateFocusState: (focus: boolean) => void,
 }
 
 // eslint-disable-next-line max-len
@@ -484,9 +488,11 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
 
     open() {
         const filterable = this._isFilterable();
+        const { multiple } = this.getProps();
         this._adapter.openMenu();
         if (filterable) {
             this._clearInput();
+            !multiple && this.toggle2SearchInput(true);
         }
         if (this._isControlledComponent()) {
             this.reCalcActiveKeys();
@@ -524,10 +530,25 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
                 inputValue = this.renderDisplayText([...selectedKeys][0]);
             }
             this._adapter.updateStates({ inputValue });
+            !multiple && this.toggle2SearchInput(false);
+            !multiple && this._adapter.updateFocusState(false);
         }
         this._notifyBlur(e);
     }
 
+    toggle2SearchInput(isShow: boolean) {
+        if (isShow) {
+            this._adapter.toggleInputShow(isShow, () => this.focusInput());
+        } else {
+            this._adapter.toggleInputShow(isShow, () => undefined);
+        }
+    }
+
+    focusInput() {
+        this._adapter.focusInput();
+        this._adapter.updateFocusState(true);
+    }
+
     getMergedMotion = () => {
         const { motion } = this.getProps();
         const { isSearching } = this.getStates();

package/cascader/variables.scss

@@ -54,6 +54,7 @@ $spacing-cascader_clearBtn-marginRight: 12px; // 级联选择触发器清空按
 
 $color-cascader_selection_n-text-default: var(--semi-color-text-0); // 超出 maxTagCount 后，+n 的文字默认颜色
 $color-cascader_selection_n-text-disabled: var(--semi-color-disabled-text); // 超出 maxTagCount 后，+n 的文字disabled颜色
+$color-cascader_selection_text_inactive: var(--semi-color-text-2); // 级联选择单选inpu输入框和text并存时，text颜色
 $color-cascader_selection-text-default: var(--semi-color-text-0); // 级联选择选中项文字颜色
 $color-cascader_placeholder-text-default: var(--semi-color-text-2); // 级联选择未选中项文字颜色
 $color-cascader-icon-default: var(--semi-color-text-2); // 级联选择图标颜色 - 默认
@@ -94,6 +95,7 @@ $height-cascader_option_list: 180px; // 级联选择菜单高度
 $height-cascader_selection_tagInput_input_small: 22px;
 $height-cascader_selection_tagInput_input_default: 30px;
 $height-cascader_selection_tagInput_input_large: 38px;
+$height-cascader_selection_wrapper: 30px;
 
 $spacing-cascader_text-marginX: $spacing-base-tight; // 级联选择 prefix/suffix 文字水平内间距
 $spacing-cascader_icon-marginX: $spacing-tight; // 级联选择 prefix/suffix 图标水平内间距

package/checkbox/checkboxFoundation.ts

@@ -170,6 +170,7 @@ export interface BaseCheckboxProps {
     extra?: any;
     addonId?: string;
     extraId?: string;
+    preventScroll?: boolean;
 }
 
 export default CheckboxFoundation;

package/datePicker/foundation.ts

@@ -162,6 +162,7 @@ export interface DatePickerFoundationProps extends ElementProps, RenderProps, Ev
     localeCode?: string;
     rangeSeparator?: string;
     insetInput?: boolean;
+    preventScroll?: boolean;
 }
 
 export interface DatePickerFoundationState {

package/dropdown/dropdown.scss

@@ -50,6 +50,10 @@ $module: #{$prefix}-dropdown;
         &:not(.#{$module}-item-active):active {
             background-color: $color-dropdown_item-bg-active;
         }
+        &:focus-visible {
+            background-color: $color-dropdown_item-bg-hover;
+            outline: 0;
+        }
         &-icon {
             display: inline-flex;
             align-items: center;

package/dropdown/foundation.ts

@@ -1,5 +1,5 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-
+import { handlePrevent, setFocusToFirstItem, setFocusToLastItem } from '../utils/a11y';
 
 export interface DropdownAdapter extends Partial<DefaultAdapter> {
     setPopVisible(visible: boolean): void;
@@ -11,4 +11,41 @@ export default class DropdownFoundation extends BaseFoundation<DropdownAdapter>
         this._adapter.setPopVisible(visible);
         this._adapter.notifyVisibleChange(visible);
     }
+
+    getMenuItemNodes(target: any): HTMLElement[] {
+        const id = target.attributes['data-popupId'].value;
+        const menuWrapper = document.getElementById(id);
+        // if has dropdown item, the item must wrapped by li
+        return menuWrapper ? Array.from(menuWrapper.getElementsByTagName('li')).filter(item => item.ariaDisabled === "false") : null;
+    }
+
+    setFocusToFirstMenuItem(target: any): void {
+        const menuItemNodes = this.getMenuItemNodes(target);
+        menuItemNodes && setFocusToFirstItem(menuItemNodes);
+    }
+
+    setFocusToLastMenuItem(target: any): void {
+        const menuItemNodes = this.getMenuItemNodes(target);
+        menuItemNodes && setFocusToLastItem(menuItemNodes);
+    }
+
+    handleKeyDown(event: any): void {
+        switch (event.key) {
+            case ' ':
+            case 'Enter':
+                event.target.click();
+                handlePrevent(event);
+                break;
+            case 'ArrowDown':
+                this.setFocusToFirstMenuItem(event.target);
+                handlePrevent(event);
+                break;
+            case 'ArrowUp':
+                this.setFocusToLastMenuItem(event.target);
+                handlePrevent(event);
+                break;
+            default:
+                break;
+        }
+    }
 }

package/dropdown/menuFoundation.ts

@@ -0,0 +1,77 @@
+
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+import { handlePrevent, isPrintableCharacter, findIndexByCharacter, getAncestorNodeByRole, getMenuButton, setFocusToFirstItem, setFocusToItem, setFocusToNextMenuitem, setFocusToPreviousMenuItem } from '../utils/a11y';
+
+
+export default class DropdownMenuFoundation extends BaseFoundation<Partial<DefaultAdapter>> {
+    menuItemNodes: HTMLElement[] = null;
+    firstChars: string[] = [];
+
+    // if trigger is click, auto focus to the first menu item
+    autoFocus(ulElement: any): void {
+        const trigger = this._adapter.getContext('trigger');
+        if (trigger === 'click'){
+            // find all non-disabled li under this menu and set focus to the first menu
+            this.menuItemNodes = [...ulElement.getElementsByTagName('li')].filter(item => item.ariaDisabled !== "true");
+            setFocusToFirstItem(this.menuItemNodes);
+        }
+    }
+
+    handleEscape(menu: Element): void {
+        const trigger = this._adapter.getContext('trigger');
+        if (trigger === 'custom'){
+            const menuButton = menu && getMenuButton(document.querySelectorAll(`[data-popupId]`), menu.id); 
+            menuButton.focus();
+        }
+    }
+
+    setFocusByFirstCharacter(curItem: any, char: string): void {
+        const index = findIndexByCharacter(this.menuItemNodes, curItem, this.firstChars, char);
+        
+        if (index >= 0) {
+            setFocusToItem(this.menuItemNodes, this.menuItemNodes[index]);
+        }
+    }
+
+    onMenuKeydown(event: any): void {
+        const menu = getAncestorNodeByRole(event.target, 'tooltip');
+        
+        if (!this.menuItemNodes){
+            this.menuItemNodes = [...(event.target.parentNode).getElementsByTagName('li')].filter(item => item.ariaDisabled !== "true");
+        }
+
+        if (this.firstChars.length === 0){
+            this.menuItemNodes.forEach((item: Element) => {
+                this.firstChars.push(item.textContent.trim()[0].toLowerCase());
+            });
+        }
+
+        // get the currently focused menu item
+        const curItem = this.menuItemNodes.find(item => item.tabIndex === 0);
+        
+        switch (event.key) {
+            case ' ':
+            case 'Enter':
+                event.target.click();
+                handlePrevent(event);
+                break;
+            case 'Escape':
+                this.handleEscape(menu);
+                break;
+            case 'ArrowUp':
+                setFocusToPreviousMenuItem(this.menuItemNodes, curItem);
+                handlePrevent(event);
+                break;
+            case 'ArrowDown':
+                setFocusToNextMenuitem(this.menuItemNodes, curItem);
+                handlePrevent(event);
+                break;
+            default:
+                if (isPrintableCharacter(event.key)) {
+                    this.setFocusByFirstCharacter(curItem, event.key);
+                    handlePrevent(event);
+                }
+                break;
+        }
+    }
+}

package/lib/cjs/cascader/cascader.css

@@ -149,6 +149,12 @@
 .semi-cascader-selection .semi-tagInput .semi-input-wrapper-large {
   height: 38px;
 }
+.semi-cascader-selection-text-inactive {
+  color: var(--semi-color-text-2);
+}
+.semi-cascader-selection-text-hide {
+  display: none;
+}
 .semi-cascader-arrow, .semi-cascader-clearbtn {
   display: inline-flex;
   align-items: center;
@@ -242,8 +248,17 @@
 }
 .semi-cascader-single.semi-cascader-filterable .semi-cascader-selection .semi-cascader-search-wrapper {
   width: 100%;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  position: relative;
 }
 .semi-cascader-single.semi-cascader-filterable .semi-cascader-selection .semi-cascader-search-wrapper .semi-input-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: none;
+  background-color: transparent;
   height: 100%;
   width: 100%;
   border: none;

package/lib/cjs/cascader/cascader.scss

@@ -175,6 +175,17 @@ $module: #{$prefix}-cascader;
                 height: $height-cascader_selection_tagInput_input_large;
             }
         }
+
+        &-text {
+
+            &-inactive {
+                color: $color-cascader_selection_text_inactive;
+            }
+
+            &-hide {
+                display: none;
+            }
+        }
     }
 
     &-arrow,
@@ -294,8 +305,17 @@ $module: #{$prefix}-cascader;
     .#{$module}-selection {
         .#{$module}-search-wrapper {
             width: 100%;
+            height: $height-cascader_selection_wrapper;
+            display: flex;
+            align-items: center;
+            position: relative;
 
             .#{$prefix}-input-wrapper {
+                position: absolute;
+                top: 0;
+                left: 0;
+                border: none;
+                background-color: transparent;
                 height: 100%;
                 width: 100%;
                 border: $color-cascader_input-border-default;

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

@@ -99,6 +99,7 @@ export interface BasicCascaderProps {
     disableStrictly?: boolean;
     leafOnly?: boolean;
     enableLeafClick?: boolean;
+    preventScroll?: boolean;
     onClear?: () => void;
     triggerRender?: (props: BasicTriggerRenderProps) => any;
     onListScroll?: (e: any, panel: BasicScrollPanelProps) => void;
@@ -136,6 +137,7 @@ export interface BasicCascaderInnerData {
     isFocus?: boolean;
     isInput?: boolean;
     disabledKeys?: Set<string>;
+    showInput?: boolean;
 }
 export interface CascaderAdapter extends DefaultAdapter<BasicCascaderProps, BasicCascaderInnerData> {
     notifyClear?: () => void;
@@ -160,6 +162,8 @@ export interface CascaderAdapter extends DefaultAdapter<BasicCascaderProps, Basi
     notifyOnLoad: (newLoadedKeys: Set<string>, data: BasicCascaderData) => void;
     notifyListScroll: (e: any, panel: BasicScrollPanelProps) => void;
     notifyOnExceed: (data: BasicEntity[]) => void;
+    toggleInputShow: (show: boolean, cb: () => void) => void;
+    updateFocusState: (focus: boolean) => void;
 }
 export default class CascaderFoundation extends BaseFoundation<CascaderAdapter, BasicCascaderProps, BasicCascaderInnerData> {
     constructor(adapter: CascaderAdapter);
@@ -187,6 +191,8 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
     open(): void;
     reCalcActiveKeys(): void;
     close(e: any, key?: string): void;
+    toggle2SearchInput(isShow: boolean): void;
+    focusInput(): void;
     getMergedMotion: () => any;
     handleItemClick(e: any, item: BasicEntity | BasicData): void;
     handleItemHover(e: any, item: BasicEntity): void;

package/lib/cjs/cascader/foundation.js

@@ -423,10 +423,16 @@ class CascaderFoundation extends _foundation.default {
   open() {
     const filterable = this._isFilterable();
 
+    const {
+      multiple
+    } = this.getProps();
+
     this._adapter.openMenu();
 
     if (filterable) {
       this._clearInput();
+
+      !multiple && this.toggle2SearchInput(true);
     }
 
     if (this._isControlledComponent()) {
@@ -486,11 +492,28 @@ class CascaderFoundation extends _foundation.default {
       this._adapter.updateStates({
         inputValue
       });
+
+      !multiple && this.toggle2SearchInput(false);
+      !multiple && this._adapter.updateFocusState(false);
     }
 
     this._notifyBlur(e);
   }
 
+  toggle2SearchInput(isShow) {
+    if (isShow) {
+      this._adapter.toggleInputShow(isShow, () => this.focusInput());
+    } else {
+      this._adapter.toggleInputShow(isShow, () => undefined);
+    }
+  }
+
+  focusInput() {
+    this._adapter.focusInput();
+
+    this._adapter.updateFocusState(true);
+  }
+
   handleItemClick(e, item) {
     const isDisabled = this._isDisabled();
 

package/lib/cjs/cascader/variables.scss

@@ -54,6 +54,7 @@ $spacing-cascader_clearBtn-marginRight: 12px; // 级联选择触发器清空按
 
 $color-cascader_selection_n-text-default: var(--semi-color-text-0); // 超出 maxTagCount 后，+n 的文字默认颜色
 $color-cascader_selection_n-text-disabled: var(--semi-color-disabled-text); // 超出 maxTagCount 后，+n 的文字disabled颜色
+$color-cascader_selection_text_inactive: var(--semi-color-text-2); // 级联选择单选inpu输入框和text并存时，text颜色
 $color-cascader_selection-text-default: var(--semi-color-text-0); // 级联选择选中项文字颜色
 $color-cascader_placeholder-text-default: var(--semi-color-text-2); // 级联选择未选中项文字颜色
 $color-cascader-icon-default: var(--semi-color-text-2); // 级联选择图标颜色 - 默认
@@ -94,6 +95,7 @@ $height-cascader_option_list: 180px; // 级联选择菜单高度
 $height-cascader_selection_tagInput_input_small: 22px;
 $height-cascader_selection_tagInput_input_default: 30px;
 $height-cascader_selection_tagInput_input_large: 38px;
+$height-cascader_selection_wrapper: 30px;
 
 $spacing-cascader_text-marginX: $spacing-base-tight; // 级联选择 prefix/suffix 文字水平内间距
 $spacing-cascader_icon-marginX: $spacing-tight; // 级联选择 prefix/suffix 图标水平内间距

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

@@ -62,5 +62,6 @@ export interface BaseCheckboxProps {
     extra?: any;
     addonId?: string;
     extraId?: string;
+    preventScroll?: boolean;
 }
 export default CheckboxFoundation;

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

@@ -131,6 +131,7 @@ export interface DatePickerFoundationProps extends ElementProps, RenderProps, Ev
     localeCode?: string;
     rangeSeparator?: string;
     insetInput?: boolean;
+    preventScroll?: boolean;
 }
 export interface DatePickerFoundationState {
     panelShow: boolean;

package/lib/cjs/dropdown/dropdown.css

@@ -53,6 +53,10 @@
 .semi-dropdown-item:not(.semi-dropdown-item-active):active {
   background-color: var(--semi-color-fill-1);
 }
+.semi-dropdown-item:focus-visible {
+  background-color: var(--semi-color-fill-0);
+  outline: 0;
+}
 .semi-dropdown-item-icon {
   display: inline-flex;
   align-items: center;

package/lib/cjs/dropdown/dropdown.scss

@@ -50,6 +50,10 @@ $module: #{$prefix}-dropdown;
         &:not(.#{$module}-item-active):active {
             background-color: $color-dropdown_item-bg-active;
         }
+        &:focus-visible {
+            background-color: $color-dropdown_item-bg-hover;
+            outline: 0;
+        }
         &-icon {
             display: inline-flex;
             align-items: center;

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

@@ -5,4 +5,8 @@ export interface DropdownAdapter extends Partial<DefaultAdapter> {
 }
 export default class DropdownFoundation extends BaseFoundation<DropdownAdapter> {
     handleVisibleChange(visible: boolean): void;
+    getMenuItemNodes(target: any): HTMLElement[];
+    setFocusToFirstMenuItem(target: any): void;
+    setFocusToLastMenuItem(target: any): void;
+    handleKeyDown(event: any): void;
 }

package/lib/cjs/dropdown/foundation.js

@@ -10,8 +10,14 @@ _Object$defineProperty(exports, "__esModule", {
 
 exports.default = void 0;
 
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+
 var _foundation = _interopRequireDefault(require("../base/foundation"));
 
+var _a11y = require("../utils/a11y");
+
 class DropdownFoundation extends _foundation.default {
   handleVisibleChange(visible) {
     this._adapter.setPopVisible(visible);
@@ -19,6 +25,48 @@ class DropdownFoundation extends _foundation.default {
     this._adapter.notifyVisibleChange(visible);
   }
 
+  getMenuItemNodes(target) {
+    var _context;
+
+    const id = target.attributes['data-popupId'].value;
+    const menuWrapper = document.getElementById(id); // if has dropdown item, the item must wrapped by li
+
+    return menuWrapper ? (0, _filter.default)(_context = (0, _from.default)(menuWrapper.getElementsByTagName('li'))).call(_context, item => item.ariaDisabled === "false") : null;
+  }
+
+  setFocusToFirstMenuItem(target) {
+    const menuItemNodes = this.getMenuItemNodes(target);
+    menuItemNodes && (0, _a11y.setFocusToFirstItem)(menuItemNodes);
+  }
+
+  setFocusToLastMenuItem(target) {
+    const menuItemNodes = this.getMenuItemNodes(target);
+    menuItemNodes && (0, _a11y.setFocusToLastItem)(menuItemNodes);
+  }
+
+  handleKeyDown(event) {
+    switch (event.key) {
+      case ' ':
+      case 'Enter':
+        event.target.click();
+        (0, _a11y.handlePrevent)(event);
+        break;
+
+      case 'ArrowDown':
+        this.setFocusToFirstMenuItem(event.target);
+        (0, _a11y.handlePrevent)(event);
+        break;
+
+      case 'ArrowUp':
+        this.setFocusToLastMenuItem(event.target);
+        (0, _a11y.handlePrevent)(event);
+        break;
+
+      default:
+        break;
+    }
+  }
+
 }
 
 exports.default = DropdownFoundation;

package/lib/cjs/dropdown/menuFoundation.d.ts

@@ -0,0 +1,9 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+export default class DropdownMenuFoundation extends BaseFoundation<Partial<DefaultAdapter>> {
+    menuItemNodes: HTMLElement[];
+    firstChars: string[];
+    autoFocus(ulElement: any): void;
+    handleEscape(menu: Element): void;
+    setFocusByFirstCharacter(curItem: any, char: string): void;
+    onMenuKeydown(event: any): void;
+}

package/lib/cjs/dropdown/menuFoundation.js

@@ -0,0 +1,119 @@
+"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 _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _trim = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/trim"));
+
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
+
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+
+var _a11y = require("../utils/a11y");
+
+class DropdownMenuFoundation extends _foundation.default {
+  constructor() {
+    super(...arguments);
+    this.menuItemNodes = null;
+    this.firstChars = [];
+  } // if trigger is click, auto focus to the first menu item
+
+
+  autoFocus(ulElement) {
+    const trigger = this._adapter.getContext('trigger');
+
+    if (trigger === 'click') {
+      var _context;
+
+      // find all non-disabled li under this menu and set focus to the first menu
+      this.menuItemNodes = (0, _filter.default)(_context = [...ulElement.getElementsByTagName('li')]).call(_context, item => item.ariaDisabled !== "true");
+      (0, _a11y.setFocusToFirstItem)(this.menuItemNodes);
+    }
+  }
+
+  handleEscape(menu) {
+    const trigger = this._adapter.getContext('trigger');
+
+    if (trigger === 'custom') {
+      const menuButton = menu && (0, _a11y.getMenuButton)(document.querySelectorAll("[data-popupId]"), menu.id);
+      menuButton.focus();
+    }
+  }
+
+  setFocusByFirstCharacter(curItem, char) {
+    const index = (0, _a11y.findIndexByCharacter)(this.menuItemNodes, curItem, this.firstChars, char);
+
+    if (index >= 0) {
+      (0, _a11y.setFocusToItem)(this.menuItemNodes, this.menuItemNodes[index]);
+    }
+  }
+
+  onMenuKeydown(event) {
+    var _context5;
+
+    const menu = (0, _a11y.getAncestorNodeByRole)(event.target, 'tooltip');
+
+    if (!this.menuItemNodes) {
+      var _context2;
+
+      this.menuItemNodes = (0, _filter.default)(_context2 = [...event.target.parentNode.getElementsByTagName('li')]).call(_context2, item => item.ariaDisabled !== "true");
+    }
+
+    if (this.firstChars.length === 0) {
+      var _context3;
+
+      (0, _forEach.default)(_context3 = this.menuItemNodes).call(_context3, item => {
+        var _context4;
+
+        this.firstChars.push((0, _trim.default)(_context4 = item.textContent).call(_context4)[0].toLowerCase());
+      });
+    } // get the currently focused menu item
+
+
+    const curItem = (0, _find.default)(_context5 = this.menuItemNodes).call(_context5, item => item.tabIndex === 0);
+
+    switch (event.key) {
+      case ' ':
+      case 'Enter':
+        event.target.click();
+        (0, _a11y.handlePrevent)(event);
+        break;
+
+      case 'Escape':
+        this.handleEscape(menu);
+        break;
+
+      case 'ArrowUp':
+        (0, _a11y.setFocusToPreviousMenuItem)(this.menuItemNodes, curItem);
+        (0, _a11y.handlePrevent)(event);
+        break;
+
+      case 'ArrowDown':
+        (0, _a11y.setFocusToNextMenuitem)(this.menuItemNodes, curItem);
+        (0, _a11y.handlePrevent)(event);
+        break;
+
+      default:
+        if ((0, _a11y.isPrintableCharacter)(event.key)) {
+          this.setFocusByFirstCharacter(curItem, event.key);
+          (0, _a11y.handlePrevent)(event);
+        }
+
+        break;
+    }
+  }
+
+}
+
+exports.default = DropdownMenuFoundation;