@khanacademy/perseus 35.0.0 → 36.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (69) hide show
  1. package/dist/es/index.js +19402 -19310
  2. package/dist/es/index.js.map +1 -1
  3. package/dist/index.js +19493 -19400
  4. package/dist/index.js.map +1 -1
  5. package/dist/multi-items/multi-renderer.d.ts +1 -2
  6. package/dist/perseus-api.d.ts +2 -0
  7. package/dist/perseus-types.d.ts +42 -35
  8. package/dist/renderer.d.ts +2 -33
  9. package/dist/server-item-renderer.d.ts +3 -1
  10. package/dist/types.d.ts +43 -8
  11. package/dist/util.d.ts +1 -8
  12. package/dist/validation.types.d.ts +8 -11
  13. package/dist/widgets/categorizer/categorizer.d.ts +2 -2
  14. package/dist/widgets/cs-program/cs-program-validator.d.ts +3 -0
  15. package/dist/widgets/cs-program/cs-program.d.ts +5 -4
  16. package/dist/widgets/definition/definition.d.ts +4 -4
  17. package/dist/widgets/deprecated-standin/index.d.ts +6 -7
  18. package/dist/widgets/dropdown/dropdown.d.ts +2 -2
  19. package/dist/widgets/explanation/explanation.d.ts +4 -4
  20. package/dist/widgets/expression/expression.d.ts +50 -38
  21. package/dist/widgets/graded-group/graded-group.d.ts +2 -2
  22. package/dist/widgets/graded-group-set/graded-group-set.d.ts +2 -2
  23. package/dist/widgets/grapher/grapher-validator.d.ts +4 -0
  24. package/dist/widgets/grapher/grapher.d.ts +2 -3
  25. package/dist/widgets/grapher/util.d.ts +0 -2
  26. package/dist/widgets/group/group.d.ts +5 -5
  27. package/dist/widgets/iframe/iframe-validator.d.ts +3 -0
  28. package/dist/widgets/iframe/iframe.d.ts +4 -3
  29. package/dist/widgets/image/image.d.ts +4 -5
  30. package/dist/widgets/input-number/input-number.d.ts +2 -2
  31. package/dist/widgets/interaction/interaction.d.ts +4 -4
  32. package/dist/widgets/interactive-graph.d.ts +5 -5
  33. package/dist/widgets/interactive-graphs/backgrounds/axis-ticks.d.ts +1 -1
  34. package/dist/widgets/interactive-graphs/graph-locked-layer.d.ts +2 -0
  35. package/dist/widgets/interactive-graphs/interactive-graph-question-builder.d.ts +7 -0
  36. package/dist/widgets/interactive-graphs/interactive-graph-validator.d.ts +4 -0
  37. package/dist/widgets/interactive-graphs/locked-figures/locked-ellipse.d.ts +5 -1
  38. package/dist/widgets/interactive-graphs/locked-figures/locked-function.d.ts +5 -1
  39. package/dist/widgets/interactive-graphs/locked-figures/locked-line.d.ts +2 -0
  40. package/dist/widgets/interactive-graphs/locked-figures/locked-point.d.ts +5 -1
  41. package/dist/widgets/interactive-graphs/locked-figures/locked-polygon.d.ts +5 -1
  42. package/dist/widgets/interactive-graphs/locked-figures/locked-vector.d.ts +5 -1
  43. package/dist/widgets/interactive-graphs/mafs-state-to-interactive-graph.d.ts +3 -0
  44. package/dist/widgets/label-image/label-image.d.ts +6 -2
  45. package/dist/widgets/matcher/matcher-validator.d.ts +4 -0
  46. package/dist/widgets/matcher/matcher.d.ts +4 -3
  47. package/dist/widgets/matrix/matrix-validator.d.ts +5 -0
  48. package/dist/widgets/matrix/matrix.d.ts +4 -3
  49. package/dist/widgets/measurer/measurer.d.ts +47 -2
  50. package/dist/widgets/molecule/molecule.d.ts +2 -1
  51. package/dist/widgets/number-line/number-line-validator.d.ts +4 -0
  52. package/dist/widgets/number-line/number-line.d.ts +7 -6
  53. package/dist/widgets/numeric-input/numeric-input.d.ts +2 -2
  54. package/dist/widgets/orderer/orderer-validator.d.ts +3 -0
  55. package/dist/widgets/orderer/orderer.d.ts +4 -3
  56. package/dist/widgets/passage/passage.d.ts +4 -4
  57. package/dist/widgets/passage/utils.d.ts +12 -0
  58. package/dist/widgets/passage-ref/passage-ref.d.ts +4 -4
  59. package/dist/widgets/passage-ref-target/passage-ref-target.d.ts +4 -4
  60. package/dist/widgets/phet-simulation/phet-simulation.d.ts +4 -4
  61. package/dist/widgets/plotter/plotter-validator.d.ts +4 -0
  62. package/dist/widgets/plotter/plotter.d.ts +3 -2
  63. package/dist/widgets/python-program/python-program.d.ts +6 -1
  64. package/dist/widgets/radio/radio-component.d.ts +2 -2
  65. package/dist/widgets/sorter/sorter.d.ts +2 -2
  66. package/dist/widgets/table/table-validator.d.ts +5 -0
  67. package/dist/widgets/table/table.d.ts +4 -3
  68. package/dist/widgets/video/video.d.ts +2 -2
  69. package/package.json +1 -1
@@ -5,8 +5,7 @@ import type { Item, ContentNode, HintNode, TagsNode } from "./item-types";
5
5
  import type { Shape, ArrayShape } from "./shape-types";
6
6
  import type { Tree } from "./tree-types";
7
7
  import type { TreeMapper, ContentMapper, HintMapper, Path } from "./trees";
8
- import type { Widget } from "../renderer";
9
- import type { APIOptions, FilterCriterion, PerseusDependenciesV2 } from "../types";
8
+ import type { APIOptions, FilterCriterion, PerseusDependenciesV2, Widget } from "../types";
10
9
  import type { PropsFor } from "@khanacademy/wonder-blocks-core";
