@khanacademy/wonder-blocks-modal 4.0.39 → 4.2.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @khanacademy/wonder-blocks-modal
 
+## 4.2.0
+
+### Minor Changes
+
+-   b7bae8f2: Add theming support to ModalPanel
+-   09c61d25: Add theming support to ModalHeader and ModalFooter
+
+## 4.1.0
+
+### Minor Changes
+
+-   1b21747a: Added theming support to ModalDialog, removed MediaLayout in favor of media queries
+
 ## 4.0.39
 
 ### Patch Changes

package/dist/components/modal-content.d.ts

@@ -8,16 +8,15 @@ type Props = {
     /** Optional styling to apply to the contents. */
     style?: StyleType;
 };
-type DefaultProps = {
-    scrollOverflow: Props["scrollOverflow"];
-};
 /**
  * The Modal content included after the header
  */
-export default class ModalContent extends React.Component<Props> {
-    static isClassOf(instance: any): boolean;
-    static defaultProps: DefaultProps;
-    static __IS_MODAL_CONTENT__: boolean;
-    render(): React.ReactNode;
+declare function ModalContent(props: Props): JSX.Element;
+declare namespace ModalContent {
+    var __IS_MODAL_CONTENT__: boolean;
+    var isComponentOf: (instance: any) => boolean;
+    var defaultProps: {
+        scrollOverflow: boolean;
+    };
 }
-export {};
+export default ModalContent;

package/dist/components/modal-dialog.d.ts

@@ -32,7 +32,7 @@ type Props = {
      */
     testId?: string;
     /**
-     * The ID of the content labelling this dialog, if applicable.
+     * The ID of the title labelling this dialog, if applicable.
      */
     "aria-labelledby"?: string;
     /**
@@ -40,21 +40,5 @@ type Props = {
      */
     "aria-describedby"?: string;
 };
-type DefaultProps = {
-    role: Props["role"];
-};
-/**
- * `ModalDialog` is a component that contains these elements:
- * - The visual dialog element itself (`<div role="dialog"/>`)
- * - The custom contents below and/or above the Dialog itself (e.g. decorative graphics).
- *
- * **Accessibility notes:**
- * - By default (e.g. using `OnePaneDialog`), `aria-labelledby` is populated automatically using the dialog title `id`.
- * - If there is a custom Dialog implementation (e.g. `TwoPaneDialog`), the dialog element doesn’t have to have
- * the `aria-labelledby` attribute however this is recommended. It should match the `id` of the dialog title.
- */
-export default class ModalDialog extends React.Component<Props> {
-    static defaultProps: DefaultProps;
-    render(): React.ReactNode;
-}
-export {};
+declare const ModalDialog: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export default ModalDialog;

package/dist/components/modal-footer.d.ts

@@ -19,9 +19,9 @@ type Props = {
  * </ModalFooter>
  * ```
  */
-export default class ModalFooter extends React.Component<Props> {
-    static isClassOf(instance: any): boolean;
-    static __IS_MODAL_FOOTER__: boolean;
-    render(): React.ReactNode;
+declare function ModalFooter({ children }: Props): JSX.Element;
+declare namespace ModalFooter {
+    var __IS_MODAL_FOOTER__: boolean;
+    var isComponentOf: (instance: any) => boolean;
 }
-export {};
+export default ModalFooter;

package/dist/components/modal-header.d.ts

@@ -40,9 +40,6 @@ type WithBreadcrumbs = Common & {
     breadcrumbs: React.ReactElement<React.ComponentProps<typeof Breadcrumbs>>;
 };
 type Props = Common | WithSubtitle | WithBreadcrumbs;
-type DefaultProps = {
-    light: Props["light"];
-};
 /**
  * This is a helper component that is never rendered by itself. It is always
  * pinned to the top of the dialog, is responsive using the same behavior as its
@@ -86,8 +83,10 @@ type DefaultProps = {
  *  />
  * ```
  */
-export default class ModalHeader extends React.Component<Props> {
-    static defaultProps: DefaultProps;
-    render(): React.ReactNode;
+declare function ModalHeader(props: Props): JSX.Element;
+declare namespace ModalHeader {
+    var defaultProps: {
+        light: boolean;
+    };
 }
-export {};
+export default ModalHeader;

package/dist/components/modal-panel.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { PropsFor } from "@khanacademy/wonder-blocks-core";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
 import ModalContent from "./modal-content";
 import ModalHeader from "./modal-header";
@@ -8,15 +9,15 @@ type Props = {
      * The main contents of the ModalPanel. All other parts of the panel
      * are positioned around it.
      */
-    content: React.ReactElement<React.ComponentProps<typeof ModalContent>> | React.ReactNode;
+    content: React.ReactElement<PropsFor<typeof ModalContent>> | React.ReactNode;
     /**
      * The modal header to show at the top of the panel.
      */
-    header?: React.ReactElement<React.ComponentProps<typeof ModalHeader>> | React.ReactNode;
+    header?: React.ReactElement<PropsFor<typeof ModalHeader>> | React.ReactNode;
     /**
      * A footer to show beneath the contents.
      */
-    footer?: React.ReactElement<React.ComponentProps<typeof ModalFooter>> | React.ReactNode;
+    footer?: React.ReactElement<PropsFor<typeof ModalFooter>> | React.ReactNode;
     /**
      * When true, the close button is shown; otherwise, the close button is not shown.
      */
@@ -51,13 +52,8 @@ type Props = {
      */
     testId?: string;
 };
-type DefaultProps = {
-    closeButtonVisible: Props["closeButtonVisible"];
-    scrollOverflow: Props["scrollOverflow"];
-    light: Props["light"];
-};
 /**
- * ModalPanel is  the content container.
+ * ModalPanel is the content container.
  *
  * **Implementation notes:**
  *
@@ -76,9 +72,12 @@ type DefaultProps = {
  * </ModalDialog>
  * ```
  */
-export default class ModalPanel extends React.Component<Props> {
-    static defaultProps: DefaultProps;
-    renderMainContent(): React.ReactNode;
-    render(): React.ReactNode;
+declare function ModalPanel({ closeButtonVisible, scrollOverflow, light, content, footer, header, onClose, style, testId, }: Props): JSX.Element;
+declare namespace ModalPanel {
+    var defaultProps: {
+        closeButtonVisible: boolean;
+        scrollOverflow: boolean;
+        light: boolean;
+    };
 }
-export {};
+export default ModalPanel;