@khanacademy/perseus-editor 5.2.3 → 5.2.5

package/dist/components/device-framer.d.ts

@@ -1,15 +1,11 @@
 /**
  * A component that displays its contents inside a device frame.
  */
-import PropTypes from "prop-types";
 import * as React from "react";
-type Props = any;
-declare class DeviceFramer extends React.Component<Props> {
-    static propTypes: {
-        children: PropTypes.Validator<PropTypes.ReactElementLike>;
-        deviceType: PropTypes.Validator<NonNullable<"phone" | "tablet" | "desktop">>;
-        nochrome: PropTypes.Requireable<boolean>;
-    };
-    render(): React.ReactNode;
-}
+import type { DeviceType } from "@khanacademy/perseus";
+type Props = React.PropsWithChildren<{
+    deviceType?: DeviceType;
+    nochrome: boolean;
+}>;
+declare const DeviceFramer: ({ children, deviceType, nochrome, }: Props) => React.ReactElement;
 export default DeviceFramer;

package/dist/components/viewport-resizer.d.ts

@@ -1,16 +1,13 @@
-import PropTypes from "prop-types";
-import * as React from "react";
+/// <reference types="react" />
 import type { DeviceType } from "@khanacademy/perseus";
 type Props = {
+    /** The current device type that is selected. */
     deviceType: DeviceType;
-    onViewportSizeChanged: (arg1: DeviceType) => unknown;
+    /**
+     * A callback that is passed (width, height) as the dimensions of the
+     * viewport to resize to.
+     */
+    onViewportSizeChanged: (deviceType: DeviceType) => unknown;
 };
-declare class ViewportResizer extends React.Component<Props> {
-    static propTypes: {
-        deviceType: PropTypes.Validator<string>;
-        onViewportSizeChanged: PropTypes.Validator<(...args: any[]) => any>;
-    };
-    handleChange: (value: DeviceType) => void;
-    render(): React.ReactNode;
-}
+declare const ViewportResizer: (props: Props) => JSX.Element;
 export default ViewportResizer;

package/dist/components/widget-editor.d.ts

@@ -6,7 +6,7 @@ type WidgetEditorProps = {
     onChange: (widgetInfo: PerseusWidget, cb?: () => unknown, silent?: boolean) => unknown;
     onRemove: () => unknown;
     apiOptions: any;
-} & PerseusWidget;
+} & Omit<PerseusWidget, "key">;
 type WidgetEditorState = {
     showWidget: boolean;
     widgetInfo: PerseusWidget;

package/dist/es/index.js

@@ -3,12 +3,12 @@ import { constants, components, Widgets, icons, WIDGET_PROP_DENYLIST, Util, Log,
 import * as React from 'react';
 import { useRef, useEffect } from 'react';
 import _ from 'underscore';
-import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import Clickable from '@khanacademy/wonder-blocks-clickable';
-import Color from '@khanacademy/wonder-blocks-color';
+import { color, spacing } from '@khanacademy/wonder-blocks-tokens';
 import { StyleSheet, css } from 'aphrodite';
 import $ from 'jquery';
+import PropTypes from 'prop-types';
 import { View, useUniqueIdWithMock } from '@khanacademy/wonder-blocks-core';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import caretRight from '@phosphor-icons/core/bold/caret-right-bold.svg';
@@ -20,9 +20,7 @@ import { isTruthy } from '@khanacademy/wonder-stuff-core';
 import { createMathField } from '@khanacademy/math-input';
 import { SingleSelect, OptionItem, ActionMenu, ActionItem } from '@khanacademy/wonder-blocks-dropdown';
 import { TextField, Checkbox as Checkbox$1 } from '@khanacademy/wonder-blocks-form';
-import Spacing from '@khanacademy/wonder-blocks-spacing';
 import { LabelSmall, LabelLarge, LabelMedium, BodyMonospace } from '@khanacademy/wonder-blocks-typography';
-import { spacing, color } from '@khanacademy/wonder-blocks-tokens';
 import IconButton from '@khanacademy/wonder-blocks-icon-button';
 import trashIcon from '@phosphor-icons/core/bold/trash-bold.svg';
 import Button from '@khanacademy/wonder-blocks-button';
@@ -30,7 +28,7 @@ import * as i18n$1 from '@khanacademy/wonder-blocks-i18n';
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "5.2.3";
+const libVersion = "5.2.5";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -50,9 +48,6 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-/**
- * A component that displays its contents inside a device frame.
- */
 const SCREEN_SIZES = {
   phone: {
     width: 320,
@@ -70,47 +65,46 @@ const SCREEN_SIZES = {
     framedWidth: 688
   }
 };
-class DeviceFramer extends React.Component {
-  render() {
-    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 /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-        key: "screen",
-        style: {
-          width: SCREEN_SIZES[deviceType].framedWidth + 2 * constants.perseusFrameBorderWidth + constants.lintGutterWidth
-        }
-      }, /*#__PURE__*/React.createElement("div", null, this.props.children)));
-    }
-    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
-    };
+const DeviceFramer = ({
+  children,
+  deviceType: _deviceType = "phone",
+  nochrome
+}) => {
+  const scale = React.useMemo(() => SCREEN_SIZES[_deviceType].framedWidth / SCREEN_SIZES[_deviceType].width, [_deviceType]);
+
+  // In this mode we draw our own border and don't reserve
+  // space for a lint gutter.
+  const withChromeStyle = React.useMemo(() => ({
+    backgroundColor: "white",
+    overflow: "scroll",
+    color: "black",
+    textAlign: "left",
+    width: SCREEN_SIZES[_deviceType].width,
+    height: SCREEN_SIZES[_deviceType].height,
+    border: "solid 1px #CCC",
+    margin: 8,
+    zoom: scale
+  }), [_deviceType, scale]);
+  if (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 /*#__PURE__*/React.createElement("div", {
       key: "screen",
-      className: "screen",
-      style: screenStyle
-    }, this.props.children);
+      style: {
+        overflow: "scroll",
+        width: SCREEN_SIZES[_deviceType].framedWidth + 2 * constants.perseusFrameBorderWidth + constants.lintGutterWidth
+      }
+    }, /*#__PURE__*/React.createElement("div", null, children));
   }
