@khanacademy/perseus 77.9.0 → 77.10.1
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.
- package/dist/es/index.css +3 -3
- package/dist/es/index.css.map +1 -1
- package/dist/es/index.js +28 -26
- package/dist/es/index.js.map +1 -1
- package/dist/es/strings.js +1 -1
- package/dist/es/strings.js.map +1 -1
- package/dist/index.css +3 -3
- package/dist/index.css.map +1 -1
- package/dist/index.js +28 -26
- package/dist/index.js.map +1 -1
- package/dist/strings.d.ts +5 -1
- package/dist/strings.js +1 -1
- package/dist/strings.js.map +1 -1
- package/dist/testing/feature-flags-context.d.ts +7 -0
- package/dist/testing/use-storybook-api-options.d.ts +6 -0
- package/dist/widgets/image/utils.d.ts +14 -2
- package/dist/widgets/interactive-graphs/graphs/components/build-point-aria-label.d.ts +22 -0
- package/dist/widgets/interactive-graphs/graphs/components/movable-line.d.ts +9 -0
- package/dist/widgets/interactive-graphs/types.d.ts +75 -2
- package/package.json +56 -56
|
@@ -37,12 +37,24 @@ export declare const graphieImage2: {
|
|
|
37
37
|
};
|
|
38
38
|
export declare const graphieImageAlt = "An array of isosceles triangles. A triangle has height A. Two smaller triangle, one with height B and one with height C, have approximately the same combined height as A.";
|
|
39
39
|
export declare const graphieImage2Alt = "A picture graph shows the horizontal axis labeled Number of insects and the vertical axis labeled Types of insects. Each type of insect is listed along the vertical axis from bottom to top as follows: Beetle, Cricket, Ant, Mosquito, and Bee. The number of insects for each type of insect is represented by the number of pictures of ladybugs plotted on the graph. Beetle is represented by 5 pictures of ladybugs, Cricket is represented by 4 pictures of ladybugs, Ant is represented by 3 pictures of ladybugs, Mosquito is represented by 6 pictures of ladybugs, and Bee is represented by 3 pictures of ladybugs.";
|
|
40
|
-
export declare const
|
|
40
|
+
export declare const animatedGifLandscape: {
|
|
41
41
|
url: string;
|
|
42
42
|
width: number;
|
|
43
43
|
height: number;
|
|
44
44
|
};
|
|
45
|
-
export declare const
|
|
45
|
+
export declare const animatedGifLandscapeAlt = "A person on a skateboard moves back and forth across a concrete structure that forms the shape of a U.";
|
|
46
|
+
export declare const animatedGifPortrait: {
|
|
47
|
+
url: string;
|
|
48
|
+
width: number;
|
|
49
|
+
height: number;
|
|
50
|
+
};
|
|
51
|
+
export declare const animatedGifPortraitAlt = "A surreal illustration of Earth with a faucet attached, draining resources, above a wallet filled with currency, against a red background.";
|
|
52
|
+
export declare const nonAnimatedGif: {
|
|
53
|
+
url: string;
|
|
54
|
+
width: number;
|
|
55
|
+
height: number;
|
|
56
|
+
};
|
|
57
|
+
export declare const nonAnimatedGifAlt = "A black and white cat resting on a blanket on a couch, with its eyes closed and arms and legs tucked in.";
|
|
46
58
|
export declare const svgImage: {
|
|
47
59
|
url: string;
|
|
48
60
|
width: number;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import type { PerseusStrings } from "../../../../strings";
|
|
2
|
+
import type { vec } from "mafs";
|
|
3
|
+
export declare function resolvePointLabel(pointLabels: ReadonlyArray<string> | undefined, index: number): string | number;
|
|
4
|
+
/**
|
|
5
|
+
* Returns a screen-reader aria-label for an interactive point using a
|
|
6
|
+
* custom label (e.g. "T"). Returns `undefined` when no custom label
|
|
7
|
+
* is set so callers can fall back to the default label (e.g. "Point 1",
|
|
8
|
+
* "Point 2", ...) built by `useControlPoint`.
|
|
9
|
+
*
|
|
10
|
+
* Prefer `usePointAriaLabel` in React components — it binds `strings` and
|
|
11
|
+
* `locale` from `usePerseusI18n()` so call sites read `buildLabel(i, point)`.
|
|
12
|
+
* Use `buildPointAriaLabel` directly only from non-React functions (e.g.
|
|
13
|
+
* graph-description helpers) that already receive `strings` / `locale` as
|
|
14
|
+
* parameters and therefore can't use a hook.
|
|
15
|
+
*/
|
|
16
|
+
export declare function buildPointAriaLabel(pointLabels: ReadonlyArray<string> | undefined, index: number, point: vec.Vector2, strings: PerseusStrings, locale: string): string | undefined;
|
|
17
|
+
/**
|
|
18
|
+
* Hook that returns a point aria-label builder bound to the current locale
|
|
19
|
+
* and the given `pointLabels`. Returns `undefined` for points without a
|
|
20
|
+
* custom label so callers can fall back to default labels.
|
|
21
|
+
*/
|
|
22
|
+
export declare function usePointAriaLabel(pointLabels: ReadonlyArray<string> | undefined): (index: number, point: vec.Vector2) => string | undefined;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { vec } from "mafs";
|
|
2
2
|
import * as React from "react";
|
|
3
|
+
import type { AriaLive } from "../../types";
|
|
3
4
|
import type { Interval } from "mafs";
|
|
4
5
|
type Props = {
|
|
5
6
|
points: Readonly<[vec.Vector2, vec.Vector2]>;
|
|
@@ -9,6 +10,7 @@ type Props = {
|
|
|
9
10
|
grabHandleAriaLabel?: string;
|
|
10
11
|
};
|
|
11
12
|
ariaDescribedBy?: string;
|
|
13
|
+
ariaLive?: AriaLive;
|
|
12
14
|
extend?: {
|
|
13
15
|
start: boolean;
|
|
14
16
|
end: boolean;
|
|
@@ -24,4 +26,11 @@ export declare const getMovableLineKeyboardConstraint: (line: [vec.Vector2, vec.
|
|
|
24
26
|
right: vec.Vector2;
|
|
25
27
|
};
|
|
26
28
|
export declare function trimRange(range: [Interval, Interval], graphDimensionsInPixels: vec.Vector2): [Interval, Interval];
|
|
29
|
+
/**
|
|
30
|
+
* Returns `tip` pulled back toward `tail` by GRAPH_EDGE_INSET_PX, measured
|
|
31
|
+
* in pixel space (not graph units) so the inset looks the same regardless
|
|
32
|
+
* of axis scale. Used to keep arrowhead glyphs from being clipped by the
|
|
33
|
+
* viewport edge.
|
|
34
|
+
*/
|
|
35
|
+
export declare function insetTipAlongRay(tail: vec.Vector2, tip: vec.Vector2, range: [Interval, Interval], graphDimensionsInPixels: vec.Vector2): vec.Vector2;
|
|
27
36
|
export {};
|
|
@@ -19,7 +19,7 @@ export type InteractiveGraphState = AbsoluteValueGraphState | AngleGraphState |
|
|
|
19
19
|
export type UnlimitedGraphState = PointGraphState | PolygonGraphState;
|
|
20
20
|
type MovePointAnnouncement = {
|
|
21
21
|
type: "move-point";
|
|
22
|
-
|
|
22
|
+
pointLabel: string;
|
|
23
23
|
x: number;
|
|
24
24
|
y: number;
|
|
25
25
|
};
|
|
@@ -35,9 +35,82 @@ type MoveCenterAnnouncement = {
|
|
|
35
35
|
x: number;
|
|
36
36
|
y: number;
|
|
37
37
|
};
|
|
38
|
-
|
|
38
|
+
type MoveVectorPointAnnouncement = {
|
|
39
|
+
type: "move-vector-point";
|
|
40
|
+
pointIndex: number;
|
|
41
|
+
x: number;
|
|
42
|
+
y: number;
|
|
43
|
+
};
|
|
44
|
+
type MoveSegmentPointAnnouncement = {
|
|
45
|
+
type: "move-segment-point";
|
|
46
|
+
segmentIndex: number;
|
|
47
|
+
pointIndex: number;
|
|
48
|
+
pointLabel: string | number;
|
|
49
|
+
x: number;
|
|
50
|
+
y: number;
|
|
51
|
+
totalSegments: number;
|
|
52
|
+
};
|
|
53
|
+
type MoveSegmentLineAnnouncement = {
|
|
54
|
+
type: "move-segment-line";
|
|
55
|
+
coords: PairOfPoints;
|
|
56
|
+
};
|
|
57
|
+
type MoveLinearSystemPointAnnouncement = {
|
|
58
|
+
type: "move-linear-system-point";
|
|
59
|
+
lineIndex: number;
|
|
60
|
+
pointIndex: number;
|
|
61
|
+
pointLabel: string | number;
|
|
62
|
+
x: number;
|
|
63
|
+
y: number;
|
|
64
|
+
};
|
|
65
|
+
type MoveRayPointAnnouncement = {
|
|
66
|
+
type: "move-ray-point";
|
|
67
|
+
pointIndex: number;
|
|
68
|
+
pointLabel: string | number;
|
|
69
|
+
x: number;
|
|
70
|
+
y: number;
|
|
71
|
+
};
|
|
72
|
+
type MoveVectorLineAnnouncement = {
|
|
73
|
+
type: "move-vector-line";
|
|
74
|
+
coords: PairOfPoints;
|
|
75
|
+
};
|
|
76
|
+
type MoveLinearSystemLineAnnouncement = {
|
|
77
|
+
type: "move-linear-system-line";
|
|
78
|
+
lineIndex: number;
|
|
79
|
+
coords: PairOfPoints;
|
|
80
|
+
};
|
|
81
|
+
type MoveRayLineAnnouncement = {
|
|
82
|
+
type: "move-ray-line";
|
|
83
|
+
coords: PairOfPoints;
|
|
84
|
+
};
|
|
85
|
+
type MoveLinearLineAnnouncement = {
|
|
86
|
+
type: "move-linear-line";
|
|
87
|
+
coords: PairOfPoints;
|
|
88
|
+
};
|
|
89
|
+
type MoveSinusoidPointAnnouncement = {
|
|
90
|
+
type: "move-sinusoid-point";
|
|
91
|
+
pointIndex: number;
|
|
92
|
+
pointLabel: string | number;
|
|
93
|
+
x: number;
|
|
94
|
+
y: number;
|
|
95
|
+
otherY: number;
|
|
96
|
+
};
|
|
97
|
+
type MoveAnglePointAnnouncement = {
|
|
98
|
+
type: "move-angle-point";
|
|
99
|
+
pointIndex: number;
|
|
100
|
+
pointLabel: string | number;
|
|
101
|
+
x: number;
|
|
102
|
+
y: number;
|
|
103
|
+
angleMeasure: number;
|
|
104
|
+
};
|
|
105
|
+
type MovePolygonAnnouncement = {
|
|
106
|
+
type: "move-polygon";
|
|
107
|
+
coords: ReadonlyArray<Coord>;
|
|
108
|
+
pointLabels?: ReadonlyArray<string>;
|
|
109
|
+
};
|
|
110
|
+
export type InteractiveGraphStateAnnouncement = MovePointAnnouncement | MoveRadiusPointAnnouncement | MoveCenterAnnouncement | MoveVectorPointAnnouncement | MoveVectorLineAnnouncement | MoveSegmentPointAnnouncement | MoveSegmentLineAnnouncement | MoveLinearSystemPointAnnouncement | MoveLinearSystemLineAnnouncement | MoveRayPointAnnouncement | MoveRayLineAnnouncement | MoveLinearLineAnnouncement | MoveSinusoidPointAnnouncement | MoveAnglePointAnnouncement | MovePolygonAnnouncement;
|
|
39
111
|
export interface InteractiveGraphStateCommon {
|
|
40
112
|
hasBeenInteractedWith: boolean;
|
|
113
|
+
pointLabels?: string[];
|
|
41
114
|
range: [xRange: Interval, yRange: Interval];
|
|
42
115
|
snapStep: vec.Vector2;
|
|
43
116
|
stateAnnouncement?: InteractiveGraphStateAnnouncement;
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Core Perseus API (includes renderers and widgets)",
|
|
4
4
|
"author": "Khan Academy",
|
|
5
5
|
"license": "MIT",
|
|
6
|
-
"version": "77.
|
|
6
|
+
"version": "77.10.1",
|
|
7
7
|
"publishConfig": {
|
|
8
8
|
"access": "public"
|
|
9
9
|
},
|
|
@@ -20,16 +20,16 @@
|
|
|
20
20
|
"source": "src/index.ts",
|
|
21
21
|
"exports": {
|
|
22
22
|
".": {
|
|
23
|
-
"import": "./dist/es/index.js",
|
|
24
|
-
"require": "./dist/index.js",
|
|
25
23
|
"types": "./dist/index.d.ts",
|
|
26
|
-
"source": "./src/index.ts"
|
|
24
|
+
"source": "./src/index.ts",
|
|
25
|
+
"import": "./dist/es/index.js",
|
|
26
|
+
"require": "./dist/index.js"
|
|
27
27
|
},
|
|
28
28
|
"./strings": {
|
|
29
|
-
"import": "./dist/es/strings.js",
|
|
30
|
-
"require": "./dist/strings.js",
|
|
31
29
|
"types": "./dist/strings.d.ts",
|
|
32
|
-
"source": "./src/strings.ts"
|
|
30
|
+
"source": "./src/strings.ts",
|
|
31
|
+
"import": "./dist/es/strings.js",
|
|
32
|
+
"require": "./dist/strings.js"
|
|
33
33
|
},
|
|
34
34
|
"./styles.css": "./dist/index.css"
|
|
35
35
|
},
|
|
@@ -43,39 +43,39 @@
|
|
|
43
43
|
"tiny-invariant": "1.3.1",
|
|
44
44
|
"uuid": "^10.0.0",
|
|
45
45
|
"@khanacademy/kas": "2.2.3",
|
|
46
|
-
"@khanacademy/keypad-context": "3.2.
|
|
47
|
-
"@khanacademy/kmath": "2.4.
|
|
48
|
-
"@khanacademy/math-input": "26.4.
|
|
49
|
-
"@khanacademy/perseus-core": "27.
|
|
50
|
-
"@khanacademy/perseus-linter": "5.0.
|
|
51
|
-
"@khanacademy/perseus-score": "8.11.
|
|
46
|
+
"@khanacademy/keypad-context": "3.2.60",
|
|
47
|
+
"@khanacademy/kmath": "2.4.18",
|
|
48
|
+
"@khanacademy/math-input": "26.4.32",
|
|
49
|
+
"@khanacademy/perseus-core": "27.3.0",
|
|
50
|
+
"@khanacademy/perseus-linter": "5.0.15",
|
|
51
|
+
"@khanacademy/perseus-score": "8.11.2",
|
|
52
52
|
"@khanacademy/perseus-utils": "2.1.5",
|
|
53
53
|
"@khanacademy/pure-markdown": "2.2.8",
|
|
54
54
|
"@khanacademy/simple-markdown": "2.2.3"
|
|
55
55
|
},
|
|
56
56
|
"devDependencies": {
|
|
57
|
-
"@khanacademy/wonder-blocks-announcer": "1.1.
|
|
58
|
-
"@khanacademy/wonder-blocks-banner": "5.1.
|
|
59
|
-
"@khanacademy/wonder-blocks-button": "11.6.
|
|
60
|
-
"@khanacademy/wonder-blocks-clickable": "8.1
|
|
61
|
-
"@khanacademy/wonder-blocks-core": "12.4.
|
|
62
|
-
"@khanacademy/wonder-blocks-data": "15.0.
|
|
63
|
-
"@khanacademy/wonder-blocks-dropdown": "10.9.
|
|
64
|
-
"@khanacademy/wonder-blocks-form": "7.6.
|
|
65
|
-
"@khanacademy/wonder-blocks-icon": "5.3.
|
|
66
|
-
"@khanacademy/wonder-blocks-icon-button": "11.3.
|
|
67
|
-
"@khanacademy/wonder-blocks-labeled-field": "4.1.
|
|
68
|
-
"@khanacademy/wonder-blocks-layout": "3.1.
|
|
69
|
-
"@khanacademy/wonder-blocks-link": "10.
|
|
70
|
-
"@khanacademy/wonder-blocks-modal": "8.7.
|
|
71
|
-
"@khanacademy/wonder-blocks-pill": "3.1.
|
|
72
|
-
"@khanacademy/wonder-blocks-popover": "6.2
|
|
73
|
-
"@khanacademy/wonder-blocks-progress-spinner": "3.1.
|
|
74
|
-
"@khanacademy/wonder-blocks-switch": "3.4.
|
|
57
|
+
"@khanacademy/wonder-blocks-announcer": "1.1.1",
|
|
58
|
+
"@khanacademy/wonder-blocks-banner": "5.1.2",
|
|
59
|
+
"@khanacademy/wonder-blocks-button": "11.6.2",
|
|
60
|
+
"@khanacademy/wonder-blocks-clickable": "8.2.1",
|
|
61
|
+
"@khanacademy/wonder-blocks-core": "12.4.4",
|
|
62
|
+
"@khanacademy/wonder-blocks-data": "15.0.2",
|
|
63
|
+
"@khanacademy/wonder-blocks-dropdown": "10.9.2",
|
|
64
|
+
"@khanacademy/wonder-blocks-form": "7.6.2",
|
|
65
|
+
"@khanacademy/wonder-blocks-icon": "5.3.16",
|
|
66
|
+
"@khanacademy/wonder-blocks-icon-button": "11.3.2",
|
|
67
|
+
"@khanacademy/wonder-blocks-labeled-field": "4.1.2",
|
|
68
|
+
"@khanacademy/wonder-blocks-layout": "3.1.53",
|
|
69
|
+
"@khanacademy/wonder-blocks-link": "10.3.1",
|
|
70
|
+
"@khanacademy/wonder-blocks-modal": "8.7.2",
|
|
71
|
+
"@khanacademy/wonder-blocks-pill": "3.1.65",
|
|
72
|
+
"@khanacademy/wonder-blocks-popover": "6.3.2",
|
|
73
|
+
"@khanacademy/wonder-blocks-progress-spinner": "3.1.53",
|
|
74
|
+
"@khanacademy/wonder-blocks-switch": "3.4.2",
|
|
75
75
|
"@khanacademy/wonder-blocks-timing": "7.1.0",
|
|
76
|
-
"@khanacademy/wonder-blocks-tokens": "16.
|
|
77
|
-
"@khanacademy/wonder-blocks-tooltip": "4.1.
|
|
78
|
-
"@khanacademy/wonder-blocks-typography": "4.3.
|
|
76
|
+
"@khanacademy/wonder-blocks-tokens": "16.6.0",
|
|
77
|
+
"@khanacademy/wonder-blocks-tooltip": "4.1.77",
|
|
78
|
+
"@khanacademy/wonder-blocks-typography": "4.3.6",
|
|
79
79
|
"@khanacademy/wonder-stuff-core": "3.0.0",
|
|
80
80
|
"@phosphor-icons/core": "2.0.2",
|
|
81
81
|
"@popperjs/core": "2.10.2",
|
|
@@ -91,28 +91,28 @@
|
|
|
91
91
|
"raphael": "1.5.4"
|
|
92
92
|
},
|
|
93
93
|
"peerDependencies": {
|
|
94
|
-
"@khanacademy/wonder-blocks-announcer": "^1.1.
|
|
95
|
-
"@khanacademy/wonder-blocks-banner": "^5.1.
|
|
96
|
-
"@khanacademy/wonder-blocks-button": "^11.6.
|
|
97
|
-
"@khanacademy/wonder-blocks-clickable": "^8.1
|
|
98
|
-
"@khanacademy/wonder-blocks-core": "^12.4.
|
|
99
|
-
"@khanacademy/wonder-blocks-data": "^15.0.
|
|
100
|
-
"@khanacademy/wonder-blocks-dropdown": "^10.9.
|
|
101
|
-
"@khanacademy/wonder-blocks-form": "^7.6.
|
|
102
|
-
"@khanacademy/wonder-blocks-icon": "^5.3.
|
|
103
|
-
"@khanacademy/wonder-blocks-icon-button": "^11.3.
|
|
104
|
-
"@khanacademy/wonder-blocks-labeled-field": "^4.1.
|
|
105
|
-
"@khanacademy/wonder-blocks-layout": "^3.1.
|
|
106
|
-
"@khanacademy/wonder-blocks-link": "^10.
|
|
107
|
-
"@khanacademy/wonder-blocks-modal": "^8.7.
|
|
108
|
-
"@khanacademy/wonder-blocks-pill": "^3.1.
|
|
109
|
-
"@khanacademy/wonder-blocks-popover": "^6.2
|
|
110
|
-
"@khanacademy/wonder-blocks-progress-spinner": "^3.1.
|
|
111
|
-
"@khanacademy/wonder-blocks-switch": "^3.4.
|
|
94
|
+
"@khanacademy/wonder-blocks-announcer": "^1.1.1",
|
|
95
|
+
"@khanacademy/wonder-blocks-banner": "^5.1.2",
|
|
96
|
+
"@khanacademy/wonder-blocks-button": "^11.6.2",
|
|
97
|
+
"@khanacademy/wonder-blocks-clickable": "^8.2.1",
|
|
98
|
+
"@khanacademy/wonder-blocks-core": "^12.4.4",
|
|
99
|
+
"@khanacademy/wonder-blocks-data": "^15.0.2",
|
|
100
|
+
"@khanacademy/wonder-blocks-dropdown": "^10.9.2",
|
|
101
|
+
"@khanacademy/wonder-blocks-form": "^7.6.2",
|
|
102
|
+
"@khanacademy/wonder-blocks-icon": "^5.3.16",
|
|
103
|
+
"@khanacademy/wonder-blocks-icon-button": "^11.3.2",
|
|
104
|
+
"@khanacademy/wonder-blocks-labeled-field": "^4.1.2",
|
|
105
|
+
"@khanacademy/wonder-blocks-layout": "^3.1.53",
|
|
106
|
+
"@khanacademy/wonder-blocks-link": "^10.3.1",
|
|
107
|
+
"@khanacademy/wonder-blocks-modal": "^8.7.2",
|
|
108
|
+
"@khanacademy/wonder-blocks-pill": "^3.1.65",
|
|
109
|
+
"@khanacademy/wonder-blocks-popover": "^6.3.2",
|
|
110
|
+
"@khanacademy/wonder-blocks-progress-spinner": "^3.1.53",
|
|
111
|
+
"@khanacademy/wonder-blocks-switch": "^3.4.2",
|
|
112
112
|
"@khanacademy/wonder-blocks-timing": "^7.1.0",
|
|
113
|
-
"@khanacademy/wonder-blocks-tokens": "^16.
|
|
114
|
-
"@khanacademy/wonder-blocks-tooltip": "^4.1.
|
|
115
|
-
"@khanacademy/wonder-blocks-typography": "^4.3.
|
|
113
|
+
"@khanacademy/wonder-blocks-tokens": "^16.6.0",
|
|
114
|
+
"@khanacademy/wonder-blocks-tooltip": "^4.1.77",
|
|
115
|
+
"@khanacademy/wonder-blocks-typography": "^4.3.6",
|
|
116
116
|
"@khanacademy/wonder-stuff-core": "^3.0.0",
|
|
117
117
|
"@phosphor-icons/core": "^2.0.2",
|
|
118
118
|
"@popperjs/core": "^2.10.2",
|
|
@@ -127,7 +127,7 @@
|
|
|
127
127
|
},
|
|
128
128
|
"keywords": [],
|
|
129
129
|
"khan": {
|
|
130
|
-
"catalogHash": "
|
|
130
|
+
"catalogHash": "8560a5ad63db87f8"
|
|
131
131
|
},
|
|
132
132
|
"scripts": {}
|
|
133
133
|
}
|