@oneblink/apps-react 4.2.0 → 4.3.0-beta.2

package/dist/form-elements/FormElementRepeatableSet.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementRepeatableSet.js","sourceRoot":"","sources":["../../src/form-elements/FormElementRepeatableSet.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport useBooleanState from '../hooks/useBooleanState'\nimport generateDefaultData from '../services/generate-default-data'\nimport OneBlinkFormElements from '../components/renderer/OneBlinkFormElements'\nimport Modal from '../components/renderer/Modal'\nimport { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport useValidationClass from '../hooks/useValidationClass'\nimport {\n  FormElementConditionallyShown,\n  FormElementLookupHandler,\n  FormElementsConditionallyShown,\n  FormElementsValidation,\n  FormElementValidation,\n  FormElementValueChangeHandler,\n  IsDirtyProps,\n} from '../types/form'\nimport useFormElementRepeatableSetEntries from '../hooks/useFormElementRepeatableSetEntries'\n\ntype Props = {\n  formId: number\n  id: string\n  isEven: boolean\n  element: FormTypes.RepeatableSetElement\n  value: Array<SubmissionTypes.S3SubmissionData['submission']> | undefined\n  onChange: FormElementValueChangeHandler<\n    SubmissionTypes.S3SubmissionData['submission'][]\n  >\n  onLookup: FormElementLookupHandler\n  formElementConditionallyShown: FormElementConditionallyShown | undefined\n  formElementValidation: FormElementValidation | undefined\n  displayValidationMessage: boolean\n} & IsDirtyProps\n\nconst RepeatableSetIndexContext = React.createContext<number>(0)\n\nexport function useRepeatableSetIndexText(text: string) {\n  const index = React.useContext(RepeatableSetIndexContext)\n  return React.useMemo(\n    () => text.replace('{INDEX}', (index + 1).toString()),\n    [index, text],\n  )\n}\n\nfunction FormElementRepeatableSet({\n  formId,\n  element,\n  value,\n  formElementValidation,\n  id,\n  isEven,\n  displayValidationMessage,\n  formElementConditionallyShown,\n  onChange,\n  onLookup,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const entries = React.useMemo(\n    () => (Array.isArray(value) ? value : []),\n    [value],\n  )\n\n  const handleAddEntry = React.useCallback(() => {\n    onChange(element, (existingEntries) => {\n      const newEntries = [...(existingEntries || [])]\n      const entry = generateDefaultData(element.elements, {})\n      newEntries.push(entry)\n      return newEntries\n    })\n    setIsDirty()\n  }, [element, onChange, setIsDirty])\n\n  const handleRemoveEntry = React.useCallback(\n    (index: number) => {\n      onChange(element, (existingEntries) => {\n        const newEntries = [...(existingEntries || [])]\n        newEntries.splice(index, 1)\n        return newEntries\n      })\n      setIsDirty()\n    },\n    [element, onChange, setIsDirty],\n  )\n\n  const handleNestedChange = React.useCallback(\n    (index: number, nestedElement: FormTypes.FormElement, value: unknown) => {\n      if (!('name' in nestedElement)) {\n        return\n      }\n      onChange(element, (existingEntries) => {\n        const newEntries = (existingEntries || []).map((entry, i) => {\n          if (i === index) {\n            return {\n              ...entry,\n              [nestedElement.name]:\n                typeof value === 'function'\n                  ? value(entry[nestedElement.name])\n                  : value,\n            }\n          } else {\n            return entry\n          }\n        })\n        return newEntries\n      })\n    },\n    [element, onChange],\n  )\n\n  const { minSetEntries, maxSetEntries } =\n    useFormElementRepeatableSetEntries(element)\n\n  const repeatableSetValidation = React.useMemo(\n    () =>\n      !formElementValidation ||\n      typeof formElementValidation === 'string' ||\n      formElementValidation.type !== 'repeatableSet'\n        ? undefined\n        : formElementValidation,\n    [formElementValidation],\n  )\n\n  const repeatableSetEntriesConditionallyShown =\n    formElementConditionallyShown &&\n    formElementConditionallyShown.type === 'repeatableSet'\n      ? formElementConditionallyShown.entries\n      : {}\n\n  const { validationClassName } = useValidationClass({\n    formElementsValid: !repeatableSetValidation,\n    displayInvalidClassName: isDirty || displayValidationMessage,\n    validClassName: 'ob-repeatable-set-element__valid',\n    invalidClassName: 'ob-repeatable-set-element__invalid',\n  })\n\n  return (\n    <div\n      className={clsx('cypress-repeatable-set-element', validationClassName)}\n    >\n      <FormElementLabelContainer\n        className={`ob-repeatable-set ${isEven ? 'even' : 'odd'}`}\n        element={element}\n        id={id}\n        required={!!minSetEntries && minSetEntries > 0}\n      >\n        {entries.map((entry, index) => {\n          return (\n            <RepeatableSetEntry\n              key={index}\n              formId={formId}\n              index={index}\n              id={id}\n              isEven={isEven}\n              entry={entry}\n              element={element}\n              onChange={handleNestedChange}\n              onLookup={onLookup}\n              onRemove={handleRemoveEntry}\n              formElementsConditionallyShown={\n                repeatableSetEntriesConditionallyShown[index.toString()]\n              }\n              formElementsValidation={\n                repeatableSetValidation &&\n                repeatableSetValidation.entries[index.toString()]\n              }\n              displayValidationMessages={displayValidationMessage}\n            />\n          )\n        })}\n        {(!maxSetEntries || entries.length < maxSetEntries) && (\n          <button\n            type=\"button\"\n            className=\"button ob-button ob-button__add is-primary cypress-add-repeatable-set\"\n            onClick={handleAddEntry}\n            disabled={element.readOnly}\n          >\n            <span className=\"icon\">\n              <i className=\"material-icons\">add</i>\n            </span>\n            {!!element.addSetEntryLabel && (\n              <span>{element.addSetEntryLabel}</span>\n            )}\n          </button>\n        )}\n        {(isDirty || displayValidationMessage) &&\n          !!repeatableSetValidation &&\n          !!repeatableSetValidation.set && (\n            <div role=\"alert\" className=\"has-margin-top-8\">\n              <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n                {repeatableSetValidation.set}\n              </div>\n            </div>\n          )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementRepeatableSet)\n\ntype RepeatableSetEntryProps = {\n  formId: number\n  id: string\n  index: number\n  isEven: boolean\n  entry: SubmissionTypes.S3SubmissionData['submission']\n  element: FormTypes.RepeatableSetElement\n  formElementsConditionallyShown: FormElementsConditionallyShown | undefined\n  formElementsValidation: FormElementsValidation | undefined\n  displayValidationMessages: boolean\n  onChange: (\n    index: number,\n    formElement: FormTypes.FormElement,\n    value: unknown,\n  ) => unknown\n  onLookup: FormElementLookupHandler\n  onRemove: (index: number) => unknown\n}\n\nconst RepeatableSetEntry = React.memo<RepeatableSetEntryProps>(\n  function RepeatableSetEntry({\n    formId,\n    id,\n    index,\n    isEven,\n    entry,\n    element,\n    formElementsConditionallyShown,\n    displayValidationMessages,\n    formElementsValidation,\n    onChange,\n    onLookup,\n    onRemove,\n  }: RepeatableSetEntryProps) {\n    const [isConfirmingRemove, confirmRemove, cancelRemove] =\n      useBooleanState(false)\n\n    const handleChange = React.useCallback(\n      (element: FormTypes.FormElement, value: unknown) => {\n        onChange(index, element, value)\n      },\n      [index, onChange],\n    )\n\n    const handleLookup = React.useCallback<FormElementLookupHandler>(\n      (mergeLookupResults) => {\n        onLookup((currentFormSubmission) => {\n          let newEntry = {}\n          const entries = currentFormSubmission.submission[\n            element.name\n          ] as Array<SubmissionTypes.S3SubmissionData['submission']>\n          const elements = currentFormSubmission.elements.map((formElement) => {\n            if (\n              formElement.type === 'repeatableSet' &&\n              formElement.name === element.name\n            ) {\n              const { elements, submission } = mergeLookupResults({\n                elements: formElement.elements,\n                submission: entries[index],\n                lastElementUpdated: currentFormSubmission.lastElementUpdated,\n              })\n              newEntry = submission\n              return {\n                ...formElement,\n                elements,\n              }\n            }\n            return formElement\n          })\n\n          const submission = {\n            ...currentFormSubmission.submission,\n            [element.name]: entries.map((entry, i) => {\n              if (i === index) {\n                return newEntry\n              }\n              return entry\n            }),\n          }\n\n          return {\n            elements,\n            submission,\n          }\n        })\n      },\n      [element.name, index, onLookup],\n    )\n\n    const { validationClassName } = useValidationClass({\n      formElementsValid: !formElementsValidation,\n      displayInvalidClassName: displayValidationMessages,\n      validClassName: 'ob-repeatable-set__valid',\n      invalidClassName: 'ob-repeatable-set__invalid',\n    })\n\n    return (\n      <RepeatableSetIndexContext.Provider value={index}>\n        <Modal\n          isOpen={isConfirmingRemove}\n          className=\"cypress-repeatable-set-prompt\"\n          titleClassName=\"cypress-repeatable-set-remove-entry-header\"\n          title={element.removeSetEntryLabel || 'Remove Entry'}\n          actions={\n            <>\n              <button\n                type=\"button\"\n                className=\"button ob-button is-light cypress-cancel-repeatable-set\"\n                onClick={cancelRemove}\n              >\n                Cancel\n              </button>\n              <button\n                type=\"button\"\n                className=\"button ob-button is-primary cypress-confirm-repeatable-set\"\n                onClick={() => {\n                  cancelRemove()\n                  onRemove(index)\n                }}\n              >\n                Yes\n              </button>\n            </>\n          }\n        >\n          Are you sure you want to remove this entry?\n        </Modal>\n\n        <div\n          key={index}\n          className={clsx(\n            'ob-repeatable-set__container cypress-repeatable-set-container',\n            validationClassName,\n          )}\n        >\n          <button\n            type=\"button\"\n            className=\"button ob-button ob-button_remove is-light cypress-remove-repeatable-set-entry\"\n            onClick={confirmRemove}\n            disabled={element.readOnly}\n          >\n            <span className=\"icon\">\n              <i className=\"material-icons\">delete_outline</i>\n            </span>\n            {!!element.removeSetEntryLabel && (\n              <span>{element.removeSetEntryLabel}</span>\n            )}\n          </button>\n\n          <OneBlinkFormElements\n            formId={formId}\n            idPrefix={`${id}_entry-${index}_`}\n            isEven={isEven}\n            formElementsValidation={formElementsValidation}\n            displayValidationMessages={displayValidationMessages}\n            elements={element.elements}\n            onChange={handleChange}\n            onLookup={handleLookup}\n            model={entry}\n            parentElement={element}\n            formElementsConditionallyShown={formElementsConditionallyShown}\n          />\n        </div>\n      </RepeatableSetIndexContext.Provider>\n    )\n  },\n)\n"]}
+{"version":3,"file":"FormElementRepeatableSet.js","sourceRoot":"","sources":["../../src/form-elements/FormElementRepeatableSet.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport useBooleanState from '../hooks/useBooleanState'\nimport generateDefaultData from '../services/generate-default-data'\nimport OneBlinkFormElements from '../components/renderer/OneBlinkFormElements'\nimport Modal from '../components/renderer/Modal'\nimport { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport useValidationClass from '../hooks/useValidationClass'\nimport {\n  FormElementConditionallyShown,\n  FormElementLookupHandler,\n  FormElementsConditionallyShown,\n  FormElementsValidation,\n  FormElementValidation,\n  FormElementValueChangeHandler,\n  IsDirtyProps,\n  UpdateFormElementsHandler,\n} from '../types/form'\nimport useFormElementRepeatableSetEntries from '../hooks/useFormElementRepeatableSetEntries'\n\ntype Props = {\n  formId: number\n  id: string\n  isEven: boolean\n  element: FormTypes.RepeatableSetElement\n  value: Array<SubmissionTypes.S3SubmissionData['submission']> | undefined\n  onChange: FormElementValueChangeHandler<\n    SubmissionTypes.S3SubmissionData['submission'][]\n  >\n  onLookup: FormElementLookupHandler\n  formElementConditionallyShown: FormElementConditionallyShown | undefined\n  formElementValidation: FormElementValidation | undefined\n  displayValidationMessage: boolean\n  onUpdateFormElements: UpdateFormElementsHandler\n} & IsDirtyProps\n\nconst RepeatableSetIndexContext = React.createContext<number>(0)\n\nexport function useRepeatableSetIndexText(text: string) {\n  const index = React.useContext(RepeatableSetIndexContext)\n  return React.useMemo(\n    () => text.replace('{INDEX}', (index + 1).toString()),\n    [index, text],\n  )\n}\n\nfunction FormElementRepeatableSet({\n  formId,\n  element,\n  value,\n  formElementValidation,\n  id,\n  isEven,\n  displayValidationMessage,\n  formElementConditionallyShown,\n  onChange,\n  onLookup,\n  onUpdateFormElements,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const entries = React.useMemo(\n    () => (Array.isArray(value) ? value : []),\n    [value],\n  )\n\n  const handleAddEntry = React.useCallback(() => {\n    onChange(element, (existingEntries) => {\n      const newEntries = [...(existingEntries || [])]\n      const entry = generateDefaultData(element.elements, {})\n      newEntries.push(entry)\n      return newEntries\n    })\n    setIsDirty()\n  }, [element, onChange, setIsDirty])\n\n  const handleRemoveEntry = React.useCallback(\n    (index: number) => {\n      onChange(element, (existingEntries) => {\n        const newEntries = [...(existingEntries || [])]\n        newEntries.splice(index, 1)\n        return newEntries\n      })\n      setIsDirty()\n    },\n    [element, onChange, setIsDirty],\n  )\n\n  const handleNestedChange = React.useCallback(\n    (index: number, nestedElement: FormTypes.FormElement, value: unknown) => {\n      if (!('name' in nestedElement)) {\n        return\n      }\n      onChange(element, (existingEntries) => {\n        const newEntries = (existingEntries || []).map((entry, i) => {\n          if (i === index) {\n            return {\n              ...entry,\n              [nestedElement.name]:\n                typeof value === 'function'\n                  ? value(entry[nestedElement.name])\n                  : value,\n            }\n          } else {\n            return entry\n          }\n        })\n        return newEntries\n      })\n    },\n    [element, onChange],\n  )\n\n  const { minSetEntries, maxSetEntries } =\n    useFormElementRepeatableSetEntries(element)\n\n  const repeatableSetValidation = React.useMemo(\n    () =>\n      !formElementValidation ||\n      typeof formElementValidation === 'string' ||\n      formElementValidation.type !== 'repeatableSet'\n        ? undefined\n        : formElementValidation,\n    [formElementValidation],\n  )\n\n  const repeatableSetEntriesConditionallyShown =\n    formElementConditionallyShown &&\n    formElementConditionallyShown.type === 'repeatableSet'\n      ? formElementConditionallyShown.entries\n      : {}\n\n  const { validationClassName } = useValidationClass({\n    formElementsValid: !repeatableSetValidation,\n    displayInvalidClassName: isDirty || displayValidationMessage,\n    validClassName: 'ob-repeatable-set-element__valid',\n    invalidClassName: 'ob-repeatable-set-element__invalid',\n  })\n\n  return (\n    <div\n      className={clsx('cypress-repeatable-set-element', validationClassName)}\n    >\n      <FormElementLabelContainer\n        className={`ob-repeatable-set ${isEven ? 'even' : 'odd'}`}\n        element={element}\n        id={id}\n        required={!!minSetEntries && minSetEntries > 0}\n      >\n        {entries.map((entry, index) => {\n          return (\n            <RepeatableSetEntry\n              key={index}\n              formId={formId}\n              index={index}\n              id={id}\n              isEven={isEven}\n              entry={entry}\n              element={element}\n              onChange={handleNestedChange}\n              onLookup={onLookup}\n              onRemove={handleRemoveEntry}\n              formElementsConditionallyShown={\n                repeatableSetEntriesConditionallyShown[index.toString()]\n              }\n              formElementsValidation={\n                repeatableSetValidation &&\n                repeatableSetValidation.entries[index.toString()]\n              }\n              displayValidationMessages={displayValidationMessage}\n              onUpdateFormElements={onUpdateFormElements}\n            />\n          )\n        })}\n        {(!maxSetEntries || entries.length < maxSetEntries) && (\n          <button\n            type=\"button\"\n            className=\"button ob-button ob-button__add is-primary cypress-add-repeatable-set\"\n            onClick={handleAddEntry}\n            disabled={element.readOnly}\n          >\n            <span className=\"icon\">\n              <i className=\"material-icons\">add</i>\n            </span>\n            {!!element.addSetEntryLabel && (\n              <span>{element.addSetEntryLabel}</span>\n            )}\n          </button>\n        )}\n        {(isDirty || displayValidationMessage) &&\n          !!repeatableSetValidation &&\n          !!repeatableSetValidation.set && (\n            <div role=\"alert\" className=\"has-margin-top-8\">\n              <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n                {repeatableSetValidation.set}\n              </div>\n            </div>\n          )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementRepeatableSet)\n\ntype RepeatableSetEntryProps = {\n  formId: number\n  id: string\n  index: number\n  isEven: boolean\n  entry: SubmissionTypes.S3SubmissionData['submission']\n  element: FormTypes.RepeatableSetElement\n  formElementsConditionallyShown: FormElementsConditionallyShown | undefined\n  formElementsValidation: FormElementsValidation | undefined\n  displayValidationMessages: boolean\n  onChange: (\n    index: number,\n    formElement: FormTypes.FormElement,\n    value: unknown,\n  ) => unknown\n  onLookup: FormElementLookupHandler\n  onRemove: (index: number) => unknown\n  onUpdateFormElements: UpdateFormElementsHandler\n}\n\nconst RepeatableSetEntry = React.memo<RepeatableSetEntryProps>(\n  function RepeatableSetEntry({\n    formId,\n    id,\n    index,\n    isEven,\n    entry,\n    element,\n    formElementsConditionallyShown,\n    displayValidationMessages,\n    formElementsValidation,\n    onChange,\n    onLookup,\n    onRemove,\n    onUpdateFormElements,\n  }: RepeatableSetEntryProps) {\n    const [isConfirmingRemove, confirmRemove, cancelRemove] =\n      useBooleanState(false)\n\n    const handleChange = React.useCallback(\n      (element: FormTypes.FormElement, value: unknown) => {\n        onChange(index, element, value)\n      },\n      [index, onChange],\n    )\n\n    const handleLookup = React.useCallback<FormElementLookupHandler>(\n      (mergeLookupResults) => {\n        onLookup((currentFormSubmission) => {\n          let newEntry = {}\n          const entries = currentFormSubmission.submission[\n            element.name\n          ] as Array<SubmissionTypes.S3SubmissionData['submission']>\n          const elements = currentFormSubmission.elements.map((formElement) => {\n            if (\n              formElement.type === 'repeatableSet' &&\n              formElement.name === element.name\n            ) {\n              const { elements, submission } = mergeLookupResults({\n                elements: formElement.elements,\n                submission: entries[index],\n                lastElementUpdated: currentFormSubmission.lastElementUpdated,\n              })\n              newEntry = submission\n              return {\n                ...formElement,\n                elements,\n              }\n            }\n            return formElement\n          })\n\n          const submission = {\n            ...currentFormSubmission.submission,\n            [element.name]: entries.map((entry, i) => {\n              if (i === index) {\n                return newEntry\n              }\n              return entry\n            }),\n          }\n\n          return {\n            elements,\n            submission,\n          }\n        })\n      },\n      [element.name, index, onLookup],\n    )\n\n    const { validationClassName } = useValidationClass({\n      formElementsValid: !formElementsValidation,\n      displayInvalidClassName: displayValidationMessages,\n      validClassName: 'ob-repeatable-set__valid',\n      invalidClassName: 'ob-repeatable-set__invalid',\n    })\n\n    const handleUpdateNestedFormElements =\n      React.useCallback<UpdateFormElementsHandler>(\n        (setter) => {\n          onUpdateFormElements((formElements) => {\n            return formElements.map((formElement) => {\n              if (\n                formElement.id === element.id &&\n                formElement.type === 'repeatableSet'\n              ) {\n                return {\n                  ...formElement,\n                  elements: setter(formElement.elements),\n                }\n              }\n              return formElement\n            })\n          })\n        },\n        [element.id, onUpdateFormElements],\n      )\n\n    return (\n      <RepeatableSetIndexContext.Provider value={index}>\n        <Modal\n          isOpen={isConfirmingRemove}\n          className=\"cypress-repeatable-set-prompt\"\n          titleClassName=\"cypress-repeatable-set-remove-entry-header\"\n          title={element.removeSetEntryLabel || 'Remove Entry'}\n          actions={\n            <>\n              <button\n                type=\"button\"\n                className=\"button ob-button is-light cypress-cancel-repeatable-set\"\n                onClick={cancelRemove}\n              >\n                Cancel\n              </button>\n              <button\n                type=\"button\"\n                className=\"button ob-button is-primary cypress-confirm-repeatable-set\"\n                onClick={() => {\n                  cancelRemove()\n                  onRemove(index)\n                }}\n              >\n                Yes\n              </button>\n            </>\n          }\n        >\n          Are you sure you want to remove this entry?\n        </Modal>\n\n        <div\n          key={index}\n          className={clsx(\n            'ob-repeatable-set__container cypress-repeatable-set-container',\n            validationClassName,\n          )}\n        >\n          <button\n            type=\"button\"\n            className=\"button ob-button ob-button_remove is-light cypress-remove-repeatable-set-entry\"\n            onClick={confirmRemove}\n            disabled={element.readOnly}\n          >\n            <span className=\"icon\">\n              <i className=\"material-icons\">delete_outline</i>\n            </span>\n            {!!element.removeSetEntryLabel && (\n              <span>{element.removeSetEntryLabel}</span>\n            )}\n          </button>\n\n          <OneBlinkFormElements\n            formId={formId}\n            idPrefix={`${id}_entry-${index}_`}\n            isEven={isEven}\n            formElementsValidation={formElementsValidation}\n            displayValidationMessages={displayValidationMessages}\n            elements={element.elements}\n            onChange={handleChange}\n            onLookup={handleLookup}\n            model={entry}\n            parentElement={element}\n            formElementsConditionallyShown={formElementsConditionallyShown}\n            onUpdateFormElements={handleUpdateNestedFormElements}\n          />\n        </div>\n      </RepeatableSetIndexContext.Provider>\n    )\n  },\n)\n"]}

package/dist/form-elements/FormElementSection.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { FormTypes } from '@oneblink/types';
 import { Props } from '../components/renderer/OneBlinkFormElements';
-declare function FormElementSection<T extends FormTypes._NestedElementsElement>({ element, onLookup, displayValidationMessages, ...props }: Omit<Props<T>, 'elements'> & {
+declare function FormElementSection<T extends FormTypes._NestedElementsElement>({ element, onLookup, displayValidationMessages, onUpdateFormElements, ...props }: Omit<Props<T>, 'elements'> & {
     element: FormTypes.SectionElement;
 }): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof FormElementSection>;

package/dist/form-elements/FormElementSection.js

@@ -6,7 +6,7 @@ import OneBlinkFormElements from '../components/renderer/OneBlinkFormElements';
 import { checkSectionValidity } from '../services/form-validation';
 import { HintBelowLabel, HintTooltip, } from '../components/renderer/FormElementLabelContainer';
 import useValidationClass from '../hooks/useValidationClass';
-function FormElementSection({ element, onLookup, displayValidationMessages, ...props }) {
+function FormElementSection({ element, onLookup, displayValidationMessages, onUpdateFormElements, ...props }) {
     const [isCollapsed, , , toggle] = useBooleanState(element.isCollapsed);
     const [isDisplayingError, setIsDisplayingError] = React.useState(isCollapsed);
     React.useEffect(() => {
@@ -47,6 +47,20 @@ function FormElementSection({ element, onLookup, displayValidationMessages, ...p
             };
         });
     }, [element.id, onLookup]);
+    const handleUpdateNestedFormElements = React.useCallback((setter) => {
+        onUpdateFormElements((formElements) => {
+            return formElements.map((formElement) => {
+                if (formElement.id === element.id &&
+                    formElement.type === 'section') {
+                    return {
+                        ...formElement,
+                        elements: setter(formElement.elements),
+                    };
+                }
+                return formElement;
+            });
+        });
+    }, [element.id, onUpdateFormElements]);
     return (React.createElement("div", { className: clsx('ob-section', validationClassName) },
         React.createElement("div", { className: "ob-section__header cypress-section-header", onClick: toggle },
             React.createElement("h3", { className: "ob-section__header-text title is-3" },
@@ -67,7 +81,7 @@ function FormElementSection({ element, onLookup, displayValidationMessages, ...p
                 entered: 'ob-section__expanded',
                 hidden: 'ob-section__collapsed',
             } },
-            React.createElement(OneBlinkFormElements, { ...props, displayValidationMessages: displayValidationMessage, onLookup: handleLookup, elements: element.elements }))));
+            React.createElement(OneBlinkFormElements, { ...props, displayValidationMessages: displayValidationMessage, onLookup: handleLookup, elements: element.elements, onUpdateFormElements: handleUpdateNestedFormElements }))));
 }
 export default React.memo(FormElementSection);
 //# sourceMappingURL=FormElementSection.js.map

package/dist/form-elements/FormElementSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementSection.js","sourceRoot":"","sources":["../../src/form-elements/FormElementSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAEjD,OAAO,eAAe,MAAM,0BAA0B,CAAA;AACtD,OAAO,oBAEN,MAAM,6CAA6C,CAAA;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAA;AAElE,OAAO,EACL,cAAc,EACd,WAAW,GACZ,MAAM,kDAAkD,CAAA;AACzD,OAAO,kBAAkB,MAAM,6BAA6B,CAAA;AAE5D,SAAS,kBAAkB,CAA6C,EACtE,OAAO,EACP,QAAQ,EACR,yBAAyB,EACzB,GAAG,KAAK,EAGT;IACC,MAAM,CAAC,WAAW,EAAE,AAAD,EAAG,AAAD,EAAG,MAAM,CAAC,GAAG,eAAe,CAAC,OAAO,CAAC,WAAW,CAAC,CAAA;IACtE,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAA;IAE7E,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,WAAW,IAAI,CAAC,iBAAiB,EAAE;YACrC,oBAAoB,CAAC,IAAI,CAAC,CAAA;SAC3B;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,iBAAiB,CAAC,CAAC,CAAA;IAEpC,MAAM,wBAAwB,GAC5B,yBAAyB,IAAI,iBAAiB,CAAA;IAEhD,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAC3B,GAAG,EAAE,CAAC,CAAC,oBAAoB,CAAC,OAAO,EAAE,KAAK,CAAC,sBAAsB,CAAC,EAClE,CAAC,OAAO,EAAE,KAAK,CAAC,sBAAsB,CAAC,CACxC,CAAA;IAED,MAAM,EAAE,mBAAmB,EAAE,KAAK,EAAE,GAAG,kBAAkB,CAAC;QACxD,iBAAiB,EAAE,OAAO;QAC1B,uBAAuB,EAAE,wBAAwB;QACjD,cAAc,EAAE,mBAAmB;QACnC,gBAAgB,EAAE,qBAAqB;KACxC,CAAC,CAAA;IAEF,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,CAAC,kBAAkB,EAAE,EAAE;QACrB,QAAQ,CAAC,CAAC,qBAAqB,EAAE,EAAE;YACjC,IAAI,KAAK,GAAG,qBAAqB,CAAC,UAAU,CAAA;YAC5C,MAAM,QAAQ,GAAG,qBAAqB,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,EAAE;gBAClE,IAAI,WAAW,CAAC,IAAI,KAAK,SAAS,IAAI,WAAW,CAAC,EAAE,KAAK,OAAO,CAAC,EAAE,EAAE;oBACnE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,kBAAkB,CAAC;wBAClD,QAAQ,EAAE,WAAW,CAAC,QAAQ;wBAC9B,UAAU,EAAE,qBAAqB,CAAC,UAAU;wBAC5C,kBAAkB,EAAE,qBAAqB,CAAC,kBAAkB;qBAC7D,CAAC,CAAA;oBACF,KAAK,GAAG,UAAU,CAAA;oBAClB,OAAO;wBACL,GAAG,WAAW;wBACd,QAAQ;qBACT,CAAA;iBACF;gBACD,OAAO,WAAW,CAAA;YACpB,CAAC,CAAC,CAAA;YAEF,OAAO;gBACL,QAAQ;gBACR,UAAU,EAAE,KAAK;gBACjB,kBAAkB,EAAE,qBAAqB,CAAC,kBAAkB;aAC7D,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EACD,CAAC,OAAO,CAAC,EAAE,EAAE,QAAQ,CAAC,CACvB,CAAA;IAED,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE,mBAAmB,CAAC;QACrD,6BACE,SAAS,EAAC,2CAA2C,EACrD,OAAO,EAAE,MAAM;YAEf,4BAAI,SAAS,EAAC,oCAAoC;gBAC/C,OAAO,CAAC,KAAK;gBACb,OAAO,CAAC,IAAI;oBACX,CAAC,OAAO,CAAC,YAAY,KAAK,SAAS,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,CAC/D,oBAAC,WAAW,IAAC,IAAI,EAAE,OAAO,CAAC,IAAI,GAAI,CACpC,CACA;YACL,6BAAK,SAAS,EAAC,mCAAmC;gBAC/C,CAAC,KAAK,IAAI,wBAAwB,IAAI,CACrC,oBAAC,OAAO,IAAC,KAAK,EAAC,oBAAoB;oBACjC,2BAAG,SAAS,EAAC,0FAA0F,cAEnG,CACI,CACX;gBACD,2BACE,SAAS,EAAE,IAAI,CAAC,wCAAwC,EAAE;wBACxD,YAAY,EAAE,CAAC,WAAW;qBAC3B,CAAC,kBAGA,CACA;YACL,OAAO,CAAC,IAAI,IAAI,OAAO,CAAC,YAAY,KAAK,aAAa,IAAI,CACzD,6BAAK,SAAS,EAAC,iCAAiC;gBAC9C,oBAAC,cAAc,IAAC,IAAI,EAAE,OAAO,CAAC,IAAI,GAAI,CAClC,CACP,CACG;QACN,4BAAI,SAAS,EAAC,qBAAqB,GAAG;QACtC,oBAAC,QAAQ,IACP,EAAE,EAAE,CAAC,WAAW,EAChB,OAAO,EAAE;gBACP,IAAI,EAAE,qBAAqB;gBAC3B,OAAO,EAAE,sBAAsB;gBAC/B,MAAM,EAAE,uBAAuB;aAChC;YAED,oBAAC,oBAAoB,OACf,KAAK,EACT,yBAAyB,EAAE,wBAAwB,EACnD,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,OAAO,CAAC,QAAQ,GAC1B,CACO,CACP,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { Collapse, Tooltip } from '@mui/material'\nimport { FormTypes } from '@oneblink/types'\nimport useBooleanState from '../hooks/useBooleanState'\nimport OneBlinkFormElements, {\n  Props,\n} from '../components/renderer/OneBlinkFormElements'\nimport { checkSectionValidity } from '../services/form-validation'\nimport { FormElementLookupHandler } from '../types/form'\nimport {\n  HintBelowLabel,\n  HintTooltip,\n} from '../components/renderer/FormElementLabelContainer'\nimport useValidationClass from '../hooks/useValidationClass'\n\nfunction FormElementSection<T extends FormTypes._NestedElementsElement>({\n  element,\n  onLookup,\n  displayValidationMessages,\n  ...props\n}: Omit<Props<T>, 'elements'> & {\n  element: FormTypes.SectionElement\n}) {\n  const [isCollapsed, , , toggle] = useBooleanState(element.isCollapsed)\n  const [isDisplayingError, setIsDisplayingError] = React.useState(isCollapsed)\n\n  React.useEffect(() => {\n    if (isCollapsed && !isDisplayingError) {\n      setIsDisplayingError(true)\n    }\n  }, [isCollapsed, isDisplayingError])\n\n  const displayValidationMessage =\n    displayValidationMessages || isDisplayingError\n\n  const isValid = React.useMemo(\n    () => !checkSectionValidity(element, props.formElementsValidation),\n    [element, props.formElementsValidation],\n  )\n\n  const { validationClassName, valid } = useValidationClass({\n    formElementsValid: isValid,\n    displayInvalidClassName: displayValidationMessage,\n    validClassName: 'ob-section__valid',\n    invalidClassName: 'ob-section__invalid',\n  })\n\n  const handleLookup = React.useCallback<FormElementLookupHandler>(\n    (mergeLookupResults) => {\n      onLookup((currentFormSubmission) => {\n        let model = currentFormSubmission.submission\n        const elements = currentFormSubmission.elements.map((formElement) => {\n          if (formElement.type === 'section' && formElement.id === element.id) {\n            const { elements, submission } = mergeLookupResults({\n              elements: formElement.elements,\n              submission: currentFormSubmission.submission,\n              lastElementUpdated: currentFormSubmission.lastElementUpdated,\n            })\n            model = submission\n            return {\n              ...formElement,\n              elements,\n            }\n          }\n          return formElement\n        })\n\n        return {\n          elements,\n          submission: model,\n          lastElementUpdated: currentFormSubmission.lastElementUpdated,\n        }\n      })\n    },\n    [element.id, onLookup],\n  )\n\n  return (\n    <div className={clsx('ob-section', validationClassName)}>\n      <div\n        className=\"ob-section__header cypress-section-header\"\n        onClick={toggle}\n      >\n        <h3 className=\"ob-section__header-text title is-3\">\n          {element.label}\n          {element.hint &&\n            (element.hintPosition === 'TOOLTIP' || !element.hintPosition) && (\n              <HintTooltip hint={element.hint} />\n            )}\n        </h3>\n        <div className=\"ob-section__header-icon-container\">\n          {!valid && displayValidationMessage && (\n            <Tooltip title=\"Section has errors\">\n              <i className=\"material-icons has-text-danger cypress-section-invalid-icon section-invalid-icon fade-in\">\n                warning\n              </i>\n            </Tooltip>\n          )}\n          <i\n            className={clsx('ob-section__header-icon material-icons', {\n              'is-rotated': !isCollapsed,\n            })}\n          >\n            expand_more\n          </i>\n        </div>\n        {element.hint && element.hintPosition === 'BELOW_LABEL' && (\n          <div className=\"ob-section__hint-text-container\">\n            <HintBelowLabel hint={element.hint} />\n          </div>\n        )}\n      </div>\n      <hr className=\"ob-section__divider\" />\n      <Collapse\n        in={!isCollapsed}\n        classes={{\n          root: 'ob-section__content',\n          entered: 'ob-section__expanded',\n          hidden: 'ob-section__collapsed',\n        }}\n      >\n        <OneBlinkFormElements\n          {...props}\n          displayValidationMessages={displayValidationMessage}\n          onLookup={handleLookup}\n          elements={element.elements}\n        />\n      </Collapse>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementSection)\n"]}
+{"version":3,"file":"FormElementSection.js","sourceRoot":"","sources":["../../src/form-elements/FormElementSection.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { Collapse, Tooltip } from '@mui/material'\nimport { FormTypes } from '@oneblink/types'\nimport useBooleanState from '../hooks/useBooleanState'\nimport OneBlinkFormElements, {\n  Props,\n} from '../components/renderer/OneBlinkFormElements'\nimport { checkSectionValidity } from '../services/form-validation'\nimport {\n  FormElementLookupHandler,\n  UpdateFormElementsHandler,\n} from '../types/form'\nimport {\n  HintBelowLabel,\n  HintTooltip,\n} from '../components/renderer/FormElementLabelContainer'\nimport useValidationClass from '../hooks/useValidationClass'\n\nfunction FormElementSection<T extends FormTypes._NestedElementsElement>({\n  element,\n  onLookup,\n  displayValidationMessages,\n  onUpdateFormElements,\n  ...props\n}: Omit<Props<T>, 'elements'> & {\n  element: FormTypes.SectionElement\n}) {\n  const [isCollapsed, , , toggle] = useBooleanState(element.isCollapsed)\n  const [isDisplayingError, setIsDisplayingError] = React.useState(isCollapsed)\n\n  React.useEffect(() => {\n    if (isCollapsed && !isDisplayingError) {\n      setIsDisplayingError(true)\n    }\n  }, [isCollapsed, isDisplayingError])\n\n  const displayValidationMessage =\n    displayValidationMessages || isDisplayingError\n\n  const isValid = React.useMemo(\n    () => !checkSectionValidity(element, props.formElementsValidation),\n    [element, props.formElementsValidation],\n  )\n\n  const { validationClassName, valid } = useValidationClass({\n    formElementsValid: isValid,\n    displayInvalidClassName: displayValidationMessage,\n    validClassName: 'ob-section__valid',\n    invalidClassName: 'ob-section__invalid',\n  })\n\n  const handleLookup = React.useCallback<FormElementLookupHandler>(\n    (mergeLookupResults) => {\n      onLookup((currentFormSubmission) => {\n        let model = currentFormSubmission.submission\n        const elements = currentFormSubmission.elements.map((formElement) => {\n          if (formElement.type === 'section' && formElement.id === element.id) {\n            const { elements, submission } = mergeLookupResults({\n              elements: formElement.elements,\n              submission: currentFormSubmission.submission,\n              lastElementUpdated: currentFormSubmission.lastElementUpdated,\n            })\n            model = submission\n            return {\n              ...formElement,\n              elements,\n            }\n          }\n          return formElement\n        })\n\n        return {\n          elements,\n          submission: model,\n          lastElementUpdated: currentFormSubmission.lastElementUpdated,\n        }\n      })\n    },\n    [element.id, onLookup],\n  )\n\n  const handleUpdateNestedFormElements =\n    React.useCallback<UpdateFormElementsHandler>(\n      (setter) => {\n        onUpdateFormElements((formElements) => {\n          return formElements.map((formElement) => {\n            if (\n              formElement.id === element.id &&\n              formElement.type === 'section'\n            ) {\n              return {\n                ...formElement,\n                elements: setter(formElement.elements),\n              }\n            }\n            return formElement\n          })\n        })\n      },\n      [element.id, onUpdateFormElements],\n    )\n\n  return (\n    <div className={clsx('ob-section', validationClassName)}>\n      <div\n        className=\"ob-section__header cypress-section-header\"\n        onClick={toggle}\n      >\n        <h3 className=\"ob-section__header-text title is-3\">\n          {element.label}\n          {element.hint &&\n            (element.hintPosition === 'TOOLTIP' || !element.hintPosition) && (\n              <HintTooltip hint={element.hint} />\n            )}\n        </h3>\n        <div className=\"ob-section__header-icon-container\">\n          {!valid && displayValidationMessage && (\n            <Tooltip title=\"Section has errors\">\n              <i className=\"material-icons has-text-danger cypress-section-invalid-icon section-invalid-icon fade-in\">\n                warning\n              </i>\n            </Tooltip>\n          )}\n          <i\n            className={clsx('ob-section__header-icon material-icons', {\n              'is-rotated': !isCollapsed,\n            })}\n          >\n            expand_more\n          </i>\n        </div>\n        {element.hint && element.hintPosition === 'BELOW_LABEL' && (\n          <div className=\"ob-section__hint-text-container\">\n            <HintBelowLabel hint={element.hint} />\n          </div>\n        )}\n      </div>\n      <hr className=\"ob-section__divider\" />\n      <Collapse\n        in={!isCollapsed}\n        classes={{\n          root: 'ob-section__content',\n          entered: 'ob-section__expanded',\n          hidden: 'ob-section__collapsed',\n        }}\n      >\n        <OneBlinkFormElements\n          {...props}\n          displayValidationMessages={displayValidationMessage}\n          onLookup={handleLookup}\n          elements={element.elements}\n          onUpdateFormElements={handleUpdateNestedFormElements}\n        />\n      </Collapse>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementSection)\n"]}

package/dist/form-elements/FormElementSelect.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FormTypes } from '@oneblink/types';
-import { FormElementValueChangeHandler, FormElementConditionallyShownElement, IsDirtyProps } from '../types/form';
+import { FormElementValueChangeHandler, FormElementConditionallyShownElement, IsDirtyProps, UpdateFormElementsHandler } from '../types/form';
 type Props = {
     id: string;
     element: FormTypes.SelectElement;
@@ -9,7 +9,8 @@ type Props = {
     displayValidationMessage: boolean;
     validationMessage: string | undefined;
     conditionallyShownOptionsElement: FormElementConditionallyShownElement | undefined;
+    onUpdateFormElements: UpdateFormElementsHandler;
 } & IsDirtyProps;
-declare function FormElementSelect({ id, element, value, onChange, validationMessage, displayValidationMessage, conditionallyShownOptionsElement, isDirty, setIsDirty, }: Props): JSX.Element;
+declare function FormElementSelect({ id, element, value, onChange, validationMessage, displayValidationMessage, conditionallyShownOptionsElement, onUpdateFormElements, isDirty, setIsDirty, }: Props): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof FormElementSelect>;
 export default _default;

package/dist/form-elements/FormElementSelect.js

@@ -4,12 +4,13 @@ import useFormElementOptions from '../hooks/useFormElementOptions';
 import LookupButton from '../components/renderer/LookupButton';
 import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
 import ToggleAllCheckbox from '../components/renderer/ToggleAllCheckbox';
-function FormElementSelect({ id, element, value, onChange, validationMessage, displayValidationMessage, conditionallyShownOptionsElement, isDirty, setIsDirty, }) {
+function FormElementSelect({ id, element, value, onChange, validationMessage, displayValidationMessage, conditionallyShownOptionsElement, onUpdateFormElements, isDirty, setIsDirty, }) {
     const filteredOptions = useFormElementOptions({
         element,
         value,
         onChange,
         conditionallyShownOptionsElement,
+        onUpdateFormElements,
     });
     const selectedValuesAsArray = React.useMemo(() => {
         if (Array.isArray(value))
@@ -35,7 +36,7 @@ function FormElementSelect({ id, element, value, onChange, validationMessage, di
                             }
                             onChange(element, vals.length ? vals : undefined);
                         }, required: element.required, disabled: element.readOnly, onBlur: setIsDirty }, filteredOptions.map(({ label, value }) => (React.createElement("option", { key: value, value: value }, label)))),
-                    React.createElement(LookupButton, { hasMarginTop: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton }))),
+                    React.createElement(LookupButton, { hasMarginTop: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton, allowLookupOnEmptyValue: element.runLookupOnClear }))),
                 (isDirty || displayValidationMessage) && !!validationMessage && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
                     React.createElement("div", { className: "has-text-danger ob-error__text cypress-validation-message" }, validationMessage)))))));
 }

