@oneblink/apps-react 5.12.0-beta.1 → 5.12.0-beta.10

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 '@oneblink/apps/dist/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'\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} & 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}: AutocompleteFilterProps) {\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    //useFormElementOptions expects the first arg to be the element\n    (element: FormTypes.FormElement, newValue: unknown) => onChange(newValue),\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          />\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}: AutocompleteFetchProps) {\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        />\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\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 '@oneblink/apps/dist/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} & 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}: 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    //useFormElementOptions expects the first arg to be the element\n    (element: FormTypes.FormElement, newValue: unknown) => onChange(newValue),\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          />\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}: 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        />\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\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.js

@@ -6,7 +6,9 @@ import LookupButton from '../components/renderer/LookupButton';
 import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
 import { formService } from '@oneblink/apps';
 import { LookupNotificationContext } from '../hooks/useLookupNotification';
+import useElementAriaDescribedby from '../hooks/useElementAriaDescribedby';
 function FormElementBSB({ id, formId, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }) {
+    const ariaDescribedby = useElementAriaDescribedby(id, element);
     const [text, setText] = React.useState(typeof value === 'string' ? value : '');
     const isValidFormat = /\d{3}-\d{3}/.test(text);
     const [{ isLoading, errorMessage, bsbRecord }, setState] = React.useState({
@@ -93,7 +95,7 @@ function FormElementBSB({ id, formId, element, value, onChange, validationMessag
                                 });
                             }
                             setIsDirty();
-                        } })),
+                        }, "aria-describedby": ariaDescribedby })),
                 bsbRecord && (React.createElement("div", { className: "control ob-bsb__record-control" },
                     React.createElement("a", { className: "button is-static ob-bsb__record-button" },
                         bsbRecord.financialInstitutionMnemonic,

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 '@oneblink/apps'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\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} & IsDirtyProps\n\nfunction FormElementBSB({\n  id,\n  formId,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const [text, setText] = React.useState(typeof value === 'string' ? value : '')\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  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 className=\"field has-addons\">\n          <div\n            className={clsx('control is-expanded', {\n              'is-loading': isLoading,\n            })}\n          >\n            <InputMask\n              mask=\"999-999\"\n              maskChar=\"x\"\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              onBlur={() => {\n                if (text === 'xxx-xxx') {\n                  onChange(element, {\n                    value: undefined,\n                  })\n                }\n                setIsDirty()\n              }}\n            />\n          </div>\n          {bsbRecord && (\n            <div className=\"control ob-bsb__record-control\">\n              <a className=\"button is-static ob-bsb__record-button\">\n                {bsbRecord.financialInstitutionMnemonic} - {bsbRecord.name}\n              </a>\n            </div>\n          )}\n          {!!element.readOnly && !!value && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n            lookupButtonConfig={element.lookupButton}\n          />\n        </div>\n        {isDisplayingValidationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {errorMessage || validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\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 '@oneblink/apps'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\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} & IsDirtyProps\n\nfunction FormElementBSB({\n  id,\n  formId,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const [text, setText] = React.useState(typeof value === 'string' ? value : '')\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  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 className=\"field has-addons\">\n          <div\n            className={clsx('control is-expanded', {\n              'is-loading': isLoading,\n            })}\n          >\n            <InputMask\n              mask=\"999-999\"\n              maskChar=\"x\"\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              onBlur={() => {\n                if (text === 'xxx-xxx') {\n                  onChange(element, {\n                    value: undefined,\n                  })\n                }\n                setIsDirty()\n              }}\n              aria-describedby={ariaDescribedby}\n            />\n          </div>\n          {bsbRecord && (\n            <div className=\"control ob-bsb__record-control\">\n              <a className=\"button is-static ob-bsb__record-button\">\n                {bsbRecord.financialInstitutionMnemonic} - {bsbRecord.name}\n              </a>\n            </div>\n          )}\n          {!!element.readOnly && !!value && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n            lookupButtonConfig={element.lookupButton}\n          />\n        </div>\n        {isDisplayingValidationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {errorMessage || validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementBSB)\n"]}

package/dist/form-elements/FormElementBarcodeScanner.js

@@ -7,7 +7,9 @@ import FormElementLabelContainer from '../components/renderer/FormElementLabelCo
 import useLookupNotification, { LookupNotificationContext, } from '../hooks/useLookupNotification';
 import useLoadDataState from '../hooks/useLoadDataState';
 import OnLoading from '../components/renderer/OnLoading';
+import useElementAriaDescribedby from '../hooks/useElementAriaDescribedby';
 function FormElementBarcodeScanner({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }) {
+    const ariaDescribedby = useElementAriaDescribedby(id, element);
     const [isCameraOpen, startBarcodeScanner, stopBarcodeScanner] = useBooleanState(false);
     const [error, setError] = React.useState(null);
     const { onLookup } = useLookupNotification(value);
@@ -54,12 +56,12 @@ function FormElementBarcodeScanner({ id, element, value, onChange, validationMes
                         React.createElement("p", null, error.message))))),
             isCameraOpen ? (React.createElement(BarcodeScannerSupported, { id: `${id}==BARCODE_SCANNER`, restrictedBarcodeTypes: element.restrictBarcodeTypes
                     ? element.restrictedBarcodeTypes
-                    : undefined, onScan: handleScan, onClose: stopBarcodeScanner })) : (React.createElement("div", null,
+                    : undefined, onScan: handleScan, onClose: stopBarcodeScanner, "aria-describedby": ariaDescribedby })) : (React.createElement("div", null,
                 React.createElement("div", { className: "field has-addons" },
                     React.createElement("div", { className: "control is-expanded has-icons-right" },
                         React.createElement("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 }),
+                            }), required: element.required, disabled: element.readOnly, onBlur: setIsDirty, "aria-describedby": ariaDescribedby }),
                         React.createElement("span", { className: "ob-input-icon icon is-small is-right" },
                             React.createElement("i", { className: "material-icons is-size-5" }, "document_scanner"))),
                     !!element.readOnly && !!value && (React.createElement("div", { className: "control" },
@@ -101,7 +103,7 @@ function BarcodeScannerCameraLoader(props) {
     }
     return React.createElement(BarcodeScanner, { ...props, cameraDevices: state.result });
 }
-function BarcodeScanner({ id, restrictedBarcodeTypes, onScan, onClose, }) {
+function BarcodeScanner({ id, restrictedBarcodeTypes, onScan, onClose, ...props }) {
     const formatsToSupport = React.useMemo(() => {
         return restrictedBarcodeTypes === null || restrictedBarcodeTypes === void 0 ? void 0 : restrictedBarcodeTypes.reduce((memo, barcodeType) => {
             const format = Html5QrcodeSupportedFormats[barcodeType];
@@ -143,7 +145,7 @@ function BarcodeScanner({ id, restrictedBarcodeTypes, onScan, onClose, }) {
     return (React.createElement(BarcodeScannerFigure, { onClose: onClose },
         React.createElement("div", { className: "figure-content-absolute-center" },
             React.createElement(OnLoading, { small: true })),
-        React.createElement("div", { id: id, className: "ob-figure__barcode-scanner" })));
+        React.createElement("div", { id: id, className: "ob-figure__barcode-scanner", "aria-describedby": props['aria-describedby'] })));
 }
 function BarcodeScannerFigure({ onClose, children, }) {
     return (React.createElement("div", null,

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} 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'\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} & IsDirtyProps\n\nfunction FormElementBarcodeScanner({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\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          />\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                />\n                <span className=\"ob-input-icon icon is-small is-right\">\n                  <i className=\"material-icons is-size-5\">document_scanner</i>\n                </span>\n              </div>\n              {!!element.readOnly && !!value && (\n                <div className=\"control\">\n                  <CopyToClipboardButton\n                    className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                    text={text}\n                  />\n                </div>\n              )}\n              <LookupButton\n                isInputButton\n                value={value}\n                validationMessage={validationMessage}\n                lookupButtonConfig={element.lookupButton}\n              />\n            </div>\n\n            <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          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementBarcodeScanner)\n\ntype BarcodeScannerProps = {\n  id: string\n  restrictedBarcodeTypes: FormTypes.BarcodeScannerElement['restrictedBarcodeTypes']\n  onScan: (barcode: string | undefined) => void\n  onClose: () => void\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}: 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  React.useEffect(() => {\n    const html5Qrcode = new Html5Qrcode(id, {\n      verbose: !!localStorage.getItem('BARCODE_SCANNER_VERBOSE'),\n      formatsToSupport: formatsToSupport?.length ? formatsToSupport : undefined,\n    })\n\n    html5Qrcode\n      .start(\n        {\n          facingMode: 'environment',\n        },\n        {\n          fps: 20,\n          qrbox: {\n            width: 400,\n            height: 400,\n          },\n        },\n        function onScanSuccess(decodedText, decodedResult) {\n          console.log('Barcode scanner decoded result:', decodedResult)\n          onScan(decodedText)\n        },\n        function onScanFailure() {\n          // do nothing and keep scanning\n        },\n      )\n      .catch((error) => {\n        console.warn('Failed to start scanning', error)\n      })\n\n    return () => {\n      html5Qrcode.stop().catch((error) => {\n        console.warn('Failed to stop barcode scanner', error)\n      })\n    }\n  }, [formatsToSupport, id, onScan])\n\n  return (\n    <BarcodeScannerFigure onClose={onClose}>\n      <div className=\"figure-content-absolute-center\">\n        <OnLoading small />\n      </div>\n      <div id={id} className=\"ob-figure__barcode-scanner\" />\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\">\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} 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'\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} & IsDirtyProps\n\nfunction FormElementBarcodeScanner({\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 [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                />\n                <span className=\"ob-input-icon icon is-small is-right\">\n                  <i className=\"material-icons is-size-5\">document_scanner</i>\n                </span>\n              </div>\n              {!!element.readOnly && !!value && (\n                <div className=\"control\">\n                  <CopyToClipboardButton\n                    className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                    text={text}\n                  />\n                </div>\n              )}\n              <LookupButton\n                isInputButton\n                value={value}\n                validationMessage={validationMessage}\n                lookupButtonConfig={element.lookupButton}\n              />\n            </div>\n\n            <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          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(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  ...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  React.useEffect(() => {\n    const html5Qrcode = new Html5Qrcode(id, {\n      verbose: !!localStorage.getItem('BARCODE_SCANNER_VERBOSE'),\n      formatsToSupport: formatsToSupport?.length ? formatsToSupport : undefined,\n    })\n\n    html5Qrcode\n      .start(\n        {\n          facingMode: 'environment',\n        },\n        {\n          fps: 20,\n          qrbox: {\n            width: 400,\n            height: 400,\n          },\n        },\n        function onScanSuccess(decodedText, decodedResult) {\n          console.log('Barcode scanner decoded result:', decodedResult)\n          onScan(decodedText)\n        },\n        function onScanFailure() {\n          // do nothing and keep scanning\n        },\n      )\n      .catch((error) => {\n        console.warn('Failed to start scanning', error)\n      })\n\n    return () => {\n      html5Qrcode.stop().catch((error) => {\n        console.warn('Failed to stop barcode scanner', error)\n      })\n    }\n  }, [formatsToSupport, id, onScan])\n\n  return (\n    <BarcodeScannerFigure onClose={onClose}>\n      <div className=\"figure-content-absolute-center\">\n        <OnLoading small />\n      </div>\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\">\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.js

@@ -2,7 +2,9 @@ import * as React from 'react';
 import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
 import { Switch } from '@mui/material';
 import { LookupNotificationContext } from '../hooks/useLookupNotification';
+import useElementAriaDescribedby from '../hooks/useElementAriaDescribedby';
 function FormElementBoolean({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }) {
+    const ariaDescribedby = useElementAriaDescribedby(id, element);
     const { isLookingUp } = React.useContext(LookupNotificationContext);
     const isDisplayingValidationMessage = (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp;
     return (React.createElement("div", { className: "cypress-boolean-element" },
@@ -13,7 +15,7 @@ function FormElementBoolean({ id, element, value, onChange, validationMessage, d
                     onChange(element, {
                         value: e.target.checked,
                     });
-                } }) }, isDisplayingValidationMessage && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
+                }, "aria-describedby": ariaDescribedby }) }, isDisplayingValidationMessage && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
             React.createElement("div", { className: "has-text-danger ob-error__text cypress-validation-message" }, validationMessage))))));
 }
 export default React.memo(FormElementBoolean);

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,MAAM,EAAE,MAAM,eAAe,CAAA;AAEtC,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAA;AAW1E,SAAS,kBAAkB,CAAC,EAC1B,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,OAAO,EACP,UAAU,GACJ;IACN,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,6BAAK,SAAS,EAAC,yBAAyB;QACtC,oBAAC,yBAAyB,IACxB,SAAS,EAAC,YAAY,EACtB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,OAAO,EACL,oBAAC,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,GACD,IAGH,6BAA6B,IAAI,CAChC,6BAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,kBAAkB;YAC5C,6BAAK,SAAS,EAAC,2DAA2D,IACvE,iBAAiB,CACd,CACF,CACP,CACyB,CACxB,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 { Switch } from '@mui/material'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\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 { 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          <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          />\n        }\n      >\n        {isDisplayingValidationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(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,MAAM,EAAE,MAAM,eAAe,CAAA;AAEtC,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAA;AAC1E,OAAO,yBAAyB,MAAM,oCAAoC,CAAA;AAW1E,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,6BAAK,SAAS,EAAC,yBAAyB;QACtC,oBAAC,yBAAyB,IACxB,SAAS,EAAC,YAAY,EACtB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,OAAO,EACL,oBAAC,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,GACjC,IAGH,6BAA6B,IAAI,CAChC,6BAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,kBAAkB;YAC5C,6BAAK,SAAS,EAAC,2DAA2D,IACvE,iBAAiB,CACd,CACF,CACP,CACyB,CACxB,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 { Switch } from '@mui/material'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\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          <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          />\n        }\n      >\n        {isDisplayingValidationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementBoolean)\n"]}

package/dist/form-elements/FormElementCamera.js

@@ -12,7 +12,9 @@ import AttachmentStatus from '../components/renderer/attachments/AttachmentStatu
 import { canvasToBlob, urlToBlobAsync } from '../services/blob-utils';
 import ImagePreviewUnavailable from '../components/renderer/attachments/ImagePreviewUnavailable';
 import ProgressBar from '../components/renderer/attachments/ProgressBar';
+import useElementAriaDescribedby from '../hooks/useElementAriaDescribedby';
 function FormElementCamera({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }) {
+    const ariaDescribedby = useElementAriaDescribedby(id, element);
     const [{ cameraError, isLoading }, setState] = React.useState({
         isLoading: false,
     });
@@ -207,7 +209,7 @@ function FormElementCamera({ id, element, value, onChange, validationMessage, di
                     canDownload && (React.createElement("button", { type: "button", className: "button ob-button ob-button__download is-primary cypress-download-file-button", onClick: handleDownload },
                         React.createElement("span", { className: "icon" },
                             React.createElement("i", { className: "material-icons" }, "cloud_download")),
-                        React.createElement("span", null, "\u00A0Download"))))) : (React.createElement("button", { type: "button", className: "button ob-button ob-button__open is-primary cypress-open-camera", onClick: openCamera, disabled: element.readOnly || isLoading }, "Open Camera")))),
+                        React.createElement("span", null, "\u00A0Download"))))) : (React.createElement("button", { type: "button", className: "button ob-button ob-button__open is-primary cypress-open-camera", onClick: openCamera, disabled: element.readOnly || isLoading, "aria-describedby": ariaDescribedby }, "Open Camera")))),
             (isDirty || displayValidationMessage) && !!validationMessage && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
                 React.createElement("div", { className: "has-text-danger ob-error__text cypress-validation-message" }, validationMessage)))),
         isAnnotating && imageUrl && (React.createElement(AnnotationModal, { imageSrc: imageUrl, onClose: clearIsAnnotating, onSave: handleSaveAnnotation })),

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementCamera.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCamera.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\n\nimport useBooleanState from '../hooks/useBooleanState'\nimport downloadAttachment, {\n  downloadFileLegacy,\n} from '../services/download-file'\nimport OnLoading from '../components/renderer/OnLoading'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport drawTimestampOnCanvas from '../services/drawTimestampOnCanvas'\nimport { FormElementBinaryStorageValue } from '../types/attachments'\nimport useAttachment from '../hooks/attachments/useAttachment'\nimport AnnotationModal from '../components/renderer/AnnotationModal'\nimport Modal from '../components/renderer/Modal'\nimport {\n  checkIfContentTypeIsImage,\n  prepareNewAttachment,\n  correctFileOrientation,\n} from '../services/attachments'\nimport AttachmentStatus from '../components/renderer/attachments/AttachmentStatus'\nimport { canvasToBlob, urlToBlobAsync } from '../services/blob-utils'\nimport ImagePreviewUnavailable from '../components/renderer/attachments/ImagePreviewUnavailable'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport ProgressBar from '../components/renderer/attachments/ProgressBar'\n\ntype Props = {\n  id: string\n  element: FormTypes.CameraElement\n  value: FormElementBinaryStorageValue\n  onChange: FormElementValueChangeHandler<FormElementBinaryStorageValue>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementCamera({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const [{ cameraError, isLoading }, setState] = React.useState<{\n    isLoading: boolean\n    cameraError?: Error\n  }>({\n    isLoading: false,\n  })\n  const [isAnnotating, setIsAnnotating, clearIsAnnotating] =\n    useBooleanState(false)\n  const fileInputRef = React.useRef<HTMLInputElement>(null)\n\n  const clearImage = React.useCallback(() => {\n    onChange(element, {\n      value: undefined,\n    })\n  }, [element, onChange])\n\n  const fileChange = React.useCallback(\n    async (changeEvent: React.ChangeEvent<HTMLInputElement>) => {\n      if (!changeEvent.target || !changeEvent.target.files) {\n        return\n      }\n\n      const file = changeEvent.target.files[0]\n      if (!file) {\n        return\n      }\n\n      setState({\n        isLoading: true,\n      })\n\n      console.log('File selected event', file)\n      try {\n        if (!checkIfContentTypeIsImage(file.type)) {\n          throw new Error(\n            `Invalid file type \"${file.type}\". Please select an image.`,\n          )\n        }\n        const result = await correctFileOrientation(\n          file,\n          element.includeTimestampWatermark ? drawTimestampOnCanvas : undefined,\n        )\n\n        if (result instanceof Blob) {\n          onChange(element, {\n            value: prepareNewAttachment(result, file.name, element),\n          })\n        } else {\n          const blob = await canvasToBlob(result)\n          onChange(element, {\n            value: prepareNewAttachment(blob, file.name, element),\n          })\n        }\n\n        setIsDirty()\n        setState({\n          isLoading: false,\n        })\n      } catch (error) {\n        setState({\n          isLoading: false,\n          cameraError: error as Error,\n        })\n      }\n    },\n    [element, onChange, setIsDirty],\n  )\n  const openCamera = React.useCallback(() => {\n    if (window.cordova && navigator.camera && navigator.camera.getPicture) {\n      setState({\n        isLoading: true,\n      })\n      navigator.camera.getPicture(\n        (base64Data: string) => {\n          urlToBlobAsync(`data:image/jpeg;base64,${base64Data}`)\n            .then((blob) => {\n              onChange(element, {\n                value: prepareNewAttachment(blob, 'photo.jpeg', element),\n              })\n              setState({\n                isLoading: false,\n              })\n            })\n            .catch((error) => {\n              setState({\n                cameraError: error,\n                isLoading: false,\n              })\n            })\n        },\n        (error: Error) => {\n          console.warn(\n            'An error occurred while attempting to take a photo',\n            error,\n          )\n          setState({\n            isLoading: false,\n            cameraError: error,\n          })\n        },\n        {\n          quality: 100,\n          destinationType: window.Camera.DestinationType.DATA_URL,\n          sourceType: window.Camera.PictureSourceType.CAMERA,\n          allowEdit: false,\n          encodingType: window.Camera.EncodingType.JPEG,\n          mediaType: window.Camera.MediaType.PICTURE,\n          correctOrientation: true,\n          saveToPhotoAlbum: false,\n          cameraDirection: window.Camera.Direction.BACK,\n        },\n      )\n    } else if (fileInputRef.current) {\n      // RESET HTML FILE INPUT VALUE SO FILES PREVIOUSLY ADDED AND REMOVED ARE RECOGNIZED\n      fileInputRef.current.value = ''\n      fileInputRef.current.click()\n    } else {\n      console.error(\n        'Could not find \"input\" element in Camera component template',\n      )\n    }\n  }, [element, onChange])\n\n  const {\n    isUploading,\n    uploadErrorMessage,\n    isLoadingImageUrl,\n    imageUrl,\n    loadImageUrlError,\n    canDownload,\n    progress,\n  } = useAttachment(\n    value,\n    element,\n    React.useCallback(\n      (id, attachment) => {\n        onChange(element, {\n          value: attachment,\n        })\n      },\n      [element, onChange],\n    ),\n  )\n\n  const handleRetry = React.useMemo(() => {\n    if (!value || typeof value !== 'object') return\n\n    if (value.type === 'ERROR' && value.data) {\n      return () => {\n        onChange(element, {\n          value: {\n            type: 'NEW',\n            _id: value._id,\n            data: value.data,\n            fileName: value.fileName,\n            isPrivate: value.isPrivate,\n          },\n        })\n      }\n    }\n  }, [element, onChange, value])\n\n  const handleDownload = React.useCallback(async () => {\n    if (typeof value === 'string') {\n      await downloadFileLegacy(value, id)\n    } else if (value && value.type !== 'ERROR') {\n      await downloadAttachment(value)\n    }\n  }, [value, id])\n\n  const handleSaveAnnotation = React.useCallback(\n    (annotationDataUri: string) => {\n      clearIsAnnotating()\n\n      if (typeof imageUrl !== 'string') {\n        return\n      }\n\n      setState({\n        isLoading: true,\n      })\n\n      const canvas = document.createElement('canvas')\n      const ctx = canvas.getContext('2d')\n      if (!ctx) {\n        return\n      }\n\n      const image = new Image()\n      image.onload = function () {\n        canvas.width = image.width\n        canvas.height = image.height\n\n        ctx.drawImage(image, 0, 0)\n\n        const annotationImage = new Image()\n        annotationImage.onload = function () {\n          ctx.drawImage(annotationImage, 0, 0, canvas.width, canvas.height)\n\n          try {\n            canvasToBlob(canvas)\n              .then((blob) => {\n                const attachment = prepareNewAttachment(\n                  blob,\n                  'photo.png',\n                  element,\n                )\n                onChange(element, {\n                  value: attachment,\n                })\n                setState({\n                  isLoading: false,\n                })\n              })\n              .catch((error) => {\n                setState({\n                  cameraError: error,\n                  isLoading: false,\n                })\n              })\n          } catch (error) {\n            setState({\n              cameraError: error as Error,\n              isLoading: false,\n            })\n          }\n        }\n        annotationImage.src = annotationDataUri\n      }\n      image.setAttribute('crossorigin', 'anonymous')\n      image.src = imageUrl\n    },\n    [clearIsAnnotating, element, imageUrl, onChange],\n  )\n\n  const progressTooltipRef = React.useRef<HTMLDivElement>(null)\n  return (\n    <>\n      <FormElementLabelContainer\n        className=\"ob-camera\"\n        element={element}\n        id={id}\n        required={element.required}\n      >\n        <div className=\"control\">\n          {(value || isLoading) && (\n            <>\n              <figure className=\"ob-figure\" ref={progressTooltipRef}>\n                <DisplayImage\n                  isUploading={isUploading}\n                  uploadErrorMessage={uploadErrorMessage}\n                  isLoadingImageUrl={isLoadingImageUrl}\n                  imageUrl={imageUrl}\n                  loadImageUrlError={loadImageUrlError}\n                  isLoading={isLoading}\n                  element={element}\n                  onAnnotate={setIsAnnotating}\n                  canDownload={canDownload}\n                  progress={progress}\n                />\n                <ProgressBar isShowing={isUploading} progress={progress} />\n              </figure>\n            </>\n          )}\n\n          <input\n            ref={fileInputRef}\n            className=\"ob-input ob-camera__input-hidden cypress-camera-control\"\n            type=\"file\"\n            accept=\"image/*\"\n            capture=\"environment\"\n            id={id}\n            name={element.name}\n            required={element.required}\n            disabled={element.readOnly}\n            onChange={fileChange}\n          />\n          <div className=\"buttons ob-buttons\">\n            {value ? (\n              <>\n                {uploadErrorMessage && handleRetry && (\n                  <button\n                    type=\"button\"\n                    className=\"button ob-button ob-button__retry is-light cypress-retry-file-button\"\n                    onClick={handleRetry}\n                  >\n                    Retry\n                  </button>\n                )}\n                <button\n                  type=\"button\"\n                  className=\"button ob-button ob-button__clear is-light cypress-clear-camera\"\n                  onClick={clearImage}\n                  disabled={element.readOnly || isLoading}\n                >\n                  Clear\n                </button>\n                {canDownload && (\n                  <button\n                    type=\"button\"\n                    className=\"button ob-button ob-button__download is-primary cypress-download-file-button\"\n                    onClick={handleDownload}\n                  >\n                    <span className=\"icon\">\n                      <i className=\"material-icons\">cloud_download</i>\n                    </span>\n                    <span>&nbsp;Download</span>\n                  </button>\n                )}\n              </>\n            ) : (\n              <button\n                type=\"button\"\n                className=\"button ob-button ob-button__open is-primary cypress-open-camera\"\n                onClick={openCamera}\n                disabled={element.readOnly || isLoading}\n              >\n                Open Camera\n              </button>\n            )}\n          </div>\n        </div>\n        {(isDirty || displayValidationMessage) && !!validationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n\n      {isAnnotating && imageUrl && (\n        <AnnotationModal\n          imageSrc={imageUrl}\n          onClose={clearIsAnnotating}\n          onSave={handleSaveAnnotation}\n        />\n      )}\n\n      {cameraError && (\n        <Modal\n          isOpen\n          title=\"Whoops...\"\n          className=\"cypress-error-modal\"\n          titleClassName=\"cypress-error-title\"\n          actions={\n            <button\n              type=\"button\"\n              className=\"button ob-button is-primary cypress-close-error-button\"\n              onClick={() => setState({ isLoading: false })}\n              autoFocus\n            >\n              Okay\n            </button>\n          }\n        >\n          <p>\n            An error occurred while attempting to take a photo. Please click{' '}\n            <b>Okay</b> below to try again. If the problem persists, please\n            contact support.\n          </p>\n\n          <div className=\"content has-margin-top-6\">\n            <blockquote>{cameraError.toString()}</blockquote>\n          </div>\n        </Modal>\n      )}\n    </>\n  )\n}\n\nexport default React.memo(FormElementCamera)\n\nconst DisplayImage = React.memo(function DisplayImage({\n  uploadErrorMessage,\n  isUploading,\n  isLoadingImageUrl,\n  imageUrl,\n  loadImageUrlError,\n  isLoading,\n  element,\n  onAnnotate,\n  progress,\n}: ReturnType<typeof useAttachment> & {\n  element: FormTypes.CameraElement\n  isLoading: boolean\n  onAnnotate: () => void\n  progress: number | undefined\n}) {\n  if (uploadErrorMessage) {\n    return (\n      <div className=\"figure-content\">\n        <h3 className=\"title is-3\">Upload Failed</h3>\n        <p>\n          Your photo failed to upload, please use the <b>Retry</b> or{' '}\n          <b>Clear</b> buttons below.\n        </p>\n      </div>\n    )\n  }\n\n  if (loadImageUrlError) {\n    return (\n      <div className=\"figure-content\">\n        <h3 className=\"title is-3\">Preview Failed</h3>\n        <p>{loadImageUrlError.message}</p>\n      </div>\n    )\n  }\n\n  if (isLoadingImageUrl || isLoading) {\n    return (\n      <div className=\"figure-content has-text-centered cypress-camera-loading-image\">\n        <OnLoading small />\n      </div>\n    )\n  }\n\n  if (imageUrl) {\n    return (\n      <>\n        <span className=\"ob-figure__status\">\n          <AttachmentStatus\n            isLoadingImageUrl={isLoadingImageUrl}\n            loadImageUrlError={loadImageUrlError}\n            isUploading={isUploading}\n            imageUrl={imageUrl}\n            progress={progress}\n          />\n        </span>\n        <img\n          src={imageUrl}\n          className=\"cypress-camera-image ob-camera__img\"\n          crossOrigin=\"anonymous\"\n          alt={`${element.label}: Attachment`}\n        />\n        <button\n          type=\"button\"\n          className=\"button is-primary ob-camera__annotate-button cypress-annotate-button\"\n          onClick={onAnnotate}\n          disabled={element.readOnly}\n        >\n          <span className=\"icon\">\n            <i className=\"material-icons\">brush</i>\n          </span>\n        </button>\n      </>\n    )\n  }\n\n  return (\n    <div className=\"figure-content\">\n      <ImagePreviewUnavailable />\n    </div>\n  )\n})\n"]}
+{"version":3,"file":"FormElementCamera.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCamera.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\n\nimport useBooleanState from '../hooks/useBooleanState'\nimport downloadAttachment, {\n  downloadFileLegacy,\n} from '../services/download-file'\nimport OnLoading from '../components/renderer/OnLoading'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport drawTimestampOnCanvas from '../services/drawTimestampOnCanvas'\nimport { FormElementBinaryStorageValue } from '../types/attachments'\nimport useAttachment from '../hooks/attachments/useAttachment'\nimport AnnotationModal from '../components/renderer/AnnotationModal'\nimport Modal from '../components/renderer/Modal'\nimport {\n  checkIfContentTypeIsImage,\n  prepareNewAttachment,\n  correctFileOrientation,\n} from '../services/attachments'\nimport AttachmentStatus from '../components/renderer/attachments/AttachmentStatus'\nimport { canvasToBlob, urlToBlobAsync } from '../services/blob-utils'\nimport ImagePreviewUnavailable from '../components/renderer/attachments/ImagePreviewUnavailable'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport ProgressBar from '../components/renderer/attachments/ProgressBar'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\n\ntype Props = {\n  id: string\n  element: FormTypes.CameraElement\n  value: FormElementBinaryStorageValue\n  onChange: FormElementValueChangeHandler<FormElementBinaryStorageValue>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementCamera({\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 [{ cameraError, isLoading }, setState] = React.useState<{\n    isLoading: boolean\n    cameraError?: Error\n  }>({\n    isLoading: false,\n  })\n  const [isAnnotating, setIsAnnotating, clearIsAnnotating] =\n    useBooleanState(false)\n  const fileInputRef = React.useRef<HTMLInputElement>(null)\n\n  const clearImage = React.useCallback(() => {\n    onChange(element, {\n      value: undefined,\n    })\n  }, [element, onChange])\n\n  const fileChange = React.useCallback(\n    async (changeEvent: React.ChangeEvent<HTMLInputElement>) => {\n      if (!changeEvent.target || !changeEvent.target.files) {\n        return\n      }\n\n      const file = changeEvent.target.files[0]\n      if (!file) {\n        return\n      }\n\n      setState({\n        isLoading: true,\n      })\n\n      console.log('File selected event', file)\n      try {\n        if (!checkIfContentTypeIsImage(file.type)) {\n          throw new Error(\n            `Invalid file type \"${file.type}\". Please select an image.`,\n          )\n        }\n        const result = await correctFileOrientation(\n          file,\n          element.includeTimestampWatermark ? drawTimestampOnCanvas : undefined,\n        )\n\n        if (result instanceof Blob) {\n          onChange(element, {\n            value: prepareNewAttachment(result, file.name, element),\n          })\n        } else {\n          const blob = await canvasToBlob(result)\n          onChange(element, {\n            value: prepareNewAttachment(blob, file.name, element),\n          })\n        }\n\n        setIsDirty()\n        setState({\n          isLoading: false,\n        })\n      } catch (error) {\n        setState({\n          isLoading: false,\n          cameraError: error as Error,\n        })\n      }\n    },\n    [element, onChange, setIsDirty],\n  )\n  const openCamera = React.useCallback(() => {\n    if (window.cordova && navigator.camera && navigator.camera.getPicture) {\n      setState({\n        isLoading: true,\n      })\n      navigator.camera.getPicture(\n        (base64Data: string) => {\n          urlToBlobAsync(`data:image/jpeg;base64,${base64Data}`)\n            .then((blob) => {\n              onChange(element, {\n                value: prepareNewAttachment(blob, 'photo.jpeg', element),\n              })\n              setState({\n                isLoading: false,\n              })\n            })\n            .catch((error) => {\n              setState({\n                cameraError: error,\n                isLoading: false,\n              })\n            })\n        },\n        (error: Error) => {\n          console.warn(\n            'An error occurred while attempting to take a photo',\n            error,\n          )\n          setState({\n            isLoading: false,\n            cameraError: error,\n          })\n        },\n        {\n          quality: 100,\n          destinationType: window.Camera.DestinationType.DATA_URL,\n          sourceType: window.Camera.PictureSourceType.CAMERA,\n          allowEdit: false,\n          encodingType: window.Camera.EncodingType.JPEG,\n          mediaType: window.Camera.MediaType.PICTURE,\n          correctOrientation: true,\n          saveToPhotoAlbum: false,\n          cameraDirection: window.Camera.Direction.BACK,\n        },\n      )\n    } else if (fileInputRef.current) {\n      // RESET HTML FILE INPUT VALUE SO FILES PREVIOUSLY ADDED AND REMOVED ARE RECOGNIZED\n      fileInputRef.current.value = ''\n      fileInputRef.current.click()\n    } else {\n      console.error(\n        'Could not find \"input\" element in Camera component template',\n      )\n    }\n  }, [element, onChange])\n\n  const {\n    isUploading,\n    uploadErrorMessage,\n    isLoadingImageUrl,\n    imageUrl,\n    loadImageUrlError,\n    canDownload,\n    progress,\n  } = useAttachment(\n    value,\n    element,\n    React.useCallback(\n      (id, attachment) => {\n        onChange(element, {\n          value: attachment,\n        })\n      },\n      [element, onChange],\n    ),\n  )\n\n  const handleRetry = React.useMemo(() => {\n    if (!value || typeof value !== 'object') return\n\n    if (value.type === 'ERROR' && value.data) {\n      return () => {\n        onChange(element, {\n          value: {\n            type: 'NEW',\n            _id: value._id,\n            data: value.data,\n            fileName: value.fileName,\n            isPrivate: value.isPrivate,\n          },\n        })\n      }\n    }\n  }, [element, onChange, value])\n\n  const handleDownload = React.useCallback(async () => {\n    if (typeof value === 'string') {\n      await downloadFileLegacy(value, id)\n    } else if (value && value.type !== 'ERROR') {\n      await downloadAttachment(value)\n    }\n  }, [value, id])\n\n  const handleSaveAnnotation = React.useCallback(\n    (annotationDataUri: string) => {\n      clearIsAnnotating()\n\n      if (typeof imageUrl !== 'string') {\n        return\n      }\n\n      setState({\n        isLoading: true,\n      })\n\n      const canvas = document.createElement('canvas')\n      const ctx = canvas.getContext('2d')\n      if (!ctx) {\n        return\n      }\n\n      const image = new Image()\n      image.onload = function () {\n        canvas.width = image.width\n        canvas.height = image.height\n\n        ctx.drawImage(image, 0, 0)\n\n        const annotationImage = new Image()\n        annotationImage.onload = function () {\n          ctx.drawImage(annotationImage, 0, 0, canvas.width, canvas.height)\n\n          try {\n            canvasToBlob(canvas)\n              .then((blob) => {\n                const attachment = prepareNewAttachment(\n                  blob,\n                  'photo.png',\n                  element,\n                )\n                onChange(element, {\n                  value: attachment,\n                })\n                setState({\n                  isLoading: false,\n                })\n              })\n              .catch((error) => {\n                setState({\n                  cameraError: error,\n                  isLoading: false,\n                })\n              })\n          } catch (error) {\n            setState({\n              cameraError: error as Error,\n              isLoading: false,\n            })\n          }\n        }\n        annotationImage.src = annotationDataUri\n      }\n      image.setAttribute('crossorigin', 'anonymous')\n      image.src = imageUrl\n    },\n    [clearIsAnnotating, element, imageUrl, onChange],\n  )\n\n  const progressTooltipRef = React.useRef<HTMLDivElement>(null)\n  return (\n    <>\n      <FormElementLabelContainer\n        className=\"ob-camera\"\n        element={element}\n        id={id}\n        required={element.required}\n      >\n        <div className=\"control\">\n          {(value || isLoading) && (\n            <>\n              <figure className=\"ob-figure\" ref={progressTooltipRef}>\n                <DisplayImage\n                  isUploading={isUploading}\n                  uploadErrorMessage={uploadErrorMessage}\n                  isLoadingImageUrl={isLoadingImageUrl}\n                  imageUrl={imageUrl}\n                  loadImageUrlError={loadImageUrlError}\n                  isLoading={isLoading}\n                  element={element}\n                  onAnnotate={setIsAnnotating}\n                  canDownload={canDownload}\n                  progress={progress}\n                />\n                <ProgressBar isShowing={isUploading} progress={progress} />\n              </figure>\n            </>\n          )}\n\n          <input\n            ref={fileInputRef}\n            className=\"ob-input ob-camera__input-hidden cypress-camera-control\"\n            type=\"file\"\n            accept=\"image/*\"\n            capture=\"environment\"\n            id={id}\n            name={element.name}\n            required={element.required}\n            disabled={element.readOnly}\n            onChange={fileChange}\n          />\n          <div className=\"buttons ob-buttons\">\n            {value ? (\n              <>\n                {uploadErrorMessage && handleRetry && (\n                  <button\n                    type=\"button\"\n                    className=\"button ob-button ob-button__retry is-light cypress-retry-file-button\"\n                    onClick={handleRetry}\n                  >\n                    Retry\n                  </button>\n                )}\n                <button\n                  type=\"button\"\n                  className=\"button ob-button ob-button__clear is-light cypress-clear-camera\"\n                  onClick={clearImage}\n                  disabled={element.readOnly || isLoading}\n                >\n                  Clear\n                </button>\n                {canDownload && (\n                  <button\n                    type=\"button\"\n                    className=\"button ob-button ob-button__download is-primary cypress-download-file-button\"\n                    onClick={handleDownload}\n                  >\n                    <span className=\"icon\">\n                      <i className=\"material-icons\">cloud_download</i>\n                    </span>\n                    <span>&nbsp;Download</span>\n                  </button>\n                )}\n              </>\n            ) : (\n              <button\n                type=\"button\"\n                className=\"button ob-button ob-button__open is-primary cypress-open-camera\"\n                onClick={openCamera}\n                disabled={element.readOnly || isLoading}\n                aria-describedby={ariaDescribedby}\n              >\n                Open Camera\n              </button>\n            )}\n          </div>\n        </div>\n        {(isDirty || displayValidationMessage) && !!validationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n\n      {isAnnotating && imageUrl && (\n        <AnnotationModal\n          imageSrc={imageUrl}\n          onClose={clearIsAnnotating}\n          onSave={handleSaveAnnotation}\n        />\n      )}\n\n      {cameraError && (\n        <Modal\n          isOpen\n          title=\"Whoops...\"\n          className=\"cypress-error-modal\"\n          titleClassName=\"cypress-error-title\"\n          actions={\n            <button\n              type=\"button\"\n              className=\"button ob-button is-primary cypress-close-error-button\"\n              onClick={() => setState({ isLoading: false })}\n              autoFocus\n            >\n              Okay\n            </button>\n          }\n        >\n          <p>\n            An error occurred while attempting to take a photo. Please click{' '}\n            <b>Okay</b> below to try again. If the problem persists, please\n            contact support.\n          </p>\n\n          <div className=\"content has-margin-top-6\">\n            <blockquote>{cameraError.toString()}</blockquote>\n          </div>\n        </Modal>\n      )}\n    </>\n  )\n}\n\nexport default React.memo(FormElementCamera)\n\nconst DisplayImage = React.memo(function DisplayImage({\n  uploadErrorMessage,\n  isUploading,\n  isLoadingImageUrl,\n  imageUrl,\n  loadImageUrlError,\n  isLoading,\n  element,\n  onAnnotate,\n  progress,\n}: ReturnType<typeof useAttachment> & {\n  element: FormTypes.CameraElement\n  isLoading: boolean\n  onAnnotate: () => void\n  progress: number | undefined\n}) {\n  if (uploadErrorMessage) {\n    return (\n      <div className=\"figure-content\">\n        <h3 className=\"title is-3\">Upload Failed</h3>\n        <p>\n          Your photo failed to upload, please use the <b>Retry</b> or{' '}\n          <b>Clear</b> buttons below.\n        </p>\n      </div>\n    )\n  }\n\n  if (loadImageUrlError) {\n    return (\n      <div className=\"figure-content\">\n        <h3 className=\"title is-3\">Preview Failed</h3>\n        <p>{loadImageUrlError.message}</p>\n      </div>\n    )\n  }\n\n  if (isLoadingImageUrl || isLoading) {\n    return (\n      <div className=\"figure-content has-text-centered cypress-camera-loading-image\">\n        <OnLoading small />\n      </div>\n    )\n  }\n\n  if (imageUrl) {\n    return (\n      <>\n        <span className=\"ob-figure__status\">\n          <AttachmentStatus\n            isLoadingImageUrl={isLoadingImageUrl}\n            loadImageUrlError={loadImageUrlError}\n            isUploading={isUploading}\n            imageUrl={imageUrl}\n            progress={progress}\n          />\n        </span>\n        <img\n          src={imageUrl}\n          className=\"cypress-camera-image ob-camera__img\"\n          crossOrigin=\"anonymous\"\n          alt={`${element.label}: Attachment`}\n        />\n        <button\n          type=\"button\"\n          className=\"button is-primary ob-camera__annotate-button cypress-annotate-button\"\n          onClick={onAnnotate}\n          disabled={element.readOnly}\n        >\n          <span className=\"icon\">\n            <i className=\"material-icons\">brush</i>\n          </span>\n        </button>\n      </>\n    )\n  }\n\n  return (\n    <div className=\"figure-content\">\n      <ImagePreviewUnavailable />\n    </div>\n  )\n})\n"]}

package/dist/form-elements/FormElementCheckBoxes.js

@@ -8,8 +8,10 @@ import OptionButton from './OptionButton';
 import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
 import ToggleAllCheckbox from '../components/renderer/ToggleAllCheckbox';
 import { LookupNotificationContext } from '../hooks/useLookupNotification';
+import useElementAriaDescribedby from '../hooks/useElementAriaDescribedby';
 function FormElementCheckboxes({ id, element, value, onChange, validationMessage, displayValidationMessage, conditionallyShownOptionsElement, onUpdateFormElements, isDirty, setIsDirty, }) {
     var _a;
+    const ariaDescribedby = useElementAriaDescribedby(id, element);
     const selectedValues = React.useMemo(() => {
         if (!Array.isArray(value))
             return [];
@@ -74,14 +76,16 @@ function FormElementCheckboxes({ id, element, value, onChange, validationMessage
                         return (React.createElement(OptionButton, { key: index, element: element, option: option, isSelected: isSelected, onClick: () => changeValues(option.value, isSelected), className: clsx('button ob-button ob-button__input ob-checkbox__button cypress-checkbox-button-control', {
                                 'is-primary': isSelected,
                                 'is-light': !isSelected,
-                            }) }));
+                            }), "aria-describedby": ariaDescribedby }));
                     })))) : (React.createElement("div", { className: "ob-checkbox-container" }, filteredOptions.map((option, index) => {
                     const isSelected = selectedValues.includes(option.value);
                     return (React.createElement("div", { className: "control", key: index },
                         React.createElement("label", { className: "checkbox ob-checkbox__input-label cypress-checkbox-label", htmlFor: `${id}_${option.value}` },
                             React.createElement(Checkbox, { color: "primary", className: "ob-checkbox__input cypress-checkbox-control", classes: {
                                     checked: 'ob-checkbox__input-checked',
-                                }, value: option.value, id: `${id}_${option.value}`, checked: isSelected, onChange: () => changeValues(option.value, isSelected), disabled: element.readOnly, edge: "start" }),
+                                }, value: option.value, id: `${id}_${option.value}`, checked: isSelected, onChange: () => changeValues(option.value, isSelected), disabled: element.readOnly, edge: "start", inputProps: {
+                                    'aria-describedby': ariaDescribedby,
+                                } }),
                             ' ',
                             option.label)));
                 }))),

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementCheckBoxes.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCheckBoxes.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { Checkbox } from '@mui/material'\n\nimport FormElementOptions from '../components/renderer/FormElementOptions'\nimport useFormElementOptions from '../hooks/useFormElementOptions'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport OptionButton from './OptionButton'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport ToggleAllCheckbox from '../components/renderer/ToggleAllCheckbox'\nimport {\n  FormElementValueChangeHandler,\n  FormElementConditionallyShownElement,\n  IsDirtyProps,\n  UpdateFormElementsHandler,\n} from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\n\ntype Props = {\n  id: string\n  element: FormTypes.CheckboxElement\n  value: unknown\n  onChange: FormElementValueChangeHandler<string[]>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  conditionallyShownOptionsElement:\n    | FormElementConditionallyShownElement\n    | undefined\n  onUpdateFormElements: UpdateFormElementsHandler\n} & IsDirtyProps\n\nfunction FormElementCheckboxes({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  conditionallyShownOptionsElement,\n  onUpdateFormElements,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const selectedValues = React.useMemo(() => {\n    if (!Array.isArray(value)) return []\n    return value\n  }, [value])\n\n  // Need to use a `useEffect` to update the `isDirty` state, because it cannot be done from\n  // inside the below `setState` callback function since it runs from inside another component\n  React.useEffect(() => {\n    if (isDirty) return\n\n    if (\n      // If the element requires a single selection and has a value\n      (element.required && !!selectedValues.length) ||\n      // or all options are selected and requiredAll is true\n      (element.requiredAll && selectedValues.length === element.options?.length)\n    ) {\n      setIsDirty()\n    }\n  }, [\n    element.options?.length,\n    element.required,\n    element.requiredAll,\n    isDirty,\n    selectedValues.length,\n    setIsDirty,\n  ])\n\n  const changeValues = React.useCallback(\n    (toggledValue: string, hasSelectedValue: boolean) => {\n      onChange(element, {\n        value: (existingValue) => {\n          if (hasSelectedValue) {\n            const newValue = (existingValue || []).filter(\n              (existingValue) => existingValue !== toggledValue,\n            )\n            if (newValue.length) {\n              return newValue\n            }\n          } else {\n            const newValue = Array.isArray(existingValue)\n              ? [...existingValue]\n              : []\n            newValue.push(toggledValue)\n            return newValue\n          }\n        },\n      })\n    },\n    [element, onChange],\n  )\n\n  const filteredOptions = useFormElementOptions({\n    element,\n    value,\n    onChange,\n    conditionallyShownOptionsElement,\n    onUpdateFormElements,\n  })\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (displayValidationMessage || isDirty) && !!validationMessage && !isLookingUp\n\n  return (\n    <div className=\"cypress-checkbox-element\">\n      <FormElementLabelContainer\n        className=\"ob-checkbox\"\n        id={id}\n        element={element}\n        required={element.required || !!element.requiredAll}\n      >\n        <FormElementOptions\n          options={element.options}\n          conditionallyShownOptionsElement={conditionallyShownOptionsElement}\n        >\n          {element.canToggleAll && (\n            <ToggleAllCheckbox\n              id={id}\n              element={element}\n              options={filteredOptions}\n              selected={selectedValues}\n              disabled={element.readOnly}\n              onChange={onChange}\n            />\n          )}\n          {element.buttons ? (\n            <div className=\"ob-button-radio-container\">\n              <div className=\"buttons ob-buttons ob-buttons-radio\">\n                {filteredOptions.map((option, index) => {\n                  const isSelected = selectedValues.includes(option.value)\n                  return (\n                    <OptionButton\n                      key={index}\n                      element={element}\n                      option={option}\n                      isSelected={isSelected}\n                      onClick={() => changeValues(option.value, isSelected)}\n                      className={clsx(\n                        'button ob-button ob-button__input ob-checkbox__button cypress-checkbox-button-control',\n                        {\n                          'is-primary': isSelected,\n                          'is-light': !isSelected,\n                        },\n                      )}\n                    />\n                  )\n                })}\n              </div>\n            </div>\n          ) : (\n            <div className=\"ob-checkbox-container\">\n              {filteredOptions.map((option, index) => {\n                const isSelected = selectedValues.includes(option.value)\n                return (\n                  <div className=\"control\" key={index}>\n                    <label\n                      className=\"checkbox ob-checkbox__input-label cypress-checkbox-label\"\n                      htmlFor={`${id}_${option.value}`}\n                    >\n                      <Checkbox\n                        color=\"primary\"\n                        className=\"ob-checkbox__input cypress-checkbox-control\"\n                        classes={{\n                          checked: 'ob-checkbox__input-checked',\n                        }}\n                        value={option.value}\n                        id={`${id}_${option.value}`}\n                        checked={isSelected}\n                        onChange={() => changeValues(option.value, isSelected)}\n                        disabled={element.readOnly}\n                        edge=\"start\"\n                      />{' '}\n                      {option.label}\n                    </label>\n                  </div>\n                )\n              })}\n            </div>\n          )}\n\n          <LookupButton\n            hasMarginTop\n            value={value}\n            validationMessage={validationMessage}\n            lookupButtonConfig={element.lookupButton}\n          />\n        </FormElementOptions>\n\n        {isDisplayingValidationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementCheckboxes)\n"]}
+{"version":3,"file":"FormElementCheckBoxes.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCheckBoxes.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { Checkbox } from '@mui/material'\n\nimport FormElementOptions from '../components/renderer/FormElementOptions'\nimport useFormElementOptions from '../hooks/useFormElementOptions'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport OptionButton from './OptionButton'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport ToggleAllCheckbox from '../components/renderer/ToggleAllCheckbox'\nimport {\n  FormElementValueChangeHandler,\n  FormElementConditionallyShownElement,\n  IsDirtyProps,\n  UpdateFormElementsHandler,\n} from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\n\ntype Props = {\n  id: string\n  element: FormTypes.CheckboxElement\n  value: unknown\n  onChange: FormElementValueChangeHandler<string[]>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  conditionallyShownOptionsElement:\n    | FormElementConditionallyShownElement\n    | undefined\n  onUpdateFormElements: UpdateFormElementsHandler\n} & IsDirtyProps\n\nfunction FormElementCheckboxes({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  conditionallyShownOptionsElement,\n  onUpdateFormElements,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const selectedValues = React.useMemo(() => {\n    if (!Array.isArray(value)) return []\n    return value\n  }, [value])\n\n  // Need to use a `useEffect` to update the `isDirty` state, because it cannot be done from\n  // inside the below `setState` callback function since it runs from inside another component\n  React.useEffect(() => {\n    if (isDirty) return\n\n    if (\n      // If the element requires a single selection and has a value\n      (element.required && !!selectedValues.length) ||\n      // or all options are selected and requiredAll is true\n      (element.requiredAll && selectedValues.length === element.options?.length)\n    ) {\n      setIsDirty()\n    }\n  }, [\n    element.options?.length,\n    element.required,\n    element.requiredAll,\n    isDirty,\n    selectedValues.length,\n    setIsDirty,\n  ])\n\n  const changeValues = React.useCallback(\n    (toggledValue: string, hasSelectedValue: boolean) => {\n      onChange(element, {\n        value: (existingValue) => {\n          if (hasSelectedValue) {\n            const newValue = (existingValue || []).filter(\n              (existingValue) => existingValue !== toggledValue,\n            )\n            if (newValue.length) {\n              return newValue\n            }\n          } else {\n            const newValue = Array.isArray(existingValue)\n              ? [...existingValue]\n              : []\n            newValue.push(toggledValue)\n            return newValue\n          }\n        },\n      })\n    },\n    [element, onChange],\n  )\n\n  const filteredOptions = useFormElementOptions({\n    element,\n    value,\n    onChange,\n    conditionallyShownOptionsElement,\n    onUpdateFormElements,\n  })\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (displayValidationMessage || isDirty) && !!validationMessage && !isLookingUp\n\n  return (\n    <div className=\"cypress-checkbox-element\">\n      <FormElementLabelContainer\n        className=\"ob-checkbox\"\n        id={id}\n        element={element}\n        required={element.required || !!element.requiredAll}\n      >\n        <FormElementOptions\n          options={element.options}\n          conditionallyShownOptionsElement={conditionallyShownOptionsElement}\n        >\n          {element.canToggleAll && (\n            <ToggleAllCheckbox\n              id={id}\n              element={element}\n              options={filteredOptions}\n              selected={selectedValues}\n              disabled={element.readOnly}\n              onChange={onChange}\n            />\n          )}\n          {element.buttons ? (\n            <div className=\"ob-button-radio-container\">\n              <div className=\"buttons ob-buttons ob-buttons-radio\">\n                {filteredOptions.map((option, index) => {\n                  const isSelected = selectedValues.includes(option.value)\n                  return (\n                    <OptionButton\n                      key={index}\n                      element={element}\n                      option={option}\n                      isSelected={isSelected}\n                      onClick={() => changeValues(option.value, isSelected)}\n                      className={clsx(\n                        'button ob-button ob-button__input ob-checkbox__button cypress-checkbox-button-control',\n                        {\n                          'is-primary': isSelected,\n                          'is-light': !isSelected,\n                        },\n                      )}\n                      aria-describedby={ariaDescribedby}\n                    />\n                  )\n                })}\n              </div>\n            </div>\n          ) : (\n            <div className=\"ob-checkbox-container\">\n              {filteredOptions.map((option, index) => {\n                const isSelected = selectedValues.includes(option.value)\n                return (\n                  <div className=\"control\" key={index}>\n                    <label\n                      className=\"checkbox ob-checkbox__input-label cypress-checkbox-label\"\n                      htmlFor={`${id}_${option.value}`}\n                    >\n                      <Checkbox\n                        color=\"primary\"\n                        className=\"ob-checkbox__input cypress-checkbox-control\"\n                        classes={{\n                          checked: 'ob-checkbox__input-checked',\n                        }}\n                        value={option.value}\n                        id={`${id}_${option.value}`}\n                        checked={isSelected}\n                        onChange={() => changeValues(option.value, isSelected)}\n                        disabled={element.readOnly}\n                        edge=\"start\"\n                        inputProps={{\n                          'aria-describedby': ariaDescribedby,\n                        }}\n                      />{' '}\n                      {option.label}\n                    </label>\n                  </div>\n                )\n              })}\n            </div>\n          )}\n\n          <LookupButton\n            hasMarginTop\n            value={value}\n            validationMessage={validationMessage}\n            lookupButtonConfig={element.lookupButton}\n          />\n        </FormElementOptions>\n\n        {isDisplayingValidationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementCheckboxes)\n"]}

package/dist/form-elements/FormElementCivicaStreetName.js

@@ -2,7 +2,9 @@ import * as React from 'react';
 import { formService } from '@oneblink/apps';
 import AutocompleteDropdown from '../components/renderer/AutocompleteDropdown';
 import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
+import useElementAriaDescribedby from '../hooks/useElementAriaDescribedby';
 function FormElementCivicaStreetName({ formId, id, element, value, displayValidationMessage, validationMessage, onChange, isDirty, setIsDirty, }) {
+    const ariaDescribedby = useElementAriaDescribedby(id, element);
     const [label, setLabel] = React.useState('');
     const [error, setError] = React.useState();
     const handleSearch = React.useCallback(async (searchTerm, abortSignal) => {
@@ -33,7 +35,7 @@ function FormElementCivicaStreetName({ formId, id, element, value, displayValida
     }, [value]);
     return (React.createElement("div", { className: "cypress-civica-street-name-element" },
         React.createElement(FormElementLabelContainer, { className: "ob-civica-street-name ob-autocomplete", element: element, id: id, required: element.required },
-            React.createElement(AutocompleteDropdown, { id: id, label: label, disabled: element.readOnly, placeholder: element.placeholderValue, required: element.required, value: value, validationMessage: validationMessage, displayValidationMessage: displayValidationMessage, onChangeValue: handleChange, hasError: !!error, onChangeLabel: setLabel, searchDebounceMs: 750, searchMinCharacters: 4, onSearch: handleSearch, isDirty: isDirty, setIsDirty: setIsDirty })),
+            React.createElement(AutocompleteDropdown, { id: id, label: label, disabled: element.readOnly, placeholder: element.placeholderValue, required: element.required, value: value, validationMessage: validationMessage, displayValidationMessage: displayValidationMessage, onChangeValue: handleChange, hasError: !!error, onChangeLabel: setLabel, searchDebounceMs: 750, searchMinCharacters: 4, onSearch: handleSearch, isDirty: isDirty, setIsDirty: setIsDirty, "aria-describedby": ariaDescribedby })),
         error && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
             React.createElement("div", { className: "has-text-danger ob-error__text cypress-civica-street-name-error-message" }, error.toString())))));
 }