@deephaven/components 0.43.0 → 0.44.0

package/dist/menu-actions/DropdownMenu.js

@@ -0,0 +1,174 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+/**
+ * Add dropdown menu that you add onto any component.
+ *
+ * Similar to the context-actions package, accepts list of actions to create a dropdown menu.
+ * Note: Does not support nested sub-menus.
+ *
+ * Usage:
+ * let actions = [{
+ *   title: 'My Action',
+ *   action: () => { alert('My Action Clicked!') }
+ *   icon: faPrint,         // Limited to FontAwesome icons for now.
+ *   shortcut: Shortcut,        // Shortcut class instance
+ *   group: ContextActions.groups.default,  // What group to group the context action with
+ *   order: null                            // Int where to order within group
+ * }];
+ *
+ * Usage:
+ * 1. Auto bind click to open event to parent
+ * <div>
+ *   Click in this container
+ *   <DropdownMenu actions={actions}/>
+ * </div>
+ *
+ * 2. Control via prop
+ * <div>
+ *   DropdownMenu will not react to the click event if isShown prop is used
+ *   <DropdownMenu actions={actions} isShown={isShown} />
+ * </div>
+ *
+ */
+import React, { PureComponent } from 'react';
+import classNames from 'classnames';
+import { Popper } from "../popper/index.js";
+import Menu from "./Menu.js";
+import "./DropdownMenu.css";
+class DropdownMenu extends PureComponent {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "container", void 0);
+    _defineProperty(this, "parent", void 0);
+    _defineProperty(this, "popper", void 0);
+    _defineProperty(this, "isOpen", void 0);
+    this.handleClick = this.handleClick.bind(this);
+    this.handleCloseMenu = this.handleCloseMenu.bind(this);
+    this.handleExited = this.handleExited.bind(this);
+    this.container = /*#__PURE__*/React.createRef();
+    this.parent = null;
+    this.popper = /*#__PURE__*/React.createRef();
+    this.isOpen = false;
+  }
+  componentDidMount() {
+    var {
+      isShown
+    } = this.props;
+    if (isShown === null) {
+      var _this$container$curre;
+      if ((_this$container$curre = this.container.current) !== null && _this$container$curre !== void 0 && _this$container$curre.parentElement) {
+        this.parent = this.container.current.parentElement;
+        this.parent.addEventListener('click', this.handleClick);
+      }
+    } else if (isShown) {
+      this.openMenu();
+    }
+  }
+  componentDidUpdate(prevProps) {
+    var {
+      isShown
+    } = this.props;
+    if (prevProps.isShown !== isShown) {
+      if (isShown !== null && isShown) {
+        // https://github.com/reactjs/react-transition-group/issues/382
+        window.requestAnimationFrame(() => {
+          this.openMenu();
+        });
+      } else {
+        this.closeMenu();
+      }
+    }
+  }
+  componentWillUnmount() {
+    if (this.parent) {
+      this.parent.removeEventListener('click', this.handleClick);
+    }
+  }
+  closeMenu() {
+    var _this$popper$current;
+    (_this$popper$current = this.popper.current) === null || _this$popper$current === void 0 ? void 0 : _this$popper$current.hide();
+  }
+  openMenu() {
+    if (this.popper.current && !this.isOpen) {
+      this.popper.current.show();
+      this.isOpen = true;
+    }
+  }
+  scheduleUpdate() {
+    var _this$popper$current2;
+    (_this$popper$current2 = this.popper.current) === null || _this$popper$current2 === void 0 ? void 0 : _this$popper$current2.scheduleUpdate();
+  }
+  handleClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.openMenu();
+  }
+  handleCloseMenu() {
+    this.closeMenu();
+  }
+  handleExited() {
+    this.isOpen = false;
+    var {
+      onMenuClosed
+    } = this.props;
+    onMenuClosed();
+  }
+  render() {
+    var {
+      actions,
+      onMenuOpened,
+      popperClassName,
+      'data-testid': dataTestId
+    } = this.props;
+    var {
+      menuStyle
+    } = this.props;
+    var {
+      options,
+      popperOptions
+    } = this.props;
+    popperOptions = _objectSpread({
+      placement: 'bottom'
+    }, popperOptions);
+    options = _objectSpread({
+      separateKeyboardMouse: true
+    }, options);
+    return /*#__PURE__*/React.createElement("div", {
+      className: "menu-actions-listener",
+      ref: this.container,
+      "data-testid": dataTestId
+    }, /*#__PURE__*/React.createElement(Popper, {
+      ref: this.popper,
+      options: popperOptions,
+      className: classNames('menu-popper', popperClassName),
+      onExited: this.handleExited,
+      closeOnBlur: true,
+      interactive: true
+    }, /*#__PURE__*/React.createElement(Menu, {
+      actions: actions,
+      closeMenu: this.handleCloseMenu,
+      onMenuOpened: onMenuOpened,
+      options: options,
+      menuStyle: menuStyle
+    })));
+  }
+}
+_defineProperty(DropdownMenu, "defaultProps", {
+  isShown: null,
+  onMenuClosed() {
+    // no-op
+  },
+  onMenuOpened() {
+    // no-op
+  },
+  options: {},
+  popperOptions: {},
+  popperClassName: '',
+  menuStyle: {},
+  'data-testid': undefined
+});
+export default DropdownMenu;
+//# sourceMappingURL=DropdownMenu.js.map

