baseui 0.0.0-next-e90bd38 → 0.0.0-next-a48c2fd

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,
@@ -113,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];
@@ -121,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) {
@@ -141,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 {
@@ -161,6 +243,9 @@ var LayersManager = /*#__PURE__*/function (_React$Component) {
 
     _this.state = {
       escapeKeyHandlers: [],
+      keyDownHandlers: [],
+      keyUpHandlers: [],
+      keyPressHandlers: [],
       docClickHandlers: []
     };
     return _this;
@@ -173,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);
       }
@@ -182,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);
       }
     }
@@ -220,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
           }

package/layer/layers-manager.js.flow

@@ -25,6 +25,12 @@ function defaultEventHandlerFn() {
 export const LayersContext = React.createContext<LayersContextT>({
   addEscapeHandler: defaultEventHandlerFn,
   removeEscapeHandler: defaultEventHandlerFn,
+  addKeyDownHandler: defaultEventHandlerFn,
+  removeKeyDownHandler: defaultEventHandlerFn,
+  addKeyUpHandler: defaultEventHandlerFn,
+  removeKeyUpHandler: defaultEventHandlerFn,
+  addKeyPressHandler: defaultEventHandlerFn,
+  removeKeyPressHandler: defaultEventHandlerFn,
   addDocClickHandler: defaultEventHandlerFn,
   removeDocClickHandler: defaultEventHandlerFn,
   host: undefined,
@@ -49,7 +55,13 @@ export default class LayersManager extends React.Component<
 
   constructor(props: LayersManagerPropsT) {
     super(props);
-    this.state = { escapeKeyHandlers: [], docClickHandlers: [] };
+    this.state = {
+      escapeKeyHandlers: [],
+      keyDownHandlers: [],
+      keyUpHandlers: [],
+      keyPressHandlers: [],
+      docClickHandlers: [],
+    };
   }
 
   componentDidMount() {
@@ -57,7 +69,9 @@ export default class LayersManager extends React.Component<
     initFocusVisible(this.containerRef.current);
 
     if (__BROWSER__) {
+      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);
     }
@@ -65,7 +79,9 @@ export default class LayersManager extends React.Component<
 
   componentWillUnmount() {
     if (__BROWSER__) {
+      document.removeEventListener('keydown', this.onKeyDown);
       document.removeEventListener('keyup', this.onKeyUp);
+      document.removeEventListener('keypress', this.onKeyPress);
       document.removeEventListener('mousedown', this.onDocumentClick);
     }
   }
@@ -77,6 +93,13 @@ export default class LayersManager extends React.Component<
     }
   };
 
+  onKeyDown = (event: KeyboardEvent) => {
+    const keyDownHandler = this.state.keyDownHandlers[this.state.keyDownHandlers.length - 1];
+    if (keyDownHandler) {
+      keyDownHandler(event);
+    }
+  };
+
   onKeyUp = (event: KeyboardEvent) => {
     if (event.key === 'Escape') {
       const escapeKeyHandler =
@@ -85,6 +108,18 @@ export default class LayersManager extends React.Component<
         escapeKeyHandler();
       }
     }
+
+    const keyUpHandler = this.state.keyUpHandlers[this.state.keyUpHandlers.length - 1];
+    if (keyUpHandler) {
+      keyUpHandler(event);
+    }
+  };
+
+  onKeyPress = (event: KeyboardEvent) => {
+    const keyPressHandler = this.state.keyPressHandlers[this.state.keyPressHandlers.length - 1];
+    if (keyPressHandler) {
+      keyPressHandler(event);
+    }
   };
 
   onAddEscapeHandler = (escapeKeyHandler: () => mixed) => {
@@ -101,6 +136,48 @@ export default class LayersManager extends React.Component<
     });
   };
 
