@khanacademy/wonder-blocks-popover 2.1.6 → 3.0.0

package/dist/components/popover-anchor.js.flow

@@ -1,51 +0,0 @@
-/**
- * Flowtype definitions for data
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import * as React from "react";
-import type { AriaProps } from "@khanacademy/wonder-blocks-core";
-declare type Props = {|
-  ...AriaProps,
-  ...{|
-    /**
-     * Callback to be invoked when the anchored content is mounted.
-     * This provides a reference to the anchored content, which can then be
-     * used for calculating popover content positioning.
-     */
-    anchorRef: (arg1?: HTMLElement) => mixed,
-
-    /**
-     * The element that triggers the popover. This element will be used to
-     * position the popover. It can be either a Node or a function using the
-     * children-as-function pattern to pass an open function for use anywhere
-     * within children. The latter provides a lot of flexibility in terms of
-     * what actions may trigger the `Popover` to launch the
-     * [PopoverDialog](#PopoverDialog).
-     */
-    children:
-      | React.Element<any>
-      | ((arg1: {|
-          open: () => void,
-        |}) => React.Element<any>),
-
-    /**
-     * The unique identifier to give to the anchor.
-     */
-    id?: string,
-
-    /**
-     * Called when the anchor is clicked
-     */
-    onClick: () => void,
-  |},
-|};
-/**
- * The element that triggers the popover dialog. This is also used as reference
- * to position the dialog itself.
- */
-declare export default class PopoverAnchor extends React.Component<Props> {
-  componentDidMount(): void;
-  render(): React.Node;
-}

package/dist/components/popover-content-core.js.flow

@@ -1,73 +0,0 @@
-/**
- * Flowtype definitions for data
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import * as React from "react";
-import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
-declare type Props = {|
-  ...AriaProps,
-  ...{|
-    /**
-     * The content to render inside the popover.
-     */
-    children: React.Node,
-
-    /**
-     * Close button color
-     */
-    closeButtonLight?: boolean,
-
-    /**
-     * Close button label for use in screen readers
-     */
-    closeButtonLabel?: string,
-
-    /**
-     * When true, the close button is shown; otherwise, the close button is not shown.
-     */
-    closeButtonVisible?: boolean,
-
-    /**
-     * Whether we should use the default light color scheme or switch to a
-     * different color scheme.
-     */
-    color: "blue" | "darkBlue" | "white",
-
-    /**
-     * Custom styles applied to the content container
-     */
-    style?: StyleType,
-
-    /**
-     * Test ID used for e2e testing.
-     */
-    testId?: string,
-  |},
-|};
-declare type DefaultProps = {|
-  color: $PropertyType<Props, "color">,
-  closeButtonLight: $PropertyType<Props, "closeButtonLight">,
-  closeButtonVisible: $PropertyType<Props, "closeButtonVisible">,
-|};
-/**
- * This is the base popover container. It’s used internally by all the variants.
- * Also, it can be used to create flexible popovers.
- *
- * ### Usage
- *
- * ```jsx
- * import {PopoverContentCore} from "@khanacademy/wonder-blocks-popover";
- *
- * <PopoverContentCore>
- *  <>
- *      Some custom layout
- *  </>
- * </PopoverContentCore>
- * ```
- */
-declare export default class PopoverContentCore extends React.Component<Props> {
-  static defaultProps: DefaultProps;
-  render(): React.Node;
-}

package/dist/components/popover-content.js.flow

