@pareto-engineering/design-system 4.2.0 → 4.2.1

package/dist/cjs/a/XMLEditor/XMLEditor.js

@@ -38,9 +38,7 @@ const XMLEditor = _ref => {
     gutterWidth,
     config,
     onChange,
-    onBlur,
-    stopAllPropagation,
-    stopPropagationKeys
+    onBlur
   } = _ref;
   const editorRef = (0, _react.useRef)();
   (0, _react.useEffect)(() => {
@@ -55,9 +53,7 @@ const XMLEditor = _ref => {
         }
       }), _view.EditorView.domEventHandlers({
         keydown(e) {
-          if (stopPropagationKeys?.includes(e.key) || stopAllPropagation) {
-            e.stopPropagation();
-          }
+          e.stopPropagation();
         }
       })]
     });
@@ -113,18 +109,10 @@ XMLEditor.propTypes = {
    * The width of the gutter.
    */
   gutterWidth: _propTypes.default.string,
-  /**
-   * The keys to stop propagation on.
-   */
-  stopPropagationKeys: _propTypes.default.arrayOf(_propTypes.default.string),
   /**
    * The callback for when the editor loses focus.
    */
-  onBlur: _propTypes.default.func,
-  /**
-   * Whether to stop all propagation of keys to keep focus on the editor.
-   */
-  stopAllPropagation: _propTypes.default.bool
+  onBlur: _propTypes.default.func
 };
 XMLEditor.defaultProps = {
   config: `<View>

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

@@ -59,7 +59,6 @@ const EditorInput = _ref2 => {
     style,
     name,
     label,
-    // validate,
     resize,
     color,
     rows,
@@ -68,20 +67,17 @@ const EditorInput = _ref2 => {
     description,
     disabled,
     showDebugger,
-    stopPropagationKeys,
     setEditorState
-    // handleOnChange,
     // ...otherProps
   } = _ref2;
+  const [field,,] = (0, _formik.useField)(name);
   const {
-    values,
     setFieldValue
   } = (0, _formik.useFormikContext)();
   const setInitialValue = () => {
-    const value = values[name];
     try {
-      JSON.parse(value);
-      return value;
+      JSON.parse(field.value);
+      return field.value;
     } catch {
       const defaultValue = {
         root: {
@@ -108,7 +104,7 @@ const EditorInput = _ref2 => {
           version: 1
         }
       };
-      defaultValue.root.children[0].children[0].text = value;
+      defaultValue.root.children[0].children[0].text = field.value;
       return JSON.stringify(defaultValue);
     }
   };
@@ -158,9 +154,7 @@ const EditorInput = _ref2 => {
     onChange: onChange
   }), /*#__PURE__*/React.createElement(_LexicalLinkPlugin.LinkPlugin, null), /*#__PURE__*/React.createElement(_LexicalClickableLinkPlugin.default, null), /*#__PURE__*/React.createElement(_LexicalTabIndentationPlugin.TabIndentationPlugin, null), setEditorState && /*#__PURE__*/React.createElement(ExposeEditorStatePlugin, {
     setEditorState: setEditorState
-  }), /*#__PURE__*/React.createElement(_LexicalHistoryPlugin.HistoryPlugin, null), stopPropagationKeys && /*#__PURE__*/React.createElement(_common2.StopPropagationPlugin, {
-    stopPropagationKeys: stopPropagationKeys
-  }), /*#__PURE__*/React.createElement(_common.FormDescription, {
+  }), /*#__PURE__*/React.createElement(_LexicalHistoryPlugin.HistoryPlugin, null), /*#__PURE__*/React.createElement(_common2.StopPropagationPlugin, null), /*#__PURE__*/React.createElement(_common.FormDescription, {
     className: "s-1",
     description: description,
     name: name
@@ -187,11 +181,6 @@ EditorInput.propTypes = {
    * The input label
    */
   label: _propTypes.default.string.isRequired,
-  /**
-   * The input value validator function
-   */
-  // validate:PropTypes.func,
-
   /**
    * The number of rows int the text area
    */
@@ -223,11 +212,7 @@ EditorInput.propTypes = {
   /**
    * Whether to show the debugger or not
    */
-  showDebugger: _propTypes.default.bool,
-  /**
-   * Map to stop propagation of the given keys
-   */
-  stopPropagationKeys: _propTypes.default.arrayOf(_propTypes.default.string)
+  showDebugger: _propTypes.default.bool
 };
 EditorInput.defaultProps = {
   rows: 10,

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

@@ -6,16 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
-const StopPropagationPlugin = _ref => {
-  let {
-    stopPropagationKeys
-  } = _ref;
+const StopPropagationPlugin = () => {
   const [editor] = (0, _LexicalComposerContext.useLexicalComposerContext)();
   (0, _react.useInsertionEffect)(() => {
     const onKeyDown = e => {
-      if (stopPropagationKeys?.includes(e.key)) {
-        e.stopPropagation();
-      }
+      e.stopPropagation();
     };
     return editor.registerRootListener((rootElement, prevRootElement) => {
       if (prevRootElement !== null) {

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

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

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

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

package/dist/cjs/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 {

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

@@ -29,9 +29,15 @@ const FormBuilder = _ref => {
     style,
     mode,
     formData,
+    readOnly,
+    shouldSubmit,
     formBuilderId,
     onBuilderFormSave,
-    onRendererFormSave
+    onBuilderError,
+    onRendererError,
+    onRendererFormSave,
+    onBuilderValidate,
+    initialBuilderValues
     // ...otherProps
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
@@ -40,11 +46,17 @@ const FormBuilder = _ref => {
     style: style
     // {...otherProps}
   }, mode === 'build' && /*#__PURE__*/React.createElement(_common.Builder, {
+    initialValues: initialBuilderValues,
     formBuilderId: formBuilderId,
-    onSave: onBuilderFormSave
+    onSave: onBuilderFormSave,
+    onError: onBuilderError,
+    validate: onBuilderValidate
   }), mode === 'render' && /*#__PURE__*/React.createElement(_common.Renderer, {
     formData: formData,
-    onSave: onRendererFormSave
+    onSave: onRendererFormSave,
+    readOnly: readOnly,
+    shouldSubmit: shouldSubmit,
+    onError: onRendererError
   }));
 };
 FormBuilder.propTypes = {
@@ -67,10 +79,31 @@ FormBuilder.propTypes = {
   /**
    * This is the ID of the form element in the <Builder /> component
    */
-  formBuilderId: _propTypes.default.string.isRequired
+  formBuilderId: _propTypes.default.string.isRequired,
+  /**
+   *  The form data to be used to construct the form builder in renderer mode
+   */
+  formData: _propTypes.default.shape({
+    sections: _propTypes.default.arrayOf(_propTypes.default.objectOf(_propTypes.default.any))
+  }),
+  /**
+   *  The initial values to instatiate form builder in builder mode
+   */
+  initialBuilderValues: _propTypes.default.shape({
+    sections: _propTypes.default.arrayOf(_propTypes.default.objectOf(_propTypes.default.any))
+  }),
+  /**
+   * Whether the whole Form in renderer mode should be readOnly
+   */
+  readOnly: _propTypes.default.bool,
+  /**
+   * Whether the form builder in renderer mode should submit the form values itself
+   */
+  shouldSubmit: _propTypes.default.bool
 };
 FormBuilder.defaultProps = {
-  mode: 'build'
+  mode: 'build',
+  readOnly: false
 };
 FormBuilder.Builder = _common.Builder;
 FormBuilder.Renderer = _common.Renderer;

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

@@ -4,7 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
 var _formik = require("formik");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
@@ -38,12 +39,42 @@ const Builder = _ref => {
     className: userClassName,
     style,
     onSave,
-    formBuilderId
+    onError,
+    validate,
+    formBuilderId,
+    initialValues = {}
     // ...otherProps
   } = _ref;
   const handleSubmit = values => {
     const reOrderedValues = reorderInputs(values);
-    onSave(reOrderedValues);
+    onSave?.(reOrderedValues);
+  };
+  const initialFormState = initialValues?.sections ? initialValues : {
+    sections: [{
+      title: '',
+      description: '',
+      key: 'section-0',
+      inputs: [],
+      orderedInputDragIds: [],
+      navigation: {
+        nextSection: 'next'
+      }
+    }]
+  };
+  const handleDeleteSection = _ref2 => {
+    let {
+      index,
+      remove,
+      values
+    } = _ref2;
+    remove(index);
+    values.sections.splice(index, 1);
+    values.sections.forEach((section, sectionIndex) => {
+      section.inputs.forEach((input, inputIndex) => {
+        // eslint-disable-next-line no-param-reassign
+        input.name = `section_${sectionIndex}_input_${inputIndex}`;
+      });
+    });
   };
   return /*#__PURE__*/React.createElement("div", {
     id: id,
@@ -52,24 +83,23 @@ const Builder = _ref => {
   }, /*#__PURE__*/React.createElement("p", {
     className: "h3"
   }, "Form Builder"), /*#__PURE__*/React.createElement(_formik.Formik, {
-    initialValues: {
-      sections: [{
-        title: '',
-        description: '',
-        key: 'section-0',
-        inputs: [],
-        orderedInputDragIds: [],
-        navigation: {
-          nextSection: 'next'
-        }
-      }]
-    },
-    onSubmit: handleSubmit
-  }, _ref2 => {
+    initialValues: initialFormState,
+    onSubmit: handleSubmit,
+    validate: validate
+  }, _ref3 => {
     let {
-      values
-    } = _ref2;
-    const availableSections = values.sections.map((section, idx) => ({
+      values,
+      errors,
+      setFieldValue
+    } = _ref3;
+    (0, _react.useEffect)(() => {
+      const reOrderedValues = reorderInputs(values);
+      onSave?.(reOrderedValues);
+    }, [values]);
+    (0, _react.useEffect)(() => {
+      onError?.(errors);
+    }, [errors, values]);
+    const availableSections = values?.sections?.map((section, idx) => ({
       value: idx,
       label: `Go to ${section.title || `Untitled Section ${idx + 1}`}`
     }));
@@ -77,13 +107,20 @@ const Builder = _ref => {
       id: formBuilderId
     }, /*#__PURE__*/React.createElement(_formik.FieldArray, {
       name: "sections"
-    }, _ref3 => {
+    }, _ref4 => {
       let {
-        push
-      } = _ref3;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, values.sections.map((section, index) => /*#__PURE__*/React.createElement(_common.Section, {
+        push,
+        remove
+      } = _ref4;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, values?.sections?.map((section, index) => /*#__PURE__*/React.createElement(_common.Section, {
         key: section.key,
-        index: index
+        index: index,
+        handleDeleteSection: () => handleDeleteSection({
+          index,
+          remove,
+          values,
+          setFieldValue
+        })
       })), /*#__PURE__*/React.createElement("div", {
         className: "section-footer"
       }, /*#__PURE__*/React.createElement("button", {

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

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+require("./styles.scss");
+var _utils = require("../../../../../../utils");
+var _a = require("../../../../../../a");
+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; }
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+
+// Local Definitions
+
+const baseClassName = _exports.default.base;
+const componentClassName = 'actions-container';
+
+/**
+ * This is the component description.
+ */
+const ActionsContainer = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    preferredPopoverOrder,
+    children
+    // ...otherProps
+  } = _ref;
+  const parentRef = (0, _react.useRef)(null);
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  (0, _utils.useOutsideClick)(parentRef, () => setIsOpen(false));
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style,
+    ref: parentRef
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: () => setIsOpen(!isOpen)
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "icon x-ui-icons c-x"
+  }, "!")), /*#__PURE__*/React.createElement(_a.Popover, {
+    isOpen: isOpen,
+    parentRef: parentRef,
+    preferredPrimaryOrder: preferredPopoverOrder
+  }, children));
+};
+ActionsContainer.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: _propTypes.default.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: _propTypes.default.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: _propTypes.default.objectOf(_propTypes.default.string),
+  /**
+   * The preferred order for the popover
+   */
+  preferredPopoverOrder: _propTypes.default.arrayOf(_propTypes.default.string),
+  /**
+   * The children of the actions container
+   */
+  children: _propTypes.default.node
+};
+ActionsContainer.defaultProps = {
+  preferredPopoverOrder: ['right', 'bottom', 'left', 'top']
+};
+var _default = exports.default = ActionsContainer;

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ActionsContainer", {
+  enumerable: true,
+  get: function () {
+    return _ActionsContainer.default;
+  }
+});
+var _ActionsContainer = _interopRequireDefault(require("./ActionsContainer"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

@@ -0,0 +1,59 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+
+@use "@pareto-engineering/bem";
+
+$default-padding: 1rem;
+$default-margin: 1rem;
+$default-list-width: var(--action-button-width, 18rem);
+
+.#{bem.$base}.actions-container {
+  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;
+        }
+
+        /* stylelint-disable-next-line selector-max-compound-selectors -- required */
+        > 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/InputBuilder/InputBuilder.js

@@ -11,8 +11,8 @@ var _formik = require("formik");
 var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
 var _f = require("../../../../../../f");
 var _a = require("../../../../../../a");
-var _utils = require("../../../../../../utils");
 require("./styles.scss");
+var _ActionsContainer = require("../ActionsContainer");
 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; }
@@ -33,32 +33,32 @@ const InputBuilder = _ref => {
     style,
     sectionIndex,
     inputIndex,
-    onDelete,
+    onDelete
     // onCopy,
-    preferredPopoverOrder
     // ...otherProps
   } = _ref;
   const {
     values,
     setFieldValue
   } = (0, _formik.useFormikContext)();
-  const input = values.sections[sectionIndex].inputs[inputIndex];
+  const input = values.sections[sectionIndex]?.inputs[inputIndex];
   const handleToggleRequired = () => {
-    setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.required`, !input.required);
+    setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.required`, !input?.required);
   };
   const toggleSwitchStyles = {
     ...(!input?.required ? {
       '--slider-background-color': 'var(--disabled)'
     } : {})
   };
-  const parentRef = (0, _react.useRef)(null);
-  const [isOpen, setIsOpen] = (0, _react.useState)(false);
-  (0, _utils.useOutsideClick)(parentRef, () => setIsOpen(false));
   const [hasDescription, setHasDescription] = (0, _react.useState)(false);
-  const handleToggleConditionalNavigation = () => {
-    setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.conditionalNavigation`, !input.conditionalNavigation);
-  };
-  const availableSections = values.sections.map((section, idx) => ({
+
+  // TODO: handle nav logic
+  // const handleToggleConditionalNavigation = () => {
+  //   setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.conditionalNavigation`,
+  // !input?.conditionalNavigation)
+  // }
+
+  const availableSections = values?.sections?.map((section, idx) => ({
     value: idx,
     label: `Go to ${section.title || `Untitled Section ${idx + 1}`}`
   }));
@@ -96,9 +96,6 @@ const InputBuilder = _ref => {
     }, {
       value: 'select',
       label: 'Dropdown select'
-    }, {
-      value: 'editor',
-      label: 'Editor input'
     }, {
       value: 'multiple',
       label: 'Checkboxes'
@@ -122,33 +119,14 @@ const InputBuilder = _ref => {
     checked: input?.required,
     style: toggleSwitchStyles,
     inputId: `sections_${sectionIndex}_inputs.${inputIndex}_toggle`
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "actions",
-    ref: parentRef
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    onClick: () => setIsOpen(!isOpen)
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon x-ui-icons c-x"
-  }, "!")), /*#__PURE__*/React.createElement(_a.Popover, {
-    isOpen: isOpen,
-    parentRef: parentRef,
-    preferredPrimaryOrder: preferredPopoverOrder
-  }, /*#__PURE__*/React.createElement("p", null, "Show"), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", {
+  })), /*#__PURE__*/React.createElement(_ActionsContainer.ActionsContainer, null, /*#__PURE__*/React.createElement("p", null, "Show"), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", {
     className: `option ${hasDescription ? 'with-check-mark' : ''}`
   }, hasDescription && /*#__PURE__*/React.createElement("span", {
     className: "x-ui-icons c-x icon"
   }, "I"), /*#__PURE__*/React.createElement("button", {
     onClick: () => setHasDescription(!hasDescription),
     type: "button"
-  }, "Description")), /*#__PURE__*/React.createElement("li", {
-    className: `option ${input?.conditionalNavigation ? 'with-check-mark' : ''}`
-  }, input?.conditionalNavigation && /*#__PURE__*/React.createElement("span", {
-    className: "x-ui-icons c-x icon"
-  }, "I"), /*#__PURE__*/React.createElement("button", {
-    onClick: handleToggleConditionalNavigation,
-    type: "button"
-  }, "Go to section based on answer"))))))), /*#__PURE__*/React.createElement("div", {
+  }, "Description")))))), /*#__PURE__*/React.createElement("div", {
     className: "input-name-description"
   }, /*#__PURE__*/React.createElement(_f.TextInput, {
     label: "Input name",
@@ -170,8 +148,8 @@ const InputBuilder = _ref => {
     }, /*#__PURE__*/React.createElement("p", null, "Options"), input?.options.map((option, optionIndex) => /*#__PURE__*/React.createElement("div", {
       key: option.key,
       className: "option-container"
-    }, input.type !== 'select' && /*#__PURE__*/React.createElement("div", {
-      className: `input-icon-sample ${input.type}`
+    }, input?.type !== 'select' && /*#__PURE__*/React.createElement("div", {
+      className: `input-icon-sample ${input?.type}`
     }), /*#__PURE__*/React.createElement(_f.TextInput, {
       name: `sections.${sectionIndex}.inputs.${inputIndex}.options.${optionIndex}.value`,
       placeholder: `Option ${optionIndex + 1}`,
@@ -191,7 +169,7 @@ const InputBuilder = _ref => {
       className: "add-option-cta",
       type: "button",
       onClick: () => push({
-        key: `sections-${sectionIndex}-inputs-${inputIndex}-options-${input.options.length - 1}`,
+        key: `sections-${sectionIndex}-inputs-${inputIndex}-options-${input?.options.length - 1}`,
         value: '',
         label: '',
         nextSection: ''
@@ -217,13 +195,9 @@ InputBuilder.propTypes = {
   /**
    * The React-written, css properties for this element.
    */
-  style: _propTypes.default.objectOf(_propTypes.default.string),
-  /**
-   * The preferred primary order of the popover
-   */
-  preferredPopoverOrder: _propTypes.default.arrayOf(_propTypes.default.string)
+  style: _propTypes.default.objectOf(_propTypes.default.string)
 };
 InputBuilder.defaultProps = {
-  preferredPopoverOrder: ['right', 'bottom', 'left', 'top']
+  // some properties
 };
 var _default = exports.default = InputBuilder;