baseui 12.0.0 → 12.1.0

package/es/drawer/styled-components.js

@@ -98,7 +98,8 @@ function getAnchorStyles(props) {
         return {};
       }
   }
-}
+} // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 
 export const StyledRoot = styled('div', props => {
   return {
@@ -111,6 +112,7 @@ export const StyledRoot = styled('div', props => {
   };
 });
 StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
 export const StyledBackdrop = styled('div', props => {
   const {
     $animating,
@@ -139,6 +141,7 @@ export const StyledBackdrop = styled('div', props => {
   };
 });
 StyledBackdrop.displayName = "StyledBackdrop";
+StyledBackdrop.displayName = 'StyledBackdrop';
 export const StyledDrawerContainer = styled('div', props => {
   const {
     $animating,
@@ -163,6 +166,7 @@ export const StyledDrawerContainer = styled('div', props => {
   };
 });
 StyledDrawerContainer.displayName = "StyledDrawerContainer";
+StyledDrawerContainer.displayName = 'StyledDrawerContainer';
 export const StyledDrawerBody = styled('div', props => {
   const {
     $theme
@@ -178,6 +182,7 @@ export const StyledDrawerBody = styled('div', props => {
   };
 });
 StyledDrawerBody.displayName = "StyledDrawerBody";
+StyledDrawerBody.displayName = 'StyledDrawerBody';
 export const StyledClose = styled('button', props => {
   const {
     $theme,
@@ -227,7 +232,9 @@ export const StyledClose = styled('button', props => {
   };
 });
 StyledClose.displayName = "StyledClose";
+StyledClose.displayName = 'StyledClose';
 export const Hidden = styled('div', {
   display: 'none'
 });
-Hidden.displayName = "Hidden";
+Hidden.displayName = "Hidden";
+Hidden.displayName = 'Hidden';

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

@@ -39,6 +39,7 @@ export const StyledFileDragAndDrop = styled('div', props => {
   };
 });
 StyledFileDragAndDrop.displayName = "StyledFileDragAndDrop";
+StyledFileDragAndDrop.displayName = 'StyledFileDragAndDrop';
 export const StyledContentMessage = styled('div', ({
   $theme,
   $afterFileDrop,
@@ -49,6 +50,7 @@ export const StyledContentMessage = styled('div', ({
   marginBottom: $afterFileDrop ? $theme.sizing.scale100 : null
 }));
 StyledContentMessage.displayName = "StyledContentMessage";
+StyledContentMessage.displayName = 'StyledContentMessage';
 export const StyledContentSeparator = StyledContentMessage;
 export const StyledErrorMessage = styled('div', props => ({ ...props.$theme.typography.LabelMedium,
   color: props.$theme.colors.negative,
@@ -56,9 +58,12 @@ export const StyledErrorMessage = styled('div', props => ({ ...props.$theme.typo
   marginBottom: props.$afterFileDrop ? props.$theme.sizing.scale100 : null
 }));
 StyledErrorMessage.displayName = "StyledErrorMessage";
+StyledErrorMessage.displayName = 'StyledErrorMessage';
 export const StyledRoot = styled('div', props => ({ ...props.$theme.typography.font300,
   color: props.$theme.colors.fileUploaderMessageColor
 }));
 StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
 export const StyledHiddenInput = styled('input', {});
-StyledHiddenInput.displayName = "StyledHiddenInput";
+StyledHiddenInput.displayName = "StyledHiddenInput";
+StyledHiddenInput.displayName = 'StyledHiddenInput';

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

@@ -31,18 +31,16 @@ export const flexGridItemMediaQueryStyle = ({
     // See https://github.com/uber/baseweb/pull/1748
     width: `calc(${widthCalc} - .5px)`,
     // Add colGap except at end of row
-    [marginDirection]: colGapQuantity && ( //flowlint-line sketchy-number-and:off
-    (itemIndex + 1) % colCount !== 0 ? colGap : 0),
+    [marginDirection]: colGapQuantity && ((itemIndex + 1) % colCount !== 0 ? colGap : 0),
     // Add rowGap except at end of column
-    marginBottom: rowGapQuantity && ( //flowlint-line sketchy-number-and:off
-    ~~(itemIndex / colCount) !== ~~((itemCount - 1) / colCount) ? rowGap : 0),
+    marginBottom: rowGapQuantity && (~~(itemIndex / colCount) !== ~~((itemCount - 1) / colCount) ? rowGap : 0),
     // Add space to make up for missing columns if last row ends early
     ...(itemIndex === itemCount - 1 && (itemIndex + 1) % colCount !== 0 ? {
       [marginDirection]: `calc(${colCount - itemIndex % colCount - 1} * (${colGap} + ${widthCalc}))`
     } : {})
   });
 };
-export const getResponsiveValue = (responsive, i) => {
+export function getResponsiveValue(responsive, i) {
   if (!responsive) {
     return null;
   }
@@ -52,7 +50,7 @@ export const getResponsiveValue = (responsive, i) => {
   }
 
   return responsive[i] || responsive[responsive.length - 1];
-};
+}
 export const flexGridItemStyle = ({
   $flexGridColumnCount,
   $flexGridColumnGap,
@@ -129,6 +127,7 @@ const FlexGridItem = ({
   const 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/es/flex-grid/flex-grid.js

@@ -53,7 +53,10 @@ const FlexGrid = ({
   }));
 };
 
-const FlexGridComponent = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(FlexGrid, _extends({}, props, {
+const FlexGridComponent = /*#__PURE__*/React.forwardRef((props, ref) =>
+/*#__PURE__*/
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+React.createElement(FlexGrid, _extends({}, props, {
   forwardedRef: ref
 })));
 FlexGridComponent.displayName = 'FlexGrid';

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

@@ -24,6 +24,7 @@ export const Label = styled('label', props => {
   };
 });
 Label.displayName = "Label";
+Label.displayName = 'Label';
 export const LabelContainer = styled('span', ({
   $theme: {
     sizing
@@ -37,6 +38,7 @@ export const LabelContainer = styled('span', ({
   marginLeft: 0
 }));
 LabelContainer.displayName = "LabelContainer";
+LabelContainer.displayName = 'LabelContainer';
 export const LabelEndEnhancer = styled('span', ({
   $disabled,
   $counterError,
@@ -50,6 +52,7 @@ export const LabelEndEnhancer = styled('span', ({
   color: $counterError ? colors.negative400 : $disabled ? colors.contentSecondary : colors.contentPrimary
 }));
 LabelEndEnhancer.displayName = "LabelEndEnhancer";
+LabelEndEnhancer.displayName = 'LabelEndEnhancer';
 export const Caption = styled('div', props => {
   const {
     $error,
@@ -81,6 +84,7 @@ export const Caption = styled('div', props => {
   };
 });
 Caption.displayName = "Caption";
+Caption.displayName = 'Caption';
 export const ControlContainer = styled('div', props => {
   const {
     $theme: {
@@ -92,4 +96,5 @@ export const ControlContainer = styled('div', props => {
     marginBottom: sizing.scale600
   };
 });
-ControlContainer.displayName = "ControlContainer";
+ControlContainer.displayName = "ControlContainer";
+ControlContainer.displayName = 'ControlContainer';

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

@@ -32,6 +32,7 @@ export const Root = styled('nav', props => {
   };
 });
 Root.displayName = "Root";
+Root.displayName = 'Root';
 export const NavigationItem = styled('li', props => {
   const {
     $theme
@@ -47,6 +48,7 @@ export const NavigationItem = styled('li', props => {
   };
 });
 NavigationItem.displayName = "NavigationItem";
+NavigationItem.displayName = 'NavigationItem';
 export const NavigationList = styled('ul', props => {
   const {
     $align,
@@ -80,4 +82,5 @@ export const NavigationList = styled('ul', props => {
     marginRight: 0
   };
 });
-NavigationList.displayName = "NavigationList";
+NavigationList.displayName = "NavigationList";
+NavigationList.displayName = 'NavigationList';

package/es/helper/styled-components.js

@@ -161,8 +161,10 @@ export const StyledBody = styled('div', props => {
   };
 });
 StyledBody.displayName = "StyledBody";
+StyledBody.displayName = 'StyledBody';
 export const StyledArrow = styled('div', props => {
   return { ...clampArrowStyle(props.$arrowOffset, props.$placement, props.$theme.colors.backgroundPrimary)
   };
 });
-StyledArrow.displayName = "StyledArrow";
+StyledArrow.displayName = "StyledArrow";
+StyledArrow.displayName = 'StyledArrow';

package/es/helpers/overrides.js

@@ -6,15 +6,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;
@@ -24,6 +24,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
 
@@ -61,11 +62,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 || {};
@@ -73,8 +76,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) {
   const Component = getOverride(_override) || defaultComponent;
 
   if (_override && typeof _override === 'object' && typeof _override.props === 'function') {
@@ -101,8 +107,6 @@ export function getOverrides(_override, defaultComponent) {
   const 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/es/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*/
 
 const fs = require('fs');

package/es/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/es/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) {
   const result = {};
 

package/es/icon/styled-components.js

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

package/es/input/base-input.js

@@ -8,6 +8,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/es/input/masked-input.js

@@ -13,9 +13,13 @@ import { Input as StyledInput } from './styled-components';
 const MaskOverride = /*#__PURE__*/React.forwardRef(({
   // do nothing with these - we just don't want to pass it to the InputMask, as
   // it does not have these properties
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   startEnhancer,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   endEnhancer,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   error,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   positive,
   // below are props that are used by the masked-input
   onChange,
@@ -53,8 +57,11 @@ export default function MaskedInput({
   } = {},
   ...restProps
 }) {
-  let componentOverride = MaskOverride;
-  let propsOverride = {};
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let componentOverride = MaskOverride; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+  let propsOverride = {}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
   let styleOverride = {};
 
   if (typeof inputOverride === 'function') {

package/es/input/stateful-container.js

@@ -35,6 +35,7 @@ class StatefulContainer extends React.Component {
   }
 
   render() {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const {
       children,
       initialState,

package/es/input/styled-components.js

@@ -33,6 +33,7 @@ export const StyledMaskToggleButton = styled('button', ({
   };
 });
 StyledMaskToggleButton.displayName = "StyledMaskToggleButton";
+StyledMaskToggleButton.displayName = 'StyledMaskToggleButton';
 export const StyledClearIconContainer = styled('div', ({
   $alignTop = false,
   $size,
@@ -54,6 +55,7 @@ export const StyledClearIconContainer = styled('div', ({
   };
 });
 StyledClearIconContainer.displayName = "StyledClearIconContainer";
+StyledClearIconContainer.displayName = 'StyledClearIconContainer';
 export const StyledClearIcon = styled(DeleteAlt, ({
   $theme,
   $isFocusVisible
@@ -62,6 +64,7 @@ export const StyledClearIcon = styled(DeleteAlt, ({
   outline: $isFocusVisible ? `solid 3px ${$theme.colors.accent}` : 'none'
 }));
 StyledClearIcon.displayName = "StyledClearIcon";
+StyledClearIcon.displayName = 'StyledClearIcon';
 
 function getInputPadding(size, sizing) {
   return {
@@ -160,7 +163,13 @@ function getRootColors($disabled, $isFocused, $error, $positive = false, colors)
   };
 }
 
-function getRootBorderRadius(radius) {
+function getRootBorderRadius(size, borders) {
+  let radius = borders.inputBorderRadius;
+
+  if (size === SIZE.mini) {
+    radius = borders.inputBorderRadiusMini;
+  }
+
   return {
     borderTopLeftRadius: radius,
     borderBottomLeftRadius: radius,
@@ -203,15 +212,15 @@ 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)
   };
 };
-export const Root = styled('div', getRootStyles); // InputEnhancer
-
+export const Root = styled('div', getRootStyles);
 Root.displayName = "Root";
+Root.displayName = 'Root'; // InputEnhancer
 
 function getInputEnhancerPadding($size, sizing) {
   return {
@@ -294,9 +303,9 @@ export const InputEnhancer = styled('div', props => {
     ...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) {
@@ -358,6 +367,7 @@ export const getInputContainerStyles = props => {
 };
 export const InputContainer = styled('div', getInputContainerStyles);
 InputContainer.displayName = "InputContainer";
+InputContainer.displayName = 'InputContainer';
 
 function getInputColors($disabled, $isFocused, $error, colors) {
   if ($disabled) {
@@ -420,4 +430,5 @@ export const getInputStyles = props => {
   };
 };
 export const Input = styled('input', getInputStyles);
-Input.displayName = "Input";
+Input.displayName = "Input";
+Input.displayName = 'Input';

package/es/input/utils.js

@@ -12,6 +12,7 @@ export function getSharedProps(props, state) {
     adjoined,
     size,
     required,
+    resize,
     readOnly
   } = props;
   const {
@@ -25,6 +26,7 @@ export function getSharedProps(props, state) {
     $adjoined: adjoined,
     $size: size,
     $required: required,
+    $resize: resize,
     $isReadOnly: readOnly
   };
 }

package/es/layer/layer.js

@@ -39,6 +39,24 @@ class LayerComponent extends React.Component {
       }
     });
 
+    _defineProperty(this, "onKeyDown", event => {
+      if (this.props.onKeyDown) {
+        this.props.onKeyDown(event);
+      }
+    });
+
+    _defineProperty(this, "onKeyUp", event => {
+      if (this.props.onKeyUp) {
+        this.props.onKeyUp(event);
+      }
+    });
+
+    _defineProperty(this, "onKeyPress", event => {
+      if (this.props.onKeyPress) {
+        this.props.onKeyPress(event);
+      }
+    });
+
     _defineProperty(this, "onDocumentClick", event => {
       if (this.props.onDocumentClick) {
         this.props.onDocumentClick(event);
@@ -48,6 +66,9 @@ class LayerComponent extends React.Component {
 
   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);
@@ -106,6 +127,9 @@ class LayerComponent extends React.Component {
 
   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/es/layer/layers-manager.js

@@ -26,6 +26,12 @@ function defaultEventHandlerFn() {
 export const 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,
@@ -34,6 +40,7 @@ export const LayersContext = /*#__PURE__*/React.createContext({
 export const Provider = LayersContext.Provider;
 export const Consumer = LayersContext.Consumer;
 export default class LayersManager extends React.Component {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   constructor(props) {
     super(props);
 
@@ -49,6 +56,14 @@ export default class LayersManager extends React.Component {
       }
     });
 
+    _defineProperty(this, "onKeyDown", event => {
+      const keyDownHandler = this.state.keyDownHandlers[this.state.keyDownHandlers.length - 1];
+
+      if (keyDownHandler) {
+        keyDownHandler(event);
+      }
+    });
+
     _defineProperty(this, "onKeyUp", event => {
       if (event.key === 'Escape') {
         const escapeKeyHandler = this.state.escapeKeyHandlers[this.state.escapeKeyHandlers.length - 1];
@@ -57,6 +72,20 @@ export default class LayersManager extends React.Component {
           escapeKeyHandler();
         }
       }
+
+      const keyUpHandler = this.state.keyUpHandlers[this.state.keyUpHandlers.length - 1];
+
+      if (keyUpHandler) {
+        keyUpHandler(event);
+      }
+    });
+
+    _defineProperty(this, "onKeyPress", event => {
+      const keyPressHandler = this.state.keyPressHandlers[this.state.keyPressHandlers.length - 1];
+
+      if (keyPressHandler) {
+        keyPressHandler(event);
+      }
     });
 
     _defineProperty(this, "onAddEscapeHandler", escapeKeyHandler => {
@@ -75,6 +104,54 @@ export default class LayersManager extends React.Component {
       });
     });
 
+    _defineProperty(this, "onAddKeyDownHandler", keyDownHandler => {
+      this.setState(prev => {
+        return {
+          keyDownHandlers: [...prev.keyDownHandlers, keyDownHandler]
+        };
+      });
+    });
+
+    _defineProperty(this, "onRemoveKeyDownHandler", keyDownHandler => {
+      this.setState(prev => {
+        return {
+          keyDownHandlers: prev.keyDownHandlers.filter(handler => handler !== keyDownHandler)
+        };
+      });
+    });
+
+    _defineProperty(this, "onAddKeyUpHandler", keyUpHandler => {
+      this.setState(prev => {
+        return {
+          keyUpHandlers: [...prev.keyUpHandlers, keyUpHandler]
+        };
+      });
+    });
+
+    _defineProperty(this, "onRemoveKeyUpHandler", keyUpHandler => {
+      this.setState(prev => {
+        return {
+          keyUpHandlers: prev.keyUpHandlers.filter(handler => handler !== keyUpHandler)
+        };
+      });
+    });
+
+    _defineProperty(this, "onAddKeyPressHandler", keyPressHandler => {
+      this.setState(prev => {
+        return {
+          keyPressHandlers: [...prev.keyPressHandlers, keyPressHandler]
+        };
+      });
+    });
+
+    _defineProperty(this, "onRemoveKeyPressHandler", keyPressHandler => {
+      this.setState(prev => {
+        return {
+          keyPressHandlers: prev.keyPressHandlers.filter(handler => handler !== keyPressHandler)
+        };
+      });
+    });
+
     _defineProperty(this, "onAddDocClickHandler", docClickHandler => {
       this.setState(prev => {
         return {
@@ -93,6 +170,9 @@ export default class LayersManager extends React.Component {
 
     this.state = {
       escapeKeyHandlers: [],
+      keyDownHandlers: [],
+      keyUpHandlers: [],
+      keyPressHandlers: [],
       docClickHandlers: []
     };
   }
@@ -102,7 +182,9 @@ export default class LayersManager extends 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);
     }
@@ -110,7 +192,9 @@ export default class LayersManager extends React.Component {
 
   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);
     }
   }
@@ -137,6 +221,12 @@ export default class LayersManager extends React.Component {
           zIndex: this.props.zIndex,
           addEscapeHandler: this.onAddEscapeHandler,
           removeEscapeHandler: this.onRemoveEscapeHandler,
+          addKeyDownHandler: this.onAddKeyDownHandler,
+          removeKeyDownHandler: this.onRemoveKeyDownHandler,
+          addKeyUpHandler: this.onAddKeyUpHandler,
+          removeKeyUpHandler: this.onRemoveKeyUpHandler,
+          addKeyPressHandler: this.onAddKeyPressHandler,
+          removeKeyPressHandler: this.onRemoveKeyPressHandler,
           addDocClickHandler: this.onAddDocClickHandler,
           removeDocClickHandler: this.onRemoveDocClickHandler
         }

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

@@ -18,6 +18,7 @@ export const StyledGridWrapper = styled('div', ({
   maxWidth: $behavior === BEHAVIOR.fixed ? `${$gridMaxWidth + 2 * getResponsiveNumber($gridMargins, Infinity) - 1}${$gridUnit}` : null
 }));
 StyledGridWrapper.displayName = "StyledGridWrapper";
+StyledGridWrapper.displayName = 'StyledGridWrapper';
 export const StyledGrid = styled('div', ({
   $theme,
   $align = null,
@@ -54,6 +55,7 @@ export const StyledGrid = styled('div', ({
   };
 });
 StyledGrid.displayName = "StyledGrid";
+StyledGrid.displayName = 'StyledGrid';
 export const StyledCell = styled('div', ({
   $theme,
   $align = null,
@@ -105,6 +107,7 @@ export const StyledCell = styled('div', ({
   };
 });
 StyledCell.displayName = "StyledCell";
+StyledCell.displayName = 'StyledCell';
 
 function getResponsiveNumber(responsive, i) {
   const res = getResponsiveValue(responsive, i);