@khanacademy/perseus-editor 4.1.5 → 4.1.6

package/src/components/checkbox.tsx

@@ -1,194 +0,0 @@
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
-/**
- * Reusable checkbox component.
- **/
-import {globalStyles} from "@khanacademy/perseus";
-import {css, StyleSheet} from "aphrodite";
-import * as React from "react";
-
-import HoverBehavior from "./hover-behavior";
-
-const {borderRadius, colors} = globalStyles;
-
-export type CheckboxProps = {
-    // Whether or not the checkbox is checked.  The parent responsible for
-    // responding to onChange events and updating this prop appropriately.
-    checked: boolean;
-    // When disable the checkbox will appear faded out and will not
-    // respond to events and cannot be tabbed to.
-    disabled?: boolean;
-    // Appear as if disabled but allow it to respond to events and be
-    // tabbed to.
-    // This allows us to hook alternate responses into clicking on a
-    // disabled checkbox.
-    appearDisabled?: boolean;
-    // Called when the value has changed.
-    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    tabIndex?: number | string;
-    style?: {
-        marginTop: number;
-    };
-    // For e2e test
-    dataTestId?: string;
-    // Unique identifier for this checkbox.
-    id?: string;
-};
-
-// NOTE(jangmi): Checkbox may have `onChange` depends on circumstances but lack
-// of onChange causes Dev only alert so we provide the no op func as default
-// to prevent that.
-const onChangeCheckboxNoop = (event: React.ChangeEvent<HTMLInputElement>) => {};
-
-export default class Checkbox extends React.Component<CheckboxProps> {
-    static defaultProps: {
-        checked: boolean;
-        onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    } = {
-        checked: false,
-        onChange: onChangeCheckboxNoop,
-    };
-
-    render(): React.ReactNode {
-        const {
-            checked,
-            disabled,
-            appearDisabled,
-            onChange,
-            tabIndex,
-            style,
-            dataTestId,
-            id,
-        } = this.props;
-
-        const checkedColor = colors.gray41;
-
-        return (
-            <HoverBehavior>
-                {({focused}, handlers) => (
-                    <div
-                        {...handlers}
-                        className={css(
-                            styles.container,
-                            focused && styles.focused,
-                        )}
-                        style={style}
-                        data-test-id={dataTestId}
-                        data-checked={checked}
-                    >
-                        <svg
-                            className={css(
-                                styles.svg,
-                                (disabled || appearDisabled) && styles.disabled,
-                            )}
-                            width={sizeWithPadding}
-                            height={sizeWithPadding}
-                            /* pad the viewbox to avoid bad clipping when zooming */
-                            viewBox={`-${padding} -${padding}
-                         ${sizeWithPadding} ${sizeWithPadding}`}
-                        >
-                            <g fill="none" fillRule="evenodd">
-                                {checked && (
-                                    <g>
-                                        <rect
-                                            fill={checkedColor}
-                                            width={size}
-                                            height={size}
-                                            x="0"
-                                            y="0"
-                                            rx={borderRadius}
-                                        />
-                                        <path
-                                            fill={colors.white}
-                                            stroke={colors.white}
-                                            d="M4.98 7.41a0.58.58 0 1 0-0.81.81L6.47
-                                 10.53c0.23.23.59.23.81
-                                 0l4.55-4.55a0.58.58 0 0
-                                 0-0.81-0.81L6.88 9.31 4.98 7.41z"
-                                        />
-                                    </g>
-                                )}
-                                {!checked && (
-                                    <rect
-                                        fill={colors.white}
-                                        stroke={colors.gray68}
-                                        width={size - 2 * padding}
-                                        height={size - 2 * padding}
-                                        x={padding}
-                                        y={padding}
-                                        rx="4"
-                                        strokeWidth={borderWidth}
-                                    />
-                                )}
-                            </g>
-                        </svg>
-                        <input
-                            type="checkbox"
-                            id={id}
-                            checked={checked}
-                            className={css(
-                                styles.checkbox,
-                                disabled && styles.defaultCursor,
-                            )}
-                            disabled={disabled}
-                            onChange={onChange}
-                            // @ts-expect-error - TS2322 - Type 'string | number | undefined' is not assignable to type 'number | undefined'.
-                            tabIndex={tabIndex}
-                        />
-                    </div>
-                )}
-            </HoverBehavior>
-        );
-    }
-}
-
-const size = 16;
-const padding = 0.5;
-const borderWidth = 1;
-const sizeWithPadding = size + 2 * padding;
-
-const styles = StyleSheet.create({
-    container: {
-        position: "relative",
-        display: "inline-block",
-        verticalAlign: "middle",
-        lineHeight: 0,
-        borderRadius: borderRadius,
-        width: sizeWithPadding,
-        height: sizeWithPadding,
-        flexShrink: 0,
-    },
-    focused: {
-        "::before": {
-            content: '""',
-            position: "absolute",
-            top: -2,
-            right: -2,
-            bottom: -2,
-            left: -2,
-            borderRadius: borderRadius + 2,
-            backgroundColor: "lightblue", // TODO(kevinb) get real focus ring
-        },
-    },
-    svg: {
-        position: "absolute",
-        left: 0,
-        top: 0,
-    },
-    checkbox: {
-        appearance: "none",
-        opacity: 0,
-        position: "absolute",
-        top: padding,
-        width: size,
-        height: size,
-        margin: 0,
-        outline: "none",
-        cursor: "pointer",
-    },
-    disabled: {
-        opacity: 0.5,
-    },
-    defaultCursor: {
-        cursor: "default",
-    },
-});

