@pareto-engineering/design-system 4.2.0 → 4.2.1

package/dist/cjs/g/FormBuilder/common/Builder/common/InputBuilder/styles.scss

@@ -54,55 +54,6 @@ $default-list-width: var(--action-button-width, 18rem);
             font-size: calc(var(--s1) * 1rem);
           }
         }
-
-        > .actions {
-          position: relative;
-
-          > button {
-            background-color: transparent;
-            border: 0;
-            cursor: pointer;
-          }
-
-          > .#{bem.$base}.popover {
-            background-color: var(--background-cards);
-            border: var(--theme-default-border-style) var(--main2);
-            border-radius: calc(var(--theme-default-border-radius) / 2);
-            cursor: default;
-            padding: $default-padding;
-            width: $default-list-width;
-
-            > p {
-              margin: 0;
-            }
-
-            > ul {
-              list-style: none;
-              margin: 0;
-              padding: 0;
-              white-space: nowrap;
-
-              > .option {
-                cursor: pointer;
-                padding-block: calc($default-padding / 4);
-
-                &:not(.with-check-mark) {
-                  padding-inline: $default-padding;
-                }
-
-                > button {
-                  background: transparent;
-                  border: 0;
-                  color: var(--paragraph);
-                  cursor: pointer;
-                  font-size: calc(var(--s0) * .875rem);
-                  text-align: left;
-                  width: 100%;
-                }
-              }
-            }
-          }
-        }
       }
     }
 

package/dist/cjs/g/FormBuilder/common/Builder/common/Section/Section.js

@@ -12,6 +12,8 @@ var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports")
 var _f = require("../../../../../../f");
 var _ = require("../../../../..");
 var _InputBuilder = require("../InputBuilder");
+var _ActionsContainer = require("../ActionsContainer");
+require("./styles.scss");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -20,7 +22,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 // Local Definitions
 
 const baseClassName = _exports.default.base;
-const componentClassName = 'section';
+const componentClassName = 'builder-section';
 
 /**
  * This is the component description.
@@ -30,7 +32,8 @@ const Section = _ref => {
     id,
     className: userClassName,
     style,
-    index
+    index,
+    handleDeleteSection
     // ...otherProps
   } = _ref;
   const {
@@ -72,9 +75,17 @@ const Section = _ref => {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
     style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "section-header"
   }, /*#__PURE__*/React.createElement("p", {
     className: "h4"
-  }, index === 0 ? 'Form title' : `Section ${index + 1}`), /*#__PURE__*/React.createElement(_f.TextInput, {
+  }, index === 0 ? 'Form title' : `Section ${index + 1}`), index !== 0 && /*#__PURE__*/React.createElement(_ActionsContainer.ActionsContainer, null, /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", {
+    className: "option"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "remove-section-cta",
+    onClick: handleDeleteSection
+  }, "Delete Section"))))), /*#__PURE__*/React.createElement(_f.TextInput, {
     name: `sections.${index}.title`,
     placeholder: `Title of the ${index === 0 ? 'form' : 'section'}`
   }), /*#__PURE__*/React.createElement(_f.EditorInput, {

package/dist/cjs/g/FormBuilder/common/Builder/common/Section/styles.scss

@@ -0,0 +1,61 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+
+@use "@pareto-engineering/bem";
+
+$default-margin: 1rem;
+
+.#{bem.$base}.builder-section {
+  border-bottom: var(--theme-default-border-style) var(--on-background-inputs);
+
+
+  > .section-header {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  > .#{bem.$base}.editor-input {
+    margin-top: $default-margin;
+  }
+
+  > form {
+    /* stylelint-disable selector-max-compound-selectors -- required */
+    > .add-question-cta {
+      align-items: center;
+      background-color: transparent;
+      border: 0;
+      color: var(--hard-interactive);
+      cursor: pointer;
+      display: flex;
+      gap: var(--gap);
+      margin-block: calc($default-margin * 1.5);
+      margin-left: auto;
+      padding: 0;
+      transition: all .2s;
+
+      &:hover {
+        color: var(--interactive);
+
+        > .icon-container {
+          background-color: var(--interactive);
+        }
+      }
+
+      > .icon-container {
+        align-items: center;
+        background-color: var(--hard-interactive);
+        border-radius: 50%;
+        display: flex;
+        height: 1.6rem;
+        justify-content: center;
+        width: 1.6rem;
+
+        > .icon {
+          color: var(--on-interactive);
+        }
+      }
+    }
+  }
+}
+
+

package/dist/cjs/g/FormBuilder/common/Builder/common/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "ActionsContainer", {
+  enumerable: true,
+  get: function () {
+    return _ActionsContainer.ActionsContainer;
+  }
+});
 Object.defineProperty(exports, "InputBuilder", {
   enumerable: true,
   get: function () {
@@ -16,4 +22,5 @@ Object.defineProperty(exports, "Section", {
   }
 });
 var _Section = require("./Section");
-var _InputBuilder = require("./InputBuilder");
+var _InputBuilder = require("./InputBuilder");
+var _ActionsContainer = require("./ActionsContainer");

package/dist/cjs/g/FormBuilder/common/Builder/styles.scss

@@ -49,56 +49,13 @@ $default-margin: 1rem;
         flex: .4;
         gap: var(--gap);
 
-        > .#{bem.$base}.select-input {
-          flex: auto;
+        /* stylelint-disable-next-line selector-max-compound-selectors -- required */
+        > span {
+          white-space: nowrap;
         }
-      }
-    }
-    > .#{bem.$base}.section {
-      border-bottom: var(--theme-default-border-style) var(--on-background-inputs);
-
-      > .#{bem.$base}.editor-input {
-        margin-top: $default-margin;
-      }
 
