@oneblink/apps-react 12.0.0 → 13.0.0-beta.10

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementCompliance.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCompliance.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\n\nimport FormElementOptions from '../components/renderer/FormElementOptions'\nimport useFormElementOptions from '../hooks/useFormElementOptions'\nimport useToggleComplianceChildren from '../hooks/useToggleComplianceChildren'\nimport { FormTypes } from '@oneblink/types'\nimport OptionButton from './OptionButton'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport ComplianceButton from './ComplianceButton'\nimport FormElementFiles from './FormElementFiles'\nimport FormElementTextarea from './FormElementTextarea'\nimport {\n  FormElementValueChangeHandler,\n  FormElementConditionallyShownElement,\n  IsDirtyProps,\n  NestedFormElementValueChangeHandler,\n  UpdateFormElementsHandler,\n} from '../types/form'\nimport { attachmentsService } from '../apps'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ninterface Props extends IsDirtyProps {\n  id: string\n  element: FormTypes.ComplianceElement\n  value: unknown\n  onChange: NestedFormElementValueChangeHandler<Value>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  conditionallyShownOptionsElement:\n    | FormElementConditionallyShownElement\n    | undefined\n  isEven?: boolean\n  onUpdateFormElements: UpdateFormElementsHandler\n}\n\nexport interface Value {\n  value?: string\n  notes?: string\n  files?: attachmentsService.Attachment[]\n}\n\nconst baseElement = {\n  conditionallyShow: false,\n  isDataLookup: false,\n  isElementLookup: false,\n  required: false,\n  requiresAllConditionallyShowPredicates: false,\n}\n\nexport function stringifyComplianceValue(value: unknown): string {\n  if (!value) {\n    return ''\n  }\n  const selectedValue = (value as { value: unknown }).value\n  return typeof selectedValue === 'string' ? selectedValue : ''\n}\n\nfunction FormElementCompliance({\n  id,\n  element,\n  value,\n  onChange,\n  conditionallyShownOptionsElement,\n  validationMessage,\n  displayValidationMessage,\n  isEven,\n  onUpdateFormElements,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const typedValue = value as Value | undefined\n\n  const notesElement = React.useMemo<FormTypes.TextareaElement>(\n    () => ({\n      ...baseElement,\n      readOnly: element.readOnly,\n      id: `${element.id}-notes`,\n      label: 'Notes',\n      name: `${element.name}_notes`,\n      type: 'textarea',\n      autocompleteAttributes: element.autocompleteAttributes,\n    }),\n    [\n      element.autocompleteAttributes,\n      element.id,\n      element.name,\n      element.readOnly,\n    ],\n  )\n  const filesElement = React.useMemo<FormTypes.FilesElement>(\n    () => ({\n      ...baseElement,\n      readOnly: element.readOnly,\n      id: `${element.id}-files`,\n      label: 'Media',\n      name: `${element.name}_files`,\n      type: 'files',\n      maxEntries: undefined,\n      minEntries: undefined,\n      restrictFileTypes: false,\n      storageType: element.storageType,\n    }),\n    [element.id, element.name, element.readOnly, element.storageType],\n  )\n\n  const handleValueChange = React.useCallback<\n    FormElementValueChangeHandler<string>\n  >(\n    (fe, { value: v }) => {\n      onChange(fe, {\n        value: (existingValue: Value | undefined) => {\n          let newValue = undefined\n          if (typeof v === 'function') {\n            newValue = v(existingValue ? existingValue.value : undefined)\n          } else {\n            newValue = v\n          }\n          if (!newValue) {\n            return\n          }\n          return {\n            ...existingValue,\n            value: newValue,\n          }\n        },\n        executedLookups: undefined,\n        sectionState: undefined,\n      })\n    },\n    [onChange],\n  )\n  const handleNotesChange = React.useCallback<\n    React.ComponentProps<typeof FormElementTextarea>['onChange']\n  >(\n    (fe, { value: v }) => {\n      onChange(element, {\n        value: (existingValue: Value | undefined) => {\n          if (!existingValue) {\n            return\n          }\n          let newNotes = undefined\n          if (typeof v === 'function') {\n            newNotes = v(existingValue.notes)\n          } else {\n            newNotes = v\n          }\n          return {\n            ...existingValue,\n            notes: newNotes,\n          }\n        },\n        // Preserve the executed lookups state to indicate the\n        // lookup does not need to be executed again if the notes change.\n        executedLookups: (executedLookups) => executedLookups,\n        sectionState: undefined,\n      })\n    },\n    [element, onChange],\n  )\n  const handleFilesChange = React.useCallback<\n    React.ComponentProps<typeof FormElementFiles>['onChange']\n  >(\n    (fe, { value: v }) => {\n      onChange(element, {\n        value: (existingValue: Value | undefined) => {\n          if (!existingValue) {\n            return\n          }\n          let newFiles = undefined\n          if (typeof v === 'function') {\n            newFiles = v(existingValue.files)\n          } else {\n            newFiles = v\n          }\n          return {\n            ...existingValue,\n            files: newFiles && newFiles.length ? newFiles : undefined,\n          }\n        },\n        // Preserve the executed lookups state to indicate the\n        // lookup does not need to be executed again if the files change.\n        executedLookups: (executedLookups) => executedLookups,\n        sectionState: undefined,\n      })\n    },\n    [element, onChange],\n  )\n\n  const [isShowingNotes, toggleIsShowingNotes] = useToggleComplianceChildren(\n    element,\n    !!typedValue?.notes,\n    handleNotesChange,\n  )\n  const [isShowingFiles, toggleIsShowingFiles] = useToggleComplianceChildren(\n    element,\n    !!typedValue?.files,\n    handleFilesChange,\n  )\n\n  const filteredOptions = useFormElementOptions({\n    element,\n    value: typedValue?.value,\n    onChange: handleValueChange,\n    conditionallyShownOptionsElement,\n    onUpdateFormElements,\n  })\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  return (\n    <div\n      className=\"cypress-compliance-element\"\n      aria-labelledby={`${id}-label`}\n      aria-describedby={ariaDescribedby}\n      role=\"region\"\n    >\n      <FormElementLabelContainer\n        className={`ob-compliance ${!isEven ? 'even' : 'odd'}`}\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"ob-compliance__container\">\n          <FormElementOptions\n            options={element.options}\n            conditionallyShownOptionsElement={conditionallyShownOptionsElement}\n          >\n            <div\n              className=\"buttons ob-buttons ob-buttons-radio cypress-radio-button-group\"\n              role=\"group\"\n              aria-labelledby={`${id}-label`}\n              aria-describedby={ariaDescribedby}\n            >\n              {filteredOptions.map((option) => {\n                const isSelected = typedValue?.value === option.value\n                return (\n                  <div className=\"ob-button-radio-container\" key={option.value}>\n                    <OptionButton\n                      element={element}\n                      option={option}\n                      isSelected={isSelected}\n                      onClick={() => {\n                        setIsDirty()\n                        if (!isSelected) {\n                          handleValueChange(element, {\n                            value: option.value,\n                          })\n                        }\n                      }}\n                      className={clsx(\n                        'button ob-button ob-button__input ob-radio__button cypress-radio-button-control',\n                        {\n                          'is-primary': isSelected,\n                          'is-light': !isSelected,\n                        },\n                      )}\n                      aria-describedby={ariaDescribedby}\n                    />\n                  </div>\n                )\n              })}\n            </div>\n          </FormElementOptions>\n          {isDisplayingValidationMessage && (\n            <FormElementValidationMessage message={validationMessage} />\n          )}\n          <div className=\"buttons ob-buttons ob-buttons-compliance cypress-compliance-button-group\">\n            <ComplianceButton\n              isActive={isShowingNotes}\n              icon=\"notes\"\n              onClick={toggleIsShowingNotes}\n              disabled={element.readOnly || !typedValue?.value}\n            >\n              Notes\n            </ComplianceButton>\n            <ComplianceButton\n              isActive={isShowingFiles}\n              icon=\"perm_media\"\n              onClick={toggleIsShowingFiles}\n              disabled={element.readOnly || !typedValue?.value}\n            >\n              Media\n            </ComplianceButton>\n          </div>\n          {isShowingNotes && (\n            <div className=\"ob-compliance-child-element\">\n              <FormElementTextarea\n                id={`${id}-notes`}\n                onChange={handleNotesChange}\n                displayValidationMessage={false}\n                validationMessage={undefined}\n                value={typedValue?.notes}\n                element={notesElement}\n                isDirty={isDirty}\n                setIsDirty={setIsDirty}\n                autocompleteAttributes={notesElement.autocompleteAttributes?.join(\n                  ' ',\n                )}\n              />\n            </div>\n          )}\n          {isShowingFiles && (\n            <div className=\"ob-compliance-child-element\">\n              <FormElementFiles\n                id={`${id}-files`}\n                onChange={handleFilesChange}\n                displayValidationMessage={false}\n                validationMessage={undefined}\n                value={typedValue?.files}\n                element={filesElement}\n                isDirty={isDirty}\n                setIsDirty={setIsDirty}\n              />\n            </div>\n          )}\n        </div>\n      </FormElementLabelContainer>\n    </div>\n  )\n}\nexport default React.memo(FormElementCompliance)\n"]}
+{"version":3,"file":"FormElementCompliance.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCompliance.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\n\nimport FormElementOptions from '../components/renderer/FormElementOptions'\nimport useFormElementOptions from '../hooks/useFormElementOptions'\nimport useToggleComplianceChildren from '../hooks/useToggleComplianceChildren'\nimport { FormTypes } from '@oneblink/types'\nimport OptionButton from './OptionButton'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport ComplianceButton from './ComplianceButton'\nimport FormElementFiles from './FormElementFiles'\nimport FormElementTextarea from './FormElementTextarea'\nimport {\n  FormElementValueChangeHandler,\n  FormElementConditionallyShownElement,\n  IsDirtyProps,\n  NestedFormElementValueChangeHandler,\n  UpdateFormElementsHandler,\n} from '../types/form'\nimport { attachmentsService } from '../apps'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ninterface Props extends IsDirtyProps {\n  id: string\n  element: FormTypes.ComplianceElement\n  readOnly: boolean\n  value: unknown\n  onChange: NestedFormElementValueChangeHandler<Value>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  conditionallyShownOptionsElement:\n    | FormElementConditionallyShownElement\n    | undefined\n  isEven?: boolean\n  onUpdateFormElements: UpdateFormElementsHandler\n}\n\nexport interface Value {\n  value?: string\n  notes?: string\n  files?: attachmentsService.Attachment[]\n}\n\nconst baseElement = {\n  conditionallyShow: false,\n  isDataLookup: false,\n  isElementLookup: false,\n  required: false,\n  requiresAllConditionallyShowPredicates: false,\n}\n\nexport function stringifyComplianceValue(value: unknown): string {\n  if (!value) {\n    return ''\n  }\n  const selectedValue = (value as { value: unknown }).value\n  return typeof selectedValue === 'string' ? selectedValue : ''\n}\n\nfunction FormElementCompliance({\n  id,\n  element,\n  readOnly,\n  value,\n  onChange,\n  conditionallyShownOptionsElement,\n  validationMessage,\n  displayValidationMessage,\n  isEven,\n  onUpdateFormElements,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const typedValue = value as Value | undefined\n\n  const notesElement = React.useMemo<FormTypes.TextareaElement>(\n    () => ({\n      ...baseElement,\n      id: `${element.id}-notes`,\n      label: 'Notes',\n      name: `${element.name}_notes`,\n      type: 'textarea',\n      autocompleteAttributes: element.autocompleteAttributes,\n    }),\n    [element.autocompleteAttributes, element.id, element.name],\n  )\n  const filesElement = React.useMemo<FormTypes.FilesElement>(\n    () => ({\n      ...baseElement,\n      id: `${element.id}-files`,\n      label: 'Media',\n      name: `${element.name}_files`,\n      type: 'files',\n      maxEntries: undefined,\n      minEntries: undefined,\n      restrictFileTypes: false,\n      storageType: element.storageType,\n    }),\n    [element.id, element.name, element.storageType],\n  )\n\n  const handleValueChange = React.useCallback<\n    FormElementValueChangeHandler<string>\n  >(\n    (fe, { value: v }) => {\n      onChange(fe, {\n        value: (existingValue: Value | undefined) => {\n          let newValue = undefined\n          if (typeof v === 'function') {\n            newValue = v(existingValue ? existingValue.value : undefined)\n          } else {\n            newValue = v\n          }\n          if (!newValue) {\n            return\n          }\n          return {\n            ...existingValue,\n            value: newValue,\n          }\n        },\n        executedLookups: undefined,\n        sectionState: undefined,\n      })\n    },\n    [onChange],\n  )\n  const handleNotesChange = React.useCallback<\n    React.ComponentProps<typeof FormElementTextarea>['onChange']\n  >(\n    (fe, { value: v }) => {\n      onChange(element, {\n        value: (existingValue: Value | undefined) => {\n          if (!existingValue) {\n            return\n          }\n          let newNotes = undefined\n          if (typeof v === 'function') {\n            newNotes = v(existingValue.notes)\n          } else {\n            newNotes = v\n          }\n          return {\n            ...existingValue,\n            notes: newNotes,\n          }\n        },\n        // Preserve the executed lookups state to indicate the\n        // lookup does not need to be executed again if the notes change.\n        executedLookups: (executedLookups) => executedLookups,\n        sectionState: undefined,\n      })\n    },\n    [element, onChange],\n  )\n  const handleFilesChange = React.useCallback<\n    React.ComponentProps<typeof FormElementFiles>['onChange']\n  >(\n    (fe, { value: v }) => {\n      onChange(element, {\n        value: (existingValue: Value | undefined) => {\n          if (!existingValue) {\n            return\n          }\n          let newFiles = undefined\n          if (typeof v === 'function') {\n            newFiles = v(existingValue.files)\n          } else {\n            newFiles = v\n          }\n          return {\n            ...existingValue,\n            files: newFiles && newFiles.length ? newFiles : undefined,\n          }\n        },\n        // Preserve the executed lookups state to indicate the\n        // lookup does not need to be executed again if the files change.\n        executedLookups: (executedLookups) => executedLookups,\n        sectionState: undefined,\n      })\n    },\n    [element, onChange],\n  )\n\n  const [isShowingNotes, toggleIsShowingNotes] = useToggleComplianceChildren(\n    element,\n    !!typedValue?.notes,\n    handleNotesChange,\n  )\n  const [isShowingFiles, toggleIsShowingFiles] = useToggleComplianceChildren(\n    element,\n    !!typedValue?.files,\n    handleFilesChange,\n  )\n\n  const filteredOptions = useFormElementOptions({\n    element,\n    value: typedValue?.value,\n    onChange: handleValueChange,\n    conditionallyShownOptionsElement,\n    onUpdateFormElements,\n  })\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  return (\n    <div\n      className=\"cypress-compliance-element\"\n      aria-labelledby={`${id}-label`}\n      aria-describedby={ariaDescribedby}\n      role=\"region\"\n    >\n      <FormElementLabelContainer\n        className={`ob-compliance ${!isEven ? 'even' : 'odd'}`}\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"ob-compliance__container\">\n          <FormElementOptions\n            options={element.options}\n            conditionallyShownOptionsElement={conditionallyShownOptionsElement}\n          >\n            <div\n              className=\"buttons ob-buttons ob-buttons-radio cypress-radio-button-group\"\n              role=\"group\"\n              aria-labelledby={`${id}-label`}\n              aria-describedby={ariaDescribedby}\n            >\n              {filteredOptions.map((option) => {\n                const isSelected = typedValue?.value === option.value\n                return (\n                  <div className=\"ob-button-radio-container\" key={option.value}>\n                    <OptionButton\n                      readOnly={readOnly}\n                      option={option}\n                      isSelected={isSelected}\n                      onClick={() => {\n                        setIsDirty()\n                        if (!isSelected) {\n                          handleValueChange(element, {\n                            value: option.value,\n                          })\n                        }\n                      }}\n                      className={clsx(\n                        'button ob-button ob-button__input ob-radio__button cypress-radio-button-control',\n                        {\n                          'is-primary': isSelected,\n                          'is-light': !isSelected,\n                        },\n                      )}\n                      aria-describedby={ariaDescribedby}\n                    />\n                  </div>\n                )\n              })}\n            </div>\n          </FormElementOptions>\n          {isDisplayingValidationMessage && (\n            <FormElementValidationMessage message={validationMessage} />\n          )}\n          <div className=\"buttons ob-buttons ob-buttons-compliance cypress-compliance-button-group\">\n            <ComplianceButton\n              isActive={isShowingNotes}\n              icon=\"notes\"\n              onClick={toggleIsShowingNotes}\n              disabled={readOnly || !typedValue?.value}\n            >\n              Notes\n            </ComplianceButton>\n            <ComplianceButton\n              isActive={isShowingFiles}\n              icon=\"perm_media\"\n              onClick={toggleIsShowingFiles}\n              disabled={readOnly || !typedValue?.value}\n            >\n              Media\n            </ComplianceButton>\n          </div>\n          {isShowingNotes && (\n            <div className=\"ob-compliance-child-element\">\n              <FormElementTextarea\n                id={`${id}-notes`}\n                onChange={handleNotesChange}\n                displayValidationMessage={false}\n                validationMessage={undefined}\n                value={typedValue?.notes}\n                element={notesElement}\n                readOnly={readOnly}\n                isDirty={isDirty}\n                setIsDirty={setIsDirty}\n                autocompleteAttributes={notesElement.autocompleteAttributes?.join(\n                  ' ',\n                )}\n              />\n            </div>\n          )}\n          {isShowingFiles && (\n            <div className=\"ob-compliance-child-element\">\n              <FormElementFiles\n                id={`${id}-files`}\n                onChange={handleFilesChange}\n                displayValidationMessage={false}\n                validationMessage={undefined}\n                value={typedValue?.files}\n                element={filesElement}\n                readOnly={readOnly}\n                isDirty={isDirty}\n                setIsDirty={setIsDirty}\n              />\n            </div>\n          )}\n        </div>\n      </FormElementLabelContainer>\n    </div>\n  )\n}\nexport default React.memo(FormElementCompliance)\n"]}

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

@@ -4,11 +4,12 @@ import { FormElementValueChangeHandler, IsDirtyProps } from '../types/form';
 type Props = {
     id: string;
     element: FormTypes.DateElement;
+    readOnly: boolean;
     value: unknown | undefined;
     onChange: FormElementValueChangeHandler<string>;
     displayValidationMessage: boolean;
     validationMessage: string | undefined;
 } & IsDirtyProps;
-declare function FormElementDate({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function FormElementDate({ id, element, readOnly, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof FormElementDate>;
 export default _default;

package/dist/form-elements/FormElementDate.js

@@ -12,7 +12,7 @@ import { LookupNotificationContext } from '../hooks/useLookupNotification';
 import useElementAriaDescribedby from '../hooks/useElementAriaDescribedby';
 import useFormDatePickerProps, { PickerInputButton, } from '../hooks/form-date-picker/useFormDatePickerProps';
 import FormElementValidationMessage from '../components/renderer/FormElementValidationMessage';
-function FormElementDate({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }) {
+function FormElementDate({ id, element, readOnly, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }) {
     const ariaDescribedby = useElementAriaDescribedby(id, element);
     const { fromDate, fromDaysOffset, toDate, toDaysOffset } = useFormElementDateFromTo(element);
     const shortDateFormat = localisationService.getDateFnsFormats().shortDate;
@@ -40,7 +40,7 @@ function FormElementDate({ id, element, value, onChange, validationMessage, disp
         placeholder: element.placeholderValue,
         className: 'cypress-date-control',
         onBlur: setIsDirty,
-        disabled: element.readOnly,
+        disabled: readOnly,
         required: element.required,
         onChange: (newDate) => onChange(element, {
             value: newDate ? format(newDate, 'yyyy-MM-dd') : undefined,
@@ -60,7 +60,7 @@ function FormElementDate({ id, element, value, onChange, validationMessage, disp
     }, [value]);
     const { isLookingUp } = React.useContext(LookupNotificationContext);
     const isDisplayingValidationMessage = (displayValidationMessage || isDirty) && !!validationMessage && !isLookingUp;
-    return (_jsx("div", { className: "cypress-date-element", children: _jsxs(FormElementLabelContainer, { className: "ob-date", id: id, element: element, required: element.required, children: [_jsxs("div", { className: "field has-addons", children: [_jsx(DatePicker, { label: element.label, format: shortDateFormat, ...commonProps }), !element.readOnly && (_jsx(PickerInputButton, { tooltip: "Select date", onClick: openDatePicker, icon: "event" })), !!element.readOnly && !!text && (_jsx("div", { className: "control", children: _jsx(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }) })), _jsx(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton, overrideRequiredMessage: undefined })] }), isDisplayingValidationMessage && (_jsx(FormElementValidationMessage, { message: validationMessage }))] }) }));
+    return (_jsx("div", { className: "cypress-date-element", children: _jsxs(FormElementLabelContainer, { className: "ob-date", id: id, element: element, required: element.required, children: [_jsxs("div", { className: "field has-addons", children: [_jsx(DatePicker, { label: element.label, format: shortDateFormat, ...commonProps }), !readOnly && (_jsx(PickerInputButton, { tooltip: "Select date", onClick: openDatePicker, icon: "event" })), !!readOnly && !!text && (_jsx("div", { className: "control", children: _jsx(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }) })), _jsx(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton, overrideRequiredMessage: undefined })] }), isDisplayingValidationMessage && (_jsx(FormElementValidationMessage, { message: validationMessage }))] }) }));
 }
 export default React.memo(FormElementDate);
 //# sourceMappingURL=FormElementDate.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementDate.js","sourceRoot":"","sources":["../../src/form-elements/FormElementDate.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { localisationService } from '../apps'\nimport { FormTypes } from '@oneblink/types'\nimport { DatePicker } from '@mui/x-date-pickers'\nimport { format } from 'date-fns'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\n\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { parseDateValue } from '../services/generate-default-data'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useFormElementDateFromTo from '../hooks/useFormElementDateFromTo'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport useFormDatePickerProps, {\n  PickerInputButton,\n} from '../hooks/form-date-picker/useFormDatePickerProps'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n  id: string\n  element: FormTypes.DateElement\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementDate({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n\n  const { fromDate, fromDaysOffset, toDate, toDaysOffset } =\n    useFormElementDateFromTo(element)\n\n  const shortDateFormat = localisationService.getDateFnsFormats().shortDate\n\n  const maxDate = React.useMemo(() => {\n    return parseDateValue({\n      dateOnly: true,\n      daysOffset: toDaysOffset,\n      value: toDate,\n    })\n  }, [toDate, toDaysOffset])\n\n  const minDate = React.useMemo(() => {\n    return parseDateValue({\n      dateOnly: true,\n      daysOffset: fromDaysOffset,\n      value: fromDate,\n    })\n  }, [fromDate, fromDaysOffset])\n\n  const isoValue = React.useMemo(\n    () => parseDateValue({ dateOnly: false, daysOffset: 0, value }),\n    [value],\n  )\n\n  const [commonProps, openDatePicker] = useFormDatePickerProps({\n    id,\n    value: isoValue,\n    maxDate,\n    minDate,\n    ariaDescribedby,\n    placeholder: element.placeholderValue,\n    className: 'cypress-date-control',\n    onBlur: setIsDirty,\n    disabled: element.readOnly,\n    required: element.required,\n    onChange: (newDate) =>\n      onChange(element, {\n        value: newDate ? format(newDate, 'yyyy-MM-dd') : undefined,\n      }),\n  })\n\n  const text = React.useMemo(() => {\n    if (typeof value === 'string') {\n      const date = localisationService.generateDate({\n        daysOffset: undefined,\n        value,\n      })\n      if (date) {\n        return localisationService.formatDate(date)\n      }\n    }\n    return null\n  }, [value])\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (displayValidationMessage || isDirty) && !!validationMessage && !isLookingUp\n\n  return (\n    <div className=\"cypress-date-element\">\n      <FormElementLabelContainer\n        className=\"ob-date\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"field has-addons\">\n          <DatePicker\n            label={element.label}\n            format={shortDateFormat}\n            {...commonProps}\n          />\n          {!element.readOnly && (\n            <PickerInputButton\n              tooltip=\"Select date\"\n              onClick={openDatePicker}\n              icon=\"event\"\n            />\n          )}\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            overrideRequiredMessage={undefined}\n          />\n        </div>\n\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementDate)\n"]}
+{"version":3,"file":"FormElementDate.js","sourceRoot":"","sources":["../../src/form-elements/FormElementDate.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { localisationService } from '../apps'\nimport { FormTypes } from '@oneblink/types'\nimport { DatePicker } from '@mui/x-date-pickers'\nimport { format } from 'date-fns'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\n\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { parseDateValue } from '../services/generate-default-data'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useFormElementDateFromTo from '../hooks/useFormElementDateFromTo'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport useFormDatePickerProps, {\n  PickerInputButton,\n} from '../hooks/form-date-picker/useFormDatePickerProps'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n  id: string\n  element: FormTypes.DateElement\n  readOnly: boolean\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementDate({\n  id,\n  element,\n  readOnly,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n\n  const { fromDate, fromDaysOffset, toDate, toDaysOffset } =\n    useFormElementDateFromTo(element)\n\n  const shortDateFormat = localisationService.getDateFnsFormats().shortDate\n\n  const maxDate = React.useMemo(() => {\n    return parseDateValue({\n      dateOnly: true,\n      daysOffset: toDaysOffset,\n      value: toDate,\n    })\n  }, [toDate, toDaysOffset])\n\n  const minDate = React.useMemo(() => {\n    return parseDateValue({\n      dateOnly: true,\n      daysOffset: fromDaysOffset,\n      value: fromDate,\n    })\n  }, [fromDate, fromDaysOffset])\n\n  const isoValue = React.useMemo(\n    () => parseDateValue({ dateOnly: false, daysOffset: 0, value }),\n    [value],\n  )\n\n  const [commonProps, openDatePicker] = useFormDatePickerProps({\n    id,\n    value: isoValue,\n    maxDate,\n    minDate,\n    ariaDescribedby,\n    placeholder: element.placeholderValue,\n    className: 'cypress-date-control',\n    onBlur: setIsDirty,\n    disabled: readOnly,\n    required: element.required,\n    onChange: (newDate) =>\n      onChange(element, {\n        value: newDate ? format(newDate, 'yyyy-MM-dd') : undefined,\n      }),\n  })\n\n  const text = React.useMemo(() => {\n    if (typeof value === 'string') {\n      const date = localisationService.generateDate({\n        daysOffset: undefined,\n        value,\n      })\n      if (date) {\n        return localisationService.formatDate(date)\n      }\n    }\n    return null\n  }, [value])\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (displayValidationMessage || isDirty) && !!validationMessage && !isLookingUp\n\n  return (\n    <div className=\"cypress-date-element\">\n      <FormElementLabelContainer\n        className=\"ob-date\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"field has-addons\">\n          <DatePicker\n            label={element.label}\n            format={shortDateFormat}\n            {...commonProps}\n          />\n          {!readOnly && (\n            <PickerInputButton\n              tooltip=\"Select date\"\n              onClick={openDatePicker}\n              icon=\"event\"\n            />\n          )}\n          {!!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            overrideRequiredMessage={undefined}\n          />\n        </div>\n\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementDate)\n"]}

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

@@ -4,11 +4,12 @@ import { FormElementValueChangeHandler, IsDirtyProps } from '../types/form';
 type Props = {
     id: string;
     element: FormTypes.DateTimeElement;
+    readOnly: boolean;
     value: unknown | undefined;
     onChange: FormElementValueChangeHandler<string>;
     displayValidationMessage: boolean;
     validationMessage: string | undefined;
 } & IsDirtyProps;
-declare function FormElementDateTime({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function FormElementDateTime({ id, element, readOnly, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof FormElementDateTime>;
 export default _default;

package/dist/form-elements/FormElementDateTime.js

@@ -11,7 +11,7 @@ import { LookupNotificationContext } from '../hooks/useLookupNotification';
 import useElementAriaDescribedby from '../hooks/useElementAriaDescribedby';
 import useFormDatePickerProps, { PickerInputButton, } from '../hooks/form-date-picker/useFormDatePickerProps';
 import FormElementValidationMessage from '../components/renderer/FormElementValidationMessage';
-function FormElementDateTime({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }) {
+function FormElementDateTime({ id, element, readOnly, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }) {
     const ariaDescribedby = useElementAriaDescribedby(id, element);
     const { fromDate, fromDaysOffset, toDate, toDaysOffset } = useFormElementDateFromTo(element);
     const shortDateTimeFormat = localisationService.getDateFnsFormats().shortDateTime;
@@ -37,7 +37,7 @@ function FormElementDateTime({ id, element, value, onChange, validationMessage,
         ariaDescribedby,
         placeholder: element.placeholderValue,
         className: 'cypress-date-time-control',
-        disabled: element.readOnly,
+        disabled: readOnly,
         required: element.required,
         onBlur: setIsDirty,
         onChange: (newDate) => {
@@ -54,7 +54,7 @@ function FormElementDateTime({ id, element, value, onChange, validationMessage,
     }, [value]);
     const { isLookingUp } = React.useContext(LookupNotificationContext);
     const isDisplayingValidationMessage = (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp;
-    return (_jsx("div", { className: "cypress-datetime-element", children: _jsxs(FormElementLabelContainer, { className: "ob-datetime", id: id, element: element, required: element.required, children: [_jsxs("div", { className: "field has-addons", children: [_jsx(DateTimePicker, { label: element.label, format: shortDateTimeFormat, ...commonProps, timeSteps: { minutes: 1 } }), !element.readOnly && (_jsx(PickerInputButton, { tooltip: "Select date and time", onClick: openDateTimePicker, icon: "date_range" })), !!element.readOnly && !!text && (_jsx("div", { className: "control", children: _jsx(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }) })), _jsx(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton, overrideRequiredMessage: undefined })] }), isDisplayingValidationMessage && (_jsx(FormElementValidationMessage, { message: validationMessage }))] }) }));
+    return (_jsx("div", { className: "cypress-datetime-element", children: _jsxs(FormElementLabelContainer, { className: "ob-datetime", id: id, element: element, required: element.required, children: [_jsxs("div", { className: "field has-addons", children: [_jsx(DateTimePicker, { label: element.label, format: shortDateTimeFormat, ...commonProps, timeSteps: { minutes: 1 } }), !readOnly && (_jsx(PickerInputButton, { tooltip: "Select date and time", onClick: openDateTimePicker, icon: "date_range" })), !!readOnly && !!text && (_jsx("div", { className: "control", children: _jsx(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }) })), _jsx(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton, overrideRequiredMessage: undefined })] }), isDisplayingValidationMessage && (_jsx(FormElementValidationMessage, { message: validationMessage }))] }) }));
 }
 export default React.memo(FormElementDateTime);
 //# sourceMappingURL=FormElementDateTime.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementDateTime.js","sourceRoot":"","sources":["../../src/form-elements/FormElementDateTime.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { localisationService } from '../apps'\nimport { FormTypes } from '@oneblink/types'\nimport { DateTimePicker } from '@mui/x-date-pickers'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\n\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { parseDateValue } from '../services/generate-default-data'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useFormElementDateFromTo from '../hooks/useFormElementDateFromTo'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport useFormDatePickerProps, {\n  PickerInputButton,\n} from '../hooks/form-date-picker/useFormDatePickerProps'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n  id: string\n  element: FormTypes.DateTimeElement\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementDateTime({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n\n  const { fromDate, fromDaysOffset, toDate, toDaysOffset } =\n    useFormElementDateFromTo(element)\n\n  const shortDateTimeFormat =\n    localisationService.getDateFnsFormats().shortDateTime\n\n  const maxDate = React.useMemo(() => {\n    return parseDateValue({\n      dateOnly: true,\n      daysOffset: toDaysOffset,\n      value: toDate,\n    })\n  }, [toDate, toDaysOffset])\n\n  const minDate = React.useMemo(() => {\n    return parseDateValue({\n      dateOnly: true,\n      daysOffset: fromDaysOffset,\n      value: fromDate,\n    })\n  }, [fromDate, fromDaysOffset])\n\n  const [commonProps, openDateTimePicker] = useFormDatePickerProps({\n    id,\n    value: typeof value === 'string' ? value : undefined,\n    maxDate,\n    minDate,\n    ariaDescribedby,\n    placeholder: element.placeholderValue,\n    className: 'cypress-date-time-control',\n    disabled: element.readOnly,\n    required: element.required,\n    onBlur: setIsDirty,\n    onChange: (newDate) => {\n      onChange(element, {\n        value: newDate?.toISOString(),\n      })\n    },\n  })\n\n  const text = React.useMemo(() => {\n    if (typeof value !== 'string') {\n      return null\n    }\n    return localisationService.formatDatetime(new Date(value))\n  }, [value])\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  return (\n    <div className=\"cypress-datetime-element\">\n      <FormElementLabelContainer\n        className=\"ob-datetime\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"field has-addons\">\n          <DateTimePicker\n            label={element.label}\n            format={shortDateTimeFormat}\n            {...commonProps}\n            timeSteps={{ minutes: 1 }}\n          />\n          {!element.readOnly && (\n            <PickerInputButton\n              tooltip=\"Select date and time\"\n              onClick={openDateTimePicker}\n              icon=\"date_range\"\n            />\n          )}\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            overrideRequiredMessage={undefined}\n          />\n        </div>\n\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementDateTime)\n"]}
+{"version":3,"file":"FormElementDateTime.js","sourceRoot":"","sources":["../../src/form-elements/FormElementDateTime.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { localisationService } from '../apps'\nimport { FormTypes } from '@oneblink/types'\nimport { DateTimePicker } from '@mui/x-date-pickers'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\n\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { parseDateValue } from '../services/generate-default-data'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useFormElementDateFromTo from '../hooks/useFormElementDateFromTo'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport useFormDatePickerProps, {\n  PickerInputButton,\n} from '../hooks/form-date-picker/useFormDatePickerProps'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n  id: string\n  element: FormTypes.DateTimeElement\n  readOnly: boolean\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementDateTime({\n  id,\n  element,\n  readOnly,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n\n  const { fromDate, fromDaysOffset, toDate, toDaysOffset } =\n    useFormElementDateFromTo(element)\n\n  const shortDateTimeFormat =\n    localisationService.getDateFnsFormats().shortDateTime\n\n  const maxDate = React.useMemo(() => {\n    return parseDateValue({\n      dateOnly: true,\n      daysOffset: toDaysOffset,\n      value: toDate,\n    })\n  }, [toDate, toDaysOffset])\n\n  const minDate = React.useMemo(() => {\n    return parseDateValue({\n      dateOnly: true,\n      daysOffset: fromDaysOffset,\n      value: fromDate,\n    })\n  }, [fromDate, fromDaysOffset])\n\n  const [commonProps, openDateTimePicker] = useFormDatePickerProps({\n    id,\n    value: typeof value === 'string' ? value : undefined,\n    maxDate,\n    minDate,\n    ariaDescribedby,\n    placeholder: element.placeholderValue,\n    className: 'cypress-date-time-control',\n    disabled: readOnly,\n    required: element.required,\n    onBlur: setIsDirty,\n    onChange: (newDate) => {\n      onChange(element, {\n        value: newDate?.toISOString(),\n      })\n    },\n  })\n\n  const text = React.useMemo(() => {\n    if (typeof value !== 'string') {\n      return null\n    }\n    return localisationService.formatDatetime(new Date(value))\n  }, [value])\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  return (\n    <div className=\"cypress-datetime-element\">\n      <FormElementLabelContainer\n        className=\"ob-datetime\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"field has-addons\">\n          <DateTimePicker\n            label={element.label}\n            format={shortDateTimeFormat}\n            {...commonProps}\n            timeSteps={{ minutes: 1 }}\n          />\n          {!readOnly && (\n            <PickerInputButton\n              tooltip=\"Select date and time\"\n              onClick={openDateTimePicker}\n              icon=\"date_range\"\n            />\n          )}\n          {!!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            overrideRequiredMessage={undefined}\n          />\n        </div>\n\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementDateTime)\n"]}

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

@@ -4,12 +4,13 @@ import { FormElementValueChangeHandler, IsDirtyProps } from '../types/form';
 type Props = {
     id: string;
     element: FormTypes.EmailElement;
+    readOnly: boolean;
     value: unknown;
     onChange: FormElementValueChangeHandler<string>;
     displayValidationMessage: boolean;
     validationMessage: string | undefined;
     autocompleteAttributes?: string;
 } & IsDirtyProps;
-declare function FormElementEmail({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, autocompleteAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function FormElementEmail({ id, element, readOnly, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, autocompleteAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof FormElementEmail>;
 export default _default;

package/dist/form-elements/FormElementEmail.js

@@ -7,14 +7,14 @@ import { LookupNotificationContext } from '../hooks/useLookupNotification';
 import useElementAriaDescribedby from '../hooks/useElementAriaDescribedby';
 import MaterialIcon from '../components/MaterialIcon';
 import FormElementValidationMessage from '../components/renderer/FormElementValidationMessage';
-function FormElementEmail({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, autocompleteAttributes, }) {
+function FormElementEmail({ id, element, readOnly, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, autocompleteAttributes, }) {
     const ariaDescribedby = useElementAriaDescribedby(id, element);
     const { isLookingUp } = React.useContext(LookupNotificationContext);
     const isDisplayingValidationMessage = (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp;
     const text = typeof value === 'string' ? value : '';
     return (_jsx("div", { className: "cypress-email-element", children: _jsxs(FormElementLabelContainer, { className: "ob-email", id: id, element: element, required: element.required, children: [_jsxs("div", { className: "field has-addons", children: [_jsxs("div", { className: "control is-expanded has-icons-right", children: [_jsx("input", { type: "email", placeholder: element.placeholderValue, id: id, name: element.name, className: "input ob-input cypress-email-control", value: text, onChange: (e) => onChange(element, {
                                         value: e.target.value || undefined,
-                                    }), required: element.required, disabled: element.readOnly, onBlur: setIsDirty, "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes, "aria-required": element.required }), _jsx("span", { className: "ob-input-icon icon is-small is-right", children: _jsx(MaterialIcon, { className: "is-size-5", children: "email" }) })] }), !!element.readOnly && !!value && (_jsx("div", { className: "control", children: _jsx(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }) })), _jsx(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton, overrideRequiredMessage: undefined })] }), isDisplayingValidationMessage && (_jsx(FormElementValidationMessage, { message: validationMessage }))] }) }));
+                                    }), required: element.required, disabled: readOnly, onBlur: setIsDirty, "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes, "aria-required": element.required }), _jsx("span", { className: "ob-input-icon icon is-small is-right", children: _jsx(MaterialIcon, { className: "is-size-5", children: "email" }) })] }), !!readOnly && !!value && (_jsx("div", { className: "control", children: _jsx(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }) })), _jsx(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton, overrideRequiredMessage: undefined })] }), isDisplayingValidationMessage && (_jsx(FormElementValidationMessage, { message: validationMessage }))] }) }));
 }
 export default React.memo(FormElementEmail);
 //# sourceMappingURL=FormElementEmail.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementEmail.js","sourceRoot":"","sources":["../../src/form-elements/FormElementEmail.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;AAExF,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAA;AAC1E,OAAO,yBAAyB,MAAM,oCAAoC,CAAA;AAC1E,OAAO,YAAY,MAAM,4BAA4B,CAAA;AACrD,OAAO,4BAA4B,MAAM,qDAAqD,CAAA;AAY9F,SAAS,gBAAgB,CAAC,EACxB,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,OAAO,EACP,UAAU,EACV,sBAAsB,GAChB;IACN,MAAM,eAAe,GAAG,yBAAyB,CAAC,EAAE,EAAE,OAAO,CAAC,CAAA;IAC9D,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAA;IACnE,MAAM,6BAA6B,GACjC,CAAC,OAAO,IAAI,wBAAwB,CAAC,IAAI,CAAC,CAAC,iBAAiB,IAAI,CAAC,WAAW,CAAA;IAE9E,MAAM,IAAI,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;IACnD,OAAO,CACL,cAAK,SAAS,EAAC,uBAAuB,YACpC,MAAC,yBAAyB,IACxB,SAAS,EAAC,UAAU,EACpB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ,aAE1B,eAAK,SAAS,EAAC,kBAAkB,aAC/B,eAAK,SAAS,EAAC,qCAAqC,aAClD,gBACE,IAAI,EAAC,OAAO,EACZ,WAAW,EAAE,OAAO,CAAC,gBAAgB,EACrC,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,SAAS,EAAC,sCAAsC,EAChD,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CACd,QAAQ,CAAC,OAAO,EAAE;wCAChB,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,SAAS;qCACnC,CAAC,EAEJ,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,MAAM,EAAE,UAAU,sBACA,eAAe,EACjC,YAAY,EAAE,sBAAsB,mBACrB,OAAO,CAAC,QAAQ,GAC/B,EACF,eAAM,SAAS,EAAC,sCAAsC,YACpD,KAAC,YAAY,IAAC,SAAS,EAAC,WAAW,sBAAqB,GACnD,IACH,EACL,CAAC,CAAC,OAAO,CAAC,QAAQ,IAAI,CAAC,CAAC,KAAK,IAAI,CAChC,cAAK,SAAS,EAAC,SAAS,YACtB,KAAC,qBAAqB,IACpB,SAAS,EAAC,oEAAoE,EAC9E,IAAI,EAAE,IAAI,GACV,GACE,CACP,EACD,KAAC,YAAY,IACX,aAAa,QACb,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,OAAO,CAAC,YAAY,EACxC,uBAAuB,EAAE,SAAS,GAClC,IACE,EAEL,6BAA6B,IAAI,CAChC,KAAC,4BAA4B,IAAC,OAAO,EAAE,iBAAiB,GAAI,CAC7D,IACyB,GACxB,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,gBAAgB,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'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport MaterialIcon from '../components/MaterialIcon'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n  id: string\n  element: FormTypes.EmailElement\n  value: unknown\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementEmail({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n  autocompleteAttributes,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  const text = typeof value === 'string' ? value : ''\n  return (\n    <div className=\"cypress-email-element\">\n      <FormElementLabelContainer\n        className=\"ob-email\"\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=\"email\"\n              placeholder={element.placeholderValue}\n              id={id}\n              name={element.name}\n              className=\"input ob-input cypress-email-control\"\n              value={text}\n              onChange={(e) =>\n                onChange(element, {\n                  value: e.target.value || undefined,\n                })\n              }\n              required={element.required}\n              disabled={element.readOnly}\n              onBlur={setIsDirty}\n              aria-describedby={ariaDescribedby}\n              autoComplete={autocompleteAttributes}\n              aria-required={element.required}\n            />\n            <span className=\"ob-input-icon icon is-small is-right\">\n              <MaterialIcon className=\"is-size-5\">email</MaterialIcon>\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            overrideRequiredMessage={undefined}\n          />\n        </div>\n\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementEmail)\n"]}
+{"version":3,"file":"FormElementEmail.js","sourceRoot":"","sources":["../../src/form-elements/FormElementEmail.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;AAExF,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAA;AAC1E,OAAO,yBAAyB,MAAM,oCAAoC,CAAA;AAC1E,OAAO,YAAY,MAAM,4BAA4B,CAAA;AACrD,OAAO,4BAA4B,MAAM,qDAAqD,CAAA;AAa9F,SAAS,gBAAgB,CAAC,EACxB,EAAE,EACF,OAAO,EACP,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,OAAO,EACP,UAAU,EACV,sBAAsB,GAChB;IACN,MAAM,eAAe,GAAG,yBAAyB,CAAC,EAAE,EAAE,OAAO,CAAC,CAAA;IAC9D,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAA;IACnE,MAAM,6BAA6B,GACjC,CAAC,OAAO,IAAI,wBAAwB,CAAC,IAAI,CAAC,CAAC,iBAAiB,IAAI,CAAC,WAAW,CAAA;IAE9E,MAAM,IAAI,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;IACnD,OAAO,CACL,cAAK,SAAS,EAAC,uBAAuB,YACpC,MAAC,yBAAyB,IACxB,SAAS,EAAC,UAAU,EACpB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ,aAE1B,eAAK,SAAS,EAAC,kBAAkB,aAC/B,eAAK,SAAS,EAAC,qCAAqC,aAClD,gBACE,IAAI,EAAC,OAAO,EACZ,WAAW,EAAE,OAAO,CAAC,gBAAgB,EACrC,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,SAAS,EAAC,sCAAsC,EAChD,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CACd,QAAQ,CAAC,OAAO,EAAE;wCAChB,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,SAAS;qCACnC,CAAC,EAEJ,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,UAAU,sBACA,eAAe,EACjC,YAAY,EAAE,sBAAsB,mBACrB,OAAO,CAAC,QAAQ,GAC/B,EACF,eAAM,SAAS,EAAC,sCAAsC,YACpD,KAAC,YAAY,IAAC,SAAS,EAAC,WAAW,sBAAqB,GACnD,IACH,EACL,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,KAAK,IAAI,CACxB,cAAK,SAAS,EAAC,SAAS,YACtB,KAAC,qBAAqB,IACpB,SAAS,EAAC,oEAAoE,EAC9E,IAAI,EAAE,IAAI,GACV,GACE,CACP,EACD,KAAC,YAAY,IACX,aAAa,QACb,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,OAAO,CAAC,YAAY,EACxC,uBAAuB,EAAE,SAAS,GAClC,IACE,EAEL,6BAA6B,IAAI,CAChC,KAAC,4BAA4B,IAAC,OAAO,EAAE,iBAAiB,GAAI,CAC7D,IACyB,GACxB,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,gBAAgB,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'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport MaterialIcon from '../components/MaterialIcon'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n  id: string\n  element: FormTypes.EmailElement\n  readOnly: boolean\n  value: unknown\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementEmail({\n  id,\n  element,\n  readOnly,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n  autocompleteAttributes,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  const text = typeof value === 'string' ? value : ''\n  return (\n    <div className=\"cypress-email-element\">\n      <FormElementLabelContainer\n        className=\"ob-email\"\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=\"email\"\n              placeholder={element.placeholderValue}\n              id={id}\n              name={element.name}\n              className=\"input ob-input cypress-email-control\"\n              value={text}\n              onChange={(e) =>\n                onChange(element, {\n                  value: e.target.value || undefined,\n                })\n              }\n              required={element.required}\n              disabled={readOnly}\n              onBlur={setIsDirty}\n              aria-describedby={ariaDescribedby}\n              autoComplete={autocompleteAttributes}\n              aria-required={element.required}\n            />\n            <span className=\"ob-input-icon icon is-small is-right\">\n              <MaterialIcon className=\"is-size-5\">email</MaterialIcon>\n            </span>\n          </div>\n          {!!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            overrideRequiredMessage={undefined}\n          />\n        </div>\n\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementEmail)\n"]}

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

@@ -4,6 +4,7 @@ import { OnChange } from '../hooks/attachments/useAttachment';
 import { attachmentsService } from '../apps';
 type Props = {
     element: FormTypes.FilesElement;
+    readOnly: boolean;
     /** If set to `undefined`, the remove button will be hidden */
     onRemove: ((id: string) => void) | undefined;
     file: attachmentsService.Attachment;

package/dist/form-elements/FormElementFile.js

@@ -9,7 +9,7 @@ import AnnotationModal, { superimposeAnnotationOnImage, } from '../components/re
 import { generateCroppedImageBlob } from '../components/ImageCropper';
 import { prepareNewAttachment } from '../services/attachments';
 import Modal from '../components/renderer/Modal';
-const FormElementFile = ({ element, onRemove, file, onChange, disableUpload, index, }) => {
+const FormElementFile = ({ element, readOnly, onRemove, file, onChange, disableUpload, index, }) => {
     const [isAnnotating, setIsAnnotating, clearIsAnnotating] = useBooleanState(false);
     const [isCropping, setIsCropping, clearIsCropping] = useBooleanState(false);
     const [state, setState] = React.useState({
@@ -99,7 +99,7 @@ const FormElementFile = ({ element, onRemove, file, onChange, disableUpload, ind
             };
         }
     }, [file, onChange]);
-    return (_jsxs(_Fragment, { children: [_jsx(FileCard, { element: element, isUploading: isUploading, isUploadPaused: disableUpload, uploadErrorMessage: uploadErrorMessage, loadAttachmentUrlError: loadAttachmentUrlError, isLoadingAttachmentUrl: isLoadingAttachmentUrl || state.isLoading, attachmentUrl: attachmentUrl, isContentTypeImage: isContentTypeImage, fileName: file.fileName, onDownload: canDownload ? handleDownload : undefined, onRemove: handleRemove, onRetry: handleRetry, progress: progress, index: index, onAnnotate: isContentTypeImage ? setIsAnnotating : undefined, onCrop: isContentTypeImage ? setIsCropping : undefined }), isCropping && attachmentUrl && (_jsx(CropModal, { imageSrc: attachmentUrl, onClose: clearIsCropping, onSave: handleSaveCrop })), isAnnotating && attachmentUrl && (_jsx(AnnotationModal, { imageSrc: attachmentUrl, onClose: clearIsAnnotating, onSave: handleAnnotate })), state.error && (_jsxs(Modal, { isOpen: true, title: "Whoops...", className: "cypress-error-modal", titleClassName: "cypress-error-title", actions: _jsx("button", { type: "button", className: "button ob-button is-primary cypress-close-error-button", onClick: () => setState({ isLoading: false }), autoFocus: true, children: "Okay" }), children: [_jsxs("p", { children: ["An error occurred while attempting to edit an image. Please click", ' ', _jsx("b", { children: "Okay" }), " below to try again. If the problem persists, please contact support."] }), _jsx("div", { className: "content has-margin-top-6", children: _jsx("blockquote", { children: state.error.toString() }) })] }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(FileCard, { element: element, readOnly: readOnly, isUploading: isUploading, isUploadPaused: disableUpload, uploadErrorMessage: uploadErrorMessage, loadAttachmentUrlError: loadAttachmentUrlError, isLoadingAttachmentUrl: isLoadingAttachmentUrl || state.isLoading, attachmentUrl: attachmentUrl, isContentTypeImage: isContentTypeImage, fileName: file.fileName, onDownload: canDownload ? handleDownload : undefined, onRemove: handleRemove, onRetry: handleRetry, progress: progress, index: index, onAnnotate: isContentTypeImage ? setIsAnnotating : undefined, onCrop: isContentTypeImage ? setIsCropping : undefined }), isCropping && attachmentUrl && (_jsx(CropModal, { imageSrc: attachmentUrl, onClose: clearIsCropping, onSave: handleSaveCrop })), isAnnotating && attachmentUrl && (_jsx(AnnotationModal, { imageSrc: attachmentUrl, onClose: clearIsAnnotating, onSave: handleAnnotate })), state.error && (_jsxs(Modal, { isOpen: true, title: "Whoops...", className: "cypress-error-modal", titleClassName: "cypress-error-title", actions: _jsx("button", { type: "button", className: "button ob-button is-primary cypress-close-error-button", onClick: () => setState({ isLoading: false }), autoFocus: true, children: "Okay" }), children: [_jsxs("p", { children: ["An error occurred while attempting to edit an image. Please click", ' ', _jsx("b", { children: "Okay" }), " below to try again. If the problem persists, please contact support."] }), _jsx("div", { className: "content has-margin-top-6", children: _jsx("blockquote", { children: state.error.toString() }) })] }))] }));
 };
 export default React.memo(FormElementFile);
 //# sourceMappingURL=FormElementFile.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementFile.js","sourceRoot":"","sources":["../../src/form-elements/FormElementFile.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport downloadAttachment from '../services/download-file'\nimport { FormTypes } from '@oneblink/types'\nimport useAttachment, { OnChange } from '../hooks/attachments/useAttachment'\nimport FileCard from '../components/renderer/attachments/FileCard'\nimport { attachmentsService } from '../apps'\nimport useBooleanState from '../hooks/useBooleanState'\nimport CropModal from '../components/ImageCropper/CropModal'\nimport AnnotationModal, {\n  superimposeAnnotationOnImage,\n} from '../components/renderer/AnnotationModal'\nimport { generateCroppedImageBlob } from '../components/ImageCropper'\nimport { prepareNewAttachment } from '../services/attachments'\nimport Modal from '../components/renderer/Modal'\nimport { PercentCrop } from 'react-image-crop'\n\ntype Props = {\n  element: FormTypes.FilesElement\n  /** If set to `undefined`, the remove button will be hidden */\n  onRemove: ((id: string) => void) | undefined\n  file: attachmentsService.Attachment\n  disableUpload: boolean\n  onChange: OnChange\n  index: number\n}\n\nconst FormElementFile = ({\n  element,\n  onRemove,\n  file,\n  onChange,\n  disableUpload,\n  index,\n}: Props) => {\n  const [isAnnotating, setIsAnnotating, clearIsAnnotating] =\n    useBooleanState(false)\n  const [isCropping, setIsCropping, clearIsCropping] = useBooleanState(false)\n  const [state, setState] = React.useState<{\n    isLoading: boolean\n    error?: Error\n  }>({\n    isLoading: false,\n    error: undefined,\n  })\n  const {\n    attachmentUrl,\n    contentType,\n    isUploading,\n    uploadErrorMessage,\n    isLoadingAttachmentUrl,\n    loadAttachmentUrlError,\n    isContentTypeImage,\n    canDownload,\n    progress,\n  } = useAttachment(file, element, onChange, disableUpload)\n\n  const handleRemove = React.useMemo(() => {\n    if (!onRemove) {\n      return\n    }\n    return () => {\n      if (!file.type) {\n        return onRemove(file.id)\n      }\n      return onRemove(file._id)\n    }\n  }, [file, onRemove])\n\n  const handleDownload = React.useCallback(async () => {\n    await downloadAttachment(file)\n  }, [file])\n\n  const handleAnnotate = React.useCallback(\n    async (annotationDataUri: string) => {\n      if (!attachmentUrl || file.type) return\n      clearIsAnnotating()\n\n      setState({\n        isLoading: true,\n      })\n\n      try {\n        const blob = await superimposeAnnotationOnImage({\n          annotationDataUri,\n          attachmentUrl,\n        })\n        setState({\n          isLoading: false,\n        })\n        if (!blob) return\n        const attachment = prepareNewAttachment(blob, file.fileName, element)\n        onChange(file.id, attachment)\n      } catch (error) {\n        setState({\n          error: error as Error,\n          isLoading: false,\n        })\n      }\n    },\n    [attachmentUrl, clearIsAnnotating, element, file, onChange],\n  )\n  const handleSaveCrop = React.useCallback(\n    async (croppedAreaPercent: PercentCrop) => {\n      if (!attachmentUrl || file.type) return\n      clearIsCropping()\n\n      setState({\n        isLoading: true,\n      })\n\n      try {\n        const croppedImage = await generateCroppedImageBlob({\n          croppedAreaPercent,\n          imgSrc: attachmentUrl,\n          fileType: contentType,\n        })\n        setState({\n          isLoading: false,\n        })\n        if (!croppedImage) return\n        const attachment = prepareNewAttachment(\n          croppedImage,\n          file.fileName,\n          element,\n        )\n        onChange(file.id, attachment)\n      } catch (error) {\n        setState({\n          error: error as Error,\n          isLoading: false,\n        })\n      }\n    },\n    [attachmentUrl, clearIsCropping, contentType, element, file, onChange],\n  )\n  const handleRetry = React.useMemo(() => {\n    if (file.type === 'ERROR' && file.data) {\n      return () => {\n        onChange(file._id, {\n          type: 'NEW',\n          _id: file._id,\n          data: file.data,\n          fileName: file.fileName,\n          isPrivate: file.isPrivate,\n        })\n      }\n    }\n  }, [file, onChange])\n\n  return (\n    <>\n      <FileCard\n        element={element}\n        isUploading={isUploading}\n        isUploadPaused={disableUpload}\n        uploadErrorMessage={uploadErrorMessage}\n        loadAttachmentUrlError={loadAttachmentUrlError}\n        isLoadingAttachmentUrl={isLoadingAttachmentUrl || state.isLoading}\n        attachmentUrl={attachmentUrl}\n        isContentTypeImage={isContentTypeImage}\n        fileName={file.fileName}\n        onDownload={canDownload ? handleDownload : undefined}\n        onRemove={handleRemove}\n        onRetry={handleRetry}\n        progress={progress}\n        index={index}\n        onAnnotate={isContentTypeImage ? setIsAnnotating : undefined}\n        onCrop={isContentTypeImage ? setIsCropping : undefined}\n      />\n      {isCropping && attachmentUrl && (\n        <CropModal\n          imageSrc={attachmentUrl}\n          onClose={clearIsCropping}\n          onSave={handleSaveCrop}\n        />\n      )}\n      {isAnnotating && attachmentUrl && (\n        <AnnotationModal\n          imageSrc={attachmentUrl}\n          onClose={clearIsAnnotating}\n          onSave={handleAnnotate}\n        />\n      )}\n      {state.error && (\n        <Modal\n          isOpen\n          title=\"Whoops...\"\n          className=\"cypress-error-modal\"\n          titleClassName=\"cypress-error-title\"\n          actions={\n            <button\n              type=\"button\"\n              className=\"button ob-button is-primary cypress-close-error-button\"\n              onClick={() => setState({ isLoading: false })}\n              autoFocus\n            >\n              Okay\n            </button>\n          }\n        >\n          <p>\n            An error occurred while attempting to edit an image. Please click{' '}\n            <b>Okay</b> below to try again. If the problem persists, please\n            contact support.\n          </p>\n\n          <div className=\"content has-margin-top-6\">\n            <blockquote>{state.error.toString()}</blockquote>\n          </div>\n        </Modal>\n      )}\n    </>\n  )\n}\n\nexport default React.memo<Props>(FormElementFile)\n"]}
+{"version":3,"file":"FormElementFile.js","sourceRoot":"","sources":["../../src/form-elements/FormElementFile.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport downloadAttachment from '../services/download-file'\nimport { FormTypes } from '@oneblink/types'\nimport useAttachment, { OnChange } from '../hooks/attachments/useAttachment'\nimport FileCard from '../components/renderer/attachments/FileCard'\nimport { attachmentsService } from '../apps'\nimport useBooleanState from '../hooks/useBooleanState'\nimport CropModal from '../components/ImageCropper/CropModal'\nimport AnnotationModal, {\n  superimposeAnnotationOnImage,\n} from '../components/renderer/AnnotationModal'\nimport { generateCroppedImageBlob } from '../components/ImageCropper'\nimport { prepareNewAttachment } from '../services/attachments'\nimport Modal from '../components/renderer/Modal'\nimport { PercentCrop } from 'react-image-crop'\n\ntype Props = {\n  element: FormTypes.FilesElement\n  readOnly: boolean\n  /** If set to `undefined`, the remove button will be hidden */\n  onRemove: ((id: string) => void) | undefined\n  file: attachmentsService.Attachment\n  disableUpload: boolean\n  onChange: OnChange\n  index: number\n}\n\nconst FormElementFile = ({\n  element,\n  readOnly,\n  onRemove,\n  file,\n  onChange,\n  disableUpload,\n  index,\n}: Props) => {\n  const [isAnnotating, setIsAnnotating, clearIsAnnotating] =\n    useBooleanState(false)\n  const [isCropping, setIsCropping, clearIsCropping] = useBooleanState(false)\n  const [state, setState] = React.useState<{\n    isLoading: boolean\n    error?: Error\n  }>({\n    isLoading: false,\n    error: undefined,\n  })\n  const {\n    attachmentUrl,\n    contentType,\n    isUploading,\n    uploadErrorMessage,\n    isLoadingAttachmentUrl,\n    loadAttachmentUrlError,\n    isContentTypeImage,\n    canDownload,\n    progress,\n  } = useAttachment(file, element, onChange, disableUpload)\n\n  const handleRemove = React.useMemo(() => {\n    if (!onRemove) {\n      return\n    }\n    return () => {\n      if (!file.type) {\n        return onRemove(file.id)\n      }\n      return onRemove(file._id)\n    }\n  }, [file, onRemove])\n\n  const handleDownload = React.useCallback(async () => {\n    await downloadAttachment(file)\n  }, [file])\n\n  const handleAnnotate = React.useCallback(\n    async (annotationDataUri: string) => {\n      if (!attachmentUrl || file.type) return\n      clearIsAnnotating()\n\n      setState({\n        isLoading: true,\n      })\n\n      try {\n        const blob = await superimposeAnnotationOnImage({\n          annotationDataUri,\n          attachmentUrl,\n        })\n        setState({\n          isLoading: false,\n        })\n        if (!blob) return\n        const attachment = prepareNewAttachment(blob, file.fileName, element)\n        onChange(file.id, attachment)\n      } catch (error) {\n        setState({\n          error: error as Error,\n          isLoading: false,\n        })\n      }\n    },\n    [attachmentUrl, clearIsAnnotating, element, file, onChange],\n  )\n  const handleSaveCrop = React.useCallback(\n    async (croppedAreaPercent: PercentCrop) => {\n      if (!attachmentUrl || file.type) return\n      clearIsCropping()\n\n      setState({\n        isLoading: true,\n      })\n\n      try {\n        const croppedImage = await generateCroppedImageBlob({\n          croppedAreaPercent,\n          imgSrc: attachmentUrl,\n          fileType: contentType,\n        })\n        setState({\n          isLoading: false,\n        })\n        if (!croppedImage) return\n        const attachment = prepareNewAttachment(\n          croppedImage,\n          file.fileName,\n          element,\n        )\n        onChange(file.id, attachment)\n      } catch (error) {\n        setState({\n          error: error as Error,\n          isLoading: false,\n        })\n      }\n    },\n    [attachmentUrl, clearIsCropping, contentType, element, file, onChange],\n  )\n  const handleRetry = React.useMemo(() => {\n    if (file.type === 'ERROR' && file.data) {\n      return () => {\n        onChange(file._id, {\n          type: 'NEW',\n          _id: file._id,\n          data: file.data,\n          fileName: file.fileName,\n          isPrivate: file.isPrivate,\n        })\n      }\n    }\n  }, [file, onChange])\n\n  return (\n    <>\n      <FileCard\n        element={element}\n        readOnly={readOnly}\n        isUploading={isUploading}\n        isUploadPaused={disableUpload}\n        uploadErrorMessage={uploadErrorMessage}\n        loadAttachmentUrlError={loadAttachmentUrlError}\n        isLoadingAttachmentUrl={isLoadingAttachmentUrl || state.isLoading}\n        attachmentUrl={attachmentUrl}\n        isContentTypeImage={isContentTypeImage}\n        fileName={file.fileName}\n        onDownload={canDownload ? handleDownload : undefined}\n        onRemove={handleRemove}\n        onRetry={handleRetry}\n        progress={progress}\n        index={index}\n        onAnnotate={isContentTypeImage ? setIsAnnotating : undefined}\n        onCrop={isContentTypeImage ? setIsCropping : undefined}\n      />\n      {isCropping && attachmentUrl && (\n        <CropModal\n          imageSrc={attachmentUrl}\n          onClose={clearIsCropping}\n          onSave={handleSaveCrop}\n        />\n      )}\n      {isAnnotating && attachmentUrl && (\n        <AnnotationModal\n          imageSrc={attachmentUrl}\n          onClose={clearIsAnnotating}\n          onSave={handleAnnotate}\n        />\n      )}\n      {state.error && (\n        <Modal\n          isOpen\n          title=\"Whoops...\"\n          className=\"cypress-error-modal\"\n          titleClassName=\"cypress-error-title\"\n          actions={\n            <button\n              type=\"button\"\n              className=\"button ob-button is-primary cypress-close-error-button\"\n              onClick={() => setState({ isLoading: false })}\n              autoFocus\n            >\n              Okay\n            </button>\n          }\n        >\n          <p>\n            An error occurred while attempting to edit an image. Please click{' '}\n            <b>Okay</b> below to try again. If the problem persists, please\n            contact support.\n          </p>\n\n          <div className=\"content has-margin-top-6\">\n            <blockquote>{state.error.toString()}</blockquote>\n          </div>\n        </Modal>\n      )}\n    </>\n  )\n}\n\nexport default React.memo<Props>(FormElementFile)\n"]}

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

@@ -3,9 +3,10 @@ import { FormTypes } from '@oneblink/types';
 import { attachmentsService } from '../apps';
 import { FormElementValueChangeHandler, IsDirtyProps } from '../types/form';
 export declare function stringifyAttachments(value: attachmentsService.Attachment[] | undefined): string;
-declare function FormElementFiles({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }: {
+declare function FormElementFiles({ id, element, readOnly, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }: {
     id: string;
     element: FormTypes.FilesElement;
+    readOnly: boolean;
     value?: attachmentsService.Attachment[];
     onChange: FormElementValueChangeHandler<attachmentsService.Attachment[]>;
     displayValidationMessage: boolean;

package/dist/form-elements/FormElementFiles.js

@@ -14,7 +14,7 @@ export function stringifyAttachments(value) {
     }
     return '';
 }
-function FormElementFiles({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }) {
+function FormElementFiles({ id, element, readOnly, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }) {
     const ariaDescribedby = useElementAriaDescribedby(id, element);
     const { addAttachments, removeAttachment, changeAttachment } = useAttachments(element, onChange, setIsDirty);
     const inputRef = React.useRef(null);
@@ -28,12 +28,12 @@ function FormElementFiles({ id, element, value, onChange, validationMessage, dis
     const attachments = value || [];
     const { isLookingUp } = React.useContext(LookupNotificationContext);
     const isDisplayingValidationMessage = (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp;
-    return (_jsx("div", { className: "cypress-files-element", children: _jsxs(FormElementLabelContainer, { className: "ob-files", element: element, id: id, required: !!element.minEntries, children: [_jsx("input", { ref: inputRef, type: "file", name: element.name, className: "file-input ob-input", multiple: element.maxEntries !== 1, disabled: element.readOnly, onChange: (event) => addAttachments(event.target.files ? Array.from(event.target.files) : []) }), _jsx("div", { className: "control cypress-files-control", children: _jsxs("div", { className: "columns is-multiline ob-columns-container", children: [attachments.map((attachment, index) => {
-                                return (_jsx(FormElementFile, { element: element, onRemove: removeAttachment, file: attachment, onChange: changeAttachment, disableUpload: (!!element.maxEntries &&
+    return (_jsx("div", { className: "cypress-files-element", children: _jsxs(FormElementLabelContainer, { className: "ob-files", element: element, id: id, required: !!element.minEntries, children: [_jsx("input", { ref: inputRef, type: "file", name: element.name, className: "file-input ob-input", multiple: element.maxEntries !== 1, disabled: readOnly, onChange: (event) => addAttachments(event.target.files ? Array.from(event.target.files) : []) }), _jsx("div", { className: "control cypress-files-control", children: _jsxs("div", { className: "columns is-multiline ob-columns-container", children: [attachments.map((attachment, index) => {
+                                return (_jsx(FormElementFile, { element: element, readOnly: readOnly, onRemove: removeAttachment, file: attachment, onChange: changeAttachment, disableUpload: (!!element.maxEntries &&
                                         attachments.length > element.maxEntries) ||
                                         !checkFileNameIsValid(element, attachment.fileName) ||
                                         !checkFileNameExtensionIsValid(element, attachment.fileName), index: index }, attachment.type ? attachment._id : attachment.id));
-                            }), !element.readOnly &&
+                            }), !readOnly &&
                                 (!element.maxEntries ||
                                     attachments.length < element.maxEntries) && (_jsx("div", { className: "column is-one-quarter-ob", children: _jsx("button", { type: "button", className: "button ob-files__add-new-button", id: id, onClick: handleAdd, "aria-describedby": ariaDescribedby, onBlur: setIsDirty, children: _jsx(MaterialIcon, { className: "icon-x-large", children: "add" }) }) }))] }) }), isDisplayingValidationMessage && (_jsx(FormElementValidationMessage, { message: validationMessage }))] }) }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementFiles.js","sourceRoot":"","sources":["../../src/form-elements/FormElementFiles.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport FormElementFile from './FormElementFile'\nimport useAttachments from '../hooks/attachments/useAttachments'\nimport {\n  checkFileNameIsValid,\n  checkFileNameExtensionIsValid,\n} from '../services/form-validation/validators'\nimport { attachmentsService } from '../apps'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport MaterialIcon from '../components/MaterialIcon'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\nexport function stringifyAttachments(\n  value: attachmentsService.Attachment[] | undefined,\n): string {\n  if (value?.every((attachment) => !attachment.type)) {\n    return JSON.stringify(value)\n  }\n  return ''\n}\n\nfunction FormElementFiles({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: {\n  id: string\n  element: FormTypes.FilesElement\n  value?: attachmentsService.Attachment[]\n  onChange: FormElementValueChangeHandler<attachmentsService.Attachment[]>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const { addAttachments, removeAttachment, changeAttachment } = useAttachments(\n    element,\n    onChange,\n    setIsDirty,\n  )\n\n  const inputRef = React.useRef<HTMLInputElement>(null)\n\n  const handleAdd = React.useCallback(() => {\n    if (!inputRef.current) return\n    // RESET HTML FILE INPUT VALUE SO FILES PREVIOUSLY ADDED AND REMOVED ARE RECOGNISED\n    inputRef.current.value = ''\n    inputRef.current.click()\n  }, [])\n\n  const attachments = value || []\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  return (\n    <div className=\"cypress-files-element\">\n      <FormElementLabelContainer\n        className=\"ob-files\"\n        element={element}\n        id={id}\n        required={!!element.minEntries}\n      >\n        <input\n          ref={inputRef}\n          type=\"file\"\n          name={element.name}\n          className=\"file-input ob-input\"\n          multiple={element.maxEntries !== 1}\n          disabled={element.readOnly}\n          onChange={(event) =>\n            addAttachments(\n              event.target.files ? Array.from(event.target.files) : [],\n            )\n          }\n        />\n        <div className=\"control cypress-files-control\">\n          <div className=\"columns is-multiline ob-columns-container\">\n            {attachments.map((attachment, index) => {\n              return (\n                <FormElementFile\n                  key={attachment.type ? attachment._id : attachment.id}\n                  element={element}\n                  onRemove={removeAttachment}\n                  file={attachment}\n                  onChange={changeAttachment}\n                  disableUpload={\n                    (!!element.maxEntries &&\n                      attachments.length > element.maxEntries) ||\n                    !checkFileNameIsValid(element, attachment.fileName) ||\n                    !checkFileNameExtensionIsValid(element, attachment.fileName)\n                  }\n                  index={index}\n                />\n              )\n            })}\n            {!element.readOnly &&\n              (!element.maxEntries ||\n                attachments.length < element.maxEntries) && (\n                <div className=\"column is-one-quarter-ob\">\n                  <button\n                    type=\"button\"\n                    className=\"button ob-files__add-new-button\"\n                    id={id}\n                    onClick={handleAdd}\n                    aria-describedby={ariaDescribedby}\n                    onBlur={setIsDirty}\n                  >\n                    <MaterialIcon className=\"icon-x-large\">add</MaterialIcon>\n                  </button>\n                </div>\n              )}\n          </div>\n        </div>\n\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementFiles)\n"]}
+{"version":3,"file":"FormElementFiles.js","sourceRoot":"","sources":["../../src/form-elements/FormElementFiles.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport FormElementFile from './FormElementFile'\nimport useAttachments from '../hooks/attachments/useAttachments'\nimport {\n  checkFileNameIsValid,\n  checkFileNameExtensionIsValid,\n} from '../services/form-validation/validators'\nimport { attachmentsService } from '../apps'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport MaterialIcon from '../components/MaterialIcon'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\nexport function stringifyAttachments(\n  value: attachmentsService.Attachment[] | undefined,\n): string {\n  if (value?.every((attachment) => !attachment.type)) {\n    return JSON.stringify(value)\n  }\n  return ''\n}\n\nfunction FormElementFiles({\n  id,\n  element,\n  readOnly,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: {\n  id: string\n  element: FormTypes.FilesElement\n  readOnly: boolean\n  value?: attachmentsService.Attachment[]\n  onChange: FormElementValueChangeHandler<attachmentsService.Attachment[]>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const { addAttachments, removeAttachment, changeAttachment } = useAttachments(\n    element,\n    onChange,\n    setIsDirty,\n  )\n\n  const inputRef = React.useRef<HTMLInputElement>(null)\n\n  const handleAdd = React.useCallback(() => {\n    if (!inputRef.current) return\n    // RESET HTML FILE INPUT VALUE SO FILES PREVIOUSLY ADDED AND REMOVED ARE RECOGNISED\n    inputRef.current.value = ''\n    inputRef.current.click()\n  }, [])\n\n  const attachments = value || []\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  return (\n    <div className=\"cypress-files-element\">\n      <FormElementLabelContainer\n        className=\"ob-files\"\n        element={element}\n        id={id}\n        required={!!element.minEntries}\n      >\n        <input\n          ref={inputRef}\n          type=\"file\"\n          name={element.name}\n          className=\"file-input ob-input\"\n          multiple={element.maxEntries !== 1}\n          disabled={readOnly}\n          onChange={(event) =>\n            addAttachments(\n              event.target.files ? Array.from(event.target.files) : [],\n            )\n          }\n        />\n        <div className=\"control cypress-files-control\">\n          <div className=\"columns is-multiline ob-columns-container\">\n            {attachments.map((attachment, index) => {\n              return (\n                <FormElementFile\n                  key={attachment.type ? attachment._id : attachment.id}\n                  element={element}\n                  readOnly={readOnly}\n                  onRemove={removeAttachment}\n                  file={attachment}\n                  onChange={changeAttachment}\n                  disableUpload={\n                    (!!element.maxEntries &&\n                      attachments.length > element.maxEntries) ||\n                    !checkFileNameIsValid(element, attachment.fileName) ||\n                    !checkFileNameExtensionIsValid(element, attachment.fileName)\n                  }\n                  index={index}\n                />\n              )\n            })}\n            {!readOnly &&\n              (!element.maxEntries ||\n                attachments.length < element.maxEntries) && (\n                <div className=\"column is-one-quarter-ob\">\n                  <button\n                    type=\"button\"\n                    className=\"button ob-files__add-new-button\"\n                    id={id}\n                    onClick={handleAdd}\n                    aria-describedby={ariaDescribedby}\n                    onBlur={setIsDirty}\n                  >\n                    <MaterialIcon className=\"icon-x-large\">add</MaterialIcon>\n                  </button>\n                </div>\n              )}\n          </div>\n        </div>\n\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementFiles)\n"]}

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

@@ -5,6 +5,25 @@ export type Props = {
     formId: number;
     id: string;
     element: FormTypes.FormFormElement;
+    /**
+     * Whether this nested form is locked. Used as `readOnlyOverride` for
+     * synthetic children when `readOnlyOverrideChildren` is set. Nested fields do
+     * not inherit this value as a blanket lock so a child included in
+     * `editableFormElementIds` can stay editable.
+     */
+    readOnly: boolean;
+    /**
+     * Lock to apply to nested fields (`OneBlinkFormElements.readOnly` /
+     * `parentReadOnly`). True when the whole form is read-only, a parent is
+     * read-only, or this element’s definition has `readOnly: true`.
+     */
+    childrenReadOnly: boolean;
+    /**
+     * When true, nested fields use this element’s `readOnly` as
+     * `readOnlyOverride` instead of calculating their own. Used by Civica name
+     * records and Freshdesk dependent fields.
+     */
+    readOnlyOverrideChildren?: boolean;
     value: SubmissionTypes.S3SubmissionData['submission'] | undefined;
     onChange: NestedFormElementValueChangeHandler<SubmissionTypes.S3SubmissionData['submission']>;
     onLookup: FormElementLookupHandler;
@@ -14,6 +33,6 @@ export type Props = {
     onUpdateFormElements: UpdateFormElementsHandler;
     sectionState: SectionState;
 };
-declare function FormElementForm({ formId, element, value, id, formElementValidation, displayValidationMessages, formElementConditionallyShown, onChange, onLookup, onUpdateFormElements, sectionState, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function FormElementForm({ formId, element, readOnly, childrenReadOnly, readOnlyOverrideChildren, value, id, formElementValidation, displayValidationMessages, formElementConditionallyShown, onChange, onLookup, onUpdateFormElements, sectionState, }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof FormElementForm>;
 export default _default;