@khanacademy/wonder-blocks-tooltip 1.4.6 → 1.4.7

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @khanacademy/wonder-blocks-tooltip
 
+## 1.4.7
+
+### Patch Changes
+
+-   d816af08: Update build and test configs use TypeScript
+-   3891f544: Update babel config to include plugins that Storybook needed
+-   0d28bb1c: Configured TypeScript
+-   3d05f764: Fix HOCs and other type errors
+-   c2ec4902: Update eslint configuration, fix lint
+-   2983c05b: Include 'types' field in package.json
+-   77ff6a66: Generate Flow types from TypeScript types
+-   873f4a14: Tweak 'Offset' type to use React.CSSProperties
+-   ec8d4b7f: Fix miscellaneous TypeScript errors
+-   Updated dependencies [d816af08]
+-   Updated dependencies [3891f544]
+-   Updated dependencies [0d28bb1c]
+-   Updated dependencies [873f4a14]
+-   Updated dependencies [3d05f764]
+-   Updated dependencies [c2ec4902]
+-   Updated dependencies [2983c05b]
+-   Updated dependencies [77ff6a66]
+-   Updated dependencies [ec8d4b7f]
+    -   @khanacademy/wonder-blocks-color@1.2.2
+    -   @khanacademy/wonder-blocks-core@4.8.0
+    -   @khanacademy/wonder-blocks-layout@1.4.17
+    -   @khanacademy/wonder-blocks-modal@3.0.8
+    -   @khanacademy/wonder-blocks-spacing@3.0.6
+    -   @khanacademy/wonder-blocks-typography@1.1.39
+
 ## 1.4.6
 
 ### Patch Changes

package/dist/components/tooltip-anchor.d.ts

@@ -0,0 +1,85 @@
+/**
+ * This component turns the given content into an accessible anchor for
+ * positioning and displaying tooltips.
+ */
+import * as React from "react";
+import type { IIdentifierFactory } from "@khanacademy/wonder-blocks-core";
+import type { IActiveTrackerSubscriber } from "../util/active-tracker";
+type Props = {
+    /**
+     * The content for anchoring the tooltip.
+     * This element will be used to position the tooltip.
+     * If a string is passed as children we wrap it in a Text element.
+     * We allow children to be a string so that we can add tooltips to
+     * words within a large block of text easily.
+     */
+    children: React.ReactElement<any> | string;
+    /**
+     * 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 tooltip bubble positioning.
+     */
+    anchorRef: (arg1?: Element | null | undefined) => unknown;
+    /**
+     * When true, if a tabindex attribute is not already present on the element
+     * wrapped by the anchor, the element will be given tabindex=0 to make it
+     * keyboard focusable; otherwise, does not attempt to change the ability to
+     * focus the anchor element.
+     *
+     * Defaults to true.
+     *
+     * One might set this to false in circumstances where the wrapped component
+     * already can receive focus or contains an element that can.
+     * Use good judgement when overriding this value, the tooltip content should
+     * be accessible via keyboard in all circumstances where the tooltip would
+     * appear using the mouse, so verify those use-cases.
+     */
+    forceAnchorFocusivity?: boolean;
+    /**
+     * Callback to pass active state back to Tooltip.
+     *
+     * `active` will be true whenever the anchor is hovered or focused and false
+     * otherwise.
+     */
+    onActiveChanged: (active: boolean) => unknown;
+    /**
+     * Optional unique id factory.
+     */
+    ids?: IIdentifierFactory;
+};
+type DefaultProps = {
+    forceAnchorFocusivity: Props["forceAnchorFocusivity"];
+};
+type State = {
+    /** Is the anchor active or not? */
+    active: boolean;
+};
+export default class TooltipAnchor extends React.Component<Props, State> implements IActiveTrackerSubscriber {
+    _weSetFocusivity: boolean | null | undefined;
+    _anchorNode: Element | null | undefined;
+    _focused: boolean;
+    _hovered: boolean;
+    _stolenFromUs: boolean;
+    _unsubscribeFromTracker: () => void | null | undefined;
+    _timeoutID: number | null | undefined;
+    static defaultProps: DefaultProps;
+    constructor(props: Props);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Props): void;
+    componentWillUnmount(): void;
+    static ariaContentId: string;
+    activeStateStolen: () => void;
+    _updateFocusivity(): void;
+    _updateActiveState(hovered: boolean, focused: boolean): void;
+    _clearPendingAction(): void;
+    _setActiveState(active: boolean, instant?: boolean): void;
+    _handleFocusIn: () => void;
+    _handleFocusOut: () => void;
+    _handleMouseEnter: () => void;
+    _handleMouseLeave: () => void;
+    _handleKeyUp: (e: KeyboardEvent) => void;
+    _renderAnchorableChildren(): React.ReactElement<any>;
+    _renderAccessibleChildren(ids: IIdentifierFactory): React.ReactNode;
+    render(): React.ReactElement;
+}
+export {};

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

