@fluentui-copilot/react-editor-input 0.4.7 → 0.4.9-hotfix.1

package/CHANGELOG.json

@@ -1,6 +1,59 @@
 {
   "name": "@fluentui-copilot/react-editor-input",
   "entries": [
+    {
+      "date": "Wed, 06 Aug 2025 16:01:29 GMT",
+      "tag": "@fluentui-copilot/react-editor-input_v0.4.9-hotfix.1",
+      "version": "0.4.9-hotfix.1",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "hochelmartin@gmail.com",
+            "package": "@fluentui-copilot/react-editor-input",
+            "commit": "cb43a5bd5258c678c965fddff7e7d5a95f9d0396",
+            "comment": "release: prepare hotfix 0.25.3-hotfix.1"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 30 Apr 2025 01:47:48 GMT",
+      "tag": "@fluentui-copilot/react-editor-input_v0.4.9",
+      "version": "0.4.9",
+      "comments": {
+        "none": [
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui-copilot/react-editor-input",
+            "commit": "1391e0a7243d050db30fcc27547fd3e91df0162c",
+            "comment": "chore: update tsconfig to remove allowSyntheticDefaultImports to enforce named imports."
+          }
+        ],
+        "patch": [
+          {
+            "author": "owcampbe@microsoft.com",
+            "package": "@fluentui-copilot/react-editor-input",
+            "commit": "5a9efb11481fbe2c9bd25c8825ec4a9b991050ab",
+            "comment": "chore: Bump @fluentui/react-components to 9.58.3."
+          }
+        ]
+      }
+    },
+    {
+      "date": "Sat, 19 Apr 2025 00:05:39 GMT",
+      "tag": "@fluentui-copilot/react-editor-input_v0.4.8",
+      "version": "0.4.8",
+      "comments": {
+        "patch": [
+          {
+            "author": "owcampbe@microsoft.com",
+            "package": "@fluentui-copilot/react-editor-input",
+            "commit": "154067a90ddf5cc157f7cc361b98e44420315c57",
+            "comment": "feat: Allow setting defaultValue without calling onChange."
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Mar 2025 17:00:42 GMT",
       "tag": "@fluentui-copilot/react-editor-input_v0.4.4",

package/CHANGELOG.md

@@ -1,9 +1,36 @@
 # Change Log - @fluentui-copilot/react-editor-input
 
-This log was last generated on Thu, 20 Mar 2025 17:00:42 GMT and should not be manually modified.
+This log was last generated on Wed, 06 Aug 2025 16:01:29 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.4.9-hotfix.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-editor-input_v0.4.9-hotfix.1)
+
+Wed, 06 Aug 2025 16:01:29 GMT 
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-editor-input_v0.4.9..@fluentui-copilot/react-editor-input_v0.4.9-hotfix.1)
+
+### Changes
+
+- release: prepare hotfix 0.25.3-hotfix.1 ([PR #3280](https://github.com/microsoft/fluentai/pull/3280) by hochelmartin@gmail.com)
+
+## [0.4.9](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-editor-input_v0.4.9)
+
+Wed, 30 Apr 2025 01:47:48 GMT 
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-editor-input_v0.4.8..@fluentui-copilot/react-editor-input_v0.4.9)
+
+### Patches
+
+- chore: Bump @fluentui/react-components to 9.58.3. ([PR #2963](https://github.com/microsoft/fluentai/pull/2963) by owcampbe@microsoft.com)
+
+## [0.4.8](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-editor-input_v0.4.8)
+
+Sat, 19 Apr 2025 00:05:39 GMT 
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-editor-input_v0.4.4..@fluentui-copilot/react-editor-input_v0.4.8)
+
+### Patches
+
+- feat: Allow setting defaultValue without calling onChange. ([PR #2899](https://github.com/microsoft/fluentai/pull/2899) by owcampbe@microsoft.com)
+
 ## [0.4.4](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-editor-input_v0.4.4)
 
 Thu, 20 Mar 2025 17:00:42 GMT 

package/dist/index.d.ts

@@ -63,6 +63,11 @@ export declare type EditorInputProps = Omit<ComponentProps<Partial<EditorInputSl
      * @default true
      */
     isSentinelNodeEnabled?: boolean;
+    /**
+     * By default when the `defaultValue` is inserted into the editor, `onChange` is triggered.
+     * When this prop is true, if `defaultValue` is a string, `onChange` will not be triggered with its value.
+     */
+    preventDefaultValueOnChange?: boolean;
 };
 
 export declare type EditorInputSlots = {

package/lib/EditorInput.js

@@ -1,2 +1 @@
 export { EditorInput, editorInputClassNames, renderEditorInput_unstable, useEditorInputStyles_unstable, useEditorInput_unstable, useInputClassName, useLexicalStyles, usePlaceholderClassName } from './components/EditorInput/index';
-//# sourceMappingURL=EditorInput.js.map

package/lib/components/EditorInput/EditorInput.js

@@ -3,10 +3,9 @@ import { useEditorInput_unstable } from './useEditorInput';
 import { renderEditorInput_unstable } from './renderEditorInput';
 import { useEditorInputStyles_unstable } from './useEditorInputStyles.styles';
 // EditorInput component - TODO: add more docs
-export const EditorInput = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useEditorInput_unstable(props, ref);
-  useEditorInputStyles_unstable(state);
-  return renderEditorInput_unstable(state);
+export const EditorInput = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useEditorInput_unstable(props, ref);
+    useEditorInputStyles_unstable(state);
+    return renderEditorInput_unstable(state);
 });
 EditorInput.displayName = 'EditorInput';
-//# sourceMappingURL=EditorInput.js.map

package/lib/components/EditorInput/EditorInput.types.js

@@ -1,4 +1,3 @@
 /**
  * Data passed to the `onChange` callback when the chat input's value changes.
- */export {};
-//# sourceMappingURL=EditorInput.types.js.map
+ */ export { };

package/lib/components/EditorInput/EditorInput.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["EditorInput.types.ts"],"sourcesContent":["import type { InitialConfigType, LexicalEditor, LexicalPlainTextPlugin } from '@fluentui-copilot/react-text-editor';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type EditorInputSlots = {\n  root: NonNullable<Slot<'span'>>;\n  input: NonNullable<Slot<'span'>>;\n  placeholderValue?: Slot<'span'>;\n};\n\n/**\n * EditorInput Props\n */\nexport type EditorInputProps = Omit<\n  ComponentProps<Partial<EditorInputSlots>, 'input'>,\n  'onChange' | 'onPaste' | 'defaultValue' | 'onSubmit'\n> & {\n  disabled?: boolean;\n  /**\n   * If defaultValue is a string, it will be added to the input on first render.\n   * If defaultValue is a function, it can call lexical $ functions to imperatively set the initial content with more complex nodes.\n   */\n  defaultValue?: string | (() => void);\n  /**\n   * Callback for when the user changes the value.\n   * TODO: Add proper event type for callback\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  onChange?: (ev: any, data: EditorInputValueData) => void;\n  /**\n   * Callback for when content is pasted into the Editor.\n   */\n  onPaste?: (ev: ClipboardEvent) => void;\n  /**\n   * When true, the input will be cleared when only whitespace is remaining.\n   * @default false\n   */\n  trimWhiteSpace?: boolean;\n  /**\n   * Used to register any custom nodes used by plugins added. Can also be used to override the default nodes.\n   */\n  customNodes?: InitialConfigType['nodes'];\n  /**\n   * The plugin which is in charge of initializing Lexical and is given the `input` and `placeholder` slots\n   * @default LexicalPlainTextPlugin\n   */\n  textPlugin?: typeof LexicalPlainTextPlugin;\n  /**\n   * Controls whether history is tracked to provide undo and redo functionality\n   * @default true\n   */\n  history?: boolean;\n\n  editorRef?: React.RefObject<LexicalEditor>;\n\n  /**\n   * Customize the default styles of elements inserted by Lexical in the editor.\n   */\n  customTheme?: InitialConfigType['theme'];\n\n  /**\n   * Whether or not to enable the sentinel node. The sentinel node is a node that is inserted at the end of the editor\n   * The SentinelNode fixes a Safari bug in lexical versions below 0.20.1\n   * @default true\n   */\n  isSentinelNodeEnabled?: boolean;\n};\n\n/**\n * State used in rendering EditorInput\n */\nexport type EditorInputState = ComponentState<EditorInputSlots> &\n  Required<\n    Pick<\n      EditorInputProps,\n      'disabled' | 'textPlugin' | 'history' | 'trimWhiteSpace' | 'editorRef' | 'isSentinelNodeEnabled'\n    >\n  > &\n  Partial<Pick<EditorInputProps, 'onPaste'>> & {\n    lexicalInitialConfig: InitialConfigType;\n    defaultValue?: string;\n    handleOnChange: (value: string) => void;\n  };\n\n/**\n * Data passed to the `onChange` callback when the chat input's value changes.\n */\nexport type EditorInputValueData = {\n  value: string;\n};\n"],"names":[],"rangeMappings":";;","mappings":"AAmFA;;CAEC,GACD,WAEE"}
+{"version":3,"sources":["EditorInput.types.ts"],"sourcesContent":["import type { InitialConfigType, LexicalEditor, LexicalPlainTextPlugin } from '@fluentui-copilot/react-text-editor';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type EditorInputSlots = {\n  root: NonNullable<Slot<'span'>>;\n  input: NonNullable<Slot<'span'>>;\n  placeholderValue?: Slot<'span'>;\n};\n\n/**\n * EditorInput Props\n */\nexport type EditorInputProps = Omit<\n  ComponentProps<Partial<EditorInputSlots>, 'input'>,\n  'onChange' | 'onPaste' | 'defaultValue' | 'onSubmit'\n> & {\n  disabled?: boolean;\n  /**\n   * If defaultValue is a string, it will be added to the input on first render.\n   * If defaultValue is a function, it can call lexical $ functions to imperatively set the initial content with more complex nodes.\n   */\n  defaultValue?: string | (() => void);\n  /**\n   * Callback for when the user changes the value.\n   * TODO: Add proper event type for callback\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  onChange?: (ev: any, data: EditorInputValueData) => void;\n  /**\n   * Callback for when content is pasted into the Editor.\n   */\n  onPaste?: (ev: ClipboardEvent) => void;\n  /**\n   * When true, the input will be cleared when only whitespace is remaining.\n   * @default false\n   */\n  trimWhiteSpace?: boolean;\n  /**\n   * Used to register any custom nodes used by plugins added. Can also be used to override the default nodes.\n   */\n  customNodes?: InitialConfigType['nodes'];\n  /**\n   * The plugin which is in charge of initializing Lexical and is given the `input` and `placeholder` slots\n   * @default LexicalPlainTextPlugin\n   */\n  textPlugin?: typeof LexicalPlainTextPlugin;\n  /**\n   * Controls whether history is tracked to provide undo and redo functionality\n   * @default true\n   */\n  history?: boolean;\n\n  editorRef?: React.RefObject<LexicalEditor>;\n\n  /**\n   * Customize the default styles of elements inserted by Lexical in the editor.\n   */\n  customTheme?: InitialConfigType['theme'];\n\n  /**\n   * Whether or not to enable the sentinel node. The sentinel node is a node that is inserted at the end of the editor\n   * The SentinelNode fixes a Safari bug in lexical versions below 0.20.1\n   * @default true\n   */\n  isSentinelNodeEnabled?: boolean;\n  /**\n   * By default when the `defaultValue` is inserted into the editor, `onChange` is triggered.\n   * When this prop is true, if `defaultValue` is a string, `onChange` will not be triggered with its value.\n   */\n  preventDefaultValueOnChange?: boolean;\n};\n\n/**\n * State used in rendering EditorInput\n */\nexport type EditorInputState = ComponentState<EditorInputSlots> &\n  Required<\n    Pick<\n      EditorInputProps,\n      'disabled' | 'textPlugin' | 'history' | 'trimWhiteSpace' | 'editorRef' | 'isSentinelNodeEnabled'\n    >\n  > &\n  Partial<Pick<EditorInputProps, 'onPaste'>> & {\n    lexicalInitialConfig: InitialConfigType;\n    defaultValue?: string;\n    handleOnChange: (value: string) => void;\n  };\n\n/**\n * Data passed to the `onChange` callback when the chat input's value changes.\n */\nexport type EditorInputValueData = {\n  value: string;\n};\n"],"names":[],"rangeMappings":";;","mappings":"AAwFA;;CAEC,GACD,WAEE"}

package/lib/components/EditorInput/index.js

@@ -2,4 +2,3 @@ export { EditorInput } from './EditorInput';
 export { renderEditorInput_unstable } from './renderEditorInput';
 export { useEditorInput_unstable } from './useEditorInput';
 export { editorInputClassNames, useEditorInputStyles_unstable, useInputClassName, useLexicalStyles, usePlaceholderClassName } from './useEditorInputStyles.styles';
-//# sourceMappingURL=index.js.map

package/lib/components/EditorInput/renderEditorInput.js

@@ -1,31 +1,36 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@fluentui/react-jsx-runtime/jsx-runtime";
+  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-components';
 import { LexicalComposer, LexicalErrorBoundary, LexicalEditorRefPlugin, LexicalHistoryPlugin } from '@fluentui-copilot/react-text-editor';
 import { BasicFunctionalityPlugin } from '@fluentui-copilot/react-chat-input-plugins';
 /**
  * Render the final JSX of EditorInput
- */
-export const renderEditorInput_unstable = state => {
-  assertSlots(state);
-  return /*#__PURE__*/_jsx(state.root, {
-    children: /*#__PURE__*/_jsxs(LexicalComposer, {
-      initialConfig: state.lexicalInitialConfig,
-      children: [/*#__PURE__*/_jsx(state.textPlugin, {
-        contentEditable: /*#__PURE__*/_jsx(state.input, {}),
-        ErrorBoundary: LexicalErrorBoundary,
-        placeholder: state.placeholderValue ? /*#__PURE__*/_jsx(state.placeholderValue, {}) : null
-      }), /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(BasicFunctionalityPlugin, {
-          onContentChange: state.handleOnChange,
-          onPaste: state.onPaste,
-          trimWhitespace: state.trimWhiteSpace,
-          defaultValue: state.defaultValue,
-          isSentinelNodeEnabled: state.isSentinelNodeEnabled
-        }), state.history && /*#__PURE__*/_jsx(LexicalHistoryPlugin, {})]
-      }), /*#__PURE__*/_jsx(LexicalEditorRefPlugin, {
-        editorRef: state.editorRef
-      })]
-    })
-  });
+ */ export const renderEditorInput_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {
+        children: /*#__PURE__*/ _jsxs(LexicalComposer, {
+            initialConfig: state.lexicalInitialConfig,
+            children: [
+                /*#__PURE__*/ _jsx(state.textPlugin, {
+                    contentEditable: /*#__PURE__*/ _jsx(state.input, {}),
+                    ErrorBoundary: LexicalErrorBoundary,
+                    placeholder: state.placeholderValue ? /*#__PURE__*/ _jsx(state.placeholderValue, {}) : null
+                }),
+                /*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        /*#__PURE__*/ _jsx(BasicFunctionalityPlugin, {
+                            onContentChange: state.handleOnChange,
+                            onPaste: state.onPaste,
+                            trimWhitespace: state.trimWhiteSpace,
+                            defaultValue: state.defaultValue,
+                            isSentinelNodeEnabled: state.isSentinelNodeEnabled
+                        }),
+                        state.history && /*#__PURE__*/ _jsx(LexicalHistoryPlugin, {})
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(LexicalEditorRefPlugin, {
+                    editorRef: state.editorRef
+                })
+            ]
+        })
+    });
 };
