@oneblink/apps-react 10.2.0-beta.4 → 10.2.0

package/dist/form-elements/FormElementEmail.js

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

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

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

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

@@ -8,7 +8,7 @@ type Props = {
     id: string;
     element: FormTypes.LookupButtonFormElement;
 } & ValidationMessageProps;
-declare function FormElementLookupButton({ id, element, onChange, onLookup, ...validationMessageProps }: Props & {
+declare function FormElementLookupButton({ id, element, onChange, onLookup, validationMessage, ...validationMessageProps }: Props & {
     onChange: FormElementValueChangeHandler;
     onLookup: FormElementLookupHandler;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/form-elements/FormElementLookupButton.js

@@ -20,7 +20,7 @@ const FormElementLookupButtonValidationMessage = memo(function FormElementLookup
     }
     return _jsx(FormElementValidationMessage, { message: validationMessage });
 });
-function FormElementLookupButton({ id, element, onChange, onLookup, ...validationMessageProps }) {
+function FormElementLookupButton({ id, element, onChange, onLookup, validationMessage, ...validationMessageProps }) {
     const { formSubmissionModel, elements } = useFormSubmissionModel();
     const { isAutoLookup, data } = useMemo(() => {
         return generateLookupButtonValue(element.elementDependencies, elements, formSubmissionModel);
@@ -51,7 +51,7 @@ function FormElementLookupButton({ id, element, onChange, onLookup, ...validatio
         }
         return undefined;
     }, [data, element.elementDependencies.length]);
-    return (_jsx(LookupNotification, { autoLookupValue: isAutoLookup ? stringifyData : undefined, element: element, onLookup: handleLookup, stringifyAutoLookupValue: stringifyLookupButtonValue, children: _jsx("div", { className: "cypress-lookup-button-element", children: _jsxs(FormElementLabelContainer, { className: "ob-lookup-button", id: id, element: element, required: false, children: [_jsx(LookupButton, { value: value, validationMessage: undefined, lookupButtonConfig: element.lookupButton }), _jsx(FormElementLookupButtonValidationMessage, { ...validationMessageProps })] }) }) }));
+    return (_jsx(LookupNotification, { autoLookupValue: isAutoLookup ? stringifyData : undefined, element: element, onLookup: handleLookup, stringifyAutoLookupValue: stringifyLookupButtonValue, children: _jsx("div", { className: "cypress-lookup-button-element", children: _jsxs(FormElementLabelContainer, { className: "ob-lookup-button", id: id, element: element, required: false, children: [_jsx(LookupButton, { value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton, overrideRequiredMessage: element.requiredMessage }), _jsx(FormElementLookupButtonValidationMessage, { validationMessage: validationMessage, ...validationMessageProps })] }) }) }));
 }
 export default memo(FormElementLookupButton);
 function generateLookupButtonValue(elementDependencies, elements, formSubmissionModel) {

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementLookupButton.js","sourceRoot":"","sources":["../../src/form-elements/FormElementLookupButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { memo, useCallback, useContext, useEffect, useMemo } from 'react'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport {\n  FormElementLookupHandler,\n  FormElementValueChangeHandler,\n  IsDirtyProps,\n} from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport LookupNotification from '../components/renderer/LookupNotification'\nimport useFormSubmissionModel from '../hooks/useFormSubmissionModelContext'\nimport { formElementsService } from '@oneblink/sdk-core'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype ValidationMessageProps = {\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\ntype Props = {\n  id: string\n  element: FormTypes.LookupButtonFormElement\n} & ValidationMessageProps\n\nfunction stringifyLookupButtonValue(v: unknown): string {\n  return JSON.stringify(v) as string\n}\n\nconst FormElementLookupButtonValidationMessage = memo(\n  function FormElementLookupButtonValidationMessageComponent({\n    validationMessage,\n    displayValidationMessage,\n    isDirty,\n  }: ValidationMessageProps) {\n    const { isLookingUp } = useContext(LookupNotificationContext)\n    const isDisplayingValidationMessage =\n      (isDirty || displayValidationMessage) &&\n      !!validationMessage &&\n      !isLookingUp\n\n    if (!isDisplayingValidationMessage) {\n      return null\n    }\n\n    return <FormElementValidationMessage message={validationMessage} />\n  },\n)\n\nfunction FormElementLookupButton({\n  id,\n  element,\n  onChange,\n  onLookup,\n  ...validationMessageProps\n}: Props & {\n  onChange: FormElementValueChangeHandler\n  onLookup: FormElementLookupHandler\n}) {\n  const { formSubmissionModel, elements } = useFormSubmissionModel()\n  const { isAutoLookup, data } = useMemo(() => {\n    return generateLookupButtonValue(\n      element.elementDependencies,\n      elements,\n      formSubmissionModel,\n    )\n  }, [element.elementDependencies, elements, formSubmissionModel])\n\n  const handleLookup = useCallback<FormElementLookupHandler>(\n    (setter) => {\n      onLookup((data) => {\n        const dataAfterSetting = setter(data)\n        dataAfterSetting.submission[element.name] = true\n        return dataAfterSetting\n      })\n    },\n    [element.name, onLookup],\n  )\n\n  const stringifyData = useMemo(() => {\n    if (!data) {\n      return undefined\n    }\n    return stringifyLookupButtonValue(data)\n  }, [data])\n\n  useEffect(() => {\n    onChange(element, {\n      value: false,\n    })\n  }, [element, onChange, stringifyData])\n\n  const value = useMemo(() => {\n    // Want the value to be `true` if there is data or if there are\n    // no element dependencies i.e. the lookup can be run at any time.\n    if (!element.elementDependencies.length || data) {\n      return true\n    }\n    return undefined\n  }, [data, element.elementDependencies.length])\n\n  return (\n    <LookupNotification\n      autoLookupValue={isAutoLookup ? stringifyData : undefined}\n      element={element}\n      onLookup={handleLookup}\n      stringifyAutoLookupValue={stringifyLookupButtonValue}\n    >\n      <div className=\"cypress-lookup-button-element\">\n        <FormElementLabelContainer\n          className=\"ob-lookup-button\"\n          id={id}\n          element={element}\n          required={false}\n        >\n          <LookupButton\n            value={value}\n            validationMessage={undefined}\n            lookupButtonConfig={element.lookupButton}\n          />\n          <FormElementLookupButtonValidationMessage\n            {...validationMessageProps}\n          />\n        </FormElementLabelContainer>\n      </div>\n    </LookupNotification>\n  )\n}\n\nexport default memo(FormElementLookupButton)\n\nfunction generateLookupButtonValue(\n  elementDependencies: FormTypes.LookupButtonFormElement['elementDependencies'],\n  elements: FormTypes.FormElement[],\n  formSubmissionModel:\n    | SubmissionTypes.S3SubmissionData['submission']\n    | undefined,\n): {\n  isAutoLookup: boolean\n  data: SubmissionTypes.S3SubmissionData['submission'] | undefined\n} {\n  if (!formSubmissionModel) {\n    return {\n      isAutoLookup: false,\n      data: undefined,\n    }\n  }\n\n  // \"data\" should be `undefined` if there are no dependent elements with a value.\n  // If a least one dependent element has a value, we will enable to lookup to run.\n  return elementDependencies.reduce<{\n    isAutoLookup: boolean\n    data: SubmissionTypes.S3SubmissionData['submission'] | undefined\n  }>(\n    (memo, elementDependency) => {\n      const formElement = formElementsService.findFormElement(\n        elements,\n        (formElement) => formElement.id === elementDependency.elementId,\n      )\n      if (!formElement || !('name' in formElement)) {\n        return memo\n      }\n\n      const formElementValue = formSubmissionModel[formElement.name]\n\n      switch (elementDependency.type) {\n        case 'FORM_FORM_ELEMENT': {\n          if (\n            formElement.type === 'form' &&\n            Array.isArray(formElement.elements)\n          ) {\n            const nestedLookupButtonValue = generateLookupButtonValue(\n              [elementDependency.elementDependency],\n              formElement.elements,\n              formElementValue as SubmissionTypes.S3SubmissionData['submission'],\n            )\n            return {\n              isAutoLookup:\n                memo.isAutoLookup && nestedLookupButtonValue.isAutoLookup,\n              data:\n                nestedLookupButtonValue.data !== undefined\n                  ? {\n                      ...memo.data,\n                      [formElement.name]: {\n                        ...(memo?.data?.[formElement.name] || {}),\n                        ...nestedLookupButtonValue.data,\n                      },\n                    }\n                  : memo.data,\n            }\n          }\n          break\n        }\n        case 'REPEATABLE_SET_FORM_ELEMENT': {\n          if (formElement.type === 'repeatableSet') {\n            const entries: {\n              isAutoLookup: boolean\n              data: Record<\n                number,\n                SubmissionTypes.S3SubmissionData['submission'] | undefined\n              >\n            } = {\n              isAutoLookup: memo.isAutoLookup,\n              data: {},\n            }\n            let hasAnEntry = false\n            const existingEntries =\n              (memo.data?.[formElement.name] as object[]) || undefined\n            if (Array.isArray(formElementValue)) {\n              for (const entry of formElementValue) {\n                const index = formElementValue.indexOf(entry)\n                const nestedLookupButtonValue = generateLookupButtonValue(\n                  [elementDependency.elementDependency],\n                  formElement.elements,\n                  entry as SubmissionTypes.S3SubmissionData['submission'],\n                )\n                entries.isAutoLookup =\n                  entries.isAutoLookup && nestedLookupButtonValue.isAutoLookup\n                if (nestedLookupButtonValue.data || existingEntries?.[index]) {\n                  entries.data[index] = {\n                    ...existingEntries?.[index],\n                    ...nestedLookupButtonValue.data,\n                  }\n                  hasAnEntry = true\n                } else {\n                  entries.data[index] = undefined\n                }\n              }\n            }\n\n            return {\n              isAutoLookup: memo.isAutoLookup && entries.isAutoLookup,\n              data: hasAnEntry\n                ? {\n                    ...memo.data,\n                    [formElement.name]: entries.data,\n                  }\n                : memo.data,\n            }\n          }\n          break\n        }\n        default: {\n          if (formElement && 'name' in formElement) {\n            const dependencyValue = formSubmissionModel[formElement.name]\n            const isAutoLookupChecker = autoLookupElementMap[formElement.type]\n            const isFormElementAutoLookup =\n              typeof isAutoLookupChecker === 'function'\n                ? isAutoLookupChecker(formElement)\n                : isAutoLookupChecker\n            return {\n              isAutoLookup: memo.isAutoLookup && isFormElementAutoLookup,\n              data:\n                dependencyValue !== undefined && dependencyValue !== null\n                  ? {\n                      ...memo.data,\n                      [formElement.name]: dependencyValue,\n                    }\n                  : memo.data,\n            }\n          }\n          break\n        }\n      }\n\n      return memo\n    },\n    {\n      isAutoLookup: true,\n      data: undefined,\n    },\n  )\n}\n\n// Creating an object here so we get a Typescript error when adding a\n// new element type and forgetting to add to the array of allowed types\nconst autoLookupElementMap: Record<\n  Exclude<FormTypes.FormElement['type'], 'page'>,\n  boolean | ((element: FormTypes.FormElement) => boolean)\n> = {\n  text: false,\n  textarea: false,\n  number: false,\n  email: false,\n  telephone: false,\n  barcodeScanner: false,\n  radio: true,\n  checkboxes: false,\n  select: (formElement) => formElement.type === 'select' && !formElement.multi,\n  autocomplete: true,\n  boolean: true,\n  date: false,\n  datetime: false,\n  time: false,\n  heading: false,\n  html: false,\n  image: false,\n  infoPage: false,\n  camera: false,\n  repeatableSet: false,\n  draw: false,\n  calculation: false,\n  location: true,\n  files: true,\n  captcha: false,\n  form: false,\n  summary: false,\n  compliance: true,\n  geoscapeAddress: true,\n  pointAddress: true,\n  pointAddressV3: true,\n  googleAddress: false,\n  civicaStreetName: true,\n  civicaNameRecord: false,\n  section: false,\n  bsb: false,\n  abn: false,\n  freshdeskDependentField: false,\n  apiNSWLiquorLicence: true,\n  arcGISWebMap: true,\n  pointCadastralParcel: true,\n  lookupButton: false,\n}\n"]}
+{"version":3,"file":"FormElementLookupButton.js","sourceRoot":"","sources":["../../src/form-elements/FormElementLookupButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACzE,OAAO,YAAY,MAAM,qCAAqC,CAAA;AAE9D,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AAMxF,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAA;AAC1E,OAAO,kBAAkB,MAAM,2CAA2C,CAAA;AAC1E,OAAO,sBAAsB,MAAM,wCAAwC,CAAA;AAC3E,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAA;AACxD,OAAO,4BAA4B,MAAM,qDAAqD,CAAA;AAY9F,SAAS,0BAA0B,CAAC,CAAU;IAC5C,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAW,CAAA;AACpC,CAAC;AAED,MAAM,wCAAwC,GAAG,IAAI,CACnD,SAAS,iDAAiD,CAAC,EACzD,iBAAiB,EACjB,wBAAwB,EACxB,OAAO,GACgB;IACvB,MAAM,EAAE,WAAW,EAAE,GAAG,UAAU,CAAC,yBAAyB,CAAC,CAAA;IAC7D,MAAM,6BAA6B,GACjC,CAAC,OAAO,IAAI,wBAAwB,CAAC;QACrC,CAAC,CAAC,iBAAiB;QACnB,CAAC,WAAW,CAAA;IAEd,IAAI,CAAC,6BAA6B,EAAE,CAAC;QACnC,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,KAAC,4BAA4B,IAAC,OAAO,EAAE,iBAAiB,GAAI,CAAA;AACrE,CAAC,CACF,CAAA;AAED,SAAS,uBAAuB,CAAC,EAC/B,EAAE,EACF,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,iBAAiB,EACjB,GAAG,sBAAsB,EAI1B;IACC,MAAM,EAAE,mBAAmB,EAAE,QAAQ,EAAE,GAAG,sBAAsB,EAAE,CAAA;IAClE,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1C,OAAO,yBAAyB,CAC9B,OAAO,CAAC,mBAAmB,EAC3B,QAAQ,EACR,mBAAmB,CACpB,CAAA;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,mBAAmB,EAAE,QAAQ,EAAE,mBAAmB,CAAC,CAAC,CAAA;IAEhE,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,MAAM,EAAE,EAAE;QACT,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE;YAChB,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;YACrC,gBAAgB,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;YAChD,OAAO,gBAAgB,CAAA;QACzB,CAAC,CAAC,CAAA;IACJ,CAAC,EACD,CAAC,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC,CACzB,CAAA;IAED,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,OAAO,SAAS,CAAA;QAClB,CAAC;QACD,OAAO,0BAA0B,CAAC,IAAI,CAAC,CAAA;IACzC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,OAAO,EAAE;YAChB,KAAK,EAAE,KAAK;SACb,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAA;IAEtC,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,+DAA+D;QAC/D,kEAAkE;QAClE,IAAI,CAAC,OAAO,CAAC,mBAAmB,CAAC,MAAM,IAAI,IAAI,EAAE,CAAC;YAChD,OAAO,IAAI,CAAA;QACb,CAAC;QACD,OAAO,SAAS,CAAA;IAClB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAA;IAE9C,OAAO,CACL,KAAC,kBAAkB,IACjB,eAAe,EAAE,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,EACzD,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,YAAY,EACtB,wBAAwB,EAAE,0BAA0B,YAEpD,cAAK,SAAS,EAAC,+BAA+B,YAC5C,MAAC,yBAAyB,IACxB,SAAS,EAAC,kBAAkB,EAC5B,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,KAAK,aAEf,KAAC,YAAY,IACX,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,OAAO,CAAC,YAAY,EACxC,uBAAuB,EAAE,OAAO,CAAC,eAAe,GAChD,EACF,KAAC,wCAAwC,IACvC,iBAAiB,EAAE,iBAAiB,KAChC,sBAAsB,GAC1B,IACwB,GACxB,GACa,CACtB,CAAA;AACH,CAAC;AAED,eAAe,IAAI,CAAC,uBAAuB,CAAC,CAAA;AAE5C,SAAS,yBAAyB,CAChC,mBAA6E,EAC7E,QAAiC,EACjC,mBAEa;IAKb,IAAI,CAAC,mBAAmB,EAAE,CAAC;QACzB,OAAO;YACL,YAAY,EAAE,KAAK;YACnB,IAAI,EAAE,SAAS;SAChB,CAAA;IACH,CAAC;IAED,gFAAgF;IAChF,iFAAiF;IACjF,OAAO,mBAAmB,CAAC,MAAM,CAI/B,CAAC,IAAI,EAAE,iBAAiB,EAAE,EAAE;;QAC1B,MAAM,WAAW,GAAG,mBAAmB,CAAC,eAAe,CACrD,QAAQ,EACR,CAAC,WAAW,EAAE,EAAE,CAAC,WAAW,CAAC,EAAE,KAAK,iBAAiB,CAAC,SAAS,CAChE,CAAA;QACD,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,MAAM,IAAI,WAAW,CAAC,EAAE,CAAC;YAC7C,OAAO,IAAI,CAAA;QACb,CAAC;QAED,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,WAAW,CAAC,IAAI,CAAC,CAAA;QAE9D,QAAQ,iBAAiB,CAAC,IAAI,EAAE,CAAC;YAC/B,KAAK,mBAAmB,CAAC,CAAC,CAAC;gBACzB,IACE,WAAW,CAAC,IAAI,KAAK,MAAM;oBAC3B,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,QAAQ,CAAC,EACnC,CAAC;oBACD,MAAM,uBAAuB,GAAG,yBAAyB,CACvD,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,EACrC,WAAW,CAAC,QAAQ,EACpB,gBAAkE,CACnE,CAAA;oBACD,OAAO;wBACL,YAAY,EACV,IAAI,CAAC,YAAY,IAAI,uBAAuB,CAAC,YAAY;wBAC3D,IAAI,EACF,uBAAuB,CAAC,IAAI,KAAK,SAAS;4BACxC,CAAC,CAAC;gCACE,GAAG,IAAI,CAAC,IAAI;gCACZ,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE;oCAClB,GAAG,CAAC,CAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,0CAAG,WAAW,CAAC,IAAI,CAAC,KAAI,EAAE,CAAC;oCACzC,GAAG,uBAAuB,CAAC,IAAI;iCAChC;6BACF;4BACH,CAAC,CAAC,IAAI,CAAC,IAAI;qBAChB,CAAA;gBACH,CAAC;gBACD,MAAK;YACP,CAAC;YACD,KAAK,6BAA6B,CAAC,CAAC,CAAC;gBACnC,IAAI,WAAW,CAAC,IAAI,KAAK,eAAe,EAAE,CAAC;oBACzC,MAAM,OAAO,GAMT;wBACF,YAAY,EAAE,IAAI,CAAC,YAAY;wBAC/B,IAAI,EAAE,EAAE;qBACT,CAAA;oBACD,IAAI,UAAU,GAAG,KAAK,CAAA;oBACtB,MAAM,eAAe,GACnB,CAAC,MAAA,IAAI,CAAC,IAAI,0CAAG,WAAW,CAAC,IAAI,CAAc,KAAI,SAAS,CAAA;oBAC1D,IAAI,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,EAAE,CAAC;wBACpC,KAAK,MAAM,KAAK,IAAI,gBAAgB,EAAE,CAAC;4BACrC,MAAM,KAAK,GAAG,gBAAgB,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;4BAC7C,MAAM,uBAAuB,GAAG,yBAAyB,CACvD,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,EACrC,WAAW,CAAC,QAAQ,EACpB,KAAuD,CACxD,CAAA;4BACD,OAAO,CAAC,YAAY;gCAClB,OAAO,CAAC,YAAY,IAAI,uBAAuB,CAAC,YAAY,CAAA;4BAC9D,IAAI,uBAAuB,CAAC,IAAI,KAAI,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAG,KAAK,CAAC,CAAA,EAAE,CAAC;gCAC7D,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG;oCACpB,GAAG,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAG,KAAK,CAAC;oCAC3B,GAAG,uBAAuB,CAAC,IAAI;iCAChC,CAAA;gCACD,UAAU,GAAG,IAAI,CAAA;4BACnB,CAAC;iCAAM,CAAC;gCACN,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,SAAS,CAAA;4BACjC,CAAC;wBACH,CAAC;oBACH,CAAC;oBAED,OAAO;wBACL,YAAY,EAAE,IAAI,CAAC,YAAY,IAAI,OAAO,CAAC,YAAY;wBACvD,IAAI,EAAE,UAAU;4BACd,CAAC,CAAC;gCACE,GAAG,IAAI,CAAC,IAAI;gCACZ,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,IAAI;6BACjC;4BACH,CAAC,CAAC,IAAI,CAAC,IAAI;qBACd,CAAA;gBACH,CAAC;gBACD,MAAK;YACP,CAAC;YACD,OAAO,CAAC,CAAC,CAAC;gBACR,IAAI,WAAW,IAAI,MAAM,IAAI,WAAW,EAAE,CAAC;oBACzC,MAAM,eAAe,GAAG,mBAAmB,CAAC,WAAW,CAAC,IAAI,CAAC,CAAA;oBAC7D,MAAM,mBAAmB,GAAG,oBAAoB,CAAC,WAAW,CAAC,IAAI,CAAC,CAAA;oBAClE,MAAM,uBAAuB,GAC3B,OAAO,mBAAmB,KAAK,UAAU;wBACvC,CAAC,CAAC,mBAAmB,CAAC,WAAW,CAAC;wBAClC,CAAC,CAAC,mBAAmB,CAAA;oBACzB,OAAO;wBACL,YAAY,EAAE,IAAI,CAAC,YAAY,IAAI,uBAAuB;wBAC1D,IAAI,EACF,eAAe,KAAK,SAAS,IAAI,eAAe,KAAK,IAAI;4BACvD,CAAC,CAAC;gCACE,GAAG,IAAI,CAAC,IAAI;gCACZ,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,eAAe;6BACpC;4BACH,CAAC,CAAC,IAAI,CAAC,IAAI;qBAChB,CAAA;gBACH,CAAC;gBACD,MAAK;YACP,CAAC;QACH,CAAC;QAED,OAAO,IAAI,CAAA;IACb,CAAC,EACD;QACE,YAAY,EAAE,IAAI;QAClB,IAAI,EAAE,SAAS;KAChB,CACF,CAAA;AACH,CAAC;AAED,qEAAqE;AACrE,uEAAuE;AACvE,MAAM,oBAAoB,GAGtB;IACF,IAAI,EAAE,KAAK;IACX,QAAQ,EAAE,KAAK;IACf,MAAM,EAAE,KAAK;IACb,KAAK,EAAE,KAAK;IACZ,SAAS,EAAE,KAAK;IAChB,cAAc,EAAE,KAAK;IACrB,KAAK,EAAE,IAAI;IACX,UAAU,EAAE,KAAK;IACjB,MAAM,EAAE,CAAC,WAAW,EAAE,EAAE,CAAC,WAAW,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,WAAW,CAAC,KAAK;IAC5E,YAAY,EAAE,IAAI;IAClB,OAAO,EAAE,IAAI;IACb,IAAI,EAAE,KAAK;IACX,QAAQ,EAAE,KAAK;IACf,IAAI,EAAE,KAAK;IACX,OAAO,EAAE,KAAK;IACd,IAAI,EAAE,KAAK;IACX,KAAK,EAAE,KAAK;IACZ,QAAQ,EAAE,KAAK;IACf,MAAM,EAAE,KAAK;IACb,aAAa,EAAE,KAAK;IACpB,IAAI,EAAE,KAAK;IACX,WAAW,EAAE,KAAK;IAClB,QAAQ,EAAE,IAAI;IACd,KAAK,EAAE,IAAI;IACX,OAAO,EAAE,KAAK;IACd,IAAI,EAAE,KAAK;IACX,OAAO,EAAE,KAAK;IACd,UAAU,EAAE,IAAI;IAChB,eAAe,EAAE,IAAI;IACrB,YAAY,EAAE,IAAI;IAClB,cAAc,EAAE,IAAI;IACpB,aAAa,EAAE,KAAK;IACpB,gBAAgB,EAAE,IAAI;IACtB,gBAAgB,EAAE,KAAK;IACvB,OAAO,EAAE,KAAK;IACd,GAAG,EAAE,KAAK;IACV,GAAG,EAAE,KAAK;IACV,uBAAuB,EAAE,KAAK;IAC9B,mBAAmB,EAAE,IAAI;IACzB,YAAY,EAAE,IAAI;IAClB,oBAAoB,EAAE,IAAI;IAC1B,YAAY,EAAE,KAAK;CACpB,CAAA","sourcesContent":["import { memo, useCallback, useContext, useEffect, useMemo } from 'react'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport {\n  FormElementLookupHandler,\n  FormElementValueChangeHandler,\n  IsDirtyProps,\n} from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport LookupNotification from '../components/renderer/LookupNotification'\nimport useFormSubmissionModel from '../hooks/useFormSubmissionModelContext'\nimport { formElementsService } from '@oneblink/sdk-core'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype ValidationMessageProps = {\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\ntype Props = {\n  id: string\n  element: FormTypes.LookupButtonFormElement\n} & ValidationMessageProps\n\nfunction stringifyLookupButtonValue(v: unknown): string {\n  return JSON.stringify(v) as string\n}\n\nconst FormElementLookupButtonValidationMessage = memo(\n  function FormElementLookupButtonValidationMessageComponent({\n    validationMessage,\n    displayValidationMessage,\n    isDirty,\n  }: ValidationMessageProps) {\n    const { isLookingUp } = useContext(LookupNotificationContext)\n    const isDisplayingValidationMessage =\n      (isDirty || displayValidationMessage) &&\n      !!validationMessage &&\n      !isLookingUp\n\n    if (!isDisplayingValidationMessage) {\n      return null\n    }\n\n    return <FormElementValidationMessage message={validationMessage} />\n  },\n)\n\nfunction FormElementLookupButton({\n  id,\n  element,\n  onChange,\n  onLookup,\n  validationMessage,\n  ...validationMessageProps\n}: Props & {\n  onChange: FormElementValueChangeHandler\n  onLookup: FormElementLookupHandler\n}) {\n  const { formSubmissionModel, elements } = useFormSubmissionModel()\n  const { isAutoLookup, data } = useMemo(() => {\n    return generateLookupButtonValue(\n      element.elementDependencies,\n      elements,\n      formSubmissionModel,\n    )\n  }, [element.elementDependencies, elements, formSubmissionModel])\n\n  const handleLookup = useCallback<FormElementLookupHandler>(\n    (setter) => {\n      onLookup((data) => {\n        const dataAfterSetting = setter(data)\n        dataAfterSetting.submission[element.name] = true\n        return dataAfterSetting\n      })\n    },\n    [element.name, onLookup],\n  )\n\n  const stringifyData = useMemo(() => {\n    if (!data) {\n      return undefined\n    }\n    return stringifyLookupButtonValue(data)\n  }, [data])\n\n  useEffect(() => {\n    onChange(element, {\n      value: false,\n    })\n  }, [element, onChange, stringifyData])\n\n  const value = useMemo(() => {\n    // Want the value to be `true` if there is data or if there are\n    // no element dependencies i.e. the lookup can be run at any time.\n    if (!element.elementDependencies.length || data) {\n      return true\n    }\n    return undefined\n  }, [data, element.elementDependencies.length])\n\n  return (\n    <LookupNotification\n      autoLookupValue={isAutoLookup ? stringifyData : undefined}\n      element={element}\n      onLookup={handleLookup}\n      stringifyAutoLookupValue={stringifyLookupButtonValue}\n    >\n      <div className=\"cypress-lookup-button-element\">\n        <FormElementLabelContainer\n          className=\"ob-lookup-button\"\n          id={id}\n          element={element}\n          required={false}\n        >\n          <LookupButton\n            value={value}\n            validationMessage={validationMessage}\n            lookupButtonConfig={element.lookupButton}\n            overrideRequiredMessage={element.requiredMessage}\n          />\n          <FormElementLookupButtonValidationMessage\n            validationMessage={validationMessage}\n            {...validationMessageProps}\n          />\n        </FormElementLabelContainer>\n      </div>\n    </LookupNotification>\n  )\n}\n\nexport default memo(FormElementLookupButton)\n\nfunction generateLookupButtonValue(\n  elementDependencies: FormTypes.LookupButtonFormElement['elementDependencies'],\n  elements: FormTypes.FormElement[],\n  formSubmissionModel:\n    | SubmissionTypes.S3SubmissionData['submission']\n    | undefined,\n): {\n  isAutoLookup: boolean\n  data: SubmissionTypes.S3SubmissionData['submission'] | undefined\n} {\n  if (!formSubmissionModel) {\n    return {\n      isAutoLookup: false,\n      data: undefined,\n    }\n  }\n\n  // \"data\" should be `undefined` if there are no dependent elements with a value.\n  // If a least one dependent element has a value, we will enable to lookup to run.\n  return elementDependencies.reduce<{\n    isAutoLookup: boolean\n    data: SubmissionTypes.S3SubmissionData['submission'] | undefined\n  }>(\n    (memo, elementDependency) => {\n      const formElement = formElementsService.findFormElement(\n        elements,\n        (formElement) => formElement.id === elementDependency.elementId,\n      )\n      if (!formElement || !('name' in formElement)) {\n        return memo\n      }\n\n      const formElementValue = formSubmissionModel[formElement.name]\n\n      switch (elementDependency.type) {\n        case 'FORM_FORM_ELEMENT': {\n          if (\n            formElement.type === 'form' &&\n            Array.isArray(formElement.elements)\n          ) {\n            const nestedLookupButtonValue = generateLookupButtonValue(\n              [elementDependency.elementDependency],\n              formElement.elements,\n              formElementValue as SubmissionTypes.S3SubmissionData['submission'],\n            )\n            return {\n              isAutoLookup:\n                memo.isAutoLookup && nestedLookupButtonValue.isAutoLookup,\n              data:\n                nestedLookupButtonValue.data !== undefined\n                  ? {\n                      ...memo.data,\n                      [formElement.name]: {\n                        ...(memo?.data?.[formElement.name] || {}),\n                        ...nestedLookupButtonValue.data,\n                      },\n                    }\n                  : memo.data,\n            }\n          }\n          break\n        }\n        case 'REPEATABLE_SET_FORM_ELEMENT': {\n          if (formElement.type === 'repeatableSet') {\n            const entries: {\n              isAutoLookup: boolean\n              data: Record<\n                number,\n                SubmissionTypes.S3SubmissionData['submission'] | undefined\n              >\n            } = {\n              isAutoLookup: memo.isAutoLookup,\n              data: {},\n            }\n            let hasAnEntry = false\n            const existingEntries =\n              (memo.data?.[formElement.name] as object[]) || undefined\n            if (Array.isArray(formElementValue)) {\n              for (const entry of formElementValue) {\n                const index = formElementValue.indexOf(entry)\n                const nestedLookupButtonValue = generateLookupButtonValue(\n                  [elementDependency.elementDependency],\n                  formElement.elements,\n                  entry as SubmissionTypes.S3SubmissionData['submission'],\n                )\n                entries.isAutoLookup =\n                  entries.isAutoLookup && nestedLookupButtonValue.isAutoLookup\n                if (nestedLookupButtonValue.data || existingEntries?.[index]) {\n                  entries.data[index] = {\n                    ...existingEntries?.[index],\n                    ...nestedLookupButtonValue.data,\n                  }\n                  hasAnEntry = true\n                } else {\n                  entries.data[index] = undefined\n                }\n              }\n            }\n\n            return {\n              isAutoLookup: memo.isAutoLookup && entries.isAutoLookup,\n              data: hasAnEntry\n                ? {\n                    ...memo.data,\n                    [formElement.name]: entries.data,\n                  }\n                : memo.data,\n            }\n          }\n          break\n        }\n        default: {\n          if (formElement && 'name' in formElement) {\n            const dependencyValue = formSubmissionModel[formElement.name]\n            const isAutoLookupChecker = autoLookupElementMap[formElement.type]\n            const isFormElementAutoLookup =\n              typeof isAutoLookupChecker === 'function'\n                ? isAutoLookupChecker(formElement)\n                : isAutoLookupChecker\n            return {\n              isAutoLookup: memo.isAutoLookup && isFormElementAutoLookup,\n              data:\n                dependencyValue !== undefined && dependencyValue !== null\n                  ? {\n                      ...memo.data,\n                      [formElement.name]: dependencyValue,\n                    }\n                  : memo.data,\n            }\n          }\n          break\n        }\n      }\n\n      return memo\n    },\n    {\n      isAutoLookup: true,\n      data: undefined,\n    },\n  )\n}\n\n// Creating an object here so we get a Typescript error when adding a\n// new element type and forgetting to add to the array of allowed types\nconst autoLookupElementMap: Record<\n  Exclude<FormTypes.FormElement['type'], 'page'>,\n  boolean | ((element: FormTypes.FormElement) => boolean)\n> = {\n  text: false,\n  textarea: false,\n  number: false,\n  email: false,\n  telephone: false,\n  barcodeScanner: false,\n  radio: true,\n  checkboxes: false,\n  select: (formElement) => formElement.type === 'select' && !formElement.multi,\n  autocomplete: true,\n  boolean: true,\n  date: false,\n  datetime: false,\n  time: false,\n  heading: false,\n  html: false,\n  image: false,\n  infoPage: false,\n  camera: false,\n  repeatableSet: false,\n  draw: false,\n  calculation: false,\n  location: true,\n  files: true,\n  captcha: false,\n  form: false,\n  summary: false,\n  compliance: true,\n  geoscapeAddress: true,\n  pointAddress: true,\n  pointAddressV3: true,\n  googleAddress: false,\n  civicaStreetName: true,\n  civicaNameRecord: false,\n  section: false,\n  bsb: false,\n  abn: false,\n  freshdeskDependentField: false,\n  apiNSWLiquorLicence: true,\n  arcGISWebMap: true,\n  pointCadastralParcel: true,\n  lookupButton: false,\n}\n"]}

package/dist/form-elements/FormElementNumber.js

@@ -43,7 +43,7 @@ function FormElementNumber({ id, element, value, onChange, validationMessage, di
     }, []);
     const { isLookingUp } = React.useContext(LookupNotificationContext);
     const isDisplayingValidationMessage = (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp;
-    return (_jsx("div", { className: "cypress-number-element", children: _jsxs(FormElementLabelContainer, { className: "ob-number", id: id, element: element, required: element.required, children: [!element.isSlider ? (_jsxs("div", { className: "field has-addons", children: [_jsxs("div", { className: "control is-expanded has-icons-right", children: [_jsx("input", { type: "number", placeholder: element.placeholderValue, id: id, value: typeof value === 'number' ? value : '', name: element.name, className: "input ob-input cypress-number-control", onChange: handleChange, required: element.required, disabled: element.readOnly, onBlur: setIsDirty, ref: htmlInputElementRef, onWheel: handleWheel, "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: element.displayAsCurrency ? 'attach_money' : 'tag' }) })] }), !!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 })] })) : isPageVisible ? (_jsx(SliderControl, { id: id, text: text, value: value, element: element, onChange: handleChange, onBlur: setIsDirty, ariaDescribedby: ariaDescribedby })) : undefined, isDisplayingValidationMessage && (_jsx(FormElementValidationMessage, { message: validationMessage }))] }) }));
+    return (_jsx("div", { className: "cypress-number-element", children: _jsxs(FormElementLabelContainer, { className: "ob-number", id: id, element: element, required: element.required, children: [!element.isSlider ? (_jsxs("div", { className: "field has-addons", children: [_jsxs("div", { className: "control is-expanded has-icons-right", children: [_jsx("input", { type: "number", placeholder: element.placeholderValue, id: id, value: typeof value === 'number' ? value : '', name: element.name, className: "input ob-input cypress-number-control", onChange: handleChange, required: element.required, disabled: element.readOnly, onBlur: setIsDirty, ref: htmlInputElementRef, onWheel: handleWheel, "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: element.displayAsCurrency ? 'attach_money' : 'tag' }) })] }), !!element.readOnly && !!text && (_jsx("div", { className: "control", children: _jsx(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }) })), _jsx(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton, overrideRequiredMessage: undefined })] })) : isPageVisible ? (_jsx(SliderControl, { id: id, text: text, value: value, element: element, onChange: handleChange, onBlur: setIsDirty, ariaDescribedby: ariaDescribedby })) : undefined, isDisplayingValidationMessage && (_jsx(FormElementValidationMessage, { message: validationMessage }))] }) }));
 }
 const sliderBubbleWidthInPixels = 24;
 const SliderControl = React.memo(function SliderControl({ id, text, value, element, onChange, onBlur, ariaDescribedby, }) {

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementNumber.js","sourceRoot":"","sources":["../../src/form-elements/FormElementNumber.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport _debounce from 'lodash.debounce'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport { localisationService } from '../apps'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useIsPageVisible from '../hooks/useIsPageVisible'\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.NumberElement\n  value: unknown\n  onChange: FormElementValueChangeHandler<number>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementNumber({\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 isPageVisible = useIsPageVisible()\n\n  const text = React.useMemo(() => {\n    if (typeof value !== 'number') {\n      return ''\n    }\n    if (element.displayAsCurrency) {\n      return localisationService.formatCurrency(value)\n    }\n    return value.toString()\n  }, [value, element.displayAsCurrency])\n  const handleChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const newValue = parseFloat(event.target.value)\n      onChange(element, {\n        value: isNaN(newValue) ? undefined : newValue,\n      })\n    },\n    [element, onChange],\n  )\n  const htmlInputElementRef = React.useRef<HTMLInputElement>(null)\n\n  //this onWheel callback prevents numbers changing while scrolling\n  const handleWheel = React.useCallback(() => {\n    if (htmlInputElementRef.current !== document.activeElement) {\n      return\n    }\n    htmlInputElementRef.current?.blur()\n    setTimeout(() => {\n      htmlInputElementRef.current?.focus()\n    })\n  }, [])\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  return (\n    <div className=\"cypress-number-element\">\n      <FormElementLabelContainer\n        className=\"ob-number\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        {!element.isSlider ? (\n          <div className=\"field has-addons\">\n            <div className=\"control is-expanded has-icons-right\">\n              <input\n                type=\"number\"\n                placeholder={element.placeholderValue}\n                id={id}\n                value={typeof value === 'number' ? value : ''}\n                name={element.name}\n                className=\"input ob-input cypress-number-control\"\n                onChange={handleChange}\n                required={element.required}\n                disabled={element.readOnly}\n                onBlur={setIsDirty}\n                ref={htmlInputElementRef}\n                onWheel={handleWheel}\n                aria-describedby={ariaDescribedby}\n                autoComplete={autocompleteAttributes}\n                aria-required={element.required}\n              />\n              <span className=\"ob-input-icon icon is-small is-right\">\n                <MaterialIcon className=\"is-size-5\">\n                  {element.displayAsCurrency ? 'attach_money' : 'tag'}\n                </MaterialIcon>\n              </span>\n            </div>\n            {!!element.readOnly && !!text && (\n              <div className=\"control\">\n                <CopyToClipboardButton\n                  className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                  text={text}\n                />\n              </div>\n            )}\n            <LookupButton\n              isInputButton\n              value={value}\n              validationMessage={validationMessage}\n              lookupButtonConfig={element.lookupButton}\n            />\n          </div>\n        ) : isPageVisible ? (\n          <SliderControl\n            id={id}\n            text={text}\n            value={value}\n            element={element}\n            onChange={handleChange}\n            onBlur={setIsDirty}\n            ariaDescribedby={ariaDescribedby}\n          />\n        ) : undefined}\n\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nconst sliderBubbleWidthInPixels = 24\n\nconst SliderControl = React.memo(function SliderControl({\n  id,\n  text,\n  value,\n  element,\n  onChange,\n  onBlur,\n  ariaDescribedby,\n}: {\n  id: string\n  text: string\n  value: unknown\n  element: FormTypes.NumberElement\n  ariaDescribedby: string | undefined\n  onChange: (event: React.ChangeEvent<HTMLInputElement>) => unknown\n  onBlur: () => void\n}) {\n  const sliderOutputRef = React.useRef<HTMLOutputElement>(null)\n  const sliderInputRef = React.useRef<HTMLInputElement>(null)\n\n  const number = React.useMemo(\n    () => (typeof value === 'number' ? value : parseFloat(value as string)),\n    [value],\n  )\n\n  const removeIsDraggingClass = React.useMemo(\n    () =>\n      _debounce((outputElement: HTMLOutputElement) => {\n        if (outputElement.classList.contains('is-dragging')) {\n          outputElement.classList.remove('is-dragging')\n        }\n      }, 500),\n    [],\n  )\n\n  React.useEffect(() => {\n    if (\n      Number.isNaN(number) ||\n      typeof element.maxNumber !== 'number' ||\n      typeof element.minNumber !== 'number'\n    ) {\n      return\n    }\n\n    const outputElement = sliderOutputRef.current\n    const inputElement = sliderInputRef.current\n    if (outputElement && inputElement) {\n      const range = element.maxNumber - element.minNumber\n      const percentage = (number - element.minNumber) / range\n      const inputWidth = inputElement.getBoundingClientRect().width\n      const outputWidth = outputElement.getBoundingClientRect().width\n      const sliderBubbleOffSetPixels =\n        (percentage - 0.5) * -sliderBubbleWidthInPixels\n\n      outputElement.style.left = `${percentage * inputWidth}px`\n      outputElement.style.marginLeft = `-${\n        outputWidth / 2 - sliderBubbleOffSetPixels\n      }px`\n\n      if (!outputElement.classList.contains('is-dragging')) {\n        outputElement.classList.add('is-dragging')\n      }\n      removeIsDraggingClass(outputElement)\n    }\n  }, [element.maxNumber, element.minNumber, number, removeIsDraggingClass])\n\n  return (\n    <div className=\"control\">\n      <output\n        ref={sliderOutputRef}\n        className=\"ob-number__output cypress-number-output\"\n        htmlFor={id}\n      >\n        {text}\n      </output>\n      <input\n        ref={sliderInputRef}\n        id={id}\n        name={element.name}\n        className=\"slider ob-input is-fullwidth cypress-slider-number-control is-large is-circle cypress-number-control\"\n        step={element.sliderIncrement ? element.sliderIncrement : 1}\n        min={element.minNumber}\n        max={element.maxNumber}\n        value={number}\n        type=\"range\"\n        onChange={onChange}\n        required={element.required}\n        aria-describedby={ariaDescribedby}\n        aria-required={element.required}\n        disabled={element.readOnly}\n        onBlur={onBlur}\n      />\n    </div>\n  )\n})\n\nexport default React.memo(FormElementNumber)\n"]}
+{"version":3,"file":"FormElementNumber.js","sourceRoot":"","sources":["../../src/form-elements/FormElementNumber.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport _debounce from 'lodash.debounce'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport { localisationService } from '../apps'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useIsPageVisible from '../hooks/useIsPageVisible'\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.NumberElement\n  value: unknown\n  onChange: FormElementValueChangeHandler<number>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementNumber({\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 isPageVisible = useIsPageVisible()\n\n  const text = React.useMemo(() => {\n    if (typeof value !== 'number') {\n      return ''\n    }\n    if (element.displayAsCurrency) {\n      return localisationService.formatCurrency(value)\n    }\n    return value.toString()\n  }, [value, element.displayAsCurrency])\n  const handleChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const newValue = parseFloat(event.target.value)\n      onChange(element, {\n        value: isNaN(newValue) ? undefined : newValue,\n      })\n    },\n    [element, onChange],\n  )\n  const htmlInputElementRef = React.useRef<HTMLInputElement>(null)\n\n  //this onWheel callback prevents numbers changing while scrolling\n  const handleWheel = React.useCallback(() => {\n    if (htmlInputElementRef.current !== document.activeElement) {\n      return\n    }\n    htmlInputElementRef.current?.blur()\n    setTimeout(() => {\n      htmlInputElementRef.current?.focus()\n    })\n  }, [])\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  return (\n    <div className=\"cypress-number-element\">\n      <FormElementLabelContainer\n        className=\"ob-number\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        {!element.isSlider ? (\n          <div className=\"field has-addons\">\n            <div className=\"control is-expanded has-icons-right\">\n              <input\n                type=\"number\"\n                placeholder={element.placeholderValue}\n                id={id}\n                value={typeof value === 'number' ? value : ''}\n                name={element.name}\n                className=\"input ob-input cypress-number-control\"\n                onChange={handleChange}\n                required={element.required}\n                disabled={element.readOnly}\n                onBlur={setIsDirty}\n                ref={htmlInputElementRef}\n                onWheel={handleWheel}\n                aria-describedby={ariaDescribedby}\n                autoComplete={autocompleteAttributes}\n                aria-required={element.required}\n              />\n              <span className=\"ob-input-icon icon is-small is-right\">\n                <MaterialIcon className=\"is-size-5\">\n                  {element.displayAsCurrency ? 'attach_money' : 'tag'}\n                </MaterialIcon>\n              </span>\n            </div>\n            {!!element.readOnly && !!text && (\n              <div className=\"control\">\n                <CopyToClipboardButton\n                  className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                  text={text}\n                />\n              </div>\n            )}\n            <LookupButton\n              isInputButton\n              value={value}\n              validationMessage={validationMessage}\n              lookupButtonConfig={element.lookupButton}\n              overrideRequiredMessage={undefined}\n            />\n          </div>\n        ) : isPageVisible ? (\n          <SliderControl\n            id={id}\n            text={text}\n            value={value}\n            element={element}\n            onChange={handleChange}\n            onBlur={setIsDirty}\n            ariaDescribedby={ariaDescribedby}\n          />\n        ) : undefined}\n\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nconst sliderBubbleWidthInPixels = 24\n\nconst SliderControl = React.memo(function SliderControl({\n  id,\n  text,\n  value,\n  element,\n  onChange,\n  onBlur,\n  ariaDescribedby,\n}: {\n  id: string\n  text: string\n  value: unknown\n  element: FormTypes.NumberElement\n  ariaDescribedby: string | undefined\n  onChange: (event: React.ChangeEvent<HTMLInputElement>) => unknown\n  onBlur: () => void\n}) {\n  const sliderOutputRef = React.useRef<HTMLOutputElement>(null)\n  const sliderInputRef = React.useRef<HTMLInputElement>(null)\n\n  const number = React.useMemo(\n    () => (typeof value === 'number' ? value : parseFloat(value as string)),\n    [value],\n  )\n\n  const removeIsDraggingClass = React.useMemo(\n    () =>\n      _debounce((outputElement: HTMLOutputElement) => {\n        if (outputElement.classList.contains('is-dragging')) {\n          outputElement.classList.remove('is-dragging')\n        }\n      }, 500),\n    [],\n  )\n\n  React.useEffect(() => {\n    if (\n      Number.isNaN(number) ||\n      typeof element.maxNumber !== 'number' ||\n      typeof element.minNumber !== 'number'\n    ) {\n      return\n    }\n\n    const outputElement = sliderOutputRef.current\n    const inputElement = sliderInputRef.current\n    if (outputElement && inputElement) {\n      const range = element.maxNumber - element.minNumber\n      const percentage = (number - element.minNumber) / range\n      const inputWidth = inputElement.getBoundingClientRect().width\n      const outputWidth = outputElement.getBoundingClientRect().width\n      const sliderBubbleOffSetPixels =\n        (percentage - 0.5) * -sliderBubbleWidthInPixels\n\n      outputElement.style.left = `${percentage * inputWidth}px`\n      outputElement.style.marginLeft = `-${\n        outputWidth / 2 - sliderBubbleOffSetPixels\n      }px`\n\n      if (!outputElement.classList.contains('is-dragging')) {\n        outputElement.classList.add('is-dragging')\n      }\n      removeIsDraggingClass(outputElement)\n    }\n  }, [element.maxNumber, element.minNumber, number, removeIsDraggingClass])\n\n  return (\n    <div className=\"control\">\n      <output\n        ref={sliderOutputRef}\n        className=\"ob-number__output cypress-number-output\"\n        htmlFor={id}\n      >\n        {text}\n      </output>\n      <input\n        ref={sliderInputRef}\n        id={id}\n        name={element.name}\n        className=\"slider ob-input is-fullwidth cypress-slider-number-control is-large is-circle cypress-number-control\"\n        step={element.sliderIncrement ? element.sliderIncrement : 1}\n        min={element.minNumber}\n        max={element.maxNumber}\n        value={number}\n        type=\"range\"\n        onChange={onChange}\n        required={element.required}\n        aria-describedby={ariaDescribedby}\n        aria-required={element.required}\n        disabled={element.readOnly}\n        onBlur={onBlur}\n      />\n    </div>\n  )\n})\n\nexport default React.memo(FormElementNumber)\n"]}

package/dist/form-elements/FormElementSelect.js

@@ -36,7 +36,7 @@ function FormElementSelect({ id, element, value, onChange, validationMessage, di
                                     onChange(element, {
                                         value: vals.length ? vals : undefined,
                                     });
-                                }, required: element.required, disabled: element.readOnly, onBlur: setIsDirty, "aria-describedby": ariaDescribedby, "aria-required": element.required, children: filteredOptions.map(({ label, value }) => (_jsx("option", { value: value, children: label }, value))) }), _jsx(LookupButton, { hasMarginTop: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton })] })), isDisplayingValidationMessage && (_jsx(FormElementValidationMessage, { message: validationMessage }))] }) }) }));
+                                }, required: element.required, disabled: element.readOnly, onBlur: setIsDirty, "aria-describedby": ariaDescribedby, "aria-required": element.required, children: filteredOptions.map(({ label, value }) => (_jsx("option", { value: value, children: label }, value))) }), _jsx(LookupButton, { hasMarginTop: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton, overrideRequiredMessage: undefined })] })), isDisplayingValidationMessage && (_jsx(FormElementValidationMessage, { message: validationMessage }))] }) }) }));
 }
 export default React.memo(FormElementSelect);
 //# sourceMappingURL=FormElementSelect.js.map

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

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

package/dist/form-elements/FormElementTelephone.js

@@ -14,7 +14,7 @@ function FormElementTelephone({ id, element, value, onChange, validationMessage,
     const isDisplayingValidationMessage = (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp;
     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 }))] }) }));
+                                    }), 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, overrideRequiredMessage: undefined })] }), 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,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"]}
+{"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,EACxC,uBAAuB,EAAE,SAAS,GAClC,IACE,EAEL,6BAA6B,IAAI,CAChC,KAAC,4BAA4B,IAAC,OAAO,EAAE,iBAAiB,GAAI,CAC7D,IACyB,GACxB,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,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            overrideRequiredMessage={undefined}\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.js

@@ -14,7 +14,7 @@ function FormElementText({ id, element, value, onChange, validationMessage, disp
     const isDisplayingValidationMessage = (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp;
     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', {
+                                }), 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, overrideRequiredMessage: undefined })] }), (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] }))] }) }))] }) }));
 }

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":"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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            overrideRequiredMessage={undefined}\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.js

