@enact/sandstone/ContextualMenuDecorator/ContextualMenuDecorator.d.ts

Large-screen/TV support library for Enact, containing a variety of UI components.

// Type definitions for sandstone/ContextualMenuDecorator

import { ToggleableProps as ui_Toggleable_ToggleableProps } from "@enact/ui/Toggleable";
import { SkinnableProps as sandstone_Skinnable_SkinnableProps } from "@enact/sandstone/Skinnable";
import { ContextualPopupDecoratorProps as sandstone_ContextualPopupDecorator_ContextualPopupDecoratorProps } from "@enact/sandstone/ContextualPopupDecorator";

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;

export interface ContextualMenuDecoratorConfig extends Object {
  /**
   * Disables passing the  `skin`  prop to the wrapped component.
   */
  noSkin?: boolean;
  /**
 * The prop in which to pass the value of  `open`  state of ContextualMenuDecorator to the
wrapped component.
 */
  openProp?: string;
}
export interface ContextualMenuDecoratorProps
  extends Merge<
    Merge<ui_Toggleable_ToggleableProps, sandstone_Skinnable_SkinnableProps>,
    sandstone_ContextualPopupDecorator_ContextualPopupDecoratorProps
  > {
  /**
   * Direction of popup with respect to the wrapped component.
   */
  direction?:
    | "above"
    | "above center"
    | "above left"
    | "above right"
    | "below"
    | "below center"
    | "below left"
    | "below right"
    | "left middle"
    | "left top"
    | "left bottom"
    | "right middle"
    | "right top"
    | "right bottom";
  /**
 * The items to be displayed in the  `ContextualMenuDecorator`  when  `open` .
 * 
 * Takes either an array of strings or an array of objects. When strings, the values will be
used in the generated components as the readable text. When objects, the properties will
be passed onto an  `Item`  component and  `children`  as well as a unique  `key`  property are
required.
 */
  menuItems?:
    | string[]
    | {
        key: number | string;
        children: string | React.ComponentType;
        [propName: string]: any;
      }[];
  /**
   * Offset from the activator to apply to the position of the popup.
   */
  offset?: "none" | "overlap" | "small";
  /**
 * Called when the user has attempted to close the popup.
 * 
 * This may occur either when the close button is clicked or when spotlight focus
moves outside the boundary of the popup. Setting  `spotlightRestrict`  to  `'self-only'` 
will prevent Spotlight focus from leaving the popup.
 */
  onClose?: Function;
  /**
   * Called when the popup is opened.
   */
  onOpen?: Function;
  /**
 * CSS class name to pass to the
  .
 * 
 * This is commonly used to set width and height of the popup.
 */
  popupClassName?: string;
  /**
   * An object containing properties to be passed to popup component.
   */
  popupProps?: object;
  /**
 * Restricts or prioritizes spotlight navigation.
 * 
 * Allowed values are:
 * *  `'none'`  - Spotlight can move freely within and beyond the popup
 * *  `'self-first'`  - Spotlight should prefer components within the popup over
components beyond the popup, or
 * *  `'self-only'`  - Spotlight can only be set within the popup
 */
  spotlightRestrict?: "none" | "self-first" | "self-only";
}
export function ContextualMenuDecorator<P>(
  config: ContextualMenuDecoratorConfig,
  Component: React.ComponentType<P> | string,
): React.ComponentType<P & ContextualMenuDecoratorProps>;

export function ContextualMenuDecorator<P>(
  Component: React.ComponentType<P> | string,
): React.ComponentType<P & ContextualMenuDecoratorProps>;

export default ContextualMenuDecorator;