@pareto-engineering/design-system 4.2.0 → 4.2.1

package/dist/es/g/FormBuilder/common/Renderer/Renderer.js

@@ -1,8 +1,8 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /* @pareto-engineering/generator-front 1.1.1-alpha.2 */
 import * as React from 'react';
+import { useState, useEffect } from 'react';
 import { Formik, Form } from 'formik';
-import { useState } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 import { Button } from "../../../../b";
@@ -13,6 +13,27 @@ import "./styles.scss";
 import { Section } from "./common";
 const baseClassName = styleNames.base;
 const componentClassName = 'renderer';
+const reconstructFormDataWithValues = (formData, values) => {
+  const newData = {
+    ...formData
+  };
+  Object.keys(values).forEach(key => {
+    const [sectionIdx, inputIdx] = key.match(/\d+/g).map(Number);
+    newData.sections[sectionIdx].inputs[inputIdx].value = values[key];
+  });
+  return newData;
+};
+const validate = values => {
+  const errors = {};
+  const hasAtLeastOneValue = Object.keys(values).some(valueKey => {
+    const inputValue = values[valueKey];
+    return inputValue && inputValue !== '';
+  });
+  if (!hasAtLeastOneValue) {
+    errors.message = 'At least one input must have a value';
+  }
+  return errors;
+};
 
 /**
  * This is the component description.
@@ -22,28 +43,36 @@ const Renderer = ({
   className: userClassName,
   style,
   formData,
-  onSave
+  readOnly,
+  onSave,
+  onError,
+  shouldSubmit
   // ...otherProps
 }) => {
   const [currentSectionIndex, setCurrentSectionIndex] = useState(0);
   const [sectionHistory, setSectionHistory] = useState([]);
-  const initialValues = formData.sections.reduce((acc, section) => {
-    section.inputs.forEach(input => {
-      acc[input.name] = '';
+  const [updatedFormData, setUpdatedFormData] = useState(formData);
+  useEffect(() => {
+    setUpdatedFormData(formData);
+  }, [formData]);
+  const initialValues = formData.sections.reduce((acc, section, sectionIndex) => {
+    section.inputs.forEach((input, inputIndex) => {
+      const inputName = `section_${sectionIndex}_input_${inputIndex}`;
+      acc[inputName] = input.value || '';
     });
     return acc;
   }, {});
   const handleSubmit = values => {
-    const currentSection = formData.sections[currentSectionIndex];
+    const currentSection = updatedFormData.sections[currentSectionIndex];
     // by default, 'next' section is the immediate section after the current one
     let nextSectionIndex = currentSectionIndex + 1;
 
     // Any other value is either submit or an index to a section
     if (currentSection.navigation.nextSection !== 'next') {
-      nextSectionIndex = currentSection.navigation.nextSection === 'submit' ? formData.sections.length // submit
+      nextSectionIndex = currentSection.navigation.nextSection === 'submit' ? updatedFormData.sections.length // submit
       : parseInt(currentSection.navigation.nextSection, 10); // go to specific section
     }
-    if (nextSectionIndex >= formData.sections.length) {
+    if (nextSectionIndex >= updatedFormData.sections.length) {
       // submit
       onSave(values);
     } else {
@@ -62,28 +91,49 @@ const Renderer = ({
       setSectionHistory([...sectionHistory]);
     }
   };
+  const isSubmit = currentSectionIndex === updatedFormData.sections.length - 1 || updatedFormData.sections[currentSectionIndex].navigation.nextSection === 'submit';
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
     style: style
   }, /*#__PURE__*/React.createElement(Formik, {
     initialValues: initialValues,
-    onSubmit: handleSubmit
-  }, /*#__PURE__*/React.createElement(Form, null, formData.sections.map((section, sectionIndex) => sectionIndex === currentSectionIndex && /*#__PURE__*/React.createElement(Section, _extends({
-    key: `${section.title}`
-  }, section))), /*#__PURE__*/React.createElement("div", {
-    className: "navigator-container"
-  }, /*#__PURE__*/React.createElement(Button, {
-    color: "interactive",
-    isGradient: true,
-    isGhost: true,
-    onClick: handlePrevious,
-    disabled: sectionHistory.length === 0
-  }, "Previous"), /*#__PURE__*/React.createElement(Button, {
-    color: "interactive",
-    isGradient: true,
-    type: "submit"
-  }, formData.sections[currentSectionIndex].navigation.nextSection === 'submit' ? 'Submit' : 'Next')))));
+    onSubmit: handleSubmit,
+    validate: validate
+  }, ({
+    values,
+    errors
+  }) => {
+    useEffect(() => {
+      const formDataWithValues = reconstructFormDataWithValues(updatedFormData, values);
+      setUpdatedFormData(formDataWithValues);
+      onSave?.(formDataWithValues);
+    }, [values]);
+    useEffect(() => {
+      onError?.({
+        errors,
+        values
+      });
+    }, [errors, values]);
+    return /*#__PURE__*/React.createElement(Form, null, updatedFormData.sections.map((section, sectionIndex) => sectionIndex === currentSectionIndex && /*#__PURE__*/React.createElement(Section, _extends({
+      key: `${section.title}`
+    }, section, {
+      readOnly: readOnly
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: "navigator-container"
+    }, /*#__PURE__*/React.createElement(Button, {
+      color: "interactive",
+      isGradient: true,
+      isCompact: true,
+      isGhost: true,
+      onClick: handlePrevious,
+      disabled: sectionHistory.length === 0
+    }, "Previous"), (!isSubmit || shouldSubmit) && /*#__PURE__*/React.createElement(Button, {
+      color: "interactive",
+      isGradient: true,
+      type: "submit"
+    }, isSubmit ? 'Submit' : 'Next')));
+  }));
 };
 Renderer.propTypes = {
   /**
@@ -97,17 +147,9 @@ Renderer.propTypes = {
   /**
    * The React-written, css properties for this element.
    */
-  style: PropTypes.objectOf(PropTypes.string),
-  /**
-   *  The children JSX
-   */
-  formData: PropTypes.shape({
-    formTitle: PropTypes.string.isRequired,
-    formDescription: PropTypes.string.isRequired,
-    sections: PropTypes.arrayOf(PropTypes.objectOf(PropTypes.any))
-  })
+  style: PropTypes.objectOf(PropTypes.string)
 };
 Renderer.defaultProps = {
-  // someProp:false
+  // someProp: false,
 };
 export default Renderer;