@@ -1,113 +0,0 @@
-/**
- * Flowtype definitions for data
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import * as React from "react";
-import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
-import type { PopoverContextType } from "./popover-context";
-declare type Props = {|
-  ...AriaProps,
-  ...{|
-    /**
-     * The content to render inside the popover.
-     */
-    content: string,
-
-    /**
-     * The popover title
-     */
-    title: string,
-
-    /**
-     * User-defined actions.
-     *
-     * It can be either a Node or a function using the children-as-function
-     * pattern to pass a close function for use anywhere within the actions.
-     * This provides a lot of flexibility in terms of what actions may trigger
-     * the Popover to close the popover dialog.
-     */
-    actions?:
-      | React.Node
-      | ((arg1: {|
-          close: () => mixed,
-        |}) => React.Element<any>),
-
-    /**
-     * Close button label for use in screen readers
-     */
-    closeButtonLabel?: string,
-
-    /**
-     * When true, the close button is shown; otherwise, the close button is not shown.
-     */
-    closeButtonVisible?: boolean,
-
-    /**
-     * Custom styles to be injected to the popover content container
-     */
-    style?: StyleType,
-
-    /**
-     * Test ID used for e2e testing.
-     */
-    testId?: string,
-
-    /**
-     * Decorate the popover with an illustrated icon. It cannot be used at the
-     * same time with image.
-     */
-    icon?:
-      | string
-      | React.Element<"img">
-      | React.Element<"svg">,
-
-    /**
-     * Decorate the popover with a full-bleed illustration. It cannot be used at
-     * the same time with icon.
-     */
-    image?:
-      | React.Element<"img">
-      | React.Element<"svg">,
-
-    /**
-     * When true, changes the popover dialog background to blue; otherwise, the
-     * popover dialog background is not modified. It can be used only with
-     * Text-only popovers. It cannot be used with icon or image.
-     */
-    emphasized?: boolean,
-  |},
-|};
-declare type DefaultProps = {|
-  closeButtonVisible: $PropertyType<Props, "closeButtonVisible">,
-|};
-/**
- * This is the container that is consumed by all the predefined variations. Its
- * main responsibility is populate the contents depending on the variation used.
- *
- * ### Usage
- *
- * ```jsx
- * import {PopoverContent} from "@khanacademy/wonder-blocks-popover";
- *
- * <PopoverContent
- *  closeButtonVisible
- *  content="Some content for the popover"
- *  title="Popover with text only"
- * />
- * ```
- */
-declare export default class PopoverContent extends React.Component<Props> {
-  static defaultProps: DefaultProps;
-  componentDidMount(): void;
-
-  /**
-   * Runtime validation in case we try to use an invalid shape
-   */
-  validateProps(x: PopoverContextType): void;
-  maybeRenderImage: (context: PopoverContextType) => React.Element<any>;
-  maybeRenderIcon: () => React.Element<any>;
-  maybeRenderActions: (close: () => mixed) => React.Element<any>;
-  render(): React.Node;
-}

package/dist/components/popover-context.js.flow

@@ -1,35 +0,0 @@
-/**
- * Flowtype definitions for data
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import * as React from "react";
-import type { Placement } from "@khanacademy/wonder-blocks-tooltip";
-export type PopoverContextType = {|
-  /**
-   * Facilitates passing the `onClose` handler from the Popover down to its
-   * children.
-   */
-  close?: () => mixed,
-
-  /**
-   * Facilitates passing this value from Popover (via TooltipPopper) down to
-   * PopoverContent. This is needed here to reposition the illustration to the
-   * start or the end of the content, in case the popper changes its
-   * placement.
-   */
-  placement?: Placement,
-|};
-/**
- * This context is being used for two reasons:
- *
- * 1. Pass down the `close` method from the `Popover` component to its children
- *    (`PopoverContent` and `CloseButton`). This way, these components can use
- *    this handler internally.
- *
- * 2. Keeps a reference of the TooltipPopper's `placement` value. It can be one
- *    of the following values: "top", "bottom", "left" or "right".
- */
-declare var PopoverContext: React.Context<PopoverContextType>;
-declare export default typeof PopoverContext;

package/dist/components/popover-dialog.js.flow

