@khanacademy/wonder-blocks-modal 5.1.17 → 6.0.1

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @khanacademy/wonder-blocks-modal
 
+## 6.0.1
+
+### Patch Changes
+
+-   0955be7e: - ModalBackdrop: Change initial focus behavior. Focus on the dismiss button (X) by default.
+
+    -   CloseButton: Override `:focus` styles on the dismiss button to make it visually distinct when the focus is set programmatically.
+
+-   Updated dependencies [f4abd572]
+-   Updated dependencies [0955be7e]
+    -   @khanacademy/wonder-blocks-core@9.0.0
+    -   @khanacademy/wonder-blocks-icon-button@6.0.1
+    -   @khanacademy/wonder-blocks-breadcrumbs@3.0.1
+    -   @khanacademy/wonder-blocks-layout@3.0.1
+    -   @khanacademy/wonder-blocks-typography@3.0.1
+
+## 6.0.0
+
+### Major Changes
+
+-   e6abdd17: Upgrade to React 18
+
+### Patch Changes
+
+-   Updated dependencies [e6abdd17]
+    -   @khanacademy/wonder-blocks-theming@3.0.0
+    -   @khanacademy/wonder-blocks-timing@6.0.0
+    -   @khanacademy/wonder-blocks-core@8.0.0
+    -   @khanacademy/wonder-blocks-breadcrumbs@3.0.0
+    -   @khanacademy/wonder-blocks-icon-button@6.0.0
+    -   @khanacademy/wonder-blocks-layout@3.0.0
+    -   @khanacademy/wonder-blocks-tokens@3.0.0
+    -   @khanacademy/wonder-blocks-typography@3.0.0
+
 ## 5.1.17
 
 ### Patch Changes

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

