@khanacademy/wonder-blocks-modal 6.0.0 → 7.0.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @khanacademy/wonder-blocks-modal
 
+## 7.0.0
+
+### Major Changes
+
+-   56d961f1: - Migrate Wonder Blocks components off old id providers and onto new `Id` component
+
+### Patch Changes
+
+-   b6009b77: Deprecate the ID provider and unique ID utilities
+-   Updated dependencies [b6009b77]
+-   Updated dependencies [897686bc]
+-   Updated dependencies [56d961f1]
+    -   @khanacademy/wonder-blocks-core@10.0.0
+    -   @khanacademy/wonder-blocks-breadcrumbs@3.0.2
+    -   @khanacademy/wonder-blocks-icon-button@6.0.2
+    -   @khanacademy/wonder-blocks-layout@3.0.2
+    -   @khanacademy/wonder-blocks-typography@3.0.2
+
+## 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

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-header.d.ts

@@ -55,7 +55,8 @@ type Props = Common | WithSubtitle | WithBreadcrumbs;
  *   ModalHeader doesn’t have to have the `titleId` prop however this is
  *   recommended. It should match the `aria-labelledby` prop of the
  *   [ModalDialog](/#modaldialog) component. If you want to see an example of
- *   how to generate this ID, check [IDProvider](/#idprovider).
+ *   how to generate this ID look at the `React.useId` hook documentation, o
+ *   check [Id](/#id).
  *
  * **Implementation notes:**
  *

package/dist/es/index.js

@@ -1,6 +1,6 @@
 import _extends from '@babel/runtime/helpers/extends';
 import * as React from 'react';
-import { View, IDProvider } from '@khanacademy/wonder-blocks-core';
+import { View, Id } from '@khanacademy/wonder-blocks-core';
 import { mergeTheme, createThemeContext, ThemeSwitcherContext, useScopedTheme, useStyles } from '@khanacademy/wonder-blocks-theming';
 import * as tokens from '@khanacademy/wonder-blocks-tokens';
 import { color, spacing } from '@khanacademy/wonder-blocks-tokens';
@@ -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,
@@ -768,9 +777,8 @@ class OnePaneDialog extends React.Component {
       styleSheets: styleSheets
     }, ({
       styles
-    }) => React.createElement(IDProvider, {
-      id: titleId,
-      scope: "modal"
+    }) => React.createElement(Id, {
+      id: titleId
     }, uniqueId => React.createElement(ModalDialog, {
       style: [styles.dialog, style],
       above: above,

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,
@@ -798,9 +807,8 @@ class OnePaneDialog extends React__namespace.Component {
       styleSheets: styleSheets
     }, ({
       styles
-    }) => React__namespace.createElement(wonderBlocksCore.IDProvider, {
-      id: titleId,
-      scope: "modal"
+    }) => React__namespace.createElement(wonderBlocksCore.Id, {
+      id: titleId
     }, uniqueId => React__namespace.createElement(ModalDialog, {
       style: [styles.dialog, style],
       above: above,

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: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-modal",
-  "version": "6.0.0",
+  "version": "7.0.0",
   "design": "v2",
   "publishConfig": {
     "access": "public"
@@ -16,14 +16,14 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-breadcrumbs": "^3.0.0",
-    "@khanacademy/wonder-blocks-core": "^8.0.0",
-    "@khanacademy/wonder-blocks-icon-button": "^6.0.0",
-    "@khanacademy/wonder-blocks-layout": "^3.0.0",
+    "@khanacademy/wonder-blocks-breadcrumbs": "^3.0.2",
+    "@khanacademy/wonder-blocks-core": "^10.0.0",
+    "@khanacademy/wonder-blocks-icon-button": "^6.0.2",
+    "@khanacademy/wonder-blocks-layout": "^3.0.2",
     "@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.0"
+    "@khanacademy/wonder-blocks-typography": "^3.0.2"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",
@@ -32,7 +32,7 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@khanacademy/wonder-blocks-breadcrumbs": "^3.0.0",
+    "@khanacademy/wonder-blocks-breadcrumbs": "^3.0.2",
     "@khanacademy/wb-dev-build-settings": "^2.0.0"
   }
 }