package/dist/form-elements/FormElementSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementSelect.js","sourceRoot":"","sources":["../../src/form-elements/FormElementSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\n\nimport FormElementOptions from '../components/renderer/FormElementOptions'\nimport useFormElementOptions from '../hooks/useFormElementOptions'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport ToggleAllCheckbox from '../components/renderer/ToggleAllCheckbox'\nimport {\n  FormElementValueChangeHandler,\n  FormElementConditionallyShownElement,\n  IsDirtyProps,\n} from '../types/form'\n\ntype Props = {\n  id: string\n  element: FormTypes.SelectElement\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<string | string[]>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  conditionallyShownOptionsElement:\n    | FormElementConditionallyShownElement\n    | undefined\n} & IsDirtyProps\n\nfunction FormElementSelect({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  conditionallyShownOptionsElement,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const filteredOptions = useFormElementOptions({\n    element,\n    value,\n    onChange,\n    conditionallyShownOptionsElement,\n  })\n\n  const selectedValuesAsArray = React.useMemo(() => {\n    if (Array.isArray(value)) return value\n    if (typeof value === 'string') return [value]\n    return []\n  }, [value])\n\n  return (\n    <div className=\"cypress-select-element\">\n      <FormElementLabelContainer\n        className=\"ob-select\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <FormElementOptions\n          options={element.options}\n          conditionallyShownOptionsElement={conditionallyShownOptionsElement}\n        >\n          {element.multi && element.canToggleAll && (\n            <ToggleAllCheckbox\n              id={id}\n              element={element}\n              options={filteredOptions}\n              selected={selectedValuesAsArray}\n              disabled={element.readOnly}\n              onChange={onChange as FormElementValueChangeHandler<string[]>}\n            />\n          )}\n          {!element.multi ? (\n            <div className=\"field has-addons\">\n              <div className=\"control is-expanded\">\n                <div className=\"select is-fullwidth\">\n                  <select\n                    id={id}\n                    name={element.name}\n                    className=\"cypress-select-single-control ob-input ob-select__single\"\n                    value={typeof value === 'string' ? value : ''}\n                    onChange={(e) =>\n                      onChange(element, e.target.value || undefined)\n                    }\n                    required={element.required}\n                    disabled={element.readOnly}\n                    onBlur={setIsDirty}\n                  >\n                    <option value=\"\">Please choose</option>\n                    {filteredOptions.map(({ label, value }) => (\n                      <option key={value} value={value}>\n                        {label}\n                      </option>\n                    ))}\n                  </select>\n                </div>\n              </div>\n            </div>\n          ) : (\n            <div className=\"select is-multiple control\">\n              <select\n                multiple\n                id={id}\n                name={element.name}\n                className=\"cypress-select-multiple-control ob-input ob-select__multi\"\n                value={Array.isArray(value) ? value : []}\n                onChange={(e) => {\n                  const vals = []\n                  for (let i = 0; i < e.target.selectedOptions.length; i++) {\n                    vals.push(e.target.selectedOptions[i].value)\n                  }\n                  onChange(element, vals.length ? vals : undefined)\n                }}\n                required={element.required}\n                disabled={element.readOnly}\n                onBlur={setIsDirty}\n              >\n                {filteredOptions.map(({ label, value }) => (\n                  <option key={value} value={value}>\n                    {label}\n                  </option>\n                ))}\n              </select>\n\n              <LookupButton\n                hasMarginTop\n                value={value}\n                validationMessage={validationMessage}\n                lookupButtonConfig={element.lookupButton}\n              />\n            </div>\n          )}\n\n          {(isDirty || displayValidationMessage) && !!validationMessage && (\n            <div role=\"alert\" className=\"has-margin-top-8\">\n              <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n                {validationMessage}\n              </div>\n            </div>\n          )}\n        </FormElementOptions>\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementSelect)\n"]}
+{"version":3,"file":"FormElementSelect.js","sourceRoot":"","sources":["../../src/form-elements/FormElementSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\n\nimport FormElementOptions from '../components/renderer/FormElementOptions'\nimport useFormElementOptions from '../hooks/useFormElementOptions'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport ToggleAllCheckbox from '../components/renderer/ToggleAllCheckbox'\nimport {\n  FormElementValueChangeHandler,\n  FormElementConditionallyShownElement,\n  IsDirtyProps,\n  UpdateFormElementsHandler,\n} from '../types/form'\n\ntype Props = {\n  id: string\n  element: FormTypes.SelectElement\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<string | string[]>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  conditionallyShownOptionsElement:\n    | FormElementConditionallyShownElement\n    | undefined\n  onUpdateFormElements: UpdateFormElementsHandler\n} & IsDirtyProps\n\nfunction FormElementSelect({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  conditionallyShownOptionsElement,\n  onUpdateFormElements,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const filteredOptions = useFormElementOptions({\n    element,\n    value,\n    onChange,\n    conditionallyShownOptionsElement,\n    onUpdateFormElements,\n  })\n\n  const selectedValuesAsArray = React.useMemo(() => {\n    if (Array.isArray(value)) return value\n    if (typeof value === 'string') return [value]\n    return []\n  }, [value])\n\n  return (\n    <div className=\"cypress-select-element\">\n      <FormElementLabelContainer\n        className=\"ob-select\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <FormElementOptions\n          options={element.options}\n          conditionallyShownOptionsElement={conditionallyShownOptionsElement}\n        >\n          {element.multi && element.canToggleAll && (\n            <ToggleAllCheckbox\n              id={id}\n              element={element}\n              options={filteredOptions}\n              selected={selectedValuesAsArray}\n              disabled={element.readOnly}\n              onChange={onChange as FormElementValueChangeHandler<string[]>}\n            />\n          )}\n          {!element.multi ? (\n            <div className=\"field has-addons\">\n              <div className=\"control is-expanded\">\n                <div className=\"select is-fullwidth\">\n                  <select\n                    id={id}\n                    name={element.name}\n                    className=\"cypress-select-single-control ob-input ob-select__single\"\n                    value={typeof value === 'string' ? value : ''}\n                    onChange={(e) =>\n                      onChange(element, e.target.value || undefined)\n                    }\n                    required={element.required}\n                    disabled={element.readOnly}\n                    onBlur={setIsDirty}\n                  >\n                    <option value=\"\">Please choose</option>\n                    {filteredOptions.map(({ label, value }) => (\n                      <option key={value} value={value}>\n                        {label}\n                      </option>\n                    ))}\n                  </select>\n                </div>\n              </div>\n            </div>\n          ) : (\n            <div className=\"select is-multiple control\">\n              <select\n                multiple\n                id={id}\n                name={element.name}\n                className=\"cypress-select-multiple-control ob-input ob-select__multi\"\n                value={Array.isArray(value) ? value : []}\n                onChange={(e) => {\n                  const vals = []\n                  for (let i = 0; i < e.target.selectedOptions.length; i++) {\n                    vals.push(e.target.selectedOptions[i].value)\n                  }\n                  onChange(element, vals.length ? vals : undefined)\n                }}\n                required={element.required}\n                disabled={element.readOnly}\n                onBlur={setIsDirty}\n              >\n                {filteredOptions.map(({ label, value }) => (\n                  <option key={value} value={value}>\n                    {label}\n                  </option>\n                ))}\n              </select>\n\n              <LookupButton\n                hasMarginTop\n                value={value}\n                validationMessage={validationMessage}\n                lookupButtonConfig={element.lookupButton}\n                allowLookupOnEmptyValue={element.runLookupOnClear}\n              />\n            </div>\n          )}\n\n          {(isDirty || displayValidationMessage) && !!validationMessage && (\n            <div role=\"alert\" className=\"has-margin-top-8\">\n              <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n                {validationMessage}\n              </div>\n            </div>\n          )}\n        </FormElementOptions>\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementSelect)\n"]}

package/dist/form-elements/FormElementTelephone.js

@@ -13,7 +13,7 @@ function FormElementTelephone({ id, element, value, onChange, validationMessage,
                         React.createElement("i", { className: "material-icons is-size-5" }, "phone"))),
                 !!element.readOnly && !!value && (React.createElement("div", { className: "control" },
                     React.createElement(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }))),