@@ -5,7 +5,8 @@ type Props = {
     onCloseModal: () => unknown;
     /**
      * The selector for the element that will be focused when the dialog shows.
-     * When not set, the first tabbable element within the dialog will be used.
+     * When not set, the first tabbable element within the dialog will be used,
+     * which usually is the dismiss button (X).
      */
     initialFocusId?: string;
     /**

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

@@ -11,7 +11,7 @@ type Props = {
 /**
  * The Modal content included after the header
  */
-declare function ModalContent(props: Props): JSX.Element;
+declare function ModalContent(props: Props): React.JSX.Element;
 declare namespace ModalContent {
     var __IS_MODAL_CONTENT__: boolean;
     var isComponentOf: (instance: any) => boolean;

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

@@ -19,7 +19,7 @@ type Props = {
  * </ModalFooter>
  * ```
  */
-declare function ModalFooter({ children }: Props): JSX.Element;
+declare function ModalFooter({ children }: Props): React.JSX.Element;
 declare namespace ModalFooter {
     var __IS_MODAL_FOOTER__: boolean;
     var isComponentOf: (instance: any) => boolean;

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

@@ -83,7 +83,7 @@ type Props = Common | WithSubtitle | WithBreadcrumbs;
  *  />
  * ```
  */
-declare function ModalHeader(props: Props): JSX.Element;
+declare function ModalHeader(props: Props): React.JSX.Element;
 declare namespace ModalHeader {
     var defaultProps: {
         light: boolean;

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

@@ -14,7 +14,7 @@ declare const _default: {
         readonly closedFocusId?: string | undefined;
         readonly opened?: boolean | undefined;
         readonly onClose?: (() => unknown) | undefined;
-    }): JSX.Element;
+    }): React.JSX.Element;
     displayName: string;
 };
 export default _default;

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

@@ -72,7 +72,7 @@ type Props = {
  * </ModalDialog>
  * ```
  */
-declare function ModalPanel({ closeButtonVisible, scrollOverflow, light, content, footer, header, onClose, style, testId, }: Props): JSX.Element;
+declare function ModalPanel({ closeButtonVisible, scrollOverflow, light, content, footer, header, onClose, style, testId, }: Props): React.JSX.Element;
 declare namespace ModalPanel {
     var defaultProps: {
         closeButtonVisible: boolean;

package/dist/es/index.js

@@ -26,7 +26,9 @@ const theme$1 = {
     }
   },
   border: {
-    radius: tokens.border.radius.medium_4
+    radius: tokens.border.radius.medium_4,
+    width: tokens.border.width.thin,
+    color: tokens.color.blue
   },
   spacing: {
     dialog: {
@@ -304,7 +306,7 @@ class FocusTrap extends React.Component {
 
 const ModalLauncherPortalAttributeName = "data-modal-launcher-portal";
 
-const FOCUSABLE_ELEMENTS = 'a[href], details, input, textarea, select, button:not([aria-label^="Close"])';
+const FOCUSABLE_ELEMENTS = "a[href], details, input, textarea, select, button";
 function findFocusableNodes(root) {
   return Array.from(root.querySelectorAll(FOCUSABLE_ELEMENTS));
 }
@@ -709,7 +711,14 @@ const themedStylesFn = theme => ({
     position: "absolute",
     right: theme.spacing.panel.closeButton,
     top: theme.spacing.panel.closeButton,
-    zIndex: 1
+    zIndex: 1,
+    ":focus": {
+      outlineWidth: theme.border.width,
+      outlineColor: theme.border.color,
+      outlineOffset: 1,
+      outlineStyle: "solid",
+      borderRadius: theme.border.radius
+    }
   },
   dark: {
     background: theme.color.bg.inverse,

package/dist/index.js

@@ -56,7 +56,9 @@ const theme$1 = {
     }
   },
   border: {
-    radius: tokens__namespace.border.radius.medium_4
+    radius: tokens__namespace.border.radius.medium_4,
+    width: tokens__namespace.border.width.thin,
+    color: tokens__namespace.color.blue
   },
   spacing: {
     dialog: {
@@ -334,7 +336,7 @@ class FocusTrap extends React__namespace.Component {
 
 const ModalLauncherPortalAttributeName = "data-modal-launcher-portal";
 
-const FOCUSABLE_ELEMENTS = 'a[href], details, input, textarea, select, button:not([aria-label^="Close"])';
+const FOCUSABLE_ELEMENTS = "a[href], details, input, textarea, select, button";
 function findFocusableNodes(root) {
   return Array.from(root.querySelectorAll(FOCUSABLE_ELEMENTS));
 }
@@ -739,7 +741,14 @@ const themedStylesFn = theme => ({
     position: "absolute",
     right: theme.spacing.panel.closeButton,
     top: theme.spacing.panel.closeButton,
-    zIndex: 1
+    zIndex: 1,
+    ":focus": {
+      outlineWidth: theme.border.width,
+      outlineColor: theme.border.color,
+      outlineOffset: 1,
+      outlineStyle: "solid",
+      borderRadius: theme.border.radius
+    }
   },
   dark: {
     background: theme.color.bg.inverse,

package/dist/themes/default.d.ts

@@ -13,6 +13,8 @@ declare const theme: {
     };
     border: {
         radius: number;
+        width: number;
+        color: string;
     };
     spacing: {
         dialog: {

package/dist/themes/khanmigo.d.ts

@@ -16,6 +16,8 @@ declare const theme: {
     };
     border: {
         radius: number;
+        width: number;
+        color: string;
     };
     spacing: {
         dialog: {

package/dist/themes/themed-modal-dialog.d.ts

@@ -23,6 +23,8 @@ export declare const ModalDialogThemeContext: React.Context<{
     };
     border: {
         radius: number;
+        width: number;
+        color: string;
     };
     spacing: {
         dialog: {
@@ -44,5 +46,5 @@ export declare const ModalDialogThemeContext: React.Context<{
  * ThemeModalDialog is a component that provides a theme to the <ModalDialog/>
  * component.
  */
-export default function ThemeModalDialog(props: Props): JSX.Element;
+export default function ThemeModalDialog(props: Props): React.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-modal",
-  "version": "5.1.17",
+  "version": "6.0.1",
   "design": "v2",
   "publishConfig": {
     "access": "public"
@@ -16,23 +16,23 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-breadcrumbs": "^2.2.8",
-    "@khanacademy/wonder-blocks-core": "^7.0.1",
-    "@khanacademy/wonder-blocks-icon-button": "^5.6.2",
-    "@khanacademy/wonder-blocks-layout": "^2.2.2",
-    "@khanacademy/wonder-blocks-theming": "^2.0.4",
-    "@khanacademy/wonder-blocks-timing": "^5.0.2",
-    "@khanacademy/wonder-blocks-tokens": "^2.1.0",
-    "@khanacademy/wonder-blocks-typography": "^2.1.16"
+    "@khanacademy/wonder-blocks-breadcrumbs": "^3.0.1",
+    "@khanacademy/wonder-blocks-core": "^9.0.0",
+    "@khanacademy/wonder-blocks-icon-button": "^6.0.1",
+    "@khanacademy/wonder-blocks-layout": "^3.0.1",
+    "@khanacademy/wonder-blocks-theming": "^3.0.0",
+    "@khanacademy/wonder-blocks-timing": "^6.0.0",
+    "@khanacademy/wonder-blocks-tokens": "^3.0.0",
+    "@khanacademy/wonder-blocks-typography": "^3.0.1"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",
     "aphrodite": "^1.2.5",
-    "react": "16.14.0",
-    "react-dom": "16.14.0"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@khanacademy/wonder-blocks-breadcrumbs": "^2.2.8",
-    "@khanacademy/wb-dev-build-settings": "^1.0.1"
+    "@khanacademy/wonder-blocks-breadcrumbs": "^3.0.1",
+    "@khanacademy/wb-dev-build-settings": "^2.0.0"
   }
 }