@oneblink/apps-react 8.14.0 → 9.0.0-beta.2

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementSignature.js","sourceRoot":"","sources":["../../src/form-elements/FormElementSignature.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport SignatureCanvas from 'react-signature-canvas'\nimport useResizeObserver, { ObservedSize } from 'use-resize-observer'\nimport { FormTypes } from '@oneblink/types'\n\nimport scrollingService from '../services/scrolling-service'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport OnLoading from '../components/renderer/OnLoading'\nimport useAttachment from '../hooks/attachments/useAttachment'\nimport { FormElementBinaryStorageValue } from '../types/attachments'\nimport { prepareNewAttachment } from '../services/attachments'\nimport AttachmentStatus from '../components/renderer/attachments/AttachmentStatus'\nimport { canvasToBlob } from '../services/blob-utils'\nimport ImagePreviewUnavailable from '../components/renderer/attachments/ImagePreviewUnavailable'\nimport { FormElementValueChangeHandler } from '../types/form'\nimport useIsPageVisible from '../hooks/useIsPageVisible'\nimport ProgressBar from '../components/renderer/attachments/ProgressBar'\nimport { IsDirtyProps } from '../types/form'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n  id: string\n  element: FormTypes.DrawElement\n  value: FormElementBinaryStorageValue\n  onChange: FormElementValueChangeHandler<FormElementBinaryStorageValue>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementSignature({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  setIsDirty,\n  isDirty,\n}: Props) {\n  const isPageVisible = useIsPageVisible()\n\n  const handleChange = React.useCallback<\n    FormElementValueChangeHandler<FormElementBinaryStorageValue>\n  >(\n    (formElement, newValue) => {\n      setIsDirty()\n      onChange(formElement, newValue)\n    },\n    [onChange, setIsDirty],\n  )\n\n  return (\n    <div className=\"cypress-signature-element\">\n      <FormElementLabelContainer\n        className=\"ob-signature\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"control\">\n          {value ? (\n            <SignatureDisplay\n              element={element}\n              value={value}\n              onChange={handleChange}\n            />\n          ) : isPageVisible ? (\n            <SignatureDrawing element={element} onChange={handleChange} />\n          ) : null}\n        </div>\n\n        {(isDirty || displayValidationMessage) && !!validationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementSignature)\n\nconst SignatureDrawing = React.memo(function SignatureDrawing({\n  element,\n  onChange,\n}: {\n  element: Props['element']\n  onChange: Props['onChange']\n}) {\n  const canvasRef = React.useRef<SignatureCanvas>(null)\n\n  const [isEmpty, setIsEmpty] = React.useState(true)\n  const [canvasDimensions, setCanvasDimensions] = React.useState<ObservedSize>({\n    width: undefined,\n    height: undefined,\n  })\n\n  const handleClear = React.useCallback(() => {\n    if (canvasRef.current) {\n      console.log('Clearing signature...')\n      canvasRef.current.clear()\n    }\n    setIsEmpty(true)\n  }, [])\n\n  const handleDone = React.useCallback(async () => {\n    if (!canvasRef.current) return\n    const trimmedCanvas = canvasRef.current.getTrimmedCanvas()\n\n    // Convert base64 data uri to blob and send it on its way\n    const blob = await canvasToBlob(trimmedCanvas)\n    onChange(element, {\n      value: prepareNewAttachment(blob, 'signature.png', element),\n    })\n  }, [element, onChange])\n\n  // HANDLING CANVAS CHANGE\n  const handleEndDraw = React.useCallback(() => {\n    if (window.cordova) {\n      scrollingService.enableScrolling()\n    }\n    if (isEmpty) {\n      setIsEmpty(false)\n    }\n  }, [isEmpty])\n\n  const { ref } = useResizeObserver<HTMLDivElement>({\n    onResize: setCanvasDimensions,\n  })\n\n  // REACTIVE DISABLING OF CANVAS\n  React.useEffect(() => {\n    if (!canvasRef.current) return\n    if (element.readOnly) {\n      canvasRef.current.off()\n    } else {\n      canvasRef.current.on()\n    }\n  }, [canvasRef, element.readOnly])\n\n  return (\n    <>\n      <div ref={ref}>\n        <SignatureCanvas\n          ref={canvasRef}\n          canvasProps={{\n            ...canvasDimensions,\n            className:\n              'input ob-signature__control cypress-signature-control signature-pad',\n            // @ts-expect-error ???\n            disabled: element.readOnly,\n          }}\n          onEnd={handleEndDraw}\n          onBegin={\n            window.cordova ? scrollingService.disableScrolling : undefined\n          }\n        />\n      </div>\n\n      <div className=\"buttons ob-buttons\">\n        <button\n          type=\"button\"\n          className=\"button ob-button is-light ob-button__clear cypress-clear-signature\"\n          onClick={handleClear}\n          disabled={element.readOnly || isEmpty}\n        >\n          Clear\n        </button>\n        <button\n          type=\"button\"\n          className=\"button ob-button ob-button__done is-primary cypress-done-signature-button\"\n          onClick={handleDone}\n          disabled={element.readOnly || isEmpty}\n        >\n          Save Signature\n        </button>\n      </div>\n    </>\n  )\n})\n\nconst SignatureDisplay = React.memo(function SignatureDisplay({\n  element,\n  value,\n  onChange,\n}: {\n  element: Props['element']\n  value: Props['value']\n  onChange: Props['onChange']\n}) {\n  const result = 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  return (\n    <>\n      <figure className=\"ob-figure\">\n        <DisplayImage {...result} alt={`${element.label}: Signature`} />\n      </figure>\n\n      <div className=\"buttons ob-buttons\">\n        {result.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 is-light ob-button__clear cypress-clear-signature\"\n          onClick={() =>\n            onChange(element, {\n              value: undefined,\n            })\n          }\n          disabled={element.readOnly}\n        >\n          Clear\n        </button>\n      </div>\n    </>\n  )\n})\n\nconst DisplayImage = React.memo(function DisplayImage({\n  alt,\n  uploadErrorMessage,\n  isUploading,\n  isLoadingAttachmentUrl,\n  attachmentUrl,\n  loadAttachmentUrlError,\n  progress,\n}: ReturnType<typeof useAttachment> & {\n  alt: string\n}) {\n  if (uploadErrorMessage) {\n    return (\n      <div className=\"figure-content\" role=\"alert\">\n        <h3 className=\"title is-3\">Upload Failed</h3>\n        <p>\n          Your signature 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 (loadAttachmentUrlError) {\n    return (\n      <div className=\"figure-content\" role=\"alert\">\n        <h3 className=\"title is-3\">Preview Failed</h3>\n        <p>{loadAttachmentUrlError.message}</p>\n      </div>\n    )\n  }\n\n  if (isLoadingAttachmentUrl) {\n    return (\n      <div className=\"figure-content\">\n        <OnLoading small className=\"cypress-signature-loading-image\" />\n      </div>\n    )\n  }\n\n  if (attachmentUrl) {\n    return (\n      <div className=\"figure-content\">\n        <span className=\"ob-figure__status\">\n          <AttachmentStatus\n            isLoadingAttachmentUrl={isLoadingAttachmentUrl}\n            loadAttachmentUrlError={loadAttachmentUrlError}\n            isUploading={isUploading}\n            attachmentUrl={attachmentUrl}\n            progress={progress}\n          />\n        </span>\n        <img\n          src={attachmentUrl}\n          className=\"cypress-signature-image ob-signature__img\"\n          alt={alt}\n        />\n        <ProgressBar progress={progress} isShowing={isUploading} />\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"figure-content\" role=\"alert\">\n      <ImagePreviewUnavailable />\n    </div>\n  )\n})\n"]}
+{"version":3,"file":"FormElementSignature.js","sourceRoot":"","sources":["../../src/form-elements/FormElementSignature.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport SignatureCanvas from 'react-signature-canvas'\nimport { useResizeObserver } from 'usehooks-ts'\nimport { FormTypes } from '@oneblink/types'\n\nimport scrollingService from '../services/scrolling-service'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport OnLoading from '../components/renderer/OnLoading'\nimport useAttachment from '../hooks/attachments/useAttachment'\nimport { FormElementBinaryStorageValue } from '../types/attachments'\nimport { prepareNewAttachment } from '../services/attachments'\nimport AttachmentStatus from '../components/renderer/attachments/AttachmentStatus'\nimport { canvasToBlob } from '../services/blob-utils'\nimport ImagePreviewUnavailable from '../components/renderer/attachments/ImagePreviewUnavailable'\nimport { FormElementValueChangeHandler } from '../types/form'\nimport useIsPageVisible from '../hooks/useIsPageVisible'\nimport ProgressBar from '../components/renderer/attachments/ProgressBar'\nimport { IsDirtyProps } from '../types/form'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n  id: string\n  element: FormTypes.DrawElement\n  value: FormElementBinaryStorageValue\n  onChange: FormElementValueChangeHandler<FormElementBinaryStorageValue>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementSignature({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  setIsDirty,\n  isDirty,\n}: Props) {\n  const isPageVisible = useIsPageVisible()\n\n  const handleChange = React.useCallback<\n    FormElementValueChangeHandler<FormElementBinaryStorageValue>\n  >(\n    (formElement, newValue) => {\n      setIsDirty()\n      onChange(formElement, newValue)\n    },\n    [onChange, setIsDirty],\n  )\n\n  return (\n    <div className=\"cypress-signature-element\">\n      <FormElementLabelContainer\n        className=\"ob-signature\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"control\">\n          {value ? (\n            <SignatureDisplay\n              element={element}\n              value={value}\n              onChange={handleChange}\n            />\n          ) : isPageVisible ? (\n            <SignatureDrawing element={element} onChange={handleChange} />\n          ) : null}\n        </div>\n\n        {(isDirty || displayValidationMessage) && !!validationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementSignature)\n\nconst SignatureDrawing = React.memo(function SignatureDrawing({\n  element,\n  onChange,\n}: {\n  element: Props['element']\n  onChange: Props['onChange']\n}) {\n  const canvasRef = React.useRef<SignatureCanvas>(null)\n\n  const [isEmpty, setIsEmpty] = React.useState(true)\n  const [canvasDimensions, setCanvasDimensions] = React.useState<\n    React.CanvasHTMLAttributes<HTMLCanvasElement>\n  >({\n    width: undefined,\n    height: undefined,\n  })\n\n  const handleClear = React.useCallback(() => {\n    if (canvasRef.current) {\n      console.log('Clearing signature...')\n      canvasRef.current.clear()\n    }\n    setIsEmpty(true)\n  }, [])\n\n  const handleDone = React.useCallback(async () => {\n    if (!canvasRef.current) return\n    const trimmedCanvas = canvasRef.current.getTrimmedCanvas()\n\n    // Convert base64 data uri to blob and send it on its way\n    const blob = await canvasToBlob(trimmedCanvas)\n    onChange(element, {\n      value: prepareNewAttachment(blob, 'signature.png', element),\n    })\n  }, [element, onChange])\n\n  // HANDLING CANVAS CHANGE\n  const handleEndDraw = React.useCallback(() => {\n    if (window.cordova) {\n      scrollingService.enableScrolling()\n    }\n    if (isEmpty) {\n      setIsEmpty(false)\n    }\n  }, [isEmpty])\n\n  const ref = React.useRef<HTMLDivElement>(null)\n\n  useResizeObserver<HTMLDivElement>({\n    // @ts-expect-error https://github.com/juliencrn/usehooks-ts/issues/663\n    ref,\n    onResize: setCanvasDimensions,\n  })\n\n  // REACTIVE DISABLING OF CANVAS\n  React.useEffect(() => {\n    if (!canvasRef.current) return\n    if (element.readOnly) {\n      canvasRef.current.off()\n    } else {\n      canvasRef.current.on()\n    }\n  }, [canvasRef, element.readOnly])\n\n  return (\n    <>\n      <div ref={ref}>\n        <SignatureCanvas\n          ref={canvasRef}\n          canvasProps={{\n            ...canvasDimensions,\n            className:\n              'input ob-signature__control cypress-signature-control signature-pad',\n            // @ts-expect-error ???\n            disabled: element.readOnly,\n          }}\n          onEnd={handleEndDraw}\n          onBegin={\n            window.cordova ? scrollingService.disableScrolling : undefined\n          }\n        />\n      </div>\n\n      <div className=\"buttons ob-buttons\">\n        <button\n          type=\"button\"\n          className=\"button ob-button is-light ob-button__clear cypress-clear-signature\"\n          onClick={handleClear}\n          disabled={element.readOnly || isEmpty}\n        >\n          Clear\n        </button>\n        <button\n          type=\"button\"\n          className=\"button ob-button ob-button__done is-primary cypress-done-signature-button\"\n          onClick={handleDone}\n          disabled={element.readOnly || isEmpty}\n        >\n          Save Signature\n        </button>\n      </div>\n    </>\n  )\n})\n\nconst SignatureDisplay = React.memo(function SignatureDisplay({\n  element,\n  value,\n  onChange,\n}: {\n  element: Props['element']\n  value: Props['value']\n  onChange: Props['onChange']\n}) {\n  const result = 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  return (\n    <>\n      <figure className=\"ob-figure\">\n        <DisplayImage {...result} alt={`${element.label}: Signature`} />\n      </figure>\n\n      <div className=\"buttons ob-buttons\">\n        {result.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 is-light ob-button__clear cypress-clear-signature\"\n          onClick={() =>\n            onChange(element, {\n              value: undefined,\n            })\n          }\n          disabled={element.readOnly}\n        >\n          Clear\n        </button>\n      </div>\n    </>\n  )\n})\n\nconst DisplayImage = React.memo(function DisplayImage({\n  alt,\n  uploadErrorMessage,\n  isUploading,\n  isLoadingAttachmentUrl,\n  attachmentUrl,\n  loadAttachmentUrlError,\n  progress,\n}: ReturnType<typeof useAttachment> & {\n  alt: string\n}) {\n  if (uploadErrorMessage) {\n    return (\n      <div className=\"figure-content\" role=\"alert\">\n        <h3 className=\"title is-3\">Upload Failed</h3>\n        <p>\n          Your signature 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 (loadAttachmentUrlError) {\n    return (\n      <div className=\"figure-content\" role=\"alert\">\n        <h3 className=\"title is-3\">Preview Failed</h3>\n        <p>{loadAttachmentUrlError.message}</p>\n      </div>\n    )\n  }\n\n  if (isLoadingAttachmentUrl) {\n    return (\n      <div className=\"figure-content\">\n        <OnLoading small className=\"cypress-signature-loading-image\" />\n      </div>\n    )\n  }\n\n  if (attachmentUrl) {\n    return (\n      <div className=\"figure-content\">\n        <span className=\"ob-figure__status\">\n          <AttachmentStatus\n            isLoadingAttachmentUrl={isLoadingAttachmentUrl}\n            loadAttachmentUrlError={loadAttachmentUrlError}\n            isUploading={isUploading}\n            attachmentUrl={attachmentUrl}\n            progress={progress}\n          />\n        </span>\n        <img\n          src={attachmentUrl}\n          className=\"cypress-signature-image ob-signature__img\"\n          alt={alt}\n        />\n        <ProgressBar progress={progress} isShowing={isUploading} />\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"figure-content\" role=\"alert\">\n      <ImagePreviewUnavailable />\n    </div>\n  )\n})\n"]}

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

