baseui 12.0.0 → 12.1.0

package/esm/drawer/styled-components.js

@@ -96,7 +96,8 @@ function getAnchorStyles(props) {
         return {};
       }
   }
-}
+} // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 
 export var StyledRoot = styled('div', function (props) {
   return {
@@ -109,6 +110,7 @@ export var StyledRoot = styled('div', function (props) {
   };
 });
 StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
 export var StyledBackdrop = styled('div', function (props) {
   var $animating = props.$animating,
       $isOpen = props.$isOpen,
@@ -134,6 +136,7 @@ export var StyledBackdrop = styled('div', function (props) {
   } : null);
 });
 StyledBackdrop.displayName = "StyledBackdrop";
+StyledBackdrop.displayName = 'StyledBackdrop';
 export var StyledDrawerContainer = styled('div', function (props) {
   var $animating = props.$animating,
       $isOpen = props.$isOpen,
@@ -156,6 +159,7 @@ export var StyledDrawerContainer = styled('div', function (props) {
   });
 });
 StyledDrawerContainer.displayName = "StyledDrawerContainer";
+StyledDrawerContainer.displayName = 'StyledDrawerContainer';
 export var StyledDrawerBody = styled('div', function (props) {
   var $theme = props.$theme;
   return _objectSpread(_objectSpread({}, $theme.typography.font200), {}, {
@@ -169,6 +173,7 @@ export var StyledDrawerBody = styled('div', function (props) {
   });
 });
 StyledDrawerBody.displayName = "StyledDrawerBody";
+StyledDrawerBody.displayName = 'StyledDrawerBody';
 export var StyledClose = styled('button', function (props) {
   var _ref;
 
@@ -211,7 +216,9 @@ export var StyledClose = styled('button', function (props) {
   }, _defineProperty(_ref, dir, $theme.sizing.scale500), _defineProperty(_ref, "width", $theme.sizing.scale800), _defineProperty(_ref, "height", $theme.sizing.scale800), _defineProperty(_ref, "display", 'flex'), _defineProperty(_ref, "justifyContent", 'center'), _defineProperty(_ref, "alignItems", 'center'), _defineProperty(_ref, "cursor", 'pointer'), _ref;
 });
 StyledClose.displayName = "StyledClose";
+StyledClose.displayName = 'StyledClose';
 export var Hidden = styled('div', {
   display: 'none'
 });
-Hidden.displayName = "Hidden";
+Hidden.displayName = "Hidden";
+Hidden.displayName = 'Hidden';

package/esm/file-uploader/styled-components.js

@@ -45,6 +45,7 @@ export var StyledFileDragAndDrop = styled('div', function (props) {
   };
 });
 StyledFileDragAndDrop.displayName = "StyledFileDragAndDrop";
+StyledFileDragAndDrop.displayName = 'StyledFileDragAndDrop';
 export var StyledContentMessage = styled('div', function (_ref) {
   var $theme = _ref.$theme,
       $afterFileDrop = _ref.$afterFileDrop,
@@ -56,6 +57,7 @@ export var StyledContentMessage = styled('div', function (_ref) {
   });
 });
 StyledContentMessage.displayName = "StyledContentMessage";
+StyledContentMessage.displayName = 'StyledContentMessage';
 export var StyledContentSeparator = StyledContentMessage;
 export var StyledErrorMessage = styled('div', function (props) {
   return _objectSpread(_objectSpread({}, props.$theme.typography.LabelMedium), {}, {
@@ -65,11 +67,14 @@ export var StyledErrorMessage = styled('div', function (props) {
   });
 });
 StyledErrorMessage.displayName = "StyledErrorMessage";
+StyledErrorMessage.displayName = 'StyledErrorMessage';
 export var StyledRoot = styled('div', function (props) {
   return _objectSpread(_objectSpread({}, props.$theme.typography.font300), {}, {
     color: props.$theme.colors.fileUploaderMessageColor
   });
 });
 StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
 export var StyledHiddenInput = styled('input', {});
-StyledHiddenInput.displayName = "StyledHiddenInput";
+StyledHiddenInput.displayName = "StyledHiddenInput";
+StyledHiddenInput.displayName = 'StyledHiddenInput';

package/esm/flex-grid/flex-grid-item.js

@@ -55,11 +55,9 @@ export var flexGridItemMediaQueryStyle = function flexGridItemMediaQueryStyle(_r
     // Subtract .5px to avoid rounding issues on IE/Edge
     // See https://github.com/uber/baseweb/pull/1748
     width: "calc(".concat(widthCalc, " - .5px)")
-  }, _defineProperty(_objectSpread2, marginDirection, colGapQuantity && ( //flowlint-line sketchy-number-and:off
-  (itemIndex + 1) % colCount !== 0 ? colGap : 0)), _defineProperty(_objectSpread2, "marginBottom", rowGapQuantity && ( //flowlint-line sketchy-number-and:off
-  ~~(itemIndex / colCount) !== ~~((itemCount - 1) / colCount) ? rowGap : 0)), _objectSpread2), itemIndex === itemCount - 1 && (itemIndex + 1) % colCount !== 0 ? _defineProperty({}, marginDirection, "calc(".concat(colCount - itemIndex % colCount - 1, " * (").concat(colGap, " + ").concat(widthCalc, "))")) : {}));
+  }, _defineProperty(_objectSpread2, marginDirection, colGapQuantity && ((itemIndex + 1) % colCount !== 0 ? colGap : 0)), _defineProperty(_objectSpread2, "marginBottom", rowGapQuantity && (~~(itemIndex / colCount) !== ~~((itemCount - 1) / colCount) ? rowGap : 0)), _objectSpread2), itemIndex === itemCount - 1 && (itemIndex + 1) % colCount !== 0 ? _defineProperty({}, marginDirection, "calc(".concat(colCount - itemIndex % colCount - 1, " * (").concat(colGap, " + ").concat(widthCalc, "))")) : {}));
 };
