@khanacademy/perseus 10.0.1 → 11.0.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @khanacademy/perseus
 
+## 11.0.0
+
+### Major Changes
+
+-   2af4f9fa: Switch from using ProvideKeypad in ArticleRenderer to passing the keypad element down instead
+
+### Patch Changes
+
+-   Updated dependencies [2af4f9fa]
+    -   @khanacademy/math-input@11.0.0
+    -   @khanacademy/perseus-core@1.0.0
+
+## 10.1.0
+
+### Minor Changes
+
+-   3078825a: Remove animation when math is first drawn on a page
+-   100fb7e5: Update design of image widget's caption
+
+### Patch Changes
+
+-   Updated dependencies [3f7be05a]
+-   Updated dependencies [810c7bd9]
+-   Updated dependencies [b161d004]
+-   Updated dependencies [a99a9ca4]
+    -   @khanacademy/math-input@10.1.1
+
 ## 10.0.1
 
 ### Patch Changes

package/dist/article-renderer.d.ts

@@ -6,6 +6,8 @@ import * as React from "react";
 import type { KeypadProps } from "./mixins/provide-keypad";
 import type { PerseusRenderer } from "./perseus-types";
 import type { APIOptions, PerseusDependenciesV2 } from "./types";
+import type { KeypadAPI } from "@khanacademy/math-input";
+import type { KeypadContextRendererInterface } from "@khanacademy/perseus-core";
 import type { LinterContextProps } from "@khanacademy/perseus-linter";
 type Props = {
     apiOptions: APIOptions;
@@ -16,6 +18,7 @@ type Props = {
     useNewStyles: boolean;
     linterContext: LinterContextProps;
     legacyPerseusLint?: ReadonlyArray<string>;
+    keypadElement?: KeypadAPI | null | undefined;
     dependencies: PerseusDependenciesV2;
 } & KeypadProps;
 type DefaultProps = {
@@ -23,17 +26,12 @@ type DefaultProps = {
     useNewStyles: Props["useNewStyles"];
     linterContext: Props["linterContext"];
 };
-type State = {
-    keypadElement: any | null;
-};
-declare class ArticleRenderer extends React.Component<Props, State> {
+declare class ArticleRenderer extends React.Component<Props> implements KeypadContextRendererInterface {
     _currentFocus: any;
     static defaultProps: DefaultProps;
     constructor(props: Props);
     componentDidMount(): void;
-    shouldComponentUpdate(nextProps: Props, nextState: State): boolean;
-    componentWillUnmount(): void;
-    keypadElement: () => void;
+    shouldComponentUpdate(nextProps: Props): boolean;
     _handleFocusChange: (arg1: any, arg2: any) => void;
     _setCurrentFocus: (arg1: any) => void;
     _onRendererBlur: (arg1: any) => void;

package/dist/components/zoomable.d.ts

@@ -9,6 +9,7 @@ type Bounds = {
 type Props = {
     children: React.ReactNode;
     animateHeight: boolean;
+    disableEntranceAnimation: boolean;
     /**
      * Optional function that allows customizations in zooming.
      *
@@ -26,6 +27,7 @@ type DefaultProps = {
     animateHeight: Props["animateHeight"];
     computeChildBounds: Props["computeChildBounds"];
     readyToMeasure: Props["readyToMeasure"];
+    disableEntranceAnimation: Props["disableEntranceAnimation"];
 };
 type State = {
     visible: boolean;

package/dist/es/index.css

@@ -2799,9 +2799,35 @@ body.mobile .categorizer-container td.category input[type="radio"] + span:active
   top: calc(50% - 7px);
   margin-left: -20px;
 }
+.perseus-image-widget {
+  margin: 0;
+}
 .perseus-image-widget .perseus-image-title {
   text-align: center;
 }
+.perseus-image-widget .perseus-image-caption {
+  color: rgba(33, 36, 44, 0.7);
+  max-width: 420px;
+  padding-left: 16px;
+  position: relative;
+  top: -12px;
+}
+.perseus-image-widget .perseus-image-caption::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  margin-left: 4px;
+  width: 1px;
+  background-color: rgba(33, 36, 44, 0.5);
+  border: 1px solid rgba(33, 36, 44, 0.5);
+  border-radius: 2px;
+}
+.perseus-image-widget .perseus-image-caption .paragraph {
+  font-size: 14px;
+  padding-right: 12px;
+}
 .perseus-image-editor .label-settings td {
   padding: 5px 4px;
   text-align: center;