@@ -6,6 +6,6 @@ type Props = {
     onChange: FormElementValueChangeHandler;
     value: unknown;
 };
-declare function FormElementSummary({ element, onChange, value }: Props): React.JSX.Element;
+declare function FormElementSummary({ element, onChange, value }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof FormElementSummary>;
 export default _default;

package/dist/form-elements/FormElementSummary.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { localisationService } from '@oneblink/apps';
 import { useFormSubmissionModelParent } from '../hooks/useFormSubmissionModelContext';
@@ -152,12 +153,12 @@ function FormElementSummary({ element, onChange, value }) {
         reducer,
         value,
     ]);
-    return (React.createElement("div", { className: "ob-form__element ob-summary cypress-summary-result " }, !!value && Array.isArray(value) && (React.createElement(SummaryResult, { results: value }))));
+    return (_jsx("div", { className: "ob-form__element ob-summary cypress-summary-result ", children: !!value && Array.isArray(value) && (_jsx(SummaryResult, { results: value })) }));
 }
 const SummaryResult = React.memo(function SummaryResult({ results }) {
-    return (React.createElement(React.Fragment, null, results.map((result, i) => {
-        return (React.createElement("div", { key: `${result.toString()}-${i}`, className: "ob-summary__result-container" }, typeof result === 'string' ? (React.createElement("p", { className: "ob-summary__result has-line-breaks cypress-summary-result-text" }, result)) : (React.createElement(SummaryResult, { results: result }))));
-    })));
+    return (_jsx(_Fragment, { children: results.map((result, i) => {
+            return (_jsx("div", { className: "ob-summary__result-container", children: typeof result === 'string' ? (_jsx("p", { className: "ob-summary__result has-line-breaks cypress-summary-result-text", children: result })) : (_jsx(SummaryResult, { results: result })) }, `${result.toString()}-${i}`));
+        }) }));
 });
 export default React.memo(FormElementSummary);
 //# sourceMappingURL=FormElementSummary.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementSummary.js","sourceRoot":"","sources":["../../src/form-elements/FormElementSummary.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { localisationService } from '@oneblink/apps'\n\nimport { useFormSubmissionModelParent } from '../hooks/useFormSubmissionModelContext'\nimport useFlattenElements from '../hooks/useFlattenElementsContext'\nimport { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport { FormElementValueChangeHandler } from '../types/form'\ntype Props = {\n  element: FormTypes.SummaryElement\n  onChange: FormElementValueChangeHandler\n  value: unknown\n}\n\nconst arraysAreEqual = (a: unknown[], b: unknown[]) => {\n  if (!Array.isArray(a) || !Array.isArray(b)) {\n    if (a !== b) return false\n    return true\n  }\n  if (a.length !== b.length) return false\n\n  for (let i = 0; i < a.length; i++) {\n    if (Array.isArray(a[i]) && Array.isArray(b[i])) {\n      const areEqual = arraysAreEqual(a[i] as unknown[], b[i] as unknown[])\n      if (!areEqual) return false\n      continue\n    }\n    if (a[i] !== b[i]) return false\n  }\n  return true\n}\nfunction FormElementSummary({ element, onChange, value }: Props) {\n  const { formSubmissionModel } = useFormSubmissionModelParent()\n  const flattenedElements = useFlattenElements()\n\n  const reducer = React.useCallback(\n    (\n      partialSummary: FormElementSummaryResults,\n      formElement: FormTypes.FormElement,\n      submission: SubmissionTypes.S3SubmissionData['submission'],\n    ) => {\n      if (!('name' in formElement)) return partialSummary\n      if (\n        formElement.type !== 'repeatableSet' &&\n        formElement.type !== 'form' &&\n        !element.elementIds.some((elementId) => elementId === formElement.id)\n      ) {\n        return partialSummary\n      }\n\n      const formElementValue = submission[formElement.name]\n      if (!formElementValue && formElementValue !== 0) {\n        return partialSummary\n      }\n\n      switch (formElement.type) {\n        case 'repeatableSet': {\n          if (!Array.isArray(formElementValue)) return partialSummary\n          // If we found a repeatable set, look through child elements\n          // to find the summary elements. Need to start a new array for\n          // this structure and look at each entry in the repeatable set\n          for (const entry of formElementValue) {\n            const repeatableSetSummaryValues = formElement.elements.reduce(\n              (\n                partialSummary: FormElementSummaryResults,\n                formElement: FormTypes.FormElement,\n              ) =>\n                reducer(\n                  partialSummary,\n                  formElement,\n                  // Pleasing TypeScript\n                  entry instanceof Object ? entry : {},\n                ),\n              [],\n            )\n            if (repeatableSetSummaryValues.length) {\n              partialSummary.push(repeatableSetSummaryValues)\n            }\n          }\n          break\n        }\n        case 'form': {\n          const formSummaryValues = (formElement.elements || []).reduce(\n            (\n              partialSummary: FormElementSummaryResults,\n              formElement: FormTypes.FormElement,\n            ) =>\n              reducer(\n                partialSummary,\n                formElement,\n                // @ts-expect-error Pleasing TypeScript\n                formElementValue instanceof Object ? formElementValue : {},\n              ),\n            [],\n          )\n          if (formSummaryValues.length) {\n            partialSummary.push(formSummaryValues)\n          }\n\n          break\n        }\n        case 'select':\n        case 'autocomplete':\n        case 'radio':\n        case 'checkboxes': {\n          const optionValues = []\n          if (Array.isArray(formElementValue)) {\n            optionValues.push(...formElementValue)\n          } else {\n            optionValues.push(formElementValue)\n          }\n          if (Array.isArray(formElement.options)) {\n            partialSummary.push(\n              ...optionValues.reduce((optionLabels, optionValue) => {\n                const option = formElement.options?.find(\n                  ({ value }: FormTypes.ChoiceElementOption) =>\n                    optionValue === value,\n                )\n                if (option) {\n                  optionLabels.push(option.label)\n                }\n                return optionLabels\n              }, []),\n            )\n          }\n          break\n        }\n        case 'date': {\n          const date = localisationService.generateDate({\n            daysOffset: undefined,\n            value: formElementValue as string,\n          })\n          if (date) {\n            partialSummary.push(localisationService.formatDate(date))\n          }\n          break\n        }\n        case 'datetime': {\n          if (typeof formElementValue !== 'string') return partialSummary\n          partialSummary.push(\n            localisationService.formatDatetime(new Date(formElementValue)),\n          )\n          break\n        }\n        case 'time': {\n          if (typeof formElementValue !== 'string') return partialSummary\n          partialSummary.push(\n            localisationService.formatTime(new Date(formElementValue)),\n          )\n          break\n        }\n        default: {\n          // Pleasing TypeScript WHILE COVERING ALL BASES\n          if (\n            typeof formElementValue !== 'string' &&\n            typeof formElementValue !== 'object' &&\n            typeof formElementValue !== 'number' &&\n            typeof formElementValue !== 'function' &&\n            typeof formElementValue !== 'boolean'\n          ) {\n            return partialSummary\n          }\n\n          partialSummary.push(formElementValue.toString())\n        }\n      }\n      return partialSummary\n    },\n    [element.elementIds],\n  )\n\n  // MODEL LISTENER\n  React.useEffect(() => {\n    const summary = flattenedElements.reduce<FormElementSummaryResults>(\n      (partialSummary, formElement) => {\n        return reducer(partialSummary, formElement, formSubmissionModel)\n      },\n\n      [],\n    )\n\n    if (value === undefined) {\n      if (!summary.length) return\n    }\n    if (arraysAreEqual(value as FormElementSummaryResults, summary)) {\n      return\n    }\n    if (summary.length) {\n      onChange(element, {\n        value: summary,\n      })\n    } else {\n      onChange(element, {\n        value: undefined,\n      })\n    }\n  }, [\n    element,\n    flattenedElements,\n    formSubmissionModel,\n    onChange,\n    reducer,\n    value,\n  ])\n\n  return (\n    <div className=\"ob-form__element ob-summary cypress-summary-result \">\n      {!!value && Array.isArray(value) && (\n        <SummaryResult results={value}></SummaryResult>\n      )}\n    </div>\n  )\n}\n\ntype FormElementSummaryResults = Array<string | FormElementSummaryResults>\ntype FormElementSummaryResultProps = {\n  results: FormElementSummaryResults\n}\n\nconst SummaryResult = React.memo<FormElementSummaryResultProps>(\n  function SummaryResult({ results }) {\n    return (\n      <>\n        {results.map((result, i) => {\n          return (\n            <div\n              key={`${result.toString()}-${i}`}\n              className=\"ob-summary__result-container\"\n            >\n              {typeof result === 'string' ? (\n                <p className=\"ob-summary__result has-line-breaks cypress-summary-result-text\">\n                  {result}\n                </p>\n              ) : (\n                <SummaryResult results={result}></SummaryResult>\n              )}\n            </div>\n          )\n        })}\n      </>\n    )\n  },\n)\n\nexport default React.memo(FormElementSummary)\n"]}