package/dist/es/g/FormBuilder/common/Renderer/common/Section/Section.js

@@ -20,18 +20,23 @@ const Section = ({
   style,
   title,
   description,
-  inputs
+  inputs,
+  readOnly
   // ...otherProps
 }) => /*#__PURE__*/React.createElement("div", {
   id: id,
   className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
   style: style
-}, /*#__PURE__*/React.createElement("h3", null, title), /*#__PURE__*/React.createElement(ExpandableLexicalPreview, {
+}, /*#__PURE__*/React.createElement("p", {
+  className: "h3"
+}, title), /*#__PURE__*/React.createElement(ExpandableLexicalPreview, {
   nodes: description,
   name: "instructions"
 }), inputs.map(input => /*#__PURE__*/React.createElement(FormInput, _extends({
   key: input.name
-}, input))));
+}, input, {
+  disabled: readOnly
+}))));
 Section.propTypes = {
   /**
    * The HTML id for this element

package/dist/es/g/FormBuilder/common/Renderer/styles.scss

@@ -6,10 +6,21 @@ $default-margin: 1rem;
 
 .#{bem.$base}.renderer {
   > form {
+    > .#{bem.$base}.section {
+      margin-bottom: calc($default-margin * 2);
+
+      > p {
+        margin: 0;
+      }
+      > .#{bem.$base}.expandable-lexical-preview {
+        margin-bottom: $default-margin;
+      }
+    }
+
     > .navigator-container {
       display: flex;
       gap: var(--gap);
-      margin-top: $default-margin;
+      justify-content: space-between;
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -59,8 +59,8 @@
     "@lexical/selection": "0.12.2",
     "@lexical/table": "0.12.2",
     "@lexical/utils": "0.12.2",
-    "@pareto-engineering/assets": "^4.1.0",
-    "@pareto-engineering/bem": "^4.0.0",
+    "@pareto-engineering/assets": "^4.2.1",
+    "@pareto-engineering/bem": "^4.2.1",
     "@pareto-engineering/styles": "^4.2.0",
     "@pareto-engineering/utils": "^4.0.0",
     "codemirror": "^6.0.1",
@@ -82,5 +82,5 @@
     "relay-test-utils": "^15.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "7b24b23f9f4b091e2046d21bc0984cf7b7e6c0da"
+  "gitHead": "9dc4c06f6e3f8efe94eb0fa4f301ca6f046c5075"
 }

package/src/stories/g/FormBuilder.stories.jsx

@@ -44,38 +44,82 @@ export const Builder = {
 const sampleFormData = {
   sections:[
     {
-      title      :'titlel',
-      description:'{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"background-color: #a37575;","text":"asdvczvcsdvjksadvkl sdvasdvn mdvaskldvnsdavkjc,mndsvb asdvsdvsadv","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1}],"direction":"ltr","format":"","indent":0,"type":"root","version":1}}',
-      key        :'section-title',
+      title      :'This is a survey of some of the best LLM models out there',
+      description:'{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Best LLM models for software developers","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"heading","version":1,"tag":"h3"},{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Chat GPT","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":1},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Perplexity","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":2},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Gemini","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":3},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Claude","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":4}],"direction":"ltr","format":"","indent":0,"type":"list","version":1,"listType":"bullet","start":1,"tag":"ul"},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Please add more exciting models that we might missed","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"quote","version":1},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"You can make them ","type":"text","version":1},{"detail":0,"format":1,"mode":"normal","style":"","text":"bold","type":"text","version":1},{"detail":0,"format":0,"mode":"normal","style":"","text":" or ","type":"text","version":1},{"detail":0,"format":2,"mode":"normal","style":"","text":"Italic or ","type":"text","version":1},{"detail":0,"format":10,"mode":"normal","style":"","text":"underlined","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1},{"children":[{"detail":0,"format":4,"mode":"normal","style":"color: #110b53;","text":"You can also color them and strike through them!","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1}],"direction":"ltr","format":"","indent":0,"type":"root","version":1}}',
+      key        :'section-0',
       inputs     :[
         {
-          name    :'section_0_input_0',
-          label   :'Names',
-          type    :'multiple',
-          required:false,
-          options :[
+          name            :'section_0_input_0',
+          label           :'Name the Model',
+          type            :'text',
+          required        :true,
+          options         :[],
+          conditionalLogic:null,
+          description     :'',
+        },
+        {
+          name            :'section_0_input_1',
+          label           :'Describe the Model in detail',
+          type            :'textarea',
+          required        :false,
+          options         :[],
+          conditionalLogic:null,
+          description     :'brief model description',
+        },
+      ],
+      orderedInputDragIds:[],
+      navigation         :{
+        nextSection:'next',
+      },
+    },
+    {
+      title      :'Rate the Models',
+      description:'{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Best LLM models for software developers","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1},{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Chat GPT","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":1},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Perplexity","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":2},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Gemini","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":3},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Claude","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":4}],"direction":"ltr","format":"","indent":0,"type":"list","version":1,"listType":"bullet","start":1,"tag":"ul"},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Please add more exciting models that we might missed","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"quote","version":1},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"You can make them ","type":"text","version":1},{"detail":0,"format":1,"mode":"normal","style":"","text":"bold","type":"text","version":1},{"detail":0,"format":0,"mode":"normal","style":"","text":" or ","type":"text","version":1},{"detail":0,"format":2,"mode":"normal","style":"","text":"Italic or ","type":"text","version":1},{"detail":0,"format":10,"mode":"normal","style":"","text":"underlined","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1},{"children":[{"detail":0,"format":4,"mode":"normal","style":"","text":"You can also color them and strike through them!","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1}],"direction":"ltr","format":"","indent":0,"type":"root","version":1}}',
+      key        :'section-1',
+      inputs     :[
+        {
+          type   :'choices',
+          options:[
             {
-              key        :'sections-0-inputs-0-options--1',
-              value      :'James',
-              label      :'James',
+              key        :'sections-1-inputs-0-options--1',
+              value      :'Chat GPT',
+              label      :'Chat GPT',
               nextSection:'',
             },
             {
-              key        :'sections-0-inputs-0-options-0',
-              value      :'Coigo',
-              label      :'Coigo',
+              key        :'sections-1-inputs-0-options-0',
+              value      :'Gemini',
+              label      :'Gemini',
+              nextSection:'',
+            },
+          ],
+          required   :true,
+          description:'',
+          name       :'section_1_input_0',
+          label      :'Which is better between the 2?',
+        },
+        {
+          name    :'section_1_input_1',
+          label   :'Choose the worst of them ',
+          type    :'multiple',
+          required:false,
+          options :[
+            {
+              key        :'sections-1-inputs-1-options--1',
+              value      :'Chat GPT',
+              label      :'Chat GPT',
               nextSection:'',
             },
             {
-              key        :'sections-0-inputs-0-options-1',
-              value      :'Nyanjui',
-              label      :'Nyanjui',
+              key        :'sections-1-inputs-1-options-0',
+              value      :'Gemini',
+              label      :'Gemini',
               nextSection:'',
             },
             {
-              key        :'sections-0-inputs-0-options-2',
-              value      :'Masalia',
-              label      :'Masalia',
+              key        :'sections-1-inputs-1-options-1',
+              value      :'Claude',
+              label      :'Claude',
               nextSection:'',
             },
           ],
@@ -83,15 +127,66 @@ const sampleFormData = {
           description     :'',
         },
       ],
-      navigation:{
+      orderedInputDragIds:[],
+      navigation         :{
+        nextSection:'next',
+      },
+    },
+    {
+      title      :'General sentiments',
+      description:'{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Best LLM models for software developers","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"heading","version":1,"tag":"h3"},{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Chat GPT","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":1},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Perplexity","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":2},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Gemini","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":3},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Claude","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":4}],"direction":"ltr","format":"","indent":0,"type":"list","version":1,"listType":"bullet","start":1,"tag":"ul"},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Please add more exciting models that we might missed","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"quote","version":1},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"You can make them ","type":"text","version":1},{"detail":0,"format":1,"mode":"normal","style":"","text":"bold","type":"text","version":1},{"detail":0,"format":0,"mode":"normal","style":"","text":" or ","type":"text","version":1},{"detail":0,"format":2,"mode":"normal","style":"","text":"Italic or ","type":"text","version":1},{"detail":0,"format":10,"mode":"normal","style":"","text":"underlined","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1},{"children":[{"detail":0,"format":4,"mode":"normal","style":"","text":"You can also color them and strike through them!","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1}],"direction":"ltr","format":"","indent":0,"type":"root","version":1}}',
+      key        :'section-2',
+      inputs     :[
+        {
+          type       :'textarea',
+          options    :[],
+          required   :true,
+          description:'',
+          name       :'section_2_input_0',
+          label      :'Give a final brief description of your findings',
+        },
+      ],
+      orderedInputDragIds:[],
+      navigation         :{
         nextSection:'next',
       },
     },
   ],
 }
+
 export const Renderer = {
   args:{
     mode    :'render',
     formData:sampleFormData,
   },
+  render:(args) => {
+    const [values, setValues] = useState({})
+
+    const handleFormDataUpdateWithValues = (argsValues) => {
+      setValues(argsValues)
+    }
+
+    return (
+      <>
+        <FormBuilder {...args} onRendererFormSave={handleFormDataUpdateWithValues} />
+        <pre>{JSON.stringify(values, null, 2)}</pre>
+      </>
+    )
+  },
+}
+
+export const RendererWithSubmit = {
+  ...Renderer,
+  args:{
+    ...Renderer.args,
+    shouldSubmit:true,
+  },
+}
+
+export const RendererWithDisabled = {
+  ...Renderer,
+  args:{
+    ...Renderer.args,
+    readOnly:true,
+  },
 }

package/src/ui/a/XMLEditor/XMLEditor.jsx

@@ -58,8 +58,6 @@ const XMLEditor = ({
   config,
   onChange,
   onBlur,
-  stopAllPropagation,
-  stopPropagationKeys,
 }) => {
   const editorRef = useRef()
 
@@ -93,9 +91,7 @@ const XMLEditor = ({
         }),
         EditorView.domEventHandlers({
           keydown(e) {
-            if (stopPropagationKeys?.includes(e.key) || stopAllPropagation) {
-              e.stopPropagation()
-            }
+            e.stopPropagation()
           },
         }),
       ],
@@ -172,20 +168,10 @@ XMLEditor.propTypes = {
    */
   gutterWidth:PropTypes.string,
 
-  /**
-   * The keys to stop propagation on.
-   */
-  stopPropagationKeys:PropTypes.arrayOf(PropTypes.string),
-
   /**
    * The callback for when the editor loses focus.
    */
   onBlur:PropTypes.func,
-
-  /**
-   * Whether to stop all propagation of keys to keep focus on the editor.
-   */
-  stopAllPropagation:PropTypes.bool,
 }
 
 XMLEditor.defaultProps = {

package/src/ui/f/fields/EditorInput/EditorInput.jsx

@@ -2,7 +2,7 @@
 /* eslint-disable import/no-extraneous-dependencies -- required here */
 import * as React from 'react'
 import { memo, useEffect } from 'react'
-import { useFormikContext } from 'formik'
+import { useField, useFormikContext } from 'formik'
 import { LexicalComposer } from '@lexical/react/LexicalComposer'
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'
 import { ContentEditable } from '@lexical/react/LexicalContentEditable'
@@ -51,7 +51,6 @@ const EditorInput = ({
   style,
   name,
   label,
-  // validate,
   resize,
   color,
   rows,
@@ -60,19 +59,16 @@ const EditorInput = ({
   description,
   disabled,
   showDebugger,
-  stopPropagationKeys,
   setEditorState,
-  // handleOnChange,
   // ...otherProps
 }) => {
-  const { values, setFieldValue } = useFormikContext()
+  const [field, ,] = useField(name)
+  const { setFieldValue } = useFormikContext()
 
   const setInitialValue = () => {
-    const value = values[name]
-
     try {
-      JSON.parse(value)
-      return value
+      JSON.parse(field.value)
+      return field.value
     } catch {
       const defaultValue = {
         root:{
@@ -103,7 +99,7 @@ const EditorInput = ({
           version  :1,
         },
       }
-      defaultValue.root.children[0].children[0].text = value
+      defaultValue.root.children[0].children[0].text = field.value
       return JSON.stringify(defaultValue)
     }
   }
@@ -188,9 +184,7 @@ const EditorInput = ({
         <TabIndentationPlugin />
         {setEditorState && <ExposeEditorStatePlugin setEditorState={setEditorState} />}
         <HistoryPlugin />
-        { stopPropagationKeys && (
-          <StopPropagationPlugin stopPropagationKeys={stopPropagationKeys} />
-        )}
+        <StopPropagationPlugin />
         <FormDescription className="s-1" description={description} name={name} />
         { showDebugger && <TreeViewPlugin /> }
       </div>
@@ -224,11 +218,6 @@ EditorInput.propTypes = {
    */
   label:PropTypes.string.isRequired,
 
-  /**
-   * The input value validator function
-   */
-  // validate:PropTypes.func,
-
   /**
    * The number of rows int the text area
    */
@@ -268,11 +257,6 @@ EditorInput.propTypes = {
    * Whether to show the debugger or not
    */
   showDebugger:PropTypes.bool,
-
-  /**
-   * Map to stop propagation of the given keys
-   */
-  stopPropagationKeys:PropTypes.arrayOf(PropTypes.string),
 }
 
 EditorInput.defaultProps = {

package/src/ui/f/fields/EditorInput/common/StopPropagationPlugin.jsx

@@ -1,16 +1,12 @@
 import { useInsertionEffect } from 'react'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 
-const StopPropagationPlugin = ({
-  stopPropagationKeys,
-}) => {
+const StopPropagationPlugin = () => {
   const [editor] = useLexicalComposerContext()
 
   useInsertionEffect(() => {
     const onKeyDown = (e) => {
-      if (stopPropagationKeys?.includes(e.key)) {
-        e.stopPropagation()
-      }
+      e.stopPropagation()
     }
 
     return editor.registerRootListener(

package/src/ui/f/fields/SelectInput/common/Menu/Menu.jsx

@@ -45,6 +45,7 @@ const Menu = React.forwardRef(({
         {...getItemProps({ item, index })}
         className={[
           'item',
+          item.disabled && styleNames.modifierDisabled,
           highlightedIndex === index && styleNames.modifierActive,
         ].filter(Boolean)
           .join(' ')}

package/src/ui/f/fields/SelectInput/common/Multiple/Multiple.jsx

@@ -133,7 +133,7 @@ const Multiple = ({
         case useCombobox.stateChangeTypes.InputKeyDownEnter:
         case useCombobox.stateChangeTypes.ItemClick:
         case useCombobox.stateChangeTypes.InputBlur:
-          if (selectedItem) {
+          if (selectedItem && !selectedItem?.disabled) {
             setSearchInputValue('')
             addSelectedItem(selectedItem)
           }

package/src/ui/f/fields/SelectInput/styles.scss

@@ -122,7 +122,7 @@ $default-gap: var(--gap);
             margin: 0;
           }
 
-          &.#{bem.$modifier-active} {
+          &.#{bem.$modifier-active}:not(.disabled) {
             background-color: var(--y);
 
             > p {