package/dist/menu-actions/DropdownMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.js","names":["React","PureComponent","classNames","Popper","Menu","DropdownMenu","constructor","props","handleClick","bind","handleCloseMenu","handleExited","container","createRef","parent","popper","isOpen","componentDidMount","isShown","current","parentElement","addEventListener","openMenu","componentDidUpdate","prevProps","window","requestAnimationFrame","closeMenu","componentWillUnmount","removeEventListener","hide","show","scheduleUpdate","e","preventDefault","stopPropagation","onMenuClosed","render","actions","onMenuOpened","popperClassName","dataTestId","menuStyle","options","popperOptions","placement","separateKeyboardMouse","undefined"],"sources":["../../src/menu-actions/DropdownMenu.tsx"],"sourcesContent":["/**\n * Add dropdown menu that you add onto any component.\n *\n * Similar to the context-actions package, accepts list of actions to create a dropdown menu.\n * Note: Does not support nested sub-menus.\n *\n * Usage:\n * let actions = [{\n *   title: 'My Action',\n *   action: () => { alert('My Action Clicked!') }\n *   icon: faPrint,         // Limited to FontAwesome icons for now.\n *   shortcut: Shortcut,        // Shortcut class instance\n *   group: ContextActions.groups.default,  // What group to group the context action with\n *   order: null                            // Int where to order within group\n * }];\n *\n * Usage:\n * 1. Auto bind click to open event to parent\n * <div>\n *   Click in this container\n *   <DropdownMenu actions={actions}/>\n * </div>\n *\n * 2. Control via prop\n * <div>\n *   DropdownMenu will not react to the click event if isShown prop is used\n *   <DropdownMenu actions={actions} isShown={isShown} />\n * </div>\n *\n */\nimport React, { PureComponent } from 'react';\nimport classNames from 'classnames';\nimport { PopperOptions } from 'popper.js';\nimport { Popper } from '../popper';\nimport Menu, { MenuOptions } from './Menu';\nimport { ContextAction } from '../context-actions/ContextActionUtils';\nimport './DropdownMenu.scss';\n\nexport type DropdownAction = ContextAction & { actions?: never };\n\nexport type DropdownActions =\n  | (() => DropdownAction[])\n  | DropdownAction\n  | DropdownAction[];\n\ntype DropdownMenuProps = {\n  // Override to prevent nested lists\n  actions: DropdownActions;\n  isShown: boolean | null;\n  onMenuClosed(): void;\n  onMenuOpened(): void;\n  options: MenuOptions;\n  popperOptions: PopperOptions;\n  popperClassName: string;\n  menuStyle: React.CSSProperties;\n  'data-testid'?: string;\n};\n\nclass DropdownMenu extends PureComponent<DropdownMenuProps> {\n  static defaultProps = {\n    isShown: null,\n    onMenuClosed(): void {\n      // no-op\n    },\n    onMenuOpened(): void {\n      // no-op\n    },\n    options: {},\n    popperOptions: {},\n    popperClassName: '',\n    menuStyle: {},\n    'data-testid': undefined,\n  };\n\n  constructor(props: DropdownMenuProps) {\n    super(props);\n\n    this.handleClick = this.handleClick.bind(this);\n    this.handleCloseMenu = this.handleCloseMenu.bind(this);\n    this.handleExited = this.handleExited.bind(this);\n\n    this.container = React.createRef();\n    this.parent = null;\n    this.popper = React.createRef();\n\n    this.isOpen = false;\n  }\n\n  componentDidMount(): void {\n    const { isShown } = this.props;\n\n    if (isShown === null) {\n      if (this.container.current?.parentElement) {\n        this.parent = this.container.current.parentElement;\n        this.parent.addEventListener('click', this.handleClick);\n      }\n    } else if (isShown) {\n      this.openMenu();\n    }\n  }\n\n  componentDidUpdate(prevProps: DropdownMenuProps): void {\n    const { isShown } = this.props;\n\n    if (prevProps.isShown !== isShown) {\n      if (isShown !== null && isShown) {\n        // https://github.com/reactjs/react-transition-group/issues/382\n        window.requestAnimationFrame(() => {\n          this.openMenu();\n        });\n      } else {\n        this.closeMenu();\n      }\n    }\n  }\n\n  componentWillUnmount(): void {\n    if (this.parent) {\n      this.parent.removeEventListener('click', this.handleClick);\n    }\n  }\n\n  container: React.RefObject<HTMLDivElement>;\n\n  parent: Element | null;\n\n  popper: React.RefObject<Popper>;\n\n  isOpen: boolean;\n\n  closeMenu(): void {\n    this.popper.current?.hide();\n  }\n\n  openMenu(): void {\n    if (this.popper.current && !this.isOpen) {\n      this.popper.current.show();\n      this.isOpen = true;\n    }\n  }\n\n  scheduleUpdate(): void {\n    this.popper.current?.scheduleUpdate();\n  }\n\n  handleClick(e: Event): void {\n    e.preventDefault();\n    e.stopPropagation();\n\n    this.openMenu();\n  }\n\n  handleCloseMenu(): void {\n    this.closeMenu();\n  }\n\n  handleExited(): void {\n    this.isOpen = false;\n\n    const { onMenuClosed } = this.props;\n    onMenuClosed();\n  }\n\n  render(): JSX.Element {\n    const {\n      actions,\n      onMenuOpened,\n      popperClassName,\n      'data-testid': dataTestId,\n    } = this.props;\n    const { menuStyle } = this.props;\n    let { options, popperOptions } = this.props;\n    popperOptions = { placement: 'bottom', ...popperOptions };\n    options = {\n      separateKeyboardMouse: true,\n      ...options,\n    };\n    return (\n      <div\n        className=\"menu-actions-listener\"\n        ref={this.container}\n        data-testid={dataTestId}\n      >\n        <Popper\n          ref={this.popper}\n          options={popperOptions}\n          className={classNames('menu-popper', popperClassName)}\n          onExited={this.handleExited}\n          closeOnBlur\n          interactive\n        >\n          <Menu\n            actions={actions}\n            closeMenu={this.handleCloseMenu}\n            onMenuOpened={onMenuOpened}\n            options={options}\n            menuStyle={menuStyle}\n          />\n        </Popper>\n      </div>\n    );\n  }\n}\n\nexport default DropdownMenu;\n"],"mappings":"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"}

package/dist/menu-actions/Menu.js

@@ -0,0 +1,244 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import React, { PureComponent } from 'react';
+import ContextActionUtils from "../context-actions/ContextActionUtils.js";
+import ContextMenuItem from "../context-actions/ContextMenuItem.js";
+/**
+ *  Do not use this class directly. Use DropdownMenu instead.
+ *
+ *  Generates list from actions for use by DropdownMenu.
+ *  It has beem split from the context-actions component, due to divergering requirements,
+ *  but still re-uses styling from context-menu. Depending on how usage evolves, may get split further.
+ *
+ */
+
+class Menu extends PureComponent {
+  constructor(props) {
+    var _options$initialKeybo;
+    super(props);
+    _defineProperty(this, "container", void 0);
+    _defineProperty(this, "oldFocus", void 0);
+    _defineProperty(this, "rAF", void 0);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleMenuItemClick = this.handleMenuItemClick.bind(this);
+    this.handleMenuItemMouseMove = this.handleMenuItemMouseMove.bind(this);
+    this.handleMouseLeave = this.handleMouseLeave.bind(this);
+    this.handleCloseMenu = this.handleCloseMenu.bind(this);
+    this.container = /*#__PURE__*/React.createRef();
+    this.oldFocus = document.activeElement;
+    this.rAF = 0;
+    var {
+      options
+    } = props;
+    var keyboardIndex = (_options$initialKeybo = options.initialKeyboardIndex) !== null && _options$initialKeybo !== void 0 ? _options$initialKeybo : -1;
+    this.state = {
+      menuItems: [],
+      keyboardIndex,
+      mouseIndex: -1
+    };
+  }
+  componentDidMount() {
+    this.initMenu();
+    this.rAF = window.requestAnimationFrame(() => {
+      var _this$container$curre;
+      // set initial focus to container so keyboard navigation works
+      // components can still override focus in onMenuOpened callback
+      (_this$container$curre = this.container.current) === null || _this$container$curre === void 0 ? void 0 : _this$container$curre.focus();
+      var {
+        onMenuOpened
+      } = this.props;
+      onMenuOpened(this);
+    });
+  }
+  componentDidUpdate(prevProps) {
+    var {
+      actions
+    } = this.props;
+    if (prevProps.actions !== actions) {
+      this.initMenu();
+    }
+  }
+  componentWillUnmount() {
+    cancelAnimationFrame(this.rAF);
+  }
+  getKeyboardIndex() {
+    var {
+      options
+    } = this.props;
+    if (options.separateKeyboardMouse !== undefined && options.separateKeyboardMouse) {
+      var {
+        keyboardIndex
+      } = this.state;
+      return keyboardIndex;
+    }
+    return this.getMouseIndex();
+  }
+  setKeyboardIndex(index) {
+    var {
+      options
+    } = this.props;
+    if (options.separateKeyboardMouse !== undefined && options.separateKeyboardMouse) {
+      this.setState({
+        keyboardIndex: index
+      });
+    } else {
+      this.setMouseIndex(index);
+    }
+  }
+  getMouseIndex() {
+    var {
+      mouseIndex
+    } = this.state;
+    return mouseIndex;
+  }
+  setMouseIndex(index) {
+    this.setState({
+      mouseIndex: index
+    });
+  }
+  initMenu() {
+    // cancel any pending close
+    cancelAnimationFrame(this.rAF);
+    this.setState({
+      menuItems: []
+    });
+    var {
+      actions
+    } = this.props;
+    var menuItems = ContextActionUtils.getMenuItems(actions, false);
+    if (menuItems.length > 0) {
+      this.setState(state => ({
+        menuItems: ContextActionUtils.sortActions(state.menuItems.concat(menuItems))
+      }));
+    }
+  }
+  handleKeyDown(e) {
+    var {
+      menuItems
+    } = this.state;
+    var oldFocus = this.getKeyboardIndex();
+    var newFocus = oldFocus;
+    if (e.key === 'Enter' || e.key === ' ') {
+      if (oldFocus != null && oldFocus >= 0 && oldFocus < menuItems.length) {
+        this.handleMenuItemClick(menuItems[oldFocus], e);
+      }
+      return;
+    }
+    if (e.key === 'Escape') {
+      newFocus = null;
+    } else if (e.key === 'ArrowUp' || e.key === 'Tab' && e.shiftKey === true) {
+      var _newFocus;
+      newFocus = ContextActionUtils.getNextMenuItem((_newFocus = newFocus) !== null && _newFocus !== void 0 ? _newFocus : 0, -1, menuItems);
+    } else if (e.key === 'ArrowDown' || e.key === 'Tab' && e.shiftKey === false) {
+      var _newFocus2;
+      newFocus = ContextActionUtils.getNextMenuItem((_newFocus2 = newFocus) !== null && _newFocus2 !== void 0 ? _newFocus2 : 0, 1, menuItems);
+    }
+    if (oldFocus !== newFocus) {
+      if (newFocus !== null) {
+        this.setKeyboardIndex(newFocus);
+      } else {
+        this.closeMenu();
+        if (this.oldFocus instanceof HTMLElement) {
+          this.oldFocus.focus();
+        }
+      }
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }
+  closeMenu() {
+    var closeAll = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    var {
+      closeMenu,
+      onMenuClosed
+    } = this.props;
+    cancelAnimationFrame(this.rAF);
+    this.rAF = window.requestAnimationFrame(() => {
+      closeMenu(closeAll);
+      onMenuClosed(this);
+    });
+  }
+  handleCloseMenu() {
+    this.closeMenu();
+  }
+  handleMenuItemClick(menuItem, e) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (menuItem != null && (menuItem.disabled === undefined || !menuItem.disabled) && menuItem.action != null) {
+      menuItem.action();
+      this.closeMenu(true);
+    }
+  }
+  handleMenuItemMouseMove(menuItem) {
+    var {
+      menuItems
+    } = this.state;
+    var focusIndex = menuItems.indexOf(menuItem);
+    this.setMouseIndex(focusIndex);
+  }
+  handleMouseLeave() {
+    this.setMouseIndex(-1);
+  }
+  render() {
+    var menuItemElements = [];
+    var {
+      'data-testid': dataTestId
+    } = this.props;
+    var {
+      keyboardIndex,
+      menuItems,
+      mouseIndex
+    } = this.state;
+    for (var i = 0; i < menuItems.length; i += 1) {
+      var menuItem = menuItems[i];
+      if (i > 0 && menuItem.group !== menuItems[i - 1].group) {
+        menuItemElements.push( /*#__PURE__*/React.createElement("hr", {
+          key: "".concat(i, ".separator")
+        }));
+      }
+      var menuItemElement = /*#__PURE__*/React.createElement(ContextMenuItem, {
+        key: i,
+        isKeyboardSelected: keyboardIndex === i,
+        isMouseSelected: mouseIndex === i,
+        menuItem: menuItem,
+        closeMenu: this.handleCloseMenu,
+        onMenuItemClick: this.handleMenuItemClick,
+        onMenuItemMouseMove: this.handleMenuItemMouseMove,
+        onMenuItemContextMenu: () => false
+      });
+      menuItemElements.push(menuItemElement);
+    }
+    var {
+      menuStyle
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "context-menu-container",
+      style: _objectSpread({}, menuStyle),
+      ref: this.container,
+      onKeyDown: this.handleKeyDown,
+      onMouseLeave: this.handleMouseLeave,
+      role: "menuitem",
+      tabIndex: 0,
+      "data-testid": dataTestId
+    }, menuItemElements);
+  }
+}
+_defineProperty(Menu, "defaultProps", {
+  closeMenu() {
+    // no-op
+  },
+  onMenuOpened() {
+    // no-op
+  },
+  onMenuClosed() {
+    // no-op
+  },
+  options: {},
+  menuStyle: {},
+  'data-testid': undefined
+});
+export default Menu;
+//# sourceMappingURL=Menu.js.map