@@ -22,7 +22,7 @@ function FormElementTextarea({ id, element, value, onChange, validationMessage,
                             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 }))] }))] }) }));
+                                }), 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, overrideRequiredMessage: undefined }))] }))] }) }));
 }
 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: 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"]}
+{"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                overrideRequiredMessage={undefined}\n              />\n            )}\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementTextarea)\n"]}

package/dist/form-elements/FormElementTime.js

@@ -43,7 +43,7 @@ function FormElementTime({ id, element, value, onChange, validationMessage, disp
     }, [value]);
     const { isLookingUp } = React.useContext(LookupNotificationContext);
     const isDisplayingValidationMessage = (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp;
-    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 }))] }) }));
+    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, overrideRequiredMessage: undefined })] }), 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 '../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 '../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            overrideRequiredMessage={undefined}\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/hooks/form-date-picker/useFormDatePickerProps.d.ts

@@ -18,7 +18,7 @@ export default function useFormDatePickerProps({ id, value, maxDate, minDate, ar
     placeholder: string | undefined;
     disabled: boolean | undefined;
     className: string;
-    required: boolean;
+    required: boolean | undefined;
     onBlur: () => void;
     onChange: (newDate: Date | undefined) => void;
 }): readonly [{

package/dist/hooks/form-date-picker/useFormDatePickerProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFormDatePickerProps.js","sourceRoot":"","sources":["../../../src/hooks/form-date-picker/useFormDatePickerProps.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { PickersActionBarAction } from '@mui/x-date-pickers'\nimport clsx from 'clsx'\nimport useBooleanState from '../useBooleanState'\nimport { PopperProps, TextFieldProps, useMediaQuery } from '@mui/material'\nimport Tooltip from '../../components/renderer/Tooltip'\nimport MaterialIcon from '../../components/MaterialIcon'\n\nexport const PickerInputButton = React.memo(function PickerInputButton({\n  icon,\n  tooltip,\n  onClick,\n}: {\n  icon: string\n  tooltip: string\n  onClick: () => void\n}) {\n  return (\n    <div className=\"control\">\n      <Tooltip title={tooltip}>\n        <button\n          onClick={onClick}\n          className=\"button is-input-addon cypress-date-picker-button\"\n          type=\"button\"\n        >\n          <span className=\"icon\">\n            <MaterialIcon>{icon}</MaterialIcon>\n          </span>\n        </button>\n      </Tooltip>\n    </div>\n  )\n})\n\nfunction Input({\n  /* eslint-disable @typescript-eslint/no-unused-vars */\n  focused,\n  sx,\n  label,\n  size,\n  ownerState,\n  defaultValue,\n  InputProps,\n  error,\n  /* eslint-enable @typescript-eslint/no-unused-vars */\n  // need to use the deprecated inputProps because slotProps are not currently passed down\n  inputProps,\n  inputRef,\n  value,\n  ref,\n  ...props\n}: TextFieldProps & { ownerState?: unknown }) {\n  return (\n    <div className=\"control is-expanded has-icons-right\" ref={ref}>\n      <input\n        ref={inputRef}\n        value={value as string}\n        {...props}\n        {...inputProps}\n      />\n    </div>\n  )\n}\n\nexport default function useFormDatePickerProps({\n  id,\n  value,\n  maxDate,\n  minDate,\n  ariaDescribedby,\n  placeholder,\n  disabled,\n  className,\n  onBlur,\n  onChange,\n  required,\n}: {\n  id: string\n  value: string | undefined\n  maxDate: string | undefined\n  minDate: string | undefined\n  ariaDescribedby: string | undefined\n  placeholder: string | undefined\n  disabled: boolean | undefined\n  className: string\n  required: boolean\n  onBlur: () => void\n  onChange: (newDate: Date | undefined) => void\n}) {\n  const ref = React.useRef<HTMLDivElement>(null)\n  const [isPickerOpen, openPicker, closePicker] = useBooleanState(false)\n\n  const valueMemo = React.useMemo(() => {\n    return value ? new Date(value) : null\n  }, [value])\n\n  const maxDateMemo = React.useMemo(\n    () => (maxDate ? new Date(maxDate) : undefined),\n    [maxDate],\n  )\n  const minDateMemo = React.useMemo(\n    () => (minDate ? new Date(minDate) : undefined),\n    [minDate],\n  )\n  // default used by mui to determine when the mobile picker is used\n  // https://mui.com/x/react-date-pickers/date-picker/#available-components\n  const desktopMediaQuery = '@media (pointer: fine)'\n\n  const isDesktop = useMediaQuery(desktopMediaQuery)\n\n  const openPickerOnMobile = React.useCallback(() => {\n    if (!isDesktop) {\n      openPicker()\n    }\n  }, [isDesktop, openPicker])\n\n  return [\n    {\n      slots: {\n        textField: Input,\n      },\n      /* eslint-disable react-hooks/refs */\n      slotProps: {\n        actionBar: {\n          actions: [\n            'clear',\n            'today',\n            'cancel',\n            'accept',\n          ] as PickersActionBarAction[],\n        },\n        popper: {\n          container: ref.current,\n          anchorEl: ref.current,\n          modifiers: [\n            {\n              name: 'preventOverflow',\n              options: {\n                altAxis: false,\n              },\n            },\n          ],\n        } as Partial<PopperProps>,\n        textField: {\n          id,\n          placeholder: placeholder,\n          'aria-describedby': ariaDescribedby,\n          'aria-required': required,\n          onBlur,\n          className: clsx('input ob-input', className),\n          onClick: openPickerOnMobile,\n        } as TextFieldProps,\n      },\n      /* eslint-enable react-hooks/refs */\n      ref,\n      open: isPickerOpen,\n      onClose: () => {\n        onBlur()\n        closePicker()\n      },\n      onChange: (newDate: Date | null) => {\n        if (!(newDate instanceof Date) || isNaN(newDate.valueOf())) {\n          onChange(undefined)\n        } else {\n          onChange(newDate)\n        }\n      },\n      maxDate: maxDateMemo,\n      minDate: minDateMemo,\n      value: valueMemo,\n      disabled,\n      desktopMediaQuery,\n      enableAccessibleFieldDOMStructure: false,\n    },\n    openPicker,\n  ] as const\n}\n"]}
+{"version":3,"file":"useFormDatePickerProps.js","sourceRoot":"","sources":["../../../src/hooks/form-date-picker/useFormDatePickerProps.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { PickersActionBarAction } from '@mui/x-date-pickers'\nimport clsx from 'clsx'\nimport useBooleanState from '../useBooleanState'\nimport { PopperProps, TextFieldProps, useMediaQuery } from '@mui/material'\nimport Tooltip from '../../components/renderer/Tooltip'\nimport MaterialIcon from '../../components/MaterialIcon'\n\nexport const PickerInputButton = React.memo(function PickerInputButton({\n  icon,\n  tooltip,\n  onClick,\n}: {\n  icon: string\n  tooltip: string\n  onClick: () => void\n}) {\n  return (\n    <div className=\"control\">\n      <Tooltip title={tooltip}>\n        <button\n          onClick={onClick}\n          className=\"button is-input-addon cypress-date-picker-button\"\n          type=\"button\"\n        >\n          <span className=\"icon\">\n            <MaterialIcon>{icon}</MaterialIcon>\n          </span>\n        </button>\n      </Tooltip>\n    </div>\n  )\n})\n\nfunction Input({\n  /* eslint-disable @typescript-eslint/no-unused-vars */\n  focused,\n  sx,\n  label,\n  size,\n  ownerState,\n  defaultValue,\n  InputProps,\n  error,\n  /* eslint-enable @typescript-eslint/no-unused-vars */\n  // need to use the deprecated inputProps because slotProps are not currently passed down\n  inputProps,\n  inputRef,\n  value,\n  ref,\n  ...props\n}: TextFieldProps & { ownerState?: unknown }) {\n  return (\n    <div className=\"control is-expanded has-icons-right\" ref={ref}>\n      <input\n        ref={inputRef}\n        value={value as string}\n        {...props}\n        {...inputProps}\n      />\n    </div>\n  )\n}\n\nexport default function useFormDatePickerProps({\n  id,\n  value,\n  maxDate,\n  minDate,\n  ariaDescribedby,\n  placeholder,\n  disabled,\n  className,\n  onBlur,\n  onChange,\n  required,\n}: {\n  id: string\n  value: string | undefined\n  maxDate: string | undefined\n  minDate: string | undefined\n  ariaDescribedby: string | undefined\n  placeholder: string | undefined\n  disabled: boolean | undefined\n  className: string\n  required: boolean | undefined\n  onBlur: () => void\n  onChange: (newDate: Date | undefined) => void\n}) {\n  const ref = React.useRef<HTMLDivElement>(null)\n  const [isPickerOpen, openPicker, closePicker] = useBooleanState(false)\n\n  const valueMemo = React.useMemo(() => {\n    return value ? new Date(value) : null\n  }, [value])\n\n  const maxDateMemo = React.useMemo(\n    () => (maxDate ? new Date(maxDate) : undefined),\n    [maxDate],\n  )\n  const minDateMemo = React.useMemo(\n    () => (minDate ? new Date(minDate) : undefined),\n    [minDate],\n  )\n  // default used by mui to determine when the mobile picker is used\n  // https://mui.com/x/react-date-pickers/date-picker/#available-components\n  const desktopMediaQuery = '@media (pointer: fine)'\n\n  const isDesktop = useMediaQuery(desktopMediaQuery)\n\n  const openPickerOnMobile = React.useCallback(() => {\n    if (!isDesktop) {\n      openPicker()\n    }\n  }, [isDesktop, openPicker])\n\n  return [\n    {\n      slots: {\n        textField: Input,\n      },\n      /* eslint-disable react-hooks/refs */\n      slotProps: {\n        actionBar: {\n          actions: [\n            'clear',\n            'today',\n            'cancel',\n            'accept',\n          ] as PickersActionBarAction[],\n        },\n        popper: {\n          container: ref.current,\n          anchorEl: ref.current,\n          modifiers: [\n            {\n              name: 'preventOverflow',\n              options: {\n                altAxis: false,\n              },\n            },\n          ],\n        } as Partial<PopperProps>,\n        textField: {\n          id,\n          placeholder: placeholder,\n          'aria-describedby': ariaDescribedby,\n          'aria-required': required,\n          onBlur,\n          className: clsx('input ob-input', className),\n          onClick: openPickerOnMobile,\n        } as TextFieldProps,\n      },\n      /* eslint-enable react-hooks/refs */\n      ref,\n      open: isPickerOpen,\n      onClose: () => {\n        onBlur()\n        closePicker()\n      },\n      onChange: (newDate: Date | null) => {\n        if (!(newDate instanceof Date) || isNaN(newDate.valueOf())) {\n          onChange(undefined)\n        } else {\n          onChange(newDate)\n        }\n      },\n      maxDate: maxDateMemo,\n      minDate: minDateMemo,\n      value: valueMemo,\n      disabled,\n      desktopMediaQuery,\n      enableAccessibleFieldDOMStructure: false,\n    },\n    openPicker,\n  ] as const\n}\n"]}

package/dist/services/form-validation/extensions.d.ts

@@ -2,7 +2,9 @@ import { FormTypes } from '@oneblink/types';
 import { CaptchaType, ExecutedLookups, FormElementsConditionallyShown } from '../../types/form';
 declare const validationExtensions: {
     lookups({ executedLookups, formElement, }: {
-        formElement: FormTypes.LookupFormElement & FormTypes.FormElementRequired;
+        formElement: FormTypes.LookupFormElement & FormTypes.FormElementRequired & {
+            type: FormTypes.FormElement["type"];
+        };
         executedLookups: ExecutedLookups;
     }): string[];
     presence(value: unknown, { required, requiredMessage }: FormTypes.FormElementRequired, message: string): string[];