-//# sourceMappingURL=renderEditorInput.js.map

package/lib/components/EditorInput/useEditorInput.js

@@ -3,6 +3,9 @@ import { getPartitionedNativeProps, slot, useId, useIsomorphicLayoutEffect, useM
 import { SentinelNode } from '@fluentui-copilot/chat-input-plugins';
 import { LexicalPlainTextPlugin, mergeRegister } from '@fluentui-copilot/react-text-editor';
 import { useControllableState } from '@fluentui/react-utilities';
+export const createInitialEditorState = (defaultValue)=>{
+    return `{"root":{"type":"root","children":[{"children":[{"text":${JSON.stringify(defaultValue)},"type":"text"}],"type":"paragraph"}]}}`;
+};
 /**
  * Create the state required to render EditorInput.
  *
@@ -11,123 +14,144 @@ import { useControllableState } from '@fluentui/react-utilities';
  *
  * @param props - props from this instance of EditorInput
  * @param ref - reference to root HTMLElement of EditorInput
- */
-export const useEditorInput_unstable = (props, ref) => {
-  const {
-    onChange,
-    onPaste,
-    trimWhiteSpace = false,
-    textPlugin = LexicalPlainTextPlugin,
-    history = true,
-    editorRef: userEditorRef,
-    customTheme,
-    isSentinelNodeEnabled = true
-  } = props;
-  const {
-    root,
-    primary
-  } = getPartitionedNativeProps({
-    primarySlotTagName: 'span',
-    props,
-    excludedPropNames: ['onChange', 'onPaste', 'defaultValue']
-  });
-  const editorRef = useMergedRefs(React.useRef(null), userEditorRef);
-  // The disabled state can also be changed by lexical (e.g. by a custom plugin) so
-  // we use `useControllableState` to coordinate
-  const [disabled, setDisabled] = useControllableState({
-    state: props.disabled,
-    initialState: false
-  });
-  const customNodes = props.customNodes ? [...props.customNodes, SentinelNode] : [SentinelNode];
-  const spanRef = React.useCallback(span => {
-    var
-    // Register the `input` span with lexical
-    _editorRef_current;
-    (_editorRef_current = editorRef.current) === null || _editorRef_current === void 0 ? void 0 : _editorRef_current.setRootElement(span);
-  }, [editorRef]);
-  // Update lexical when disabled changes
-  useIsomorphicLayoutEffect(() => {
-    if (editorRef.current) {
-      var _editorRef_current;
-      (_editorRef_current = editorRef.current) === null || _editorRef_current === void 0 ? void 0 : _editorRef_current.setEditable(!disabled);
-    }
-  }, [disabled]);
-  useIsomorphicLayoutEffect(() => {
-    if (editorRef.current) {
-      var _editorRef_current;
-      return mergeRegister(editorRef.current.registerEditableListener(isEditable => {
-        setDisabled(!isEditable);
-      }), (_editorRef_current = editorRef.current) === null || _editorRef_current === void 0 ? void 0 : _editorRef_current.registerRootListener(root => {
-        if (!root) {
-          return;
+ */ export const useEditorInput_unstable = (props, ref)=>{
+    const { onChange, onPaste, trimWhiteSpace = false, textPlugin = LexicalPlainTextPlugin, history = true, editorRef: userEditorRef, customTheme, isSentinelNodeEnabled = true, preventDefaultValueOnChange = false } = props;
+    const { root, primary } = getPartitionedNativeProps({
+        primarySlotTagName: 'span',
+        props,
+        excludedPropNames: [
+            'onChange',
+            'onPaste',
+            'defaultValue'
+        ]
+    });
+    const editorRef = useMergedRefs(React.useRef(null), userEditorRef);
+    // The disabled state can also be changed by lexical (e.g. by a custom plugin) so
+    // we use `useControllableState` to coordinate
+    const [disabled, setDisabled] = useControllableState({
+        state: props.disabled,
+        initialState: false
+    });
+    const customNodes = props.customNodes ? [
+        ...props.customNodes,
+        SentinelNode
+    ] : [
+        SentinelNode
+    ];
+    const spanRef = React.useCallback((span)=>{
+        var // Register the `input` span with lexical
+        _editorRef_current;
+        (_editorRef_current = editorRef.current) === null || _editorRef_current === void 0 ? void 0 : _editorRef_current.setRootElement(span);
+    }, [
+        editorRef
+    ]);
+    // Update lexical when disabled changes
+    useIsomorphicLayoutEffect(()=>{
+        if (editorRef.current) {
+            var _editorRef_current;
+            (_editorRef_current = editorRef.current) === null || _editorRef_current === void 0 ? void 0 : _editorRef_current.setEditable(!disabled);
         }
-        // Remove lexical's inline style so we can apply our own
-        // Lexical needs the whitespace style to be either `pre` or `pre-wrap` to work correctly
-        root.style.whiteSpace = '';
-      }));
-    }
-  }, [editorRef]);
-  const handleOnChange = React.useCallback(newValue => {
-    onChange === null || onChange === void 0 ? void 0 : onChange({}, {
-      value: newValue
+    }, [
+        disabled
+    ]);
+    useIsomorphicLayoutEffect(()=>{
+        if (editorRef.current) {
+            var _editorRef_current;
+            return mergeRegister(editorRef.current.registerEditableListener((isEditable)=>{
+                setDisabled(!isEditable);
+            }), (_editorRef_current = editorRef.current) === null || _editorRef_current === void 0 ? void 0 : _editorRef_current.registerRootListener((root)=>{
+                if (!root) {
+                    return;
+                }
+                // Remove lexical's inline style so we can apply our own
+                // Lexical needs the whitespace style to be either `pre` or `pre-wrap` to work correctly
+                root.style.whiteSpace = '';
+            }));
+        }
+    }, [
+        editorRef
+    ]);
+    const handleOnChange = React.useCallback((newValue)=>{
+        onChange === null || onChange === void 0 ? void 0 : onChange({}, {
+            value: newValue
+        });
+    }, [
+        onChange
+    ]);
+    const [defaultString, lexicalEditorStateDefaultValue] = React.useMemo(()=>{
+        if (typeof props.defaultValue === 'function') {
+            return [
+                undefined,
+                props.defaultValue
+            ];
+        }
+        if (preventDefaultValueOnChange && props.defaultValue !== undefined) {
+            // Any method of providing a default value to lexical which inserts it after initialization
+            // will trigger a text content change.
+            // Providing a default value as a stringified editorState will prevent calling onChange
+            const editorState = createInitialEditorState(props.defaultValue);
+            return [
+                undefined,
+                editorState
+            ];
+        }
+        return [
+            props.defaultValue,
+            undefined
+        ];
+    }, [
+        preventDefaultValueOnChange,
+        props.defaultValue
+    ]);
+    const placeholderValue = slot.optional(props.placeholderValue, {
+        elementType: 'span'
     });
-  }, [onChange]);
-  const [defaultString, defaultValueFunction] = (() => {
-    if (typeof props.defaultValue === 'function') {
-      return [undefined, props.defaultValue];
+    const placeholderId = useId('chat-input-placeholder', placeholderValue === null || placeholderValue === void 0 ? void 0 : placeholderValue.id);
+    if (placeholderValue) {
+        placeholderValue.id = placeholderId;
     }
-    return [props.defaultValue, undefined];
-  })();
-  const placeholderValue = slot.optional(props.placeholderValue, {
-    elementType: 'span'
-  });
-  const placeholderId = useId('chat-input-placeholder', placeholderValue === null || placeholderValue === void 0 ? void 0 : placeholderValue.id);
-  if (placeholderValue) {
-    placeholderValue.id = placeholderId;
-  }
-  return {
-    components: {
-      root: 'span',
-      input: 'span',
-      placeholderValue: 'span'
-    },
-    root: slot.always(props.root, {
-      defaultProps: {
-        ...root
-      },
-      elementType: 'span'
-    }),
-    input: slot.always(props.input, {
-      defaultProps: {
-        ref: useMergedRefs(ref, spanRef),
-        role: 'textbox',
-        contentEditable: !disabled,
-        'aria-readonly': disabled ? true : undefined,
+    return {
+        components: {
+            root: 'span',
+            input: 'span',
+            placeholderValue: 'span'
+        },
+        root: slot.always(props.root, {
+            defaultProps: {
+                ...root
+            },
+            elementType: 'span'
+        }),
+        input: slot.always(props.input, {
+            defaultProps: {
+                ref: useMergedRefs(ref, spanRef),
+                role: 'textbox',
+                contentEditable: !disabled,
+                'aria-readonly': disabled ? true : undefined,
+                disabled,
+                suppressContentEditableWarning: true,
+                tabIndex: disabled ? undefined : 0,
+                ...primary,
+                'aria-describedby': primary['aria-describedby'] ? `${primary['aria-describedby']} ${placeholderId}` : placeholderId
+            },
+            elementType: 'span'
+        }),
+        placeholderValue,
+        lexicalInitialConfig: {
+            namespace: 'fai-EditorInput',
+            onError: console.error,
+            nodes: customNodes,
+            editorState: lexicalEditorStateDefaultValue,
+            theme: customTheme
+        },
+        editorRef,
         disabled,
-        suppressContentEditableWarning: true,
-        tabIndex: disabled ? undefined : 0,
-        ...primary,
-        'aria-describedby': primary['aria-describedby'] ? `${primary['aria-describedby']} ${placeholderId}` : placeholderId
-      },
-      elementType: 'span'
-    }),
-    placeholderValue,
-    lexicalInitialConfig: {
-      namespace: 'fai-EditorInput',
-      onError: console.error,
-      nodes: customNodes,
-      editorState: defaultValueFunction,
-      theme: customTheme
-    },
-    editorRef,
-    disabled,
-    textPlugin,
-    onPaste,
-    handleOnChange,
-    defaultValue: defaultString,
-    trimWhiteSpace,
-    history,
-    isSentinelNodeEnabled
-  };
+        textPlugin,
+        onPaste,
+        handleOnChange,
+        defaultValue: defaultString,
+        trimWhiteSpace,
+        history,
+        isSentinelNodeEnabled
+    };
 };
-//# sourceMappingURL=useEditorInput.js.map

package/lib/components/EditorInput/useEditorInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useEditorInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  getPartitionedNativeProps,\n  slot,\n  useId,\n  useIsomorphicLayoutEffect,\n  useMergedRefs,\n} from '@fluentui/react-components';\nimport type { EditorInputProps, EditorInputState } from './EditorInput.types';\nimport { SentinelNode } from '@fluentui-copilot/chat-input-plugins';\nimport type { LexicalEditor } from '@fluentui-copilot/react-text-editor';\nimport { LexicalPlainTextPlugin, mergeRegister } from '@fluentui-copilot/react-text-editor';\nimport { useControllableState } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render EditorInput.\n *\n * The returned state can be modified with hooks such as useEditorInputStyles_unstable,\n * before being passed to renderEditorInput_unstable.\n *\n * @param props - props from this instance of EditorInput\n * @param ref - reference to root HTMLElement of EditorInput\n */\nexport const useEditorInput_unstable = (props: EditorInputProps, ref: React.Ref<HTMLSpanElement>): EditorInputState => {\n  const {\n    onChange,\n    onPaste,\n    trimWhiteSpace = false,\n    textPlugin = LexicalPlainTextPlugin,\n    history = true,\n    editorRef: userEditorRef,\n    customTheme,\n    isSentinelNodeEnabled = true,\n  } = props;\n  const { root, primary } = getPartitionedNativeProps({\n    primarySlotTagName: 'span',\n    props,\n    excludedPropNames: ['onChange', 'onPaste', 'defaultValue'],\n  });\n\n  const editorRef = useMergedRefs(React.useRef<LexicalEditor>(null), userEditorRef);\n  // The disabled state can also be changed by lexical (e.g. by a custom plugin) so\n  // we use `useControllableState` to coordinate\n  const [disabled, setDisabled] = useControllableState({\n    state: props.disabled,\n    initialState: false,\n  });\n\n  const customNodes = props.customNodes ? [...props.customNodes, SentinelNode] : [SentinelNode];\n\n  const spanRef = React.useCallback(\n    span => {\n      // Register the `input` span with lexical\n      editorRef.current?.setRootElement(span);\n    },\n    [editorRef],\n  );\n\n  // Update lexical when disabled changes\n  useIsomorphicLayoutEffect(() => {\n    if (editorRef.current) {\n      editorRef.current?.setEditable(!disabled);\n    }\n  }, [disabled]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (editorRef.current) {\n      return mergeRegister(\n        editorRef.current.registerEditableListener(isEditable => {\n          setDisabled(!isEditable);\n        }),\n        editorRef.current?.registerRootListener(root => {\n          if (!root) {\n            return;\n          }\n\n          // Remove lexical's inline style so we can apply our own\n          // Lexical needs the whitespace style to be either `pre` or `pre-wrap` to work correctly\n          root.style.whiteSpace = '';\n        }),\n      );\n    }\n  }, [editorRef]);\n\n  const handleOnChange = React.useCallback(\n    (newValue: string) => {\n      onChange?.({}, { value: newValue });\n    },\n    [onChange],\n  );\n\n  const [defaultString, defaultValueFunction] = (() => {\n    if (typeof props.defaultValue === 'function') {\n      return [undefined, props.defaultValue];\n    }\n    return [props.defaultValue, undefined];\n  })();\n\n  const placeholderValue = slot.optional(props.placeholderValue, { elementType: 'span' });\n  const placeholderId = useId('chat-input-placeholder', placeholderValue?.id);\n  if (placeholderValue) {\n    placeholderValue.id = placeholderId;\n  }\n\n  return {\n    components: {\n      root: 'span',\n      input: 'span',\n      placeholderValue: 'span',\n    },\n    root: slot.always(props.root, { defaultProps: { ...root }, elementType: 'span' }),\n    input: slot.always(props.input, {\n      defaultProps: {\n        ref: useMergedRefs(ref, spanRef),\n        role: 'textbox',\n        contentEditable: !disabled,\n        'aria-readonly': disabled ? true : undefined,\n        disabled,\n        suppressContentEditableWarning: true,\n        tabIndex: disabled ? undefined : 0,\n        ...primary,\n        'aria-describedby': primary['aria-describedby']\n          ? `${primary['aria-describedby']} ${placeholderId}`\n          : placeholderId,\n      },\n      elementType: 'span',\n    }),\n    placeholderValue,\n    lexicalInitialConfig: {\n      namespace: 'fai-EditorInput',\n      onError: console.error,\n      nodes: customNodes,\n      editorState: defaultValueFunction,\n      theme: customTheme,\n    },\n    editorRef,\n    disabled,\n    textPlugin,\n    onPaste,\n    handleOnChange,\n    defaultValue: defaultString,\n    trimWhiteSpace,\n    history,\n    isSentinelNodeEnabled,\n  };\n};\n"],"names":["React","getPartitionedNativeProps","slot","useId","useIsomorphicLayoutEffect","useMergedRefs","SentinelNode","LexicalPlainTextPlugin","mergeRegister","useControllableState","useEditorInput_unstable","props","ref","onChange","onPaste","trimWhiteSpace","textPlugin","history","editorRef","userEditorRef","customTheme","isSentinelNodeEnabled","root","primary","primarySlotTagName","excludedPropNames","useRef","disabled","setDisabled","state","initialState","customNodes","spanRef","useCallback","span","current","setRootElement","setEditable","registerEditableListener","isEditable","registerRootListener","style","whiteSpace","handleOnChange","newValue","value","defaultString","defaultValueFunction","defaultValue","undefined","placeholderValue","optional","elementType","placeholderId","id","components","input","always","defaultProps","role","contentEditable","suppressContentEditableWarning","tabIndex","lexicalInitialConfig","namespace","onError","console","error","nodes","editorState","theme"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["useEditorInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  getPartitionedNativeProps,\n  slot,\n  useId,\n  useIsomorphicLayoutEffect,\n  useMergedRefs,\n} from '@fluentui/react-components';\nimport type { EditorInputProps, EditorInputState } from './EditorInput.types';\nimport { SentinelNode } from '@fluentui-copilot/chat-input-plugins';\nimport type { LexicalEditor } from '@fluentui-copilot/react-text-editor';\nimport { LexicalPlainTextPlugin, mergeRegister } from '@fluentui-copilot/react-text-editor';\nimport { useControllableState } from '@fluentui/react-utilities';\n\nexport const createInitialEditorState = (defaultValue: string) => {\n  return `{\"root\":{\"type\":\"root\",\"children\":[{\"children\":[{\"text\":${JSON.stringify(\n    defaultValue,\n  )},\"type\":\"text\"}],\"type\":\"paragraph\"}]}}`;\n};\n\n/**\n * Create the state required to render EditorInput.\n *\n * The returned state can be modified with hooks such as useEditorInputStyles_unstable,\n * before being passed to renderEditorInput_unstable.\n *\n * @param props - props from this instance of EditorInput\n * @param ref - reference to root HTMLElement of EditorInput\n */\nexport const useEditorInput_unstable = (props: EditorInputProps, ref: React.Ref<HTMLSpanElement>): EditorInputState => {\n  const {\n    onChange,\n    onPaste,\n    trimWhiteSpace = false,\n    textPlugin = LexicalPlainTextPlugin,\n    history = true,\n    editorRef: userEditorRef,\n    customTheme,\n    isSentinelNodeEnabled = true,\n    preventDefaultValueOnChange = false,\n  } = props;\n  const { root, primary } = getPartitionedNativeProps({\n    primarySlotTagName: 'span',\n    props,\n    excludedPropNames: ['onChange', 'onPaste', 'defaultValue'],\n  });\n\n  const editorRef = useMergedRefs(React.useRef<LexicalEditor>(null), userEditorRef);\n  // The disabled state can also be changed by lexical (e.g. by a custom plugin) so\n  // we use `useControllableState` to coordinate\n  const [disabled, setDisabled] = useControllableState({\n    state: props.disabled,\n    initialState: false,\n  });\n\n  const customNodes = props.customNodes ? [...props.customNodes, SentinelNode] : [SentinelNode];\n\n  const spanRef = React.useCallback(\n    span => {\n      // Register the `input` span with lexical\n      editorRef.current?.setRootElement(span);\n    },\n    [editorRef],\n  );\n\n  // Update lexical when disabled changes\n  useIsomorphicLayoutEffect(() => {\n    if (editorRef.current) {\n      editorRef.current?.setEditable(!disabled);\n    }\n  }, [disabled]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (editorRef.current) {\n      return mergeRegister(\n        editorRef.current.registerEditableListener(isEditable => {\n          setDisabled(!isEditable);\n        }),\n        editorRef.current?.registerRootListener(root => {\n          if (!root) {\n            return;\n          }\n\n          // Remove lexical's inline style so we can apply our own\n          // Lexical needs the whitespace style to be either `pre` or `pre-wrap` to work correctly\n          root.style.whiteSpace = '';\n        }),\n      );\n    }\n  }, [editorRef]);\n\n  const handleOnChange = React.useCallback(\n    (newValue: string) => {\n      onChange?.({}, { value: newValue });\n    },\n    [onChange],\n  );\n\n  const [defaultString, lexicalEditorStateDefaultValue] = React.useMemo(() => {\n    if (typeof props.defaultValue === 'function') {\n      return [undefined, props.defaultValue];\n    }\n\n    if (preventDefaultValueOnChange && props.defaultValue !== undefined) {\n      // Any method of providing a default value to lexical which inserts it after initialization\n      // will trigger a text content change.\n      // Providing a default value as a stringified editorState will prevent calling onChange\n      const editorState = createInitialEditorState(props.defaultValue);\n      return [undefined, editorState];\n    }\n\n    return [props.defaultValue, undefined];\n  }, [preventDefaultValueOnChange, props.defaultValue]);\n\n  const placeholderValue = slot.optional(props.placeholderValue, { elementType: 'span' });\n  const placeholderId = useId('chat-input-placeholder', placeholderValue?.id);\n  if (placeholderValue) {\n    placeholderValue.id = placeholderId;\n  }\n\n  return {\n    components: {\n      root: 'span',\n      input: 'span',\n      placeholderValue: 'span',\n    },\n    root: slot.always(props.root, { defaultProps: { ...root }, elementType: 'span' }),\n    input: slot.always(props.input, {\n      defaultProps: {\n        ref: useMergedRefs(ref, spanRef),\n        role: 'textbox',\n        contentEditable: !disabled,\n        'aria-readonly': disabled ? true : undefined,\n        disabled,\n        suppressContentEditableWarning: true,\n        tabIndex: disabled ? undefined : 0,\n        ...primary,\n        'aria-describedby': primary['aria-describedby']\n          ? `${primary['aria-describedby']} ${placeholderId}`\n          : placeholderId,\n      },\n      elementType: 'span',\n    }),\n    placeholderValue,\n    lexicalInitialConfig: {\n      namespace: 'fai-EditorInput',\n      onError: console.error,\n      nodes: customNodes,\n      editorState: lexicalEditorStateDefaultValue,\n      theme: customTheme,\n    },\n    editorRef,\n    disabled,\n    textPlugin,\n    onPaste,\n    handleOnChange,\n    defaultValue: defaultString,\n    trimWhiteSpace,\n    history,\n    isSentinelNodeEnabled,\n  };\n};\n"],"names":["React","getPartitionedNativeProps","slot","useId","useIsomorphicLayoutEffect","useMergedRefs","SentinelNode","LexicalPlainTextPlugin","mergeRegister","useControllableState","createInitialEditorState","defaultValue","JSON","stringify","useEditorInput_unstable","props","ref","onChange","onPaste","trimWhiteSpace","textPlugin","history","editorRef","userEditorRef","customTheme","isSentinelNodeEnabled","preventDefaultValueOnChange","root","primary","primarySlotTagName","excludedPropNames","useRef","disabled","setDisabled","state","initialState","customNodes","spanRef","useCallback","span","current","setRootElement","setEditable","registerEditableListener","isEditable","registerRootListener","style","whiteSpace","handleOnChange","newValue","value","defaultString","lexicalEditorStateDefaultValue","useMemo","undefined","editorState","placeholderValue","optional","elementType","placeholderId","id","components","input","always","defaultProps","role","contentEditable","suppressContentEditableWarning","tabIndex","lexicalInitialConfig","namespace","onError","console","error","nodes","theme"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/EditorInput/useEditorInputStyles.styles.raw.js

@@ -0,0 +1,61 @@
+import { makeResetStyles, makeStyles, mergeClasses, typographyStyles } from '@fluentui/react-components';
+import { tokens } from '@fluentui-copilot/tokens';
+export const editorInputClassNames = {
+    root: 'fai-EditorInput',
+    input: 'fai-EditorInput__input',
+    placeholderValue: 'fai-EditorInput__placeholderValue'
+};
+/**
+ * Styles for the root slot
+ */ const useRootClassName = makeResetStyles({
+    display: 'inline-grid',
+    whiteSpace: 'pre-wrap'
+});
+export const useLexicalStyles = makeStyles({
+    paragraph: {
+        margin: 0,
+        textAlign: 'start'
+    }
+});
+export const usePlaceholderClassName = makeResetStyles({
+    zIndex: 0,
+    gridArea: '1 / 1 / 1 / 1',
+    color: tokens.colorNeutralForeground4,
+    ...typographyStyles.body1,
+    '@media (forced-colors: active)': {
+        color: 'GrayText'
+    }
+});
+export const useInputClassName = makeResetStyles({
+    gridArea: '1 / 1 / 1 / 1',
+    zIndex: 1,
+    width: '100%'
+});
+const useStyles = makeStyles({
+    placeholderDisabled: {
+        color: tokens.colorNeutralForegroundDisabled
+    }
+});
+/**
+ * Apply styling to the EditorInput slots based on the state
+ */ export const useEditorInputStyles_unstable = (state)=>{
+    'use no memo';
+    const { disabled } = state;
+    const placeholderClassName = usePlaceholderClassName();
+    const rootClassName = useRootClassName();
+    const inputClassName = useInputClassName();
+    const styles = useStyles();
+    state.root.className = mergeClasses(editorInputClassNames.root, rootClassName, state.root.className);
+    state.input.className = mergeClasses(editorInputClassNames.input, inputClassName, state.input.className);
+    state.lexicalInitialConfig = {
+        ...state.lexicalInitialConfig,
+        theme: {
+            ...useLexicalStyles(),
+            ...state.lexicalInitialConfig.theme
+        }
+    };
+    if (state.placeholderValue) {
+        state.placeholderValue.className = mergeClasses(editorInputClassNames.placeholderValue, placeholderClassName, disabled && styles.placeholderDisabled, state.placeholderValue.className);
+    }
+    return state;
+};

package/lib/components/EditorInput/useEditorInputStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useEditorInputStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, typographyStyles } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { SlotClassNames } from '@fluentui/react-components';\nimport type { EditorInputSlots, EditorInputState } from './EditorInput.types';\n\nexport const editorInputClassNames: SlotClassNames<EditorInputSlots> = {\n  root: 'fai-EditorInput',\n  input: 'fai-EditorInput__input',\n  placeholderValue: 'fai-EditorInput__placeholderValue',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootClassName = makeResetStyles({\n  display: 'inline-grid',\n  whiteSpace: 'pre-wrap',\n});\n\nexport const useLexicalStyles = makeStyles({\n  paragraph: {\n    margin: 0,\n    textAlign: 'start',\n  },\n});\n\nexport const usePlaceholderClassName = makeResetStyles({\n  zIndex: 0,\n  gridArea: '1 / 1 / 1 / 1',\n\n  color: tokens.colorNeutralForeground4,\n  ...typographyStyles.body1,\n\n  '@media (forced-colors: active)': {\n    color: 'GrayText',\n  },\n});\n\nexport const useInputClassName = makeResetStyles({\n  gridArea: '1 / 1 / 1 / 1',\n  zIndex: 1,\n  width: '100%',\n});\n\nconst useStyles = makeStyles({\n  placeholderDisabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n  },\n});\n/**\n * Apply styling to the EditorInput slots based on the state\n */\nexport const useEditorInputStyles_unstable = (state: EditorInputState): EditorInputState => {\n  'use no memo';\n\n  const { disabled } = state;\n  const placeholderClassName = usePlaceholderClassName();\n  const rootClassName = useRootClassName();\n  const inputClassName = useInputClassName();\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(editorInputClassNames.root, rootClassName, state.root.className);\n\n  state.input.className = mergeClasses(editorInputClassNames.input, inputClassName, state.input.className);\n\n  state.lexicalInitialConfig = {\n    ...state.lexicalInitialConfig,\n    theme: { ...useLexicalStyles(), ...state.lexicalInitialConfig.theme },\n  };\n\n  if (state.placeholderValue) {\n    state.placeholderValue.className = mergeClasses(\n      editorInputClassNames.placeholderValue,\n      placeholderClassName,\n      disabled && styles.placeholderDisabled,\n      state.placeholderValue.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","typographyStyles","tokens","editorInputClassNames","root","input","placeholderValue","useRootClassName","display","whiteSpace","useLexicalStyles","paragraph","margin","textAlign","usePlaceholderClassName","zIndex","gridArea","color","colorNeutralForeground4","body1","useInputClassName","width","useStyles","placeholderDisabled","colorNeutralForegroundDisabled","useEditorInputStyles_unstable","state","disabled","placeholderClassName","rootClassName","inputClassName","styles","className","lexicalInitialConfig","theme"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,EAAEC,gBAAgB,QAAQ,6BAA6B;AACzG,SAASC,MAAM,QAAQ,2BAA2B;AAIlD,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;IACNC,OAAO;IACPC,kBAAkB;AACpB,EAAE;AAEF;;CAEC,GACD,MAAMC,mBAAmBT,gBAAgB;IACvCU,SAAS;IACTC,YAAY;AACd;AAEA,OAAO,MAAMC,mBAAmBX,WAAW;IACzCY,WAAW;QACTC,QAAQ;QACRC,WAAW;IACb;AACF,GAAG;AAEH,OAAO,MAAMC,0BAA0BhB,gBAAgB;IACrDiB,QAAQ;IACRC,UAAU;IAEVC,OAAOf,OAAOgB,uBAAuB;IACrC,GAAGjB,iBAAiBkB,KAAK;IAEzB,kCAAkC;QAChCF,OAAO;IACT;AACF,GAAG;AAEH,OAAO,MAAMG,oBAAoBtB,gBAAgB;IAC/CkB,UAAU;IACVD,QAAQ;IACRM,OAAO;AACT,GAAG;AAEH,MAAMC,YAAYvB,WAAW;IAC3BwB,qBAAqB;QACnBN,OAAOf,OAAOsB,8BAA8B;IAC9C;AACF;AACA;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IACrB,MAAME,uBAAuBd;IAC7B,MAAMe,gBAAgBtB;IACtB,MAAMuB,iBAAiBV;IACvB,MAAMW,SAAST;IAEfI,MAAMtB,IAAI,CAAC4B,SAAS,GAAGhC,aAAaG,sBAAsBC,IAAI,EAAEyB,eAAeH,MAAMtB,IAAI,CAAC4B,SAAS;IAEnGN,MAAMrB,KAAK,CAAC2B,SAAS,GAAGhC,aAAaG,sBAAsBE,KAAK,EAAEyB,gBAAgBJ,MAAMrB,KAAK,CAAC2B,SAAS;IAEvGN,MAAMO,oBAAoB,GAAG;QAC3B,GAAGP,MAAMO,oBAAoB;QAC7BC,OAAO;YAAE,GAAGxB,kBAAkB;YAAE,GAAGgB,MAAMO,oBAAoB,CAACC,KAAK;QAAC;IACtE;IAEA,IAAIR,MAAMpB,gBAAgB,EAAE;QAC1BoB,MAAMpB,gBAAgB,CAAC0B,SAAS,GAAGhC,aACjCG,sBAAsBG,gBAAgB,EACtCsB,sBACAD,YAAYI,OAAOR,mBAAmB,EACtCG,MAAMpB,gBAAgB,CAAC0B,SAAS;IAEpC;IAEA,OAAON;AACT,EAAE"}

package/lib/index.js

@@ -1,2 +1 @@
 export { EditorInput, editorInputClassNames, renderEditorInput_unstable, useEditorInputStyles_unstable, useEditorInput_unstable } from './EditorInput';
-//# sourceMappingURL=index.js.map

package/lib-commonjs/EditorInput.js

@@ -35,4 +35,3 @@ _export(exports, {
     }
 });
 const _index = require("./components/EditorInput/index");
- //# sourceMappingURL=EditorInput.js.map

package/lib-commonjs/components/EditorInput/EditorInput.js

@@ -18,4 +18,4 @@ const EditorInput = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     (0, _useEditorInputStylesstyles.useEditorInputStyles_unstable)(state);
     return (0, _renderEditorInput.renderEditorInput_unstable)(state);
 });
-EditorInput.displayName = 'EditorInput'; //# sourceMappingURL=EditorInput.js.map
+EditorInput.displayName = 'EditorInput';

package/lib-commonjs/components/EditorInput/EditorInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["EditorInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useEditorInput_unstable } from './useEditorInput';\nimport { renderEditorInput_unstable } from './renderEditorInput';\nimport { useEditorInputStyles_unstable } from './useEditorInputStyles.styles';\nimport type { EditorInputProps } from './EditorInput.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\n// EditorInput component - TODO: add more docs\nexport const EditorInput: ForwardRefComponent<EditorInputProps> = React.forwardRef((props, ref) => {\n  const state = useEditorInput_unstable(props, ref);\n\n  useEditorInputStyles_unstable(state);\n  return renderEditorInput_unstable(state);\n});\n\nEditorInput.displayName = 'EditorInput';\n"],"names":["EditorInput","React","forwardRef","props","state","useEditorInput_unstable","useEditorInputStyles_unstable","renderEditorInput_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;gCACiB;mCACG;4CACG;AAKvC,MAAMA,cAAAA,WAAAA,GAAAA,OAAqDC,UAAMC,CAAU,CAACC,OAACA;UAClFC,QAAMA,IAAAA,uCAAQC,EAAAA,OAAwBF;iEAEtCG,EAAAA;WACAC,IAAAA,6CAAOA,EAAAA;AACT;AAEAP,YAAYQ,WAAW,GAAG"}
+{"version":3,"sources":["EditorInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useEditorInput_unstable } from './useEditorInput';\nimport { renderEditorInput_unstable } from './renderEditorInput';\nimport { useEditorInputStyles_unstable } from './useEditorInputStyles.styles';\nimport type { EditorInputProps } from './EditorInput.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\n// EditorInput component - TODO: add more docs\nexport const EditorInput: ForwardRefComponent<EditorInputProps> = React.forwardRef((props, ref) => {\n  const state = useEditorInput_unstable(props, ref);\n\n  useEditorInputStyles_unstable(state);\n  return renderEditorInput_unstable(state);\n});\n\nEditorInput.displayName = 'EditorInput';\n"],"names":["EditorInput","React","forwardRef","props","ref","state","useEditorInput_unstable","useEditorInputStyles_unstable","renderEditorInput_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;gCACiB;mCACG;4CACG;AAKvC,MAAMA,cAAAA,WAAAA,GAAqDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQC,IAAAA,uCAAAA,EAAwBH,OAAOC;IAE7CG,IAAAA,yDAAAA,EAA8BF;IAC9B,OAAOG,IAAAA,6CAAAA,EAA2BH;AACpC;AAEAL,YAAYS,WAAW,GAAG"}

package/lib-commonjs/components/EditorInput/EditorInput.types.js

@@ -4,4 +4,3 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
- //# sourceMappingURL=EditorInput.types.js.map

package/lib-commonjs/components/EditorInput/EditorInput.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["EditorInput.types.ts"],"sourcesContent":["import type { InitialConfigType, LexicalEditor, LexicalPlainTextPlugin } from '@fluentui-copilot/react-text-editor';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type EditorInputSlots = {\n  root: NonNullable<Slot<'span'>>;\n  input: NonNullable<Slot<'span'>>;\n  placeholderValue?: Slot<'span'>;\n};\n\n/**\n * EditorInput Props\n */\nexport type EditorInputProps = Omit<\n  ComponentProps<Partial<EditorInputSlots>, 'input'>,\n  'onChange' | 'onPaste' | 'defaultValue' | 'onSubmit'\n> & {\n  disabled?: boolean;\n  /**\n   * If defaultValue is a string, it will be added to the input on first render.\n   * If defaultValue is a function, it can call lexical $ functions to imperatively set the initial content with more complex nodes.\n   */\n  defaultValue?: string | (() => void);\n  /**\n   * Callback for when the user changes the value.\n   * TODO: Add proper event type for callback\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  onChange?: (ev: any, data: EditorInputValueData) => void;\n  /**\n   * Callback for when content is pasted into the Editor.\n   */\n  onPaste?: (ev: ClipboardEvent) => void;\n  /**\n   * When true, the input will be cleared when only whitespace is remaining.\n   * @default false\n   */\n  trimWhiteSpace?: boolean;\n  /**\n   * Used to register any custom nodes used by plugins added. Can also be used to override the default nodes.\n   */\n  customNodes?: InitialConfigType['nodes'];\n  /**\n   * The plugin which is in charge of initializing Lexical and is given the `input` and `placeholder` slots\n   * @default LexicalPlainTextPlugin\n   */\n  textPlugin?: typeof LexicalPlainTextPlugin;\n  /**\n   * Controls whether history is tracked to provide undo and redo functionality\n   * @default true\n   */\n  history?: boolean;\n\n  editorRef?: React.RefObject<LexicalEditor>;\n\n  /**\n   * Customize the default styles of elements inserted by Lexical in the editor.\n   */\n  customTheme?: InitialConfigType['theme'];\n\n  /**\n   * Whether or not to enable the sentinel node. The sentinel node is a node that is inserted at the end of the editor\n   * The SentinelNode fixes a Safari bug in lexical versions below 0.20.1\n   * @default true\n   */\n  isSentinelNodeEnabled?: boolean;\n};\n\n/**\n * State used in rendering EditorInput\n */\nexport type EditorInputState = ComponentState<EditorInputSlots> &\n  Required<\n    Pick<\n      EditorInputProps,\n      'disabled' | 'textPlugin' | 'history' | 'trimWhiteSpace' | 'editorRef' | 'isSentinelNodeEnabled'\n    >\n  > &\n  Partial<Pick<EditorInputProps, 'onPaste'>> & {\n    lexicalInitialConfig: InitialConfigType;\n    defaultValue?: string;\n    handleOnChange: (value: string) => void;\n  };\n\n/**\n * Data passed to the `onChange` callback when the chat input's value changes.\n */\nexport type EditorInputValueData = {\n  value: string;\n};\n"],"names":[],"rangeMappings":";;","mappings":"AAmFA;;CAEC"}
+{"version":3,"sources":["EditorInput.types.ts"],"sourcesContent":["import type { InitialConfigType, LexicalEditor, LexicalPlainTextPlugin } from '@fluentui-copilot/react-text-editor';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type EditorInputSlots = {\n  root: NonNullable<Slot<'span'>>;\n  input: NonNullable<Slot<'span'>>;\n  placeholderValue?: Slot<'span'>;\n};\n\n/**\n * EditorInput Props\n */\nexport type EditorInputProps = Omit<\n  ComponentProps<Partial<EditorInputSlots>, 'input'>,\n  'onChange' | 'onPaste' | 'defaultValue' | 'onSubmit'\n> & {\n  disabled?: boolean;\n  /**\n   * If defaultValue is a string, it will be added to the input on first render.\n   * If defaultValue is a function, it can call lexical $ functions to imperatively set the initial content with more complex nodes.\n   */\n  defaultValue?: string | (() => void);\n  /**\n   * Callback for when the user changes the value.\n   * TODO: Add proper event type for callback\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  onChange?: (ev: any, data: EditorInputValueData) => void;\n  /**\n   * Callback for when content is pasted into the Editor.\n   */\n  onPaste?: (ev: ClipboardEvent) => void;\n  /**\n   * When true, the input will be cleared when only whitespace is remaining.\n   * @default false\n   */\n  trimWhiteSpace?: boolean;\n  /**\n   * Used to register any custom nodes used by plugins added. Can also be used to override the default nodes.\n   */\n  customNodes?: InitialConfigType['nodes'];\n  /**\n   * The plugin which is in charge of initializing Lexical and is given the `input` and `placeholder` slots\n   * @default LexicalPlainTextPlugin\n   */\n  textPlugin?: typeof LexicalPlainTextPlugin;\n  /**\n   * Controls whether history is tracked to provide undo and redo functionality\n   * @default true\n   */\n  history?: boolean;\n\n  editorRef?: React.RefObject<LexicalEditor>;\n\n  /**\n   * Customize the default styles of elements inserted by Lexical in the editor.\n   */\n  customTheme?: InitialConfigType['theme'];\n\n  /**\n   * Whether or not to enable the sentinel node. The sentinel node is a node that is inserted at the end of the editor\n   * The SentinelNode fixes a Safari bug in lexical versions below 0.20.1\n   * @default true\n   */\n  isSentinelNodeEnabled?: boolean;\n  /**\n   * By default when the `defaultValue` is inserted into the editor, `onChange` is triggered.\n   * When this prop is true, if `defaultValue` is a string, `onChange` will not be triggered with its value.\n   */\n  preventDefaultValueOnChange?: boolean;\n};\n\n/**\n * State used in rendering EditorInput\n */\nexport type EditorInputState = ComponentState<EditorInputSlots> &\n  Required<\n    Pick<\n      EditorInputProps,\n      'disabled' | 'textPlugin' | 'history' | 'trimWhiteSpace' | 'editorRef' | 'isSentinelNodeEnabled'\n    >\n  > &\n  Partial<Pick<EditorInputProps, 'onPaste'>> & {\n    lexicalInitialConfig: InitialConfigType;\n    defaultValue?: string;\n    handleOnChange: (value: string) => void;\n  };\n\n/**\n * Data passed to the `onChange` callback when the chat input's value changes.\n */\nexport type EditorInputValueData = {\n  value: string;\n};\n"],"names":[],"rangeMappings":";;","mappings":"AAwFA;;CAEC"}

package/lib-commonjs/components/EditorInput/index.js

@@ -38,4 +38,3 @@ const _EditorInput = require("./EditorInput");
 const _renderEditorInput = require("./renderEditorInput");
 const _useEditorInput = require("./useEditorInput");
 const _useEditorInputStylesstyles = require("./useEditorInputStyles.styles");
- //# sourceMappingURL=index.js.map

package/lib-commonjs/components/EditorInput/renderEditorInput.js

@@ -41,4 +41,4 @@ const renderEditorInput_unstable = (state)=>{
             ]
         })
     });
