@enact/sandstone/ContextualPopupDecorator/ContextualPopupDecorator.d.ts

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

// Type definitions for sandstone/ContextualPopupDecorator

import * as React from "react";

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 ContextualPopupDecoratorConfig extends Object {
  /**
   * `ContextualPopup`  without the arrow.
   */
  noArrow?: boolean;
  /**
   * Disables passing the  `skin`  prop to the wrapped component.
   */
  noSkin?: boolean;
  /**
 * The prop in which to pass the value of  `open`  state of ContextualPopupDecorator to the
wrapped component.
 */
  openProp?: string;
}
export interface ContextualPopupDecoratorProps {
  /**
 * The component rendered within the
  .
 */
  popupComponent: React.ComponentType;
  /**
   * Limits the range of voice control to the popup.
   */
  "data-webos-voice-exclusive"?: boolean;
  /**
   * 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";
  /**
 * Disables closing the popup when the user presses the cancel/back (e.g.  `ESC` ) key or taps outside the
popup.
 */
  noAutoDismiss?: boolean;
  /**
   * Offset from the activator to apply to the position of the popup.
   *
   * Only applies when  `noArrow`  is  `true` .
   */
  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;
  /**
   * Displays the contextual popup.
   */
  open?: boolean;
  /**
 * 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;
  /**
 * The container ID to use with Spotlight.
 * 
 * The spotlight container for the popup isn't created until it is open. To configure
the container using  `Spotlight.set()` , handle the  `onOpen`  event which is fired after
the popup has been created and opened.
 */
  popupSpotlightId?: string;
  /**
 * The current skin for this component.
 * 
 * When  `noSkin`  is set on the config object,  `skin`  will only be applied to the
   and not
to the popup's activator component.
 */
  skin?: string;
  /**
 * 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 ContextualPopupDecorator<P>(
  config: ContextualPopupDecoratorConfig,
  Component: React.ComponentType<P> | string,
): React.ComponentType<P & ContextualPopupDecoratorProps>;

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

export interface ContextualPopupProps {
  /**
   * The contents of the popup.
   */
  children: React.ReactNode;
  /**
   * Style object for arrow position.
   */
  arrowPosition?: object;
  /**
   * Style object for container position.
   */
  containerPosition?: object;
  /**
   * Called with the reference to the container node.
   */
  containerRef?: object | Function;
  /**
   * Direction of ContextualPopup.
   */
  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";
  /**
   * Offset from the activator to apply to the position of the popup.
   */
  offset?: "none" | "overlap" | "small";
  /**
   * Shows the arrow.
   */
  showArrow?: boolean;
}
/**
 * A popup component used by
   to
wrap its   .
 * 
 * `ContextualPopup`  is usually not used directly but is made available for unique application use
cases.
 */

export class ContextualPopup extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, ContextualPopupProps>
> {}

export default ContextualPopupDecorator;