@@ -1,59 +0,0 @@
-/**
- * Flowtype definitions for data
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import * as React from "react";
-import type { AriaProps } from "@khanacademy/wonder-blocks-core";
-import type {
-  Placement,
-  PopperElementProps,
-} from "@khanacademy/wonder-blocks-tooltip";
-import PopoverContent from "./popover-content";
-import PopoverContentCore from "./popover-content-core";
-declare type Props = {|
-  ...AriaProps,
-  ...PopperElementProps,
-  ...{|
-    /**
-     * The content to render inside the dialog.
-     */
-    children:
-      | React.Element<typeof PopoverContent>
-      | React.Element<typeof PopoverContentCore>,
-
-    /**
-     * The unique identifier to give to the popover content.
-     */
-    id?: string,
-
-    /**
-     * Called when popper changes its placement
-     */
-    onUpdate: (placement: Placement) => mixed,
-
-    /**
-     * Whether to show the popover tail or not.
-     */
-    showTail: boolean,
-  |},
-|};
-/**
- * This is an internal component that we use to render the stuff that appears
- * when a popover shows. It's composed by two elements: The popover content,
- * that can be of type [PopoverContent](#PopoverContent) or
- * [PopoverContentCore](#PopoverContentCore), and the
- * [TooltipTail](#TooltipTail).
- *
- * The main difference with [TooltipBubble](#TooltipBubble) is that bubble
- * handles hover states and PopoverDialog doesn't need to handle any states at
- * all (for now). Also, PopoverDialog needs to coordinate different background
- * colors for the content and tail components.
- *
- * Note that without explicit positioning, the tail will not be centered.
- */
-declare export default class PopoverDialog extends React.Component<Props> {
-  componentDidUpdate(prevProps: Props): void;
-  render(): React.Node;
-}

package/dist/components/popover-event-listener.js.flow

@@ -1,43 +0,0 @@
-/**
- * Flowtype definitions for data
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import * as React from "react";
-import PopoverContent from "./popover-content";
-import PopoverContentCore from "./popover-content-core";
-declare type Props = {|
-  /**
-   * Called when `esc` is pressed
-   */
-  onClose: () => mixed,
-
-  /**
-   * Popover Content ref.
-   * Will close the popover when clicking outside this element.
-   */
-  contentRef?: React.RefObject<PopoverContentCore | PopoverContent>,
-|};
-declare type State = {|
-  /**
-   * Tracks the first click triggered by the click event listener.
-   */
-  isFirstClick: boolean,
-|};
-/**
- * A component that, when mounted, calls `onClose` when certain events occur.
- * This includes when pressing Escape or clicking outside the Popover.
- * @see
- * @khanacademy /wonder-blocks-modal/components/modal-launcher.js
- */
-declare export default class PopoverEventListener
-  extends React.Component<Props, State>
-{
-  state: State;
-  componentDidMount(): void;
-  componentWillUnmount(): void;
-  _handleKeyup: (e: KeyboardEvent) => void;
-  _handleClick: (e: MouseEvent) => void;
-  render(): React.Element<any> | null;
-}

package/dist/components/popover.js.flow