@@ -0,0 +1,98 @@
+/**
+ * Flowtype definitions for tooltip-anchor
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import * as React from "react";
+import type { IIdentifierFactory } from "@khanacademy/wonder-blocks-core";
+import type { IActiveTrackerSubscriber } from "../util/active-tracker";
+declare type Props = {
+  /**
+   * The content for anchoring the tooltip.
+   * This element will be used to position the tooltip.
+   * If a string is passed as children we wrap it in a Text element.
+   * We allow children to be a string so that we can add tooltips to
+   * words within a large block of text easily.
+   */
+  children: React.Element<any> | string,
+
+  /**
+   * 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 tooltip bubble positioning.
+   */
+  anchorRef: (arg1?: Element | null | void) => mixed,
+
+  /**
+   * When true, if a tabindex attribute is not already present on the element
+   * wrapped by the anchor, the element will be given tabindex=0 to make it
+   * keyboard focusable; otherwise, does not attempt to change the ability to
+   * focus the anchor element.
+   *
+   * Defaults to true.
+   *
+   * One might set this to false in circumstances where the wrapped component
+   * already can receive focus or contains an element that can.
+   * Use good judgement when overriding this value, the tooltip content should
+   * be accessible via keyboard in all circumstances where the tooltip would
+   * appear using the mouse, so verify those use-cases.
+   */
+  forceAnchorFocusivity?: boolean,
+
+  /**
+   * Callback to pass active state back to Tooltip.
+   *
+   * `active` will be true whenever the anchor is hovered or focused and false
+   * otherwise.
+   */
+  onActiveChanged: (active: boolean) => mixed,
+
+  /**
+   * Optional unique id factory.
+   */
+  ids?: IIdentifierFactory,
+  ...
+};
+declare type DefaultProps = {
+  forceAnchorFocusivity: $PropertyType<Props, "forceAnchorFocusivity">,
+  ...
+};
+declare type State = {
+  /**
+   * Is the anchor active or not?
+   */
+  active: boolean,
+  ...
+};
+declare export default class TooltipAnchor
+  mixins React.Component<Props, State>, IActiveTrackerSubscriber
+{
+  _weSetFocusivity: boolean | null | void;
+  _anchorNode: Element | null | void;
+  _focused: boolean;
+  _hovered: boolean;
+  _stolenFromUs: boolean;
+  _unsubscribeFromTracker: () => void | null | void;
+  _timeoutID: number | null | void;
+  static defaultProps: DefaultProps;
+  constructor(props: Props): this;
+  componentDidMount(): void;
+  componentDidUpdate(prevProps: Props): void;
+  componentWillUnmount(): void;
+  static ariaContentId: string;
+  activeStateStolen: () => void;
+  _updateFocusivity(): void;
+  _updateActiveState(hovered: boolean, focused: boolean): void;
+  _clearPendingAction(): void;
+  _setActiveState(active: boolean, instant?: boolean): void;
+  _handleFocusIn: () => void;
+  _handleFocusOut: () => void;
+  _handleMouseEnter: () => void;
+  _handleMouseLeave: () => void;
+  _handleKeyUp: (e: KeyboardEvent) => void;
+  _renderAnchorableChildren(): React.Element<any>;
+  _renderAccessibleChildren(ids: IIdentifierFactory): React.Node;
+  render(): React.Element<>;
+}