-}; //# sourceMappingURL=renderEditorInput.js.map
+};

package/lib-commonjs/components/EditorInput/renderEditorInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderEditorInput.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { EditorInputState, EditorInputSlots } from './EditorInput.types';\nimport {\n  LexicalComposer,\n  LexicalErrorBoundary,\n  LexicalEditorRefPlugin,\n  LexicalHistoryPlugin,\n} from '@fluentui-copilot/react-text-editor';\nimport { BasicFunctionalityPlugin } from '@fluentui-copilot/react-chat-input-plugins';\n\n/**\n * Render the final JSX of EditorInput\n */\nexport const renderEditorInput_unstable = (state: EditorInputState) => {\n  assertSlots<EditorInputSlots>(state);\n\n  return (\n    <state.root>\n      <LexicalComposer initialConfig={state.lexicalInitialConfig}>\n        <state.textPlugin\n          contentEditable={<state.input />}\n          ErrorBoundary={LexicalErrorBoundary}\n          placeholder={state.placeholderValue ? <state.placeholderValue /> : null}\n        />\n        <>\n          <BasicFunctionalityPlugin\n            onContentChange={state.handleOnChange}\n            onPaste={state.onPaste}\n            trimWhitespace={state.trimWhiteSpace}\n            defaultValue={state.defaultValue}\n            isSentinelNodeEnabled={state.isSentinelNodeEnabled}\n          />\n          {state.history && <LexicalHistoryPlugin />}\n        </>\n        <LexicalEditorRefPlugin editorRef={state.editorRef} />\n      </LexicalComposer>\n    </state.root>\n  );\n};\n"],"names":["assertSlots","state","_jsx","root","LexicalComposer","initialConfig","lexicalInitialConfig","textPlugin","contentEditable","ErrorBoundary","LexicalErrorBoundary","placeholder","placeholderValue","BasicFunctionalityPlugin","onContentChange","onPaste","trimWhitespace","trimWhiteSpace","defaultValue","isSentinelNodeEnabled","editorRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAiBEA;;;eAAAA;;;4BAhBF;iCAE4B;iCAOrB;uCACkC;AAMvCA,MAAAA,6BAA8BC,CAAAA;oCAE9B,EAAAA;sBAEI,GAAAC,IAAAA,eAAA,EAAAD,MAAAE,IAAA,EAACC;kBAAgBC,WAAAA,GAAeJ,IAAAA,gBAAAA,EAAMK,gCAAAA,EAAAA;;;8BACpCJ,IAAAA,eAAA,EAACD,MAAMM,UAAU,EAAA;qCACfC,WAAAA,GAAAA,IAAAA,eAAAA,EAAAA,MAAAA,KAAiB,EAACP,CAAAA;mCAClBQ,qCAAeC;iCACfC,MAAAA,gBAAmBC,GAAAA,WAAgB,GAAAV,IAAAA,eAAA,EAAAD,MAAAW,gBAAUA,EAAAA,CAAAA,KAAAA;;;;mCAE/C,GAAAV,IAAAA,eAAA,EAAAW,+CAAA,EAAA;;;kDAEIC,cAAiBb;gDACjBc,YAASd;mDACTe,MAAAA,qBAAsBC;;yCACtBC,WAAAA,GAAcjB,IAAAA,eAAAA,EAAAA,qCAAkB,EAAA,CAAA;qBAAA;;mDAChCkB,uCAAAA,EAAuBlB;;;;;;gDAIcmB"}
+{"version":3,"sources":["renderEditorInput.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { EditorInputState, EditorInputSlots } from './EditorInput.types';\nimport {\n  LexicalComposer,\n  LexicalErrorBoundary,\n  LexicalEditorRefPlugin,\n  LexicalHistoryPlugin,\n} from '@fluentui-copilot/react-text-editor';\nimport { BasicFunctionalityPlugin } from '@fluentui-copilot/react-chat-input-plugins';\n\n/**\n * Render the final JSX of EditorInput\n */\nexport const renderEditorInput_unstable = (state: EditorInputState) => {\n  assertSlots<EditorInputSlots>(state);\n\n  return (\n    <state.root>\n      <LexicalComposer initialConfig={state.lexicalInitialConfig}>\n        <state.textPlugin\n          contentEditable={<state.input />}\n          ErrorBoundary={LexicalErrorBoundary}\n          placeholder={state.placeholderValue ? <state.placeholderValue /> : null}\n        />\n        <>\n          <BasicFunctionalityPlugin\n            onContentChange={state.handleOnChange}\n            onPaste={state.onPaste}\n            trimWhitespace={state.trimWhiteSpace}\n            defaultValue={state.defaultValue}\n            isSentinelNodeEnabled={state.isSentinelNodeEnabled}\n          />\n          {state.history && <LexicalHistoryPlugin />}\n        </>\n        <LexicalEditorRefPlugin editorRef={state.editorRef} />\n      </LexicalComposer>\n    </state.root>\n  );\n};\n"],"names":["renderEditorInput_unstable","state","assertSlots","_jsx","root","_jsxs","LexicalComposer","initialConfig","lexicalInitialConfig","textPlugin","contentEditable","input","ErrorBoundary","LexicalErrorBoundary","placeholder","placeholderValue","_Fragment","BasicFunctionalityPlugin","onContentChange","handleOnChange","onPaste","trimWhitespace","trimWhiteSpace","defaultValue","isSentinelNodeEnabled","history","LexicalHistoryPlugin","LexicalEditorRefPlugin","editorRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBaA;;;eAAAA;;;4BAfb;iCAE4B;iCAOrB;uCACkC;AAKlC,MAAMA,6BAA6B,CAACC;IACzCC,IAAAA,4BAAAA,EAA8BD;IAE9B,OAAA,WAAA,GACEE,IAAAA,eAAA,EAACF,MAAMG,IAAI,EAAA;kBACT,WAAA,GAAAC,IAAAA,gBAAA,EAACC,gCAAAA,EAAAA;YAAgBC,eAAeN,MAAMO,oBAAoB;;8BACxDL,IAAAA,eAAA,EAACF,MAAMQ,UAAU,EAAA;oBACfC,iBAAAA,WAAAA,GAAiBP,IAAAA,eAAA,EAACF,MAAMU,KAAK,EAAA,CAAA;oBAC7BC,eAAeC,qCAAAA;oBACfC,aAAab,MAAMc,gBAAgB,GAAA,WAAA,GAAGZ,IAAAA,eAAA,EAACF,MAAMc,gBAAgB,EAAA,CAAA,KAAM;;8BAErEV,IAAAA,gBAAA,EAAAW,oBAAA,EAAA;;sCACEb,IAAAA,eAAA,EAACc,+CAAAA,EAAAA;4BACCC,iBAAiBjB,MAAMkB,cAAc;4BACrCC,SAASnB,MAAMmB,OAAO;4BACtBC,gBAAgBpB,MAAMqB,cAAc;4BACpCC,cAActB,MAAMsB,YAAY;4BAChCC,uBAAuBvB,MAAMuB,qBAAqB;;wBAEnDvB,MAAMwB,OAAO,IAAA,WAAA,GAAItB,IAAAA,eAAA,EAACuB,qCAAAA,EAAAA,CAAAA;;;8BAErBvB,IAAAA,eAAA,EAACwB,uCAAAA,EAAAA;oBAAuBC,WAAW3B,MAAM2B,SAAS;;;;;AAI1D"}

package/lib-commonjs/components/EditorInput/useEditorInput.js

@@ -2,9 +2,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useEditorInput_unstable", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    createInitialEditorState: function() {
+        return createInitialEditorState;
+    },
+    useEditorInput_unstable: function() {
         return useEditorInput_unstable;
     }
 });