-      > form {
-        /* stylelint-disable selector-max-compound-selectors -- required */
-        > .add-question-cta {
-          align-items: center;
-          background-color: transparent;
-          border: 0;
-          color: var(--hard-interactive);
-          cursor: pointer;
-          display: flex;
-          gap: var(--gap);
-          margin-block: calc($default-margin * 1.5);
-          margin-left: auto;
-          padding: 0;
-          transition: all .2s;
-
-          /* stylelint-disable-next-line max-nesting-depth -- required */
-          &:hover {
-            color: var(--interactive);
-
-            /* stylelint-disable max-nesting-depth -- required */
-            > .icon-container {
-              background-color: var(--interactive);
-            }
-          }
-
-          > .icon-container {
-            align-items: center;
-            background-color: var(--hard-interactive);
-            border-radius: 50%;
-            display: flex;
-            height: 1.6rem;
-            justify-content: center;
-            width: 1.6rem;
-
-            > .icon {
-              color: var(--on-interactive);
-            }
-          }
+        > .#{bem.$base}.select-input {
+          flex: auto;
         }
       }
     }

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

@@ -18,6 +18,27 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 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 */ // Local Definitions
 const baseClassName = _exports.default.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.
@@ -28,28 +49,36 @@ const Renderer = _ref => {
     className: userClassName,
     style,
     formData,
-    onSave
+    readOnly,
+    onSave,
+    onError,
+    shouldSubmit
     // ...otherProps
   } = _ref;
   const [currentSectionIndex, setCurrentSectionIndex] = (0, _react.useState)(0);
   const [sectionHistory, setSectionHistory] = (0, _react.useState)([]);
