@khanacademy/perseus 3.0.0 → 4.0.1

package/dist/components/text-input.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+type Props = {
+    value: string | number | null;
+    onChange: (arg1?: any) => void;
+    className?: string;
+    labelText?: string;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    disabled?: boolean;
+    id?: string;
+    placeholder?: string;
+    onKeyDown?: () => void;
+    style?: StyleType;
+};
+type DefaultProps = {
+    value: Props["value"];
+    disabled: Props["disabled"];
+};
+declare class TextInput extends React.Component<Props> {
+    static defaultProps: DefaultProps;
+    id: string;
+    constructor(props: Props);
+    render(): React.ReactNode;
+    focus: () => void;
+    blur: () => void;
+    getValue: () => string | null | undefined;
+    getStringValue: () => string | null | undefined;
+    setSelectionRange: (arg1: number, arg2: number) => void;
+    getSelectionStart: () => number;
+    getSelectionEnd: () => number;
+}
+export default TextInput;

package/dist/components/text-input.js.flow

@@ -0,0 +1,39 @@
+/**
+ * Flowtype definitions for data
+ * 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";
+declare type Props = {|
+  value: string | number | null,
+  onChange: (arg1?: any) => void,
+  className?: string,
+  labelText?: string,
+  onFocus?: () => void,
+  onBlur?: () => void,
+  disabled?: boolean,
+  id?: string,
+  placeholder?: string,
+  onKeyDown?: () => void,
+  style?: StyleType,
+|};
+declare type DefaultProps = {|
+  value: $PropertyType<Props, "value">,
+  disabled: $PropertyType<Props, "disabled">,
+|};
+declare class TextInput extends React.Component<Props> {
+  static defaultProps: DefaultProps;
+  id: string;
+  constructor(props: Props): this;
+  render(): React.Node;
+  focus: () => void;
+  blur: () => void;
+  getValue: () => string | null | void;
+  getStringValue: () => string | null | void;
+  setSelectionRange: (arg1: number, arg2: number) => void;
+  getSelectionStart: () => number;
+  getSelectionEnd: () => number;
+}
+declare export default typeof TextInput;

package/dist/components/text-list-editor.d.ts

@@ -0,0 +1,16 @@
+import PropTypes from "prop-types";
+import * as React from "react";
+declare class TextListEditor extends React.Component<any, any> {
+    static propTypes: {
+        options: PropTypes.Requireable<any[]>;
+        layout: PropTypes.Requireable<string>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+    };
+    static defaultProps: any;
+    state: any;
+    UNSAFE_componentWillReceiveProps(nextProps: any): void;
+    render(): React.ReactNode;
+    onChange: (arg1: number, arg2: React.ChangeEvent<HTMLInputElement>) => void;
+    onKeyDown: (arg1: number, arg2: React.KeyboardEvent) => void;
+}
+export default TextListEditor;

package/dist/components/text-list-editor.js.flow

@@ -0,0 +1,22 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import PropTypes from "prop-types";
+import * as React from "react";
+declare class TextListEditor extends React.Component<any, any> {
+  static propTypes: {|
+    options: PropTypes.Requireable<any[]>,
+    layout: PropTypes.Requireable<string>,
+    onChange: PropTypes.Validator<(...args: any[]) => any>,
+  |};
+  static defaultProps: any;
+  state: any;
+  UNSAFE_componentWillReceiveProps(nextProps: any): void;
+  render(): React.Node;
+  onChange: (arg1: number, arg2: SyntheticInputEvent<HTMLInputElement>) => void;
+  onKeyDown: (arg1: number, arg2: SyntheticKeyboardEvent<>) => void;
+}
+declare export default typeof TextListEditor;

package/dist/components/tooltip.d.ts

@@ -0,0 +1,32 @@
+/**
+ * A generic tooltip library for React.js
+ *
+ * This should eventually end up in react-components
+ *
+ * Interface: ({a, b} means one of a or b)
+ * import Tooltip from "./tooltip";
+ * <Tooltip
+ *     className="class-for-tooltip-contents"
+ *     horizontalPosition="left" // one of "left", "right"
+ *     horizontalAlign="left" // one of "left", "right"
+ *     verticalPosition="bottom" // one of "top", "bottom"
+ *     arrowSize={10} // arrow size in pixels
+ *     borderColor="#ccc" // color of the border for the tooltip
+ *     show={true} // whether the tooltip should currently be visible
+ *     targetContainerStyle={targetContainerStyle}
+ * >
+ *     <TargetElementOfTheTooltip />
+ *     <TooltipContents1 />
+ *     <TooltipContents2 />
+ * </Tooltip>
+ *
+ * To show/hide the tooltip, the parent component should call the
+ * .show() and .hide() methods of the tooltip when appropriate.
+ * (These are usually set up as handlers of events on the target element.)
+ *
+ * Notes:
+ *     className should not specify a border; that is handled by borderColor
+ *     so that the arrow and tooltip match
+ */
+declare const Tooltip: any;
+export default Tooltip;