package/src/components/device-framer.tsx

@@ -1,90 +0,0 @@
-/**
- * A component that displays its contents inside a device frame.
- */
-
-import {constants} from "@khanacademy/perseus";
-import PropTypes from "prop-types";
-import * as React from "react";
-
-const SCREEN_SIZES = {
-    phone: {
-        width: 320,
-        height: 480,
-        framedWidth: 320,
-    },
-    tablet: {
-        width: 750,
-        height: 920,
-        framedWidth: 525,
-    },
-    desktop: {
-        width: 688,
-        height: 600,
-        framedWidth: 688,
-    },
-} as const;
-
-type Props = any;
-
-class DeviceFramer extends React.Component<Props> {
-    static propTypes = {
-        children: PropTypes.element.isRequired,
-        deviceType: PropTypes.oneOf([
-            constants.devices.PHONE,
-            constants.devices.TABLET,
-            constants.devices.DESKTOP,
-        ]).isRequired,
-        // TODO(kevinb) rename to variableHeight
-        nochrome: PropTypes.bool,
-    };
-
-    render(): React.ReactNode {
-        const deviceType = this.props.deviceType;
-
-        if (this.props.nochrome) {
-            // Render content inside a variable height iframe.  Used on the
-            // "edit" table of the content editor. In this mode, PerseusFrame
-            // will draw the border and reserve space on the right for
-            // lint indicators.
-            return (
-                <div>
-                    <div
-                        key="screen"
-                        style={{
-                            width:
-                                SCREEN_SIZES[deviceType].framedWidth +
-                                2 * constants.perseusFrameBorderWidth +
-                                constants.lintGutterWidth,
-                        }}
-                    >
-                        <div>{this.props.children}</div>
-                    </div>
-                </div>
-            );
-        }
-        const scale =
-            SCREEN_SIZES[deviceType].framedWidth /
-            SCREEN_SIZES[deviceType].width;
-
-        // In this mode we draw our own border and don't reserve
-        // space for a lint gutter.
-        const screenStyle = {
-            backgroundColor: "white",
-            color: "black",
-            textAlign: "left",
-            width: SCREEN_SIZES[deviceType].width,
-            height: SCREEN_SIZES[deviceType].height,
-            border: "solid 1px #CCC",
-            margin: 8,
-            zoom: scale,
-        } as const;
-
-        return (
-            <div key="screen" className="screen" style={screenStyle}>
-                {this.props.children}
-            </div>
-        );
-    }
-}
-
-export default DeviceFramer;

package/src/components/drag-target.tsx