+{"version":3,"file":"FormElementSummary.js","sourceRoot":"","sources":["../../src/form-elements/FormElementSummary.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAEpD,OAAO,EAAE,4BAA4B,EAAE,MAAM,wCAAwC,CAAA;AACrF,OAAO,kBAAkB,MAAM,oCAAoC,CAAA;AASnE,MAAM,cAAc,GAAG,CAAC,CAAY,EAAE,CAAY,EAAE,EAAE;IACpD,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;QAC3C,IAAI,CAAC,KAAK,CAAC;YAAE,OAAO,KAAK,CAAA;QACzB,OAAO,IAAI,CAAA;IACb,CAAC;IACD,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,MAAM;QAAE,OAAO,KAAK,CAAA;IAEvC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QAClC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YAC/C,MAAM,QAAQ,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAc,EAAE,CAAC,CAAC,CAAC,CAAc,CAAC,CAAA;YACrE,IAAI,CAAC,QAAQ;gBAAE,OAAO,KAAK,CAAA;YAC3B,SAAQ;QACV,CAAC;QACD,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YAAE,OAAO,KAAK,CAAA;IACjC,CAAC;IACD,OAAO,IAAI,CAAA;AACb,CAAC,CAAA;AACD,SAAS,kBAAkB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAS;IAC7D,MAAM,EAAE,mBAAmB,EAAE,GAAG,4BAA4B,EAAE,CAAA;IAC9D,MAAM,iBAAiB,GAAG,kBAAkB,EAAE,CAAA;IAE9C,MAAM,OAAO,GAAG,KAAK,CAAC,WAAW,CAC/B,CACE,cAAyC,EACzC,WAAkC,EAClC,UAA0D,EAC1D,EAAE;QACF,IAAI,CAAC,CAAC,MAAM,IAAI,WAAW,CAAC;YAAE,OAAO,cAAc,CAAA;QACnD,IACE,WAAW,CAAC,IAAI,KAAK,eAAe;YACpC,WAAW,CAAC,IAAI,KAAK,MAAM;YAC3B,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,KAAK,WAAW,CAAC,EAAE,CAAC,EACrE,CAAC;YACD,OAAO,cAAc,CAAA;QACvB,CAAC;QAED,MAAM,gBAAgB,GAAG,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,CAAA;QACrD,IAAI,CAAC,gBAAgB,IAAI,gBAAgB,KAAK,CAAC,EAAE,CAAC;YAChD,OAAO,cAAc,CAAA;QACvB,CAAC;QAED,QAAQ,WAAW,CAAC,IAAI,EAAE,CAAC;YACzB,KAAK,eAAe,CAAC,CAAC,CAAC;gBACrB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC;oBAAE,OAAO,cAAc,CAAA;gBAC3D,4DAA4D;gBAC5D,8DAA8D;gBAC9D,8DAA8D;gBAC9D,KAAK,MAAM,KAAK,IAAI,gBAAgB,EAAE,CAAC;oBACrC,MAAM,0BAA0B,GAAG,WAAW,CAAC,QAAQ,CAAC,MAAM,CAC5D,CACE,cAAyC,EACzC,WAAkC,EAClC,EAAE,CACF,OAAO,CACL,cAAc,EACd,WAAW;oBACX,sBAAsB;oBACtB,KAAK,YAAY,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CACrC,EACH,EAAE,CACH,CAAA;oBACD,IAAI,0BAA0B,CAAC,MAAM,EAAE,CAAC;wBACtC,cAAc,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAA;oBACjD,CAAC;gBACH,CAAC;gBACD,MAAK;YACP,CAAC;YACD,KAAK,MAAM,CAAC,CAAC,CAAC;gBACZ,MAAM,iBAAiB,GAAG,CAAC,WAAW,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,MAAM,CAC3D,CACE,cAAyC,EACzC,WAAkC,EAClC,EAAE,CACF,OAAO,CACL,cAAc,EACd,WAAW;gBACX,uCAAuC;gBACvC,gBAAgB,YAAY,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAC3D,EACH,EAAE,CACH,CAAA;gBACD,IAAI,iBAAiB,CAAC,MAAM,EAAE,CAAC;oBAC7B,cAAc,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAA;gBACxC,CAAC;gBAED,MAAK;YACP,CAAC;YACD,KAAK,QAAQ,CAAC;YACd,KAAK,cAAc,CAAC;YACpB,KAAK,OAAO,CAAC;YACb,KAAK,YAAY,CAAC,CAAC,CAAC;gBAClB,MAAM,YAAY,GAAG,EAAE,CAAA;gBACvB,IAAI,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,EAAE,CAAC;oBACpC,YAAY,CAAC,IAAI,CAAC,GAAG,gBAAgB,CAAC,CAAA;gBACxC,CAAC;qBAAM,CAAC;oBACN,YAAY,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;gBACrC,CAAC;gBACD,IAAI,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,CAAC;oBACvC,cAAc,CAAC,IAAI,CACjB,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC,YAAY,EAAE,WAAW,EAAE,EAAE;;wBACnD,MAAM,MAAM,GAAG,MAAA,WAAW,CAAC,OAAO,0CAAE,IAAI,CACtC,CAAC,EAAE,KAAK,EAAiC,EAAE,EAAE,CAC3C,WAAW,KAAK,KAAK,CACxB,CAAA;wBACD,IAAI,MAAM,EAAE,CAAC;4BACX,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;wBACjC,CAAC;wBACD,OAAO,YAAY,CAAA;oBACrB,CAAC,EAAE,EAAE,CAAC,CACP,CAAA;gBACH,CAAC;gBACD,MAAK;YACP,CAAC;YACD,KAAK,MAAM,CAAC,CAAC,CAAC;gBACZ,MAAM,IAAI,GAAG,mBAAmB,CAAC,YAAY,CAAC;oBAC5C,UAAU,EAAE,SAAS;oBACrB,KAAK,EAAE,gBAA0B;iBAClC,CAAC,CAAA;gBACF,IAAI,IAAI,EAAE,CAAC;oBACT,cAAc,CAAC,IAAI,CAAC,mBAAmB,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAA;gBAC3D,CAAC;gBACD,MAAK;YACP,CAAC;YACD,KAAK,UAAU,CAAC,CAAC,CAAC;gBAChB,IAAI,OAAO,gBAAgB,KAAK,QAAQ;oBAAE,OAAO,cAAc,CAAA;gBAC/D,cAAc,CAAC,IAAI,CACjB,mBAAmB,CAAC,cAAc,CAAC,IAAI,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAC/D,CAAA;gBACD,MAAK;YACP,CAAC;YACD,KAAK,MAAM,CAAC,CAAC,CAAC;gBACZ,IAAI,OAAO,gBAAgB,KAAK,QAAQ;oBAAE,OAAO,cAAc,CAAA;gBAC/D,cAAc,CAAC,IAAI,CACjB,mBAAmB,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAC3D,CAAA;gBACD,MAAK;YACP,CAAC;YACD,OAAO,CAAC,CAAC,CAAC;gBACR,+CAA+C;gBAC/C,IACE,OAAO,gBAAgB,KAAK,QAAQ;oBACpC,OAAO,gBAAgB,KAAK,QAAQ;oBACpC,OAAO,gBAAgB,KAAK,QAAQ;oBACpC,OAAO,gBAAgB,KAAK,UAAU;oBACtC,OAAO,gBAAgB,KAAK,SAAS,EACrC,CAAC;oBACD,OAAO,cAAc,CAAA;gBACvB,CAAC;gBAED,cAAc,CAAC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAA;YAClD,CAAC;QACH,CAAC;QACD,OAAO,cAAc,CAAA;IACvB,CAAC,EACD,CAAC,OAAO,CAAC,UAAU,CAAC,CACrB,CAAA;IAED,iBAAiB;IACjB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,OAAO,GAAG,iBAAiB,CAAC,MAAM,CACtC,CAAC,cAAc,EAAE,WAAW,EAAE,EAAE;YAC9B,OAAO,OAAO,CAAC,cAAc,EAAE,WAAW,EAAE,mBAAmB,CAAC,CAAA;QAClE,CAAC,EAED,EAAE,CACH,CAAA;QAED,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACxB,IAAI,CAAC,OAAO,CAAC,MAAM;gBAAE,OAAM;QAC7B,CAAC;QACD,IAAI,cAAc,CAAC,KAAkC,EAAE,OAAO,CAAC,EAAE,CAAC;YAChE,OAAM;QACR,CAAC;QACD,IAAI,OAAO,CAAC,MAAM,EAAE,CAAC;YACnB,QAAQ,CAAC,OAAO,EAAE;gBAChB,KAAK,EAAE,OAAO;aACf,CAAC,CAAA;QACJ,CAAC;aAAM,CAAC;YACN,QAAQ,CAAC,OAAO,EAAE;gBAChB,KAAK,EAAE,SAAS;aACjB,CAAC,CAAA;QACJ,CAAC;IACH,CAAC,EAAE;QACD,OAAO;QACP,iBAAiB;QACjB,mBAAmB;QACnB,QAAQ;QACR,OAAO;QACP,KAAK;KACN,CAAC,CAAA;IAEF,OAAO,CACL,cAAK,SAAS,EAAC,qDAAqD,YACjE,CAAC,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAClC,KAAC,aAAa,IAAC,OAAO,EAAE,KAAK,GAAkB,CAChD,GACG,CACP,CAAA;AACH,CAAC;AAOD,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAC9B,SAAS,aAAa,CAAC,EAAE,OAAO,EAAE;IAChC,OAAO,CACL,4BACG,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACzB,OAAO,CACL,cAEE,SAAS,EAAC,8BAA8B,YAEvC,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC5B,YAAG,SAAS,EAAC,gEAAgE,YAC1E,MAAM,GACL,CACL,CAAC,CAAC,CAAC,CACF,KAAC,aAAa,IAAC,OAAO,EAAE,MAAM,GAAkB,CACjD,IATI,GAAG,MAAM,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAU5B,CACP,CAAA;QACH,CAAC,CAAC,GACD,CACJ,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { localisationService } from '@oneblink/apps'\n\nimport { useFormSubmissionModelParent } from '../hooks/useFormSubmissionModelContext'\nimport useFlattenElements from '../hooks/useFlattenElementsContext'\nimport { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport { FormElementValueChangeHandler } from '../types/form'\ntype Props = {\n  element: FormTypes.SummaryElement\n  onChange: FormElementValueChangeHandler\n  value: unknown\n}\n\nconst arraysAreEqual = (a: unknown[], b: unknown[]) => {\n  if (!Array.isArray(a) || !Array.isArray(b)) {\n    if (a !== b) return false\n    return true\n  }\n  if (a.length !== b.length) return false\n\n  for (let i = 0; i < a.length; i++) {\n    if (Array.isArray(a[i]) && Array.isArray(b[i])) {\n      const areEqual = arraysAreEqual(a[i] as unknown[], b[i] as unknown[])\n      if (!areEqual) return false\n      continue\n    }\n    if (a[i] !== b[i]) return false\n  }\n  return true\n}\nfunction FormElementSummary({ element, onChange, value }: Props) {\n  const { formSubmissionModel } = useFormSubmissionModelParent()\n  const flattenedElements = useFlattenElements()\n\n  const reducer = React.useCallback(\n    (\n      partialSummary: FormElementSummaryResults,\n      formElement: FormTypes.FormElement,\n      submission: SubmissionTypes.S3SubmissionData['submission'],\n    ) => {\n      if (!('name' in formElement)) return partialSummary\n      if (\n        formElement.type !== 'repeatableSet' &&\n        formElement.type !== 'form' &&\n        !element.elementIds.some((elementId) => elementId === formElement.id)\n      ) {\n        return partialSummary\n      }\n\n      const formElementValue = submission[formElement.name]\n      if (!formElementValue && formElementValue !== 0) {\n        return partialSummary\n      }\n\n      switch (formElement.type) {\n        case 'repeatableSet': {\n          if (!Array.isArray(formElementValue)) return partialSummary\n          // If we found a repeatable set, look through child elements\n          // to find the summary elements. Need to start a new array for\n          // this structure and look at each entry in the repeatable set\n          for (const entry of formElementValue) {\n            const repeatableSetSummaryValues = formElement.elements.reduce(\n              (\n                partialSummary: FormElementSummaryResults,\n                formElement: FormTypes.FormElement,\n              ) =>\n                reducer(\n                  partialSummary,\n                  formElement,\n                  // Pleasing TypeScript\n                  entry instanceof Object ? entry : {},\n                ),\n              [],\n            )\n            if (repeatableSetSummaryValues.length) {\n              partialSummary.push(repeatableSetSummaryValues)\n            }\n          }\n          break\n        }\n        case 'form': {\n          const formSummaryValues = (formElement.elements || []).reduce(\n            (\n              partialSummary: FormElementSummaryResults,\n              formElement: FormTypes.FormElement,\n            ) =>\n              reducer(\n                partialSummary,\n                formElement,\n                // @ts-expect-error Pleasing TypeScript\n                formElementValue instanceof Object ? formElementValue : {},\n              ),\n            [],\n          )\n          if (formSummaryValues.length) {\n            partialSummary.push(formSummaryValues)\n          }\n\n          break\n        }\n        case 'select':\n        case 'autocomplete':\n        case 'radio':\n        case 'checkboxes': {\n          const optionValues = []\n          if (Array.isArray(formElementValue)) {\n            optionValues.push(...formElementValue)\n          } else {\n            optionValues.push(formElementValue)\n          }\n          if (Array.isArray(formElement.options)) {\n            partialSummary.push(\n              ...optionValues.reduce((optionLabels, optionValue) => {\n                const option = formElement.options?.find(\n                  ({ value }: FormTypes.ChoiceElementOption) =>\n                    optionValue === value,\n                )\n                if (option) {\n                  optionLabels.push(option.label)\n                }\n                return optionLabels\n              }, []),\n            )\n          }\n          break\n        }\n        case 'date': {\n          const date = localisationService.generateDate({\n            daysOffset: undefined,\n            value: formElementValue as string,\n          })\n          if (date) {\n            partialSummary.push(localisationService.formatDate(date))\n          }\n          break\n        }\n        case 'datetime': {\n          if (typeof formElementValue !== 'string') return partialSummary\n          partialSummary.push(\n            localisationService.formatDatetime(new Date(formElementValue)),\n          )\n          break\n        }\n        case 'time': {\n          if (typeof formElementValue !== 'string') return partialSummary\n          partialSummary.push(\n            localisationService.formatTime(new Date(formElementValue)),\n          )\n          break\n        }\n        default: {\n          // Pleasing TypeScript WHILE COVERING ALL BASES\n          if (\n            typeof formElementValue !== 'string' &&\n            typeof formElementValue !== 'object' &&\n            typeof formElementValue !== 'number' &&\n            typeof formElementValue !== 'function' &&\n            typeof formElementValue !== 'boolean'\n          ) {\n            return partialSummary\n          }\n\n          partialSummary.push(formElementValue.toString())\n        }\n      }\n      return partialSummary\n    },\n    [element.elementIds],\n  )\n\n  // MODEL LISTENER\n  React.useEffect(() => {\n    const summary = flattenedElements.reduce<FormElementSummaryResults>(\n      (partialSummary, formElement) => {\n        return reducer(partialSummary, formElement, formSubmissionModel)\n      },\n\n      [],\n    )\n\n    if (value === undefined) {\n      if (!summary.length) return\n    }\n    if (arraysAreEqual(value as FormElementSummaryResults, summary)) {\n      return\n    }\n    if (summary.length) {\n      onChange(element, {\n        value: summary,\n      })\n    } else {\n      onChange(element, {\n        value: undefined,\n      })\n    }\n  }, [\n    element,\n    flattenedElements,\n    formSubmissionModel,\n    onChange,\n    reducer,\n    value,\n  ])\n\n  return (\n    <div className=\"ob-form__element ob-summary cypress-summary-result \">\n      {!!value && Array.isArray(value) && (\n        <SummaryResult results={value}></SummaryResult>\n      )}\n    </div>\n  )\n}\n\ntype FormElementSummaryResults = Array<string | FormElementSummaryResults>\ntype FormElementSummaryResultProps = {\n  results: FormElementSummaryResults\n}\n\nconst SummaryResult = React.memo<FormElementSummaryResultProps>(\n  function SummaryResult({ results }) {\n    return (\n      <>\n        {results.map((result, i) => {\n          return (\n            <div\n              key={`${result.toString()}-${i}`}\n              className=\"ob-summary__result-container\"\n            >\n              {typeof result === 'string' ? (\n                <p className=\"ob-summary__result has-line-breaks cypress-summary-result-text\">\n                  {result}\n                </p>\n              ) : (\n                <SummaryResult results={result}></SummaryResult>\n              )}\n            </div>\n          )\n        })}\n      </>\n    )\n  },\n)\n\nexport default React.memo(FormElementSummary)\n"]}

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