-export var getResponsiveValue = function getResponsiveValue(responsive, i) {
+export function getResponsiveValue(responsive, i) {
   if (!responsive) {
     return null;
   }
@@ -69,7 +67,7 @@ export var getResponsiveValue = function getResponsiveValue(responsive, i) {
   }
 
   return responsive[i] || responsive[responsive.length - 1];
-};
+}
 export var flexGridItemStyle = function flexGridItemStyle(_ref3) {
   var $flexGridColumnCount = _ref3.$flexGridColumnCount,
       $flexGridColumnGap = _ref3.$flexGridColumnGap,
@@ -145,6 +143,7 @@ var FlexGridItem = function FlexGridItem(_ref4) {
   var blockOverrides = overrides ? mergeOverrides(flexGridItemOverrides, overrides) : flexGridItemOverrides;
   return /*#__PURE__*/React.createElement(Block // coerced to any because of how react components are typed.
   // cannot guarantee an html element
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   , _extends({
     ref: forwardedRef,
     as: as,

package/esm/flex-grid/flex-grid.js

@@ -78,9 +78,13 @@ var FlexGrid = function FlexGrid(_ref2) {
 };
 
 var FlexGridComponent = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  return /*#__PURE__*/React.createElement(FlexGrid, _extends({}, props, {
-    forwardedRef: ref
-  }));
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    React.createElement(FlexGrid, _extends({}, props, {
+      forwardedRef: ref
+    }))
+  );
 });
 FlexGridComponent.displayName = 'FlexGrid';
 export default FlexGridComponent;

package/esm/form-control/styled-components.js

@@ -27,6 +27,7 @@ export var Label = styled('label', function (props) {
   });
 });
 Label.displayName = "Label";
