@instructure/ui-menu 11.6.0 → 11.6.1-snapshot-129

package/src/Menu/v2/props.ts

@@ -0,0 +1,213 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+
+import type { MenuTheme, OtherHTMLAttributes } from '@instructure/shared-types'
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type {
+  PlacementPropValues,
+  PositionConstraint,
+  PositionMountNode
+} from '@instructure/ui-position'
+import type { Popover } from '@instructure/ui-popover/latest'
+import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
+
+import { MenuItem } from './MenuItem'
+import type { Menu } from './index'
+import type { MenuItemProps } from './MenuItem/props'
+
+type MenuOwnProps = {
+  /**
+   * Children of type `Menu.Item`, `Menu.Group`, `Menu.Separator`, or `Menu`
+   */
+  children?: React.ReactNode // TODO: oneOf(['MenuItem', 'MenuItemGroup', 'MenuItemSeparator', 'Menu'])
+  /**
+   * Description of the `<Menu />`. The component uses it to add its value to
+   * the `aria-label` attribute.
+   */
+  label?: string
+  /**
+   * Is the `<Menu />` disabled
+   */
+  disabled?: boolean
+  /**
+   * The trigger element, if the `<Menu />` is to render as a popover
+   */
+  trigger?: React.ReactNode
+  /**
+   * If a trigger is supplied, where should the `<Menu />` be placed (relative to the trigger)
+   */
+  placement?: PlacementPropValues
+  /**
+   * Should the `<Menu />` be open for the initial render
+   */
+  defaultShow?: boolean
+  /**
+   * Is the `<Menu />` open (should be accompanied by `onToggle`)
+   */
+  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?: (show: boolean, menu: Menu) => void
+  /**
+   * Callback fired when an item within the `<Menu />` is selected
+   */
+  onSelect?: (
+    e: React.MouseEvent,
+    value: MenuItemProps['value'] | MenuItemProps['value'][],
+    selected: MenuItemProps['selected'],
+    args: MenuItem
+  ) => void
+  /**
+   * If a trigger is supplied, callback fired when the `<Menu />` is closed
+   */
+  onDismiss?: (
+    event: React.UIEvent | React.FocusEvent,
+    documentClick: boolean
+  ) => void
+  /**
+   * If a trigger is supplied, callback fired when the `<Menu />` trigger is focused
+   */
+  onFocus?: (event: React.FocusEvent) => void
+  /**
+   * If a trigger is supplied, callback fired onMouseOver for the `<Menu />` trigger
+   */
+  onMouseOver?: (event: React.MouseEvent) => void
+  /**
+   * Callback fired on the onKeyDown of the `<Menu />`
+   */
+  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void
+  /**
+   * Callback fired on the onKeyUp of the `<Menu />`
+   */
+  onKeyUp?: (event: React.KeyboardEvent<HTMLElement>) => void
+  /**
+   * A function that returns a reference to the `<Menu />`
+   */
+  menuRef?: (el: HTMLElement | null) => void
+  /**
+   * A function that returns a reference to the `<Popover />`
+   */
+  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?: 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?: PositionConstraint
+  /**
+   * If a trigger is supplied, should the `<Menu />` hide when an item is selected
+   */
+  shouldHideOnSelect?: boolean
+  /**
+   * If a trigger is supplied, should the `<Menu />` focus the trigger on after closing
+   */
+  shouldFocusTriggerOnClose?: boolean
+  /**
+   * If a trigger is supplied, this prop can set the CSS `display` property on the `<span>` container element of the underlying Position component
+   */
+  positionContainerDisplay?: 'inline-block' | 'block'
+  /**
+   * The type of `<Menu />`
+   */
+  type?: 'flyout'
+  id?: string
+  /**
+   * Whether or not an arrow pointing to the trigger should be rendered
+   */
+  withArrow?: boolean
+  /**
+   * The horizontal offset for the positioned content.
+   * Works only if `trigger` is provided.
+   */
+  offsetX?: string | number
+  /**
+   * The vertical offset for the positioned content.
+   * Works only if `trigger` is provided.
+   */
+  offsetY?: string | number
+  /**
+   * The maximum height the menu can be. If not set, the menu won't
+   * scroll and will be as tall as the content requires
+   */
+  maxHeight?: string | number
+  /**
+   * Content to render in the label's info region. It is only visible on nested Menus.
+   */
+  renderLabelInfo?: React.ReactNode | (() => React.ReactNode)
+}
+
+type PropKeys = keyof MenuOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type MenuProps = MenuOwnProps &
+  WithStyleProps<MenuTheme, MenuStyle> &
+  // controls can be passed in renderChildren and used later as aria-controls
+  Omit<OtherHTMLAttributes<MenuOwnProps>, 'controls'> & {
+    controls?: React.AriaAttributes['aria-controls']
+  } & WithDeterministicIdProps
+
+type MenuStyle = ComponentStyle<'menu'>
+const allowedProps: AllowedPropKeys = [
+  'children',
+  'label',
+  'disabled',
+  'trigger',
+  'placement',
+  'defaultShow',
+  'show',
+  'onToggle',
+  'onSelect',
+  'onDismiss',
+  'onFocus',
+  'onMouseOver',
+  'onKeyDown',
+  'onKeyUp',
+  'menuRef',
+  'popoverRef',
+  'mountNode',
+  'constrain',
+  'shouldHideOnSelect',
+  'shouldFocusTriggerOnClose',
+  'positionContainerDisplay',
+  'type',
+  'id',
+  'withArrow',
+  'offsetX',
+  'offsetY',
+  'maxHeight',
+  'renderLabelInfo'
+]
+
+export type { MenuProps, MenuStyle }
+export { allowedProps }

