@kaizen/components 1.45.1 → 1.45.2

package/dist/types/packages/components/src/RichTextEditor/RichTextEditor/RichTextEditor.d.ts

@@ -3,6 +3,7 @@ import { OverrideClassName } from "../../types/OverrideClassName";
 import { ToolbarItems, EditorContentArray, EditorRows } from "../types";
 import { ProseMirrorState } from "../utils/prosemirror";
 type BaseRichTextEditorProps = {
+    id?: string;
     onChange: (content: ProseMirrorState.EditorState) => void;
     defaultValue: EditorContentArray;
     controls?: ToolbarItems[];
@@ -37,7 +38,7 @@ export type RichTextEditorProps = BaseRichTextEditorProps & (WithLabelText | Wit
  * {@link https://cultureamp.design/?path=/docs/components-richtexteditor--docs Storybook}
  */
 export declare const RichTextEditor: {
-    ({ onChange, defaultValue, labelText, "aria-labelledby": labelledBy, "aria-describedby": describedBy, classNameOverride, controls, rows, dataError, onDataError, validationMessage, description, status, ...restProps }: RichTextEditorProps): JSX.Element;
+    ({ id, onChange, defaultValue, labelText, "aria-labelledby": labelledBy, "aria-describedby": describedBy, classNameOverride, controls, rows, dataError, onDataError, validationMessage, description, status, ...restProps }: RichTextEditorProps): JSX.Element;
     displayName: string;
 };
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.45.1",
+  "version": "1.45.2",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -109,8 +109,8 @@
     "ts-node": "^10.9.2",
     "ts-patch": "^3.1.2",
     "typescript-transform-paths": "^3.4.7",
-    "@kaizen/design-tokens": "10.3.20",
-    "@kaizen/tailwind": "1.2.6"
+    "@kaizen/tailwind": "1.2.6",
+    "@kaizen/design-tokens": "10.3.20"
   },
   "peerDependencies": {
     "@cultureamp/i18n-react-intl": "^2.5.6",

package/src/RichTextEditor/RichTextEditor/RichTextEditor.tsx

@@ -30,6 +30,7 @@ import { buildKeymap } from "./utils/keymap"
 import styles from "./RichTextEditor.module.scss"
 
 type BaseRichTextEditorProps = {
+  id?: string
   onChange: (content: ProseMirrorState.EditorState) => void
   defaultValue: EditorContentArray
   controls?: ToolbarItems[]
@@ -70,6 +71,7 @@ export type RichTextEditorProps = BaseRichTextEditorProps &
  * {@link https://cultureamp.design/?path=/docs/components-richtexteditor--docs Storybook}
  */
 export const RichTextEditor = ({
+  id,
   onChange,
   defaultValue,
   labelText,
@@ -85,12 +87,13 @@ export const RichTextEditor = ({
   status = "default",
   ...restProps
 }: RichTextEditorProps): JSX.Element => {
-  const reactId = useId()
+  const generatedId = useId()
   const [schema] = useState<ProseMirrorModel.Schema>(
     createSchemaFromControls(controls)
   )
-  const [labelId] = useState<string>(labelledBy || reactId)
-  const [editorId] = useState<string>(reactId)
+
+  const editorId = id || generatedId
+  const labelId = labelledBy || `${editorId}-rte-label`
   const validationMessageAria = validationMessage
     ? `${editorId}-rte-validation-message`
     : ""