+  onAddKeyDownHandler = (keyDownHandler: () => mixed) => {
+    this.setState((prev) => {
+      return { keyDownHandlers: [...prev.keyDownHandlers, keyDownHandler] };
+    });
+  };
+
+  onRemoveKeyDownHandler = (keyDownHandler: () => mixed) => {
+    this.setState((prev) => {
+      return {
+        keyDownHandlers: prev.keyDownHandlers.filter((handler) => handler !== keyDownHandler),
+      };
+    });
+  };
+
+  onAddKeyUpHandler = (keyUpHandler: () => mixed) => {
+    this.setState((prev) => {
+      return { keyUpHandlers: [...prev.keyUpHandlers, keyUpHandler] };
+    });
+  };
+
+  onRemoveKeyUpHandler = (keyUpHandler: () => mixed) => {
+    this.setState((prev) => {
+      return {
+        keyUpHandlers: prev.keyUpHandlers.filter((handler) => handler !== keyUpHandler),
+      };
+    });
+  };
+
+  onAddKeyPressHandler = (keyPressHandler: () => mixed) => {
+    this.setState((prev) => {
+      return { keyPressHandlers: [...prev.keyPressHandlers, keyPressHandler] };
+    });
+  };
+
+  onRemoveKeyPressHandler = (keyPressHandler: () => mixed) => {
+    this.setState((prev) => {
+      return {
+        keyPressHandlers: prev.keyPressHandlers.filter((handler) => handler !== keyPressHandler),
+      };
+    });
+  };
+
   onAddDocClickHandler = (docClickHandler: (event: MouseEvent) => mixed) => {
     this.setState((prev) => {
       return { docClickHandlers: [...prev.docClickHandlers, docClickHandler] };
@@ -143,6 +220,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/layer/types.d.ts

@@ -12,6 +12,9 @@ export declare type LayersManagerProps = {
 };
 export declare type LayersManagerState = {
     escapeKeyHandlers: Array<() => unknown>;
+    keyDownHandlers: Array<(event: KeyboardEvent) => unknown>;
+    keyUpHandlers: Array<(event: KeyboardEvent) => unknown>;
+    keyPressHandlers: Array<(event: KeyboardEvent) => unknown>;
     docClickHandlers: Array<(event: MouseEvent) => unknown>;
 };
 export declare type LayersContextProps = {
@@ -19,6 +22,12 @@ export declare type LayersContextProps = {
     zIndex?: number;
     addEscapeHandler: (a: () => unknown) => void;
     removeEscapeHandler: (a: () => unknown) => void;
+    addKeyDownHandler: (a: () => unknown) => void;
+    removeKeyDownHandler: (a: () => unknown) => void;
+    addKeyUpHandler: (a: () => unknown) => void;
+    removeKeyUpHandler: (a: () => unknown) => void;
+    addKeyPressHandler: (a: () => unknown) => void;
+    removeKeyPressHandler: (a: () => unknown) => void;
     addDocClickHandler: (a: () => unknown) => void;
     removeDocClickHandler: (a: () => unknown) => void;
 };
@@ -43,6 +52,15 @@ export declare type LayerProps = {
     /** Handler called when escape key is pressed.
       Only the top most layer's handler is called. */
     onEscape?: () => unknown;
+    /** Handler called when key down event is happened.
+      Only the top most layer's handler is called. */
+    onKeyDown?: (event: KeyboardEvent) => unknown;
+    /** Handler called when key up event is happened.
+      Only the top most layer's handler is called. */
+    onKeyUp?: (event: KeyboardEvent) => unknown;
+    /** Handler called when key press event is happened.
+      Only the top most layer's handler is called. */
+    onKeyPress?: (event: KeyboardEvent) => unknown;
     /** Handler called when mousedown event happens on the document.
       Only the top most layer's handler is called. */
     onDocumentClick?: (event: MouseEvent) => unknown;
@@ -61,6 +79,9 @@ export declare type LayerComponentProps = {
     isHoverLayer?: boolean;
     mountNode?: HTMLElement;
     onEscape?: () => unknown;
+    onKeyDown?: (event: KeyboardEvent) => unknown;
+    onKeyUp?: (event: KeyboardEvent) => unknown;
+    onKeyPress?: (event: KeyboardEvent) => unknown;
     onDocumentClick?: (event: MouseEvent) => unknown;
     onMount?: () => unknown;
     onUnmount?: () => unknown;

package/layer/types.js.flow

@@ -22,7 +22,10 @@ export type LayersManagerPropsT = {
 };
 
 export type LayersManagerStateT = {|
-  escapeKeyHandlers: Array<() => mixed>,
+  escapeKeyHandlers: Array < () => mixed >,
+  keyDownHandlers: Array < (event: KeyboardEvent) => mixed >,
+  keyUpHandlers: Array < (event: KeyboardEvent) => mixed >,
+  keyPressHandlers: Array < (event: KeyboardEvent) => mixed >,
   docClickHandlers: Array<(event: MouseEvent) => mixed>,
 |};
 
@@ -31,6 +34,12 @@ export type LayersContextT = {
   zIndex?: number,
   addEscapeHandler: (() => mixed) => void,
   removeEscapeHandler: (() => mixed) => void,
+  addKeyDownHandler: (() => mixed) => void,
+  removeKeyDownHandler: (() => mixed) => void,
+  addKeyUpHandler: (() => mixed) => void,
+  removeKeyUpHandler: (() => mixed) => void,
+  addKeyPressHandler: (() => mixed) => void,
+  removeKeyPressHandler: (() => mixed) => void,
   addDocClickHandler: (() => mixed) => void,
   removeDocClickHandler: (() => mixed) => void,
 };
@@ -56,6 +65,15 @@ export type LayerPropsT = {
   /** Handler called when escape key is pressed.
     Only the top most layer's handler is called. */
   onEscape?: () => mixed,
+  /** Handler called when key down event is happened.
+    Only the top most layer's handler is called. */
+  onKeyDown?: (event: KeyboardEvent) => mixed,
+  /** Handler called when key up event is happened.
+    Only the top most layer's handler is called. */
+  onKeyUp?: (event: KeyboardEvent) => mixed,
+  /** Handler called when key press event is happened.
+    Only the top most layer's handler is called. */
+  onKeyPress?: (event: KeyboardEvent) => mixed,
   /** Handler called when mousedown event happens on the document.
     Only the top most layer's handler is called. */
   onDocumentClick?: (event: MouseEvent) => mixed,
@@ -75,6 +93,9 @@ export type LayerComponentPropsT = {
   isHoverLayer?: boolean,
   mountNode?: HTMLElement,
   onEscape?: () => mixed,
+  onKeyDown?: (event: KeyboardEvent) => mixed,
+  onKeyUp?: (event: KeyboardEvent) => mixed,
+  onKeyPress?: (event: KeyboardEvent) => mixed,
   onDocumentClick?: (event: MouseEvent) => mixed,
   onMount?: () => mixed,
   onUnmount?: () => mixed,

package/message-card/constants.d.ts

@@ -0,0 +1,12 @@
+export declare const BACKGROUND_COLOR_TYPE: Readonly<{
+    readonly light: "light";
+    readonly dark: "dark";
+}>;
+export declare const IMAGE_LAYOUT: Readonly<{
+    readonly top: "top";
+    readonly trailing: "trailing";
+}>;
+export declare const BUTTON_KIND: Readonly<{
+    readonly secondary: "secondary";
+    readonly tertiary: "tertiary";
+}>;

package/message-card/constants.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IMAGE_LAYOUT = exports.BUTTON_KIND = exports.BACKGROUND_COLOR_TYPE = void 0;
+
+var _button = require("../button");
+
+var _Object$freeze;
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var BACKGROUND_COLOR_TYPE = Object.freeze({
+  light: 'light',
+  dark: 'dark'
+});
+exports.BACKGROUND_COLOR_TYPE = BACKGROUND_COLOR_TYPE;
+var IMAGE_LAYOUT = Object.freeze({
+  top: 'top',
+  trailing: 'trailing'
+});
+exports.IMAGE_LAYOUT = IMAGE_LAYOUT;
+var BUTTON_KIND = Object.freeze((_Object$freeze = {}, _defineProperty(_Object$freeze, _button.KIND.secondary, _button.KIND.secondary), _defineProperty(_Object$freeze, _button.KIND.tertiary, _button.KIND.tertiary), _Object$freeze));
+exports.BUTTON_KIND = BUTTON_KIND;

package/message-card/index.d.ts

@@ -0,0 +1,4 @@
+export { default as MessageCard } from './message-card';
+export * from './constants';
+export * from './styled-components';
+export * from './types';

package/message-card/index.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  MessageCard: true
+};
+Object.defineProperty(exports, "MessageCard", {
+  enumerable: true,
+  get: function get() {
+    return _messageCard.default;
+  }
+});
+
+var _messageCard = _interopRequireDefault(require("./message-card"));
+
+var _constants = require("./constants");
+
+Object.keys(_constants).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _constants[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _constants[key];
+    }
+  });
+});
+
+var _styledComponents = require("./styled-components");
+
+Object.keys(_styledComponents).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _styledComponents[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _styledComponents[key];
+    }
+  });
+});
+
+var _types = require("./types");
+
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _types[key];
+    }
+  });
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/message-card/index.js.flow