-  const initialValues = formData.sections.reduce((acc, section) => {
-    section.inputs.forEach(input => {
-      acc[input.name] = '';
+  const [updatedFormData, setUpdatedFormData] = (0, _react.useState)(formData);
+  (0, _react.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 {
@@ -68,28 +97,50 @@ const Renderer = _ref => {
       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.Formik, {
     initialValues: initialValues,
-    onSubmit: handleSubmit
-  }, /*#__PURE__*/React.createElement(_formik.Form, null, formData.sections.map((section, sectionIndex) => sectionIndex === currentSectionIndex && /*#__PURE__*/React.createElement(_common.Section, _extends({
-    key: `${section.title}`
-  }, section))), /*#__PURE__*/React.createElement("div", {
-    className: "navigator-container"
-  }, /*#__PURE__*/React.createElement(_b.Button, {
-    color: "interactive",
-    isGradient: true,
-    isGhost: true,
-    onClick: handlePrevious,
-    disabled: sectionHistory.length === 0
-  }, "Previous"), /*#__PURE__*/React.createElement(_b.Button, {
-    color: "interactive",
-    isGradient: true,
-    type: "submit"
-  }, formData.sections[currentSectionIndex].navigation.nextSection === 'submit' ? 'Submit' : 'Next')))));
+    onSubmit: handleSubmit,
+    validate: validate
+  }, _ref2 => {
+    let {
+      values,
+      errors
+    } = _ref2;
+    (0, _react.useEffect)(() => {
+      const formDataWithValues = reconstructFormDataWithValues(updatedFormData, values);
+      setUpdatedFormData(formDataWithValues);
+      onSave?.(formDataWithValues);
+    }, [values]);
+    (0, _react.useEffect)(() => {
+      onError?.({
+        errors,
+        values
+      });
+    }, [errors, values]);
+    return /*#__PURE__*/React.createElement(_formik.Form, null, updatedFormData.sections.map((section, sectionIndex) => sectionIndex === currentSectionIndex && /*#__PURE__*/React.createElement(_common.Section, _extends({
+      key: `${section.title}`
+    }, section, {
+      readOnly: readOnly
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: "navigator-container"
+    }, /*#__PURE__*/React.createElement(_b.Button, {
+      color: "interactive",
+      isGradient: true,
+      isCompact: true,
+      isGhost: true,
+      onClick: handlePrevious,
+      disabled: sectionHistory.length === 0
+    }, "Previous"), (!isSubmit || shouldSubmit) && /*#__PURE__*/React.createElement(_b.Button, {
+      color: "interactive",
+      isGradient: true,
+      type: "submit"
+    }, isSubmit ? 'Submit' : 'Next')));
+  }));
 };
 Renderer.propTypes = {
   /**
@@ -103,17 +154,9 @@ Renderer.propTypes = {
   /**
    * The React-written, css properties for this element.
    */
-  style: _propTypes.default.objectOf(_propTypes.default.string),
-  /**
-   *  The children JSX
-   */
-  formData: _propTypes.default.shape({
-    formTitle: _propTypes.default.string.isRequired,
-    formDescription: _propTypes.default.string.isRequired,
-    sections: _propTypes.default.arrayOf(_propTypes.default.objectOf(_propTypes.default.any))
-  })
+  style: _propTypes.default.objectOf(_propTypes.default.string)
 };
 Renderer.defaultProps = {
-  // someProp:false
+  // someProp: false,
 };
 var _default = exports.default = Renderer;

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

@@ -26,19 +26,24 @@ const Section = _ref => {
     style,
     title,
     description,
-    inputs
+    inputs,
+    readOnly
     // ...otherProps
   } = _ref;
   return /*#__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(_f.FormInput, _extends({
     key: input.name
-  }, input))));
+  }, input, {
+    disabled: readOnly
+  }))));
 };
 Section.propTypes = {
   /**

package/dist/cjs/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/dist/es/a/XMLEditor/XMLEditor.js

@@ -27,9 +27,7 @@ const XMLEditor = ({
   gutterWidth,
   config,
   onChange,
-  onBlur,
-  stopAllPropagation,
-  stopPropagationKeys
+  onBlur
 }) => {
   const editorRef = useRef();
   useEffect(() => {
@@ -44,9 +42,7 @@ const XMLEditor = ({
         }
       }), EditorView.domEventHandlers({
         keydown(e) {
-          if (stopPropagationKeys?.includes(e.key) || stopAllPropagation) {
-            e.stopPropagation();
-          }
+          e.stopPropagation();
         }
       })]
     });
@@ -102,18 +98,10 @@ XMLEditor.propTypes = {
    * The width of the gutter.
    */
   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
+  onBlur: PropTypes.func
 };
 XMLEditor.defaultProps = {
   config: `<View>

package/dist/es/f/fields/EditorInput/EditorInput.js

@@ -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';
@@ -48,7 +48,6 @@ const EditorInput = ({
   style,
   name,
   label,
-  // validate,
   resize,
   color,
   rows,
@@ -57,20 +56,17 @@ const EditorInput = ({
   description,
   disabled,
   showDebugger,
-  stopPropagationKeys,
   setEditorState
-  // handleOnChange,
   // ...otherProps
 }) => {
+  const [field,,] = useField(name);
   const {
-    values,
     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: {
@@ -97,7 +93,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);
     }
   };
@@ -147,9 +143,7 @@ const EditorInput = ({
     onChange: onChange
   }), /*#__PURE__*/React.createElement(LinkPlugin, null), /*#__PURE__*/React.createElement(LexicalClickableLinkPlugin, null), /*#__PURE__*/React.createElement(TabIndentationPlugin, null), setEditorState && /*#__PURE__*/React.createElement(ExposeEditorStatePlugin, {
     setEditorState: setEditorState
-  }), /*#__PURE__*/React.createElement(HistoryPlugin, null), stopPropagationKeys && /*#__PURE__*/React.createElement(StopPropagationPlugin, {
-    stopPropagationKeys: stopPropagationKeys
-  }), /*#__PURE__*/React.createElement(FormDescription, {
+  }), /*#__PURE__*/React.createElement(HistoryPlugin, null), /*#__PURE__*/React.createElement(StopPropagationPlugin, null), /*#__PURE__*/React.createElement(FormDescription, {
     className: "s-1",
     description: description,
     name: name
@@ -176,11 +170,6 @@ EditorInput.propTypes = {
    * The input label
    */
   label: PropTypes.string.isRequired,
-  /**
-   * The input value validator function
-   */
-  // validate:PropTypes.func,
-
   /**
    * The number of rows int the text area
    */
@@ -212,11 +201,7 @@ 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)
+  showDebugger: PropTypes.bool
 };
 EditorInput.defaultProps = {
   rows: 10,

package/dist/es/f/fields/EditorInput/common/StopPropagationPlugin.js

@@ -1,14 +1,10 @@
 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((rootElement, prevRootElement) => {
       if (prevRootElement !== null) {

package/dist/es/f/fields/SelectInput/common/Menu/Menu.js

@@ -32,7 +32,7 @@ const Menu = /*#__PURE__*/React.forwardRef(({
   item,
   index
 }), {
-  className: ['item', highlightedIndex === index && styleNames.modifierActive].filter(Boolean).join(' ')
+  className: ['item', item.disabled && styleNames.modifierDisabled, highlightedIndex === index && styleNames.modifierActive].filter(Boolean).join(' ')
 }), /*#__PURE__*/React.createElement("p", null, item.label)))));
 Menu.propTypes = {
   /**

package/dist/es/f/fields/SelectInput/common/Multiple/Multiple.js

@@ -127,7 +127,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/dist/es/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 {