package/dist/components/tooltip-bubble.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+import TooltipContent from "./tooltip-content";
+import type { getRefFn, Offset, Placement } from "../util/types";
+export type PopperElementProps = {
+    /** The placement of the bubble with respect to the anchor. */
+    placement: Placement;
+    /** Whether the bubble is out of bounds or not. */
+    isReferenceHidden?: boolean | null | undefined;
+    /** A callback for updating the ref of the bubble itself. */
+    updateBubbleRef?: getRefFn;
+    /** A callback for updating the ref of the bubble's tail. */
+    updateTailRef?: getRefFn;
+    /** Where the tail is to be rendered. */
+    tailOffset?: Offset;
+    /** Additional styles to be applied by the bubble. */
+    style?: StyleType;
+};
+export type Props = {
+    /** The unique identifier for this component. */
+    id: string;
+    /** The `TooltipContent` element that will be rendered in the bubble. */
+    children: React.ReactElement<React.ComponentProps<typeof TooltipContent>>;
+    onActiveChanged: (active: boolean) => unknown;
+} & PopperElementProps;
+type State = {
+    active: boolean;
+};
+export default class TooltipBubble extends React.Component<Props, State> {
+    state: State;
+    _setActiveState(active: boolean): void;
+    handleMouseEnter: () => void;
+    handleMouseLeave: () => void;
+    render(): React.ReactElement;
+}
+export {};

package/dist/components/tooltip-bubble.js.flow

@@ -0,0 +1,72 @@
+/**
+ * Flowtype definitions for tooltip-bubble
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import * as React from "react";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+import TooltipContent from "./tooltip-content";
+import type { getRefFn, Offset, Placement } from "../util/types";
+export type PopperElementProps = {
+  /**
+   * The placement of the bubble with respect to the anchor.
+   */
+  placement: Placement,
+
+  /**
+   * Whether the bubble is out of bounds or not.
+   */
+  isReferenceHidden?: boolean | null | void,
+
+  /**
+   * A callback for updating the ref of the bubble itself.
+   */
+  updateBubbleRef?: getRefFn,
+
+  /**
+   * A callback for updating the ref of the bubble's tail.
+   */
+  updateTailRef?: getRefFn,
+
+  /**
+   * Where the tail is to be rendered.
+   */
+  tailOffset?: Offset,
+
+  /**
+   * Additional styles to be applied by the bubble.
+   */
+  style?: StyleType,
+  ...
+};
+export type Props = {
+  ...{
+    /**
+     * The unique identifier for this component.
+     */
+    id: string,
+
+    /**
+     * The `TooltipContent` element that will be rendered in the bubble.
+     */
+    children: React.Element<React.ComponentProps<typeof TooltipContent>>,
+    onActiveChanged: (active: boolean) => mixed,
+    ...
+  },
+  ...PopperElementProps,
+};
+declare type State = {
+  active: boolean,
+  ...
+};
+declare export default class TooltipBubble
+  mixins React.Component<Props, State>
+{
+  state: State;
+  _setActiveState(active: boolean): void;
+  handleMouseEnter: () => void;
+  handleMouseLeave: () => void;
+  render(): React.Element<>;
+}

package/dist/components/tooltip-content.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+import type { Typography } from "@khanacademy/wonder-blocks-typography";
+type Props = {
+    /**
+     * The title for the tooltip content.
+     * Optional.
+     */
+    title?: string | React.ReactElement<React.ComponentProps<Typography>>;
+    /**
+     * The main content for a tooltip.
+     */
+    children: string | React.ReactElement<React.ComponentProps<Typography>> | Array<React.ReactElement<React.ComponentProps<Typography>>>;
+};
+/**
+ * This component is used to provide the content that is to be rendered in the
+ * tooltip bubble.
+ *
+ * ### Usage
+ *
+ * ```jsx
+ * import {TooltipContent} from "@khanacademy/wonder-blocks-tooltip";
+ *
+ * <TooltipContent title="Title text!">
+ *  Some content in my tooltip.
+ * </TooltipContent>
+ * ```
+ */
+export default class TooltipContent extends React.Component<Props> {
+    _renderTitle(): React.ReactNode;
+    _renderChildren(): React.ReactNode;
+    render(): React.ReactElement;
+}
+export {};

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