+Label.displayName = 'Label';
 export var LabelContainer = styled('span', function (_ref) {
   var sizing = _ref.$theme.sizing;
   return {
@@ -39,6 +40,7 @@ export var LabelContainer = styled('span', function (_ref) {
   };
 });
 LabelContainer.displayName = "LabelContainer";
+LabelContainer.displayName = 'LabelContainer';
 export var LabelEndEnhancer = styled('span', function (_ref2) {
   var $disabled = _ref2.$disabled,
       $counterError = _ref2.$counterError,
@@ -52,6 +54,7 @@ export var LabelEndEnhancer = styled('span', function (_ref2) {
   });
 });
 LabelEndEnhancer.displayName = "LabelEndEnhancer";
+LabelEndEnhancer.displayName = 'LabelEndEnhancer';
 export var Caption = styled('div', function (props) {
   var $error = props.$error,
       $positive = props.$positive,
@@ -80,6 +83,7 @@ export var Caption = styled('div', function (props) {
   });
 });
 Caption.displayName = "Caption";
+Caption.displayName = 'Caption';
 export var ControlContainer = styled('div', function (props) {
   var sizing = props.$theme.sizing;
   return {
@@ -87,4 +91,5 @@ export var ControlContainer = styled('div', function (props) {
     marginBottom: sizing.scale600
   };
 });
-ControlContainer.displayName = "ControlContainer";
+ControlContainer.displayName = "ControlContainer";
+ControlContainer.displayName = 'ControlContainer';

package/esm/header-navigation/styled-components.js

@@ -28,6 +28,7 @@ export var Root = styled('nav', function (props) {
   });
 });
 Root.displayName = "Root";
+Root.displayName = 'Root';
 export var NavigationItem = styled('li', function (props) {
   var $theme = props.$theme;
   var scale800 = $theme.sizing.scale800;
@@ -37,6 +38,7 @@ export var NavigationItem = styled('li', function (props) {
   };
 });
 NavigationItem.displayName = "NavigationItem";
+NavigationItem.displayName = 'NavigationItem';
 export var NavigationList = styled('ul', function (props) {
   var $align = props.$align,
       $theme = props.$theme;
@@ -64,4 +66,5 @@ export var NavigationList = styled('ul', function (props) {
     marginRight: 0
   };
 });
-NavigationList.displayName = "NavigationList";
+NavigationList.displayName = "NavigationList";
+NavigationList.displayName = 'NavigationList';

package/esm/helper/styled-components.js

@@ -196,7 +196,9 @@ export var StyledBody = styled('div', function (props) {
   });
 });
 StyledBody.displayName = "StyledBody";
+StyledBody.displayName = 'StyledBody';
 export var StyledArrow = styled('div', function (props) {
   return _objectSpread({}, clampArrowStyle(props.$arrowOffset, props.$placement, props.$theme.colors.backgroundPrimary));
 });
-StyledArrow.displayName = "StyledArrow";
+StyledArrow.displayName = "StyledArrow";
+StyledArrow.displayName = 'StyledArrow';

package/esm/helpers/overrides.js

@@ -14,15 +14,15 @@ Copyright (c) Uber Technologies, Inc.
 This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
-
-/* eslint-disable cup/no-undef */
 import * as React from 'react';
 import { isValidElementType } from 'react-is';
 import deepMerge from '../utils/deep-merge'; // Object -> any
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 /**
  * Given an override argument, returns the component implementation override if it exists
  */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function getOverride(_override) {
   if (isValidElementType(_override)) {
     return _override;
@@ -32,6 +32,7 @@ export function getOverride(_override) {
   if (_override && _typeof(_override) === 'object') {
     // Remove this 'any' once this flow issue is fixed:
     // https://github.com/facebook/flow/issues/6666
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     return _override.component;
   } // null/undefined
 
@@ -69,11 +70,13 @@ export function getOverrideProps(_override) {
 export function toObjectOverride(_override) {
   if (isValidElementType(_override)) {
     return {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       component: _override
     };
   } // Flow can't figure out that typeof 'function' above will
   // catch React.StatelessFunctionalComponent
   // (probably related to https://github.com/facebook/flow/issues/6666)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 
   return _override || {};
@@ -81,8 +84,11 @@ export function toObjectOverride(_override) {
 /**
  * Get a convenient override array that will always have [component, props]
  */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-export function getOverrides(_override, defaultComponent) {
+export function getOverrides( // eslint-disable-next-line @typescript-eslint/no-explicit-any
+_override, // eslint-disable-next-line @typescript-eslint/no-explicit-any
+defaultComponent) {
   var Component = getOverride(_override) || defaultComponent;
 
   if (_override && _typeof(_override) === 'object' && typeof _override.props === 'function') {
@@ -109,8 +115,6 @@ export function getOverrides(_override, defaultComponent) {
   var props = getOverrideProps(_override);
   return [Component, props];
 }
-/* flowlint unclear-type:error */
-
 /**
  * Merges two overrides objects – this is useful if you want to inject your own
  * overrides into a child component, but also accept further overrides from

package/esm/icon/build-icons.js

@@ -7,8 +7,6 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 
-/* eslint-disable flowtype/require-valid-file-annotation */
-
 /* eslint-env node*/
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

package/esm/icon/index.js

@@ -5,7 +5,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 export { default as Icon } from './icon';
-export { Svg as StyledSvg } from './styled-components';
+export { Svg as StyledSvg, getSvgStyles } from './styled-components';
 export * from './icon-exports';
 export * from './types';
 /** @deprecated use StyledComponentArgs instead. To be removed in future versions.*/

package/esm/icon/omit-dollar-prefixed-keys.js

@@ -4,6 +4,7 @@ Copyright (c) Uber Technologies, Inc.
 This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export default function omitDollarPrefixedKeys(source) {
   var result = {};
 

package/esm/icon/styled-components.js

@@ -40,4 +40,5 @@ export function getSvgStyles(_ref) {
   };
 }
 export var Svg = styled('svg', getSvgStyles);
-Svg.displayName = "Svg";
+Svg.displayName = "Svg";
+Svg.displayName = 'Svg';

package/esm/input/base-input.js

@@ -42,6 +42,7 @@ Copyright (c) Uber Technologies, Inc.
 This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 
 /* global window */
 import * as React from 'react';

package/esm/input/masked-input.js

@@ -70,8 +70,11 @@ export default 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/esm/input/stateful-container.js

@@ -87,6 +87,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/esm/input/styled-components.js

@@ -35,6 +35,7 @@ export var StyledMaskToggleButton = styled('button', function (_ref) {
   };
 });
 StyledMaskToggleButton.displayName = "StyledMaskToggleButton";
+StyledMaskToggleButton.displayName = 'StyledMaskToggleButton';
 export var StyledClearIconContainer = styled('div', function (_ref2) {
   var _SIZE$mini$SIZE$compa2;
 
@@ -53,6 +54,7 @@ export var StyledClearIconContainer = styled('div', function (_ref2) {
   };
 });
 StyledClearIconContainer.displayName = "StyledClearIconContainer";
+StyledClearIconContainer.displayName = 'StyledClearIconContainer';
 export var StyledClearIcon = styled(DeleteAlt, function (_ref3) {
   var $theme = _ref3.$theme,
       $isFocusVisible = _ref3.$isFocusVisible;
@@ -62,6 +64,7 @@ export var StyledClearIcon = styled(DeleteAlt, function (_ref3) {
   };
 });
 StyledClearIcon.displayName = "StyledClearIcon";
+StyledClearIcon.displayName = 'StyledClearIcon';
 
 function getInputPadding(size, sizing) {
   var _SIZE$mini$SIZE$compa3;
@@ -157,7 +160,13 @@ function getRootColors($disabled, $isFocused, $error) {
   };
 }
 
-function getRootBorderRadius(radius) {
+function getRootBorderRadius(size, borders) {
+  var radius = borders.inputBorderRadius;
+
+  if (size === SIZE.mini) {
+    radius = borders.inputBorderRadiusMini;
+  }
+
   return {
     borderTopLeftRadius: radius,
     borderBottomLeftRadius: radius,
@@ -197,11 +206,11 @@ export 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));
 };
-export var Root = styled('div', getRootStyles); // InputEnhancer
-
+export var Root = styled('div', getRootStyles);
 Root.displayName = "Root";
+Root.displayName = 'Root'; // InputEnhancer
 
 function getInputEnhancerPadding($size, sizing) {
   var _SIZE$mini$SIZE$compa5;
@@ -275,9 +284,9 @@ export var InputEnhancer = styled('div', function (props) {
     transitionDuration: animation.timing200,
     transitionTimingFunction: animation.easeOutCurve
   }, getFont($size, typography)), getInputEnhancerPadding($size, sizing)), getInputEnhancerColors($disabled, $isFocused, $error, $positive, colors));
-}); // InputContainer
-
+});
 InputEnhancer.displayName = "InputEnhancer";
+InputEnhancer.displayName = 'InputEnhancer'; // InputContainer
 
 function getInputContainerColors($disabled, $isFocused, $error, $positive, colors) {
   if ($disabled) {
@@ -334,6 +343,7 @@ export var getInputContainerStyles = function getInputContainerStyles(props) {
 };
 export var InputContainer = styled('div', getInputContainerStyles);
 InputContainer.displayName = "InputContainer";
+InputContainer.displayName = 'InputContainer';
 
 function getInputColors($disabled, $isFocused, $error, colors) {
   if ($disabled) {
@@ -390,4 +400,5 @@ export var getInputStyles = function getInputStyles(props) {
   }, getFont($size, typography)), getInputPadding($size, sizing)), getInputColors($disabled, $isFocused, $error, colors));
 };
 export var Input = styled('input', getInputStyles);
-Input.displayName = "Input";
+Input.displayName = "Input";
+Input.displayName = 'Input';

package/esm/input/utils.js

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

package/esm/layer/layer.js

@@ -74,6 +74,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);
@@ -87,6 +105,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);
@@ -145,6 +166,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/esm/layer/layers-manager.js

@@ -68,6 +68,12 @@ function defaultEventHandlerFn() {
 export 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,
@@ -81,6 +87,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;
 
@@ -100,6 +107,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];
@@ -108,6 +123,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) {
@@ -128,6 +157,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 {
@@ -148,6 +231,9 @@ var LayersManager = /*#__PURE__*/function (_React$Component) {
 
     _this.state = {
       escapeKeyHandlers: [],
+      keyDownHandlers: [],
+      keyUpHandlers: [],
+      keyPressHandlers: [],
       docClickHandlers: []
     };
     return _this;
@@ -160,7 +246,9 @@ var LayersManager = /*#__PURE__*/function (_React$Component) {
       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);
       }
@@ -169,7 +257,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);
       }
     }
@@ -207,6 +297,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
           }

package/esm/layout-grid/styled-components.js

@@ -29,6 +29,7 @@ export var StyledGridWrapper = styled('div', function (_ref) {
   };
 });
 StyledGridWrapper.displayName = "StyledGridWrapper";
+StyledGridWrapper.displayName = 'StyledGridWrapper';
 export var StyledGrid = styled('div', function (_ref2) {
   var $theme = _ref2.$theme,
       _ref2$$align = _ref2.$align,
@@ -67,6 +68,7 @@ export var StyledGrid = styled('div', function (_ref2) {
   }, gridStyles);
 });
 StyledGrid.displayName = "StyledGrid";
+StyledGrid.displayName = 'StyledGrid';
 export var StyledCell = styled('div', function (_ref3) {
   var $theme = _ref3.$theme,
       _ref3$$align = _ref3.$align,
@@ -120,6 +122,7 @@ export var StyledCell = styled('div', function (_ref3) {
   }, cellStyles);
 });
 StyledCell.displayName = "StyledCell";
+StyledCell.displayName = 'StyledCell';
 
 function getResponsiveNumber(responsive, i) {
   var res = getResponsiveValue(responsive, i);