@@ -10,6 +10,6 @@ type Props = {
     validationMessage: string | undefined;
     autocompleteAttributes?: string;
 } & IsDirtyProps;
-declare function FormElementTelephone({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, autocompleteAttributes, }: Props): React.JSX.Element;
+declare function FormElementTelephone({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, autocompleteAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof FormElementTelephone>;
 export default _default;

package/dist/form-elements/FormElementTelephone.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementTelephone.js","sourceRoot":"","sources":["../../src/form-elements/FormElementTelephone.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,qBAAqB,MAAM,8CAA8C,CAAA;AAChF,OAAO,YAAY,MAAM,qCAAqC,CAAA;AAE9D,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AAExF,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAA;AAC1E,OAAO,yBAAyB,MAAM,oCAAoC,CAAA;AAC1E,OAAO,YAAY,MAAM,4BAA4B,CAAA;AACrD,OAAO,4BAA4B,MAAM,qDAAqD,CAAA;AAY9F,SAAS,oBAAoB,CAAC,EAC5B,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,OAAO,EACP,UAAU,EACV,sBAAsB,GAChB;IACN,MAAM,eAAe,GAAG,yBAAyB,CAAC,EAAE,EAAE,OAAO,CAAC,CAAA;IAC9D,MAAM,IAAI,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;IAEnD,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,2BAA2B;QACxC,oBAAC,yBAAyB,IACxB,SAAS,EAAC,cAAc,EACxB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ;YAE1B,6BAAK,SAAS,EAAC,kBAAkB;gBAC/B,6BAAK,SAAS,EAAC,qCAAqC;oBAClD,+BACE,IAAI,EAAC,KAAK,EACV,WAAW,EAAE,OAAO,CAAC,gBAAgB,EACrC,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,SAAS,EAAC,0CAA0C,EACpD,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CACd,QAAQ,CAAC,OAAO,EAAE;4BAChB,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,SAAS;yBACnC,CAAC,EAEJ,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,MAAM,EAAE,UAAU,sBACA,eAAe,EACjC,YAAY,EAAE,sBAAsB,mBACrB,OAAO,CAAC,QAAQ,GAC/B;oBACF,8BAAM,SAAS,EAAC,sCAAsC;wBACpD,oBAAC,YAAY,IAAC,SAAS,EAAC,WAAW,YAAqB,CACnD,CACH;gBACL,CAAC,CAAC,OAAO,CAAC,QAAQ,IAAI,CAAC,CAAC,KAAK,IAAI,CAChC,6BAAK,SAAS,EAAC,SAAS;oBACtB,oBAAC,qBAAqB,IACpB,SAAS,EAAC,oEAAoE,EAC9E,IAAI,EAAE,IAAI,GACV,CACE,CACP;gBACD,oBAAC,YAAY,IACX,aAAa,QACb,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,OAAO,CAAC,YAAY,GACxC,CACE;YAEL,6BAA6B,IAAI,CAChC,oBAAC,4BAA4B,IAAC,OAAO,EAAE,iBAAiB,GAAI,CAC7D,CACyB,CACxB,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport MaterialIcon from '../components/MaterialIcon'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n  id: string\n  element: FormTypes.TelephoneElement\n  value: unknown\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementTelephone({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n  autocompleteAttributes,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const text = typeof value === 'string' ? value : ''\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  return (\n    <div className=\"cypress-telephone-element\">\n      <FormElementLabelContainer\n        className=\"ob-telephone\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"field has-addons\">\n          <div className=\"control is-expanded has-icons-right\">\n            <input\n              type=\"tel\"\n              placeholder={element.placeholderValue}\n              id={id}\n              name={element.name}\n              className=\"input ob-input cypress-telephone-control\"\n              value={text}\n              onChange={(e) =>\n                onChange(element, {\n                  value: e.target.value || undefined,\n                })\n              }\n              required={element.required}\n              disabled={element.readOnly}\n              onBlur={setIsDirty}\n              aria-describedby={ariaDescribedby}\n              autoComplete={autocompleteAttributes}\n              aria-required={element.required}\n            />\n            <span className=\"ob-input-icon icon is-small is-right\">\n              <MaterialIcon className=\"is-size-5\">phone</MaterialIcon>\n            </span>\n          </div>\n          {!!element.readOnly && !!value && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n            lookupButtonConfig={element.lookupButton}\n          />\n        </div>\n\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementTelephone)\n"]}
+{"version":3,"file":"FormElementTelephone.js","sourceRoot":"","sources":["../../src/form-elements/FormElementTelephone.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,qBAAqB,MAAM,8CAA8C,CAAA;AAChF,OAAO,YAAY,MAAM,qCAAqC,CAAA;AAE9D,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AAExF,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAA;AAC1E,OAAO,yBAAyB,MAAM,oCAAoC,CAAA;AAC1E,OAAO,YAAY,MAAM,4BAA4B,CAAA;AACrD,OAAO,4BAA4B,MAAM,qDAAqD,CAAA;AAY9F,SAAS,oBAAoB,CAAC,EAC5B,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,OAAO,EACP,UAAU,EACV,sBAAsB,GAChB;IACN,MAAM,eAAe,GAAG,yBAAyB,CAAC,EAAE,EAAE,OAAO,CAAC,CAAA;IAC9D,MAAM,IAAI,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;IAEnD,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAA;IACnE,MAAM,6BAA6B,GACjC,CAAC,OAAO,IAAI,wBAAwB,CAAC,IAAI,CAAC,CAAC,iBAAiB,IAAI,CAAC,WAAW,CAAA;IAE9E,OAAO,CACL,cAAK,SAAS,EAAC,2BAA2B,YACxC,MAAC,yBAAyB,IACxB,SAAS,EAAC,cAAc,EACxB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ,aAE1B,eAAK,SAAS,EAAC,kBAAkB,aAC/B,eAAK,SAAS,EAAC,qCAAqC,aAClD,gBACE,IAAI,EAAC,KAAK,EACV,WAAW,EAAE,OAAO,CAAC,gBAAgB,EACrC,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,SAAS,EAAC,0CAA0C,EACpD,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CACd,QAAQ,CAAC,OAAO,EAAE;wCAChB,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,SAAS;qCACnC,CAAC,EAEJ,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,MAAM,EAAE,UAAU,sBACA,eAAe,EACjC,YAAY,EAAE,sBAAsB,mBACrB,OAAO,CAAC,QAAQ,GAC/B,EACF,eAAM,SAAS,EAAC,sCAAsC,YACpD,KAAC,YAAY,IAAC,SAAS,EAAC,WAAW,sBAAqB,GACnD,IACH,EACL,CAAC,CAAC,OAAO,CAAC,QAAQ,IAAI,CAAC,CAAC,KAAK,IAAI,CAChC,cAAK,SAAS,EAAC,SAAS,YACtB,KAAC,qBAAqB,IACpB,SAAS,EAAC,oEAAoE,EAC9E,IAAI,EAAE,IAAI,GACV,GACE,CACP,EACD,KAAC,YAAY,IACX,aAAa,QACb,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,OAAO,CAAC,YAAY,GACxC,IACE,EAEL,6BAA6B,IAAI,CAChC,KAAC,4BAA4B,IAAC,OAAO,EAAE,iBAAiB,GAAI,CAC7D,IACyB,GACxB,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport MaterialIcon from '../components/MaterialIcon'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n  id: string\n  element: FormTypes.TelephoneElement\n  value: unknown\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementTelephone({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n  autocompleteAttributes,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const text = typeof value === 'string' ? value : ''\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  return (\n    <div className=\"cypress-telephone-element\">\n      <FormElementLabelContainer\n        className=\"ob-telephone\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"field has-addons\">\n          <div className=\"control is-expanded has-icons-right\">\n            <input\n              type=\"tel\"\n              placeholder={element.placeholderValue}\n              id={id}\n              name={element.name}\n              className=\"input ob-input cypress-telephone-control\"\n              value={text}\n              onChange={(e) =>\n                onChange(element, {\n                  value: e.target.value || undefined,\n                })\n              }\n              required={element.required}\n              disabled={element.readOnly}\n              onBlur={setIsDirty}\n              aria-describedby={ariaDescribedby}\n              autoComplete={autocompleteAttributes}\n              aria-required={element.required}\n            />\n            <span className=\"ob-input-icon icon is-small is-right\">\n              <MaterialIcon className=\"is-size-5\">phone</MaterialIcon>\n            </span>\n          </div>\n          {!!element.readOnly && !!value && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n            lookupButtonConfig={element.lookupButton}\n          />\n        </div>\n\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementTelephone)\n"]}

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

@@ -10,6 +10,6 @@ type Props = {
     validationMessage: string | undefined;
     autocompleteAttributes?: string;
 } & IsDirtyProps;
-declare function FormElementText({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, autocompleteAttributes, }: Props): React.JSX.Element;
+declare function FormElementText({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, autocompleteAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof FormElementText>;
 export default _default;

package/dist/form-elements/FormElementText.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import clsx from 'clsx';
 import CopyToClipboardButton from '../components/renderer/CopyToClipboardButton';
@@ -11,27 +12,11 @@ function FormElementText({ id, element, value, onChange, validationMessage, disp
     const text = typeof value === 'string' ? value : '';
     const { isLookingUp } = React.useContext(LookupNotificationContext);
     const isDisplayingValidationMessage = (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp;
-    return (React.createElement("div", { className: "cypress-text-element" },
-        React.createElement(FormElementLabelContainer, { className: "ob-text", id: id, element: element, required: element.required },
-            React.createElement("div", { className: "field has-addons" },
-                React.createElement("div", { className: "control is-expanded" },
-                    React.createElement("input", { type: "text", placeholder: element.placeholderValue, id: id, name: element.name, className: "input ob-input cypress-text-control", value: text, onChange: (e) => onChange(element, {
-                            value: e.target.value || undefined,
-                        }), required: element.required, disabled: element.readOnly, onBlur: setIsDirty, "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes, "aria-required": element.required })),
-                !!element.readOnly && !!value && (React.createElement("div", { className: "control" },
-                    React.createElement(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }))),
-                React.createElement(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton })),
-            (isDisplayingValidationMessage || !!element.maxLength) && (React.createElement("div", { className: "has-margin-top-8" },
-                React.createElement("div", { className: "is-flex is-justify-content-space-between" },
-                    isDisplayingValidationMessage ? (React.createElement("div", { role: "alert", className: "has-text-danger ob-error__text cypress-validation-message" },
-                        React.createElement(ValidationIcon, null),
-                        validationMessage)) : (React.createElement("div", null)),
-                    !!element.maxLength && (React.createElement("div", { className: clsx('ob-max-length__text cypress-max-length-message', {
-                            'has-text-danger': text.length > element.maxLength,
-                        }) },
-                        text.length,
-                        " / ",
-                        element.maxLength))))))));
+    return (_jsx("div", { className: "cypress-text-element", children: _jsxs(FormElementLabelContainer, { className: "ob-text", id: id, element: element, required: element.required, children: [_jsxs("div", { className: "field has-addons", children: [_jsx("div", { className: "control is-expanded", children: _jsx("input", { type: "text", placeholder: element.placeholderValue, id: id, name: element.name, className: "input ob-input cypress-text-control", value: text, onChange: (e) => onChange(element, {
+                                    value: e.target.value || undefined,
+                                }), required: element.required, disabled: element.readOnly, onBlur: setIsDirty, "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes, "aria-required": element.required }) }), !!element.readOnly && !!value && (_jsx("div", { className: "control", children: _jsx(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }) })), _jsx(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton })] }), (isDisplayingValidationMessage || !!element.maxLength) && (_jsx("div", { className: "has-margin-top-8", children: _jsxs("div", { className: "is-flex is-justify-content-space-between", children: [isDisplayingValidationMessage ? (_jsxs("div", { role: "alert", className: "has-text-danger ob-error__text cypress-validation-message", children: [_jsx(ValidationIcon, {}), validationMessage] })) : (_jsx("div", {})), !!element.maxLength && (_jsxs("div", { className: clsx('ob-max-length__text cypress-max-length-message', {
+                                    'has-text-danger': text.length > element.maxLength,
+                                }), children: [text.length, " / ", element.maxLength] }))] }) }))] }) }));
 }
 export default React.memo(FormElementText);
 //# sourceMappingURL=FormElementText.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementText.js","sourceRoot":"","sources":["../../src/form-elements/FormElementText.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport { ValidationIcon } from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n  id: string\n  element: FormTypes.TextElement\n  value: unknown\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementText({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n  autocompleteAttributes,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const text = typeof value === 'string' ? value : ''\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  return (\n    <div className=\"cypress-text-element\">\n      <FormElementLabelContainer\n        className=\"ob-text\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"field has-addons\">\n          <div className=\"control is-expanded\">\n            <input\n              type=\"text\"\n              placeholder={element.placeholderValue}\n              id={id}\n              name={element.name}\n              className=\"input ob-input cypress-text-control\"\n              value={text}\n              onChange={(e) =>\n                onChange(element, {\n                  value: e.target.value || undefined,\n                })\n              }\n              required={element.required}\n              disabled={element.readOnly}\n              onBlur={setIsDirty}\n              aria-describedby={ariaDescribedby}\n              autoComplete={autocompleteAttributes}\n              aria-required={element.required}\n            />\n          </div>\n          {!!element.readOnly && !!value && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n            lookupButtonConfig={element.lookupButton}\n          />\n        </div>\n        {(isDisplayingValidationMessage || !!element.maxLength) && (\n          <div className=\"has-margin-top-8\">\n            <div className=\"is-flex is-justify-content-space-between\">\n              {isDisplayingValidationMessage ? (\n                <div\n                  role=\"alert\"\n                  className=\"has-text-danger ob-error__text cypress-validation-message\"\n                >\n                  <ValidationIcon />\n                  {validationMessage}\n                </div>\n              ) : (\n                <div />\n              )}\n              {!!element.maxLength && (\n                <div\n                  className={clsx(\n                    'ob-max-length__text cypress-max-length-message',\n                    {\n                      'has-text-danger': text.length > element.maxLength,\n                    },\n                  )}\n                >\n                  {text.length} / {element.maxLength}\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementText)\n"]}
+{"version":3,"file":"FormElementText.js","sourceRoot":"","sources":["../../src/form-elements/FormElementText.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,qBAAqB,MAAM,8CAA8C,CAAA;AAChF,OAAO,YAAY,MAAM,qCAAqC,CAAA;AAE9D,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AAExF,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAA;AAC1E,OAAO,yBAAyB,MAAM,oCAAoC,CAAA;AAC1E,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAA;AAYpF,SAAS,eAAe,CAAC,EACvB,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,OAAO,EACP,UAAU,EACV,sBAAsB,GAChB;IACN,MAAM,eAAe,GAAG,yBAAyB,CAAC,EAAE,EAAE,OAAO,CAAC,CAAA;IAC9D,MAAM,IAAI,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;IAEnD,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAA;IACnE,MAAM,6BAA6B,GACjC,CAAC,OAAO,IAAI,wBAAwB,CAAC,IAAI,CAAC,CAAC,iBAAiB,IAAI,CAAC,WAAW,CAAA;IAE9E,OAAO,CACL,cAAK,SAAS,EAAC,sBAAsB,YACnC,MAAC,yBAAyB,IACxB,SAAS,EAAC,SAAS,EACnB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ,aAE1B,eAAK,SAAS,EAAC,kBAAkB,aAC/B,cAAK,SAAS,EAAC,qBAAqB,YAClC,gBACE,IAAI,EAAC,MAAM,EACX,WAAW,EAAE,OAAO,CAAC,gBAAgB,EACrC,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,SAAS,EAAC,qCAAqC,EAC/C,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CACd,QAAQ,CAAC,OAAO,EAAE;oCAChB,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,SAAS;iCACnC,CAAC,EAEJ,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,MAAM,EAAE,UAAU,sBACA,eAAe,EACjC,YAAY,EAAE,sBAAsB,mBACrB,OAAO,CAAC,QAAQ,GAC/B,GACE,EACL,CAAC,CAAC,OAAO,CAAC,QAAQ,IAAI,CAAC,CAAC,KAAK,IAAI,CAChC,cAAK,SAAS,EAAC,SAAS,YACtB,KAAC,qBAAqB,IACpB,SAAS,EAAC,oEAAoE,EAC9E,IAAI,EAAE,IAAI,GACV,GACE,CACP,EACD,KAAC,YAAY,IACX,aAAa,QACb,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,OAAO,CAAC,YAAY,GACxC,IACE,EACL,CAAC,6BAA6B,IAAI,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CACzD,cAAK,SAAS,EAAC,kBAAkB,YAC/B,eAAK,SAAS,EAAC,0CAA0C,aACtD,6BAA6B,CAAC,CAAC,CAAC,CAC/B,eACE,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,2DAA2D,aAErE,KAAC,cAAc,KAAG,EACjB,iBAAiB,IACd,CACP,CAAC,CAAC,CAAC,CACF,eAAO,CACR,EACA,CAAC,CAAC,OAAO,CAAC,SAAS,IAAI,CACtB,eACE,SAAS,EAAE,IAAI,CACb,gDAAgD,EAChD;oCACE,iBAAiB,EAAE,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,SAAS;iCACnD,CACF,aAEA,IAAI,CAAC,MAAM,SAAK,OAAO,CAAC,SAAS,IAC9B,CACP,IACG,GACF,CACP,IACyB,GACxB,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport { ValidationIcon } from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n  id: string\n  element: FormTypes.TextElement\n  value: unknown\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementText({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n  autocompleteAttributes,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const text = typeof value === 'string' ? value : ''\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  return (\n    <div className=\"cypress-text-element\">\n      <FormElementLabelContainer\n        className=\"ob-text\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"field has-addons\">\n          <div className=\"control is-expanded\">\n            <input\n              type=\"text\"\n              placeholder={element.placeholderValue}\n              id={id}\n              name={element.name}\n              className=\"input ob-input cypress-text-control\"\n              value={text}\n              onChange={(e) =>\n                onChange(element, {\n                  value: e.target.value || undefined,\n                })\n              }\n              required={element.required}\n              disabled={element.readOnly}\n              onBlur={setIsDirty}\n              aria-describedby={ariaDescribedby}\n              autoComplete={autocompleteAttributes}\n              aria-required={element.required}\n            />\n          </div>\n          {!!element.readOnly && !!value && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n            lookupButtonConfig={element.lookupButton}\n          />\n        </div>\n        {(isDisplayingValidationMessage || !!element.maxLength) && (\n          <div className=\"has-margin-top-8\">\n            <div className=\"is-flex is-justify-content-space-between\">\n              {isDisplayingValidationMessage ? (\n                <div\n                  role=\"alert\"\n                  className=\"has-text-danger ob-error__text cypress-validation-message\"\n                >\n                  <ValidationIcon />\n                  {validationMessage}\n                </div>\n              ) : (\n                <div />\n              )}\n              {!!element.maxLength && (\n                <div\n                  className={clsx(\n                    'ob-max-length__text cypress-max-length-message',\n                    {\n                      'has-text-danger': text.length > element.maxLength,\n                    },\n                  )}\n                >\n                  {text.length} / {element.maxLength}\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementText)\n"]}

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

@@ -10,6 +10,6 @@ type Props = {
     validationMessage: string | undefined;
     autocompleteAttributes?: string;
 } & IsDirtyProps;
-declare function FormElementTextarea({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, autocompleteAttributes, }: Props): React.JSX.Element;
+declare function FormElementTextarea({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, autocompleteAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof FormElementTextarea>;
 export default _default;

package/dist/form-elements/FormElementTextarea.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import clsx from 'clsx';
 import { TextareaAutosize, styled } from '@mui/material';
@@ -17,26 +18,11 @@ function FormElementTextarea({ id, element, value, onChange, validationMessage,
     const isDisplayingLookupButton = !!element.isDataLookup || !!element.isElementLookup;
     const { isLookingUp } = React.useContext(LookupNotificationContext);
     const isDisplayingValidationMessage = (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp;
-    return (React.createElement("div", { className: "cypress-textarea-element" },
-        React.createElement(FormElementLabelContainer, { className: "ob-textarea", id: id, element: element, required: element.required },
-            React.createElement("div", { className: "control" },
-                React.createElement(StyledTextareaAutosize, { placeholder: element.placeholderValue, id: id, name: element.name, className: "input ob-input cypress-textarea-control", value: text, onChange: (e) => onChange(element, {
-                        value: e.target.value || undefined,
-                    }), required: element.required, disabled: element.readOnly, onBlur: setIsDirty, "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes, "aria-required": element.required, minRows: 4 })),
-            (isDisplayingValidationMessage || !!element.maxLength) && (React.createElement("div", { className: "has-margin-top-8" },
-                React.createElement("div", { className: "is-flex is-justify-content-space-between" },
-                    isDisplayingValidationMessage ? (React.createElement("div", { role: "alert", className: "has-text-danger ob-error__text cypress-validation-message" },
-                        React.createElement(ValidationIcon, null),
-                        validationMessage)) : (React.createElement("div", null)),
-                    !!element.maxLength && (React.createElement("div", { className: clsx('ob-max-length__text cypress-max-length-message', {
-                            'has-text-danger': text.length > element.maxLength,
-                        }) },
-                        text.length,
-                        " / ",
-                        element.maxLength))))),
-            (isDisplayingLookupButton || isDisplayingCopyButton) && (React.createElement("div", { className: "buttons ob-buttons has-margin-top-8" },
-                isDisplayingCopyButton && (React.createElement(CopyToClipboardButton, { className: "button ob-button cypress-copy-to-clipboard-button", text: text })),
-                isDisplayingLookupButton && (React.createElement(LookupButton, { value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton })))))));
+    return (_jsx("div", { className: "cypress-textarea-element", children: _jsxs(FormElementLabelContainer, { className: "ob-textarea", id: id, element: element, required: element.required, children: [_jsx("div", { className: "control", children: _jsx(StyledTextareaAutosize, { placeholder: element.placeholderValue, id: id, name: element.name, className: "input ob-input cypress-textarea-control", value: text, onChange: (e) => onChange(element, {
+                            value: e.target.value || undefined,
+                        }), required: element.required, disabled: element.readOnly, onBlur: setIsDirty, "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes, "aria-required": element.required, minRows: 4 }) }), (isDisplayingValidationMessage || !!element.maxLength) && (_jsx("div", { className: "has-margin-top-8", children: _jsxs("div", { className: "is-flex is-justify-content-space-between", children: [isDisplayingValidationMessage ? (_jsxs("div", { role: "alert", className: "has-text-danger ob-error__text cypress-validation-message", children: [_jsx(ValidationIcon, {}), validationMessage] })) : (_jsx("div", {})), !!element.maxLength && (_jsxs("div", { className: clsx('ob-max-length__text cypress-max-length-message', {
+                                    'has-text-danger': text.length > element.maxLength,
+                                }), children: [text.length, " / ", element.maxLength] }))] }) })), (isDisplayingLookupButton || isDisplayingCopyButton) && (_jsxs("div", { className: "buttons ob-buttons has-margin-top-8", children: [isDisplayingCopyButton && (_jsx(CopyToClipboardButton, { className: "button ob-button cypress-copy-to-clipboard-button", text: text })), isDisplayingLookupButton && (_jsx(LookupButton, { value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton }))] }))] }) }));
 }
 export default React.memo(FormElementTextarea);
 //# sourceMappingURL=FormElementTextarea.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementTextarea.js","sourceRoot":"","sources":["../../src/form-elements/FormElementTextarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { FormTypes } from '@oneblink/types'\nimport { TextareaAutosize, styled } from '@mui/material'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport { ValidationIcon } from '../components/renderer/FormElementValidationMessage'\n\nconst StyledTextareaAutosize = styled(TextareaAutosize)(() => ({\n  resize: 'vertical',\n}))\n\ntype Props = {\n  id: string\n  element: FormTypes.TextareaElement\n  value: unknown\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementTextarea({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n  autocompleteAttributes,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const text = typeof value === 'string' ? value : ''\n  const isDisplayingCopyButton = !!element.readOnly && !!value\n  const isDisplayingLookupButton =\n    !!element.isDataLookup || !!element.isElementLookup\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  return (\n    <div className=\"cypress-textarea-element\">\n      <FormElementLabelContainer\n        className=\"ob-textarea\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"control\">\n          <StyledTextareaAutosize\n            placeholder={element.placeholderValue}\n            id={id}\n            name={element.name}\n            className=\"input ob-input cypress-textarea-control\"\n            value={text}\n            onChange={(e) =>\n              onChange(element, {\n                value: e.target.value || undefined,\n              })\n            }\n            required={element.required}\n            disabled={element.readOnly}\n            onBlur={setIsDirty}\n            aria-describedby={ariaDescribedby}\n            autoComplete={autocompleteAttributes}\n            aria-required={element.required}\n            minRows={4}\n          />\n        </div>\n\n        {(isDisplayingValidationMessage || !!element.maxLength) && (\n          <div className=\"has-margin-top-8\">\n            <div className=\"is-flex is-justify-content-space-between\">\n              {isDisplayingValidationMessage ? (\n                <div\n                  role=\"alert\"\n                  className=\"has-text-danger ob-error__text cypress-validation-message\"\n                >\n                  <ValidationIcon />\n                  {validationMessage}\n                </div>\n              ) : (\n                <div />\n              )}\n              {!!element.maxLength && (\n                <div\n                  className={clsx(\n                    'ob-max-length__text cypress-max-length-message',\n                    {\n                      'has-text-danger': text.length > element.maxLength,\n                    },\n                  )}\n                >\n                  {text.length} / {element.maxLength}\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n\n        {(isDisplayingLookupButton || isDisplayingCopyButton) && (\n          <div className=\"buttons ob-buttons has-margin-top-8\">\n            {isDisplayingCopyButton && (\n              <CopyToClipboardButton\n                className=\"button ob-button cypress-copy-to-clipboard-button\"\n                text={text}\n              />\n            )}\n            {isDisplayingLookupButton && (\n              <LookupButton\n                value={value}\n                validationMessage={validationMessage}\n                lookupButtonConfig={element.lookupButton}\n              />\n            )}\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementTextarea)\n"]}
+{"version":3,"file":"FormElementTextarea.js","sourceRoot":"","sources":["../../src/form-elements/FormElementTextarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { FormTypes } from '@oneblink/types'\nimport { TextareaAutosize, styled } from '@mui/material'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport { ValidationIcon } from '../components/renderer/FormElementValidationMessage'\n\nconst StyledTextareaAutosize = styled(TextareaAutosize)(() => ({\n  resize: 'vertical',\n}))\n\ntype Props = {\n  id: string\n  element: FormTypes.TextareaElement\n  value: unknown\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementTextarea({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n  autocompleteAttributes,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const text = typeof value === 'string' ? value : ''\n  const isDisplayingCopyButton = !!element.readOnly && !!value\n  const isDisplayingLookupButton =\n    !!element.isDataLookup || !!element.isElementLookup\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  return (\n    <div className=\"cypress-textarea-element\">\n      <FormElementLabelContainer\n        className=\"ob-textarea\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"control\">\n          <StyledTextareaAutosize\n            placeholder={element.placeholderValue}\n            id={id}\n            name={element.name}\n            className=\"input ob-input cypress-textarea-control\"\n            value={text}\n            onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>\n              onChange(element, {\n                value: e.target.value || undefined,\n              })\n            }\n            required={element.required}\n            disabled={element.readOnly}\n            onBlur={setIsDirty}\n            aria-describedby={ariaDescribedby}\n            autoComplete={autocompleteAttributes}\n            aria-required={element.required}\n            minRows={4}\n          />\n        </div>\n\n        {(isDisplayingValidationMessage || !!element.maxLength) && (\n          <div className=\"has-margin-top-8\">\n            <div className=\"is-flex is-justify-content-space-between\">\n              {isDisplayingValidationMessage ? (\n                <div\n                  role=\"alert\"\n                  className=\"has-text-danger ob-error__text cypress-validation-message\"\n                >\n                  <ValidationIcon />\n                  {validationMessage}\n                </div>\n              ) : (\n                <div />\n              )}\n              {!!element.maxLength && (\n                <div\n                  className={clsx(\n                    'ob-max-length__text cypress-max-length-message',\n                    {\n                      'has-text-danger': text.length > element.maxLength,\n                    },\n                  )}\n                >\n                  {text.length} / {element.maxLength}\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n\n        {(isDisplayingLookupButton || isDisplayingCopyButton) && (\n          <div className=\"buttons ob-buttons has-margin-top-8\">\n            {isDisplayingCopyButton && (\n              <CopyToClipboardButton\n                className=\"button ob-button cypress-copy-to-clipboard-button\"\n                text={text}\n              />\n            )}\n            {isDisplayingLookupButton && (\n              <LookupButton\n                value={value}\n                validationMessage={validationMessage}\n                lookupButtonConfig={element.lookupButton}\n              />\n            )}\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementTextarea)\n"]}

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

@@ -9,6 +9,6 @@ type Props = {
     displayValidationMessage: boolean;
     validationMessage: string | undefined;
 } & IsDirtyProps;
-declare function FormElementTime({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }: Props): React.JSX.Element;
+declare function FormElementTime({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof FormElementTime>;
 export default _default;

package/dist/form-elements/FormElementTime.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { localisationService } from '@oneblink/apps';
 import { TimePicker } from '@mui/x-date-pickers';
@@ -42,15 +43,7 @@ function FormElementTime({ id, element, value, onChange, validationMessage, disp
     }, [value]);
     const { isLookingUp } = React.useContext(LookupNotificationContext);
     const isDisplayingValidationMessage = (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp;
-    return (React.createElement("div", { className: "cypress-time-element" },
-        React.createElement(FormElementLabelContainer, { className: "ob-time", id: id, element: element, required: element.required },
-            React.createElement("div", { className: "field has-addons" },
-                React.createElement(TimePicker, { label: element.label, format: timeFormat, ...timeProps, timeSteps: { minutes: 1 } }),
-                !element.readOnly && (React.createElement(PickerInputButton, { tooltip: "Select time", onClick: openTimePicker, icon: "schedule" })),
-                !!element.readOnly && !!text && (React.createElement("div", { className: "control" },
-                    React.createElement(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }))),
-                React.createElement(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton })),
-            isDisplayingValidationMessage && (React.createElement(FormElementValidationMessage, { message: validationMessage })))));
+    return (_jsx("div", { className: "cypress-time-element", children: _jsxs(FormElementLabelContainer, { className: "ob-time", id: id, element: element, required: element.required, children: [_jsxs("div", { className: "field has-addons", children: [_jsx(TimePicker, { label: element.label, format: timeFormat, ...timeProps, timeSteps: { minutes: 1 } }), !element.readOnly && (_jsx(PickerInputButton, { tooltip: "Select time", onClick: openTimePicker, icon: "schedule" })), !!element.readOnly && !!text && (_jsx("div", { className: "control", children: _jsx(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }) })), _jsx(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton })] }), isDisplayingValidationMessage && (_jsx(FormElementValidationMessage, { message: validationMessage }))] }) }));
 }
 export default React.memo(FormElementTime);
 //# sourceMappingURL=FormElementTime.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementTime.js","sourceRoot":"","sources":["../../src/form-elements/FormElementTime.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { localisationService } from '@oneblink/apps'\nimport { FormTypes } from '@oneblink/types'\nimport { TimePicker } from '@mui/x-date-pickers'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\n\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport useFormDatePickerProps, {\n  PickerInputButton,\n} from '../hooks/form-date-picker/useFormDatePickerProps'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n  id: string\n  element: FormTypes.TimeElement\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nconst timeFormat = localisationService.getDateFnsFormats().time\n\nfunction FormElementTime({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n\n  const [commonProps, openTimePicker] = useFormDatePickerProps({\n    id,\n    value: typeof value === 'string' ? value : undefined,\n    maxDate: undefined,\n    minDate: undefined,\n    ariaDescribedby,\n    placeholder: element.placeholderValue,\n    className: 'cypress-time-control',\n    disabled: element.readOnly,\n    required: element.required,\n    onBlur: setIsDirty,\n    onChange: (newDate) => {\n      onChange(element, {\n        value: newDate?.toISOString(),\n      })\n    },\n  })\n\n  const timeProps = React.useMemo(() => {\n    // maxDate and minDate not applicable to a timepicker\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { maxDate, minDate, ...rest } = commonProps\n    return rest\n  }, [commonProps])\n\n  const text = React.useMemo(() => {\n    if (typeof value !== 'string') {\n      return null\n    }\n    return localisationService.formatTime(new Date(value))\n  }, [value])\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  return (\n    <div className=\"cypress-time-element\">\n      <FormElementLabelContainer\n        className=\"ob-time\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"field has-addons\">\n          <TimePicker\n            label={element.label}\n            format={timeFormat}\n            {...timeProps}\n            timeSteps={{ minutes: 1 }}\n          />\n          {!element.readOnly && (\n            <PickerInputButton\n              tooltip=\"Select time\"\n              onClick={openTimePicker}\n              icon=\"schedule\"\n            />\n          )}\n          {!!element.readOnly && !!text && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n            lookupButtonConfig={element.lookupButton}\n          />\n        </div>\n\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementTime)\n"]}
+{"version":3,"file":"FormElementTime.js","sourceRoot":"","sources":["../../src/form-elements/FormElementTime.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { localisationService } from '@oneblink/apps'\nimport { FormTypes } from '@oneblink/types'\nimport { TimePicker } from '@mui/x-date-pickers'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\n\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport useFormDatePickerProps, {\n  PickerInputButton,\n} from '../hooks/form-date-picker/useFormDatePickerProps'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n  id: string\n  element: FormTypes.TimeElement\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nconst timeFormat = localisationService.getDateFnsFormats().time\n\nfunction FormElementTime({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n\n  const [commonProps, openTimePicker] = useFormDatePickerProps({\n    id,\n    value: typeof value === 'string' ? value : undefined,\n    maxDate: undefined,\n    minDate: undefined,\n    ariaDescribedby,\n    placeholder: element.placeholderValue,\n    className: 'cypress-time-control',\n    disabled: element.readOnly,\n    required: element.required,\n    onBlur: setIsDirty,\n    onChange: (newDate) => {\n      onChange(element, {\n        value: newDate?.toISOString(),\n      })\n    },\n  })\n\n  const timeProps = React.useMemo(() => {\n    // maxDate and minDate not applicable to a timepicker\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { maxDate, minDate, ...rest } = commonProps\n    return rest\n  }, [commonProps])\n\n  const text = React.useMemo(() => {\n    if (typeof value !== 'string') {\n      return null\n    }\n    return localisationService.formatTime(new Date(value))\n  }, [value])\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  return (\n    <div className=\"cypress-time-element\">\n      <FormElementLabelContainer\n        className=\"ob-time\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"field has-addons\">\n          <TimePicker\n            label={element.label}\n            format={timeFormat}\n            {...timeProps}\n            timeSteps={{ minutes: 1 }}\n          />\n          {!element.readOnly && (\n            <PickerInputButton\n              tooltip=\"Select time\"\n              onClick={openTimePicker}\n              icon=\"schedule\"\n            />\n          )}\n          {!!element.readOnly && !!text && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n            lookupButtonConfig={element.lookupButton}\n          />\n        </div>\n\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementTime)\n"]}

package/dist/form-elements/OptionButton.js

@@ -1,18 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import useContrastColor from '../hooks/useContrastColor';
 import { Box } from '@mui/material';
 const OptionButton = ({ element, option, isSelected, onClick, className, onBlur, ...props }) => {
     const buttonContrastColor = useContrastColor(option.colour);
-    return (React.createElement("button", { type: "button", className: className, style: option.colour && isSelected
+    return (_jsx("button", { type: "button", className: className, style: option.colour && isSelected
             ? {
                 backgroundColor: option.colour,
                 color: buttonContrastColor,
                 height: 'auto',
             }
-            : { height: 'auto' }, disabled: element.readOnly, onClick: onClick, "aria-describedby": props['aria-describedby'], onBlur: onBlur },
-        React.createElement(Box, { display: "flex", flexDirection: "column", className: "ob-options__box", maxWidth: 256 },
-            option.imageUrl && (React.createElement("img", { className: "ob-options__image", src: option.imageUrl, "aria-hidden": "true" })),
-            option.label)));
+            : { height: 'auto' }, disabled: element.readOnly, onClick: onClick, "aria-describedby": props['aria-describedby'], onBlur: onBlur, children: _jsxs(Box, { display: "flex", flexDirection: "column", className: "ob-options__box", maxWidth: 256, children: [option.imageUrl && (_jsx("img", { className: "ob-options__image", src: option.imageUrl, "aria-hidden": "true" })), option.label] }) }));
 };
 export default React.memo(OptionButton);
 //# sourceMappingURL=OptionButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"OptionButton.js","sourceRoot":"","sources":["../../src/form-elements/OptionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,gBAAgB,MAAM,2BAA2B,CAAA;AAExD,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAA;AAcnC,MAAM,YAAY,GAAG,CAAC,EACpB,OAAO,EACP,MAAM,EACN,UAAU,EACV,OAAO,EACP,SAAS,EACT,MAAM,EACN,GAAG,KAAK,EACF,EAAE,EAAE;IACV,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;IAE3D,OAAO,CACL,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,SAAS,EACpB,KAAK,EACH,MAAM,CAAC,MAAM,IAAI,UAAU;YACzB,CAAC,CAAC;gBACE,eAAe,EAAE,MAAM,CAAC,MAAM;gBAC9B,KAAK,EAAE,mBAAmB;gBAC1B,MAAM,EAAE,MAAM;aACf;YACH,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAExB,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,OAAO,EAAE,OAAO,sBACE,KAAK,CAAC,kBAAkB,CAAC,EAC3C,MAAM,EAAE,MAAM;QAEd,oBAAC,GAAG,IACF,OAAO,EAAC,MAAM,EACd,aAAa,EAAC,QAAQ,EACtB,SAAS,EAAC,iBAAiB,EAC3B,QAAQ,EAAE,GAAG;YAEZ,MAAM,CAAC,QAAQ,IAAI,CAClB,6BACE,SAAS,EAAC,mBAAmB,EAC7B,GAAG,EAAE,MAAM,CAAC,QAAQ,iBACR,MAAM,GAClB,CACH;YACA,MAAM,CAAC,KAAK,CACT,CACC,CACV,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,YAAY,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport useContrastColor from '../hooks/useContrastColor'\nimport { FormTypes } from '@oneblink/types'\nimport { Box } from '@mui/material'\n\ntype Props = {\n  element:\n    | FormTypes.RadioButtonElement\n    | FormTypes.CheckboxElement\n    | FormTypes.ComplianceElement\n  option: FormTypes.ChoiceElementOption\n  isSelected: boolean\n  onClick: () => void\n  className: string\n  onBlur?: () => void\n  'aria-describedby'?: string\n}\nconst OptionButton = ({\n  element,\n  option,\n  isSelected,\n  onClick,\n  className,\n  onBlur,\n  ...props\n}: Props) => {\n  const buttonContrastColor = useContrastColor(option.colour)\n\n  return (\n    <button\n      type=\"button\"\n      className={className}\n      style={\n        option.colour && isSelected\n          ? {\n              backgroundColor: option.colour,\n              color: buttonContrastColor,\n              height: 'auto',\n            }\n          : { height: 'auto' }\n      }\n      disabled={element.readOnly}\n      onClick={onClick}\n      aria-describedby={props['aria-describedby']}\n      onBlur={onBlur}\n    >\n      <Box\n        display=\"flex\"\n        flexDirection=\"column\"\n        className=\"ob-options__box\"\n        maxWidth={256}\n      >\n        {option.imageUrl && (\n          <img\n            className=\"ob-options__image\"\n            src={option.imageUrl}\n            aria-hidden=\"true\"\n          />\n        )}\n        {option.label}\n      </Box>\n    </button>\n  )\n}\n\nexport default React.memo<Props>(OptionButton)\n"]}
+{"version":3,"file":"OptionButton.js","sourceRoot":"","sources":["../../src/form-elements/OptionButton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,gBAAgB,MAAM,2BAA2B,CAAA;AAExD,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAA;AAcnC,MAAM,YAAY,GAAG,CAAC,EACpB,OAAO,EACP,MAAM,EACN,UAAU,EACV,OAAO,EACP,SAAS,EACT,MAAM,EACN,GAAG,KAAK,EACF,EAAE,EAAE;IACV,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;IAE3D,OAAO,CACL,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,SAAS,EACpB,KAAK,EACH,MAAM,CAAC,MAAM,IAAI,UAAU;YACzB,CAAC,CAAC;gBACE,eAAe,EAAE,MAAM,CAAC,MAAM;gBAC9B,KAAK,EAAE,mBAAmB;gBAC1B,MAAM,EAAE,MAAM;aACf;YACH,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAExB,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,OAAO,EAAE,OAAO,sBACE,KAAK,CAAC,kBAAkB,CAAC,EAC3C,MAAM,EAAE,MAAM,YAEd,MAAC,GAAG,IACF,OAAO,EAAC,MAAM,EACd,aAAa,EAAC,QAAQ,EACtB,SAAS,EAAC,iBAAiB,EAC3B,QAAQ,EAAE,GAAG,aAEZ,MAAM,CAAC,QAAQ,IAAI,CAClB,cACE,SAAS,EAAC,mBAAmB,EAC7B,GAAG,EAAE,MAAM,CAAC,QAAQ,iBACR,MAAM,GAClB,CACH,EACA,MAAM,CAAC,KAAK,IACT,GACC,CACV,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,YAAY,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport useContrastColor from '../hooks/useContrastColor'\nimport { FormTypes } from '@oneblink/types'\nimport { Box } from '@mui/material'\n\ntype Props = {\n  element:\n    | FormTypes.RadioButtonElement\n    | FormTypes.CheckboxElement\n    | FormTypes.ComplianceElement\n  option: FormTypes.ChoiceElementOption\n  isSelected: boolean\n  onClick: () => void\n  className: string\n  onBlur?: () => void\n  'aria-describedby'?: string\n}\nconst OptionButton = ({\n  element,\n  option,\n  isSelected,\n  onClick,\n  className,\n  onBlur,\n  ...props\n}: Props) => {\n  const buttonContrastColor = useContrastColor(option.colour)\n\n  return (\n    <button\n      type=\"button\"\n      className={className}\n      style={\n        option.colour && isSelected\n          ? {\n              backgroundColor: option.colour,\n              color: buttonContrastColor,\n              height: 'auto',\n            }\n          : { height: 'auto' }\n      }\n      disabled={element.readOnly}\n      onClick={onClick}\n      aria-describedby={props['aria-describedby']}\n      onBlur={onBlur}\n    >\n      <Box\n        display=\"flex\"\n        flexDirection=\"column\"\n        className=\"ob-options__box\"\n        maxWidth={256}\n      >\n        {option.imageUrl && (\n          <img\n            className=\"ob-options__image\"\n            src={option.imageUrl}\n            aria-hidden=\"true\"\n          />\n        )}\n        {option.label}\n      </Box>\n    </button>\n  )\n}\n\nexport default React.memo<Props>(OptionButton)\n"]}

package/dist/hooks/attachments/useAttachmentBlobs.d.ts

@@ -14,6 +14,6 @@ type AttachmentBlobsContextValue = {
 type Props = {
     children: React.ReactNode;
 };
-export declare const AttachmentBlobsProvider: ({ children }: Props) => React.JSX.Element;
+export declare const AttachmentBlobsProvider: ({ children }: Props) => import("react/jsx-runtime").JSX.Element;
 declare const useAttachmentBlobs: () => AttachmentBlobsContextValue;
 export default useAttachmentBlobs;

package/dist/hooks/attachments/useAttachmentBlobs.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 const AttachmentBlobsContext = React.createContext({
     storeAttachmentBlobLocally: () => { },
@@ -15,7 +16,7 @@ export const AttachmentBlobsProvider = ({ children }) => {
         storeAttachmentBlobLocally,
         getAttachmentBlobLocally,
     }), [storeAttachmentBlobLocally, getAttachmentBlobLocally]);
-    return (React.createElement(AttachmentBlobsContext.Provider, { value: value }, children));
+    return (_jsx(AttachmentBlobsContext.Provider, { value: value, children: children }));
 };
 const useAttachmentBlobs = () => {
     return React.useContext(AttachmentBlobsContext);