@instructure/ui-menu 8.13.1-snapshot.9 → 8.14.0

package/src/Menu/props.ts

@@ -22,6 +22,7 @@
  * SOFTWARE.
  */
 
+import React from 'react'
 import PropTypes from 'prop-types'
 
 import { PositionPropTypes } from '@instructure/ui-position'
@@ -29,175 +30,171 @@ import {
   controllable,
   Children as ChildrenPropTypes
 } from '@instructure/ui-prop-types'
+import type { Menu } from './index'
 
-import type { PropValidators, MenuTheme } from '@instructure/shared-types'
+import type {
+  PropValidators,
+  MenuTheme,
+  OtherHTMLAttributes
+} from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 import type {
   PlacementPropValues,
   PositionConstraint,
   PositionMountNode
 } from '@instructure/ui-position'
+import type { OnMenuItemSelect } from './MenuItem/props'
+import type { Popover } from '@instructure/ui-popover'
 
 type MenuOwnProps = {
-  children?: React.ReactNode // TODO: oneOf(['MenuItem', 'MenuItemGroup', 'MenuItemSeparator', 'Menu'])
-  label?: string
-  disabled?: boolean
-  trigger?: React.ReactNode
-  placement?: PlacementPropValues
-  defaultShow?: boolean
-  show?: any // TODO: controllable(PropTypes.bool, 'onToggle', 'defaultShow')
-  onToggle?: (...args: any[]) => any
-  onSelect?: (...args: any[]) => any
-  onDismiss?: (...args: any[]) => any
-  onBlur?: (...args: any[]) => any
-  onFocus?: (...args: any[]) => any
-  onMouseOver?: (...args: any[]) => any
-  onKeyDown?: (...args: any[]) => any
-  onKeyUp?: (...args: any[]) => any
-  menuRef?: (...args: any[]) => any
-  popoverRef?: (...args: any[]) => any
-  mountNode?: PositionMountNode
-  constrain?: PositionConstraint
-  liveRegion?: // TODO check whether this is used
-  React.ReactElement[] | React.ReactElement | ((...args: any[]) => any)
-  shouldHideOnSelect?: boolean
-  shouldFocusTriggerOnClose?: boolean
-  type?: 'flyout'
-  id?: string
-  withArrow?: boolean
-  offsetX?: string | number
-  offsetY?: string | number
-}
-
-type PropKeys = keyof MenuOwnProps
-
-type AllowedPropKeys = Readonly<Array<PropKeys>>
-
-type MenuProps = MenuOwnProps & WithStyleProps<MenuTheme, MenuStyle>
-
-type MenuStyle = ComponentStyle<'menu'>
-
-const propTypes: PropValidators<PropKeys> = {
   /**
    * Children of type `Menu.Item`, `Menu.Group`, `Menu.Separator`, or `Menu`
    */
-  children: ChildrenPropTypes.oneOf([
-    'MenuItem',
-    'MenuItemGroup',
-    'MenuItemSeparator',
-    'Menu'
-  ]),
+  children?: React.ReactNode // TODO: oneOf(['MenuItem', 'MenuItemGroup', 'MenuItemSeparator', 'Menu'])
   /**
    * Description of the `<Menu />`
    */
-  label: PropTypes.string,
+  label?: string
   /**
    * Is the `<Menu />` disabled
    */
-  disabled: PropTypes.bool,
+  disabled?: boolean
   /**
    * The trigger element, if the `<Menu />` is to render as a popover
    */
-  trigger: PropTypes.node,
+  trigger?: React.ReactNode
   /**
    * If a trigger is supplied, where should the `<Menu />` be placed (relative to the trigger)
    */
-  placement: PositionPropTypes.placement,
+  placement?: PlacementPropValues
   /**
    * Should the `<Menu />` be open for the initial render
    */
-  defaultShow: PropTypes.bool,
+  defaultShow?: boolean
   /**
    * Is the `<Menu />` open (should be accompanied by `onToggle`)
    */
-  show: controllable(PropTypes.bool, 'onToggle', 'defaultShow'),
+  show?: boolean // TODO: controllable(PropTypes.bool, 'onToggle', 'defaultShow')
   /**
    * Callback fired when the `<Menu />` is toggled open/closed. When used with `show`,
    * the component will not control its own state.
    */
-  onToggle: PropTypes.func,
+  onToggle?: (show: boolean, menu: Menu) => void
   /**
    * Callback fired when an item within the `<Menu />` is selected
    */
-  onSelect: PropTypes.func,
+  onSelect?: OnMenuItemSelect
   /**
    * If a trigger is supplied, callback fired when the `<Menu />` is closed
    */
-  onDismiss: PropTypes.func,
-  /**
-   * If a trigger is supplied, callback fired when the `<Menu />` trigger is blurred
-   */
-  onBlur: PropTypes.func,
+  onDismiss?: (
+    event: React.UIEvent | React.FocusEvent,
+    documentClick: boolean
+  ) => void
   /**
    * If a trigger is supplied, callback fired when the `<Menu />` trigger is focused
    */
-  onFocus: PropTypes.func,
+  onFocus?: (event: React.FocusEvent) => void
   /**
    * If a trigger is supplied, callback fired onMouseOver for the `<Menu />` trigger
    */
-  onMouseOver: PropTypes.func,
+  onMouseOver?: (event: React.MouseEvent) => void
   /**
    * Callback fired on the onKeyDown of the `<Menu />`
    */
-  onKeyDown: PropTypes.func,
+  onKeyDown?: (event: React.KeyboardEvent<HTMLUListElement>) => void
   /**
    * Callback fired on the onKeyUp of the `<Menu />`
    */
-  onKeyUp: PropTypes.func,
+  onKeyUp?: (event: React.KeyboardEvent<HTMLUListElement>) => void
   /**
    * A function that returns a reference to the `<Menu />`
    */
-  menuRef: PropTypes.func,
+  menuRef?: (el: HTMLUListElement | null) => void
   /**
    * A function that returns a reference to the `<Popover />`
    */
-  popoverRef: PropTypes.func,
+  popoverRef?: (el: Popover | null) => void
   /**
    * If a trigger is supplied, an element or a function returning an element to use as the mount node
    * for the `<Menu />` (defaults to `document.body`)
    */
-  mountNode: PositionPropTypes.mountNode,
+  mountNode?: PositionMountNode
   /**
    * The parent in which to constrain the menu.
    * One of: 'window', 'scroll-parent', 'parent', 'none', an element,
    * or a function returning an element
    */
-  constrain: PositionPropTypes.constrain,
-  /**
-   * If a trigger is supplied, an element, function returning an element, or array of elements that will not
-   * be hidden from the screen reader when the `<Menu />` is open
-   */
-  liveRegion: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.element),
-    PropTypes.element,
-    PropTypes.func
-  ]),
+  constrain?: PositionConstraint
   /**
    * If a trigger is supplied, should the `<Menu />` hide when an item is selected
    */