@@ -1,87 +0,0 @@
-/* This component makes its children a drag target. Example:
- *
- *     <DragTarget onDrop={this.handleDrop}>Drag to me</DragTarget>
- *
- *     ...
- *
- *     handleDrop: function(e) {
- *         this.addImages(e.nativeEvent.dataTransfer.files);
- *     }
- *
- * Now "Drag to me" will be a drag target - when something is dragged over it,
- * the element will become partially transparent as a visual indicator that
- * it's a target.
- */
-// TODO(joel) - indicate before the hover is over the target that it's possible
-// to drag into the target. This would (I think) require a high level handler -
-// like on Perseus itself, waiting for onDragEnter, then passing down the
-// event. Sounds like a pain. Possible workaround - create a div covering the
-// entire page...
-//
-// Other extensions:
-// * custom styles for global drag and dragOver
-// * only respond to certain types of drags (only images for instance)!
-
-import createReactClass from "create-react-class";
-import PropTypes from "prop-types";
-import * as React from "react";
-
-const DragTarget = createReactClass({
-    propTypes: {
-        // All props not listed here are forwarded to the root element without
-        // modification.
-        onDrop: PropTypes.func.isRequired,
-        component: PropTypes.any, // component type
-        shouldDragHighlight: PropTypes.func,
-        style: PropTypes.any,
-    },
-    getDefaultProps: function () {
-        return {
-            component: "div",
-            shouldDragHighlight: () => true,
-        };
-    },
-    getInitialState: function () {
-        return {dragHover: false};
-    },
-    handleDrop: function (e) {
-        e.stopPropagation();
-        e.preventDefault();
-        this.setState({dragHover: false});
-        this.props.onDrop(e);
-    },
-    handleDragEnd: function () {
-        this.setState({dragHover: false});
-    },
-    handleDragOver: function (e) {
-        e.preventDefault();
-    },
-    handleDragLeave: function () {
-        this.setState({dragHover: false});
-    },
-    handleDragEnter: function (e) {
-        this.setState({dragHover: this.props.shouldDragHighlight(e)});
-    },
-    render: function () {
-        const opacity = this.state.dragHover ? {opacity: 0.3} : {};
-        const Component = this.props.component;
-
-        const forwardProps = Object.assign({}, this.props);
-        delete forwardProps.component;
-        delete forwardProps.shouldDragHighlight;
-
-        return (
-            <Component
-                {...forwardProps}
-                style={Object.assign({}, this.props.style, opacity)}
-                onDrop={this.handleDrop}
-                onDragEnd={this.handleDragEnd}
-                onDragOver={this.handleDragOver}
-                onDragEnter={this.handleDragEnter}
-                onDragLeave={this.handleDragLeave}
-            />
-        );
-    },
-});
-
-export default DragTarget;

package/src/components/dropdown-option.tsx

