baseui 12.0.0 → 12.1.2

package/input/base-input.js.flow

@@ -137,17 +137,13 @@ class BaseInput<T: HTMLInputElement | HTMLTextAreaElement> extends React.Compone
   };
 
   onFocus = (e: SyntheticFocusEvent<T>) => {
-    if (!this.props.readOnly) {
-      this.setState({ isFocused: true });
-      this.props.onFocus(e);
-    }
+    this.setState({ isFocused: true });
+    this.props.onFocus(e);
   };
 
   onBlur = (e: SyntheticFocusEvent<T>) => {
-    if (!this.props.readOnly) {
-      this.setState({ isFocused: false });
-      this.props.onBlur(e);
-    }
+    this.setState({ isFocused: false });
+    this.props.onBlur(e);
   };
 
   getInputType() {

package/input/input.js

@@ -93,27 +93,23 @@ var Input = /*#__PURE__*/function (_React$Component) {
     _this = _super.call.apply(_super, [this].concat(args));
 
     _defineProperty(_assertThisInitialized(_this), "state", {
-      isFocused: _this.props.autoFocus && !_this.props.readOnly || false
+      isFocused: _this.props.autoFocus || false
     });
 
     _defineProperty(_assertThisInitialized(_this), "onFocus", function (e) {
-      if (!_this.props.readOnly) {
-        _this.setState({
-          isFocused: true
-        });
+      _this.setState({
+        isFocused: true
+      });
 
-        _this.props.onFocus(e);
-      }
+      _this.props.onFocus(e);
     });
 
     _defineProperty(_assertThisInitialized(_this), "onBlur", function (e) {
-      if (!_this.props.readOnly) {
-        _this.setState({
-          isFocused: false
-        });
+      _this.setState({
+        isFocused: false
+      });
 
-        _this.props.onBlur(e);
-      }
+      _this.props.onBlur(e);
     });
 
     return _this;

package/input/input.js.flow

@@ -36,21 +36,17 @@ class Input extends React.Component<InputPropsT, InternalStateT> {
    * customers shouldn't have to manage themselves, such as input's focus state.
    */
   state = {
-    isFocused: (this.props.autoFocus && !this.props.readOnly) || false,
+    isFocused: this.props.autoFocus || false,
   };
 
   onFocus = (e: SyntheticFocusEvent<HTMLInputElement>) => {
-    if (!this.props.readOnly) {
-      this.setState({ isFocused: true });
-      this.props.onFocus(e);
-    }
+    this.setState({ isFocused: true });
+    this.props.onFocus(e);
   };
 
   onBlur = (e: SyntheticFocusEvent<HTMLInputElement>) => {
-    if (!this.props.readOnly) {
-      this.setState({ isFocused: false });
-      this.props.onBlur(e);
-    }
+    this.setState({ isFocused: false });
+    this.props.onBlur(e);
   };
 
   render() {

package/input/masked-input.js

@@ -82,8 +82,11 @@ function MaskedInput(_ref2) {
       restOverrides = _objectWithoutProperties(_ref2$overrides, _excluded2),
       restProps = _objectWithoutProperties(_ref2, _excluded3);
 
-  var componentOverride = MaskOverride;
-  var propsOverride = {};
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  var componentOverride = MaskOverride; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+  var propsOverride = {}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
   var styleOverride = {};
 
   if (typeof inputOverride === 'function') {

package/input/stateful-container.js

@@ -93,6 +93,7 @@ var StatefulContainer = /*#__PURE__*/function (_React$Component) {
   _createClass(StatefulContainer, [{
     key: "render",
     value: function render() {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       var _this$props = this.props,
           children = _this$props.children,
           initialState = _this$props.initialState,

package/input/styled-components.js

@@ -42,6 +42,7 @@ var StyledMaskToggleButton = (0, _styles.styled)('button', function (_ref) {
 });
 exports.StyledMaskToggleButton = StyledMaskToggleButton;
 StyledMaskToggleButton.displayName = "StyledMaskToggleButton";
+StyledMaskToggleButton.displayName = 'StyledMaskToggleButton';
 var StyledClearIconContainer = (0, _styles.styled)('div', function (_ref2) {
   var _SIZE$mini$SIZE$compa2;
 
@@ -61,6 +62,7 @@ var StyledClearIconContainer = (0, _styles.styled)('div', function (_ref2) {
 });
 exports.StyledClearIconContainer = StyledClearIconContainer;
 StyledClearIconContainer.displayName = "StyledClearIconContainer";
+StyledClearIconContainer.displayName = 'StyledClearIconContainer';
 var StyledClearIcon = (0, _styles.styled)(_deleteAlt.default, function (_ref3) {
   var $theme = _ref3.$theme,
       $isFocusVisible = _ref3.$isFocusVisible;
@@ -71,6 +73,7 @@ var StyledClearIcon = (0, _styles.styled)(_deleteAlt.default, function (_ref3) {
 });
 exports.StyledClearIcon = StyledClearIcon;
 StyledClearIcon.displayName = "StyledClearIcon";
+StyledClearIcon.displayName = 'StyledClearIcon';
 
 function getInputPadding(size, sizing) {
   var _SIZE$mini$SIZE$compa3;
@@ -166,7 +169,13 @@ function getRootColors($disabled, $isFocused, $error) {
   };
 }
 
-function getRootBorderRadius(radius) {
+function getRootBorderRadius(size, borders) {
+  var radius = borders.inputBorderRadius;
+
+  if (size === _constants.SIZE.mini) {
+    radius = borders.inputBorderRadiusMini;
+  }
+
   return {
     borderTopLeftRadius: radius,
     borderBottomLeftRadius: radius,
@@ -206,14 +215,14 @@ var getRootStyles = function getRootStyles(props) {
     transitionProperty: 'border',
     transitionDuration: animation.timing200,
     transitionTimingFunction: animation.easeOutCurve
-  }, getRootBorderRadius(borders.inputBorderRadius)), getFont($size, typography)), getRootColors($disabled, $isFocused, $error, $positive, colors)), getRootPadding($adjoined, $size, sizing, $theme.direction, $hasIconTrailing));
+  }, getRootBorderRadius($size, borders)), getFont($size, typography)), getRootColors($disabled, $isFocused, $error, $positive, colors)), getRootPadding($adjoined, $size, sizing, $theme.direction, $hasIconTrailing));
 };
 
 exports.getRootStyles = getRootStyles;
-var Root = (0, _styles.styled)('div', getRootStyles); // InputEnhancer
-
+var Root = (0, _styles.styled)('div', getRootStyles);
 exports.Root = Root;
 Root.displayName = "Root";
+Root.displayName = 'Root'; // InputEnhancer
 
 function getInputEnhancerPadding($size, sizing) {
   var _SIZE$mini$SIZE$compa5;
@@ -287,10 +296,10 @@ var InputEnhancer = (0, _styles.styled)('div', function (props) {
     transitionDuration: animation.timing200,
     transitionTimingFunction: animation.easeOutCurve
   }, getFont($size, typography)), getInputEnhancerPadding($size, sizing)), getInputEnhancerColors($disabled, $isFocused, $error, $positive, colors));
-}); // InputContainer
-
+});
 exports.InputEnhancer = InputEnhancer;
 InputEnhancer.displayName = "InputEnhancer";
+InputEnhancer.displayName = 'InputEnhancer'; // InputContainer
 
 function getInputContainerColors($disabled, $isFocused, $error, $positive, colors) {
   if ($disabled) {
@@ -350,6 +359,7 @@ exports.getInputContainerStyles = getInputContainerStyles;
 var InputContainer = (0, _styles.styled)('div', getInputContainerStyles);
 exports.InputContainer = InputContainer;
 InputContainer.displayName = "InputContainer";
+InputContainer.displayName = 'InputContainer';
 
 function getInputColors($disabled, $isFocused, $error, colors) {
   if ($disabled) {
@@ -409,4 +419,5 @@ var getInputStyles = function getInputStyles(props) {
 exports.getInputStyles = getInputStyles;
 var Input = (0, _styles.styled)('input', getInputStyles);
 exports.Input = Input;
-Input.displayName = "Input";
+Input.displayName = "Input";
+Input.displayName = 'Input';

package/input/styled-components.js.flow

@@ -201,12 +201,19 @@ function getRootColors(
   };
 }
 
-function getRootBorderRadius(radius): {|
+function getRootBorderRadius(
+  size,
+  borders
+): {|
   borderTopLeftRadius: string,
   borderBottomLeftRadius: string,
   borderTopRightRadius: string,
   borderBottomRightRadius: string,
 |} {
+  let radius = borders.inputBorderRadius;
+  if (size === SIZE.mini) {
+    radius = borders.inputBorderRadiusMini;
+  }
   return {
     borderTopLeftRadius: radius,
     borderBottomLeftRadius: radius,
@@ -252,7 +259,7 @@ export const getRootStyles = (props: {
     transitionProperty: 'border',
     transitionDuration: animation.timing200,
     transitionTimingFunction: animation.easeOutCurve,
-    ...getRootBorderRadius(borders.inputBorderRadius),
+    ...getRootBorderRadius($size, borders),
     ...getFont($size, typography),
     ...getRootColors($disabled, $isFocused, $error, $positive, colors),
     ...getRootPadding($adjoined, $size, sizing, $theme.direction, $hasIconTrailing),

package/input/types.d.ts

@@ -1,7 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
+import type { Properties } from 'csstype';
 import type { Override } from '../helpers/overrides';
-import { STATE_CHANGE_TYPE, ADJOINED, SIZE, ENHANCER_POSITION } from './constants';
-import type { SyntheticEvent, ChangeEvent, FocusEvent, KeyboardEvent } from 'react';
+import type { STATE_CHANGE_TYPE, ADJOINED, SIZE, ENHANCER_POSITION } from './constants';
 export declare type Adjoined = keyof typeof ADJOINED;
 export declare type Size = keyof typeof SIZE;
 export declare type StateType = keyof typeof STATE_CHANGE_TYPE;
@@ -36,6 +36,7 @@ export declare type SharedProps = {
     $size: Size;
     /** Renders UI in 'required' state */
     $required?: boolean;
+    $resize?: Properties['resize'];
     $position?: keyof typeof ENHANCER_POSITION;
     /** Defines if has a clearable or MaskToggleButton at the end */
     $hasIconTrailing?: boolean;
@@ -92,22 +93,23 @@ export declare type BaseInputProps<T> = {
     /** A ref to access an input element. */
     inputRef?: React.RefObject<T>;
     name?: string;
-    onBlur?: (e: FocusEvent<T>) => void;
-    onChange?: (e: ChangeEvent<T>) => void;
-    onKeyDown?: (e: KeyboardEvent<T>) => void;
-    onKeyPress?: (e: KeyboardEvent<T>) => void;
-    onKeyUp?: (e: KeyboardEvent<T>) => void;
-    onFocus?: (e: FocusEvent<T>) => void;
+    onBlur?: (e: React.FocusEvent<T>) => void;
+    onChange?: (e: React.ChangeEvent<T>) => void;
+    onKeyDown?: (e: React.KeyboardEvent<T>) => void;
+    onKeyPress?: (e: React.KeyboardEvent<T>) => void;
+    onKeyUp?: (e: React.KeyboardEvent<T>) => void;
+    onFocus?: (e: React.FocusEvent<T>) => void;
     /** If true, adds a clear value icon button to the end of the input container. */
     clearable?: boolean;
     /** If undefined or true, clears the input when the Escape button is pressed with the input focused. True by default. */
     clearOnEscape?: boolean;
     maxLength?: number;
-    onClear?: (e: SyntheticEvent<T>) => void;
+    onClear?: (e: React.SyntheticEvent<T>) => void;
     overrides?: BaseInputOverrides;
     placeholder?: string;
     /** Renders component in 'required' state. */
     required?: boolean;
+    resize?: Properties['resize'];
     /** Input role attribute. */
     role?: string;
     /** Renders component in provided size. */
@@ -133,9 +135,9 @@ export declare type InputProps = {
     /** An input helper rendered after and attached to the input field. */
     endEnhancer?: React.ReactNode | ((props: SharedProps) => React.ReactNode);
     /** Handler for the `focus` event. */
-    onFocus?: (e: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     /** Handler for the `blur` event. */
-    onBlur?: (e: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
 } & BaseInputProps<HTMLInputElement | HTMLTextAreaElement>;
 export declare type MaskedInputProps = Partial<{
     /** See mask examples here: https://github.com/sanniassin/react-input-mask */
@@ -144,7 +146,7 @@ export declare type MaskedInputProps = Partial<{
     maskChar?: string;
 } & InputProps>;
 export declare type StatefulContainerChildrenProps<T> = {
-    onChange: (e: ChangeEvent<T>) => void;
+    onChange: (e: React.ChangeEvent<T>) => void;
     /** If true, adds a clear value icon button to the end of the input container. */
     clearable?: boolean;
 } & StatefulInputProps;
@@ -154,7 +156,7 @@ export declare type StatefulContainerProps<T> = {
     initialState?: State;
     /** A state change handler. Used to override default state transitions. */
     stateReducer?: StateReducer;
-    onChange?: (e: ChangeEvent<T>) => void;
+    onChange?: (e: React.ChangeEvent<T>) => void;
     /** If true, adds a clear value icon button to the end of the input container. */
     clearable?: boolean;
 } & {

package/input/types.js.flow

@@ -6,6 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
+import type { Property$Resize } from 'csstype';
 import type { OverrideT } from '../helpers/overrides.js';
 import { STATE_CHANGE_TYPE, ADJOINED, SIZE, ENHANCER_POSITION } from './constants.js';
 
@@ -52,6 +53,7 @@ export type SharedPropsT = {|
   $size: SizeT,
   /** Renders UI in 'required' state */
   $required: boolean,
+  $resize?: Property$Resize,
   $position: $Keys<typeof ENHANCER_POSITION>,
   /** Defines if has a clearable or MaskToggleButton at the end */
   $hasIconTrailing: boolean,
@@ -128,6 +130,7 @@ export type BaseInputPropsT<T> = {|
   placeholder?: string,
   /** Renders component in 'required' state. */
   required: boolean,
+  resize?: Property$Resize,
   /** Input role attribute. */
   role?: string,
   /** Renders component in provided size. */

package/input/utils.js

@@ -18,6 +18,7 @@ function getSharedProps(props, state) {
       adjoined = props.adjoined,
       size = props.size,
       required = props.required,
+      resize = props.resize,
       readOnly = props.readOnly;
   var isFocused = state.isFocused;
   return {
@@ -28,6 +29,7 @@ function getSharedProps(props, state) {
     $adjoined: adjoined,
     $size: size,
     $required: required,
+    $resize: resize,
     $isReadOnly: readOnly
   };
 }

package/layer/layer.js

@@ -83,6 +83,24 @@ var LayerComponent = /*#__PURE__*/function (_React$Component) {
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "onKeyDown", function (event) {
+      if (_this.props.onKeyDown) {
+        _this.props.onKeyDown(event);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onKeyUp", function (event) {
+      if (_this.props.onKeyUp) {
+        _this.props.onKeyUp(event);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onKeyPress", function (event) {
+      if (_this.props.onKeyPress) {
+        _this.props.onKeyPress(event);
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_this), "onDocumentClick", function (event) {
       if (_this.props.onDocumentClick) {
         _this.props.onDocumentClick(event);
@@ -96,6 +114,9 @@ var LayerComponent = /*#__PURE__*/function (_React$Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       this.context.addEscapeHandler(this.onEscape);
+      this.context.addKeyDownHandler(this.onKeyDown);
+      this.context.addKeyUpHandler(this.onKeyUp);
+      this.context.addKeyPressHandler(this.onKeyPress);
 
       if (!this.props.isHoverLayer) {
         this.context.addDocClickHandler(this.onDocumentClick);
@@ -154,6 +175,9 @@ var LayerComponent = /*#__PURE__*/function (_React$Component) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       this.context.removeEscapeHandler(this.onEscape);
+      this.context.removeKeyDownHandler(this.onKeyDown);
+      this.context.removeKeyUpHandler(this.onKeyUp);
+      this.context.removeKeyPressHandler(this.onKeyPress);
       this.context.removeDocClickHandler(this.onDocumentClick);
 
       if (this.props.onUnmount) {

package/layer/layer.js.flow

@@ -27,6 +27,10 @@ class LayerComponent extends React.Component<LayerComponentPropsT, LayerStateT>
 
   componentDidMount() {
     this.context.addEscapeHandler(this.onEscape);
+    this.context.addKeyDownHandler(this.onKeyDown);
+    this.context.addKeyUpHandler(this.onKeyUp);
+    this.context.addKeyPressHandler(this.onKeyPress);
+
     if (!this.props.isHoverLayer) {
       this.context.addDocClickHandler(this.onDocumentClick);
     }
@@ -74,6 +78,9 @@ class LayerComponent extends React.Component<LayerComponentPropsT, LayerStateT>
 
   componentWillUnmount() {
     this.context.removeEscapeHandler(this.onEscape);
+    this.context.removeKeyDownHandler(this.onKeyDown);
+    this.context.removeKeyUpHandler(this.onKeyUp);
+    this.context.removeKeyPressHandler(this.onKeyPress);
     this.context.removeDocClickHandler(this.onDocumentClick);
 
     if (this.props.onUnmount) {
@@ -95,6 +102,24 @@ class LayerComponent extends React.Component<LayerComponentPropsT, LayerStateT>
     }
   };
 
+  onKeyDown = (event: KeyboardEvent) => {
+    if (this.props.onKeyDown) {
+      this.props.onKeyDown(event);
+    }
+  };
+
+  onKeyUp = (event: KeyboardEvent) => {
+    if (this.props.onKeyUp) {
+      this.props.onKeyUp(event);
+    }
+  };
+
+  onKeyPress = (event: KeyboardEvent) => {
+    if (this.props.onKeyPress) {
+      this.props.onKeyPress(event);
+    }
+  };
+
   onDocumentClick = (event: MouseEvent) => {
     if (this.props.onDocumentClick) {
       this.props.onDocumentClick(event);

package/layer/layers-manager.d.ts

@@ -10,9 +10,17 @@ export default class LayersManager extends React.Component<LayersManagerProps, L
     componentDidMount(): void;
     componentWillUnmount(): void;
     onDocumentClick: (event: MouseEvent) => void;
+    onKeyDown: (event: KeyboardEvent) => void;
     onKeyUp: (event: KeyboardEvent) => void;
+    onKeyPress: (event: KeyboardEvent) => void;
     onAddEscapeHandler: (escapeKeyHandler: () => unknown) => void;
     onRemoveEscapeHandler: (escapeKeyHandler: () => unknown) => void;
+    onAddKeyDownHandler: (keyDownHandler: () => unknown) => void;
+    onRemoveKeyDownHandler: (keyDownHandler: () => unknown) => void;
+    onAddKeyUpHandler: (keyUpHandler: () => unknown) => void;
+    onRemoveKeyUpHandler: (keyUpHandler: () => unknown) => void;
+    onAddKeyPressHandler: (keyPressHandler: () => unknown) => void;
+    onRemoveKeyPressHandler: (keyPressHandler: () => unknown) => void;
     onAddDocClickHandler: (docClickHandler: (event: MouseEvent) => unknown) => void;
     onRemoveDocClickHandler: (docClickHandler: (event: MouseEvent) => unknown) => void;
     render(): JSX.Element;

package/layer/layers-manager.js

@@ -77,6 +77,12 @@ function defaultEventHandlerFn() {
 var LayersContext = /*#__PURE__*/React.createContext({
   addEscapeHandler: defaultEventHandlerFn,
   removeEscapeHandler: defaultEventHandlerFn,
+  addKeyDownHandler: defaultEventHandlerFn,
+  removeKeyDownHandler: defaultEventHandlerFn,
+  addKeyUpHandler: defaultEventHandlerFn,
+  removeKeyUpHandler: defaultEventHandlerFn,
+  addKeyPressHandler: defaultEventHandlerFn,
+  removeKeyPressHandler: defaultEventHandlerFn,
   addDocClickHandler: defaultEventHandlerFn,
   removeDocClickHandler: defaultEventHandlerFn,
   host: undefined,
@@ -93,6 +99,7 @@ var LayersManager = /*#__PURE__*/function (_React$Component) {
 
   var _super = _createSuper(LayersManager);
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   function LayersManager(props) {
     var _this;
 
@@ -112,6 +119,14 @@ var LayersManager = /*#__PURE__*/function (_React$Component) {
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "onKeyDown", function (event) {
+      var keyDownHandler = _this.state.keyDownHandlers[_this.state.keyDownHandlers.length - 1];
+
+      if (keyDownHandler) {
+        keyDownHandler(event);
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_this), "onKeyUp", function (event) {
       if (event.key === 'Escape') {
         var escapeKeyHandler = _this.state.escapeKeyHandlers[_this.state.escapeKeyHandlers.length - 1];
@@ -120,6 +135,20 @@ var LayersManager = /*#__PURE__*/function (_React$Component) {
           escapeKeyHandler();
         }
       }
+
+      var keyUpHandler = _this.state.keyUpHandlers[_this.state.keyUpHandlers.length - 1];
+
+      if (keyUpHandler) {
+        keyUpHandler(event);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onKeyPress", function (event) {
+      var keyPressHandler = _this.state.keyPressHandlers[_this.state.keyPressHandlers.length - 1];
+
+      if (keyPressHandler) {
+        keyPressHandler(event);
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "onAddEscapeHandler", function (escapeKeyHandler) {
@@ -140,6 +169,60 @@ var LayersManager = /*#__PURE__*/function (_React$Component) {
       });
     });
 
+    _defineProperty(_assertThisInitialized(_this), "onAddKeyDownHandler", function (keyDownHandler) {
+      _this.setState(function (prev) {
+        return {
+          keyDownHandlers: [].concat(_toConsumableArray(prev.keyDownHandlers), [keyDownHandler])
+        };
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onRemoveKeyDownHandler", function (keyDownHandler) {
+      _this.setState(function (prev) {
+        return {
+          keyDownHandlers: prev.keyDownHandlers.filter(function (handler) {
+            return handler !== keyDownHandler;
+          })
+        };
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onAddKeyUpHandler", function (keyUpHandler) {
+      _this.setState(function (prev) {
+        return {
+          keyUpHandlers: [].concat(_toConsumableArray(prev.keyUpHandlers), [keyUpHandler])
+        };
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onRemoveKeyUpHandler", function (keyUpHandler) {
+      _this.setState(function (prev) {
+        return {
+          keyUpHandlers: prev.keyUpHandlers.filter(function (handler) {
+            return handler !== keyUpHandler;
+          })
+        };
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onAddKeyPressHandler", function (keyPressHandler) {
+      _this.setState(function (prev) {
+        return {
+          keyPressHandlers: [].concat(_toConsumableArray(prev.keyPressHandlers), [keyPressHandler])
+        };
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onRemoveKeyPressHandler", function (keyPressHandler) {
+      _this.setState(function (prev) {
+        return {
+          keyPressHandlers: prev.keyPressHandlers.filter(function (handler) {
+            return handler !== keyPressHandler;
+          })
+        };
+      });
+    });
+
     _defineProperty(_assertThisInitialized(_this), "onAddDocClickHandler", function (docClickHandler) {
       _this.setState(function (prev) {
         return {
@@ -160,6 +243,9 @@ var LayersManager = /*#__PURE__*/function (_React$Component) {
 
     _this.state = {
       escapeKeyHandlers: [],
+      keyDownHandlers: [],
+      keyUpHandlers: [],
+      keyPressHandlers: [],
       docClickHandlers: []
     };
     return _this;
@@ -172,7 +258,9 @@ var LayersManager = /*#__PURE__*/function (_React$Component) {
       (0, _focusVisible.initFocusVisible)(this.containerRef.current);
 
       if (typeof document !== 'undefined') {
-        document.addEventListener('keyup', this.onKeyUp); // using mousedown event so that callback runs before events on children inside of the layer
+        document.addEventListener('keydown', this.onKeyDown);
+        document.addEventListener('keyup', this.onKeyUp);
+        document.addEventListener('keypress', this.onKeyPress); // using mousedown event so that callback runs before events on children inside of the layer
 
         document.addEventListener('mousedown', this.onDocumentClick);
       }
@@ -181,7 +269,9 @@ var LayersManager = /*#__PURE__*/function (_React$Component) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       if (typeof document !== 'undefined') {
+        document.removeEventListener('keydown', this.onKeyDown);
         document.removeEventListener('keyup', this.onKeyUp);
+        document.removeEventListener('keypress', this.onKeyPress);
         document.removeEventListener('mousedown', this.onDocumentClick);
       }
     }
@@ -219,6 +309,12 @@ var LayersManager = /*#__PURE__*/function (_React$Component) {
             zIndex: _this2.props.zIndex,
             addEscapeHandler: _this2.onAddEscapeHandler,
             removeEscapeHandler: _this2.onRemoveEscapeHandler,
+            addKeyDownHandler: _this2.onAddKeyDownHandler,
+            removeKeyDownHandler: _this2.onRemoveKeyDownHandler,
+            addKeyUpHandler: _this2.onAddKeyUpHandler,
+            removeKeyUpHandler: _this2.onRemoveKeyUpHandler,
+            addKeyPressHandler: _this2.onAddKeyPressHandler,
+            removeKeyPressHandler: _this2.onRemoveKeyPressHandler,
             addDocClickHandler: _this2.onAddDocClickHandler,
             removeDocClickHandler: _this2.onRemoveDocClickHandler
           }