@@ -0,0 +1,72 @@
+/*
+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.
+*/
+// @flow
+import * as React from 'react';
+import type { OverrideT } from '../helpers/overrides.js';
+import { type StyletronComponent } from 'styletron-react';
+
+declare export var BACKGROUND_COLOR_TYPE: {
+  light: 'light',
+  dark: 'dark',
+};
+
+declare export var IMAGE_LAYOUT: {
+  top: 'top',
+  trailing: 'trailing',
+};
+
+declare export var BUTTON_KIND: {
+  secondary: 'secondary',
+  tertiary: 'tertiary',
+};
+
+export type MessageCardOverridesT = {
+  Root?: OverrideT,
+  ContentContainer?: OverrideT,
+  HeadingContainer?: OverrideT,
+  ParagraphContainer?: OverrideT,
+  Button?: OverrideT,
+  Image?: OverrideT,
+};
+
+export type MessageCardPropsT = {
+  onClick: (SyntheticEvent<HTMLButtonElement>) => mixed,
+  heading?: string,
+  paragraph?: string,
+  buttonLabel?: string,
+  buttonKind?: $Values<typeof BUTTON_KIND>,
+  backgroundColor?: string,
+  backgroundColorType?: $Values<typeof BACKGROUND_COLOR_TYPE>,
+  image?: {
+    src: string,
+    layout?: $Values<typeof IMAGE_LAYOUT>,
+    backgroundPosition?: string,
+  },
+  overrides?: MessageCardOverridesT,
+};
+
+declare export var StyledRoot: StyletronComponent<
+  'button',
+  {
+    $backgroundColor: string,
+    $backgroundColorType: ?$Values<typeof BACKGROUND_COLOR_TYPE>,
+    $imageLayout: $Values<typeof IMAGE_LAYOUT>,
+  }
+>;
+declare export var StyledImage: StyletronComponent<
+  'img',
+  { $src: string, $imageLayout: $Values<typeof IMAGE_LAYOUT>, $backgroundPosition: string }
+>;
+declare export var StyledContentContainer: StyletronComponent<'div', {}>;
+declare export var StyledHeadingContainer: StyletronComponent<'div', {}>;
+declare export var StyledParagraphContainer: StyletronComponent<'div', {}>;
+
+declare export var MessageCard: React.ComponentType<MessageCardPropsT>;
+
+declare var __DEV__: boolean;
+declare var __NODE__: boolean;
+declare var __BROWSER__: boolean;

package/message-card/message-card.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { MessageCardProps } from './types';
+declare const MessageCard: ({ backgroundColor, backgroundColorType: backgroundColorTypeProp, buttonKind, buttonLabel, heading, image, onClick, overrides, paragraph, }: MessageCardProps) => JSX.Element;
+export default MessageCard;