-}
-DeviceFramer.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
+  return /*#__PURE__*/React.createElement("div", {
+    key: "screen",
+    className: "screen",
+    style: _extends({}, withChromeStyle, {
+      textAlign: "start"
+    })
+  }, children);
 };
 
 /* eslint-disable @babel/no-invalid-this */
@@ -236,7 +230,7 @@ class SectionControlButton extends React.Component {
 }
 const styles$q = StyleSheet.create({
   button: {
-    backgroundColor: Color.gold,
+    backgroundColor: color.gold,
     margin: 2,
     paddingRight: 10,
     paddingLeft: 10,
@@ -21163,6 +21157,9 @@ class Editor extends React.Component {
       // eg. If there is an "image 2" already present in the editor and we're
       // about to paste in two new images, return
       // { "image 1": "image 3", "image 2": "image 4" }
+      //
+      // TODO switch to UUIDs rather than these fragile IDs
+      // see: LEMS-1845
 
       // List of widgets about to be pasted as [[name, number], ...]
       const widgets = _.keys(widgetData).map(name => name.split(" "));
@@ -21421,7 +21418,8 @@ class Editor extends React.Component {
     }
     return /*#__PURE__*/React.createElement(WidgetEditor, _extends({
       ref: id,
-      id: id
+      id: id,
+      key: id
       // eslint-disable-next-line react/jsx-no-bind
       ,
       onChange: this._handleWidgetEditorChange.bind(this, id)
@@ -22086,44 +22084,29 @@ const {
   iconMobilePhone,
   iconTablet
 } = icons;
-class ViewportResizer extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.handleChange = value => {
-      this.props.onViewportSizeChanged(value);
-    };
-  }
-  render() {
-    const phoneButtonContents = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(InlineIcon$8, iconMobilePhone), " Phone");
-    const tabletButtonContents = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(InlineIcon$8, iconTablet), " Tablet");
-    const desktopButtonContents = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(InlineIcon$8, iconDesktop), " Desktop");
-
-    // TODO(david): Allow input of custom viewport sizes.
-    return /*#__PURE__*/React.createElement("span", {
-      className: "viewport-resizer"
-    }, "Viewport:", " ", /*#__PURE__*/React.createElement(ButtonGroup$5, {
-      value: this.props.deviceType,
-      allowEmpty: false,
-      buttons: [{
-        value: devices.PHONE,
-        content: phoneButtonContents
-      }, {
-        value: devices.TABLET,
-        content: tabletButtonContents
-      }, {
-        value: devices.DESKTOP,
-        content: desktopButtonContents
-      }],
-      onChange: this.handleChange
-    }));
-  }
-}
-ViewportResizer.propTypes = {
-  // The current device type that is selected.
-  deviceType: PropTypes.string.isRequired,
-  // A callback that is passed (width, height) as the dimensions of the
-  // viewport to resize to.
-  onViewportSizeChanged: PropTypes.func.isRequired
+const ViewportResizer = props => {
+  const phoneButtonContents = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(InlineIcon$8, iconMobilePhone), " Phone");
+  const tabletButtonContents = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(InlineIcon$8, iconTablet), " Tablet");
+  const desktopButtonContents = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(InlineIcon$8, iconDesktop), " Desktop");
+
+  // TODO(david): Allow input of custom viewport sizes.
+  return /*#__PURE__*/React.createElement("span", {
+    className: "viewport-resizer"
+  }, "Viewport:", " ", /*#__PURE__*/React.createElement(ButtonGroup$5, {
+    value: props.deviceType,
+    allowEmpty: false,
+    buttons: [{
+      value: devices.PHONE,
+      content: phoneButtonContents
+    }, {
+      value: devices.TABLET,
+      content: tabletButtonContents
+    }, {
+      value: devices.DESKTOP,
+      content: desktopButtonContents
+    }],
+    onChange: props.onViewportSizeChanged
+  }));
 };
 
 /*
@@ -26816,6 +26799,7 @@ class ExpressionEditor extends React.Component {
         widgetId: this.props.widgetId + "-" + ans.key
       };
       return lens(ans).merge([], {
+        key,
         draggable: true,
         onChange: props => {
           var _ans$key;
@@ -27299,10 +27283,11 @@ const GraphSettings = createReactClass({
     }
   },
   renderLabelChoices: function (choices) {
-    return _.map(choices, function (nameAndValue) {
+    return _.map(choices, function ([name, value]) {
       return /*#__PURE__*/React.createElement("option", {
-        value: nameAndValue[1]
-      }, nameAndValue[0]);
+        key: value,
+        value: value
+      }, name);
     });
   },
   validRange: function (range) {
@@ -27662,6 +27647,7 @@ const GraphSettings = createReactClass({
       value: this.props.rulerTicks
     }, _.map([1, 2, 4, 8, 10, 16], function (n) {
       return /*#__PURE__*/React.createElement("option", {
+        key: n,
         value: n
       }, n);
     })))))));