-  shouldHideOnSelect: PropTypes.bool,
+  shouldHideOnSelect?: boolean
   /**
    * If a trigger is supplied, should the `<Menu />` focus the trigger on after closing
    */
-  shouldFocusTriggerOnClose: PropTypes.bool,
+  shouldFocusTriggerOnClose?: boolean
   /**
    * The type of `<Menu />`
    */
-  type: PropTypes.oneOf(['flyout']),
-  id: PropTypes.string,
+  type?: 'flyout'
+  id?: string
   /**
    * Whether or not an arrow pointing to the trigger should be rendered
    */
-  withArrow: PropTypes.bool,
+  withArrow?: boolean
   /**
    * The horizontal offset for the positioned content.
    * Works only if `trigger` is provided.
    */
-  offsetX: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  offsetX?: string | number
   /**
    * The vertical offset for the positioned content.
    * Works only if `trigger` is provided.
    */
+  offsetY?: string | number
+}
+
+type PropKeys = keyof MenuOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type MenuProps = MenuOwnProps &
+  WithStyleProps<MenuTheme, MenuStyle> &
+  OtherHTMLAttributes<MenuOwnProps>
+
+type MenuStyle = ComponentStyle<'menu'>
+
+const propTypes: PropValidators<PropKeys> = {
+  children: ChildrenPropTypes.oneOf([
+    'MenuItem',
+    'MenuItemGroup',
+    'MenuItemSeparator',
+    'Menu'
+  ]),
+  label: PropTypes.string,
+  disabled: PropTypes.bool,
+  trigger: PropTypes.node,
+  placement: PositionPropTypes.placement,
+  defaultShow: PropTypes.bool,
+  show: controllable(PropTypes.bool, 'onToggle', 'defaultShow'),
+  onToggle: PropTypes.func,
+  onSelect: PropTypes.func,
+  onDismiss: PropTypes.func,
+  onFocus: PropTypes.func,
+  onMouseOver: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onKeyUp: PropTypes.func,
+  menuRef: PropTypes.func,
+  popoverRef: PropTypes.func,
+  mountNode: PositionPropTypes.mountNode,
+  constrain: PositionPropTypes.constrain,
+  shouldHideOnSelect: PropTypes.bool,
+  shouldFocusTriggerOnClose: PropTypes.bool,
+  type: PropTypes.oneOf(['flyout']),
+  id: PropTypes.string,
+  withArrow: PropTypes.bool,
+  offsetX: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   offsetY: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 }
 