@@ -14,8 +22,11 @@ const _reactcomponents = require("@fluentui/react-components");
 const _chatinputplugins = require("@fluentui-copilot/chat-input-plugins");
 const _reacttexteditor = require("@fluentui-copilot/react-text-editor");
 const _reactutilities = require("@fluentui/react-utilities");
+const createInitialEditorState = (defaultValue)=>{
+    return `{"root":{"type":"root","children":[{"children":[{"text":${JSON.stringify(defaultValue)},"type":"text"}],"type":"paragraph"}]}}`;
+};
 const useEditorInput_unstable = (props, ref)=>{
-    const { onChange, onPaste, trimWhiteSpace = false, textPlugin = _reacttexteditor.LexicalPlainTextPlugin, history = true, editorRef: userEditorRef, customTheme, isSentinelNodeEnabled = true } = props;
+    const { onChange, onPaste, trimWhiteSpace = false, textPlugin = _reacttexteditor.LexicalPlainTextPlugin, history = true, editorRef: userEditorRef, customTheme, isSentinelNodeEnabled = true, preventDefaultValueOnChange = false } = props;
     const { root, primary } = (0, _reactcomponents.getPartitionedNativeProps)({
         primarySlotTagName: 'span',
         props,
@@ -39,8 +50,7 @@ const useEditorInput_unstable = (props, ref)=>{
         _chatinputplugins.SentinelNode
     ];
     const spanRef = _react.useCallback((span)=>{
-        var // Register the `input` span with lexical
-        _editorRef_current;
+        var _editorRef_current;
         (_editorRef_current = editorRef.current) === null || _editorRef_current === void 0 ? void 0 : _editorRef_current.setRootElement(span);
     }, [
         editorRef
@@ -78,18 +88,31 @@ const useEditorInput_unstable = (props, ref)=>{
     }, [
         onChange
     ]);
-    const [defaultString, defaultValueFunction] = (()=>{
+    const [defaultString, lexicalEditorStateDefaultValue] = _react.useMemo(()=>{
         if (typeof props.defaultValue === 'function') {
             return [
                 undefined,
                 props.defaultValue
             ];
         }
+        if (preventDefaultValueOnChange && props.defaultValue !== undefined) {
+            // Any method of providing a default value to lexical which inserts it after initialization
+            // will trigger a text content change.
+            // Providing a default value as a stringified editorState will prevent calling onChange
+            const editorState = createInitialEditorState(props.defaultValue);
+            return [
+                undefined,
+                editorState
+            ];
+        }
         return [
             props.defaultValue,
             undefined
         ];
-    })();
+    }, [
+        preventDefaultValueOnChange,
+        props.defaultValue
+    ]);
     const placeholderValue = _reactcomponents.slot.optional(props.placeholderValue, {
         elementType: 'span'
     });
@@ -128,7 +151,7 @@ const useEditorInput_unstable = (props, ref)=>{
             namespace: 'fai-EditorInput',
             onError: console.error,
             nodes: customNodes,
-            editorState: defaultValueFunction,
+            editorState: lexicalEditorStateDefaultValue,
             theme: customTheme
         },
         editorRef,
@@ -141,4 +164,4 @@ const useEditorInput_unstable = (props, ref)=>{
         history,
         isSentinelNodeEnabled
     };
-}; //# sourceMappingURL=useEditorInput.js.map
+};

package/lib-commonjs/components/EditorInput/useEditorInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useEditorInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  getPartitionedNativeProps,\n  slot,\n  useId,\n  useIsomorphicLayoutEffect,\n  useMergedRefs,\n} from '@fluentui/react-components';\nimport type { EditorInputProps, EditorInputState } from './EditorInput.types';\nimport { SentinelNode } from '@fluentui-copilot/chat-input-plugins';\nimport type { LexicalEditor } from '@fluentui-copilot/react-text-editor';\nimport { LexicalPlainTextPlugin, mergeRegister } from '@fluentui-copilot/react-text-editor';\nimport { useControllableState } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render EditorInput.\n *\n * The returned state can be modified with hooks such as useEditorInputStyles_unstable,\n * before being passed to renderEditorInput_unstable.\n *\n * @param props - props from this instance of EditorInput\n * @param ref - reference to root HTMLElement of EditorInput\n */\nexport const useEditorInput_unstable = (props: EditorInputProps, ref: React.Ref<HTMLSpanElement>): EditorInputState => {\n  const {\n    onChange,\n    onPaste,\n    trimWhiteSpace = false,\n    textPlugin = LexicalPlainTextPlugin,\n    history = true,\n    editorRef: userEditorRef,\n    customTheme,\n    isSentinelNodeEnabled = true,\n  } = props;\n  const { root, primary } = getPartitionedNativeProps({\n    primarySlotTagName: 'span',\n    props,\n    excludedPropNames: ['onChange', 'onPaste', 'defaultValue'],\n  });\n\n  const editorRef = useMergedRefs(React.useRef<LexicalEditor>(null), userEditorRef);\n  // The disabled state can also be changed by lexical (e.g. by a custom plugin) so\n  // we use `useControllableState` to coordinate\n  const [disabled, setDisabled] = useControllableState({\n    state: props.disabled,\n    initialState: false,\n  });\n\n  const customNodes = props.customNodes ? [...props.customNodes, SentinelNode] : [SentinelNode];\n\n  const spanRef = React.useCallback(\n    span => {\n      // Register the `input` span with lexical\n      editorRef.current?.setRootElement(span);\n    },\n    [editorRef],\n  );\n\n  // Update lexical when disabled changes\n  useIsomorphicLayoutEffect(() => {\n    if (editorRef.current) {\n      editorRef.current?.setEditable(!disabled);\n    }\n  }, [disabled]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (editorRef.current) {\n      return mergeRegister(\n        editorRef.current.registerEditableListener(isEditable => {\n          setDisabled(!isEditable);\n        }),\n        editorRef.current?.registerRootListener(root => {\n          if (!root) {\n            return;\n          }\n\n          // Remove lexical's inline style so we can apply our own\n          // Lexical needs the whitespace style to be either `pre` or `pre-wrap` to work correctly\n          root.style.whiteSpace = '';\n        }),\n      );\n    }\n  }, [editorRef]);\n\n  const handleOnChange = React.useCallback(\n    (newValue: string) => {\n      onChange?.({}, { value: newValue });\n    },\n    [onChange],\n  );\n\n  const [defaultString, defaultValueFunction] = (() => {\n    if (typeof props.defaultValue === 'function') {\n      return [undefined, props.defaultValue];\n    }\n    return [props.defaultValue, undefined];\n  })();\n\n  const placeholderValue = slot.optional(props.placeholderValue, { elementType: 'span' });\n  const placeholderId = useId('chat-input-placeholder', placeholderValue?.id);\n  if (placeholderValue) {\n    placeholderValue.id = placeholderId;\n  }\n\n  return {\n    components: {\n      root: 'span',\n      input: 'span',\n      placeholderValue: 'span',\n    },\n    root: slot.always(props.root, { defaultProps: { ...root }, elementType: 'span' }),\n    input: slot.always(props.input, {\n      defaultProps: {\n        ref: useMergedRefs(ref, spanRef),\n        role: 'textbox',\n        contentEditable: !disabled,\n        'aria-readonly': disabled ? true : undefined,\n        disabled,\n        suppressContentEditableWarning: true,\n        tabIndex: disabled ? undefined : 0,\n        ...primary,\n        'aria-describedby': primary['aria-describedby']\n          ? `${primary['aria-describedby']} ${placeholderId}`\n          : placeholderId,\n      },\n      elementType: 'span',\n    }),\n    placeholderValue,\n    lexicalInitialConfig: {\n      namespace: 'fai-EditorInput',\n      onError: console.error,\n      nodes: customNodes,\n      editorState: defaultValueFunction,\n      theme: customTheme,\n    },\n    editorRef,\n    disabled,\n    textPlugin,\n    onPaste,\n    handleOnChange,\n    defaultValue: defaultString,\n    trimWhiteSpace,\n    history,\n    isSentinelNodeEnabled,\n  };\n};\n"],"names":["onChange","trimWhiteSpace","primarySlotTagName","props","excludedPropNames","LexicalPlainTextPlugin","userEditorRef","isSentinelNodeEnabled","root","primary","disabled","customNodes","SentinelNode","setDisabled","useControllableState","state","spanRef","React","editorRef","current","useCallback","span","_editorRef_current","useIsomorphicLayoutEffect","setRootElement","isEditable","registerRootListener","style","whiteSpace","handleOnChange","newValue","defaultString","defaultValueFunction","undefined","defaultValue","placeholderId","useId","placeholderValue","id","components","elementType","input","ref","useMergedRefs","slot","defaultProps","tabIndex","role","suppressContentEditableWarning","customTheme","nodes","textPlugin"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["useEditorInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  getPartitionedNativeProps,\n  slot,\n  useId,\n  useIsomorphicLayoutEffect,\n  useMergedRefs,\n} from '@fluentui/react-components';\nimport type { EditorInputProps, EditorInputState } from './EditorInput.types';\nimport { SentinelNode } from '@fluentui-copilot/chat-input-plugins';\nimport type { LexicalEditor } from '@fluentui-copilot/react-text-editor';\nimport { LexicalPlainTextPlugin, mergeRegister } from '@fluentui-copilot/react-text-editor';\nimport { useControllableState } from '@fluentui/react-utilities';\n\nexport const createInitialEditorState = (defaultValue: string) => {\n  return `{\"root\":{\"type\":\"root\",\"children\":[{\"children\":[{\"text\":${JSON.stringify(\n    defaultValue,\n  )},\"type\":\"text\"}],\"type\":\"paragraph\"}]}}`;\n};\n\n/**\n * Create the state required to render EditorInput.\n *\n * The returned state can be modified with hooks such as useEditorInputStyles_unstable,\n * before being passed to renderEditorInput_unstable.\n *\n * @param props - props from this instance of EditorInput\n * @param ref - reference to root HTMLElement of EditorInput\n */\nexport const useEditorInput_unstable = (props: EditorInputProps, ref: React.Ref<HTMLSpanElement>): EditorInputState => {\n  const {\n    onChange,\n    onPaste,\n    trimWhiteSpace = false,\n    textPlugin = LexicalPlainTextPlugin,\n    history = true,\n    editorRef: userEditorRef,\n    customTheme,\n    isSentinelNodeEnabled = true,\n    preventDefaultValueOnChange = false,\n  } = props;\n  const { root, primary } = getPartitionedNativeProps({\n    primarySlotTagName: 'span',\n    props,\n    excludedPropNames: ['onChange', 'onPaste', 'defaultValue'],\n  });\n\n  const editorRef = useMergedRefs(React.useRef<LexicalEditor>(null), userEditorRef);\n  // The disabled state can also be changed by lexical (e.g. by a custom plugin) so\n  // we use `useControllableState` to coordinate\n  const [disabled, setDisabled] = useControllableState({\n    state: props.disabled,\n    initialState: false,\n  });\n\n  const customNodes = props.customNodes ? [...props.customNodes, SentinelNode] : [SentinelNode];\n\n  const spanRef = React.useCallback(\n    span => {\n      // Register the `input` span with lexical\n      editorRef.current?.setRootElement(span);\n    },\n    [editorRef],\n  );\n\n  // Update lexical when disabled changes\n  useIsomorphicLayoutEffect(() => {\n    if (editorRef.current) {\n      editorRef.current?.setEditable(!disabled);\n    }\n  }, [disabled]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (editorRef.current) {\n      return mergeRegister(\n        editorRef.current.registerEditableListener(isEditable => {\n          setDisabled(!isEditable);\n        }),\n        editorRef.current?.registerRootListener(root => {\n          if (!root) {\n            return;\n          }\n\n          // Remove lexical's inline style so we can apply our own\n          // Lexical needs the whitespace style to be either `pre` or `pre-wrap` to work correctly\n          root.style.whiteSpace = '';\n        }),\n      );\n    }\n  }, [editorRef]);\n\n  const handleOnChange = React.useCallback(\n    (newValue: string) => {\n      onChange?.({}, { value: newValue });\n    },\n    [onChange],\n  );\n\n  const [defaultString, lexicalEditorStateDefaultValue] = React.useMemo(() => {\n    if (typeof props.defaultValue === 'function') {\n      return [undefined, props.defaultValue];\n    }\n\n    if (preventDefaultValueOnChange && props.defaultValue !== undefined) {\n      // Any method of providing a default value to lexical which inserts it after initialization\n      // will trigger a text content change.\n      // Providing a default value as a stringified editorState will prevent calling onChange\n      const editorState = createInitialEditorState(props.defaultValue);\n      return [undefined, editorState];\n    }\n\n    return [props.defaultValue, undefined];\n  }, [preventDefaultValueOnChange, props.defaultValue]);\n\n  const placeholderValue = slot.optional(props.placeholderValue, { elementType: 'span' });\n  const placeholderId = useId('chat-input-placeholder', placeholderValue?.id);\n  if (placeholderValue) {\n    placeholderValue.id = placeholderId;\n  }\n\n  return {\n    components: {\n      root: 'span',\n      input: 'span',\n      placeholderValue: 'span',\n    },\n    root: slot.always(props.root, { defaultProps: { ...root }, elementType: 'span' }),\n    input: slot.always(props.input, {\n      defaultProps: {\n        ref: useMergedRefs(ref, spanRef),\n        role: 'textbox',\n        contentEditable: !disabled,\n        'aria-readonly': disabled ? true : undefined,\n        disabled,\n        suppressContentEditableWarning: true,\n        tabIndex: disabled ? undefined : 0,\n        ...primary,\n        'aria-describedby': primary['aria-describedby']\n          ? `${primary['aria-describedby']} ${placeholderId}`\n          : placeholderId,\n      },\n      elementType: 'span',\n    }),\n    placeholderValue,\n    lexicalInitialConfig: {\n      namespace: 'fai-EditorInput',\n      onError: console.error,\n      nodes: customNodes,\n      editorState: lexicalEditorStateDefaultValue,\n      theme: customTheme,\n    },\n    editorRef,\n    disabled,\n    textPlugin,\n    onPaste,\n    handleOnChange,\n    defaultValue: defaultString,\n    trimWhiteSpace,\n    history,\n    isSentinelNodeEnabled,\n  };\n};\n"],"names":["createInitialEditorState","useEditorInput_unstable","defaultValue","JSON","stringify","props","ref","onChange","onPaste","trimWhiteSpace","textPlugin","LexicalPlainTextPlugin","history","editorRef","userEditorRef","customTheme","isSentinelNodeEnabled","preventDefaultValueOnChange","root","primary","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","useMergedRefs","React","useRef","disabled","setDisabled","useControllableState","state","initialState","customNodes","SentinelNode","spanRef","useCallback","span","current","setRootElement","useIsomorphicLayoutEffect","setEditable","mergeRegister","registerEditableListener","isEditable","registerRootListener","style","whiteSpace","handleOnChange","newValue","value","defaultString","lexicalEditorStateDefaultValue","useMemo","undefined","editorState","placeholderValue","slot","optional","elementType","placeholderId","useId","id","components","input","always","defaultProps","role","contentEditable","suppressContentEditableWarning","tabIndex","lexicalInitialConfig","namespace","onError","console","error","nodes","theme"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/EditorInput/useEditorInputStyles.styles.raw.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    editorInputClassNames: function() {
+        return editorInputClassNames;
+    },
+    useEditorInputStyles_unstable: function() {
+        return useEditorInputStyles_unstable;
+    },
+    useInputClassName: function() {
+        return useInputClassName;
+    },
+    useLexicalStyles: function() {
+        return useLexicalStyles;
+    },
+    usePlaceholderClassName: function() {
+        return usePlaceholderClassName;
+    }
+});
+const _reactcomponents = require("@fluentui/react-components");
+const _tokens = require("@fluentui-copilot/tokens");
+const editorInputClassNames = {
+    root: 'fai-EditorInput',
+    input: 'fai-EditorInput__input',
+    placeholderValue: 'fai-EditorInput__placeholderValue'
+};
+/**
+ * Styles for the root slot
+ */ const useRootClassName = (0, _reactcomponents.makeResetStyles)({
+    display: 'inline-grid',
+    whiteSpace: 'pre-wrap'
+});
+const useLexicalStyles = (0, _reactcomponents.makeStyles)({
+    paragraph: {
+        margin: 0,
+        textAlign: 'start'
+    }
+});
+const usePlaceholderClassName = (0, _reactcomponents.makeResetStyles)({
+    zIndex: 0,
+    gridArea: '1 / 1 / 1 / 1',
+    color: _tokens.tokens.colorNeutralForeground4,
+    ..._reactcomponents.typographyStyles.body1,
+    '@media (forced-colors: active)': {
+        color: 'GrayText'
+    }
+});
+const useInputClassName = (0, _reactcomponents.makeResetStyles)({
+    gridArea: '1 / 1 / 1 / 1',
+    zIndex: 1,
+    width: '100%'
+});
+const useStyles = (0, _reactcomponents.makeStyles)({
+    placeholderDisabled: {
+        color: _tokens.tokens.colorNeutralForegroundDisabled
+    }
+});
+const useEditorInputStyles_unstable = (state)=>{
+    'use no memo';
+    const { disabled } = state;
+    const placeholderClassName = usePlaceholderClassName();
+    const rootClassName = useRootClassName();
+    const inputClassName = useInputClassName();
+    const styles = useStyles();
+    state.root.className = (0, _reactcomponents.mergeClasses)(editorInputClassNames.root, rootClassName, state.root.className);
+    state.input.className = (0, _reactcomponents.mergeClasses)(editorInputClassNames.input, inputClassName, state.input.className);
+    state.lexicalInitialConfig = {
+        ...state.lexicalInitialConfig,
+        theme: {
+            ...useLexicalStyles(),
+            ...state.lexicalInitialConfig.theme
+        }
+    };
+    if (state.placeholderValue) {
+        state.placeholderValue.className = (0, _reactcomponents.mergeClasses)(editorInputClassNames.placeholderValue, placeholderClassName, disabled && styles.placeholderDisabled, state.placeholderValue.className);
+    }
+    return state;
+};