@@ -28442,9 +28428,9 @@ const styles$k = StyleSheet.create({
     display: "inline-block",
     borderStyle: "solid",
     borderWidth: 1,
-    borderColor: Color.offBlack50,
+    borderColor: color.offBlack50,
     borderRadius: 3,
-    background: Color.white
+    background: color.white
   }
 });
 
@@ -29504,6 +29490,7 @@ const GraphPointsCountSelector = ({
     value: `${n}`,
     label: `${n} point${n > 1 ? "s" : ""}`
   })), /*#__PURE__*/React.createElement(OptionItem, {
+    key: "unlimited",
     value: UNLIMITED,
     label: "unlimited"
   })]);
@@ -30657,6 +30644,7 @@ class InteractiveGraphEditor extends React.Component {
       },
       style: styles$a.singleSelectShort
     }, [...POLYGON_SIDES, /*#__PURE__*/React.createElement(OptionItem, {
+      key: "unlimited",
       value: "unlimited",
       label: "unlimited sides"
     })])), /*#__PURE__*/React.createElement(LabeledRow, {
@@ -30784,7 +30772,7 @@ class InteractiveGraphEditor extends React.Component {
       style: {
         fontSize: 12,
         backgroundColor: "#eee",
-        paddingInline: Spacing.xxSmall_6,
+        paddingInline: spacing.xxSmall_6,
         borderColor: "#ccc",
         borderStyle: "solid",
         borderWidth: 1
@@ -30840,7 +30828,7 @@ const styles$a = StyleSheet.create({
   },
   row: {
     flexDirection: "row",
-    marginTop: Spacing.xSmall_8,
+    marginTop: spacing.xSmall_8,
     alignItems: "center"
   }
 });
@@ -30885,7 +30873,7 @@ class FormWrappedTextField extends React.Component {
         backgroundColor,
         focusBorderColor,
         borderColor,
-        color,
+        color: color$1,
         onSubmit,
         leftSideIcon,
         id,
@@ -30915,10 +30903,10 @@ class FormWrappedTextField extends React.Component {
     }
 
     // Add text color if specified.
-    if (color) {
-      extraStyles.color = color;
+    if (color$1) {
+      extraStyles.color = color$1;
     }
-    const borderColorStyle = focused ? focusBorderColor || Color.blue : borderColor || Color.offBlack16;
+    const borderColorStyle = focused ? focusBorderColor || color.blue : borderColor || color.offBlack16;
     extraStyles.border = `1px solid ${borderColorStyle}`;
     const wrappedIcon = icon && /*#__PURE__*/React.createElement("span", {
       className: css(styles$9.icon)