-                React.createElement(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton })),
+                React.createElement(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton, allowLookupOnEmptyValue: element.runLookupOnClear })),
             (isDirty || displayValidationMessage) && !!validationMessage && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
                 React.createElement("div", { className: "has-text-danger ob-error__text cypress-validation-message" }, validationMessage))))));
 }

package/dist/form-elements/FormElementTelephone.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementTelephone.js","sourceRoot":"","sources":["../../src/form-elements/FormElementTelephone.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,qBAAqB,MAAM,8CAA8C,CAAA;AAChF,OAAO,YAAY,MAAM,qCAAqC,CAAA;AAE9D,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AAYxF,SAAS,oBAAoB,CAAC,EAC5B,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,OAAO,EACP,UAAU,GACJ;IACN,MAAM,IAAI,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;IACnD,OAAO,CACL,6BAAK,SAAS,EAAC,2BAA2B;QACxC,oBAAC,yBAAyB,IACxB,SAAS,EAAC,cAAc,EACxB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ;YAE1B,6BAAK,SAAS,EAAC,kBAAkB;gBAC/B,6BAAK,SAAS,EAAC,qCAAqC;oBAClD,+BACE,IAAI,EAAC,KAAK,EACV,WAAW,EAAE,OAAO,CAAC,gBAAgB,EACrC,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,SAAS,EAAC,0CAA0C,EACpD,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,SAAS,CAAC,EAC/D,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,MAAM,EAAE,UAAU,GAClB;oBACF,8BAAM,SAAS,EAAC,sCAAsC;wBACpD,2BAAG,SAAS,EAAC,0BAA0B,YAAU,CAC5C,CACH;gBACL,CAAC,CAAC,OAAO,CAAC,QAAQ,IAAI,CAAC,CAAC,KAAK,IAAI,CAChC,6BAAK,SAAS,EAAC,SAAS;oBACtB,oBAAC,qBAAqB,IACpB,SAAS,EAAC,oEAAoE,EAC9E,IAAI,EAAE,IAAI,GACV,CACE,CACP;gBACD,oBAAC,YAAY,IACX,aAAa,QACb,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,OAAO,CAAC,YAAY,GACxC,CACE;YAEL,CAAC,OAAO,IAAI,wBAAwB,CAAC,IAAI,CAAC,CAAC,iBAAiB,IAAI,CAC/D,6BAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,kBAAkB;gBAC5C,6BAAK,SAAS,EAAC,2DAA2D,IACvE,iBAAiB,CACd,CACF,CACP,CACyB,CACxB,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\n\ntype Props = {\n  id: string\n  element: FormTypes.TelephoneElement\n  value: unknown\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementTelephone({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const text = typeof value === 'string' ? value : ''\n  return (\n    <div className=\"cypress-telephone-element\">\n      <FormElementLabelContainer\n        className=\"ob-telephone\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"field has-addons\">\n          <div className=\"control is-expanded has-icons-right\">\n            <input\n              type=\"tel\"\n              placeholder={element.placeholderValue}\n              id={id}\n              name={element.name}\n              className=\"input ob-input cypress-telephone-control\"\n              value={text}\n              onChange={(e) => onChange(element, e.target.value || undefined)}\n              required={element.required}\n              disabled={element.readOnly}\n              onBlur={setIsDirty}\n            />\n            <span className=\"ob-input-icon icon is-small is-right\">\n              <i className=\"material-icons is-size-5\">phone</i>\n            </span>\n          </div>\n          {!!element.readOnly && !!value && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n            lookupButtonConfig={element.lookupButton}\n          />\n        </div>\n\n        {(isDirty || displayValidationMessage) && !!validationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementTelephone)\n"]}
+{"version":3,"file":"FormElementTelephone.js","sourceRoot":"","sources":["../../src/form-elements/FormElementTelephone.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,qBAAqB,MAAM,8CAA8C,CAAA;AAChF,OAAO,YAAY,MAAM,qCAAqC,CAAA;AAE9D,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AAYxF,SAAS,oBAAoB,CAAC,EAC5B,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,OAAO,EACP,UAAU,GACJ;IACN,MAAM,IAAI,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;IACnD,OAAO,CACL,6BAAK,SAAS,EAAC,2BAA2B;QACxC,oBAAC,yBAAyB,IACxB,SAAS,EAAC,cAAc,EACxB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ;YAE1B,6BAAK,SAAS,EAAC,kBAAkB;gBAC/B,6BAAK,SAAS,EAAC,qCAAqC;oBAClD,+BACE,IAAI,EAAC,KAAK,EACV,WAAW,EAAE,OAAO,CAAC,gBAAgB,EACrC,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,SAAS,EAAC,0CAA0C,EACpD,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,SAAS,CAAC,EAC/D,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,MAAM,EAAE,UAAU,GAClB;oBACF,8BAAM,SAAS,EAAC,sCAAsC;wBACpD,2BAAG,SAAS,EAAC,0BAA0B,YAAU,CAC5C,CACH;gBACL,CAAC,CAAC,OAAO,CAAC,QAAQ,IAAI,CAAC,CAAC,KAAK,IAAI,CAChC,6BAAK,SAAS,EAAC,SAAS;oBACtB,oBAAC,qBAAqB,IACpB,SAAS,EAAC,oEAAoE,EAC9E,IAAI,EAAE,IAAI,GACV,CACE,CACP;gBACD,oBAAC,YAAY,IACX,aAAa,QACb,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,OAAO,CAAC,YAAY,EACxC,uBAAuB,EAAE,OAAO,CAAC,gBAAgB,GACjD,CACE;YAEL,CAAC,OAAO,IAAI,wBAAwB,CAAC,IAAI,CAAC,CAAC,iBAAiB,IAAI,CAC/D,6BAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,kBAAkB;gBAC5C,6BAAK,SAAS,EAAC,2DAA2D,IACvE,iBAAiB,CACd,CACF,CACP,CACyB,CACxB,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\n\ntype Props = {\n  id: string\n  element: FormTypes.TelephoneElement\n  value: unknown\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementTelephone({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const text = typeof value === 'string' ? value : ''\n  return (\n    <div className=\"cypress-telephone-element\">\n      <FormElementLabelContainer\n        className=\"ob-telephone\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"field has-addons\">\n          <div className=\"control is-expanded has-icons-right\">\n            <input\n              type=\"tel\"\n              placeholder={element.placeholderValue}\n              id={id}\n              name={element.name}\n              className=\"input ob-input cypress-telephone-control\"\n              value={text}\n              onChange={(e) => onChange(element, e.target.value || undefined)}\n              required={element.required}\n              disabled={element.readOnly}\n              onBlur={setIsDirty}\n            />\n            <span className=\"ob-input-icon icon is-small is-right\">\n              <i className=\"material-icons is-size-5\">phone</i>\n            </span>\n          </div>\n          {!!element.readOnly && !!value && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n            lookupButtonConfig={element.lookupButton}\n            allowLookupOnEmptyValue={element.runLookupOnClear}\n          />\n        </div>\n\n        {(isDirty || displayValidationMessage) && !!validationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementTelephone)\n"]}

package/dist/form-elements/FormElementText.js

@@ -13,7 +13,7 @@ function FormElementText({ id, element, value, onChange, validationMessage, disp
                     React.createElement("input", { type: "text", placeholder: element.placeholderValue, id: id, name: element.name, className: "input ob-input cypress-text-control", value: text, onChange: (e) => onChange(element, e.target.value || undefined), required: element.required, disabled: element.readOnly, onBlur: setIsDirty })),
                 !!element.readOnly && !!value && (React.createElement("div", { className: "control" },
                     React.createElement(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }))),
-                React.createElement(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton })),
+                React.createElement(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton, allowLookupOnEmptyValue: element.runLookupOnClear })),
             (isDisplayingValidationMessage || !!element.maxLength) && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
                 React.createElement("div", { className: "is-flex is-justify-content-space-between" },
                     isDisplayingValidationMessage ? (React.createElement("div", { className: "has-text-danger ob-error__text cypress-validation-message" }, validationMessage)) : (React.createElement("div", null)),

package/dist/form-elements/FormElementText.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementText.js","sourceRoot":"","sources":["../../src/form-elements/FormElementText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,qBAAqB,MAAM,8CAA8C,CAAA;AAChF,OAAO,YAAY,MAAM,qCAAqC,CAAA;AAE9D,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AAYxF,SAAS,eAAe,CAAC,EACvB,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,OAAO,EACP,UAAU,GACJ;IACN,MAAM,IAAI,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;IACnD,MAAM,6BAA6B,GACjC,CAAC,OAAO,IAAI,wBAAwB,CAAC,IAAI,CAAC,CAAC,iBAAiB,CAAA;IAC9D,OAAO,CACL,6BAAK,SAAS,EAAC,sBAAsB;QACnC,oBAAC,yBAAyB,IACxB,SAAS,EAAC,SAAS,EACnB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ;YAE1B,6BAAK,SAAS,EAAC,kBAAkB;gBAC/B,6BAAK,SAAS,EAAC,qBAAqB;oBAClC,+BACE,IAAI,EAAC,MAAM,EACX,WAAW,EAAE,OAAO,CAAC,gBAAgB,EACrC,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,SAAS,EAAC,qCAAqC,EAC/C,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,SAAS,CAAC,EAC/D,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,MAAM,EAAE,UAAU,GAClB,CACE;gBACL,CAAC,CAAC,OAAO,CAAC,QAAQ,IAAI,CAAC,CAAC,KAAK,IAAI,CAChC,6BAAK,SAAS,EAAC,SAAS;oBACtB,oBAAC,qBAAqB,IACpB,SAAS,EAAC,oEAAoE,EAC9E,IAAI,EAAE,IAAI,GACV,CACE,CACP;gBACD,oBAAC,YAAY,IACX,aAAa,QACb,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,OAAO,CAAC,YAAY,GACxC,CACE;YACL,CAAC,6BAA6B,IAAI,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CACzD,6BAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,kBAAkB;gBAC5C,6BAAK,SAAS,EAAC,0CAA0C;oBACtD,6BAA6B,CAAC,CAAC,CAAC,CAC/B,6BAAK,SAAS,EAAC,2DAA2D,IACvE,iBAAiB,CACd,CACP,CAAC,CAAC,CAAC,CACF,gCAAO,CACR;oBACA,CAAC,CAAC,OAAO,CAAC,SAAS,IAAI,CACtB,6BACE,SAAS,EAAE,IAAI,CACb,gDAAgD,EAChD;4BACE,iBAAiB,EAAE,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,SAAS;yBACnD,CACF;wBAEA,IAAI,CAAC,MAAM;;wBAAK,OAAO,CAAC,SAAS,CAC9B,CACP,CACG,CACF,CACP,CACyB,CACxB,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\n\ntype Props = {\n  id: string\n  element: FormTypes.TextElement\n  value: unknown\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementText({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const text = typeof value === 'string' ? value : ''\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage\n  return (\n    <div className=\"cypress-text-element\">\n      <FormElementLabelContainer\n        className=\"ob-text\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"field has-addons\">\n          <div className=\"control is-expanded\">\n            <input\n              type=\"text\"\n              placeholder={element.placeholderValue}\n              id={id}\n              name={element.name}\n              className=\"input ob-input cypress-text-control\"\n              value={text}\n              onChange={(e) => onChange(element, e.target.value || undefined)}\n              required={element.required}\n              disabled={element.readOnly}\n              onBlur={setIsDirty}\n            />\n          </div>\n          {!!element.readOnly && !!value && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n            lookupButtonConfig={element.lookupButton}\n          />\n        </div>\n        {(isDisplayingValidationMessage || !!element.maxLength) && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"is-flex is-justify-content-space-between\">\n              {isDisplayingValidationMessage ? (\n                <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n                  {validationMessage}\n                </div>\n              ) : (\n                <div />\n              )}\n              {!!element.maxLength && (\n                <div\n                  className={clsx(\n                    'ob-max-length__text cypress-max-length-message',\n                    {\n                      'has-text-danger': text.length > element.maxLength,\n                    },\n                  )}\n                >\n                  {text.length} / {element.maxLength}\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementText)\n"]}
+{"version":3,"file":"FormElementText.js","sourceRoot":"","sources":["../../src/form-elements/FormElementText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,qBAAqB,MAAM,8CAA8C,CAAA;AAChF,OAAO,YAAY,MAAM,qCAAqC,CAAA;AAE9D,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AAYxF,SAAS,eAAe,CAAC,EACvB,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,OAAO,EACP,UAAU,GACJ;IACN,MAAM,IAAI,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;IACnD,MAAM,6BAA6B,GACjC,CAAC,OAAO,IAAI,wBAAwB,CAAC,IAAI,CAAC,CAAC,iBAAiB,CAAA;IAC9D,OAAO,CACL,6BAAK,SAAS,EAAC,sBAAsB;QACnC,oBAAC,yBAAyB,IACxB,SAAS,EAAC,SAAS,EACnB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ;YAE1B,6BAAK,SAAS,EAAC,kBAAkB;gBAC/B,6BAAK,SAAS,EAAC,qBAAqB;oBAClC,+BACE,IAAI,EAAC,MAAM,EACX,WAAW,EAAE,OAAO,CAAC,gBAAgB,EACrC,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,SAAS,EAAC,qCAAqC,EAC/C,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,SAAS,CAAC,EAC/D,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,MAAM,EAAE,UAAU,GAClB,CACE;gBACL,CAAC,CAAC,OAAO,CAAC,QAAQ,IAAI,CAAC,CAAC,KAAK,IAAI,CAChC,6BAAK,SAAS,EAAC,SAAS;oBACtB,oBAAC,qBAAqB,IACpB,SAAS,EAAC,oEAAoE,EAC9E,IAAI,EAAE,IAAI,GACV,CACE,CACP;gBACD,oBAAC,YAAY,IACX,aAAa,QACb,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,OAAO,CAAC,YAAY,EACxC,uBAAuB,EAAE,OAAO,CAAC,gBAAgB,GACjD,CACE;YACL,CAAC,6BAA6B,IAAI,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CACzD,6BAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,kBAAkB;gBAC5C,6BAAK,SAAS,EAAC,0CAA0C;oBACtD,6BAA6B,CAAC,CAAC,CAAC,CAC/B,6BAAK,SAAS,EAAC,2DAA2D,IACvE,iBAAiB,CACd,CACP,CAAC,CAAC,CAAC,CACF,gCAAO,CACR;oBACA,CAAC,CAAC,OAAO,CAAC,SAAS,IAAI,CACtB,6BACE,SAAS,EAAE,IAAI,CACb,gDAAgD,EAChD;4BACE,iBAAiB,EAAE,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,SAAS;yBACnD,CACF;wBAEA,IAAI,CAAC,MAAM;;wBAAK,OAAO,CAAC,SAAS,CAC9B,CACP,CACG,CACF,CACP,CACyB,CACxB,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\n\ntype Props = {\n  id: string\n  element: FormTypes.TextElement\n  value: unknown\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementText({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const text = typeof value === 'string' ? value : ''\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage\n  return (\n    <div className=\"cypress-text-element\">\n      <FormElementLabelContainer\n        className=\"ob-text\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"field has-addons\">\n          <div className=\"control is-expanded\">\n            <input\n              type=\"text\"\n              placeholder={element.placeholderValue}\n              id={id}\n              name={element.name}\n              className=\"input ob-input cypress-text-control\"\n              value={text}\n              onChange={(e) => onChange(element, e.target.value || undefined)}\n              required={element.required}\n              disabled={element.readOnly}\n              onBlur={setIsDirty}\n            />\n          </div>\n          {!!element.readOnly && !!value && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n            lookupButtonConfig={element.lookupButton}\n            allowLookupOnEmptyValue={element.runLookupOnClear}\n          />\n        </div>\n        {(isDisplayingValidationMessage || !!element.maxLength) && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"is-flex is-justify-content-space-between\">\n              {isDisplayingValidationMessage ? (\n                <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n                  {validationMessage}\n                </div>\n              ) : (\n                <div />\n              )}\n              {!!element.maxLength && (\n                <div\n                  className={clsx(\n                    'ob-max-length__text cypress-max-length-message',\n                    {\n                      'has-text-danger': text.length > element.maxLength,\n                    },\n                  )}\n                >\n                  {text.length} / {element.maxLength}\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementText)\n"]}

package/dist/form-elements/FormElementTextarea.js

@@ -23,7 +23,7 @@ function FormElementTextarea({ id, element, value, onChange, validationMessage,
                         element.maxLength))))),
             (isDisplayingLookupButton || isDisplayingCopyButton) && (React.createElement("div", { className: "buttons ob-buttons has-margin-top-8" },
                 isDisplayingCopyButton && (React.createElement(CopyToClipboardButton, { className: "button ob-button cypress-copy-to-clipboard-button", text: text })),
-                isDisplayingLookupButton && (React.createElement(LookupButton, { value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton })))))));
+                isDisplayingLookupButton && (React.createElement(LookupButton, { value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton, allowLookupOnEmptyValue: element.runLookupOnClear })))))));
 }
 export default React.memo(FormElementTextarea);
 //# sourceMappingURL=FormElementTextarea.js.map