@@ -1,182 +0,0 @@
-/**
- * Flowtype definitions for data
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import * as React from "react";
-import type { AriaProps } from "@khanacademy/wonder-blocks-core";
-import type { Placement } from "@khanacademy/wonder-blocks-tooltip";
-import PopoverContent from "./popover-content";
-import PopoverContentCore from "./popover-content-core";
-declare type PopoverContents =
-  | React.Element<typeof PopoverContent>
-  | React.Element<typeof PopoverContentCore>;
-declare type Props = {|
-  ...AriaProps,
-  ...$ReadOnly<{|
-    /**
-     * The element that triggers the popover. This element will be used to
-     * position the popover. It can be either a Node or a function using the
-     * children-as-function pattern to pass an open function for use anywhere
-     * within children. The latter provides a lot of flexibility in terms of
-     * what actions may trigger the `Popover` to launch the popover dialog.
-     */
-    children:
-      | React.Element<any>
-      | ((arg1: {|
-          open: () => void,
-        |}) => React.Element<any>),
-
-    /**
-     * The content of the popover. You can either use
-     * [PopoverContent](#PopoverContent) with one of the pre-defined variants,
-     * or include your own custom content using
-     * [PopoverContentCore](#PopoverContentCore directly.
-     *
-     * If the popover needs to close itself, the close function provided to this
-     * callback can be called to close the popover.
-     */
-    content:
-      | PopoverContents
-      | ((arg1: {|
-          close: () => void,
-        |}) => PopoverContents),
-
-    /**
-     * Where the popover should try to appear in relation to the trigger element.
-     */
-    placement: Placement,
-
-    /**
-     * When enabled, user can hide the popover content by pressing the `esc` key
-     * or clicking/tapping outside of it.
-     */
-    dismissEnabled?: boolean,
-
-    /**
-     * The unique identifier to give to the popover. Provide this in cases where
-     * you want to override the default accessibility solution. This identifier
-     * will be applied to the popover content.
-     *
-     * By providing this identifier, the children that this popover anchors to
-     * will not be automatically given the
-     * [aria-describedby](https://www.w3.org/TR/wai-aria-1.1/#aria-describedby)
-     * attribute. Instead, the accessibility solution is the responsibility of
-     * the caller.
-     *
-     * If this is not provided, the
-     * [aria-describedby](https://www.w3.org/TR/wai-aria-1.1/#aria-describedby)
-     * attribute will be added to the children with a unique identifier pointing
-     * to the popover dialog.
-     */
-    id?: string,
-
-    /**
-     * The selector for the element that will be focused when the popover
-     * content shows. When not set, the first focusable element within the
-     * popover content will be used.
-     */
-    initialFocusId?: string,
-
-    /**
-     * Renders the popover when true, renders nothing when false.
-     *
-     * Using this prop makes the component behave as a controlled component. The
-     * parent is responsible for managing the opening/closing of the popover
-     * when using this prop.
-     */
-    opened?: boolean,
-
-    /**
-     * Called when the popover closes
-     */
-    onClose?: () => mixed,
-
-    /**
-     * Test ID used for e2e testing.
-     */
-    testId?: string,
-
-    /**
-     * Whether to show the popover tail or not. Defaults to true.
-     */
-    showTail: boolean,
-  |}>,
-|};
-declare type State = $ReadOnly<{|
-  /**
-   * Keeps a reference of the dialog state
-   */
-  opened: boolean,
-
-  /**
-   * Anchor element DOM reference
-   */
-  anchorElement?: HTMLElement,
-
-  /**
-   * Current popper placement
-   */
-  placement: Placement,
-|}>;
-declare type DefaultProps = $ReadOnly<{|
-  placement: $PropertyType<Props, "placement">,
-  showTail: $PropertyType<Props, "showTail">,
-|}>;
-/**
- * Popovers provide additional information that is related to a particular
- * element and/or content. They can include text, links, icons and
- * illustrations. The main difference with `Tooltip` is that they must be
- * dismissed by clicking an element.
- *
- * This component uses the `PopoverPopper` component to position the
- * `PopoverContentCore` component according to the children it is wrapping.
- *
- * ### Usage
- *
- * ```jsx
- * import {Popover, PopoverContent} from "@khanacademy/wonder-blocks-popover";
- *
- * <Popover
- *  onClose={() => {}}
- *  content={
- *      <PopoverContent title="Title" content="Some content" closeButtonVisible />
- *  }>
- *      {({ open }) => <Button onClick={open}>Open popover</Button>}
- *  </Popover>
- * ```
- */
-declare export default class Popover extends React.Component<Props, State> {
-  static defaultProps: DefaultProps;
-
-  /**
-   * Used to sync the `opened` state when Popover acts as a controlled
-   * component
-   */
-  static getDerivedStateFromProps(
-    props: Props,
-    state: State
-  ): $Rest<State, {}> | null | void;
-  state: State;
-
-  /**
-   * Popover content ref
-   */
-  contentRef: React.RefObject<PopoverContent | PopoverContentCore>;
-
-  /**
-   * Popover dialog closed
-   */
-  handleClose: () => void;
-
-  /**
-   * Popover dialog opened
-   */
-  handleOpen: () => void;
-  updateRef: (actualRef?: HTMLElement) => void;
-  renderContent(): PopoverContents;
-  renderPopper(uniqueId: string): React.Node;
-  getHost(): Element | null | void;
-  render(): React.Node;
-}

package/dist/index.js.flow

@@ -1,10 +0,0 @@
-/**
- * Flowtype definitions for data
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import Popover from "./components/popover";
-import PopoverContent from "./components/popover-content";
-import PopoverContentCore from "./components/popover-content-core";
-declare export { Popover, PopoverContent, PopoverContentCore };

package/dist/util/util.js.flow

@@ -1,9 +0,0 @@
-/**
- * Flowtype definitions for data
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-declare export function findFocusableNodes(
-  root: HTMLElement | Document
-): Array<HTMLElement>;