carbon-react 128.3.1 → 128.4.1

package/esm/components/dialog/dialog.component.d.ts

@@ -50,9 +50,9 @@ export interface DialogProps extends ModalProps, TagProps {
     closeButtonDataProps?: Pick<TagProps, "data-role" | "data-element">;
     /** Size of dialog, default size is 750px */
     size?: DialogSizes;
-    /** Subtitle displayed at top of dialog */
-    subtitle?: string;
-    /** Title displayed at top of dialog */
+    /** Subtitle displayed at top of dialog. Its consumers' responsibility to set a suitable accessible name/description for the Dialog if they pass a node to subtitle prop. */
+    subtitle?: React.ReactNode;
+    /** Title displayed at top of dialog. Its consumers' responsibility to set a suitable accessible name/description for the Dialog if they pass a node to title prop. */
     title?: React.ReactNode;
     /** The ARIA role to be applied to the Dialog container */
     role?: string;

package/esm/components/dialog/dialog.component.js

@@ -147,7 +147,7 @@ const Dialog = /*#__PURE__*/forwardRef(({
     size,
     dialogHeight,
     "aria-labelledby": title && typeof title === "string" ? titleId : rest["aria-labelledby"],
-    "aria-describedby": subtitle ? subtitleId : rest["aria-describedby"],
+    "aria-describedby": subtitle && typeof subtitle === "string" ? subtitleId : rest["aria-describedby"],
     "aria-label": rest["aria-label"]
   };
   const componentTags = {
@@ -247,7 +247,7 @@ if (process.env.NODE_ENV !== "production") {
     "role": PropTypes.string,
     "showCloseIcon": PropTypes.bool,
     "size": PropTypes.oneOf(["auto", "extra-large", "extra-small", "large", "medium-large", "medium-small", "medium", "small"]),
-    "subtitle": PropTypes.string,
+    "subtitle": PropTypes.node,
     "timeout": PropTypes.number,
     "title": PropTypes.node,
     "topModalOverride": PropTypes.bool

package/esm/components/dialog-full-screen/dialog-full-screen.component.d.ts

@@ -42,8 +42,8 @@ export interface DialogFullScreenProps extends ModalProps {
     showCloseIcon?: boolean;
     /** Data tag prop bag for close Button */
     closeButtonDataProps?: Pick<TagProps, "data-role" | "data-element">;
-    /** Subtitle displayed at top of dialog */
-    subtitle?: string;
+    /** Subtitle displayed at top of dialog. Its consumers' responsibility to set a suitable accessible name/description for the Dialog if they pass a node to subtitle prop. */
+    subtitle?: React.ReactNode;
     /** Title displayed at top of dialog */
     title?: React.ReactNode;
     /** The ARIA role to be applied to the DialogFullscreen container */

package/esm/components/dialog-full-screen/dialog-full-screen.component.js

@@ -77,7 +77,7 @@ export const DialogFullScreen = ({
   }) : title, headerChildren);
   const ariaProps = {
     "aria-labelledby": title && typeof title === "string" ? titleId : ariaLabelledBy,
-    "aria-describedby": subtitle ? subtitleId : ariaDescribedBy,
+    "aria-describedby": subtitle && typeof subtitle === "string" ? subtitleId : ariaDescribedBy,
     "aria-label": ariaLabel
   };
   const componentTags = {

package/esm/components/text-editor/text-editor.component.js

@@ -192,12 +192,12 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
   };
   const handleEditorFocus = useCallback(focusValue => {
     moveCursor.current = true;
-    setIsFocused(focusValue);
-    if (!isFocused && focusValue && typeof editor === "object" && editor.current !== document.activeElement) {
+    if (focusValue && typeof editor === "object" && editor.current !== document.activeElement) {
       editor.current?.focus();
       setFocusToolbar(false);
     }
-  }, [editor, isFocused]);
+    setIsFocused(focusValue);
+  }, [editor]);
   const handleInlineStyleChange = (ev, style) => {
     ev.preventDefault();
     setActiveInlines({

package/lib/components/dialog/dialog.component.d.ts

@@ -50,9 +50,9 @@ export interface DialogProps extends ModalProps, TagProps {
     closeButtonDataProps?: Pick<TagProps, "data-role" | "data-element">;
     /** Size of dialog, default size is 750px */
     size?: DialogSizes;
-    /** Subtitle displayed at top of dialog */
-    subtitle?: string;
-    /** Title displayed at top of dialog */
+    /** Subtitle displayed at top of dialog. Its consumers' responsibility to set a suitable accessible name/description for the Dialog if they pass a node to subtitle prop. */
+    subtitle?: React.ReactNode;
+    /** Title displayed at top of dialog. Its consumers' responsibility to set a suitable accessible name/description for the Dialog if they pass a node to title prop. */
     title?: React.ReactNode;
     /** The ARIA role to be applied to the Dialog container */
     role?: string;

package/lib/components/dialog/dialog.component.js

@@ -156,7 +156,7 @@ const Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
     size,
     dialogHeight,
     "aria-labelledby": title && typeof title === "string" ? titleId : rest["aria-labelledby"],
-    "aria-describedby": subtitle ? subtitleId : rest["aria-describedby"],
+    "aria-describedby": subtitle && typeof subtitle === "string" ? subtitleId : rest["aria-describedby"],
     "aria-label": rest["aria-label"]
   };
   const componentTags = {
@@ -256,7 +256,7 @@ if (process.env.NODE_ENV !== "production") {
     "role": _propTypes.default.string,
     "showCloseIcon": _propTypes.default.bool,
     "size": _propTypes.default.oneOf(["auto", "extra-large", "extra-small", "large", "medium-large", "medium-small", "medium", "small"]),
-    "subtitle": _propTypes.default.string,
+    "subtitle": _propTypes.default.node,
     "timeout": _propTypes.default.number,
     "title": _propTypes.default.node,
     "topModalOverride": _propTypes.default.bool

package/lib/components/dialog-full-screen/dialog-full-screen.component.d.ts

@@ -42,8 +42,8 @@ export interface DialogFullScreenProps extends ModalProps {
     showCloseIcon?: boolean;
     /** Data tag prop bag for close Button */
     closeButtonDataProps?: Pick<TagProps, "data-role" | "data-element">;
-    /** Subtitle displayed at top of dialog */
-    subtitle?: string;
+    /** Subtitle displayed at top of dialog. Its consumers' responsibility to set a suitable accessible name/description for the Dialog if they pass a node to subtitle prop. */
+    subtitle?: React.ReactNode;
     /** Title displayed at top of dialog */
     title?: React.ReactNode;
     /** The ARIA role to be applied to the DialogFullscreen container */

package/lib/components/dialog-full-screen/dialog-full-screen.component.js

@@ -86,7 +86,7 @@ const DialogFullScreen = ({
   }) : title, headerChildren);
   const ariaProps = {
     "aria-labelledby": title && typeof title === "string" ? titleId : ariaLabelledBy,
-    "aria-describedby": subtitle ? subtitleId : ariaDescribedBy,
+    "aria-describedby": subtitle && typeof subtitle === "string" ? subtitleId : ariaDescribedBy,
     "aria-label": ariaLabel
   };
   const componentTags = {

package/lib/components/text-editor/text-editor.component.js

@@ -201,12 +201,12 @@ const TextEditor = exports.TextEditor = /*#__PURE__*/_react.default.forwardRef((
   };
   const handleEditorFocus = (0, _react.useCallback)(focusValue => {
     moveCursor.current = true;
-    setIsFocused(focusValue);
-    if (!isFocused && focusValue && typeof editor === "object" && editor.current !== document.activeElement) {
+    if (focusValue && typeof editor === "object" && editor.current !== document.activeElement) {
       editor.current?.focus();
       setFocusToolbar(false);
     }
-  }, [editor, isFocused]);
+    setIsFocused(focusValue);
+  }, [editor]);
   const handleInlineStyleChange = (ev, style) => {
     ev.preventDefault();
     setActiveInlines({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "128.3.1",
+  "version": "128.4.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",