@khanacademy/perseus-editor 6.9.0 → 6.10.0

package/dist/es/index.js

@@ -29,7 +29,7 @@ import trashIcon from '@phosphor-icons/core/bold/trash-bold.svg';
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "6.9.0";
+const libVersion = "6.10.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -30290,29 +30290,26 @@ const AngleInput = props => {
   return /*#__PURE__*/React.createElement(View, {
     style: [styles$q.row, styles$q.spaceUnder]
   }, /*#__PURE__*/React.createElement(LabelMedium, {
-    tag: "label"
-  }, /*#__PURE__*/React.createElement(View, {
+    tag: "label",
     style: styles$q.row
   }, "angle", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(TextField, {
-    id: "",
     value: angleInput,
     onChange: handleAngleChange,
     style: styles$q.textField
-  }))), /*#__PURE__*/React.createElement(Strut, {
+  })), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
-  }), /*#__PURE__*/React.createElement(View, {
-    style: styles$q.row
-  }, /*#__PURE__*/React.createElement(LabelSmall, null, "radians"), /*#__PURE__*/React.createElement(View, {
+  }), /*#__PURE__*/React.createElement(LabelSmall, null, "radians"), /*#__PURE__*/React.createElement(View, {
     style: styles$q.switch
   }, /*#__PURE__*/React.createElement(Switch, {
     onChange: handleAngleTypeChange,
     checked: isInDegrees
-  })), /*#__PURE__*/React.createElement(LabelSmall, null, "degrees")), /*#__PURE__*/React.createElement(InfoTip$d, null, /*#__PURE__*/React.createElement("p", null, "The angle of rotation for the ellipse (if the x radius and y radius are different)."), /*#__PURE__*/React.createElement("p", null, "Expressions will be evaluted (e.g. \"pi/2\" or \"5pi/4\").")));
+  })), /*#__PURE__*/React.createElement(LabelSmall, null, "degrees"), /*#__PURE__*/React.createElement(InfoTip$d, null, /*#__PURE__*/React.createElement("p", null, "The angle of rotation for the ellipse (if the x radius and y radius are different)."), /*#__PURE__*/React.createElement("p", null, "Expressions will be evaluted (e.g. \"pi/2\" or \"5pi/4\").")));
 };
 const styles$q = StyleSheet.create({
   row: {
+    display: "flex",
     flexDirection: "row",
     alignItems: "center"
   },
@@ -30359,16 +30356,14 @@ const ColorSelect = props => {
     style,
     onChange
   } = props;
-  const ids = useUniqueIdWithMock();
-  const id = ids.get("color-select");
   return /*#__PURE__*/React.createElement(View, {
     style: [styles$o.row, style]
   }, /*#__PURE__*/React.createElement(LabelMedium, {
-    htmlFor: id,
-    style: styles$o.label,
-    tag: "label"
-  }, "color"), /*#__PURE__*/React.createElement(SingleSelect, {
-    id: id,
+    tag: "label",
+    style: styles$o.row
+  }, "color", /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xxSmall_6
+  }), /*#__PURE__*/React.createElement(SingleSelect, {
     selectedValue: selectedValue,
     onChange: onChange
     // Placeholder is required, but never gets used.
@@ -30382,15 +30377,13 @@ const ColorSelect = props => {
       color: colorName,
       decorative: true
     })
-  }, colorName))));
+  }, colorName)))));
 };
 const styles$o = StyleSheet.create({
   row: {
+    display: "flex",
     flexDirection: "row",
     alignItems: "center"
-  },
-  label: {
-    marginInlineEnd: spacing.xxxSmall_4
   }
 });
 
