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

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementArcGISWebMap.js","sourceRoot":"","sources":["../../src/form-elements/FormElementArcGISWebMap.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { Suspense, useCallback, useMemo, useRef, useState } from 'react'\nimport { ArcGISTypes, FormTypes, SubmissionTypes } from '@oneblink/types'\nimport OnLoading from '../components/renderer/OnLoading'\nimport useIsOffline from '../hooks/useIsOffline'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport { ArcGISWebMapElementValue } from '@oneblink/types/typescript/arcgis'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\nimport { urlToBlobAsync } from '../services/blob-utils'\nimport {\n  generateErrorAttachment,\n  prepareNewAttachment,\n} from '../services/attachments'\nimport clsx from 'clsx'\nimport { attachmentsService } from '../apps'\nimport FormElementFile from './FormElementFile'\nimport useAttachments from '../hooks/attachments/useAttachments'\nimport CustomisableButtonInner from '../components/renderer/CustomisableButtonInner'\n\nconst ArcGISWebMap = React.lazy(() => import('../components/ArcGISWebMap'))\nexport const defaultAutoSnapshotButtonLabel = 'Finish Drawing'\n\ntype Props = {\n  id: string\n  element: FormTypes.ArcGISWebMapElement\n  value: ArcGISWebMapElementValue | undefined\n  onChange: FormElementValueChangeHandler<ArcGISWebMapElementValue>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nexport function stringifyArcgisInput(\n  value: ArcGISWebMapElementValue | undefined,\n) {\n  return JSON.stringify(value?.userInput)\n}\n\nexport function generateArcGISAutomatedSnapshotFileName(\n  element: FormTypes.ArcGISWebMapElement,\n) {\n  return `${element.name}_automated.png`\n}\n\nfunction FormElementArcGISWebMap({\n  id,\n  element,\n  value,\n  onChange,\n  displayValidationMessage,\n  isDirty,\n  validationMessage,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const isOffline = useIsOffline()\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  const filesElement = useMemo<FormTypes.FilesElement>(() => {\n    return {\n      ...element,\n      type: 'files',\n      restrictFileTypes: false,\n    }\n  }, [element])\n\n  const handleChangeAttachments = useCallback<\n    FormElementValueChangeHandler<attachmentsService.Attachment[]>\n  >(\n    (e, data) => {\n      onChange(element, {\n        value: (existingValue) => ({\n          ...existingValue,\n          snapshotImages: (!data.value\n            ? undefined\n            : Array.isArray(data.value)\n              ? data.value\n              : data.value(\n                  existingValue?.snapshotImages,\n                )) as SubmissionTypes.FormSubmissionAttachment[],\n        }),\n      })\n    },\n    [element, onChange],\n  )\n\n  // An empty function to set is dirty because there are multiple ways\n  // to provide input into this component and we don't want any of them\n  // to trigger the validation message(s) for the other means of input.\n  const fakeSetIsDirty = useCallback(() => undefined, [])\n  const { removeAttachment, changeAttachment } = useAttachments(\n    filesElement,\n    handleChangeAttachments,\n    fakeSetIsDirty,\n  )\n\n  const takeScreenShotRef = useRef<\n    (view?: ArcGISTypes.ArcGISWebMapElementValue['view']) => Promise<{\n      dataUrl: string\n    }>\n  >(null)\n\n  const takeSnapshot = useCallback(\n    async (\n      fileName: string,\n      view?: ArcGISTypes.ArcGISWebMapElementValue['view'],\n    ) => {\n      if (!takeScreenShotRef.current) {\n        return\n      }\n      const takeScreenShot = takeScreenShotRef.current\n\n      try {\n        const screenshot = await takeScreenShot(view)\n        const blob = await urlToBlobAsync(screenshot.dataUrl)\n        const snapshotImage: unknown = prepareNewAttachment(\n          blob,\n          fileName,\n          element,\n        )\n        onChange(element, {\n          value: (existingValue) => ({\n            ...existingValue,\n            snapshotImages: [\n              ...(existingValue?.snapshotImages || []),\n              snapshotImage as SubmissionTypes.FormSubmissionAttachment,\n            ],\n          }),\n        })\n      } catch (error) {\n        console.warn('Error taking manual screenshot', error)\n        const snapshotImage: unknown = generateErrorAttachment(\n          undefined,\n          fileName,\n          element,\n          (error as Error).message,\n        )\n        onChange(element, {\n          value: (existingValue) => ({\n            ...existingValue,\n            snapshotImages: [\n              ...(existingValue?.snapshotImages || []),\n              snapshotImage as SubmissionTypes.FormSubmissionAttachment,\n            ],\n          }),\n        })\n      }\n    },\n    [element, onChange],\n  )\n\n  const [isTakingManualSnapshot, setIsTakingManualSnapshot] = useState(false)\n  const takeManualSnapshot = useCallback(async () => {\n    setIsTakingManualSnapshot(true)\n    await takeSnapshot(`${element.name}_manual.png`)\n    setIsTakingManualSnapshot(false)\n  }, [element.name, takeSnapshot])\n\n  const automatedSnapshotFileName = useMemo(() => {\n    return generateArcGISAutomatedSnapshotFileName(element)\n  }, [element])\n  const [isTakingAutoSnapshots, setIsTakingAutoSnapshots] = useState(false)\n  const takeAutoSnapshots = useCallback(async () => {\n    setIsTakingAutoSnapshots(true)\n    onChange(element, {\n      value: (existingValue) => ({\n        ...existingValue,\n        snapshotImages: existingValue?.snapshotImages?.filter(\n          (snapshotImage) => {\n            return snapshotImage.fileName !== automatedSnapshotFileName\n          },\n        ),\n      }),\n    })\n    for (const autoSnapshotView of element.autoSnapshotViews || []) {\n      await takeSnapshot(automatedSnapshotFileName, autoSnapshotView)\n    }\n    setIsTakingAutoSnapshots(false)\n  }, [automatedSnapshotFileName, element, onChange, takeSnapshot])\n\n  return (\n    <div className=\"cypress-arcgis-web-map\">\n      <FormElementLabelContainer\n        className=\"ob-arcgis-web-map\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        {isOffline ? (\n          <figure className=\"ob-figure\">\n            <div className=\"figure-content has-text-centered\">\n              <h4 className=\"title is-4\" role=\"alert\">\n                This Web Map is not available as you are currently offline\n              </h4>\n            </div>\n          </figure>\n        ) : (\n          <figure className=\"ob-figure\">\n            <Suspense\n              fallback={\n                <div className=\"arcgis-web-map figure-content-absolute-center\">\n                  <OnLoading small />\n                </div>\n              }\n            >\n              <ArcGISWebMap\n                element={element}\n                id={id}\n                aria-describedby={ariaDescribedby}\n                value={value}\n                onChange={onChange}\n                takeScreenShotRef={takeScreenShotRef}\n                automatedSnapshotFileName={automatedSnapshotFileName}\n              />\n            </Suspense>\n          </figure>\n        )}\n\n        {(!!element.manualSnapshotsEnabled ||\n          !!element.autoSnapshotViews?.length) && (\n          <div>\n            <div className=\"buttons ob-buttons ob-arcgis-web-map__buttons\">\n              {!!element.manualSnapshotsEnabled && (\n                <button\n                  type=\"button\"\n                  className={clsx(\n                    'is-primary button ob-button ob-button__capture-snapshot ob-arcgis-web-map__button cypress-arcgis-web-map-capture-snapshot-button',\n                    {\n                      'is-loading': isTakingManualSnapshot,\n                    },\n                  )}\n                  onClick={takeManualSnapshot}\n                  disabled={\n                    element.readOnly ||\n                    isTakingManualSnapshot ||\n                    (!!element.maxManualSnapshots &&\n                      (value?.snapshotImages?.filter(\n                        (snapshotImage) =>\n                          snapshotImage.fileName !== automatedSnapshotFileName,\n                      )?.length || 0) >= element.maxManualSnapshots)\n                  }\n                >\n                  <CustomisableButtonInner\n                    label={\n                      element.manualSnapshotButton?.label || 'Capture Image'\n                    }\n                    icon={element.manualSnapshotButton?.icon}\n                  />\n                </button>\n              )}\n\n              {!!element.autoSnapshotViews?.length && (\n                <button\n                  type=\"button\"\n                  className={clsx(\n                    'is-primary button ob-button ob-button__finish-drawing ob-arcgis-web-map__button cypress-arcgis-web-map-finish-drawing-button',\n                    {\n                      'is-loading': isTakingAutoSnapshots,\n                    },\n                  )}\n                  onClick={takeAutoSnapshots}\n                  disabled={\n                    element.readOnly ||\n                    isTakingAutoSnapshots ||\n                    value?.snapshotImages?.some(\n                      (snapshotImage) =>\n                        snapshotImage.fileName === automatedSnapshotFileName,\n                    )\n                  }\n                >\n                  <CustomisableButtonInner\n                    label={\n                      element.autoSnapshotButton?.label ||\n                      defaultAutoSnapshotButtonLabel\n                    }\n                    icon={element.autoSnapshotButton?.icon}\n                  />\n                </button>\n              )}\n            </div>\n          </div>\n        )}\n\n        {!!value?.snapshotImages?.length && (\n          <div className=\"control cypress-files-control has-margin-top-9\">\n            <div className=\"columns is-multiline ob-columns-container\">\n              {value.snapshotImages.map(\n                (snapshotImage, index, snapshotImages) => {\n                  const attachment =\n                    snapshotImage as unknown as attachmentsService.Attachment\n                  return (\n                    <FormElementFile\n                      key={attachment.type ? attachment._id : attachment.id}\n                      element={filesElement}\n                      onRemove={\n                        snapshotImage.fileName !== automatedSnapshotFileName\n                          ? removeAttachment\n                          : undefined\n                      }\n                      file={attachment}\n                      onChange={changeAttachment}\n                      disableUpload={\n                        !!element.maxManualSnapshots &&\n                        snapshotImages.filter(\n                          (snapshotImage) =>\n                            snapshotImage.fileName !==\n                            automatedSnapshotFileName,\n                        ).length > element.maxManualSnapshots\n                      }\n                      index={index}\n                    />\n                  )\n                },\n              )}\n            </div>\n          </div>\n        )}\n\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementArcGISWebMap)\n"]}
+{"version":3,"file":"FormElementArcGISWebMap.js","sourceRoot":"","sources":["../../src/form-elements/FormElementArcGISWebMap.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { Suspense, useCallback, useMemo, useRef, useState } from 'react'\nimport { ArcGISTypes, FormTypes, SubmissionTypes } from '@oneblink/types'\nimport OnLoading from '../components/renderer/OnLoading'\nimport useIsOffline from '../hooks/useIsOffline'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport { ArcGISWebMapElementValue } from '@oneblink/types/typescript/arcgis'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\nimport { urlToBlobAsync } from '../services/blob-utils'\nimport {\n  generateErrorAttachment,\n  prepareNewAttachment,\n} from '../services/attachments'\nimport clsx from 'clsx'\nimport { attachmentsService } from '../apps'\nimport FormElementFile from './FormElementFile'\nimport useAttachments from '../hooks/attachments/useAttachments'\nimport CustomisableButtonInner from '../components/renderer/CustomisableButtonInner'\n\nconst ArcGISWebMap = React.lazy(() => import('../components/ArcGISWebMap'))\nexport const defaultAutoSnapshotButtonLabel = 'Finish Drawing'\n\ntype Props = {\n  id: string\n  element: FormTypes.ArcGISWebMapElement\n  readOnly: boolean\n  value: ArcGISWebMapElementValue | undefined\n  onChange: FormElementValueChangeHandler<ArcGISWebMapElementValue>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nexport function stringifyArcgisInput(\n  value: ArcGISWebMapElementValue | undefined,\n) {\n  return JSON.stringify(value?.userInput)\n}\n\nexport function generateArcGISAutomatedSnapshotFileName(\n  element: FormTypes.ArcGISWebMapElement,\n) {\n  return `${element.name}_automated.png`\n}\n\nfunction FormElementArcGISWebMap({\n  id,\n  element,\n  readOnly,\n  value,\n  onChange,\n  displayValidationMessage,\n  isDirty,\n  validationMessage,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const isOffline = useIsOffline()\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  const filesElement = useMemo<FormTypes.FilesElement>(() => {\n    return {\n      ...element,\n      type: 'files',\n      restrictFileTypes: false,\n    }\n  }, [element])\n\n  const handleChangeAttachments = useCallback<\n    FormElementValueChangeHandler<attachmentsService.Attachment[]>\n  >(\n    (e, data) => {\n      onChange(element, {\n        value: (existingValue) => ({\n          ...existingValue,\n          snapshotImages: (!data.value\n            ? undefined\n            : Array.isArray(data.value)\n              ? data.value\n              : data.value(\n                  existingValue?.snapshotImages,\n                )) as SubmissionTypes.FormSubmissionAttachment[],\n        }),\n      })\n    },\n    [element, onChange],\n  )\n\n  // An empty function to set is dirty because there are multiple ways\n  // to provide input into this component and we don't want any of them\n  // to trigger the validation message(s) for the other means of input.\n  const fakeSetIsDirty = useCallback(() => undefined, [])\n  const { removeAttachment, changeAttachment } = useAttachments(\n    filesElement,\n    handleChangeAttachments,\n    fakeSetIsDirty,\n  )\n\n  const takeScreenShotRef = useRef<\n    (view?: ArcGISTypes.ArcGISWebMapElementValue['view']) => Promise<{\n      dataUrl: string\n    }>\n  >(null)\n\n  const takeSnapshot = useCallback(\n    async (\n      fileName: string,\n      view?: ArcGISTypes.ArcGISWebMapElementValue['view'],\n    ) => {\n      if (!takeScreenShotRef.current) {\n        return\n      }\n      const takeScreenShot = takeScreenShotRef.current\n\n      try {\n        const screenshot = await takeScreenShot(view)\n        const blob = await urlToBlobAsync(screenshot.dataUrl)\n        const snapshotImage: unknown = prepareNewAttachment(\n          blob,\n          fileName,\n          element,\n        )\n        onChange(element, {\n          value: (existingValue) => ({\n            ...existingValue,\n            snapshotImages: [\n              ...(existingValue?.snapshotImages || []),\n              snapshotImage as SubmissionTypes.FormSubmissionAttachment,\n            ],\n          }),\n        })\n      } catch (error) {\n        console.warn('Error taking manual screenshot', error)\n        const snapshotImage: unknown = generateErrorAttachment(\n          undefined,\n          fileName,\n          element,\n          (error as Error).message,\n        )\n        onChange(element, {\n          value: (existingValue) => ({\n            ...existingValue,\n            snapshotImages: [\n              ...(existingValue?.snapshotImages || []),\n              snapshotImage as SubmissionTypes.FormSubmissionAttachment,\n            ],\n          }),\n        })\n      }\n    },\n    [element, onChange],\n  )\n\n  const [isTakingManualSnapshot, setIsTakingManualSnapshot] = useState(false)\n  const takeManualSnapshot = useCallback(async () => {\n    setIsTakingManualSnapshot(true)\n    await takeSnapshot(`${element.name}_manual.png`)\n    setIsTakingManualSnapshot(false)\n  }, [element.name, takeSnapshot])\n\n  const automatedSnapshotFileName = useMemo(() => {\n    return generateArcGISAutomatedSnapshotFileName(element)\n  }, [element])\n  const [isTakingAutoSnapshots, setIsTakingAutoSnapshots] = useState(false)\n  const takeAutoSnapshots = useCallback(async () => {\n    setIsTakingAutoSnapshots(true)\n    onChange(element, {\n      value: (existingValue) => ({\n        ...existingValue,\n        snapshotImages: existingValue?.snapshotImages?.filter(\n          (snapshotImage) => {\n            return snapshotImage.fileName !== automatedSnapshotFileName\n          },\n        ),\n      }),\n    })\n    for (const autoSnapshotView of element.autoSnapshotViews || []) {\n      await takeSnapshot(automatedSnapshotFileName, autoSnapshotView)\n    }\n    setIsTakingAutoSnapshots(false)\n  }, [automatedSnapshotFileName, element, onChange, takeSnapshot])\n\n  return (\n    <div className=\"cypress-arcgis-web-map\">\n      <FormElementLabelContainer\n        className=\"ob-arcgis-web-map\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        {isOffline ? (\n          <figure className=\"ob-figure\">\n            <div className=\"figure-content has-text-centered\">\n              <h4 className=\"title is-4\" role=\"alert\">\n                This Web Map is not available as you are currently offline\n              </h4>\n            </div>\n          </figure>\n        ) : (\n          <figure className=\"ob-figure\">\n            <Suspense\n              fallback={\n                <div className=\"arcgis-web-map figure-content-absolute-center\">\n                  <OnLoading small />\n                </div>\n              }\n            >\n              <ArcGISWebMap\n                element={element}\n                readOnly={readOnly}\n                id={id}\n                aria-describedby={ariaDescribedby}\n                value={value}\n                onChange={onChange}\n                takeScreenShotRef={takeScreenShotRef}\n                automatedSnapshotFileName={automatedSnapshotFileName}\n              />\n            </Suspense>\n          </figure>\n        )}\n\n        {(!!element.manualSnapshotsEnabled ||\n          !!element.autoSnapshotViews?.length) && (\n          <div>\n            <div className=\"buttons ob-buttons ob-arcgis-web-map__buttons\">\n              {!!element.manualSnapshotsEnabled && (\n                <button\n                  type=\"button\"\n                  className={clsx(\n                    'is-primary button ob-button ob-button__capture-snapshot ob-arcgis-web-map__button cypress-arcgis-web-map-capture-snapshot-button',\n                    {\n                      'is-loading': isTakingManualSnapshot,\n                    },\n                  )}\n                  onClick={takeManualSnapshot}\n                  disabled={\n                    readOnly ||\n                    isTakingManualSnapshot ||\n                    (!!element.maxManualSnapshots &&\n                      (value?.snapshotImages?.filter(\n                        (snapshotImage) =>\n                          snapshotImage.fileName !== automatedSnapshotFileName,\n                      )?.length || 0) >= element.maxManualSnapshots)\n                  }\n                >\n                  <CustomisableButtonInner\n                    label={\n                      element.manualSnapshotButton?.label || 'Capture Image'\n                    }\n                    icon={element.manualSnapshotButton?.icon}\n                  />\n                </button>\n              )}\n\n              {!!element.autoSnapshotViews?.length && (\n                <button\n                  type=\"button\"\n                  className={clsx(\n                    'is-primary button ob-button ob-button__finish-drawing ob-arcgis-web-map__button cypress-arcgis-web-map-finish-drawing-button',\n                    {\n                      'is-loading': isTakingAutoSnapshots,\n                    },\n                  )}\n                  onClick={takeAutoSnapshots}\n                  disabled={\n                    readOnly ||\n                    isTakingAutoSnapshots ||\n                    value?.snapshotImages?.some(\n                      (snapshotImage) =>\n                        snapshotImage.fileName === automatedSnapshotFileName,\n                    )\n                  }\n                >\n                  <CustomisableButtonInner\n                    label={\n                      element.autoSnapshotButton?.label ||\n                      defaultAutoSnapshotButtonLabel\n                    }\n                    icon={element.autoSnapshotButton?.icon}\n                  />\n                </button>\n              )}\n            </div>\n          </div>\n        )}\n\n        {!!value?.snapshotImages?.length && (\n          <div className=\"control cypress-files-control has-margin-top-9\">\n            <div className=\"columns is-multiline ob-columns-container\">\n              {value.snapshotImages.map(\n                (snapshotImage, index, snapshotImages) => {\n                  const attachment =\n                    snapshotImage as unknown as attachmentsService.Attachment\n                  return (\n                    <FormElementFile\n                      key={attachment.type ? attachment._id : attachment.id}\n                      element={filesElement}\n                      readOnly={readOnly}\n                      onRemove={\n                        snapshotImage.fileName !== automatedSnapshotFileName\n                          ? removeAttachment\n                          : undefined\n                      }\n                      file={attachment}\n                      onChange={changeAttachment}\n                      disableUpload={\n                        !!element.maxManualSnapshots &&\n                        snapshotImages.filter(\n                          (snapshotImage) =>\n                            snapshotImage.fileName !==\n                            automatedSnapshotFileName,\n                        ).length > element.maxManualSnapshots\n                      }\n                      index={index}\n                    />\n                  )\n                },\n              )}\n            </div>\n          </div>\n        )}\n\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementArcGISWebMap)\n"]}

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

@@ -4,6 +4,7 @@ import { FormElementValueChangeHandler, FormElementConditionallyShownElement, Is
 type _BaseProps = {
     id: string;
     element: FormTypes.AutoCompleteElement;
+    readOnly: boolean;
     value: unknown | undefined;
     displayValidationMessage: boolean;
     validationMessage: string | undefined;

package/dist/form-elements/FormElementAutocomplete.js

@@ -7,7 +7,7 @@ import useFormElementOptions from '../hooks/useFormElementOptions';
 import AutocompleteDropdown from '../components/renderer/AutocompleteDropdown';
 import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
 import useElementAriaDescribedby from '../hooks/useElementAriaDescribedby';
-const AutocompleteFilter = React.memo(function AutocompleteFilter({ id, element, value, onChange, conditionallyShownOptionsElement, validationMessage, displayValidationMessage, onUpdateFormElements, isDirty, setIsDirty, autocompleteAttributes, }) {
+const AutocompleteFilter = React.memo(function AutocompleteFilter({ id, element, readOnly, value, onChange, conditionallyShownOptionsElement, validationMessage, displayValidationMessage, onUpdateFormElements, isDirty, setIsDirty, autocompleteAttributes, }) {
     const ariaDescribedby = useElementAriaDescribedby(id, element);
     const [label, setLabel] = React.useState('');
     const onFilter = React.useCallback((option) => {
@@ -43,9 +43,9 @@ const AutocompleteFilter = React.memo(function AutocompleteFilter({ id, element,
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [element.options, value]);
-    return (_jsx("div", { className: "cypress-autocomplete-filter-element", children: _jsx(FormElementLabelContainer, { className: "ob-autocomplete", element: element, id: id, required: element.required, children: _jsx(FormElementOptions, { options: element.options, conditionallyShownOptionsElement: conditionallyShownOptionsElement, children: _jsx(AutocompleteDropdown, { id: id, label: label, disabled: element.readOnly, placeholder: element.placeholderValue, required: element.required, value: value, validationMessage: validationMessage, displayValidationMessage: displayValidationMessage, onChangeValue: onChange, onChangeLabel: setLabel, onSearch: handleSearch, searchDebounceMs: 0, searchMinCharacters: 0, isDirty: isDirty, setIsDirty: setIsDirty, "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes }) }) }) }));
+    return (_jsx("div", { className: "cypress-autocomplete-filter-element", children: _jsx(FormElementLabelContainer, { className: "ob-autocomplete", element: element, id: id, required: element.required, children: _jsx(FormElementOptions, { options: element.options, conditionallyShownOptionsElement: conditionallyShownOptionsElement, children: _jsx(AutocompleteDropdown, { id: id, label: label, disabled: readOnly, placeholder: element.placeholderValue, required: element.required, value: value, validationMessage: validationMessage, displayValidationMessage: displayValidationMessage, onChangeValue: onChange, onChangeLabel: setLabel, onSearch: handleSearch, searchDebounceMs: 0, searchMinCharacters: 0, isDirty: isDirty, setIsDirty: setIsDirty, "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes }) }) }) }));
 });
-const AutocompleteFetch = React.memo(function AutocompleteFetch({ id, element, value, onChange, validationMessage, displayValidationMessage, searchUrl, searchQuerystringParameter, isDirty, setIsDirty, autocompleteAttributes, }) {
+const AutocompleteFetch = React.memo(function AutocompleteFetch({ id, element, readOnly, value, onChange, validationMessage, displayValidationMessage, searchUrl, searchQuerystringParameter, isDirty, setIsDirty, autocompleteAttributes, }) {
     const ariaDescribedby = useElementAriaDescribedby(id, element);
     const [label, setLabel] = React.useState('');
     const handleSearch = React.useCallback(async (search, abortSignal) => {
@@ -70,7 +70,7 @@ const AutocompleteFetch = React.memo(function AutocompleteFetch({ id, element, v
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value]);
-    return (_jsx("div", { className: "cypress-autocomplete-search-element", children: _jsx(FormElementLabelContainer, { className: "ob-autocomplete", element: element, id: id, required: element.required, children: _jsx(AutocompleteDropdown, { id: id, label: label, disabled: element.readOnly, placeholder: element.placeholderValue, required: element.required, value: value, validationMessage: validationMessage, displayValidationMessage: displayValidationMessage, onChangeValue: onChange, onChangeLabel: setLabel, searchDebounceMs: 750, searchMinCharacters: 1, onSearch: handleSearch, isDirty: isDirty, setIsDirty: setIsDirty, "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes }) }) }));
+    return (_jsx("div", { className: "cypress-autocomplete-search-element", children: _jsx(FormElementLabelContainer, { className: "ob-autocomplete", element: element, id: id, required: element.required, children: _jsx(AutocompleteDropdown, { id: id, label: label, disabled: readOnly, placeholder: element.placeholderValue, required: element.required, value: value, validationMessage: validationMessage, displayValidationMessage: displayValidationMessage, onChangeValue: onChange, onChangeLabel: setLabel, searchDebounceMs: 750, searchMinCharacters: 1, onSearch: handleSearch, isDirty: isDirty, setIsDirty: setIsDirty, "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes }) }) }));
 });
 function FormElementAutocomplete({ conditionallyShownOptionsElement, onChange, ...props }) {
     const handleChange = React.useCallback((newValue) => {

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementAutocomplete.js","sourceRoot":"","sources":["../../src/form-elements/FormElementAutocomplete.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { formElementsService } from '@oneblink/sdk-core'\nimport { generateHeaders } from '../apps/services/fetch'\n\nimport FormElementOptions from '../components/renderer/FormElementOptions'\nimport useFormElementOptions from '../hooks/useFormElementOptions'\nimport AutocompleteDropdown from '../components/renderer/AutocompleteDropdown'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormTypes } from '@oneblink/types'\nimport {\n  FormElementValueChangeHandler,\n  FormElementConditionallyShownElement,\n  IsDirtyProps,\n  UpdateFormElementsHandler,\n} from '../types/form'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\n\ntype _BaseProps = {\n  id: string\n  element: FormTypes.AutoCompleteElement\n  value: unknown | undefined\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  onUpdateFormElements: UpdateFormElementsHandler\n  autocompleteAttributes?: string\n} & IsDirtyProps\n\ntype _AutocompleteChangeHandlerProps = _BaseProps & {\n  onChange: (newValue: unknown | undefined) => void\n}\n\ntype _AutocompleteConditionallyShowOptionProps = {\n  conditionallyShownOptionsElement:\n    | FormElementConditionallyShownElement\n    | undefined\n}\n\ntype AutocompleteFilterProps = _AutocompleteChangeHandlerProps &\n  _AutocompleteConditionallyShowOptionProps\n\ntype AutocompleteFetchProps = _AutocompleteChangeHandlerProps & {\n  searchUrl: string\n  searchQuerystringParameter: string\n}\n\ntype Props = _BaseProps &\n  _AutocompleteConditionallyShowOptionProps & {\n    onChange: FormElementValueChangeHandler<string>\n  }\n\nconst AutocompleteFilter = React.memo(function AutocompleteFilter({\n  id,\n  element,\n  value,\n  onChange,\n  conditionallyShownOptionsElement,\n  validationMessage,\n  displayValidationMessage,\n  onUpdateFormElements,\n  isDirty,\n  setIsDirty,\n  autocompleteAttributes,\n}: AutocompleteFilterProps) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const [label, setLabel] = React.useState('')\n\n  const onFilter = React.useCallback(\n    (option: FormTypes.ChoiceElementOption) => {\n      // If the user has typed nothing in, display all options\n      if (!label) {\n        return true\n      }\n\n      const lowerCase = label.toLowerCase()\n\n      return option.label.toLowerCase().includes(lowerCase)\n    },\n    [label],\n  )\n\n  const handleChange = React.useCallback(\n    (element: FormTypes.FormElement, { value }: { value?: unknown }) => {\n      onChange(value as string | undefined)\n    },\n    [onChange],\n  )\n\n  const filteredOptions = useFormElementOptions({\n    element,\n    value,\n    onChange: handleChange,\n    conditionallyShownOptionsElement,\n    onFilter,\n    onUpdateFormElements,\n  })\n\n  const handleSearch = React.useCallback(async () => {\n    return filteredOptions\n  }, [filteredOptions])\n\n  // Ensure the label matches the value selected\n  React.useEffect(() => {\n    if (!Array.isArray(element.options)) {\n      return\n    }\n\n    const option = element.options.find((option) => option.value === value)\n    if (option && label !== option.label) {\n      setLabel(option.label)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [element.options, value])\n\n  return (\n    <div className=\"cypress-autocomplete-filter-element\">\n      <FormElementLabelContainer\n        className=\"ob-autocomplete\"\n        element={element}\n        id={id}\n        required={element.required}\n      >\n        <FormElementOptions\n          options={element.options}\n          conditionallyShownOptionsElement={conditionallyShownOptionsElement}\n        >\n          <AutocompleteDropdown\n            id={id}\n            label={label}\n            disabled={element.readOnly}\n            placeholder={element.placeholderValue}\n            required={element.required}\n            value={value}\n            validationMessage={validationMessage}\n            displayValidationMessage={displayValidationMessage}\n            onChangeValue={onChange}\n            onChangeLabel={setLabel}\n            onSearch={handleSearch}\n            searchDebounceMs={0}\n            searchMinCharacters={0}\n            isDirty={isDirty}\n            setIsDirty={setIsDirty}\n            aria-describedby={ariaDescribedby}\n            autoComplete={autocompleteAttributes}\n          />\n        </FormElementOptions>\n      </FormElementLabelContainer>\n    </div>\n  )\n})\n\nconst AutocompleteFetch = React.memo(function AutocompleteFetch({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  searchUrl,\n  searchQuerystringParameter,\n  isDirty,\n  setIsDirty,\n  autocompleteAttributes,\n}: AutocompleteFetchProps) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const [label, setLabel] = React.useState('')\n\n  const handleSearch = React.useCallback(\n    async (search: string, abortSignal: AbortSignal) => {\n      const headers = await generateHeaders()\n      const url = new URL(searchUrl)\n      url.searchParams.append(searchQuerystringParameter, search)\n      const response = await fetch(url.href, {\n        headers,\n        signal: abortSignal,\n      })\n\n      if (!response.ok) {\n        const text = await response.text()\n        throw new Error(text)\n      }\n\n      const data = await response.json()\n      return formElementsService.parseDynamicFormElementOptions(data)\n    },\n    [searchQuerystringParameter, searchUrl],\n  )\n\n  // Ensure the label is set if the value is set outside of this component\n  React.useEffect(() => {\n    if (!label && typeof value === 'string') {\n      setLabel(value)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value])\n\n  return (\n    <div className=\"cypress-autocomplete-search-element\">\n      <FormElementLabelContainer\n        className=\"ob-autocomplete\"\n        element={element}\n        id={id}\n        required={element.required}\n      >\n        <AutocompleteDropdown\n          id={id}\n          label={label}\n          disabled={element.readOnly}\n          placeholder={element.placeholderValue}\n          required={element.required}\n          value={value}\n          validationMessage={validationMessage}\n          displayValidationMessage={displayValidationMessage}\n          onChangeValue={onChange}\n          onChangeLabel={setLabel}\n          searchDebounceMs={750}\n          searchMinCharacters={1}\n          onSearch={handleSearch}\n          isDirty={isDirty}\n          setIsDirty={setIsDirty}\n          aria-describedby={ariaDescribedby}\n          autoComplete={autocompleteAttributes}\n        />\n      </FormElementLabelContainer>\n    </div>\n  )\n})\n\nfunction FormElementAutocomplete({\n  conditionallyShownOptionsElement,\n  onChange,\n  ...props\n}: Props) {\n  const handleChange = React.useCallback(\n    (newValue: unknown) => {\n      onChange(props.element, {\n        value: newValue as string | undefined,\n      })\n    },\n    [onChange, props.element],\n  )\n  if (props.element.optionsType === 'SEARCH' && props.element.searchUrl) {\n    return (\n      <AutocompleteFetch\n        {...props}\n        onChange={handleChange}\n        searchUrl={props.element.searchUrl}\n        searchQuerystringParameter={\n          props.element.searchQuerystringParameter || 'value'\n        }\n      />\n    )\n  }\n  return (\n    <AutocompleteFilter\n      {...props}\n      onChange={handleChange}\n      conditionallyShownOptionsElement={conditionallyShownOptionsElement}\n    />\n  )\n}\n\nexport default React.memo(FormElementAutocomplete)\n"]}
+{"version":3,"file":"FormElementAutocomplete.js","sourceRoot":"","sources":["../../src/form-elements/FormElementAutocomplete.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { formElementsService } from '@oneblink/sdk-core'\nimport { generateHeaders } from '../apps/services/fetch'\n\nimport FormElementOptions from '../components/renderer/FormElementOptions'\nimport useFormElementOptions from '../hooks/useFormElementOptions'\nimport AutocompleteDropdown from '../components/renderer/AutocompleteDropdown'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormTypes } from '@oneblink/types'\nimport {\n  FormElementValueChangeHandler,\n  FormElementConditionallyShownElement,\n  IsDirtyProps,\n  UpdateFormElementsHandler,\n} from '../types/form'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\n\ntype _BaseProps = {\n  id: string\n  element: FormTypes.AutoCompleteElement\n  readOnly: boolean\n  value: unknown | undefined\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  onUpdateFormElements: UpdateFormElementsHandler\n  autocompleteAttributes?: string\n} & IsDirtyProps\n\ntype _AutocompleteChangeHandlerProps = _BaseProps & {\n  onChange: (newValue: unknown | undefined) => void\n}\n\ntype _AutocompleteConditionallyShowOptionProps = {\n  conditionallyShownOptionsElement:\n    | FormElementConditionallyShownElement\n    | undefined\n}\n\ntype AutocompleteFilterProps = _AutocompleteChangeHandlerProps &\n  _AutocompleteConditionallyShowOptionProps\n\ntype AutocompleteFetchProps = _AutocompleteChangeHandlerProps & {\n  searchUrl: string\n  searchQuerystringParameter: string\n}\n\ntype Props = _BaseProps &\n  _AutocompleteConditionallyShowOptionProps & {\n    onChange: FormElementValueChangeHandler<string>\n  }\n\nconst AutocompleteFilter = React.memo(function AutocompleteFilter({\n  id,\n  element,\n  readOnly,\n  value,\n  onChange,\n  conditionallyShownOptionsElement,\n  validationMessage,\n  displayValidationMessage,\n  onUpdateFormElements,\n  isDirty,\n  setIsDirty,\n  autocompleteAttributes,\n}: AutocompleteFilterProps) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const [label, setLabel] = React.useState('')\n\n  const onFilter = React.useCallback(\n    (option: FormTypes.ChoiceElementOption) => {\n      // If the user has typed nothing in, display all options\n      if (!label) {\n        return true\n      }\n\n      const lowerCase = label.toLowerCase()\n\n      return option.label.toLowerCase().includes(lowerCase)\n    },\n    [label],\n  )\n\n  const handleChange = React.useCallback(\n    (element: FormTypes.FormElement, { value }: { value?: unknown }) => {\n      onChange(value as string | undefined)\n    },\n    [onChange],\n  )\n\n  const filteredOptions = useFormElementOptions({\n    element,\n    value,\n    onChange: handleChange,\n    conditionallyShownOptionsElement,\n    onFilter,\n    onUpdateFormElements,\n  })\n\n  const handleSearch = React.useCallback(async () => {\n    return filteredOptions\n  }, [filteredOptions])\n\n  // Ensure the label matches the value selected\n  React.useEffect(() => {\n    if (!Array.isArray(element.options)) {\n      return\n    }\n\n    const option = element.options.find((option) => option.value === value)\n    if (option && label !== option.label) {\n      setLabel(option.label)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [element.options, value])\n\n  return (\n    <div className=\"cypress-autocomplete-filter-element\">\n      <FormElementLabelContainer\n        className=\"ob-autocomplete\"\n        element={element}\n        id={id}\n        required={element.required}\n      >\n        <FormElementOptions\n          options={element.options}\n          conditionallyShownOptionsElement={conditionallyShownOptionsElement}\n        >\n          <AutocompleteDropdown\n            id={id}\n            label={label}\n            disabled={readOnly}\n            placeholder={element.placeholderValue}\n            required={element.required}\n            value={value}\n            validationMessage={validationMessage}\n            displayValidationMessage={displayValidationMessage}\n            onChangeValue={onChange}\n            onChangeLabel={setLabel}\n            onSearch={handleSearch}\n            searchDebounceMs={0}\n            searchMinCharacters={0}\n            isDirty={isDirty}\n            setIsDirty={setIsDirty}\n            aria-describedby={ariaDescribedby}\n            autoComplete={autocompleteAttributes}\n          />\n        </FormElementOptions>\n      </FormElementLabelContainer>\n    </div>\n  )\n})\n\nconst AutocompleteFetch = React.memo(function AutocompleteFetch({\n  id,\n  element,\n  readOnly,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  searchUrl,\n  searchQuerystringParameter,\n  isDirty,\n  setIsDirty,\n  autocompleteAttributes,\n}: AutocompleteFetchProps) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const [label, setLabel] = React.useState('')\n\n  const handleSearch = React.useCallback(\n    async (search: string, abortSignal: AbortSignal) => {\n      const headers = await generateHeaders()\n      const url = new URL(searchUrl)\n      url.searchParams.append(searchQuerystringParameter, search)\n      const response = await fetch(url.href, {\n        headers,\n        signal: abortSignal,\n      })\n\n      if (!response.ok) {\n        const text = await response.text()\n        throw new Error(text)\n      }\n\n      const data = await response.json()\n      return formElementsService.parseDynamicFormElementOptions(data)\n    },\n    [searchQuerystringParameter, searchUrl],\n  )\n\n  // Ensure the label is set if the value is set outside of this component\n  React.useEffect(() => {\n    if (!label && typeof value === 'string') {\n      setLabel(value)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value])\n\n  return (\n    <div className=\"cypress-autocomplete-search-element\">\n      <FormElementLabelContainer\n        className=\"ob-autocomplete\"\n        element={element}\n        id={id}\n        required={element.required}\n      >\n        <AutocompleteDropdown\n          id={id}\n          label={label}\n          disabled={readOnly}\n          placeholder={element.placeholderValue}\n          required={element.required}\n          value={value}\n          validationMessage={validationMessage}\n          displayValidationMessage={displayValidationMessage}\n          onChangeValue={onChange}\n          onChangeLabel={setLabel}\n          searchDebounceMs={750}\n          searchMinCharacters={1}\n          onSearch={handleSearch}\n          isDirty={isDirty}\n          setIsDirty={setIsDirty}\n          aria-describedby={ariaDescribedby}\n          autoComplete={autocompleteAttributes}\n        />\n      </FormElementLabelContainer>\n    </div>\n  )\n})\n\nfunction FormElementAutocomplete({\n  conditionallyShownOptionsElement,\n  onChange,\n  ...props\n}: Props) {\n  const handleChange = React.useCallback(\n    (newValue: unknown) => {\n      onChange(props.element, {\n        value: newValue as string | undefined,\n      })\n    },\n    [onChange, props.element],\n  )\n  if (props.element.optionsType === 'SEARCH' && props.element.searchUrl) {\n    return (\n      <AutocompleteFetch\n        {...props}\n        onChange={handleChange}\n        searchUrl={props.element.searchUrl}\n        searchQuerystringParameter={\n          props.element.searchQuerystringParameter || 'value'\n        }\n      />\n    )\n  }\n  return (\n    <AutocompleteFilter\n      {...props}\n      onChange={handleChange}\n      conditionallyShownOptionsElement={conditionallyShownOptionsElement}\n    />\n  )\n}\n\nexport default React.memo(FormElementAutocomplete)\n"]}

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

@@ -5,6 +5,7 @@ type Props = {
     id: string;
     formId: number;
     element: FormTypes.BSBElement;
+    readOnly: boolean;
     value: unknown;
     onChange: FormElementValueChangeHandler<string | {
         isInvalid: boolean;
@@ -14,6 +15,6 @@ type Props = {
     validationMessage: string | undefined;
     autocompleteAttributes?: string;
 } & IsDirtyProps;
-declare function FormElementBSB({ id, formId, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, autocompleteAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function FormElementBSB({ id, formId, element, readOnly, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, autocompleteAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof FormElementBSB>;
 export default _default;

package/dist/form-elements/FormElementBSB.js

@@ -10,7 +10,7 @@ import { LookupNotificationContext } from '../hooks/useLookupNotification';
 import useElementAriaDescribedby from '../hooks/useElementAriaDescribedby';
 import FormElementValidationMessage from '../components/renderer/FormElementValidationMessage';
 import useBooleanState from '../hooks/useBooleanState';
-function FormElementBSB({ id, formId, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, autocompleteAttributes, }) {
+function FormElementBSB({ id, formId, element, readOnly, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, autocompleteAttributes, }) {
     const ariaDescribedby = useElementAriaDescribedby(id, element);
     const [text, setText] = React.useState(typeof value === 'string' ? value : '');
     const [hasFocus, setHasFocus, removeFocus] = useBooleanState(false);
@@ -84,7 +84,7 @@ function FormElementBSB({ id, formId, element, value, onChange, validationMessag
         !isLoading) ||
         errorMessage) &&
         !isLookingUp;
-    const hasCopyButton = !!value && !!element.readOnly;
+    const hasCopyButton = !!value && !!readOnly;
     const hasLookupButton = element.isDataLookup || element.isElementLookup;
     return (_jsx("div", { className: "cypress-bsb-element", children: _jsxs(FormElementLabelContainer, { className: "ob-bsb", id: id, element: element, required: element.required, children: [_jsxs("div", { className: clsx('field has-addons', {
                         'no-addons-mobile': !hasCopyButton && !hasLookupButton,
@@ -92,7 +92,7 @@ function FormElementBSB({ id, formId, element, value, onChange, validationMessag
                                 'is-loading': isLoading,
                             }), children: _jsx(InputMask, { mask: "xxx-xxx", replacement: { x: /\d/ }, showMask: hasFocus, type: "text", placeholder: element.placeholderValue, id: id, name: element.name, className: "input ob-input cypress-bsb-control", value: text, onChange: (e) => {
                                     setText(e.target.value);
-                                }, required: element.required, disabled: element.readOnly, onFocus: setHasFocus, onBlur: () => {
+                                }, required: element.required, disabled: readOnly, onFocus: setHasFocus, onBlur: () => {
                                     removeFocus();
                                     if (text === 'xxx-xxx') {
                                         onChange(element, {
@@ -101,7 +101,7 @@ function FormElementBSB({ id, formId, element, value, onChange, validationMessag
                                         setText('');
                                     }
                                     setIsDirty();
-                                }, "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes, "aria-required": element.required }) }), bsbRecord && (_jsx(BSBDisplay, { bsbRecord: bsbRecord, className: "ob-bsb__display-desktop" })), hasCopyButton && (_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 })] }), bsbRecord && (_jsx(BSBDisplay, { bsbRecord: bsbRecord, className: "ob-bsb__display-mobile" })), isDisplayingValidationMessage && (_jsx(FormElementValidationMessage, { message: errorMessage || validationMessage }))] }) }));
+                                }, "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes, "aria-required": element.required }) }), bsbRecord && (_jsx(BSBDisplay, { bsbRecord: bsbRecord, className: "ob-bsb__display-desktop" })), hasCopyButton && (_jsx("div", { className: "control", children: _jsx(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }) })), _jsx(LookupButton, { readOnly: readOnly, isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton, overrideRequiredMessage: undefined })] }), bsbRecord && (_jsx(BSBDisplay, { bsbRecord: bsbRecord, className: "ob-bsb__display-mobile" })), isDisplayingValidationMessage && (_jsx(FormElementValidationMessage, { message: errorMessage || validationMessage }))] }) }));
 }
 const BSBDisplay = ({ bsbRecord, className, }) => {
     return (_jsx("div", { className: `control ob-bsb__record-control ${className}`, children: _jsxs("a", { className: "button is-static ob-bsb__record-button", children: [bsbRecord.financialInstitutionMnemonic, " - ", bsbRecord.name] }) }));

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementBSB.js","sourceRoot":"","sources":["../../src/form-elements/FormElementBSB.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { InputMask } from '@react-input/mask'\nimport clsx from 'clsx'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes, MiscTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { formService } from '../apps'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\nimport useBooleanState from '../hooks/useBooleanState'\n\ntype Props = {\n  id: string\n  formId: number\n  element: FormTypes.BSBElement\n  value: unknown\n  onChange: FormElementValueChangeHandler<\n    string | { isInvalid: boolean; isValidating: boolean }\n  >\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementBSB({\n  id,\n  formId,\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 [text, setText] = React.useState(typeof value === 'string' ? value : '')\n  const [hasFocus, setHasFocus, removeFocus] = useBooleanState(false)\n  const isValidFormat = /\\d{3}-\\d{3}/.test(text)\n\n  const [{ isLoading, errorMessage, bsbRecord }, setState] = React.useState<{\n    isLoading: boolean\n    errorMessage: string | null\n    bsbRecord: MiscTypes.BSBRecord | null\n  }>({\n    isLoading: false,\n    errorMessage: null,\n    bsbRecord: null,\n  })\n\n  React.useEffect(() => {\n    if (bsbRecord) {\n      onChange(element, {\n        value: bsbRecord.bsb,\n      })\n    }\n  }, [bsbRecord, element, onChange, value])\n\n  React.useEffect(() => {\n    if (text === '') {\n      return\n    }\n\n    if (!isValidFormat) {\n      setState({\n        isLoading: false,\n        errorMessage: null,\n        bsbRecord: null,\n      })\n      return\n    }\n\n    setState({\n      isLoading: true,\n      errorMessage: null,\n      bsbRecord: null,\n    })\n\n    const abortController = new AbortController()\n    const getBSBRecord = async () => {\n      onChange(element, {\n        value: { isValidating: true, isInvalid: false },\n      })\n      try {\n        const bsbRecord = await formService.getBSBRecord(\n          formId,\n          text,\n          abortController.signal,\n        )\n        if (!abortController.signal.aborted) {\n          setState({\n            isLoading: false,\n            errorMessage: null,\n            bsbRecord,\n          })\n        }\n      } catch (error) {\n        console.warn('Error validating BSB number', error)\n        if (!abortController.signal.aborted) {\n          onChange(element, {\n            value: { isInvalid: true, isValidating: false },\n          })\n          setState({\n            isLoading: false,\n            errorMessage: `The BSB number \"${text}\" does not exist`,\n            bsbRecord: null,\n          })\n        }\n      }\n    }\n\n    getBSBRecord()\n\n    return () => {\n      abortController.abort()\n    }\n  }, [formId, isValidFormat, text, onChange, element])\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (((isDirty || displayValidationMessage) &&\n      !!validationMessage &&\n      !isLoading) ||\n      errorMessage) &&\n    !isLookingUp\n\n  const hasCopyButton = !!value && !!element.readOnly\n  const hasLookupButton = element.isDataLookup || element.isElementLookup\n  return (\n    <div className=\"cypress-bsb-element\">\n      <FormElementLabelContainer\n        className=\"ob-bsb\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div\n          className={clsx('field has-addons', {\n            'no-addons-mobile': !hasCopyButton && !hasLookupButton,\n          })}\n        >\n          <div\n            className={clsx('control is-expanded', {\n              'is-loading': isLoading,\n            })}\n          >\n            <InputMask\n              mask=\"xxx-xxx\"\n              replacement={{ x: /\\d/ }}\n              showMask={hasFocus}\n              type=\"text\"\n              placeholder={element.placeholderValue}\n              id={id}\n              name={element.name}\n              className=\"input ob-input cypress-bsb-control\"\n              value={text}\n              onChange={(e) => {\n                setText(e.target.value)\n              }}\n              required={element.required}\n              disabled={element.readOnly}\n              onFocus={setHasFocus}\n              onBlur={() => {\n                removeFocus()\n                if (text === 'xxx-xxx') {\n                  onChange(element, {\n                    value: undefined,\n                  })\n                  setText('')\n                }\n                setIsDirty()\n              }}\n              aria-describedby={ariaDescribedby}\n              autoComplete={autocompleteAttributes}\n              aria-required={element.required}\n            />\n          </div>\n          {bsbRecord && (\n            <BSBDisplay\n              bsbRecord={bsbRecord}\n              className=\"ob-bsb__display-desktop\"\n            />\n          )}\n          {hasCopyButton && (\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        {bsbRecord && (\n          <BSBDisplay\n            bsbRecord={bsbRecord}\n            className=\"ob-bsb__display-mobile\"\n          />\n        )}\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage\n            message={errorMessage || validationMessage}\n          />\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nconst BSBDisplay = ({\n  bsbRecord,\n  className,\n}: {\n  bsbRecord: MiscTypes.BSBRecord\n  className: string\n}) => {\n  return (\n    <div className={`control ob-bsb__record-control ${className}`}>\n      <a className=\"button is-static ob-bsb__record-button\">\n        {bsbRecord.financialInstitutionMnemonic} - {bsbRecord.name}\n      </a>\n    </div>\n  )\n}\nexport default React.memo(FormElementBSB)\n"]}
+{"version":3,"file":"FormElementBSB.js","sourceRoot":"","sources":["../../src/form-elements/FormElementBSB.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { InputMask } from '@react-input/mask'\nimport clsx from 'clsx'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes, MiscTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { formService } from '../apps'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\nimport useBooleanState from '../hooks/useBooleanState'\n\ntype Props = {\n  id: string\n  formId: number\n  element: FormTypes.BSBElement\n  readOnly: boolean\n  value: unknown\n  onChange: FormElementValueChangeHandler<\n    string | { isInvalid: boolean; isValidating: boolean }\n  >\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementBSB({\n  id,\n  formId,\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 [text, setText] = React.useState(typeof value === 'string' ? value : '')\n  const [hasFocus, setHasFocus, removeFocus] = useBooleanState(false)\n  const isValidFormat = /\\d{3}-\\d{3}/.test(text)\n\n  const [{ isLoading, errorMessage, bsbRecord }, setState] = React.useState<{\n    isLoading: boolean\n    errorMessage: string | null\n    bsbRecord: MiscTypes.BSBRecord | null\n  }>({\n    isLoading: false,\n    errorMessage: null,\n    bsbRecord: null,\n  })\n\n  React.useEffect(() => {\n    if (bsbRecord) {\n      onChange(element, {\n        value: bsbRecord.bsb,\n      })\n    }\n  }, [bsbRecord, element, onChange, value])\n\n  React.useEffect(() => {\n    if (text === '') {\n      return\n    }\n\n    if (!isValidFormat) {\n      setState({\n        isLoading: false,\n        errorMessage: null,\n        bsbRecord: null,\n      })\n      return\n    }\n\n    setState({\n      isLoading: true,\n      errorMessage: null,\n      bsbRecord: null,\n    })\n\n    const abortController = new AbortController()\n    const getBSBRecord = async () => {\n      onChange(element, {\n        value: { isValidating: true, isInvalid: false },\n      })\n      try {\n        const bsbRecord = await formService.getBSBRecord(\n          formId,\n          text,\n          abortController.signal,\n        )\n        if (!abortController.signal.aborted) {\n          setState({\n            isLoading: false,\n            errorMessage: null,\n            bsbRecord,\n          })\n        }\n      } catch (error) {\n        console.warn('Error validating BSB number', error)\n        if (!abortController.signal.aborted) {\n          onChange(element, {\n            value: { isInvalid: true, isValidating: false },\n          })\n          setState({\n            isLoading: false,\n            errorMessage: `The BSB number \"${text}\" does not exist`,\n            bsbRecord: null,\n          })\n        }\n      }\n    }\n\n    getBSBRecord()\n\n    return () => {\n      abortController.abort()\n    }\n  }, [formId, isValidFormat, text, onChange, element])\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (((isDirty || displayValidationMessage) &&\n      !!validationMessage &&\n      !isLoading) ||\n      errorMessage) &&\n    !isLookingUp\n\n  const hasCopyButton = !!value && !!readOnly\n  const hasLookupButton = element.isDataLookup || element.isElementLookup\n  return (\n    <div className=\"cypress-bsb-element\">\n      <FormElementLabelContainer\n        className=\"ob-bsb\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div\n          className={clsx('field has-addons', {\n            'no-addons-mobile': !hasCopyButton && !hasLookupButton,\n          })}\n        >\n          <div\n            className={clsx('control is-expanded', {\n              'is-loading': isLoading,\n            })}\n          >\n            <InputMask\n              mask=\"xxx-xxx\"\n              replacement={{ x: /\\d/ }}\n              showMask={hasFocus}\n              type=\"text\"\n              placeholder={element.placeholderValue}\n              id={id}\n              name={element.name}\n              className=\"input ob-input cypress-bsb-control\"\n              value={text}\n              onChange={(e) => {\n                setText(e.target.value)\n              }}\n              required={element.required}\n              disabled={readOnly}\n              onFocus={setHasFocus}\n              onBlur={() => {\n                removeFocus()\n                if (text === 'xxx-xxx') {\n                  onChange(element, {\n                    value: undefined,\n                  })\n                  setText('')\n                }\n                setIsDirty()\n              }}\n              aria-describedby={ariaDescribedby}\n              autoComplete={autocompleteAttributes}\n              aria-required={element.required}\n            />\n          </div>\n          {bsbRecord && (\n            <BSBDisplay\n              bsbRecord={bsbRecord}\n              className=\"ob-bsb__display-desktop\"\n            />\n          )}\n          {hasCopyButton && (\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            readOnly={readOnly}\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n            lookupButtonConfig={element.lookupButton}\n            overrideRequiredMessage={undefined}\n          />\n        </div>\n        {bsbRecord && (\n          <BSBDisplay\n            bsbRecord={bsbRecord}\n            className=\"ob-bsb__display-mobile\"\n          />\n        )}\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage\n            message={errorMessage || validationMessage}\n          />\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nconst BSBDisplay = ({\n  bsbRecord,\n  className,\n}: {\n  bsbRecord: MiscTypes.BSBRecord\n  className: string\n}) => {\n  return (\n    <div className={`control ob-bsb__record-control ${className}`}>\n      <a className=\"button is-static ob-bsb__record-button\">\n        {bsbRecord.financialInstitutionMnemonic} - {bsbRecord.name}\n      </a>\n    </div>\n  )\n}\nexport default React.memo(FormElementBSB)\n"]}

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

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

package/dist/form-elements/FormElementBarcodeScanner.js

@@ -11,7 +11,7 @@ import OnLoading from '../components/renderer/OnLoading';
 import useElementAriaDescribedby from '../hooks/useElementAriaDescribedby';
 import MaterialIcon from '../components/MaterialIcon';
 import FormElementValidationMessage from '../components/renderer/FormElementValidationMessage';
-function FormElementBarcodeScanner({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, autocompleteAttributes, }) {
+function FormElementBarcodeScanner({ id, element, readOnly, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, autocompleteAttributes, }) {
     const ariaDescribedby = useElementAriaDescribedby(id, element);
     const [isCameraOpen, startBarcodeScanner, stopBarcodeScanner] = useBooleanState(false);
     const [error, setError] = React.useState(null);
@@ -54,7 +54,7 @@ function FormElementBarcodeScanner({ id, element, value, onChange, validationMes
                         ? element.restrictedBarcodeTypes
                         : undefined, onScan: handleScan, onClose: stopBarcodeScanner, "aria-describedby": ariaDescribedby })) : (_jsxs("div", { children: [_jsxs("div", { className: "field has-addons", children: [_jsxs("div", { className: "control is-expanded has-icons-right", children: [_jsx("input", { type: "text", placeholder: element.placeholderValue, id: id, name: element.name, className: "input ob-input cypress-barcode-scanner-control has-margin-bottom-8", 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: "document_scanner" }) })] }), !!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 })] }), _jsx("button", { type: "button", className: "button ob-button ob-button__open is-primary cypress-start-scan-barcode-button", disabled: element.readOnly, onClick: openBarcodeScanner, children: "Scan Barcode" })] })), 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: "document_scanner" }) })] }), !!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, { readOnly: readOnly, isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton, overrideRequiredMessage: undefined })] }), _jsx("button", { type: "button", className: "button ob-button ob-button__open is-primary cypress-start-scan-barcode-button", disabled: readOnly, onClick: openBarcodeScanner, children: "Scan Barcode" })] })), isDisplayingValidationMessage && (_jsx(FormElementValidationMessage, { message: validationMessage }))] }) }));
 }
 export default React.memo(FormElementBarcodeScanner);
 function BarcodeScannerSupported(props) {

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementBarcodeScanner.js","sourceRoot":"","sources":["../../src/form-elements/FormElementBarcodeScanner.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport {\n  Html5Qrcode,\n  CameraDevice,\n  Html5QrcodeSupportedFormats,\n  Html5QrcodeCameraScanConfig,\n} from 'html5-qrcode'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport useBooleanState from '../hooks/useBooleanState'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport useLookupNotification, {\n  LookupNotificationContext,\n} from '../hooks/useLookupNotification'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useLoadDataState from '../hooks/useLoadDataState'\nimport OnLoading from '../components/renderer/OnLoading'\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.BarcodeScannerElement\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementBarcodeScanner({\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 [isCameraOpen, startBarcodeScanner, stopBarcodeScanner] =\n    useBooleanState(false)\n  const [error, setError] = React.useState<Error | null>(null)\n  const { onLookup } = useLookupNotification(value)\n  const handleScan = React.useCallback(\n    (newValue: string | undefined) => {\n      setIsDirty()\n      onChange(element, {\n        value: newValue,\n      })\n      stopBarcodeScanner()\n      onLookup()\n    },\n    [element, onChange, onLookup, setIsDirty, stopBarcodeScanner],\n  )\n\n  const openBarcodeScanner = React.useCallback(() => {\n    if (window.cordova) {\n      setError(null)\n      // @ts-expect-error ???\n      window.cordova.plugins.barcodeScanner.scan(\n        // @ts-expect-error ???\n        (result) => {\n          if (!result.cancelled) {\n            handleScan(result.text)\n          }\n        },\n        // @ts-expect-error ???\n        (error) => {\n          setError(\n            new Error(\n              `An error has occurred: \"${error}\". Please click \"Cancel\" below to try again. If the problem persists, please contact support.`,\n            ),\n          )\n        },\n        {\n          showFlipCameraButton: true,\n          showTorchButton: true,\n        },\n      )\n    } else {\n      startBarcodeScanner()\n    }\n  }, [handleScan, startBarcodeScanner])\n\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-barcode-scanner-element\">\n      <FormElementLabelContainer\n        className=\"ob-barcode-scanner\"\n        element={element}\n        id={id}\n        required={element.required}\n      >\n        {error && (\n          <figure className=\"ob-figure\">\n            <div className=\"figure-content has-text-centered\">\n              <div>\n                <h4 className=\"title is-4\">Whoops...</h4>\n                <p>{error.message}</p>\n              </div>\n            </div>\n          </figure>\n        )}\n\n        {isCameraOpen ? (\n          <BarcodeScannerSupported\n            id={`${id}==BARCODE_SCANNER`}\n            restrictedBarcodeTypes={\n              element.restrictBarcodeTypes\n                ? element.restrictedBarcodeTypes\n                : undefined\n            }\n            onScan={handleScan}\n            onClose={stopBarcodeScanner}\n            aria-describedby={ariaDescribedby}\n          />\n        ) : (\n          <div>\n            <div className=\"field has-addons\">\n              <div className=\"control is-expanded has-icons-right\">\n                <input\n                  type=\"text\"\n                  placeholder={element.placeholderValue}\n                  id={id}\n                  name={element.name}\n                  className=\"input ob-input cypress-barcode-scanner-control has-margin-bottom-8\"\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\">\n                    document_scanner\n                  </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            <button\n              type=\"button\"\n              className=\"button ob-button ob-button__open is-primary cypress-start-scan-barcode-button\"\n              disabled={element.readOnly}\n              onClick={openBarcodeScanner}\n            >\n              Scan Barcode\n            </button>\n          </div>\n        )}\n\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementBarcodeScanner)\n\ntype BarcodeScannerProps = {\n  id: string\n  restrictedBarcodeTypes: FormTypes.BarcodeScannerElement['restrictedBarcodeTypes']\n  onScan: (barcode: string | undefined) => void\n  onClose: () => void\n  'aria-describedby'?: string\n}\n\nfunction BarcodeScannerSupported(props: BarcodeScannerProps) {\n  const { onClose } = props\n  if (!navigator.mediaDevices?.getUserMedia) {\n    return (\n      <BarcodeScannerFigure onClose={onClose}>\n        <BarcodeScannerError\n          title=\"Unsupported Device\"\n          message=\"Your device does not support accessing your camera.\"\n        />\n      </BarcodeScannerFigure>\n    )\n  }\n\n  return <BarcodeScannerCameraLoader {...props} />\n}\n\nfunction BarcodeScannerCameraLoader(props: BarcodeScannerProps) {\n  const { onClose } = props\n  const [state] = useLoadDataState(Html5Qrcode.getCameras)\n  switch (state.status) {\n    case 'LOADING': {\n      return (\n        <BarcodeScannerFigure onClose={onClose}>\n          <div className=\"figure-content has-text-centered\">\n            <OnLoading small />\n          </div>\n        </BarcodeScannerFigure>\n      )\n    }\n    case 'ERROR': {\n      return (\n        <BarcodeScannerFigure onClose={onClose}>\n          <BarcodeScannerError\n            title=\"Whoops...\"\n            message={\n              state.error.name === 'NotAllowedError'\n                ? 'Cannot scan for barcodes without granting the application access to the camera.'\n                : state.error.message\n            }\n          />\n        </BarcodeScannerFigure>\n      )\n    }\n  }\n\n  if (!state.result.length) {\n    return (\n      <BarcodeScannerFigure onClose={onClose}>\n        <BarcodeScannerError\n          title=\"No Cameras Available\"\n          message=\"Your device does not have an accessible camera.\"\n        />\n      </BarcodeScannerFigure>\n    )\n  }\n\n  return <BarcodeScanner {...props} cameraDevices={state.result} />\n}\n\nfunction BarcodeScanner({\n  id,\n  restrictedBarcodeTypes,\n  onScan,\n  onClose,\n  cameraDevices,\n  ...props\n}: BarcodeScannerProps & {\n  cameraDevices: CameraDevice[]\n}) {\n  const formatsToSupport = React.useMemo(() => {\n    return restrictedBarcodeTypes?.reduce<Html5QrcodeSupportedFormats[]>(\n      (memo, barcodeType) => {\n        const format =\n          Html5QrcodeSupportedFormats[\n            barcodeType as keyof typeof Html5QrcodeSupportedFormats\n          ]\n        if (format !== undefined) {\n          memo.push(format)\n        }\n        return memo\n      },\n      [],\n    )\n  }, [restrictedBarcodeTypes])\n\n  const [scannerState, setScannerState] = React.useState<\n    { state: 'loading' } | { state: 'ready' } | { state: 'error'; error: Error }\n  >({ state: 'loading' })\n\n  React.useEffect(() => {\n    setScannerState({ state: 'loading' })\n\n    const html5Qrcode = new Html5Qrcode(id, {\n      verbose: !!localStorage.getItem('BARCODE_SCANNER_VERBOSE'),\n      formatsToSupport: formatsToSupport?.length ? formatsToSupport : undefined,\n    })\n\n    const backFacingCamera = cameraDevices.find((device) =>\n      /back|rear|environment/i.test(device.label),\n    )\n    const preferredCamera = backFacingCamera ?? cameraDevices[0]\n    const scanConfig: Html5QrcodeCameraScanConfig = {\n      fps: 20,\n      aspectRatio: 1,\n      qrbox: (viewfinderWidth, viewfinderHeight) => {\n        const size = Math.min(\n          250,\n          Math.floor(Math.min(viewfinderWidth, viewfinderHeight) * 0.75),\n        )\n        return { width: size, height: size }\n      },\n    }\n\n    const onScanSuccess = (decodedText: string, decodedResult: unknown) => {\n      console.log('Barcode scanner decoded result:', decodedResult)\n      onScan(decodedText)\n    }\n    const onScanFailure = () => {\n      // do nothing and keep scanning\n    }\n\n    const abortController = new AbortController()\n\n    const begin = async () => {\n      try {\n        // Attempt to start with the back facing camera\n        await html5Qrcode.start(\n          { deviceId: preferredCamera.id },\n          scanConfig,\n          onScanSuccess,\n          onScanFailure,\n        )\n        if (abortController.signal.aborted) {\n          return\n        }\n        setScannerState({ state: 'ready' })\n      } catch (deviceIdError) {\n        if (abortController.signal.aborted) {\n          return\n        }\n        console.warn('Failed to start scanning with deviceId', deviceIdError)\n        try {\n          // If the back facing camera is not available, try to start in environment mode\n          await html5Qrcode.start(\n            { facingMode: 'environment' },\n            scanConfig,\n            onScanSuccess,\n            onScanFailure,\n          )\n          if (abortController.signal.aborted) {\n            return\n          }\n          setScannerState({ state: 'ready' })\n        } catch (facingModeError) {\n          if (abortController.signal.aborted) {\n            return\n          }\n          console.warn('Failed to start scanning', facingModeError)\n          setScannerState({\n            state: 'error',\n            error:\n              facingModeError instanceof Error\n                ? facingModeError\n                : new Error(String(facingModeError)),\n          })\n        }\n      }\n    }\n\n    begin()\n\n    return () => {\n      abortController.abort()\n      if (!html5Qrcode.isScanning) {\n        return\n      }\n      try {\n        html5Qrcode.stop().catch((error) => {\n          console.warn('Failed to stop barcode scanner', error)\n        })\n      } catch (error) {\n        console.warn('Failed to stop barcode scanner', error)\n      }\n    }\n  }, [cameraDevices, formatsToSupport, id, onScan])\n\n  return (\n    <BarcodeScannerFigure onClose={onClose}>\n      {scannerState.state === 'loading' && (\n        <div className=\"figure-content-absolute-center\">\n          <OnLoading small />\n        </div>\n      )}\n      {scannerState.state === 'error' && (\n        <BarcodeScannerError\n          title=\"Whoops...\"\n          message={scannerState.error.message}\n        />\n      )}\n      <div\n        id={id}\n        className=\"ob-figure__barcode-scanner\"\n        aria-describedby={props['aria-describedby']}\n      />\n    </BarcodeScannerFigure>\n  )\n}\n\nfunction BarcodeScannerFigure({\n  onClose,\n  children,\n}: {\n  onClose: () => void\n  children: React.ReactNode\n}) {\n  return (\n    <div>\n      <figure className=\"ob-figure\">{children}</figure>\n      <div className=\"buttons ob-buttons\">\n        <button\n          type=\"button\"\n          className=\"button ob-button ob-button__cancel is-light cypress-cancel-scan-barcode-button\"\n          onClick={onClose}\n        >\n          Cancel\n        </button>\n      </div>\n    </div>\n  )\n}\n\nfunction BarcodeScannerError({\n  title,\n  message,\n}: {\n  title: string\n  message: string\n}) {\n  return (\n    <div className=\"figure-content has-text-centered\" role=\"alert\">\n      <div>\n        <h4 className=\"title is-4\">{title}</h4>\n        <p className=\"has-margin-bottom-6\">{message}</p>\n        <p>\n          Please click <b>Cancel</b> below and type in the barcode value\n          manually.\n        </p>\n      </div>\n    </div>\n  )\n}\n"]}
+{"version":3,"file":"FormElementBarcodeScanner.js","sourceRoot":"","sources":["../../src/form-elements/FormElementBarcodeScanner.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport {\n  Html5Qrcode,\n  CameraDevice,\n  Html5QrcodeSupportedFormats,\n  Html5QrcodeCameraScanConfig,\n} from 'html5-qrcode'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport useBooleanState from '../hooks/useBooleanState'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport useLookupNotification, {\n  LookupNotificationContext,\n} from '../hooks/useLookupNotification'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useLoadDataState from '../hooks/useLoadDataState'\nimport OnLoading from '../components/renderer/OnLoading'\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.BarcodeScannerElement\n  readOnly: boolean\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementBarcodeScanner({\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 [isCameraOpen, startBarcodeScanner, stopBarcodeScanner] =\n    useBooleanState(false)\n  const [error, setError] = React.useState<Error | null>(null)\n  const { onLookup } = useLookupNotification(value)\n  const handleScan = React.useCallback(\n    (newValue: string | undefined) => {\n      setIsDirty()\n      onChange(element, {\n        value: newValue,\n      })\n      stopBarcodeScanner()\n      onLookup()\n    },\n    [element, onChange, onLookup, setIsDirty, stopBarcodeScanner],\n  )\n\n  const openBarcodeScanner = React.useCallback(() => {\n    if (window.cordova) {\n      setError(null)\n      // @ts-expect-error ???\n      window.cordova.plugins.barcodeScanner.scan(\n        // @ts-expect-error ???\n        (result) => {\n          if (!result.cancelled) {\n            handleScan(result.text)\n          }\n        },\n        // @ts-expect-error ???\n        (error) => {\n          setError(\n            new Error(\n              `An error has occurred: \"${error}\". Please click \"Cancel\" below to try again. If the problem persists, please contact support.`,\n            ),\n          )\n        },\n        {\n          showFlipCameraButton: true,\n          showTorchButton: true,\n        },\n      )\n    } else {\n      startBarcodeScanner()\n    }\n  }, [handleScan, startBarcodeScanner])\n\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-barcode-scanner-element\">\n      <FormElementLabelContainer\n        className=\"ob-barcode-scanner\"\n        element={element}\n        id={id}\n        required={element.required}\n      >\n        {error && (\n          <figure className=\"ob-figure\">\n            <div className=\"figure-content has-text-centered\">\n              <div>\n                <h4 className=\"title is-4\">Whoops...</h4>\n                <p>{error.message}</p>\n              </div>\n            </div>\n          </figure>\n        )}\n\n        {isCameraOpen ? (\n          <BarcodeScannerSupported\n            id={`${id}==BARCODE_SCANNER`}\n            restrictedBarcodeTypes={\n              element.restrictBarcodeTypes\n                ? element.restrictedBarcodeTypes\n                : undefined\n            }\n            onScan={handleScan}\n            onClose={stopBarcodeScanner}\n            aria-describedby={ariaDescribedby}\n          />\n        ) : (\n          <div>\n            <div className=\"field has-addons\">\n              <div className=\"control is-expanded has-icons-right\">\n                <input\n                  type=\"text\"\n                  placeholder={element.placeholderValue}\n                  id={id}\n                  name={element.name}\n                  className=\"input ob-input cypress-barcode-scanner-control has-margin-bottom-8\"\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\">\n                    document_scanner\n                  </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                readOnly={readOnly}\n                isInputButton\n                value={value}\n                validationMessage={validationMessage}\n                lookupButtonConfig={element.lookupButton}\n                overrideRequiredMessage={undefined}\n              />\n            </div>\n\n            <button\n              type=\"button\"\n              className=\"button ob-button ob-button__open is-primary cypress-start-scan-barcode-button\"\n              disabled={readOnly}\n              onClick={openBarcodeScanner}\n            >\n              Scan Barcode\n            </button>\n          </div>\n        )}\n\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementBarcodeScanner)\n\ntype BarcodeScannerProps = {\n  id: string\n  restrictedBarcodeTypes: FormTypes.BarcodeScannerElement['restrictedBarcodeTypes']\n  onScan: (barcode: string | undefined) => void\n  onClose: () => void\n  'aria-describedby'?: string\n}\n\nfunction BarcodeScannerSupported(props: BarcodeScannerProps) {\n  const { onClose } = props\n  if (!navigator.mediaDevices?.getUserMedia) {\n    return (\n      <BarcodeScannerFigure onClose={onClose}>\n        <BarcodeScannerError\n          title=\"Unsupported Device\"\n          message=\"Your device does not support accessing your camera.\"\n        />\n      </BarcodeScannerFigure>\n    )\n  }\n\n  return <BarcodeScannerCameraLoader {...props} />\n}\n\nfunction BarcodeScannerCameraLoader(props: BarcodeScannerProps) {\n  const { onClose } = props\n  const [state] = useLoadDataState(Html5Qrcode.getCameras)\n  switch (state.status) {\n    case 'LOADING': {\n      return (\n        <BarcodeScannerFigure onClose={onClose}>\n          <div className=\"figure-content has-text-centered\">\n            <OnLoading small />\n          </div>\n        </BarcodeScannerFigure>\n      )\n    }\n    case 'ERROR': {\n      return (\n        <BarcodeScannerFigure onClose={onClose}>\n          <BarcodeScannerError\n            title=\"Whoops...\"\n            message={\n              state.error.name === 'NotAllowedError'\n                ? 'Cannot scan for barcodes without granting the application access to the camera.'\n                : state.error.message\n            }\n          />\n        </BarcodeScannerFigure>\n      )\n    }\n  }\n\n  if (!state.result.length) {\n    return (\n      <BarcodeScannerFigure onClose={onClose}>\n        <BarcodeScannerError\n          title=\"No Cameras Available\"\n          message=\"Your device does not have an accessible camera.\"\n        />\n      </BarcodeScannerFigure>\n    )\n  }\n\n  return <BarcodeScanner {...props} cameraDevices={state.result} />\n}\n\nfunction BarcodeScanner({\n  id,\n  restrictedBarcodeTypes,\n  onScan,\n  onClose,\n  cameraDevices,\n  ...props\n}: BarcodeScannerProps & {\n  cameraDevices: CameraDevice[]\n}) {\n  const formatsToSupport = React.useMemo(() => {\n    return restrictedBarcodeTypes?.reduce<Html5QrcodeSupportedFormats[]>(\n      (memo, barcodeType) => {\n        const format =\n          Html5QrcodeSupportedFormats[\n            barcodeType as keyof typeof Html5QrcodeSupportedFormats\n          ]\n        if (format !== undefined) {\n          memo.push(format)\n        }\n        return memo\n      },\n      [],\n    )\n  }, [restrictedBarcodeTypes])\n\n  const [scannerState, setScannerState] = React.useState<\n    { state: 'loading' } | { state: 'ready' } | { state: 'error'; error: Error }\n  >({ state: 'loading' })\n\n  React.useEffect(() => {\n    setScannerState({ state: 'loading' })\n\n    const html5Qrcode = new Html5Qrcode(id, {\n      verbose: !!localStorage.getItem('BARCODE_SCANNER_VERBOSE'),\n      formatsToSupport: formatsToSupport?.length ? formatsToSupport : undefined,\n    })\n\n    const backFacingCamera = cameraDevices.find((device) =>\n      /back|rear|environment/i.test(device.label),\n    )\n    const preferredCamera = backFacingCamera ?? cameraDevices[0]\n    const scanConfig: Html5QrcodeCameraScanConfig = {\n      fps: 20,\n      aspectRatio: 1,\n      qrbox: (viewfinderWidth, viewfinderHeight) => {\n        const size = Math.min(\n          250,\n          Math.floor(Math.min(viewfinderWidth, viewfinderHeight) * 0.75),\n        )\n        return { width: size, height: size }\n      },\n    }\n\n    const onScanSuccess = (decodedText: string, decodedResult: unknown) => {\n      console.log('Barcode scanner decoded result:', decodedResult)\n      onScan(decodedText)\n    }\n    const onScanFailure = () => {\n      // do nothing and keep scanning\n    }\n\n    const abortController = new AbortController()\n\n    const begin = async () => {\n      try {\n        // Attempt to start with the back facing camera\n        await html5Qrcode.start(\n          { deviceId: preferredCamera.id },\n          scanConfig,\n          onScanSuccess,\n          onScanFailure,\n        )\n        if (abortController.signal.aborted) {\n          return\n        }\n        setScannerState({ state: 'ready' })\n      } catch (deviceIdError) {\n        if (abortController.signal.aborted) {\n          return\n        }\n        console.warn('Failed to start scanning with deviceId', deviceIdError)\n        try {\n          // If the back facing camera is not available, try to start in environment mode\n          await html5Qrcode.start(\n            { facingMode: 'environment' },\n            scanConfig,\n            onScanSuccess,\n            onScanFailure,\n          )\n          if (abortController.signal.aborted) {\n            return\n          }\n          setScannerState({ state: 'ready' })\n        } catch (facingModeError) {\n          if (abortController.signal.aborted) {\n            return\n          }\n          console.warn('Failed to start scanning', facingModeError)\n          setScannerState({\n            state: 'error',\n            error:\n              facingModeError instanceof Error\n                ? facingModeError\n                : new Error(String(facingModeError)),\n          })\n        }\n      }\n    }\n\n    begin()\n\n    return () => {\n      abortController.abort()\n      if (!html5Qrcode.isScanning) {\n        return\n      }\n      try {\n        html5Qrcode.stop().catch((error) => {\n          console.warn('Failed to stop barcode scanner', error)\n        })\n      } catch (error) {\n        console.warn('Failed to stop barcode scanner', error)\n      }\n    }\n  }, [cameraDevices, formatsToSupport, id, onScan])\n\n  return (\n    <BarcodeScannerFigure onClose={onClose}>\n      {scannerState.state === 'loading' && (\n        <div className=\"figure-content-absolute-center\">\n          <OnLoading small />\n        </div>\n      )}\n      {scannerState.state === 'error' && (\n        <BarcodeScannerError\n          title=\"Whoops...\"\n          message={scannerState.error.message}\n        />\n      )}\n      <div\n        id={id}\n        className=\"ob-figure__barcode-scanner\"\n        aria-describedby={props['aria-describedby']}\n      />\n    </BarcodeScannerFigure>\n  )\n}\n\nfunction BarcodeScannerFigure({\n  onClose,\n  children,\n}: {\n  onClose: () => void\n  children: React.ReactNode\n}) {\n  return (\n    <div>\n      <figure className=\"ob-figure\">{children}</figure>\n      <div className=\"buttons ob-buttons\">\n        <button\n          type=\"button\"\n          className=\"button ob-button ob-button__cancel is-light cypress-cancel-scan-barcode-button\"\n          onClick={onClose}\n        >\n          Cancel\n        </button>\n      </div>\n    </div>\n  )\n}\n\nfunction BarcodeScannerError({\n  title,\n  message,\n}: {\n  title: string\n  message: string\n}) {\n  return (\n    <div className=\"figure-content has-text-centered\" role=\"alert\">\n      <div>\n        <h4 className=\"title is-4\">{title}</h4>\n        <p className=\"has-margin-bottom-6\">{message}</p>\n        <p>\n          Please click <b>Cancel</b> below and type in the barcode value\n          manually.\n        </p>\n      </div>\n    </div>\n  )\n}\n"]}

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

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

package/dist/form-elements/FormElementBoolean.js

@@ -5,7 +5,7 @@ import { Checkbox, Switch } from '@mui/material';
 import { LookupNotificationContext } from '../hooks/useLookupNotification';
 import useElementAriaDescribedby from '../hooks/useElementAriaDescribedby';
 import FormElementValidationMessage from '../components/renderer/FormElementValidationMessage';
-function FormElementBoolean({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }) {
+function FormElementBoolean({ id, element, readOnly, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }) {
     const ariaDescribedby = useElementAriaDescribedby(id, element);
     const { isLookingUp } = React.useContext(LookupNotificationContext);
     const isDisplayingValidationMessage = (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp;
@@ -16,12 +16,12 @@ function FormElementBoolean({ id, element, value, onChange, validationMessage, d
                     onChange(element, {
                         value: e.target.checked,
                     });
-                }, disabled: element.readOnly, edge: "start", inputProps: {
+                }, disabled: readOnly, edge: "start", inputProps: {
                     'aria-describedby': ariaDescribedby,
                     'aria-required': element.required,
                 }, onBlur: setIsDirty })) : (_jsx(Switch, { id: id, name: element.name, color: "primary", edge: "start", className: "ob-boolean__input cypress-boolean-control", classes: {
                     checked: 'ob-boolean__input-checked',
-                }, checked: !!value, disabled: element.readOnly, onChange: (e) => {
+                }, checked: !!value, disabled: readOnly, onChange: (e) => {
                     setIsDirty();
                     onChange(element, {
                         value: e.target.checked,

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementBoolean.js","sourceRoot":"","sources":["../../src/form-elements/FormElementBoolean.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AACxF,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAA;AAC1E,OAAO,yBAAyB,MAAM,oCAAoC,CAAA;AAC1E,OAAO,4BAA4B,MAAM,qDAAqD,CAAA;AAW9F,SAAS,kBAAkB,CAAC,EAC1B,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,OAAO,EACP,UAAU,GACJ;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,OAAO,CACL,cAAK,SAAS,EAAC,yBAAyB,YACtC,KAAC,yBAAyB,IACxB,SAAS,EAAC,YAAY,EACtB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,OAAO,EACL,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAC1B,KAAC,QAAQ,IACP,KAAK,EAAC,SAAS,EACf,OAAO,EAAE;oBACP,OAAO,EAAE,oCAAoC;iBAC9C,EACD,SAAS,EAAC,qDAAqD,EAC/D,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,CAAC,CAAC,KAAK,EAChB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;oBACd,UAAU,EAAE,CAAA;oBACZ,QAAQ,CAAC,OAAO,EAAE;wBAChB,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO;qBACxB,CAAC,CAAA;gBACJ,CAAC,EACD,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE;oBACV,kBAAkB,EAAE,eAAe;oBACnC,eAAe,EAAE,OAAO,CAAC,QAAQ;iBAClC,EACD,MAAM,EAAE,UAAU,GAClB,CACH,CAAC,CAAC,CAAC,CACF,KAAC,MAAM,IACL,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,2CAA2C,EACrD,OAAO,EAAE;oBACP,OAAO,EAAE,2BAA2B;iBACrC,EACD,OAAO,EAAE,CAAC,CAAC,KAAK,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;oBACd,UAAU,EAAE,CAAA;oBACZ,QAAQ,CAAC,OAAO,EAAE;wBAChB,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO;qBACxB,CAAC,CAAA;gBACJ,CAAC,sBACiB,eAAe,EACjC,MAAM,EAAE,UAAU,GAClB,CACH,YAGF,6BAA6B,IAAI,CAChC,KAAC,4BAA4B,IAAC,OAAO,EAAE,iBAAiB,GAAI,CAC7D,GACyB,GACxB,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { Checkbox, Switch } from '@mui/material'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n  id: string\n  element: FormTypes.BooleanElement\n  value: unknown\n  onChange: FormElementValueChangeHandler<boolean>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementBoolean({\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  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  return (\n    <div className=\"cypress-boolean-element\">\n      <FormElementLabelContainer\n        className=\"ob-boolean\"\n        id={id}\n        element={element}\n        required={element.required}\n        leading={\n          element.displayAsCheckbox ? (\n            <Checkbox\n              color=\"primary\"\n              classes={{\n                checked: 'ob-boolean-checkbox__input-checked',\n              }}\n              className=\"ob-boolean-checkbox__input cypress-checkbox-control\"\n              id={id}\n              checked={!!value}\n              onChange={(e) => {\n                setIsDirty()\n                onChange(element, {\n                  value: e.target.checked,\n                })\n              }}\n              disabled={element.readOnly}\n              edge=\"start\"\n              inputProps={{\n                'aria-describedby': ariaDescribedby,\n                'aria-required': element.required,\n              }}\n              onBlur={setIsDirty}\n            />\n          ) : (\n            <Switch\n              id={id}\n              name={element.name}\n              color=\"primary\"\n              edge=\"start\"\n              className=\"ob-boolean__input cypress-boolean-control\"\n              classes={{\n                checked: 'ob-boolean__input-checked',\n              }}\n              checked={!!value}\n              disabled={element.readOnly}\n              onChange={(e) => {\n                setIsDirty()\n                onChange(element, {\n                  value: e.target.checked,\n                })\n              }}\n              aria-describedby={ariaDescribedby}\n              onBlur={setIsDirty}\n            />\n          )\n        }\n      >\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementBoolean)\n"]}
+{"version":3,"file":"FormElementBoolean.js","sourceRoot":"","sources":["../../src/form-elements/FormElementBoolean.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AACxF,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAA;AAC1E,OAAO,yBAAyB,MAAM,oCAAoC,CAAA;AAC1E,OAAO,4BAA4B,MAAM,qDAAqD,CAAA;AAY9F,SAAS,kBAAkB,CAAC,EAC1B,EAAE,EACF,OAAO,EACP,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,OAAO,EACP,UAAU,GACJ;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,OAAO,CACL,cAAK,SAAS,EAAC,yBAAyB,YACtC,KAAC,yBAAyB,IACxB,SAAS,EAAC,YAAY,EACtB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,OAAO,EACL,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAC1B,KAAC,QAAQ,IACP,KAAK,EAAC,SAAS,EACf,OAAO,EAAE;oBACP,OAAO,EAAE,oCAAoC;iBAC9C,EACD,SAAS,EAAC,qDAAqD,EAC/D,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,CAAC,CAAC,KAAK,EAChB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;oBACd,UAAU,EAAE,CAAA;oBACZ,QAAQ,CAAC,OAAO,EAAE;wBAChB,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO;qBACxB,CAAC,CAAA;gBACJ,CAAC,EACD,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE;oBACV,kBAAkB,EAAE,eAAe;oBACnC,eAAe,EAAE,OAAO,CAAC,QAAQ;iBAClC,EACD,MAAM,EAAE,UAAU,GAClB,CACH,CAAC,CAAC,CAAC,CACF,KAAC,MAAM,IACL,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,2CAA2C,EACrD,OAAO,EAAE;oBACP,OAAO,EAAE,2BAA2B;iBACrC,EACD,OAAO,EAAE,CAAC,CAAC,KAAK,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;oBACd,UAAU,EAAE,CAAA;oBACZ,QAAQ,CAAC,OAAO,EAAE;wBAChB,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO;qBACxB,CAAC,CAAA;gBACJ,CAAC,sBACiB,eAAe,EACjC,MAAM,EAAE,UAAU,GAClB,CACH,YAGF,6BAA6B,IAAI,CAChC,KAAC,4BAA4B,IAAC,OAAO,EAAE,iBAAiB,GAAI,CAC7D,GACyB,GACxB,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { Checkbox, Switch } from '@mui/material'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n  id: string\n  element: FormTypes.BooleanElement\n  readOnly: boolean\n  value: unknown\n  onChange: FormElementValueChangeHandler<boolean>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementBoolean({\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  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  return (\n    <div className=\"cypress-boolean-element\">\n      <FormElementLabelContainer\n        className=\"ob-boolean\"\n        id={id}\n        element={element}\n        required={element.required}\n        leading={\n          element.displayAsCheckbox ? (\n            <Checkbox\n              color=\"primary\"\n              classes={{\n                checked: 'ob-boolean-checkbox__input-checked',\n              }}\n              className=\"ob-boolean-checkbox__input cypress-checkbox-control\"\n              id={id}\n              checked={!!value}\n              onChange={(e) => {\n                setIsDirty()\n                onChange(element, {\n                  value: e.target.checked,\n                })\n              }}\n              disabled={readOnly}\n              edge=\"start\"\n              inputProps={{\n                'aria-describedby': ariaDescribedby,\n                'aria-required': element.required,\n              }}\n              onBlur={setIsDirty}\n            />\n          ) : (\n            <Switch\n              id={id}\n              name={element.name}\n              color=\"primary\"\n              edge=\"start\"\n              className=\"ob-boolean__input cypress-boolean-control\"\n              classes={{\n                checked: 'ob-boolean__input-checked',\n              }}\n              checked={!!value}\n              disabled={readOnly}\n              onChange={(e) => {\n                setIsDirty()\n                onChange(element, {\n                  value: e.target.checked,\n                })\n              }}\n              aria-describedby={ariaDescribedby}\n              onBlur={setIsDirty}\n            />\n          )\n        }\n      >\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementBoolean)\n"]}

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

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