package/lib-commonjs/components/EditorInput/useEditorInputStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useEditorInputStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, typographyStyles } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { SlotClassNames } from '@fluentui/react-components';\nimport type { EditorInputSlots, EditorInputState } from './EditorInput.types';\n\nexport const editorInputClassNames: SlotClassNames<EditorInputSlots> = {\n  root: 'fai-EditorInput',\n  input: 'fai-EditorInput__input',\n  placeholderValue: 'fai-EditorInput__placeholderValue',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootClassName = makeResetStyles({\n  display: 'inline-grid',\n  whiteSpace: 'pre-wrap',\n});\n\nexport const useLexicalStyles = makeStyles({\n  paragraph: {\n    margin: 0,\n    textAlign: 'start',\n  },\n});\n\nexport const usePlaceholderClassName = makeResetStyles({\n  zIndex: 0,\n  gridArea: '1 / 1 / 1 / 1',\n\n  color: tokens.colorNeutralForeground4,\n  ...typographyStyles.body1,\n\n  '@media (forced-colors: active)': {\n    color: 'GrayText',\n  },\n});\n\nexport const useInputClassName = makeResetStyles({\n  gridArea: '1 / 1 / 1 / 1',\n  zIndex: 1,\n  width: '100%',\n});\n\nconst useStyles = makeStyles({\n  placeholderDisabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n  },\n});\n/**\n * Apply styling to the EditorInput slots based on the state\n */\nexport const useEditorInputStyles_unstable = (state: EditorInputState): EditorInputState => {\n  'use no memo';\n\n  const { disabled } = state;\n  const placeholderClassName = usePlaceholderClassName();\n  const rootClassName = useRootClassName();\n  const inputClassName = useInputClassName();\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(editorInputClassNames.root, rootClassName, state.root.className);\n\n  state.input.className = mergeClasses(editorInputClassNames.input, inputClassName, state.input.className);\n\n  state.lexicalInitialConfig = {\n    ...state.lexicalInitialConfig,\n    theme: { ...useLexicalStyles(), ...state.lexicalInitialConfig.theme },\n  };\n\n  if (state.placeholderValue) {\n    state.placeholderValue.className = mergeClasses(\n      editorInputClassNames.placeholderValue,\n      placeholderClassName,\n      disabled && styles.placeholderDisabled,\n      state.placeholderValue.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["editorInputClassNames","useEditorInputStyles_unstable","useInputClassName","useLexicalStyles","usePlaceholderClassName","root","input","placeholderValue","useRootClassName","makeResetStyles","display","whiteSpace","makeStyles","paragraph","margin","textAlign","zIndex","gridArea","color","tokens","colorNeutralForeground4","typographyStyles","body1","width","useStyles","placeholderDisabled","colorNeutralForegroundDisabled","state","disabled","placeholderClassName","rootClassName","inputClassName","styles","className","mergeClasses","lexicalInitialConfig","theme"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,qBAAAA;eAAAA;;IA+CAC,6BAAAA;eAAAA;;IAdAC,iBAAAA;eAAAA;;IAnBAC,gBAAAA;eAAAA;;IAOAC,uBAAAA;eAAAA;;;iCA1B+D;wBACrD;AAIhB,MAAMJ,wBAA0D;IACrEK,MAAM;IACNC,OAAO;IACPC,kBAAkB;AACpB;AAEA;;CAEC,GACD,MAAMC,mBAAmBC,IAAAA,gCAAAA,EAAgB;IACvCC,SAAS;IACTC,YAAY;AACd;AAEO,MAAMR,mBAAmBS,IAAAA,2BAAAA,EAAW;IACzCC,WAAW;QACTC,QAAQ;QACRC,WAAW;IACb;AACF;AAEO,MAAMX,0BAA0BK,IAAAA,gCAAAA,EAAgB;IACrDO,QAAQ;IACRC,UAAU;IAEVC,OAAOC,cAAAA,CAAOC,uBAAuB;IACrC,GAAGC,iCAAAA,CAAiBC,KAAK;IAEzB,kCAAkC;QAChCJ,OAAO;IACT;AACF;AAEO,MAAMhB,oBAAoBO,IAAAA,gCAAAA,EAAgB;IAC/CQ,UAAU;IACVD,QAAQ;IACRO,OAAO;AACT;AAEA,MAAMC,YAAYZ,IAAAA,2BAAAA,EAAW;IAC3Ba,qBAAqB;QACnBP,OAAOC,cAAAA,CAAOO,8BAA8B;IAC9C;AACF;AAIO,MAAMzB,gCAAgC,CAAC0B;IAC5C;IAEA,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IACrB,MAAME,uBAAuBzB;IAC7B,MAAM0B,gBAAgBtB;IACtB,MAAMuB,iBAAiB7B;IACvB,MAAM8B,SAASR;IAEfG,MAAMtB,IAAI,CAAC4B,SAAS,GAAGC,IAAAA,6BAAAA,EAAalC,sBAAsBK,IAAI,EAAEyB,eAAeH,MAAMtB,IAAI,CAAC4B,SAAS;IAEnGN,MAAMrB,KAAK,CAAC2B,SAAS,GAAGC,IAAAA,6BAAAA,EAAalC,sBAAsBM,KAAK,EAAEyB,gBAAgBJ,MAAMrB,KAAK,CAAC2B,SAAS;IAEvGN,MAAMQ,oBAAoB,GAAG;QAC3B,GAAGR,MAAMQ,oBAAoB;QAC7BC,OAAO;YAAE,GAAGjC,kBAAkB;YAAE,GAAGwB,MAAMQ,oBAAoB,CAACC,KAAK;QAAC;IACtE;IAEA,IAAIT,MAAMpB,gBAAgB,EAAE;QAC1BoB,MAAMpB,gBAAgB,CAAC0B,SAAS,GAAGC,IAAAA,6BAAAA,EACjClC,sBAAsBO,gBAAgB,EACtCsB,sBACAD,YAAYI,OAAOP,mBAAmB,EACtCE,MAAMpB,gBAAgB,CAAC0B,SAAS;IAEpC;IAEA,OAAON;AACT"}

package/lib-commonjs/index.js

@@ -26,4 +26,3 @@ _export(exports, {
     }
 });
 const _EditorInput = require("./EditorInput");
- //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-copilot/react-editor-input",
-  "version": "0.4.7",
+  "version": "0.4.9-hotfix.1",
   "description": "a base rich editor input.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,26 +12,22 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui-copilot/chat-input-plugins": "^0.4.2",
-    "@fluentui-copilot/react-chat-input-plugins": "^0.4.6",
-    "@fluentui-copilot/react-text-editor": "^0.4.1",
-    "@fluentui-copilot/tokens": "^0.3.8",
+    "@fluentui-copilot/chat-input-plugins": "0.4.2-hotfix.1",
+    "@fluentui-copilot/react-chat-input-plugins": "0.4.8-hotfix.1",
+    "@fluentui-copilot/react-text-editor": "0.4.1-hotfix.1",
+    "@fluentui-copilot/tokens": "0.3.10-hotfix.1",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
-    "@fluentui/react-components": ">=9.55.1 <10.0.0",
-    "@fluentui/react-jsx-runtime": ">=9.0.45 <10.0.0",
-    "@fluentui/react-utilities": ">=9.18.16 <10.0.0",
+    "@fluentui/react-components": ">=9.58.3 <10.0.0",
+    "@fluentui/react-jsx-runtime": ">=9.0.50 <10.0.0",
+    "@fluentui/react-utilities": ">=9.19.0 <10.0.0",
     "@types/react": ">=16.14.0 <19.0.0",
     "@types/react-dom": ">=16.9.8 <19.0.0",
     "react": ">=16.14.0 <19.0.0",
     "react-dom": ">=16.14.0 <19.0.0"
   },
-  "beachball": {
-    "disallowedChangeTypes": [
-      "major"
-    ]
-  },
+  "beachball": {},
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",