@@ -1,311 +0,0 @@
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
-/**
- * The Option is an item to be used in the Select components and the
- * derivations such as MultiSelect, CheckList, and CheckBoxList. Also includes
- * OptionGroup which is an internal component used in the dropdowns to house
- * a list of options.
- **/
-import {components, globalStyles} from "@khanacademy/perseus";
-import {css, StyleSheet} from "aphrodite";
-import * as React from "react";
-import ReactDOM from "react-dom";
-
-import {focusWithChromeStickyFocusBugWorkaround} from "./util";
-
-export type OptionRenderer = (
-    children: React.ReactElement<any> | null | undefined,
-    value: string,
-    selected: boolean,
-    disabled?: boolean,
-) => React.ReactElement<any>;
-
-const {Icon} = components;
-const {colors} = globalStyles;
-
-const findAndFocusElement = (component?: Element | null) => {
-    const DOMNode: Element | Text | null | undefined =
-        ReactDOM.findDOMNode(component);
-    const button = DOMNode as HTMLInputElement;
-    // @ts-expect-error - TS2774 - This condition will always return true since this function is always defined. Did you mean to call it instead?
-    if (button.focus) {
-        focusWithChromeStickyFocusBugWorkaround(button);
-    }
-};
-
-type Props = {
-    // The value to use when the option is selected
-    value: string;
-    // The display of the option
-    children?: React.ReactNode;
-    // Is the current option selected?
-    selected?: boolean;
-    // Is the current option disabled?
-    disabled?: boolean;
-    // An event when an option is clicked
-    onClick?: () => void;
-    // An optional rendering function to render the details of the option
-    optionRenderer?: OptionRenderer;
-    // An optional function to call when the dropdown should close
-    // Only relevant if the Option is inside of a dropdown menu
-    onDropdownClose?: () => void;
-    // An optional value to override the focus styling of an option.
-    // Use caution when using this - keyboard users need to know what they're
-    // focused on in order to interact with the product!
-    hideFocusState?: boolean;
-    // An optional test id that can be used to identify this Option in automated tests.
-    testId?: string;
-    // Text to provide for assistive tech users
-    ariaLabel?: string;
-};
-
-const check = `M10,3.8C10,4,9.9,4.2,9.8,4.3L5.1,8.9L4.3,9.8C4.2,9.9,4,10,3.8,10
- S3.5,9.9,3.4,9.8L2.5,8.9L0.2,6.6C0.1,6.5,0,6.3,0,6.2s0.1-0.3,0.2-0.4
- l0.9-0.9c0.1-0.1,0.3-0.2,0.4-0.2s0.3,0.1,0.4,0.2l1.9,1.9l4.2-4.2c0.1
- -0.1,0.3-0.2,0.4-0.2c0.2,0,0.3,0.1,0.4,0.2l0.9,0.9C9.9,3.5,10,3.7,
- 10,3.8z`;
-
-export const optionHeight = 30;
-
-class Option extends React.Component<Props> {
-    // @ts-expect-error - TS2564 - Property 'node' has no initializer and is not definitely assigned in the constructor.
-    node: HTMLDivElement;
-
-    handleKeyDown(event: any): void {
-        const {onDropdownClose} = this.props;
-        const pressedKey = event.key;
-        const focusedElement = event.target;
-
-        if (pressedKey === "ArrowDown" && focusedElement.nextSibling) {
-            event.preventDefault();
-            focusedElement.nextSibling.focus();
-        }
-        if (pressedKey === "ArrowUp" && focusedElement.previousSibling) {
-            event.preventDefault();
-            focusedElement.previousSibling.focus();
-        }
-        if (
-            pressedKey === "ArrowUp" &&
-            !focusedElement.previousSibling &&
-            onDropdownClose
-        ) {
-            event.preventDefault();
-            onDropdownClose();
-        }
-        if (
-            (pressedKey === "Escape" || pressedKey === "Tab") &&
-            onDropdownClose
-        ) {
-            onDropdownClose();
-        }
-    }
-
-    render(): React.ReactNode {
-        const {
-            selected,
-            value,
-            onClick,
-            children,
-            optionRenderer,
-            disabled,
-            hideFocusState,
-            testId,
-            ariaLabel,
-        } = this.props;
-
-        return (
-            <button
-                // @ts-expect-error - TS2322 - Type 'HTMLButtonElement | null' is not assignable to type 'HTMLDivElement'.
-                ref={(node) => (this.node = node)}
-                value={value}
-                role="menuitemradio"
-                aria-checked={selected}
-                className={css(
-                    styles.notAButton,
-                    disabled && styles.cursorDefault,
-                    hideFocusState && styles.noFocus,
-                )}
-                // @ts-expect-error - TS2322 - Type '(value: string) => void' is not assignable to type 'MouseEventHandler<HTMLButtonElement>'.
-                onClick={(value: string) => {
-                    if (!disabled && onClick) {
-                        // @ts-expect-error - TS2554 - Expected 0 arguments, but got 1.
-                        onClick(value);
-                    }
-                }}
-                // @ts-expect-error - TS2322 - Type '(event: KeyboardEvent) => void' is not assignable to type 'KeyboardEventHandler<HTMLButtonElement>'.
-                onKeyDown={(event: KeyboardEvent) => this.handleKeyDown(event)}
-                aria-disabled={disabled}
-                aria-label={ariaLabel}
-                data-test-id={testId}
-            >
-                {optionRenderer &&
-                    optionRenderer(
-                        /**
-                         * This expects a `React.Element<>` but `children` is a
-                         * `React.Node`. We can convert a `React.Node` to a
-                         * `React.Element<>` by wrapping it in a fragment.
-                         */
-                        <>{children}</>,
-                        value || "",
-                        selected || false,
-                        disabled,
-                    )}
-
-                {!optionRenderer && (
-                    <span
-                        className={css(
-                            styles.option,
-                            selected && styles.optionSelected,
-                            disabled && styles.optionDisabled,
-                        )}
-                    >
-                        {children}
-                        {selected && (
-                            <span className={css(styles.check)}>
-                                <Icon icon={check} />
-                            </span>
-                        )}
-                    </span>
-                )}
-            </button>
-        );
-    }
-}
-
-// TODO(kevinb):
-// - keep the the option group within the page bounds
-// - do we really want to dismiss this on scroll
-// - how does the drop down interact with tooltips?  what's the z-index order?
-class OptionGroup extends React.Component<{
-    // An event when an option is selected
-    onSelected: (value: string) => void;
-    // The list of options to display
-    children?: Array<React.ReactElement<React.ComponentProps<typeof Option>>>;
-    // The currently selected options
-    selectedValues: Array<string>;
-    // An optional rendering function to render the details of the options
-    optionRenderer?: OptionRenderer;
-    // An override to skip the bit of top/bottom spacing around the group
-    noMargin?: boolean;
-    // An optional function to call when the dropdown should close
-    onDropdownClose?: () => void;
-    // An optional value to override the focus styling of an option.
-    // Use caution when using this - keyboard users need to know what
-    // they're focused on in order to interact with the product!
-    hideFocusState?: boolean;
-}> {
-    // @ts-expect-error - TS2564 - Property 'focusedElement' has no initializer and is not definitely assigned in the constructor.
-    focusedElement: Element;
-
-    componentDidMount() {
-        if (this.focusedElement) {
-            findAndFocusElement(this.focusedElement);
-        }
-    }
-
-    render(): React.ReactNode {
-        const {
-            children,
-            onSelected,
-            selectedValues,
-            optionRenderer,
-            noMargin,
-            onDropdownClose,
-            hideFocusState,
-        } = this.props;
-
-        return (
-            <div
-                // @ts-expect-error - TS2322 - Type 'Window | null' is not assignable to type 'Top<string | number> | undefined'.
-                style={{top}}
-                className={css(
-                    styles.optionGroup,
-                    noMargin && styles.optionGroupNoMargin,
-                )}
-            >
-                {React.Children.map(children, (child, index) => {
-                    // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
-                    const selected = selectedValues.includes(child.props.value);
-
-                    const reference =
-                        selected || index === 0
-                            ? (node: Element) => (this.focusedElement = node)
-                            : null;
-
-                    // @ts-expect-error - TS2769 - No overload matches this call.
-                    return React.cloneElement(child, {
-                        // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
-                        ...child.props,
-                        key: index,
-                        selected: selected,
-                        // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
-                        onClick: () => onSelected(child.props.value),
-                        optionRenderer: optionRenderer,
-                        ref: reference,
-                        onDropdownClose: onDropdownClose,
-                        hideFocusState: hideFocusState,
-                    });
-                })}
-            </div>
-        );
-    }
-}
-
-const styles = StyleSheet.create({
-    optionGroup: {
-        margin: "4px 0",
-    },
-    optionGroupNoMargin: {
-        margin: 0,
-    },
-    option: {
-        display: "flex",
-        flexDirection: "row",
-        alignItems: "center",
-        paddingLeft: 32,
-        paddingRight: 32,
-        height: optionHeight,
-        whiteSpace: "nowrap",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        color: colors.gray17,
-        userSelect: "none",
-
-        ":hover": {
-            backgroundColor: colors.gray95,
-        },
-    },
-    optionSelected: {
-        backgroundColor: colors.gray95,
-        color: "#11ACCD",
-    },
-    optionDisabled: {
-        color: colors.gray76,
-        ":hover": {
-            backgroundColor: "transparent",
-        },
-    },
-    check: {
-        position: "absolute",
-        left: 11,
-    },
-    notAButton: {
-        backgroundColor: "transparent",
-        border: "none",
-        display: "block",
-        padding: 0,
-        margin: 0,
-        width: "100%",
-        // <button> uses user agent stylesheet over inherit so we need to set
-        // it explicitly.
-        font: "inherit",
-    },
-    noFocus: {
-        outline: "none",
-    },
-    cursorDefault: {
-        cursor: "default",
-    },
-});
-
-export {OptionGroup};
-export default Option;