package/dist/components/tooltip.js.flow

@@ -0,0 +1,38 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+/**
+ * A generic tooltip library for React.js
+ *
+ * This should eventually end up in react-components
+ *
+ * Interface: ({a, b} means one of a or b)
+ * import Tooltip from "./tooltip";
+ * <Tooltip
+ *     className="class-for-tooltip-contents"
+ *     horizontalPosition="left" // one of "left", "right"
+ *     horizontalAlign="left" // one of "left", "right"
+ *     verticalPosition="bottom" // one of "top", "bottom"
+ *     arrowSize={10} // arrow size in pixels
+ *     borderColor="#ccc" // color of the border for the tooltip
+ *     show={true} // whether the tooltip should currently be visible
+ *     targetContainerStyle={targetContainerStyle}
+ * >
+ *     <TargetElementOfTheTooltip />
+ *     <TooltipContents1 />
+ *     <TooltipContents2 />
+ * </Tooltip>
+ *
+ * To show/hide the tooltip, the parent component should call the
+ * .show() and .hide() methods of the tooltip when appropriate.
+ * (These are usually set up as handlers of events on the target element.)
+ *
+ * Notes:
+ *     className should not specify a border; that is handled by borderColor
+ *     so that the arrow and tooltip match
+ */
+declare var Tooltip: any;
+declare export default typeof Tooltip;

package/dist/components/visibility-observer/create-visibility-observer.d.ts

@@ -0,0 +1,34 @@
+/**
+ * VisibilityObserver watches a target element for changes to visibility,
+ * relative to a given root node.
+ *
+ * When the target element entirely disappears, or partially reappears, the
+ * caller is notified via the `onVisibilityChange` callback.
+ *
+ * Potential visibility changes include:
+ *   - Being scrolled out of view, by any scroll container between the target
+ *         and the root.
+ *   - Style changes to the target element or an ancestor, like `display: none`.
+ *
+ * The VisibilityObserver relies on the IntersectionObserver, which does not
+ * exist on Safari and is buggy on Edge.  Instead, we will polyfill the
+ * IntersectionObserver on those platforms.
+ *
+ * TODO(mdr): Currently, we emulate the API of IntersectionObserver. It might
+ *     be nicer to instead use a more React-y API: let `targetElement` be a
+ *     required prop, and render the element only when it's present. Then, we
+ *     can use React lifecycle methods to set-up/tear-down handlers. Not sure
+ *     that's _actually_ a net win, though, in complexity or performance - but
+ *     worth thinking about if this API is causing too much entanglement!
+ */
+import "intersection-observer";
+export interface VisibilityObserver {
+    setTargetElement(targetElement: HTMLElement): void;
+    disconnect(): void;
+}
+type VisibilityChangeCallback = (isVisible: boolean, rootBounds: DOMRectReadOnly) => void;
+/**
+ * Create a new VisibilityObserver.
+ */
+export declare function createVisibilityObserver(rootElement: HTMLElement | null | undefined, onVisibilityChange: VisibilityChangeCallback, rootMargin?: string): VisibilityObserver;
+export {};

package/dist/components/visibility-observer/create-visibility-observer.js.flow

@@ -0,0 +1,23 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import "intersection-observer";
+export interface VisibilityObserver {
+  setTargetElement(targetElement: HTMLElement): void;
+  disconnect(): void;
+}
+declare type VisibilityChangeCallback = (
+  isVisible: boolean,
+  rootBounds: DOMRectReadOnly
+) => void;
+/**
+ * Create a new VisibilityObserver.
+ */
+declare export function createVisibilityObserver(
+  rootElement: HTMLElement | null | void,
+  onVisibilityChange: VisibilityChangeCallback,
+  rootMargin?: string
+): VisibilityObserver;

package/dist/components/visibility-observer/get-scroll-parent.d.ts