package/src/Menu/v2/styles.ts

@@ -0,0 +1,68 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
+import type { MenuStyle, MenuProps } from './props'
+import { calcFocusOutlineStyles } from '@instructure/emotion'
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (
+  componentTheme: NewComponentTypes['Menu'],
+  props: MenuProps,
+  sharedTokens: SharedTokens
+): MenuStyle => {
+  const maxHeight = props.maxHeight
+    ? { maxHeight: props.maxHeight, overflow: 'auto' }
+    : {}
+
+  return {
+    menu: {
+      label: 'menu',
+      minWidth: componentTheme.minWidth,
+      maxWidth: componentTheme.maxWidth,
+      listStyleType: 'none',
+      margin: '0',
+      padding: '0.25rem 0',
+      // TODO-rework
+      //background: componentTheme.background,
+      //borderRadius: componentTheme.borderRadius,
+      display: 'block',
+      position: 'relative',
+      overflow: 'hidden',
+      ...maxHeight,
+      ...calcFocusOutlineStyles(sharedTokens.focusOutline)
+    }
+  }
+}
+
+export default generateStyle

package/src/{index.ts → exports/a.ts}

@@ -21,9 +21,9 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { Menu, MenuItem, MenuItemGroup, MenuItemSeparator } from './Menu'
+export { Menu, MenuItem, MenuItemGroup, MenuItemSeparator } from '../Menu/v1'
 
-export type { MenuProps } from './Menu/props'
-export type { MenuItemProps } from './Menu/MenuItem/props'
-export type { MenuGroupProps } from './Menu/MenuItemGroup/props'
-export type { MenuSeparatorProps } from './Menu/MenuItemSeparator/props'
+export type { MenuProps } from '../Menu/v1/props'
+export type { MenuItemProps } from '../Menu/v1/MenuItem/props'
+export type { MenuGroupProps } from '../Menu/v1/MenuItemGroup/props'
+export type { MenuSeparatorProps } from '../Menu/v1/MenuItemSeparator/props'

package/src/exports/b.ts

@@ -0,0 +1,29 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+export { Menu, MenuItem, MenuItemGroup, MenuItemSeparator } from '../Menu/v2'
+
+export type { MenuProps } from '../Menu/v2/props'
+export type { MenuItemProps } from '../Menu/v2/MenuItem/props'
+export type { MenuGroupProps } from '../Menu/v2/MenuItemGroup/props'
+export type { MenuSeparatorProps } from '../Menu/v2/MenuItemSeparator/props'

package/src/{MenuContext.ts → utils/v1/MenuContext.ts}

@@ -23,7 +23,6 @@
  */
 
 import { createContext } from 'react'
-import { MenuItem } from './Menu/MenuItem'
 
 /**
 ---
@@ -32,8 +31,9 @@ private: true
 @module MenuContext
 **/
 const MenuContext = createContext({
-  registerMenuItem: (_value: MenuItem) => {},
-  removeMenuItem: (_value: MenuItem) => {}
+  // This is actually a `MenuItem`, but we dont want to version this one
+  registerMenuItem: (_value: any) => {},
+  removeMenuItem: (_value: any) => {}
 })
 
 export default MenuContext