package/dist/form-elements/FormElementTextarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementTextarea.js","sourceRoot":"","sources":["../../src/form-elements/FormElementTextarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,qBAAqB,MAAM,8CAA8C,CAAA;AAChF,OAAO,YAAY,MAAM,qCAAqC,CAAA;AAE9D,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AAYxF,SAAS,mBAAmB,CAAC,EAC3B,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,OAAO,EACP,UAAU,GACJ;IACN,MAAM,IAAI,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;IACnD,MAAM,sBAAsB,GAAG,CAAC,CAAC,OAAO,CAAC,QAAQ,IAAI,CAAC,CAAC,KAAK,CAAA;IAC5D,MAAM,wBAAwB,GAC5B,CAAC,CAAC,OAAO,CAAC,YAAY,IAAI,CAAC,CAAC,OAAO,CAAC,eAAe,CAAA;IACrD,MAAM,6BAA6B,GACjC,CAAC,OAAO,IAAI,wBAAwB,CAAC,IAAI,CAAC,CAAC,iBAAiB,CAAA;IAC9D,OAAO,CACL,6BAAK,SAAS,EAAC,0BAA0B;QACvC,oBAAC,yBAAyB,IACxB,SAAS,EAAC,aAAa,EACvB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ;YAE1B,6BAAK,SAAS,EAAC,SAAS;gBACtB,kCACE,WAAW,EAAE,OAAO,CAAC,gBAAgB,EACrC,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,SAAS,EAAC,kDAAkD,EAC5D,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,SAAS,CAAC,EAC/D,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,MAAM,EAAE,UAAU,GAClB,CACE;YAEL,CAAC,6BAA6B,IAAI,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CACzD,6BAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,kBAAkB;gBAC5C,6BAAK,SAAS,EAAC,0CAA0C;oBACtD,6BAA6B,CAAC,CAAC,CAAC,CAC/B,6BAAK,SAAS,EAAC,2DAA2D,IACvE,iBAAiB,CACd,CACP,CAAC,CAAC,CAAC,CACF,gCAAO,CACR;oBACA,CAAC,CAAC,OAAO,CAAC,SAAS,IAAI,CACtB,6BACE,SAAS,EAAE,IAAI,CACb,gDAAgD,EAChD;4BACE,iBAAiB,EAAE,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,SAAS;yBACnD,CACF;wBAEA,IAAI,CAAC,MAAM;;wBAAK,OAAO,CAAC,SAAS,CAC9B,CACP,CACG,CACF,CACP;YAEA,CAAC,wBAAwB,IAAI,sBAAsB,CAAC,IAAI,CACvD,6BAAK,SAAS,EAAC,qCAAqC;gBACjD,sBAAsB,IAAI,CACzB,oBAAC,qBAAqB,IACpB,SAAS,EAAC,mDAAmD,EAC7D,IAAI,EAAE,IAAI,GACV,CACH;gBACA,wBAAwB,IAAI,CAC3B,oBAAC,YAAY,IACX,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,OAAO,CAAC,YAAY,GACxC,CACH,CACG,CACP,CACyB,CACxB,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\n\ntype Props = {\n  id: string\n  element: FormTypes.TextareaElement\n  value: unknown\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementTextarea({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const text = typeof value === 'string' ? value : ''\n  const isDisplayingCopyButton = !!element.readOnly && !!value\n  const isDisplayingLookupButton =\n    !!element.isDataLookup || !!element.isElementLookup\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage\n  return (\n    <div className=\"cypress-textarea-element\">\n      <FormElementLabelContainer\n        className=\"ob-textarea\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"control\">\n          <textarea\n            placeholder={element.placeholderValue}\n            id={id}\n            name={element.name}\n            className=\"textarea input ob-input cypress-textarea-control\"\n            value={text}\n            onChange={(e) => onChange(element, e.target.value || undefined)}\n            required={element.required}\n            disabled={element.readOnly}\n            onBlur={setIsDirty}\n          />\n        </div>\n\n        {(isDisplayingValidationMessage || !!element.maxLength) && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"is-flex is-justify-content-space-between\">\n              {isDisplayingValidationMessage ? (\n                <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n                  {validationMessage}\n                </div>\n              ) : (\n                <div />\n              )}\n              {!!element.maxLength && (\n                <div\n                  className={clsx(\n                    'ob-max-length__text cypress-max-length-message',\n                    {\n                      'has-text-danger': text.length > element.maxLength,\n                    },\n                  )}\n                >\n                  {text.length} / {element.maxLength}\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n\n        {(isDisplayingLookupButton || isDisplayingCopyButton) && (\n          <div className=\"buttons ob-buttons has-margin-top-8\">\n            {isDisplayingCopyButton && (\n              <CopyToClipboardButton\n                className=\"button ob-button cypress-copy-to-clipboard-button\"\n                text={text}\n              />\n            )}\n            {isDisplayingLookupButton && (\n              <LookupButton\n                value={value}\n                validationMessage={validationMessage}\n                lookupButtonConfig={element.lookupButton}\n              />\n            )}\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementTextarea)\n"]}
+{"version":3,"file":"FormElementTextarea.js","sourceRoot":"","sources":["../../src/form-elements/FormElementTextarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,qBAAqB,MAAM,8CAA8C,CAAA;AAChF,OAAO,YAAY,MAAM,qCAAqC,CAAA;AAE9D,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AAYxF,SAAS,mBAAmB,CAAC,EAC3B,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,OAAO,EACP,UAAU,GACJ;IACN,MAAM,IAAI,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;IACnD,MAAM,sBAAsB,GAAG,CAAC,CAAC,OAAO,CAAC,QAAQ,IAAI,CAAC,CAAC,KAAK,CAAA;IAC5D,MAAM,wBAAwB,GAC5B,CAAC,CAAC,OAAO,CAAC,YAAY,IAAI,CAAC,CAAC,OAAO,CAAC,eAAe,CAAA;IACrD,MAAM,6BAA6B,GACjC,CAAC,OAAO,IAAI,wBAAwB,CAAC,IAAI,CAAC,CAAC,iBAAiB,CAAA;IAC9D,OAAO,CACL,6BAAK,SAAS,EAAC,0BAA0B;QACvC,oBAAC,yBAAyB,IACxB,SAAS,EAAC,aAAa,EACvB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ;YAE1B,6BAAK,SAAS,EAAC,SAAS;gBACtB,kCACE,WAAW,EAAE,OAAO,CAAC,gBAAgB,EACrC,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,SAAS,EAAC,kDAAkD,EAC5D,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,SAAS,CAAC,EAC/D,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,MAAM,EAAE,UAAU,GAClB,CACE;YAEL,CAAC,6BAA6B,IAAI,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CACzD,6BAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,kBAAkB;gBAC5C,6BAAK,SAAS,EAAC,0CAA0C;oBACtD,6BAA6B,CAAC,CAAC,CAAC,CAC/B,6BAAK,SAAS,EAAC,2DAA2D,IACvE,iBAAiB,CACd,CACP,CAAC,CAAC,CAAC,CACF,gCAAO,CACR;oBACA,CAAC,CAAC,OAAO,CAAC,SAAS,IAAI,CACtB,6BACE,SAAS,EAAE,IAAI,CACb,gDAAgD,EAChD;4BACE,iBAAiB,EAAE,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,SAAS;yBACnD,CACF;wBAEA,IAAI,CAAC,MAAM;;wBAAK,OAAO,CAAC,SAAS,CAC9B,CACP,CACG,CACF,CACP;YAEA,CAAC,wBAAwB,IAAI,sBAAsB,CAAC,IAAI,CACvD,6BAAK,SAAS,EAAC,qCAAqC;gBACjD,sBAAsB,IAAI,CACzB,oBAAC,qBAAqB,IACpB,SAAS,EAAC,mDAAmD,EAC7D,IAAI,EAAE,IAAI,GACV,CACH;gBACA,wBAAwB,IAAI,CAC3B,oBAAC,YAAY,IACX,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,OAAO,CAAC,YAAY,EACxC,uBAAuB,EAAE,OAAO,CAAC,gBAAgB,GACjD,CACH,CACG,CACP,CACyB,CACxB,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\n\ntype Props = {\n  id: string\n  element: FormTypes.TextareaElement\n  value: unknown\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementTextarea({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const text = typeof value === 'string' ? value : ''\n  const isDisplayingCopyButton = !!element.readOnly && !!value\n  const isDisplayingLookupButton =\n    !!element.isDataLookup || !!element.isElementLookup\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage\n  return (\n    <div className=\"cypress-textarea-element\">\n      <FormElementLabelContainer\n        className=\"ob-textarea\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"control\">\n          <textarea\n            placeholder={element.placeholderValue}\n            id={id}\n            name={element.name}\n            className=\"textarea input ob-input cypress-textarea-control\"\n            value={text}\n            onChange={(e) => onChange(element, e.target.value || undefined)}\n            required={element.required}\n            disabled={element.readOnly}\n            onBlur={setIsDirty}\n          />\n        </div>\n\n        {(isDisplayingValidationMessage || !!element.maxLength) && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"is-flex is-justify-content-space-between\">\n              {isDisplayingValidationMessage ? (\n                <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n                  {validationMessage}\n                </div>\n              ) : (\n                <div />\n              )}\n              {!!element.maxLength && (\n                <div\n                  className={clsx(\n                    'ob-max-length__text cypress-max-length-message',\n                    {\n                      'has-text-danger': text.length > element.maxLength,\n                    },\n                  )}\n                >\n                  {text.length} / {element.maxLength}\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n\n        {(isDisplayingLookupButton || isDisplayingCopyButton) && (\n          <div className=\"buttons ob-buttons has-margin-top-8\">\n            {isDisplayingCopyButton && (\n              <CopyToClipboardButton\n                className=\"button ob-button cypress-copy-to-clipboard-button\"\n                text={text}\n              />\n            )}\n            {isDisplayingLookupButton && (\n              <LookupButton\n                value={value}\n                validationMessage={validationMessage}\n                lookupButtonConfig={element.lookupButton}\n                allowLookupOnEmptyValue={element.runLookupOnClear}\n              />\n            )}\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementTextarea)\n"]}

package/dist/form-elements/FormElementTime.js

@@ -44,7 +44,7 @@ function FormElementTime({ id, element, value, onChange, validationMessage, disp
                         React.createElement("i", { className: "material-icons is-size-5" }, "schedule"))),
                 !!element.readOnly && !!text && (React.createElement("div", { className: "control" },
                     React.createElement(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }))),
-                React.createElement(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton })),
+                React.createElement(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton, allowLookupOnEmptyValue: element.runLookupOnClear })),
             (isDirty || displayValidationMessage) && !!validationMessage && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
                 React.createElement("div", { className: "has-text-danger ob-error__text cypress-validation-message" }, validationMessage))))));
 }