@@ -0,0 +1 @@
+export declare const getScrollParent: (node: Element) => Element | null | undefined;

package/dist/components/visibility-observer/get-scroll-parent.js.flow

@@ -0,0 +1,7 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+declare export var getScrollParent: (node: Element) => Element | null | void;

package/dist/components/visibility-observer/visibility-observer.d.ts

@@ -0,0 +1,31 @@
+/**
+ * This is a wrapper component for the visibility-observer.js utility which
+ * abstracts the native or polyfilled IntersectionObserver utility.  The
+ * primary purpose of this comonent is to tell you whether the children of
+ * the component are visibile within a scrollable ancestor.  It will notify
+ * you via an onChange event when the visibility changes, and whether the
+ * children are below or above the scroll.
+ */
+import * as React from "react";
+import type { VisibilityObserver as IVisibilityObserver } from "./create-visibility-observer";
+export type ScrollVisibility = "hidden-above" | "hidden-below" | "visible" | "unknown";
+type Props = {
+    children: React.ReactNode;
+    rootMargin?: string;
+    scrollParentIsNotBody?: boolean;
+    onChange: (visibility: ScrollVisibility) => void;
+};
+declare class VisibilityObserver extends React.Component<Props> {
+    _observer: IVisibilityObserver;
+    _node: HTMLElement;
+    static defaultProps: {
+        onChange: () => void;
+    };
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    handleVisibilityChange: (isVisible: boolean, rootBounds: DOMRectReadOnly) => void;
+    registerVisibilityObserver(): void;
+    unregisterVisibilityObserver(): void;
+    render(): React.ReactNode;
+}
+export default VisibilityObserver;

package/dist/components/visibility-observer/visibility-observer.js.flow

@@ -0,0 +1,36 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import * as React from "react";
+import type { VisibilityObserver as IVisibilityObserver } from "./create-visibility-observer";
+export type ScrollVisibility =
+  | "hidden-above"
+  | "hidden-below"
+  | "visible"
+  | "unknown";
+declare type Props = {|
+  children: React.Node,
+  rootMargin?: string,
+  scrollParentIsNotBody?: boolean,
+  onChange: (visibility: ScrollVisibility) => void,
+|};
+declare class VisibilityObserver extends React.Component<Props> {
+  _observer: IVisibilityObserver;
+  _node: HTMLElement;
+  static defaultProps: {|
+    onChange: () => void,
+  |};
+  componentDidMount(): void;
+  componentWillUnmount(): void;
+  handleVisibilityChange: (
+    isVisible: boolean,
+    rootBounds: DOMRectReadOnly
+  ) => void;
+  registerVisibilityObserver(): void;
+  unregisterVisibilityObserver(): void;
+  render(): React.Node;
+}
+declare export default typeof VisibilityObserver;

package/dist/components/zoomable-tex.d.ts

@@ -0,0 +1,18 @@
+/**
+ * ZoomableTeX is a wrapper around TeX to be used on mobile.  Without wrapping
+ * TeX we run into issues of measuring at the incorrect time resulting in bad
+ * measurements.
+ */
+import * as React from "react";
+type Props = {
+    children: string;
+};
+type State = {
+    isRendered: boolean;
+};
+export default class ZoomableTeX extends React.Component<Props, State> {
+    constructor();
+    handleRender: () => void;
+    render(): React.ReactNode;
+}
+export {};

package/dist/components/zoomable-tex.js.flow

@@ -0,0 +1,18 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import * as React from "react";
+declare type Props = {|
+  children: string,
+|};
+declare type State = {|
+  isRendered: boolean,
+|};
+declare export default class ZoomableTeX extends React.Component<Props, State> {
+  constructor(): this;
+  handleRender: () => void;
+  render(): React.Node;
+}

package/dist/components/zoomable.d.ts