@@ -0,0 +1,44 @@
+/**
+ * Flowtype definitions for tooltip-content
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import * as React from "react";
+import type { Typography } from "@khanacademy/wonder-blocks-typography";
+declare type Props = {
+  /**
+   * The title for the tooltip content.
+   * Optional.
+   */
+  title?: string | React.Element<React.ComponentProps<Typography>>,
+
+  /**
+   * The main content for a tooltip.
+   */
+  children:
+    | string
+    | React.Element<React.ComponentProps<Typography>>
+    | Array<React.Element<React.ComponentProps<Typography>>>,
+  ...
+};
+/**
+ * This component is used to provide the content that is to be rendered in the
+ * tooltip bubble.
+ *
+ * ### Usage
+ *
+ * ```jsx
+ * import {TooltipContent} from "@khanacademy/wonder-blocks-tooltip";
+ *
+ * <TooltipContent title="Title text!">
+ *  Some content in my tooltip.
+ * </TooltipContent>
+ * ```
+ */
+declare export default class TooltipContent mixins React.Component<Props> {
+  _renderTitle(): React.Node;
+  _renderChildren(): React.Node;
+  render(): React.Element<>;
+}

package/dist/components/tooltip-popper.d.ts

@@ -0,0 +1,32 @@
+/**
+ * This component is a light wrapper for react-popper, allowing us to position
+ * and control the tooltip bubble location and visibility as we need.
+ */
+import * as React from "react";
+import type { PopperChildrenProps } from "react-popper";
+import RefTracker from "../util/ref-tracker";
+import type { Placement } from "../util/types";
+import type { PopperElementProps } from "./tooltip-bubble";
+type Props = {
+    /**
+     * This uses the children-as-a-function approach, mirroring react-popper's
+     * implementation.
+     *
+     * TODO(WB-624): figure out to only allow TooltipBubble and PopoverDialog
+     */
+    children: (arg1: PopperElementProps) => React.ReactElement<any>;
+    /**
+     * The element that anchors the tooltip bubble.
+     * This is used to position the bubble.
+     */
+    anchorElement: HTMLElement | null | undefined;
+    /** Where should the bubble try to go with respect to its anchor. */
+    placement: Placement;
+};
+export default class TooltipPopper extends React.Component<Props> {
+    _bubbleRefTracker: RefTracker;
+    _tailRefTracker: RefTracker;
+    _renderPositionedContent(popperProps: PopperChildrenProps): React.ReactNode;
+    render(): React.ReactElement;
+}
+export {};

package/dist/components/tooltip-popper.js.flow

@@ -0,0 +1,39 @@
+/**
+ * Flowtype definitions for tooltip-popper
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import * as React from "react";
+import type { PopperChildrenProps } from "react-popper";
+import RefTracker from "../util/ref-tracker";
+import type { Placement } from "../util/types";
+import type { PopperElementProps } from "./tooltip-bubble";
+declare type Props = {
+  /**
+   * This uses the children-as-a-function approach, mirroring react-popper's
+   * implementation.
+   *
+   * TODO(WB-624): figure out to only allow TooltipBubble and PopoverDialog
+   */
+  children: (arg1: PopperElementProps) => React.Element<any>,
+
+  /**
+   * The element that anchors the tooltip bubble.
+   * This is used to position the bubble.
+   */
+  anchorElement: HTMLElement | null | void,
+
+  /**
+   * Where should the bubble try to go with respect to its anchor.
+   */
+  placement: Placement,
+  ...
+};
+declare export default class TooltipPopper mixins React.Component<Props> {
+  _bubbleRefTracker: RefTracker;
+  _tailRefTracker: RefTracker;
+  _renderPositionedContent(popperProps: PopperChildrenProps): React.Node;
+  render(): React.Element<>;
+}

package/dist/components/tooltip-tail.d.ts