package/dist/form-elements/FormElementTime.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementTime.js","sourceRoot":"","sources":["../../src/form-elements/FormElementTime.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { localisationService } from '@oneblink/apps'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport useFlatpickr, { FlatpickrOptions } from '../hooks/useFlatpickr'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\n\ntype Props = {\n  id: string\n  element: FormTypes.TimeElement\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementTime({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const htmlDivElementRef = React.useRef<HTMLDivElement>(null)\n\n  const flatpickrOptions = React.useMemo(() => {\n    const opts: FlatpickrOptions = {\n      altInput: true,\n      dateFormat: 'H:i',\n      altFormat: localisationService.getFlatpickrFormats().time,\n      allowInput: false,\n      altInputClass: 'input ob-input cypress-time-control',\n      minDate: undefined,\n      maxDate: undefined,\n      defaultDate: undefined,\n      enableTime: true,\n      noCalendar: true,\n      time_24hr: false,\n      onClose: setIsDirty,\n    }\n\n    return opts\n  }, [setIsDirty])\n\n  const handleChange = React.useCallback(\n    (newValue: string | undefined) => onChange(element, newValue),\n    [element, onChange],\n  )\n\n  useFlatpickr(\n    {\n      id,\n      value,\n      onChange: handleChange,\n    },\n    flatpickrOptions,\n    htmlDivElementRef,\n  )\n\n  const text = React.useMemo(() => {\n    if (typeof value !== 'string') {\n      return null\n    }\n    return localisationService.formatTime(new Date(value))\n  }, [value])\n\n  return (\n    <div className=\"cypress-time-element\" ref={htmlDivElementRef}>\n      <FormElementLabelContainer\n        className=\"ob-time\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"field has-addons\">\n          <div className=\"control is-expanded has-icons-right\">\n            <input\n              type=\"time\"\n              id={id}\n              name={element.name}\n              placeholder={element.placeholderValue}\n              disabled={element.readOnly}\n              className=\"input ob-input\"\n            />\n            <span className=\"ob-input-icon icon is-small is-right\">\n              <i className=\"material-icons is-size-5\">schedule</i>\n            </span>\n          </div>\n          {!!element.readOnly && !!text && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n            lookupButtonConfig={element.lookupButton}\n          />\n        </div>\n\n        {(isDirty || displayValidationMessage) && !!validationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementTime)\n"]}
+{"version":3,"file":"FormElementTime.js","sourceRoot":"","sources":["../../src/form-elements/FormElementTime.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { localisationService } from '@oneblink/apps'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport useFlatpickr, { FlatpickrOptions } from '../hooks/useFlatpickr'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\n\ntype Props = {\n  id: string\n  element: FormTypes.TimeElement\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementTime({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const htmlDivElementRef = React.useRef<HTMLDivElement>(null)\n\n  const flatpickrOptions = React.useMemo(() => {\n    const opts: FlatpickrOptions = {\n      altInput: true,\n      dateFormat: 'H:i',\n      altFormat: localisationService.getFlatpickrFormats().time,\n      allowInput: false,\n      altInputClass: 'input ob-input cypress-time-control',\n      minDate: undefined,\n      maxDate: undefined,\n      defaultDate: undefined,\n      enableTime: true,\n      noCalendar: true,\n      time_24hr: false,\n      onClose: setIsDirty,\n    }\n\n    return opts\n  }, [setIsDirty])\n\n  const handleChange = React.useCallback(\n    (newValue: string | undefined) => onChange(element, newValue),\n    [element, onChange],\n  )\n\n  useFlatpickr(\n    {\n      id,\n      value,\n      onChange: handleChange,\n    },\n    flatpickrOptions,\n    htmlDivElementRef,\n  )\n\n  const text = React.useMemo(() => {\n    if (typeof value !== 'string') {\n      return null\n    }\n    return localisationService.formatTime(new Date(value))\n  }, [value])\n\n  return (\n    <div className=\"cypress-time-element\" ref={htmlDivElementRef}>\n      <FormElementLabelContainer\n        className=\"ob-time\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"field has-addons\">\n          <div className=\"control is-expanded has-icons-right\">\n            <input\n              type=\"time\"\n              id={id}\n              name={element.name}\n              placeholder={element.placeholderValue}\n              disabled={element.readOnly}\n              className=\"input ob-input\"\n            />\n            <span className=\"ob-input-icon icon is-small is-right\">\n              <i className=\"material-icons is-size-5\">schedule</i>\n            </span>\n          </div>\n          {!!element.readOnly && !!text && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n            lookupButtonConfig={element.lookupButton}\n            allowLookupOnEmptyValue={element.runLookupOnClear}\n          />\n        </div>\n\n        {(isDirty || displayValidationMessage) && !!validationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementTime)\n"]}

package/dist/hooks/useDynamicOptionsLoaderState.d.ts

@@ -1,7 +1,16 @@
-import { OneBlinkAppsError } from '@oneblink/apps';
-import { FormTypes } from '@oneblink/types';
-import { SetFormSubmission } from '../types/form';
-export default function useDynamicOptionsLoaderState(form: FormTypes.Form, setFormSubmission: SetFormSubmission): {
-    elementId: string;
-    error: OneBlinkAppsError;
-} | null;
+import * as React from 'react';
+import { formService } from '@oneblink/apps';
+import { FormTypes, FreshdeskTypes } from '@oneblink/types';
+import { LoadDataState } from './useLoadDataState';
+import { UpdateFormElementsHandler } from '../typedoc';
+type OptionsSetResult = {
+    formElementOptionsSet: FormTypes.FormElementOptionSet;
+    result?: formService.FormElementOptionsSetResult;
+};
+export declare const FormElementOptionsContext: React.Context<OptionsSetResult[]>;
+export declare const FreshdeskFieldsStateContext: React.Context<LoadDataState<FreshdeskTypes.FreshdeskField[]> | undefined>;
+export declare function FormElementOptionsContextProvider({ children, }: {
+    children: React.ReactNode;
+}): JSX.Element;
+export declare function useLoadDynamicOptionsEffect(formElement: FormTypes.FormElementWithOptions, onUpdateFormElements: UpdateFormElementsHandler): void;
+export {};