@@ -0,0 +1,64 @@
+/**
+ * Zooms child to fit with tap-to-zoom behavior.
+ */
+import * as React from "react";
+type Bounds = {
+    width: number;
+    height: number;
+};
+type Props = {
+    children: React.ReactNode;
+    animateHeight: boolean;
+    /**
+     * Optional function that allows customizations in zooming.
+     *
+     * Defaults to just using the bounding client rect of the first DOM
+     * element of this component.
+     */
+    computeChildBounds: (parentNode: HTMLElement, parentBounds: Bounds) => Bounds;
+    /**
+     * Optional boolean specifying whether the component is ready to measure
+     * or not.  Defaults to true for synchronous components like tables.
+     */
+    readyToMeasure: boolean;
+};
+type DefaultProps = {
+    animateHeight: Props["animateHeight"];
+    computeChildBounds: Props["computeChildBounds"];
+    readyToMeasure: Props["readyToMeasure"];
+};
+type State = {
+    visible: boolean;
+    marginBottomPx: number;
+    compactHeight?: number | null | undefined;
+    expandedHeight?: number | null | undefined;
+    scale?: number | null | undefined;
+    zoomed: boolean;
+};
+declare class Zoomable extends React.Component<Props, State> {
+    _isMounted: boolean;
+    _observer: MutationObserver;
+    _measuringInitialized: boolean;
+    _originalWidth: number | null | undefined;
+    _node: HTMLElement;
+    static defaultProps: DefaultProps;
+    state: State;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    componentWillUnmount(): void;
+    reset: () => void;
+    /**
+     * Calls measureAndScaleChildToFit and sets up a MutationObserver
+     * to call measureAndScaleChildToFit if Zoomable's children change.
+     *
+     * If the readyToMeasure prop isn't true or if measuring has already
+     * been initialized this method does nothing.
+     */
+    maybeInitializeMeasuring(): void;
+    stopPropagationIfZoomed: (e: React.TouchEvent) => void;
+    measureAndScaleChildToFit(zoomed: boolean): void;
+    handleClickIfZoomed: (e: React.MouseEvent) => void;
+    handleClick: () => void;
+    render(): React.ReactNode;
+}
+export default Zoomable;

package/dist/components/zoomable.js.flow

@@ -0,0 +1,70 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import * as React from "react";
+declare type Bounds = {|
+  width: number,
+  height: number,
+|};
+declare type Props = {|
+  children: React.Node,
+  animateHeight: boolean,
+
+  /**
+   * Optional function that allows customizations in zooming.
+   *
+   * Defaults to just using the bounding client rect of the first DOM
+   * element of this component.
+   */
+  computeChildBounds: (parentNode: HTMLElement, parentBounds: Bounds) => Bounds,
+
+  /**
+   * Optional boolean specifying whether the component is ready to measure
+   * or not.  Defaults to true for synchronous components like tables.
+   */
+  readyToMeasure: boolean,
+|};
+declare type DefaultProps = {|
+  animateHeight: $PropertyType<Props, "animateHeight">,
+  computeChildBounds: $PropertyType<Props, "computeChildBounds">,
+  readyToMeasure: $PropertyType<Props, "readyToMeasure">,
+|};
+declare type State = {|
+  visible: boolean,
+  marginBottomPx: number,
+  compactHeight?: number | null | void,
+  expandedHeight?: number | null | void,
+  scale?: number | null | void,
+  zoomed: boolean,
+|};
+declare class Zoomable extends React.Component<Props, State> {
+  _isMounted: boolean;
+  _observer: MutationObserver;
+  _measuringInitialized: boolean;
+  _originalWidth: number | null | void;
+  _node: HTMLElement;
+  static defaultProps: DefaultProps;
+  state: State;
+  componentDidMount(): void;
+  componentDidUpdate(): void;
+  componentWillUnmount(): void;
+  reset: () => void;
+
+  /**
+   * Calls measureAndScaleChildToFit and sets up a MutationObserver
+   * to call measureAndScaleChildToFit if Zoomable's children change.
+   *
+   * If the readyToMeasure prop isn't true or if measuring has already
+   * been initialized this method does nothing.
+   */
+  maybeInitializeMeasuring(): void;
+  stopPropagationIfZoomed: (e: SyntheticTouchEvent<>) => void;
+  measureAndScaleChildToFit(zoomed: boolean): void;
+  handleClickIfZoomed: (e: SyntheticMouseEvent<>) => void;
+  handleClick: () => void;
+  render(): React.Node;
+}
+declare export default typeof Zoomable;

package/dist/components.d.ts

@@ -0,0 +1,16 @@
+export { default as ButtonGroup } from "./components/button-group";
+export { default as Graph } from "./components/graph";
+export { default as Graphie } from "./components/graphie";
+export { default as HUD } from "./components/hud";
+export { default as Icon } from "./components/icon";
+export { default as InfoTip } from "./components/info-tip";
+export { default as InlineIcon } from "./components/inline-icon";
+export { default as MathInput } from "./components/math-input";
+export { default as MultiButtonGroup } from "./components/multi-button-group";
+export { default as NumberInput } from "./components/number-input";
+export { default as PropCheckBox } from "./components/prop-check-box";
+export { default as RangeInput } from "./components/range-input";
+export { default as SvgImage } from "./components/svg-image";
+export { default as TextInput } from "./components/text-input";
+export { default as TexButtons } from "./components/tex-buttons";
+export { default as TextListEditor } from "./components/text-list-editor";