package/dist/menu-actions/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.js","names":["React","PureComponent","ContextActionUtils","ContextMenuItem","Menu","constructor","props","handleKeyDown","bind","handleMenuItemClick","handleMenuItemMouseMove","handleMouseLeave","handleCloseMenu","container","createRef","oldFocus","document","activeElement","rAF","options","keyboardIndex","initialKeyboardIndex","state","menuItems","mouseIndex","componentDidMount","initMenu","window","requestAnimationFrame","current","focus","onMenuOpened","componentDidUpdate","prevProps","actions","componentWillUnmount","cancelAnimationFrame","getKeyboardIndex","separateKeyboardMouse","undefined","getMouseIndex","setKeyboardIndex","index","setState","setMouseIndex","getMenuItems","length","sortActions","concat","e","newFocus","key","shiftKey","getNextMenuItem","closeMenu","HTMLElement","preventDefault","stopPropagation","closeAll","onMenuClosed","menuItem","disabled","action","focusIndex","indexOf","render","menuItemElements","dataTestId","i","group","push","menuItemElement","menuStyle"],"sources":["../../src/menu-actions/Menu.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport ContextActionUtils, {\n  ContextAction,\n} from '../context-actions/ContextActionUtils';\nimport ContextMenuItem from '../context-actions/ContextMenuItem';\n\nexport type MenuOptions = {\n  doNotVerifyPosition?: boolean;\n  separateKeyboardMouse?: boolean;\n  initialKeyboardIndex?: number;\n};\n\ntype MenuProps = {\n  actions: (() => ContextAction[]) | ContextAction | ContextAction[];\n  closeMenu(closeAll: boolean): void;\n  onMenuClosed(menu: Menu): void;\n  onMenuOpened(menu: Menu): void;\n  options: MenuOptions;\n  menuStyle: React.CSSProperties;\n  'data-testid'?: string;\n};\n\ntype MenuState = {\n  menuItems: ContextAction[];\n  keyboardIndex: number;\n  mouseIndex: number;\n};\n\n/**\n *  Do not use this class directly. Use DropdownMenu instead.\n *\n *  Generates list from actions for use by DropdownMenu.\n *  It has beem split from the context-actions component, due to divergering requirements,\n *  but still re-uses styling from context-menu. Depending on how usage evolves, may get split further.\n *\n */\n\nclass Menu extends PureComponent<MenuProps, MenuState> {\n  static defaultProps = {\n    closeMenu(): void {\n      // no-op\n    },\n    onMenuOpened(): void {\n      // no-op\n    },\n    onMenuClosed(): void {\n      // no-op\n    },\n    options: {},\n    menuStyle: {},\n    'data-testid': undefined,\n  };\n\n  constructor(props: MenuProps) {\n    super(props);\n\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n    this.handleMenuItemClick = this.handleMenuItemClick.bind(this);\n    this.handleMenuItemMouseMove = this.handleMenuItemMouseMove.bind(this);\n    this.handleMouseLeave = this.handleMouseLeave.bind(this);\n    this.handleCloseMenu = this.handleCloseMenu.bind(this);\n\n    this.container = React.createRef();\n    this.oldFocus = document.activeElement;\n    this.rAF = 0;\n\n    const { options } = props;\n    const keyboardIndex = options.initialKeyboardIndex ?? -1;\n    this.state = {\n      menuItems: [],\n      keyboardIndex,\n      mouseIndex: -1,\n    };\n  }\n\n  componentDidMount(): void {\n    this.initMenu();\n\n    this.rAF = window.requestAnimationFrame(() => {\n      // set initial focus to container so keyboard navigation works\n      // components can still override focus in onMenuOpened callback\n      this.container.current?.focus();\n      const { onMenuOpened } = this.props;\n      onMenuOpened(this);\n    });\n  }\n\n  componentDidUpdate(prevProps: MenuProps): void {\n    const { actions } = this.props;\n    if (prevProps.actions !== actions) {\n      this.initMenu();\n    }\n  }\n\n  componentWillUnmount(): void {\n    cancelAnimationFrame(this.rAF);\n  }\n\n  container: React.RefObject<HTMLDivElement>;\n\n  oldFocus: Element | null;\n\n  rAF: number;\n\n  getKeyboardIndex(): number | null {\n    const { options } = this.props;\n    if (\n      options.separateKeyboardMouse !== undefined &&\n      options.separateKeyboardMouse\n    ) {\n      const { keyboardIndex } = this.state;\n      return keyboardIndex;\n    }\n\n    return this.getMouseIndex();\n  }\n\n  setKeyboardIndex(index: number): void {\n    const { options } = this.props;\n    if (\n      options.separateKeyboardMouse !== undefined &&\n      options.separateKeyboardMouse\n    ) {\n      this.setState({ keyboardIndex: index });\n    } else {\n      this.setMouseIndex(index);\n    }\n  }\n\n  getMouseIndex(): number {\n    const { mouseIndex } = this.state;\n    return mouseIndex;\n  }\n\n  setMouseIndex(index: number): void {\n    this.setState({ mouseIndex: index });\n  }\n\n  initMenu(): void {\n    // cancel any pending close\n    cancelAnimationFrame(this.rAF);\n\n    this.setState({\n      menuItems: [],\n    });\n\n    const { actions } = this.props;\n    const menuItems = ContextActionUtils.getMenuItems(actions, false);\n\n    if (menuItems.length > 0) {\n      this.setState(state => ({\n        menuItems: ContextActionUtils.sortActions(\n          state.menuItems.concat(menuItems)\n        ),\n      }));\n    }\n  }\n\n  handleKeyDown(e: React.KeyboardEvent): void {\n    const { menuItems } = this.state;\n    const oldFocus = this.getKeyboardIndex();\n    let newFocus = oldFocus;\n\n    if (e.key === 'Enter' || e.key === ' ') {\n      if (oldFocus != null && oldFocus >= 0 && oldFocus < menuItems.length) {\n        this.handleMenuItemClick(menuItems[oldFocus], e);\n      }\n      return;\n    }\n\n    if (e.key === 'Escape') {\n      newFocus = null;\n    } else if (\n      e.key === 'ArrowUp' ||\n      (e.key === 'Tab' && e.shiftKey === true)\n    ) {\n      newFocus = ContextActionUtils.getNextMenuItem(\n        newFocus ?? 0,\n        -1,\n        menuItems\n      );\n    } else if (\n      e.key === 'ArrowDown' ||\n      (e.key === 'Tab' && e.shiftKey === false)\n    ) {\n      newFocus = ContextActionUtils.getNextMenuItem(\n        newFocus ?? 0,\n        1,\n        menuItems\n      );\n    }\n\n    if (oldFocus !== newFocus) {\n      if (newFocus !== null) {\n        this.setKeyboardIndex(newFocus);\n      } else {\n        this.closeMenu();\n        if (this.oldFocus instanceof HTMLElement) {\n          this.oldFocus.focus();\n        }\n      }\n\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  }\n\n  closeMenu(closeAll = false): void {\n    const { closeMenu, onMenuClosed } = this.props;\n    cancelAnimationFrame(this.rAF);\n    this.rAF = window.requestAnimationFrame(() => {\n      closeMenu(closeAll);\n      onMenuClosed(this);\n    });\n  }\n\n  handleCloseMenu(): void {\n    this.closeMenu();\n  }\n\n  handleMenuItemClick(menuItem: ContextAction, e: React.SyntheticEvent): void {\n    e.preventDefault();\n    e.stopPropagation();\n\n    if (\n      menuItem != null &&\n      (menuItem.disabled === undefined || !menuItem.disabled) &&\n      menuItem.action != null\n    ) {\n      menuItem.action();\n      this.closeMenu(true);\n    }\n  }\n\n  handleMenuItemMouseMove(menuItem: ContextAction): void {\n    const { menuItems } = this.state;\n    const focusIndex = menuItems.indexOf(menuItem);\n    this.setMouseIndex(focusIndex);\n  }\n\n  handleMouseLeave(): void {\n    this.setMouseIndex(-1);\n  }\n\n  render(): JSX.Element {\n    const menuItemElements = [];\n    const { 'data-testid': dataTestId } = this.props;\n    const { keyboardIndex, menuItems, mouseIndex } = this.state;\n    for (let i = 0; i < menuItems.length; i += 1) {\n      const menuItem = menuItems[i];\n\n      if (i > 0 && menuItem.group !== menuItems[i - 1].group) {\n        menuItemElements.push(<hr key={`${i}.separator`} />);\n      }\n\n      const menuItemElement = (\n        <ContextMenuItem\n          key={i}\n          isKeyboardSelected={keyboardIndex === i}\n          isMouseSelected={mouseIndex === i}\n          menuItem={menuItem}\n          closeMenu={this.handleCloseMenu}\n          onMenuItemClick={this.handleMenuItemClick}\n          onMenuItemMouseMove={this.handleMenuItemMouseMove}\n          onMenuItemContextMenu={() => false}\n        />\n      );\n\n      menuItemElements.push(menuItemElement);\n    }\n\n    const { menuStyle } = this.props;\n\n    return (\n      <div\n        className=\"context-menu-container\"\n        style={{ ...menuStyle }}\n        ref={this.container}\n        onKeyDown={this.handleKeyDown}\n        onMouseLeave={this.handleMouseLeave}\n        role=\"menuitem\"\n        tabIndex={0}\n        data-testid={dataTestId}\n      >\n        {menuItemElements}\n      </div>\n    );\n  }\n}\n\nexport default Menu;\n"],"mappings":"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"}

package/dist/menu-actions/index.js

@@ -0,0 +1,4 @@
+import DropdownMenu from "./DropdownMenu.js";
+export default DropdownMenu;
+export * from "./DropdownMenu.js";
+//# sourceMappingURL=index.js.map

package/dist/menu-actions/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["DropdownMenu"],"sources":["../../src/menu-actions/index.ts"],"sourcesContent":["import DropdownMenu from './DropdownMenu';\n\nexport default DropdownMenu;\nexport * from './DropdownMenu';\n"],"mappings":"OAAOA,YAAY;AAEnB,eAAeA,YAAY;AAAC"}

package/dist/modal/DebouncedModal.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useDebouncedValue } from '@deephaven/react-hooks';
+/**
+ * Display a modal after a debounce time. Blocks the screen from interaction immediately,
+ * but then waits the set debounce time before rendering the modal.
+ */
+function DebouncedModal(_ref) {
+  var {
+    blockInteraction = true,
+    children,
+    debounceMs,
+    isOpen = false
+  } = _ref;
+  var debouncedIsOpen = useDebouncedValue(isOpen, debounceMs);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, blockInteraction && isOpen && /*#__PURE__*/React.createElement("div", {
+    className: "modal-backdrop",
+    style: {
+      backgroundColor: 'transparent'
+    },
+    "data-testid": "debounced-modal-backdrop"
+  }), /*#__PURE__*/React.cloneElement(children, {
+    isOpen: isOpen && debouncedIsOpen
+  }));
+}
+export default DebouncedModal;
+//# sourceMappingURL=DebouncedModal.js.map