@@ -212,7 +209,6 @@ const allowedProps: AllowedPropKeys = [
   'onToggle',
   'onSelect',
   'onDismiss',
-  'onBlur',
   'onFocus',
   'onMouseOver',
   'onKeyDown',
@@ -221,7 +217,6 @@ const allowedProps: AllowedPropKeys = [
   'popoverRef',
   'mountNode',
   'constrain',
-  'liveRegion',
   'shouldHideOnSelect',
   'shouldFocusTriggerOnClose',
   'type',

package/src/MenuContext.ts

@@ -23,6 +23,7 @@
  */
 
 import { createContext } from 'react'
+import { MenuItem } from './Menu/MenuItem'
 
 /**
 ---
@@ -31,8 +32,8 @@ private: true
 @module MenuContext
 **/
 const MenuContext = createContext({
-  registerMenuItem: () => {},
-  removeMenuItem: () => {}
+  registerMenuItem: (_value: MenuItem) => {},
+  removeMenuItem: (_value: MenuItem) => {}
 })
 
 export default MenuContext

package/tsconfig.build.json

@@ -1,7 +1,30 @@
 {
   "extends": "../../tsconfig.build.json",
   "compilerOptions": {
-    "outDir": "./types"
+    "outDir": "./types",
+    "rootDir": "./src",
+    "composite": true
   },
-  "include": ["src/**/*"]
+  "include": ["src"],
+  "references": [
+    { "path": "../ui-babel-preset/tsconfig.build.json" },
+    { "path": "../ui-color-utils/tsconfig.build.json" },
+    { "path": "../ui-test-locator/tsconfig.build.json" },
+    { "path": "../ui-test-queries/tsconfig.build.json" },
+    { "path": "../ui-test-utils/tsconfig.build.json" },
+    { "path": "../ui-themes/tsconfig.build.json" },
+    { "path": "../console/tsconfig.build.json" },
+    { "path": "../emotion/tsconfig.build.json" },
+    { "path": "../shared-types/tsconfig.build.json" },
+    { "path": "../ui-a11y-utils/tsconfig.build.json" },
+    { "path": "../ui-dom-utils/tsconfig.build.json" },
+    { "path": "../ui-icons/tsconfig.build.json" },
+    { "path": "../ui-popover/tsconfig.build.json" },
+    { "path": "../ui-position/tsconfig.build.json" },
+    { "path": "../ui-prop-types/tsconfig.build.json" },
+    { "path": "../ui-react-utils/tsconfig.build.json" },
+    { "path": "../ui-testable/tsconfig.build.json" },
+    { "path": "../ui-utils/tsconfig.build.json" },
+    { "path": "../uid/tsconfig.build.json" }
+  ]
 }