package/dist/components.js.flow

@@ -0,0 +1,22 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+declare export { default as ButtonGroup } from "./components/button-group";
+declare export { default as Graph } from "./components/graph";
+declare export { default as Graphie } from "./components/graphie";
+declare export { default as HUD } from "./components/hud";
+declare export { default as Icon } from "./components/icon";
+declare export { default as InfoTip } from "./components/info-tip";
+declare export { default as InlineIcon } from "./components/inline-icon";
+declare export { default as MathInput } from "./components/math-input";
+declare export { default as MultiButtonGroup } from "./components/multi-button-group";
+declare export { default as NumberInput } from "./components/number-input";
+declare export { default as PropCheckBox } from "./components/prop-check-box";
+declare export { default as RangeInput } from "./components/range-input";
+declare export { default as SvgImage } from "./components/svg-image";
+declare export { default as TextInput } from "./components/text-input";
+declare export { default as TexButtons } from "./components/tex-buttons";
+declare export { default as TextListEditor } from "./components/text-list-editor";

package/dist/definition-context.d.ts

@@ -0,0 +1,21 @@
+/**
+ * A React context for ensuring there is one and only one definition showing at a time
+ */
+import * as React from "react";
+type DefintionContext = {
+    activeDefinitionId: string | null | undefined;
+    setActiveDefinitionId: (arg1?: string | null | undefined) => void;
+};
+type ProviderState = {
+    activeDefinitionId: string | null | undefined;
+};
+export type ProviderProps = {
+    children: any;
+};
+export declare class DefinitionProvider extends React.Component<ProviderProps, ProviderState> {
+    state: ProviderState;
+    setActiveDefinitionId: (activeDefinitionId?: string | null) => void;
+    render(): React.ReactNode;
+}
+export declare const DefinitionConsumer: React.Consumer<DefintionContext>;
+export {};

package/dist/definition-context.js.flow

@@ -0,0 +1,25 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import * as React from "react";
+declare type DefintionContext = {|
+  activeDefinitionId: string | null | void,
+  setActiveDefinitionId: (arg1?: string | null | void) => void,
+|};
+declare type ProviderState = {|
+  activeDefinitionId: string | null | void,
+|};
+export type ProviderProps = {|
+  children: any,
+|};
+declare export class DefinitionProvider
+  extends React.Component<ProviderProps, ProviderState>
+{
+  state: ProviderState;
+  setActiveDefinitionId: (activeDefinitionId?: string | null) => void;
+  render(): React.Node;
+}
+declare export var DefinitionConsumer: React.Consumer<DefintionContext>;

package/dist/dependencies.d.ts

@@ -0,0 +1,3 @@
+import type { PerseusDependencies } from "./types";
+export declare const setDependencies: (dependencies: PerseusDependencies) => void;
+export declare const getDependencies: () => PerseusDependencies;

package/dist/dependencies.js.flow

@@ -0,0 +1,9 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import type { PerseusDependencies } from "./types";
+declare export var setDependencies: (dependencies: PerseusDependencies) => void;
+declare export var getDependencies: () => PerseusDependencies;

package/dist/error-boundary.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+type ErrorBoundaryProps = {
+    children: React.ReactNode;
+};
+type ErrorBoundaryState = {
+    error: string;
+};
+declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    componentDidCatch(error: Error, info: any): void;
+    render(): React.ReactNode;
+}
+export default ErrorBoundary;

package/dist/error-boundary.js.flow

@@ -0,0 +1,21 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import * as React from "react";
+declare type ErrorBoundaryProps = {|
+  children: React.Node,
+|};
+declare type ErrorBoundaryState = {|
+  error: string,
+|};
+declare class ErrorBoundary
+  extends React.Component<ErrorBoundaryProps, ErrorBoundaryState>
+{
+  constructor(props: ErrorBoundaryProps): this;
+  componentDidCatch(error: Error, info: any): void;
+  render(): React.Node;
+}
+declare export default typeof ErrorBoundary;