11
10
  type Hint = any;
12
11
  type Score = any;
@@ -103,10 +103,12 @@ export declare const ApiOptions: {
103
103
  "unlimited-point"?: boolean | undefined;
104
104
  } & {
105
105
  "interactive-graph-locked-features-labels"?: boolean | undefined;
106
+ "locked-figures-aria"?: boolean | undefined;
106
107
  "locked-point-labels"?: boolean | undefined;
107
108
  "locked-line-labels"?: boolean | undefined;
108
109
  "locked-vector-labels"?: boolean | undefined;
109
110
  "locked-ellipse-labels"?: boolean | undefined;
111
+ "locked-polygon-labels"?: boolean | undefined;
110
112
  "locked-function-labels"?: boolean | undefined;
111
113
  }) | undefined;
112
114
  } | undefined;
@@ -120,7 +120,7 @@ export type PerseusImageDetail = {
120
120
  };
121
121
  export declare const ItemExtras: readonly ["calculator", "chi2Table", "financialCalculatorMonthlyPayment", "financialCalculatorTotalAmount", "financialCalculatorTimeToPayOff", "periodicTable", "periodicTableWithKey", "tTable", "zTable"];
122
122
  export type PerseusAnswerArea = Record<(typeof ItemExtras)[number], boolean>;