@@ -30407,12 +30400,6 @@ const CoordinatePairInput = props => {
   const [coordState, setCoordState] = React.useState([
   // Using strings to make it easier to work with the text fields.
   coord[0].toString(), coord[1].toString()]);
-
-  // Generate unique IDs so that the programmatic labels can be associated
-  // with their respective text fields.
-  const ids = useUniqueIdWithMock();
-  const xCoordId = ids.get("x-coord");
-  const yCoordId = ids.get("y-coord");
   function handleCoordChange(newValue, coordIndex) {
     // Update the local state (update the input field value).
     const newCoordState = [...coordState];
@@ -30433,40 +30420,38 @@ const CoordinatePairInput = props => {
   return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
     style: [styles$n.row, styles$n.spaceUnder]
   }, /*#__PURE__*/React.createElement(LabelMedium, {
-    htmlFor: xCoordId,
-    style: styles$n.label,
-    tag: "label"
-  }, labels ? labels[0] : "x coord"), /*#__PURE__*/React.createElement(TextField, {
-    id: xCoordId,
+    tag: "label",
+    style: styles$n.row
+  }, labels ? labels[0] : "x coord", /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xxSmall_6
+  }), /*#__PURE__*/React.createElement(TextField, {
     type: "number",
     value: coordState[0],
     onChange: newValue => handleCoordChange(newValue, 0),
     style: [styles$n.textField, error ? styles$n.errorField : undefined]
-  }), /*#__PURE__*/React.createElement(Strut, {
+  })), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.medium_16
   }), /*#__PURE__*/React.createElement(LabelMedium, {
-    htmlFor: yCoordId,
-    style: styles$n.label,
-    tag: "label"
-  }, labels ? labels[1] : "y coord"), /*#__PURE__*/React.createElement(TextField, {
-    id: yCoordId,
+    tag: "label",
+    style: styles$n.row
+  }, labels ? labels[1] : "y coord", /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xxSmall_6
+  }), /*#__PURE__*/React.createElement(TextField, {
     type: "number",
     value: coordState[1],
     onChange: newValue => handleCoordChange(newValue, 1),
     style: [styles$n.textField, error ? styles$n.errorField : undefined]
-  })));
+  }))));
 };
 const styles$n = StyleSheet.create({
   row: {
+    display: "flex",
     flexDirection: "row",
     alignItems: "center"
   },
   spaceUnder: {
     marginBottom: spacing.xSmall_8
   },
-  label: {
-    marginInlineEnd: spacing.xxSmall_6
-  },
   textField: {
     width: spacing.xxxLarge_64
   },
@@ -30608,9 +30593,6 @@ const LockedEllipseSettings = props => {
     onChangeProps,
     onRemove
   } = props;
-  const ids = useUniqueIdWithMock();
-  const strokeSelectId = ids.get("stroke-style-select");
-  const fillSelectId = ids.get("fill-style-select");
   function handleColorChange(newValue) {
     onChangeProps({
       color: newValue
@@ -30662,10 +30644,10 @@ const LockedEllipseSettings = props => {
     size: spacing.medium_16
   }), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    htmlFor: fillSelectId,
-    style: styles$j.label
-  }, "fill"), /*#__PURE__*/React.createElement(SingleSelect, {
-    id: fillSelectId,
+    style: styles$j.row
+  }, "fill", /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xxSmall_6
+  }), /*#__PURE__*/React.createElement(SingleSelect, {
     selectedValue: fillStyle,
     onChange: value => onChangeProps({
       fillStyle: value
@@ -30677,14 +30659,12 @@ const LockedEllipseSettings = props => {
     key: option,
     value: option,
     label: option
-  }, option)))), /*#__PURE__*/React.createElement(View, {
-    style: styles$j.row
-  }, /*#__PURE__*/React.createElement(LabelMedium, {
+  }, option))))), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    htmlFor: strokeSelectId,
-    style: styles$j.label
-  }, "stroke"), /*#__PURE__*/React.createElement(SingleSelect, {
-    id: strokeSelectId,
+    style: styles$j.row
+  }, "stroke", /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xxSmall_6
+  }), /*#__PURE__*/React.createElement(SingleSelect, {
     selectedValue: strokeStyle,
     onChange: value => onChangeProps({
       strokeStyle: value
@@ -30705,12 +30685,10 @@ const LockedEllipseSettings = props => {
 };
 const styles$j = StyleSheet.create({
   row: {
+    display: "flex",
     flexDirection: "row",
     alignItems: "center"
   },
-  label: {
-    marginInlineEnd: spacing.xxSmall_6
-  },
   spaceUnder: {
     marginBottom: spacing.xSmall_8
   }
@@ -30870,12 +30848,6 @@ const LockedLineSettings = props => {
     onRemove
   } = props;
   const [point1, point2] = points;
-
-  // Generate unique IDs so that the programmatic labels can be associated
-  // with their respective text fields.
-  const ids = useUniqueIdWithMock();
-  const kindSelectId = ids.get("line-kind-select");
-  const styleSelectId = ids.get("line-style-select");
   const capitalizeKind = kind.charAt(0).toUpperCase() + kind.slice(1);
   const lineLabel = `${capitalizeKind} (${point1.coord[0]},
         ${point1.coord[1]}), (${point2.coord[0]}, ${point2.coord[1]})`;
@@ -30911,14 +30883,12 @@ const LockedLineSettings = props => {
       color: lineColor,
       lineStyle: lineStyle
     }))
-  }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$f.row, styles$f.spaceUnder]
   }, /*#__PURE__*/React.createElement(LabelMedium, {
-    htmlFor: kindSelectId,
-    style: styles$f.label,
-    tag: "label"
-  }, "kind"), /*#__PURE__*/React.createElement(SingleSelect, {
-    id: kindSelectId,
+    tag: "label",
+    style: [styles$f.row, styles$f.spaceUnder]
+  }, "kind", /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xxxSmall_4
+  }), /*#__PURE__*/React.createElement(SingleSelect, {
     selectedValue: kind,
     onChange: value => onChangeProps({
       kind: value
@@ -30936,20 +30906,18 @@ const LockedLineSettings = props => {
     value: "segment",
     label: "segment"
   }))), /*#__PURE__*/React.createElement(View, {
-    style: [styles$f.row, styles$f.spaceUnder]
+    style: styles$f.row
   }, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: lineColor,
     onChange: handleColorChange
   }), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.small_12
-  }), /*#__PURE__*/React.createElement(View, {
+  }), /*#__PURE__*/React.createElement(LabelMedium, {
+    tag: "label",
     style: styles$f.row
-  }, /*#__PURE__*/React.createElement(LabelMedium, {
-    htmlFor: styleSelectId,
-    style: styles$f.label,
-    tag: "label"
-  }, "style"), /*#__PURE__*/React.createElement(SingleSelect, {
-    id: styleSelectId,
+  }, "style", /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xxxSmall_4
+  }), /*#__PURE__*/React.createElement(SingleSelect, {
     selectedValue: lineStyle,
     onChange: value => onChangeProps({
       lineStyle: value
@@ -30999,9 +30967,6 @@ const styles$f = StyleSheet.create({
   spaceUnder: {
     marginBottom: spacing.xSmall_8
   },
-  label: {
-    marginInlineEnd: spacing.xxxSmall_4
-  },
   selectMarginOffset: {
     // Align with the point settings accordions.
     marginInlineEnd: -spacing.xxxSmall_4