@@ -0,0 +1,57 @@
+import * as React from "react";
+import Colors from "@khanacademy/wonder-blocks-color";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+import type { getRefFn, Placement, Offset } from "../util/types";
+export type Props = {
+    /**
+     * Whether we should use the default white background color or switch to a
+     * different bg color.
+     *
+     * NOTE: Added to support custom popovers
+     * @ignore
+     */
+    color: keyof typeof Colors;
+    /** The offset of the tail indicating where it should be positioned. */
+    offset?: Offset;
+    /** The placement of the tail with respect to the tooltip anchor. */
+    placement: Placement;
+    /** A callback to update the ref of the tail element. */
+    updateRef?: getRefFn;
+};
+type DefaultProps = {
+    color: Props["color"];
+};
+type Dimensions = {
+    trimlinePoints: [string, string];
+    points: [string, string, string];
+    height: number;
+    width: number;
+};
+type FilterPosition = {
+    y: string;
+    x: string;
+    offsetShadowX: number;
+};
+export default class TooltipTail extends React.Component<Props> {
+    static defaultProps: DefaultProps;
+    _calculateDimensionsFromPlacement(): Dimensions;
+    _getFilterPositioning(): FilterPosition | null | undefined;
+    /**
+     * Create an SVG filter that applies a blur to an element.
+     * We'll apply it to a dark shape outlining the tooltip, which
+     * will produce the overall effect of a drop-shadow.
+     *
+     * Also, scope its ID by side, so that tooltips with other
+     * "side" values don't end up using the wrong filter from
+     * elsewhere in the document. (The `height` value depends on
+     * which way the arrow is turned!)
+     */
+    _maybeRenderDropshadow(points: [string, string, string]): React.ReactNode;
+    _getFullTailWidth(): number;
+    _getFullTailHeight(): number;
+    _getContainerStyle(): StyleType;
+    _getArrowStyle(): React.CSSProperties;
+    _renderArrow(): React.ReactNode;
+    render(): React.ReactElement;
+}
+export {};

package/dist/components/tooltip-tail.js.flow

@@ -0,0 +1,77 @@
+/**
+ * Flowtype definitions for tooltip-tail
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import * as React from "react";
+import Colors from "@khanacademy/wonder-blocks-color";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+import type { getRefFn, Placement, Offset } from "../util/types";
+export type Props = {
+  /**
+   * Whether we should use the default white background color or switch to a
+   * different bg color.
+   *
+   * NOTE: Added to support custom popovers
+   * @ignore
+   */
+  color: $Keys<typeof Colors>,
+
+  /**
+   * The offset of the tail indicating where it should be positioned.
+   */
+  offset?: Offset,
+
+  /**
+   * The placement of the tail with respect to the tooltip anchor.
+   */
+  placement: Placement,
+
+  /**
+   * A callback to update the ref of the tail element.
+   */
+  updateRef?: getRefFn,
+  ...
+};
+declare type DefaultProps = {
+  color: $PropertyType<Props, "color">,
+  ...
+};
+declare type Dimensions = {
+  trimlinePoints: [string, string],
+  points: [string, string, string],
+  height: number,
+  width: number,
+  ...
+};
+declare type FilterPosition = {
+  y: string,
+  x: string,
+  offsetShadowX: number,
+  ...
+};
+declare export default class TooltipTail mixins React.Component<Props> {
+  static defaultProps: DefaultProps;
+  _calculateDimensionsFromPlacement(): Dimensions;
+  _getFilterPositioning(): FilterPosition | null | void;
+
+  /**
+   * Create an SVG filter that applies a blur to an element.
+   * We'll apply it to a dark shape outlining the tooltip, which
+   * will produce the overall effect of a drop-shadow.
+   *
+   * Also, scope its ID by side, so that tooltips with other
+   * "side" values don't end up using the wrong filter from
+   * elsewhere in the document. (The `height` value depends on
+   * which way the arrow is turned!)
+   */
+  _maybeRenderDropshadow(points: [string, string, string]): React.Node;
+  _getFullTailWidth(): number;
+  _getFullTailHeight(): number;
+  _getContainerStyle(): StyleType;
+  _getArrowStyle(): React.CSSProperties;
+  _renderArrow(): React.Node;
+  render(): React.Element<>;
+}