123
- type Widget<Type extends string, Options> = {
123
+ type WidgetOptions<Type extends string, Options> = {
124
124
  type: Type;
125
125
  static?: boolean;
126
126
  graded?: boolean;
@@ -129,40 +129,40 @@ type Widget<Type extends string, Options> = {
129
129
  key?: number;
130
130
  version?: Version;
131
131
  };
132
- export type CategorizerWidget = Widget<'categorizer', PerseusCategorizerWidgetOptions>;
133
- export type CSProgramWidget = Widget<'cs-program', PerseusCSProgramWidgetOptions>;
134
- export type DefinitionWidget = Widget<'definition', PerseusDefinitionWidgetOptions>;
135
- export type DropdownWidget = Widget<'dropdown', PerseusDropdownWidgetOptions>;
136
- export type ExplanationWidget = Widget<'explanation', PerseusExplanationWidgetOptions>;
137
- export type ExpressionWidget = Widget<'expression', PerseusExpressionWidgetOptions>;
138
- export type GradedGroupSetWidget = Widget<'graded-group-set', PerseusGradedGroupSetWidgetOptions>;
139
- export type GradedGroupWidget = Widget<'graded-group', PerseusGradedGroupWidgetOptions>;
140
- export type GrapherWidget = Widget<'grapher', PerseusGrapherWidgetOptions>;
141
- export type GroupWidget = Widget<'group', PerseusGroupWidgetOptions>;
142
- export type IFrameWidget = Widget<'iframe', PerseusIFrameWidgetOptions>;
143
- export type ImageWidget = Widget<'image', PerseusImageWidgetOptions>;
144
- export type InteractionWidget = Widget<'interaction', PerseusInteractionWidgetOptions>;
145
- export type InteractiveGraphWidget = Widget<'interactive-graph', PerseusInteractiveGraphWidgetOptions>;
146
- export type LabelImageWidget = Widget<'label-image', PerseusLabelImageWidgetOptions>;
147
- export type MatcherWidget = Widget<'matcher', PerseusMatcherWidgetOptions>;
148
- export type MatrixWidget = Widget<'matrix', PerseusMatrixWidgetOptions>;
149
- export type MeasurerWidget = Widget<'measurer', PerseusMeasurerWidgetOptions>;
150
- export type NumberLineWidget = Widget<'number-line', PerseusNumberLineWidgetOptions>;
151
- export type NumericInputWidget = Widget<'numeric-input', PerseusNumericInputWidgetOptions>;
152
- export type OrdererWidget = Widget<'orderer', PerseusOrdererWidgetOptions>;
153
- export type PassageRefWidget = Widget<'passage-ref', PerseusPassageRefWidgetOptions>;
154
- export type PassageWidget = Widget<'passage', PerseusPassageWidgetOptions>;
155
- export type PhetSimulationWidget = Widget<'phet-simulation', PerseusPhetSimulationWidgetOptions>;
156
- export type PlotterWidget = Widget<'plotter', PerseusPlotterWidgetOptions>;
157
- export type PythonProgramWidget = Widget<'python-program', PerseusPythonProgramWidgetOptions>;
158
- export type RadioWidget = Widget<'radio', PerseusRadioWidgetOptions>;
159
- export type SorterWidget = Widget<'sorter', PerseusSorterWidgetOptions>;
160
- export type TableWidget = Widget<'table', PerseusTableWidgetOptions>;
161
- export type InputNumberWidget = Widget<'input-number', PerseusInputNumberWidgetOptions>;
162
- export type MoleculeRendererWidget = Widget<'molecule-renderer', PerseusMoleculeRendererWidgetOptions>;
163
- export type RefTargetWidget = Widget<'passage-ref-target', PerseusPassageRefTargetWidgetOptions>;
164
- export type VideoWidget = Widget<'video', PerseusVideoWidgetOptions>;
165
- export type AutoCorrectWidget = Widget<'deprecated-standin', PerseusWidgetOptions>;
132
+ export type CategorizerWidget = WidgetOptions<'categorizer', PerseusCategorizerWidgetOptions>;
133
+ export type CSProgramWidget = WidgetOptions<'cs-program', PerseusCSProgramWidgetOptions>;
134
+ export type DefinitionWidget = WidgetOptions<'definition', PerseusDefinitionWidgetOptions>;
135
+ export type DropdownWidget = WidgetOptions<'dropdown', PerseusDropdownWidgetOptions>;
136
+ export type ExplanationWidget = WidgetOptions<'explanation', PerseusExplanationWidgetOptions>;
137
+ export type ExpressionWidget = WidgetOptions<'expression', PerseusExpressionWidgetOptions>;
138
+ export type GradedGroupSetWidget = WidgetOptions<'graded-group-set', PerseusGradedGroupSetWidgetOptions>;
139
+ export type GradedGroupWidget = WidgetOptions<'graded-group', PerseusGradedGroupWidgetOptions>;
140
+ export type GrapherWidget = WidgetOptions<'grapher', PerseusGrapherWidgetOptions>;
141
+ export type GroupWidget = WidgetOptions<'group', PerseusGroupWidgetOptions>;
142
+ export type IFrameWidget = WidgetOptions<'iframe', PerseusIFrameWidgetOptions>;
143
+ export type ImageWidget = WidgetOptions<'image', PerseusImageWidgetOptions>;
144
+ export type InteractionWidget = WidgetOptions<'interaction', PerseusInteractionWidgetOptions>;
145
+ export type InteractiveGraphWidget = WidgetOptions<'interactive-graph', PerseusInteractiveGraphWidgetOptions>;
146
+ export type LabelImageWidget = WidgetOptions<'label-image', PerseusLabelImageWidgetOptions>;
147
+ export type MatcherWidget = WidgetOptions<'matcher', PerseusMatcherWidgetOptions>;
148
+ export type MatrixWidget = WidgetOptions<'matrix', PerseusMatrixWidgetOptions>;
149
+ export type MeasurerWidget = WidgetOptions<'measurer', PerseusMeasurerWidgetOptions>;
150
+ export type NumberLineWidget = WidgetOptions<'number-line', PerseusNumberLineWidgetOptions>;
151
+ export type NumericInputWidget = WidgetOptions<'numeric-input', PerseusNumericInputWidgetOptions>;
152
+ export type OrdererWidget = WidgetOptions<'orderer', PerseusOrdererWidgetOptions>;
153
+ export type PassageRefWidget = WidgetOptions<'passage-ref', PerseusPassageRefWidgetOptions>;
154
+ export type PassageWidget = WidgetOptions<'passage', PerseusPassageWidgetOptions>;
155
+ export type PhetSimulationWidget = WidgetOptions<'phet-simulation', PerseusPhetSimulationWidgetOptions>;
156
+ export type PlotterWidget = WidgetOptions<'plotter', PerseusPlotterWidgetOptions>;
157
+ export type PythonProgramWidget = WidgetOptions<'python-program', PerseusPythonProgramWidgetOptions>;
158
+ export type RadioWidget = WidgetOptions<'radio', PerseusRadioWidgetOptions>;
159
+ export type SorterWidget = WidgetOptions<'sorter', PerseusSorterWidgetOptions>;
160
+ export type TableWidget = WidgetOptions<'table', PerseusTableWidgetOptions>;
161
+ export type InputNumberWidget = WidgetOptions<'input-number', PerseusInputNumberWidgetOptions>;
162
+ export type MoleculeRendererWidget = WidgetOptions<'molecule-renderer', PerseusMoleculeRendererWidgetOptions>;
163
+ export type RefTargetWidget = WidgetOptions<'passage-ref-target', PerseusPassageRefTargetWidgetOptions>;
164
+ export type VideoWidget = WidgetOptions<'video', PerseusVideoWidgetOptions>;
165
+ export type AutoCorrectWidget = WidgetOptions<'deprecated-standin', PerseusWidgetOptions>;
166
166
  export type PerseusWidget = CategorizerWidget | CSProgramWidget | DefinitionWidget | DropdownWidget | ExplanationWidget | ExpressionWidget | GradedGroupSetWidget | GradedGroupWidget | GrapherWidget | GroupWidget | IFrameWidget | ImageWidget | InputNumberWidget | InteractionWidget | InteractiveGraphWidget | LabelImageWidget | MatcherWidget | MatrixWidget | MeasurerWidget | MoleculeRendererWidget | NumberLineWidget | NumericInputWidget | OrdererWidget | PassageRefWidget | PassageWidget | PhetSimulationWidget | PlotterWidget | PythonProgramWidget | RadioWidget | RefTargetWidget | SorterWidget | TableWidget | VideoWidget | AutoCorrectWidget;
167
167
  export type PerseusImageBackground = {
168
168
  url: string | null | undefined;
@@ -378,6 +378,7 @@ export type LockedPointType = {
378
378
  color: LockedFigureColor;
379
379
  filled: boolean;
380
380
  labels?: LockedLabelType[];
381
+ ariaLabel?: string;
381
382
  };
382
383
  export type LockedLineType = {
383
384
  type: "line";
@@ -388,12 +389,14 @@ export type LockedLineType = {
388
389
  showPoint1: boolean;
389
390
  showPoint2: boolean;
390
391
  labels?: LockedLabelType[];
392
+ ariaLabel?: string;
391
393
  };
392
394
  export type LockedVectorType = {
393
395
  type: "vector";
394
396
  points: [tail: Coord, tip: Coord];
395
397
  color: LockedFigureColor;
396
398
  labels?: LockedLabelType[];
399
+ ariaLabel?: string;
397
400
  };
398
401
  export type LockedFigureFillType = "none" | "white" | "translucent" | "solid";
399
402
  export declare const lockedFigureFillStyles: Record<LockedFigureFillType, number>;
@@ -406,6 +409,7 @@ export type LockedEllipseType = {
406
409
  fillStyle: LockedFigureFillType;
407
410
  strokeStyle: LockedLineStyle;
408
411
  labels?: LockedLabelType[];
412
+ ariaLabel?: string;
409
413
  };
410
414
  export type LockedPolygonType = {
411
415
  type: "polygon";
@@ -414,6 +418,8 @@ export type LockedPolygonType = {
414
418
  showVertices: boolean;
415
419
  fillStyle: LockedFigureFillType;
416
420
  strokeStyle: LockedLineStyle;
421
+ labels?: LockedLabelType[];
422
+ ariaLabel?: string;
417
423
  };
418
424
  export type LockedFunctionType = {
419
425
  type: "function";
@@ -423,6 +429,7 @@ export type LockedFunctionType = {
423
429
  directionalAxis: "x" | "y";
424
430
  domain?: Interval;
425
431
  labels?: LockedLabelType[];
432
+ ariaLabel?: string;
426
433
  };
427
434
  export type LockedLabelType = {
428
435
  type: "label";
@@ -5,7 +5,7 @@ import WidgetContainer from "./widget-container";
5
5
  import type { DependenciesContext } from "./dependencies";
6
6
  import type { PerseusRenderer, PerseusWidget, PerseusWidgetOptions, PerseusWidgetsMap, ShowSolutions } from "./perseus-types";
7
7
  import type { PerseusStrings } from "./strings";
8
- import type { APIOptions, APIOptionsWithDefaults, FilterCriterion, FocusPath, PerseusScore, WidgetProps } from "./types";
8
+ import type { APIOptions, APIOptionsWithDefaults, FilterCriterion, FocusPath, PerseusScore, SerializedState, Widget, WidgetProps } from "./types";
9
9
  import type { UserInput } from "./validation.types";
10
10
  import type { KeypadAPI } from "@khanacademy/math-input";
11
11
  import type { LinterContextProps } from "@khanacademy/perseus-linter";
@@ -19,37 +19,6 @@ type WidgetState = {
19
19
  baseElements?: any;
20
20
  };
21
21
  type SetWidgetPropsFn = (id: string, newProps: any, cb: () => boolean, silent?: boolean) => void;
22
- type SerializedState = {
23
- [id: string]: any;
24
- };
25
- /**
26
- * The Widget type represents the common API that the Renderer uses to interact
27
- * with all widgets. All widgets must implement the methods in this API, unless
28
- * they are marked as optional (?: ...).
29
- *
30
- * These methods are called on the widget ref and allow the renderer to
31
- * communicate with the individual widgets to coordinate actions such as
32
- * scoring, state serialization/deserialization, and focus management.
33
- */
34
- export type Widget = {
35
- focus: () => {
36
- id: string;
37
- path: FocusPath;
38
- } | boolean;
39
- getDOMNodeForPath: (path: FocusPath) => Element | Text | null;
40
- deselectIncorrectSelectedChoices?: () => void;
41
- restoreSerializedState: (props: any, callback: () => void) => any;
42
- getSerializedState?: () => SerializedState;
43
- getGrammarTypeForPath: (path: FocusPath) => string;
44
- blurInputPath?: (path: FocusPath) => null;
45
- focusInputPath?: (path: FocusPath) => null;
46
- getInputPaths?: () => ReadonlyArray<FocusPath>;
47
- setInputValue?: (path: FocusPath, newValue: string, focus?: () => unknown) => void;
48
- getUserInput?: () => UserInput | null | undefined;
49
- simpleValidate?: (options?: any, onOutputError?: (widgetId: any, value: string, message?: string | null | undefined) => unknown | null | undefined) => PerseusScore;
50
- showRationalesForCurrentlySelectedChoices?: (options?: any) => void;
51
- examples?: () => ReadonlyArray<string>;
52
- };
53
22
  type Props = Partial<React.ContextType<typeof DependenciesContext>> & {
54
23
  apiOptions?: APIOptions;
55
24
  alwaysUpdate?: boolean;
@@ -214,7 +183,7 @@ declare class Renderer extends React.Component<Props, State> {
214
183
  _setCurrentFocus: (path: FocusPath) => void;
215
184
  focus: () => boolean | null | undefined;
216
185
  getDOMNodeForPath: (path: FocusPath) => Element | Text | null | undefined;
217
- getGrammarTypeForPath: (path: FocusPath) => string | null | undefined;
186
+ getGrammarTypeForPath: (path: FocusPath) => string | undefined;
218
187
  getInputPaths: () => ReadonlyArray<FocusPath>;
219
188
  focusPath: (path: FocusPath) => void;
220
189
  blurPath: (path: FocusPath) => void;
@@ -95,7 +95,6 @@ export declare class ServerItemRenderer extends React.Component<Props, State> im
95
95
  render(): React.ReactNode;
96
96
  }
97
97
  declare const ref: React.ForwardRefExoticComponent<Omit<Pick<SharedRendererProps & OwnProps & HOCProps, keyof OwnProps> & {
98
- linterContext?: PerseusLinter.LinterContextProps | undefined;
99
98
  apiOptions?: Readonly<{
100
99
  isArticle?: boolean | undefined;
101
100
  onFocusChange?: ((newFocusPath: FocusPath, oldFocusPath: FocusPath, keypadHeight?: number | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
@@ -143,15 +142,18 @@ declare const ref: React.ForwardRefExoticComponent<Omit<Pick<SharedRendererProps
143
142
  "unlimited-point"?: boolean | undefined;
144
143
  } & {
145
144
  "interactive-graph-locked-features-labels"?: boolean | undefined;
145
+ "locked-figures-aria"?: boolean | undefined;
146
146
  "locked-point-labels"?: boolean | undefined;
147
147
  "locked-line-labels"?: boolean | undefined;
148
148
  "locked-vector-labels"?: boolean | undefined;
149
149
  "locked-ellipse-labels"?: boolean | undefined;
150
+ "locked-polygon-labels"?: boolean | undefined;
150
151
  "locked-function-labels"?: boolean | undefined;
151
152
  }) | undefined;
152
153
  } | undefined;
153
154
  onWidgetStartProps?: ((widgets: import("./perseus-types").PerseusWidgetsMap) => void) | undefined;
154
155
  }> | undefined;
156
+ linterContext?: PerseusLinter.LinterContextProps | undefined;
155
157
  onRendered?: ((isRendered: boolean) => void) | undefined;
156
158
  } & {}, "onRendered"> & React.RefAttributes<ServerItemRenderer>>;
157
159
  export default ref;
package/dist/types.d.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  import type { ILogger } from "./logging/log";
2
2
  import type { Item } from "./multi-items/item-types";
3
- import type { Hint, PerseusAnswerArea, PerseusWidget, PerseusWidgetsMap } from "./perseus-types";
3
+ import type { Hint, PerseusAnswerArea, PerseusGraphType, PerseusWidget, PerseusWidgetsMap } from "./perseus-types";
4
4
  import type { PerseusStrings } from "./strings";
5
5
  import type { SizeClass } from "./util/sizing-utils";
6
- import type { InteractiveGraphState } from "./widgets/interactive-graphs/types";
6
+ import type { UserInput } from "./validation.types";
7
7
  import type { KeypadAPI } from "@khanacademy/math-input";
8
8
  import type { AnalyticsEventHandlerFn } from "@khanacademy/perseus-core";
9
9
  import type { LinterContextProps } from "@khanacademy/perseus-linter";
@@ -15,9 +15,44 @@ export type Dimensions = {
15
15
  height?: number;
16
16
  };
17
17
  export type DeviceType = "phone" | "tablet" | "desktop";
18
- export type Widget = any;
18
+ /**
19
+ * This is the type returned by a widget's `getSerializedState` function (and
20
+ * provided to the same widget's `restoreSerializedState` function). However,
21
+ * note that in most cases the widgets do _not_ implement these functions.
22
+ * In that case, the `Renderer` just returns the widget's render props as the
23
+ * serialized state.
24
+ */
25
+ export type SerializedState = Record<string, any>;
26
+ /**
27
+ * The Widget type represents the common API that the Renderer uses to interact
28
+ * with all widgets. All widgets must implement the methods in this API, unless
29
+ * they are marked as optional (?: ...).
30
+ *
31
+ * These methods are called on the widget ref and allow the renderer to
32
+ * communicate with the individual widgets to coordinate actions such as
33
+ * scoring, state serialization/deserialization, and focus management.
34
+ */
35
+ export interface Widget {
36
+ focus?: () => {
37
+ id: string;
38
+ path: FocusPath;
39
+ } | boolean;
40
+ getDOMNodeForPath?: (path: FocusPath) => Element | Text | null;
41
+ deselectIncorrectSelectedChoices?: () => void;
42
+ getSerializedState?: () => SerializedState;
43
+ restoreSerializedState?: (props: any, callback: () => void) => any;
44
+ getGrammarTypeForPath?: (path: FocusPath) => string | undefined;
45
+ blurInputPath?: (path: FocusPath) => void;
46
+ focusInputPath?: (path: FocusPath) => void;
47
+ getInputPaths?: () => ReadonlyArray<FocusPath>;
48
+ setInputValue?: (path: FocusPath, newValue: string, focus?: () => unknown) => void;
49
+ getUserInput?: () => UserInput | null | undefined;
50
+ simpleValidate?: (options?: any, onOutputError?: (widgetId: any, value: string, message?: string | null | undefined) => unknown | null | undefined) => PerseusScore;
51
+ showRationalesForCurrentlySelectedChoices?: (options?: any) => void;
52
+ examples?: () => ReadonlyArray<string>;
53
+ }
19
54
  export type WidgetDict = {
20
- [name: string]: Widget;
55
+ [name: string]: PerseusWidget;
21
56
  };
22
57
  export type ImageDict = {
23
58
  [url: string]: Dimensions;
@@ -63,7 +98,7 @@ export type ChangeHandler = (arg1: {
63
98
  currentValue?: string;
64
99
  selected?: number;
65
100
  plot?: any;
66
- graph?: InteractiveGraphState;
101
+ graph?: PerseusGraphType;
67
102
  }, callback?: () => unknown | null | undefined, silent?: boolean) => unknown;
68
103
  export type ImageUploader = (file: File, callback: (url: string) => unknown) => unknown;
69
104
  export type WidgetSize = "normal" | "small" | "mini";
@@ -75,7 +110,7 @@ type TrackInteractionArgs = {
75
110
  correct?: boolean;
76
111
  } & Partial<TrackingGradedGroupExtraArguments> & Partial<TrackingSequenceExtraArguments>;
77
112
  export declare const MafsGraphTypeFlags: readonly ["angle", "segment", "linear", "linear-system", "ray", "polygon", "circle", "quadratic", "sinusoid", "point", "unlimited-point", "none"];
78
- export declare const InteractiveGraphLockedFeaturesFlags: readonly ["interactive-graph-locked-features-labels", "locked-point-labels", "locked-line-labels", "locked-vector-labels", "locked-ellipse-labels", "locked-function-labels"];
113
+ export declare const InteractiveGraphLockedFeaturesFlags: readonly ["interactive-graph-locked-features-labels", "locked-figures-aria", "locked-point-labels", "locked-line-labels", "locked-vector-labels", "locked-ellipse-labels", "locked-polygon-labels", "locked-function-labels"];
79
114
  /**
80
115
  * APIOptions provides different ways to customize the behaviour of Perseus.
81
116
  *
@@ -317,7 +352,7 @@ export type TrackingSequenceExtraArguments = {
317
352
  export type Alignment = "default" | "block" | "inline-block" | "inline" | "float-left" | "float-right" | "full-width";
318
353
  type WidgetOptions = any;
319
354
  export type WidgetTransform = (arg1: WidgetOptions, strings: PerseusStrings, problemNumber?: number) => any;
320
- export type WidgetExports<T extends React.ComponentType<any> = React.ComponentType<any>> = Readonly<{
355
+ export type WidgetExports<T extends React.ComponentType<any> & Widget = React.ComponentType<any>> = Readonly<{
321
356
  name: string;
322
357
  displayName: string;
323
358
  getWidget?: () => T;
@@ -366,7 +401,7 @@ export type WidgetProps<RenderProps, Rubric, TrackingExtraArgs = Empty> = Render
366
401
  questionCompleted?: boolean;
367
402
  onFocus: (blurPath: FocusPath) => void;
368
403
  onBlur: (blurPath: FocusPath) => void;
369
- findWidgets: (arg1: FilterCriterion) => ReadonlyArray<Widget>;
404
+ findWidgets: (criterion: FilterCriterion) => ReadonlyArray<Widget>;
370
405
  reviewModeRubric: Rubric;
371
406
  onChange: ChangeHandler;
372
407
  trackInteraction: (extraData?: TrackingExtraArgs) => void;
package/dist/util.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as GraphieUtil from "./util.graphie";
2
2
  import type { Range } from "./perseus-types";
3
3
  import type { PerseusStrings } from "./strings";
4
- import type { Widget, PerseusScore } from "./types";
4
+ import type { PerseusScore } from "./types";
5
5
  import type { KEScore } from "@khanacademy/perseus-core";
6
6
  import type * as React from "react";
7
7
  type WordPosition = {
@@ -152,12 +152,6 @@ declare function updateQueryString(uri: string, key: string, value: string): str
152
152
  * CC-BY-SA 2.5 license.
153
153
  */
154
154
  declare function strongEncodeURIComponent(str: string): string;
155
- /**
156
- * TODO(somewhatabstract, JIRA-XXXX):
157
- * This does not appear to be used within webapp. Could be dead code.
158
- * Need to check with mobile.
159
- */
160
- declare function widgetShouldHighlight(widget: Widget): boolean;
161
155
  /**
162
156
  * If a widget says that it is empty once it is graded.
163
157
  * Trying to encapsulate references to the score format.
@@ -225,7 +219,6 @@ declare const Util: {
225
219
  readonly parseQueryString: typeof parseQueryString;
226
220
  readonly updateQueryString: typeof updateQueryString;
227
221
  readonly strongEncodeURIComponent: typeof strongEncodeURIComponent;
228
- readonly widgetShouldHighlight: typeof widgetShouldHighlight;
229
222
  readonly scoreIsEmpty: typeof scoreIsEmpty;
230
223
  readonly touchHandlers: TouchHandlers;
231
224
  readonly resetTouchHandlers: typeof resetTouchHandlers;
@@ -1,8 +1,10 @@
1
1
  import type { Coord } from "./interactive2/types";
2
- import type { PerseusCategorizerWidgetOptions, PerseusCSProgramWidgetOptions, PerseusDefinitionWidgetOptions, PerseusDropdownWidgetOptions, PerseusExplanationWidgetOptions, PerseusExpressionWidgetOptions, PerseusGradedGroupSetWidgetOptions, PerseusGradedGroupWidgetOptions, PerseusGrapherWidgetOptions, PerseusGraphType, PerseusIFrameWidgetOptions, PerseusImageWidgetOptions, PerseusInputNumberWidgetOptions, PerseusInteractionWidgetOptions, PerseusLabelImageWidgetOptions, PerseusMatcherWidgetOptions, PerseusMatrixWidgetOptions, PerseusNumberLineWidgetOptions, PerseusNumericInputWidgetOptions, PerseusOrdererWidgetOptions, PerseusPassageRefWidgetOptions, PerseusPassageWidgetOptions, PerseusPlotterWidgetOptions, PerseusRadioWidgetOptions, PerseusSorterWidgetOptions, PerseusTableWidgetOptions, PerseusVideoWidgetOptions } from "./perseus-types";
2
+ import type { PerseusCategorizerWidgetOptions, PerseusCSProgramWidgetOptions, PerseusDefinitionWidgetOptions, PerseusDropdownWidgetOptions, PerseusExplanationWidgetOptions, PerseusExpressionAnswerForm, PerseusGradedGroupSetWidgetOptions, PerseusGradedGroupWidgetOptions, PerseusGrapherWidgetOptions, PerseusGraphType, PerseusIFrameWidgetOptions, PerseusImageWidgetOptions, PerseusInputNumberWidgetOptions, PerseusInteractionWidgetOptions, PerseusLabelImageWidgetOptions, PerseusMatcherWidgetOptions, PerseusMatrixWidgetOptions, PerseusNumberLineWidgetOptions, PerseusNumericInputWidgetOptions, PerseusOrdererWidgetOptions, PerseusPassageRefWidgetOptions, PerseusPassageWidgetOptions, PerseusPlotterWidgetOptions, PerseusRadioWidgetOptions, PerseusSorterWidgetOptions, PerseusTableWidgetOptions, PerseusVideoWidgetOptions } from "./perseus-types";
3
3
  import type { InteractiveMarkerType } from "./widgets/label-image/types";
4
4
  import type { Relationship } from "./widgets/number-line/number-line";
5
5
  export type UserInputStatus = "correct" | "incorrect" | "incomplete";
6
+ export type EmptyUserInput = Empty;
7
+ export type NullUserInput = null;
6
8
  export type PerseusCategorizerRubric = PerseusCategorizerWidgetOptions;
7
9
  export type PerseusCategorizerUserInput = {
8
10
  values: ReadonlyArray<number>;
@@ -13,14 +15,15 @@ export type PerseusCSProgramUserInput = {
13
15
  message: string | null;
14
16
  };
15
17
  export type PerseusDefinitionRubric = PerseusDefinitionWidgetOptions;
16
- export type PerseusDefinitionUserInput = Empty;
17
18
  export type PerseusDropdownRubric = PerseusDropdownWidgetOptions;
18
19
  export type PerseusDropdownUserInput = {
19
20
  value: number;
20
21
  };
21
22
  export type PerseusExplanationRubric = PerseusExplanationWidgetOptions;
22
- export type PerseusExplanationUserInput = Empty;
23
- export type PerseusExpressionRubric = PerseusExpressionWidgetOptions;
23
+ export type PerseusExpressionRubric = {
24
+ answerForms: ReadonlyArray<PerseusExpressionAnswerForm>;
25
+ functions: ReadonlyArray<string>;
26
+ };
24
27
  export type PerseusExpressionUserInput = string;
25
28
  export type PerseusGradedGroupRubric = PerseusGradedGroupWidgetOptions;
26
29
  export type PerseusGradedGroupSetRubric = PerseusGradedGroupSetWidgetOptions;
@@ -40,13 +43,11 @@ export type PerseusIFrameUserInput = {
40
43
  message: string | null;
41
44
  };
42
45
  export type PerseusImageRubric = PerseusImageWidgetOptions;
43
- export type PerseusImageUserInput = null;
44
46
  export type PerseusInputNumberRubric = PerseusInputNumberWidgetOptions;
45
47
  export type PerseusInputNumberUserInput = {
46
48
  currentValue: string;
47
49
  };
48
50
  export type PerseusInteractionRubric = PerseusInteractionWidgetOptions;
49
- export type PerseusInteractionUserInput = Empty;
50
51
  export type PerseusInteractiveGraphRubric = {
51
52
  correct: PerseusGraphType;
52
53
  graph: PerseusGraphType;
@@ -85,11 +86,7 @@ export type PerseusOrdererUserInput = {
85
86
  current: ReadonlyArray<string>;
86
87
  };
87
88
  export type PerseusPassageRubric = PerseusPassageWidgetOptions;
88
- export type PerseusPassageUserInput = null;
89
89
  export type PerseusPassageRefRubric = PerseusPassageRefWidgetOptions;
90
- export type PerseusPassageRefUserInput = null;
91
- export type PerseusPassageRefTargetUserInput = null;
92
- export type PerseusPhetSimulationUserInput = null;
93
90
  export type PerseusPlotterRubric = PerseusPlotterWidgetOptions;
94
91
  export type PerseusPlotterUserInput = ReadonlyArray<number>;
95
92
  export type PerseusRadioRubric = PerseusRadioWidgetOptions;
@@ -108,4 +105,4 @@ export type PerseusSorterUserInput = {
108
105
  export type PerseusTableRubric = PerseusTableWidgetOptions;
109
106
  export type PerseusTableUserInput = ReadonlyArray<ReadonlyArray<string>>;
110
107
  export type PerseusVideoRubric = PerseusVideoWidgetOptions;
111
- export type UserInput = PerseusCategorizerUserInput | PerseusCSProgramUserInput | PerseusDefinitionUserInput | PerseusDropdownUserInput | PerseusExplanationUserInput | PerseusExpressionUserInput | PerseusGrapherUserInput | PerseusIFrameUserInput | PerseusImageUserInput | PerseusInputNumberUserInput | PerseusInteractionUserInput | PerseusInteractiveGraphUserInput | PerseusLabelImageUserInput | PerseusMatcherUserInput | PerseusMatrixUserInput | PerseusMoleculeUserInput | PerseusNumberLineUserInput | PerseusNumericInputUserInput | PerseusOrdererUserInput | PerseusPlotterUserInput | PerseusRadioUserInput | PerseusSorterUserInput | PerseusTableUserInput;
108
+ export type UserInput = PerseusCategorizerUserInput | PerseusCSProgramUserInput | PerseusDropdownUserInput | PerseusExpressionUserInput | PerseusGrapherUserInput | PerseusIFrameUserInput | PerseusInputNumberUserInput | PerseusInteractiveGraphUserInput | PerseusLabelImageUserInput | PerseusMatcherUserInput | PerseusMatrixUserInput | PerseusMoleculeUserInput | PerseusNumberLineUserInput | PerseusNumericInputUserInput | PerseusOrdererUserInput | PerseusPlotterUserInput | PerseusRadioUserInput | PerseusSorterUserInput | PerseusTableUserInput | EmptyUserInput;
@@ -2,7 +2,7 @@ import * as React from "react";
2
2
  import { PerseusI18nContext } from "../../components/i18n-context";
3
3
  import type { PerseusCategorizerWidgetOptions } from "../../perseus-types";
4
4
  import type { PerseusStrings } from "../../strings";
5
- import type { PerseusScore, WidgetProps } from "../../types";
5
+ import type { PerseusScore, Widget, WidgetProps } from "../../types";
6
6
  import type { PerseusCategorizerRubric, PerseusCategorizerUserInput } from "../../validation.types";
7
7
  type Props = WidgetProps<RenderProps, PerseusCategorizerRubric> & {
8
8
  values: ReadonlyArray<string>;
@@ -16,7 +16,7 @@ type DefaultProps = {
16
16
  type State = {
17
17
  uniqueId: string;
18
18
  };
19
- export declare class Categorizer extends React.Component<Props, State> {
19
+ export declare class Categorizer extends React.Component<Props, State> implements Widget {
20
20
  static contextType: React.Context<{
21
21
  strings: PerseusStrings;
22
22
  locale: string;
@@ -0,0 +1,3 @@
1
+ import type { PerseusScore } from "../../types";
2
+ import type { PerseusCSProgramUserInput } from "../../validation.types";
3
+ export declare function csProgramValidator(state: PerseusCSProgramUserInput): PerseusScore;
@@ -3,7 +3,7 @@
3
3
  */
4
4
  import * as React from "react";
5
5
  import type { PerseusCSProgramWidgetOptions } from "../../perseus-types";
6
- import type { PerseusScore, WidgetProps } from "../../types";
6
+ import type { PerseusScore, Widget, WidgetProps } from "../../types";
7
7
  import type { PerseusCSProgramRubric, PerseusCSProgramUserInput, UserInputStatus } from "../../validation.types";
8
8
  type RenderProps = PerseusCSProgramWidgetOptions & {
9
9
  status: UserInputStatus;
@@ -16,14 +16,15 @@ type DefaultProps = {
16
16
  status: Props["status"];
17
17
  message: Props["message"];
18
18
  };
19
- declare class CSProgram extends React.Component<Props> {
19
+ declare class CSProgram extends React.Component<Props> implements Widget {
20
20
  static defaultProps: DefaultProps;
21
- static validate(state: PerseusCSProgramUserInput, rubric: any): PerseusScore;
21
+ static validate(state: PerseusCSProgramUserInput): PerseusScore;
22
22
  componentDidMount(): void;
23
23
  componentWillUnmount(): void;
24
24
  handleMessageEvent: (arg1: any) => void;
25
25
  change: (...args: ReadonlyArray<unknown>) => any;
26
- simpleValidate(rubric: any): PerseusScore;
26
+ getUserInput(): PerseusCSProgramUserInput;
27
+ simpleValidate(): PerseusScore;
27
28
  render(): React.ReactNode;
28
29
  }
29
30
  declare const _default: Readonly<{
@@ -1,8 +1,8 @@
1
1
  import * as React from "react";
2
2
  import { PerseusI18nContext } from "../../components/i18n-context";
3
3
  import type { PerseusRenderer, PerseusDefinitionWidgetOptions } from "../../perseus-types";
4
- import type { WidgetProps } from "../../types";
5
- import type { PerseusDefinitionRubric, PerseusDefinitionUserInput } from "../../validation.types";
4
+ import type { Widget, WidgetProps } from "../../types";
5
+ import type { EmptyUserInput, PerseusDefinitionRubric } from "../../validation.types";
6
6
  type RenderProps = PerseusDefinitionWidgetOptions;
7
7
  type DefinitionProps = WidgetProps<RenderProps, PerseusDefinitionRubric> & {
8
8
  widgets: PerseusRenderer["widgets"];
@@ -11,7 +11,7 @@ type DefaultProps = {
11
11
  togglePrompt: string;
12
12
  definition: string;
13
13
  };
14
- declare class Definition extends React.Component<DefinitionProps> {
14
+ declare class Definition extends React.Component<DefinitionProps> implements Widget {
15
15
  static contextType: React.Context<{
16
16
  strings: import("../../strings").PerseusStrings;
17
17
  locale: string;
@@ -19,7 +19,7 @@ declare class Definition extends React.Component<DefinitionProps> {
19
19
  context: React.ContextType<typeof PerseusI18nContext>;
20
20
  static defaultProps: DefaultProps;
21
21
  static validate(): import("../../types").PerseusScore;
22
- getUserInput(): PerseusDefinitionUserInput;
22
+ getUserInput(): EmptyUserInput;
23
23
  simpleValidate(): import("../../types").PerseusScore;
24
24
  render(): React.ReactNode;
25
25
  }
@@ -1,18 +1,17 @@
1
1
  import React from "react";
2
2
  import { PerseusI18nContext } from "../../components/i18n-context";
3
- import type { PerseusScore } from "../../types";
3
+ import type { PerseusScore, Widget } from "../../types";
4
+ import type { EmptyUserInput } from "../../validation.types";
4
5
  type Props = any;
5
- type Rubric = any;
6
- type UserInput = Empty;
7
- declare class DeprecatedStandin extends React.Component<Props> {
6
+ declare class DeprecatedStandin extends React.Component<Props> implements Widget {
8
7
  static contextType: React.Context<{
9
8
  strings: import("../../strings").PerseusStrings;
10
9
  locale: string;
11
10
  }>;
12
11
  context: React.ContextType<typeof PerseusI18nContext>;
13
- static validate(userInput: UserInput, rubric: Rubric): PerseusScore;
14
- getUserInput: () => UserInput;
15
- simpleValidate: (arg1: Rubric) => PerseusScore;
12
+ static validate(): PerseusScore;
13
+ getUserInput(): EmptyUserInput;
14
+ simpleValidate(): PerseusScore;
16
15
  render(): React.JSX.Element;
17
16
  }
18
17
  declare const _default: Readonly<{
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- import type { PerseusScore, WidgetProps } from "../../types";
2
+ import type { PerseusScore, Widget, WidgetProps } from "../../types";
3
3
  import type { PerseusDropdownRubric, PerseusDropdownUserInput } from "../../validation.types";
4
4
  type Props = WidgetProps<RenderProps, PerseusDropdownRubric> & {
5
5
  selected: number;
@@ -10,7 +10,7 @@ type DefaultProps = {
10
10
  placeholder: Props["placeholder"];
11
11
  apiOptions: Props["apiOptions"];
12
12
  };
13
- declare class Dropdown extends React.Component<Props> {
13
+ declare class Dropdown extends React.Component<Props> implements Widget {
14
14
  static defaultProps: DefaultProps;
15
15
  static validate(userInput: PerseusDropdownUserInput, rubric: PerseusDropdownRubric): PerseusScore;
16
16
  focus: () => boolean;
@@ -1,8 +1,8 @@
1
1
  import * as React from "react";
2
2
  import { PerseusI18nContext } from "../../components/i18n-context";
3
3
  import type { PerseusExplanationWidgetOptions } from "../../perseus-types";
4
- import type { WidgetProps } from "../../types";
5
- import type { PerseusExplanationRubric, PerseusExplanationUserInput } from "../../validation.types";
4
+ import type { Widget, WidgetProps } from "../../types";
5
+ import type { EmptyUserInput, PerseusExplanationRubric } from "../../validation.types";
6
6
  type RenderProps = PerseusExplanationWidgetOptions;
7
7
  type Props = WidgetProps<RenderProps, PerseusExplanationRubric>;
8
8
  type DefaultProps = {
@@ -15,7 +15,7 @@ type DefaultProps = {
15
15
  type State = {
16
16
  expanded: boolean;
17
17
  };
18
- declare class Explanation extends React.Component<Props, State> {
18
+ declare class Explanation extends React.Component<Props, State> implements Widget {
19
19
  static contextType: React.Context<{
20
20
  strings: import("../../strings").PerseusStrings;
21
21
  locale: string;
@@ -29,7 +29,7 @@ declare class Explanation extends React.Component<Props, State> {
29
29
  componentWillUnmount(): void;
30
30
  change: (arg1: any, arg2: any, arg3: any) => any;
31
31
  _onClick: () => void;
32
- getUserInput(): PerseusExplanationUserInput;
32
+ getUserInput(): EmptyUserInput;
33
33
  simpleValidate(): import("../../types").PerseusScore;
34
34
  render(): React.ReactNode;
35
35
  }