package/dist/modal/DebouncedModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DebouncedModal.js","names":["React","useDebouncedValue","DebouncedModal","blockInteraction","children","debounceMs","isOpen","debouncedIsOpen","backgroundColor","cloneElement"],"sources":["../../src/modal/DebouncedModal.tsx"],"sourcesContent":["import React from 'react';\nimport { useDebouncedValue } from '@deephaven/react-hooks';\n\nexport type DebouncedModalProps = {\n  /** Whether to block interaction immediately */\n  blockInteraction?: boolean;\n\n  /** Children to render after the alloted debounce time */\n  children: React.ReactElement;\n\n  /** Time to debounce */\n  debounceMs: number;\n\n  /**\n   * Will render the `children` `debounceMs` after `isOpen` is set to `true.\n   * Will stop rendering immediately after `isOpen` is set to `false`.\n   */\n  isOpen?: boolean;\n};\n\n/**\n * Display a modal after a debounce time. Blocks the screen from interaction immediately,\n * but then waits the set debounce time before rendering the modal.\n */\nfunction DebouncedModal({\n  blockInteraction = true,\n  children,\n  debounceMs,\n  isOpen = false,\n}: DebouncedModalProps) {\n  const debouncedIsOpen = useDebouncedValue(isOpen, debounceMs);\n\n  return (\n    <>\n      {blockInteraction && isOpen && (\n        <div\n          className=\"modal-backdrop\"\n          style={{ backgroundColor: 'transparent' }}\n          data-testid=\"debounced-modal-backdrop\"\n        />\n      )}\n      {React.cloneElement(children, { isOpen: isOpen && debouncedIsOpen })}\n    </>\n  );\n}\n\nexport default DebouncedModal;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,iBAAiB,QAAQ,wBAAwB;AAmB1D;AACA;AACA;AACA;AACA,SAASC,cAAc,OAKC;EAAA,IALA;IACtBC,gBAAgB,GAAG,IAAI;IACvBC,QAAQ;IACRC,UAAU;IACVC,MAAM,GAAG;EACU,CAAC;EACpB,IAAMC,eAAe,GAAGN,iBAAiB,CAACK,MAAM,EAAED,UAAU,CAAC;EAE7D,oBACE,0CACGF,gBAAgB,IAAIG,MAAM,iBACzB;IACE,SAAS,EAAC,gBAAgB;IAC1B,KAAK,EAAE;MAAEE,eAAe,EAAE;IAAc,CAAE;IAC1C,eAAY;EAA0B,EAEzC,eACAR,KAAK,CAACS,YAAY,CAACL,QAAQ,EAAE;IAAEE,MAAM,EAAEA,MAAM,IAAIC;EAAgB,CAAC,CAAC,CACnE;AAEP;AAEA,eAAeL,cAAc"}

package/dist/modal/InfoModal.css

@@ -0,0 +1,24 @@
+/* stylelint-disable scss/at-import-no-partial-leading-underscore */
+.info-modal {
+  text-align: center;
+  padding-bottom: 18px;
+}
+.info-modal .message-icon {
+  font-size: 120px;
+  text-align: center;
+  line-height: 1;
+}
+.info-modal .message-icon .svg-inline--fa {
+  font-size: inherit;
+}
+.info-modal .message-header {
+  font-size: 24px;
+}
+.info-modal .message-header .svg-inline--fa {
+  font-size: inherit;
+}
+.info-modal .message-content {
+  font-style: italic;
+}
+
+/*# sourceMappingURL=InfoModal.css.map */

package/dist/modal/InfoModal.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../scss/custom.scss","../../src/modal/InfoModal.scss"],"names":[],"mappings":"AAAA;ACMA;EACE;EACA,gBAJ0B;;AAK1B;EACE,WARwB;EASxB;EACA;;AACA;EACE;;AAGJ;EACE,WAfwB;;AAgBxB;EACE;;AAGJ;EACE","file":"InfoModal.css","sourcesContent":["/* stylelint-disable scss/at-import-no-partial-leading-underscore */\n// Consumers should be able to resolve bootstrap/ to node_modules/bootstrap\n\n//Make bootstrap functions available for use in overrides\n@import 'bootstrap/scss/_functions.scss';\n@import './bootstrap_overrides.scss';\n\n//_variable imports come after bootstrap default overrides,\n// makes all other variables and mixins from bootstrap available\n/// with just importing customer.scss\n@import 'bootstrap/scss/_variables.scss';\n@import 'bootstrap/scss/_mixins.scss';\n\n//New variables come after imports\n@import './new_variables.scss';\n","@import '../../scss/custom.scss';\n\n$info-modal-icon-font-size: 120px;\n$info-modal-message-header: 24px;\n$info-modal-padding-bottom: 18px;\n\n.info-modal {\n  text-align: center;\n  padding-bottom: $info-modal-padding-bottom;\n  .message-icon {\n    font-size: $info-modal-icon-font-size;\n    text-align: center;\n    line-height: 1;\n    .svg-inline--fa {\n      font-size: inherit;\n    }\n  }\n  .message-header {\n    font-size: $info-modal-message-header;\n    .svg-inline--fa {\n      font-size: inherit;\n    }\n  }\n  .message-content {\n    font-style: italic;\n  }\n}\n"]}

package/dist/modal/InfoModal.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Modal from "./Modal.js";
+import ModalBody from "./ModalBody.js";
+import "./InfoModal.css";
+/**
+ * A modal that displays a message with an icon. Can be used for informational messages, warnings, or errors.
+ * Does not have any buttons and cannot be dismissed.
+ */
+function InfoModal(_ref) {
+  var {
+    className,
+    icon,
+    isOpen = false,
+    subtitle,
+    title
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Modal, {
+    isOpen: isOpen,
+    className: className
+  }, /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("div", {
+    className: "info-modal"
+  }, icon != null && /*#__PURE__*/React.createElement("div", {
+    className: "message-icon"
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: icon
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "message-header"
+  }, title), subtitle != null && /*#__PURE__*/React.createElement("div", {
+    className: "message-content"
+  }, subtitle))));
+}
+export default InfoModal;
+//# sourceMappingURL=InfoModal.js.map

package/dist/modal/InfoModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoModal.js","names":["React","FontAwesomeIcon","Modal","ModalBody","InfoModal","className","icon","isOpen","subtitle","title"],"sources":["../../src/modal/InfoModal.tsx"],"sourcesContent":["import React from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { IconProp } from '@fortawesome/fontawesome-svg-core';\nimport Modal from './Modal';\nimport ModalBody from './ModalBody';\nimport './InfoModal.scss';\n\ntype InfoModalProps = {\n  /** Class name to give the info modal */\n  className?: string;\n\n  /** Icon to display in the modal */\n  icon?: IconProp;\n\n  /** Title to display in the modal */\n  title: React.ReactNode;\n\n  /** Subtitle/detail to display in the modal */\n  subtitle?: React.ReactNode;\n\n  /** Whether the modal is open/visible or not. */\n  isOpen?: boolean;\n};\n\n/**\n * A modal that displays a message with an icon. Can be used for informational messages, warnings, or errors.\n * Does not have any buttons and cannot be dismissed.\n */\nfunction InfoModal({\n  className,\n  icon,\n  isOpen = false,\n  subtitle,\n  title,\n}: InfoModalProps): JSX.Element {\n  return (\n    <Modal isOpen={isOpen} className={className}>\n      <ModalBody>\n        <div className=\"info-modal\">\n          {icon != null && (\n            <div className=\"message-icon\">\n              <FontAwesomeIcon icon={icon} />\n            </div>\n          )}\n          <div className=\"message-header\">{title}</div>\n          {subtitle != null && (\n            <div className=\"message-content\">{subtitle}</div>\n          )}\n        </div>\n      </ModalBody>\n    </Modal>\n  );\n}\n\nexport default InfoModal;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,QAAQ,gCAAgC;AAAC,OAE1DC,KAAK;AAAA,OACLC,SAAS;AAAA;AAoBhB;AACA;AACA;AACA;AACA,SAASC,SAAS,OAMc;EAAA,IANb;IACjBC,SAAS;IACTC,IAAI;IACJC,MAAM,GAAG,KAAK;IACdC,QAAQ;IACRC;EACc,CAAC;EACf,oBACE,oBAAC,KAAK;IAAC,MAAM,EAAEF,MAAO;IAAC,SAAS,EAAEF;EAAU,gBAC1C,oBAAC,SAAS,qBACR;IAAK,SAAS,EAAC;EAAY,GACxBC,IAAI,IAAI,IAAI,iBACX;IAAK,SAAS,EAAC;EAAc,gBAC3B,oBAAC,eAAe;IAAC,IAAI,EAAEA;EAAK,EAAG,CAElC,eACD;IAAK,SAAS,EAAC;EAAgB,GAAEG,KAAK,CAAO,EAC5CD,QAAQ,IAAI,IAAI,iBACf;IAAK,SAAS,EAAC;EAAiB,GAAEA,QAAQ,CAC3C,CACG,CACI,CACN;AAEZ;AAEA,eAAeJ,SAAS"}