npm - @oneblink/apps-react - Versions diffs - 12.0.0 → 13.0.0-beta.2 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (173) hide show

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

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

package/dist/form-elements/FormElementDate.js CHANGED Viewed

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FormElementDate.js","sourceRoot":"","sources":["../../src/form-elements/FormElementDate.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAE7C,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,OAAO,qBAAqB,MAAM,8CAA8C,CAAA;AAChF,OAAO,YAAY,MAAM,qCAAqC,CAAA;AAE9D,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AACxF,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAA;AAElE,OAAO,wBAAwB,MAAM,mCAAmC,CAAA;AACxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAA;AAC1E,OAAO,yBAAyB,MAAM,oCAAoC,CAAA;AAC1E,OAAO,sBAAsB,EAAE,EAC7B,iBAAiB,GAClB,MAAM,kDAAkD,CAAA;AACzD,OAAO,4BAA4B,MAAM,qDAAqD,CAAA;~~AAW9F~~,SAAS,eAAe,CAAC,EACvB,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,OAAO,EACP,UAAU,GACJ;IACN,MAAM,eAAe,GAAG,yBAAyB,CAAC,EAAE,EAAE,OAAO,CAAC,CAAA;IAE9D,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,EAAE,YAAY,EAAE,GACtD,wBAAwB,CAAC,OAAO,CAAC,CAAA;IAEnC,MAAM,eAAe,GAAG,mBAAmB,CAAC,iBAAiB,EAAE,CAAC,SAAS,CAAA;IAEzE,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,cAAc,CAAC;YACpB,QAAQ,EAAE,IAAI;YACd,UAAU,EAAE,YAAY;YACxB,KAAK,EAAE,MAAM;SACd,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAA;IAE1B,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,cAAc,CAAC;YACpB,QAAQ,EAAE,IAAI;YACd,UAAU,EAAE,cAAc;YAC1B,KAAK,EAAE,QAAQ;SAChB,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAA;IAE9B,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAC5B,GAAG,EAAE,CAAC,cAAc,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAC/D,CAAC,KAAK,CAAC,CACR,CAAA;IAED,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,sBAAsB,CAAC;QAC3D,EAAE;QACF,KAAK,EAAE,QAAQ;QACf,OAAO;QACP,OAAO;QACP,eAAe;QACf,WAAW,EAAE,OAAO,CAAC,gBAAgB;QACrC,SAAS,EAAE,sBAAsB;QACjC,MAAM,EAAE,UAAU;QAClB,QAAQ,EAAE,~~OAAO,CAAC,~~QAAQ;~~QAC1B~~,QAAQ,EAAE,OAAO,CAAC,QAAQ;QAC1B,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE,CACpB,QAAQ,CAAC,OAAO,EAAE;YAChB,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,SAAS;SAC3D,CAAC;KACL,CAAC,CAAA;IAEF,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC9B,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC9B,MAAM,IAAI,GAAG,mBAAmB,CAAC,YAAY,CAAC;gBAC5C,UAAU,EAAE,SAAS;gBACrB,KAAK;aACN,CAAC,CAAA;YACF,IAAI,IAAI,EAAE,CAAC;gBACT,OAAO,mBAAmB,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA;YAC7C,CAAC;QACH,CAAC;QACD,OAAO,IAAI,CAAA;IACb,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAA;IACnE,MAAM,6BAA6B,GACjC,CAAC,wBAAwB,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC,iBAAiB,IAAI,CAAC,WAAW,CAAA;IAE9E,OAAO,CACL,cAAK,SAAS,EAAC,sBAAsB,YACnC,MAAC,yBAAyB,IACxB,SAAS,EAAC,SAAS,EACnB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ,aAE1B,eAAK,SAAS,EAAC,kBAAkB,aAC/B,KAAC,UAAU,IACT,KAAK,EAAE,OAAO,CAAC,KAAK,EACpB,MAAM,EAAE,eAAe,KACnB,WAAW,GACf,EACD,CAAC,~~OAAO,CAAC,~~QAAQ,IAAI,~~CACpB~~,KAAC,iBAAiB,IAChB,OAAO,EAAC,aAAa,EACrB,OAAO,EAAE,cAAc,EACvB,IAAI,EAAC,OAAO,GACZ,CACH,EACA,CAAC,CAAC,~~OAAO,CAAC,~~QAAQ,IAAI,CAAC,CAAC,IAAI,IAAI,~~CAC/B~~,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,eAAe,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { localisationService } from '../apps'\nimport { FormTypes } from '@oneblink/types'\nimport { DatePicker } from '@mui/x-date-pickers'\nimport { format } from 'date-fns'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\n\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { parseDateValue } from '../services/generate-default-data'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useFormElementDateFromTo from '../hooks/useFormElementDateFromTo'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport useFormDatePickerProps, {\n PickerInputButton,\n} from '../hooks/form-date-picker/useFormDatePickerProps'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n id: string\n element: FormTypes.DateElement\n value: unknown \| undefined\n onChange: FormElementValueChangeHandler<string>\n displayValidationMessage: boolean\n validationMessage: string \| undefined\n} & IsDirtyProps\n\nfunction FormElementDate({\n id,\n element,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n isDirty,\n setIsDirty,\n}: Props) {\n const ariaDescribedby = useElementAriaDescribedby(id, element)\n\n const { fromDate, fromDaysOffset, toDate, toDaysOffset } =\n useFormElementDateFromTo(element)\n\n const shortDateFormat = localisationService.getDateFnsFormats().shortDate\n\n const maxDate = React.useMemo(() => {\n return parseDateValue({\n dateOnly: true,\n daysOffset: toDaysOffset,\n value: toDate,\n })\n }, [toDate, toDaysOffset])\n\n const minDate = React.useMemo(() => {\n return parseDateValue({\n dateOnly: true,\n daysOffset: fromDaysOffset,\n value: fromDate,\n })\n }, [fromDate, fromDaysOffset])\n\n const isoValue = React.useMemo(\n () => parseDateValue({ dateOnly: false, daysOffset: 0, value }),\n [value],\n )\n\n const [commonProps, openDatePicker] = useFormDatePickerProps({\n id,\n value: isoValue,\n maxDate,\n minDate,\n ariaDescribedby,\n placeholder: element.placeholderValue,\n className: 'cypress-date-control',\n onBlur: setIsDirty,\n disabled: ~~element.~~readOnly,\n required: element.required,\n onChange: (newDate) =>\n onChange(element, {\n value: newDate ? format(newDate, 'yyyy-MM-dd') : undefined,\n }),\n })\n\n const text = React.useMemo(() => {\n if (typeof value === 'string') {\n const date = localisationService.generateDate({\n daysOffset: undefined,\n value,\n })\n if (date) {\n return localisationService.formatDate(date)\n }\n }\n return null\n }, [value])\n\n const { isLookingUp } = React.useContext(LookupNotificationContext)\n const isDisplayingValidationMessage =\n (displayValidationMessage \|\| isDirty) && !!validationMessage && !isLookingUp\n\n return (\n <div className=\"cypress-date-element\">\n <FormElementLabelContainer\n className=\"ob-date\"\n id={id}\n element={element}\n required={element.required}\n >\n <div className=\"field has-addons\">\n <DatePicker\n label={element.label}\n format={shortDateFormat}\n {...commonProps}\n />\n {!~~element.~~readOnly && (\n <PickerInputButton\n tooltip=\"Select date\"\n onClick={openDatePicker}\n icon=\"event\"\n />\n )}\n {!!~~element.~~readOnly && !!text && (\n <div className=\"control\">\n <CopyToClipboardButton\n className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n text={text}\n />\n </div>\n )}\n <LookupButton\n isInputButton\n value={value}\n validationMessage={validationMessage}\n lookupButtonConfig={element.lookupButton}\n overrideRequiredMessage={undefined}\n />\n </div>\n\n {isDisplayingValidationMessage && (\n <FormElementValidationMessage message={validationMessage} />\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementDate)\n"]}
1	+ {"version":3,"file":"FormElementDate.js","sourceRoot":"","sources":["../../src/form-elements/FormElementDate.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { localisationService } from '../apps'\nimport { FormTypes } from '@oneblink/types'\nimport { DatePicker } from '@mui/x-date-pickers'\nimport { format } from 'date-fns'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\n\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { parseDateValue } from '../services/generate-default-data'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useFormElementDateFromTo from '../hooks/useFormElementDateFromTo'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport useFormDatePickerProps, {\n PickerInputButton,\n} from '../hooks/form-date-picker/useFormDatePickerProps'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n id: string\n element: FormTypes.DateElement\n readOnly: boolean\n value: unknown \| undefined\n onChange: FormElementValueChangeHandler<string>\n displayValidationMessage: boolean\n validationMessage: string \| undefined\n} & IsDirtyProps\n\nfunction FormElementDate({\n id,\n element,\n readOnly,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n isDirty,\n setIsDirty,\n}: Props) {\n const ariaDescribedby = useElementAriaDescribedby(id, element)\n\n const { fromDate, fromDaysOffset, toDate, toDaysOffset } =\n useFormElementDateFromTo(element)\n\n const shortDateFormat = localisationService.getDateFnsFormats().shortDate\n\n const maxDate = React.useMemo(() => {\n return parseDateValue({\n dateOnly: true,\n daysOffset: toDaysOffset,\n value: toDate,\n })\n }, [toDate, toDaysOffset])\n\n const minDate = React.useMemo(() => {\n return parseDateValue({\n dateOnly: true,\n daysOffset: fromDaysOffset,\n value: fromDate,\n })\n }, [fromDate, fromDaysOffset])\n\n const isoValue = React.useMemo(\n () => parseDateValue({ dateOnly: false, daysOffset: 0, value }),\n [value],\n )\n\n const [commonProps, openDatePicker] = useFormDatePickerProps({\n id,\n value: isoValue,\n maxDate,\n minDate,\n ariaDescribedby,\n placeholder: element.placeholderValue,\n className: 'cypress-date-control',\n onBlur: setIsDirty,\n disabled: readOnly,\n required: element.required,\n onChange: (newDate) =>\n onChange(element, {\n value: newDate ? format(newDate, 'yyyy-MM-dd') : undefined,\n }),\n })\n\n const text = React.useMemo(() => {\n if (typeof value === 'string') {\n const date = localisationService.generateDate({\n daysOffset: undefined,\n value,\n })\n if (date) {\n return localisationService.formatDate(date)\n }\n }\n return null\n }, [value])\n\n const { isLookingUp } = React.useContext(LookupNotificationContext)\n const isDisplayingValidationMessage =\n (displayValidationMessage \|\| isDirty) && !!validationMessage && !isLookingUp\n\n return (\n <div className=\"cypress-date-element\">\n <FormElementLabelContainer\n className=\"ob-date\"\n id={id}\n element={element}\n required={element.required}\n >\n <div className=\"field has-addons\">\n <DatePicker\n label={element.label}\n format={shortDateFormat}\n {...commonProps}\n />\n {!readOnly && (\n <PickerInputButton\n tooltip=\"Select date\"\n onClick={openDatePicker}\n icon=\"event\"\n />\n )}\n {!!readOnly && !!text && (\n <div className=\"control\">\n <CopyToClipboardButton\n className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n text={text}\n />\n </div>\n )}\n <LookupButton\n isInputButton\n value={value}\n validationMessage={validationMessage}\n lookupButtonConfig={element.lookupButton}\n overrideRequiredMessage={undefined}\n />\n </div>\n\n {isDisplayingValidationMessage && (\n <FormElementValidationMessage message={validationMessage} />\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementDate)\n"]}

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

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

package/dist/form-elements/FormElementDateTime.js CHANGED Viewed

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FormElementDateTime.js","sourceRoot":"","sources":["../../src/form-elements/FormElementDateTime.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAE7C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAEpD,OAAO,qBAAqB,MAAM,8CAA8C,CAAA;AAChF,OAAO,YAAY,MAAM,qCAAqC,CAAA;AAE9D,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AACxF,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAA;AAElE,OAAO,wBAAwB,MAAM,mCAAmC,CAAA;AACxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAA;AAC1E,OAAO,yBAAyB,MAAM,oCAAoC,CAAA;AAC1E,OAAO,sBAAsB,EAAE,EAC7B,iBAAiB,GAClB,MAAM,kDAAkD,CAAA;AACzD,OAAO,4BAA4B,MAAM,qDAAqD,CAAA;~~AAW9F~~,SAAS,mBAAmB,CAAC,EAC3B,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,OAAO,EACP,UAAU,GACJ;IACN,MAAM,eAAe,GAAG,yBAAyB,CAAC,EAAE,EAAE,OAAO,CAAC,CAAA;IAE9D,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,EAAE,YAAY,EAAE,GACtD,wBAAwB,CAAC,OAAO,CAAC,CAAA;IAEnC,MAAM,mBAAmB,GACvB,mBAAmB,CAAC,iBAAiB,EAAE,CAAC,aAAa,CAAA;IAEvD,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,cAAc,CAAC;YACpB,QAAQ,EAAE,IAAI;YACd,UAAU,EAAE,YAAY;YACxB,KAAK,EAAE,MAAM;SACd,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAA;IAE1B,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,cAAc,CAAC;YACpB,QAAQ,EAAE,IAAI;YACd,UAAU,EAAE,cAAc;YAC1B,KAAK,EAAE,QAAQ;SAChB,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAA;IAE9B,MAAM,CAAC,WAAW,EAAE,kBAAkB,CAAC,GAAG,sBAAsB,CAAC;QAC/D,EAAE;QACF,KAAK,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;QACpD,OAAO;QACP,OAAO;QACP,eAAe;QACf,WAAW,EAAE,OAAO,CAAC,gBAAgB;QACrC,SAAS,EAAE,2BAA2B;QACtC,QAAQ,EAAE,~~OAAO,CAAC,~~QAAQ;~~QAC1B~~,QAAQ,EAAE,OAAO,CAAC,QAAQ;QAC1B,MAAM,EAAE,UAAU;QAClB,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE;YACpB,QAAQ,CAAC,OAAO,EAAE;gBAChB,KAAK,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,EAAE;aAC9B,CAAC,CAAA;QACJ,CAAC;KACF,CAAC,CAAA;IAEF,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC9B,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC9B,OAAO,IAAI,CAAA;QACb,CAAC;QACD,OAAO,mBAAmB,CAAC,cAAc,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAA;IAC5D,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,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,0BAA0B,YACvC,MAAC,yBAAyB,IACxB,SAAS,EAAC,aAAa,EACvB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ,aAE1B,eAAK,SAAS,EAAC,kBAAkB,aAC/B,KAAC,cAAc,IACb,KAAK,EAAE,OAAO,CAAC,KAAK,EACpB,MAAM,EAAE,mBAAmB,KACvB,WAAW,EACf,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,GACzB,EACD,CAAC,~~OAAO,CAAC,~~QAAQ,IAAI,~~CACpB~~,KAAC,iBAAiB,IAChB,OAAO,EAAC,sBAAsB,EAC9B,OAAO,EAAE,kBAAkB,EAC3B,IAAI,EAAC,YAAY,GACjB,CACH,EACA,CAAC,CAAC,~~OAAO,CAAC,~~QAAQ,IAAI,CAAC,CAAC,IAAI,IAAI,~~CAC/B~~,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,mBAAmB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { localisationService } from '../apps'\nimport { FormTypes } from '@oneblink/types'\nimport { DateTimePicker } from '@mui/x-date-pickers'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\n\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { parseDateValue } from '../services/generate-default-data'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useFormElementDateFromTo from '../hooks/useFormElementDateFromTo'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport useFormDatePickerProps, {\n PickerInputButton,\n} from '../hooks/form-date-picker/useFormDatePickerProps'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n id: string\n element: FormTypes.DateTimeElement\n value: unknown \| undefined\n onChange: FormElementValueChangeHandler<string>\n displayValidationMessage: boolean\n validationMessage: string \| undefined\n} & IsDirtyProps\n\nfunction FormElementDateTime({\n id,\n element,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n isDirty,\n setIsDirty,\n}: Props) {\n const ariaDescribedby = useElementAriaDescribedby(id, element)\n\n const { fromDate, fromDaysOffset, toDate, toDaysOffset } =\n useFormElementDateFromTo(element)\n\n const shortDateTimeFormat =\n localisationService.getDateFnsFormats().shortDateTime\n\n const maxDate = React.useMemo(() => {\n return parseDateValue({\n dateOnly: true,\n daysOffset: toDaysOffset,\n value: toDate,\n })\n }, [toDate, toDaysOffset])\n\n const minDate = React.useMemo(() => {\n return parseDateValue({\n dateOnly: true,\n daysOffset: fromDaysOffset,\n value: fromDate,\n })\n }, [fromDate, fromDaysOffset])\n\n const [commonProps, openDateTimePicker] = useFormDatePickerProps({\n id,\n value: typeof value === 'string' ? value : undefined,\n maxDate,\n minDate,\n ariaDescribedby,\n placeholder: element.placeholderValue,\n className: 'cypress-date-time-control',\n disabled: ~~element.~~readOnly,\n required: element.required,\n onBlur: setIsDirty,\n onChange: (newDate) => {\n onChange(element, {\n value: newDate?.toISOString(),\n })\n },\n })\n\n const text = React.useMemo(() => {\n if (typeof value !== 'string') {\n return null\n }\n return localisationService.formatDatetime(new Date(value))\n }, [value])\n\n const { isLookingUp } = React.useContext(LookupNotificationContext)\n const isDisplayingValidationMessage =\n (isDirty \|\| displayValidationMessage) && !!validationMessage && !isLookingUp\n\n return (\n <div className=\"cypress-datetime-element\">\n <FormElementLabelContainer\n className=\"ob-datetime\"\n id={id}\n element={element}\n required={element.required}\n >\n <div className=\"field has-addons\">\n <DateTimePicker\n label={element.label}\n format={shortDateTimeFormat}\n {...commonProps}\n timeSteps={{ minutes: 1 }}\n />\n {!~~element.~~readOnly && (\n <PickerInputButton\n tooltip=\"Select date and time\"\n onClick={openDateTimePicker}\n icon=\"date_range\"\n />\n )}\n {!!~~element.~~readOnly && !!text && (\n <div className=\"control\">\n <CopyToClipboardButton\n className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n text={text}\n />\n </div>\n )}\n <LookupButton\n isInputButton\n value={value}\n validationMessage={validationMessage}\n lookupButtonConfig={element.lookupButton}\n overrideRequiredMessage={undefined}\n />\n </div>\n\n {isDisplayingValidationMessage && (\n <FormElementValidationMessage message={validationMessage} />\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementDateTime)\n"]}
1	+ {"version":3,"file":"FormElementDateTime.js","sourceRoot":"","sources":["../../src/form-elements/FormElementDateTime.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { localisationService } from '../apps'\nimport { FormTypes } from '@oneblink/types'\nimport { DateTimePicker } from '@mui/x-date-pickers'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\n\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { parseDateValue } from '../services/generate-default-data'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useFormElementDateFromTo from '../hooks/useFormElementDateFromTo'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport useFormDatePickerProps, {\n PickerInputButton,\n} from '../hooks/form-date-picker/useFormDatePickerProps'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n id: string\n element: FormTypes.DateTimeElement\n readOnly: boolean\n value: unknown \| undefined\n onChange: FormElementValueChangeHandler<string>\n displayValidationMessage: boolean\n validationMessage: string \| undefined\n} & IsDirtyProps\n\nfunction FormElementDateTime({\n id,\n element,\n readOnly,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n isDirty,\n setIsDirty,\n}: Props) {\n const ariaDescribedby = useElementAriaDescribedby(id, element)\n\n const { fromDate, fromDaysOffset, toDate, toDaysOffset } =\n useFormElementDateFromTo(element)\n\n const shortDateTimeFormat =\n localisationService.getDateFnsFormats().shortDateTime\n\n const maxDate = React.useMemo(() => {\n return parseDateValue({\n dateOnly: true,\n daysOffset: toDaysOffset,\n value: toDate,\n })\n }, [toDate, toDaysOffset])\n\n const minDate = React.useMemo(() => {\n return parseDateValue({\n dateOnly: true,\n daysOffset: fromDaysOffset,\n value: fromDate,\n })\n }, [fromDate, fromDaysOffset])\n\n const [commonProps, openDateTimePicker] = useFormDatePickerProps({\n id,\n value: typeof value === 'string' ? value : undefined,\n maxDate,\n minDate,\n ariaDescribedby,\n placeholder: element.placeholderValue,\n className: 'cypress-date-time-control',\n disabled: readOnly,\n required: element.required,\n onBlur: setIsDirty,\n onChange: (newDate) => {\n onChange(element, {\n value: newDate?.toISOString(),\n })\n },\n })\n\n const text = React.useMemo(() => {\n if (typeof value !== 'string') {\n return null\n }\n return localisationService.formatDatetime(new Date(value))\n }, [value])\n\n const { isLookingUp } = React.useContext(LookupNotificationContext)\n const isDisplayingValidationMessage =\n (isDirty \|\| displayValidationMessage) && !!validationMessage && !isLookingUp\n\n return (\n <div className=\"cypress-datetime-element\">\n <FormElementLabelContainer\n className=\"ob-datetime\"\n id={id}\n element={element}\n required={element.required}\n >\n <div className=\"field has-addons\">\n <DateTimePicker\n label={element.label}\n format={shortDateTimeFormat}\n {...commonProps}\n timeSteps={{ minutes: 1 }}\n />\n {!readOnly && (\n <PickerInputButton\n tooltip=\"Select date and time\"\n onClick={openDateTimePicker}\n icon=\"date_range\"\n />\n )}\n {!!readOnly && !!text && (\n <div className=\"control\">\n <CopyToClipboardButton\n className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n text={text}\n />\n </div>\n )}\n <LookupButton\n isInputButton\n value={value}\n validationMessage={validationMessage}\n lookupButtonConfig={element.lookupButton}\n overrideRequiredMessage={undefined}\n />\n </div>\n\n {isDisplayingValidationMessage && (\n <FormElementValidationMessage message={validationMessage} />\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementDateTime)\n"]}

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

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

package/dist/form-elements/FormElementEmail.js CHANGED Viewed

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

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

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

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

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

package/dist/form-elements/FormElementFile.js CHANGED Viewed

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

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

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

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

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

package/dist/form-elements/FormElementFiles.js CHANGED Viewed

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FormElementFiles.js","sourceRoot":"","sources":["../../src/form-elements/FormElementFiles.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AACxF,OAAO,eAAe,MAAM,mBAAmB,CAAA;AAC/C,OAAO,cAAc,MAAM,qCAAqC,CAAA;AAChE,OAAO,EACL,oBAAoB,EACpB,6BAA6B,GAC9B,MAAM,wCAAwC,CAAA;AAG/C,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;AAE9F,MAAM,UAAU,oBAAoB,CAClC,KAAkD;IAElD,IAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;QACnD,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA;IAC9B,CAAC;IACD,OAAO,EAAE,CAAA;AACX,CAAC;AAED,SAAS,gBAAgB,CAAC,EACxB,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,OAAO,EACP,UAAU,~~GAQI~~;IACd,MAAM,eAAe,GAAG,yBAAyB,CAAC,EAAE,EAAE,OAAO,CAAC,CAAA;IAC9D,MAAM,EAAE,cAAc,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,GAAG,cAAc,CAC3E,OAAO,EACP,QAAQ,EACR,UAAU,CACX,CAAA;IAED,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAmB,IAAI,CAAC,CAAA;IAErD,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACvC,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE,OAAM;QAC7B,mFAAmF;QACnF,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAA;QAC3B,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,CAAA;IAC1B,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,WAAW,GAAG,KAAK,IAAI,EAAE,CAAA;IAE/B,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,uBAAuB,YACpC,MAAC,yBAAyB,IACxB,SAAS,EAAC,UAAU,EACpB,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,CAAC,CAAC,OAAO,CAAC,UAAU,aAE9B,gBACE,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,SAAS,EAAC,qBAAqB,EAC/B,QAAQ,EAAE,OAAO,CAAC,UAAU,KAAK,CAAC,EAClC,QAAQ,EAAE,~~OAAO,CAAC,~~QAAQ,~~EAC1B~~,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAClB,cAAc,CACZ,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CACzD,GAEH,EACF,cAAK,SAAS,EAAC,+BAA+B,YAC5C,eAAK,SAAS,EAAC,2CAA2C,aACvD,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE;gCACrC,OAAO,CACL,KAAC,eAAe,IAEd,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,gBAAgB,EAC1B,IAAI,EAAE,UAAU,EAChB,QAAQ,EAAE,gBAAgB,EAC1B,aAAa,EACX,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU;wCACnB,WAAW,CAAC,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC;wCAC1C,CAAC,oBAAoB,CAAC,OAAO,EAAE,UAAU,CAAC,QAAQ,CAAC;wCACnD,CAAC,6BAA6B,CAAC,OAAO,EAAE,UAAU,CAAC,QAAQ,CAAC,EAE9D,KAAK,EAAE,KAAK,~~IAXP~~,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,UAAU,CAAC,EAAE,~~CAYrD~~,CACH,CAAA;4BACH,CAAC,CAAC,EACD,CAAC,~~OAAO,CAAC,~~QAAQ;~~gCAChB~~,CAAC,CAAC,OAAO,CAAC,UAAU;oCAClB,WAAW,CAAC,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC,IAAI,CAC5C,cAAK,SAAS,EAAC,0BAA0B,YACvC,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,iCAAiC,EAC3C,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,SAAS,sBACA,eAAe,EACjC,MAAM,EAAE,UAAU,YAElB,KAAC,YAAY,IAAC,SAAS,EAAC,cAAc,oBAAmB,GAClD,GACL,CACP,IACC,GACF,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'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport FormElementFile from './FormElementFile'\nimport useAttachments from '../hooks/attachments/useAttachments'\nimport {\n checkFileNameIsValid,\n checkFileNameExtensionIsValid,\n} from '../services/form-validation/validators'\nimport { attachmentsService } from '../apps'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport MaterialIcon from '../components/MaterialIcon'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\nexport function stringifyAttachments(\n value: attachmentsService.Attachment[] \| undefined,\n): string {\n if (value?.every((attachment) => !attachment.type)) {\n return JSON.stringify(value)\n }\n return ''\n}\n\nfunction FormElementFiles({\n id,\n element,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n isDirty,\n setIsDirty,\n}: {\n id: string\n element: FormTypes.FilesElement\n value?: attachmentsService.Attachment[]\n onChange: FormElementValueChangeHandler<attachmentsService.Attachment[]>\n displayValidationMessage: boolean\n validationMessage: string \| undefined\n} & IsDirtyProps) {\n const ariaDescribedby = useElementAriaDescribedby(id, element)\n const { addAttachments, removeAttachment, changeAttachment } = useAttachments(\n element,\n onChange,\n setIsDirty,\n )\n\n const inputRef = React.useRef<HTMLInputElement>(null)\n\n const handleAdd = React.useCallback(() => {\n if (!inputRef.current) return\n // RESET HTML FILE INPUT VALUE SO FILES PREVIOUSLY ADDED AND REMOVED ARE RECOGNISED\n inputRef.current.value = ''\n inputRef.current.click()\n }, [])\n\n const attachments = value \|\| []\n\n const { isLookingUp } = React.useContext(LookupNotificationContext)\n const isDisplayingValidationMessage =\n (isDirty \|\| displayValidationMessage) && !!validationMessage && !isLookingUp\n\n return (\n <div className=\"cypress-files-element\">\n <FormElementLabelContainer\n className=\"ob-files\"\n element={element}\n id={id}\n required={!!element.minEntries}\n >\n <input\n ref={inputRef}\n type=\"file\"\n name={element.name}\n className=\"file-input ob-input\"\n multiple={element.maxEntries !== 1}\n disabled={~~element.~~readOnly}\n onChange={(event) =>\n addAttachments(\n event.target.files ? Array.from(event.target.files) : [],\n )\n }\n />\n <div className=\"control cypress-files-control\">\n <div className=\"columns is-multiline ob-columns-container\">\n {attachments.map((attachment, index) => {\n return (\n <FormElementFile\n key={attachment.type ? attachment._id : attachment.id}\n element={element}\n onRemove={removeAttachment}\n file={attachment}\n onChange={changeAttachment}\n disableUpload={\n (!!element.maxEntries &&\n attachments.length > element.maxEntries) \|\|\n !checkFileNameIsValid(element, attachment.fileName) \|\|\n !checkFileNameExtensionIsValid(element, attachment.fileName)\n }\n index={index}\n />\n )\n })}\n {!~~element.~~readOnly &&\n (!element.maxEntries \|\|\n attachments.length < element.maxEntries) && (\n <div className=\"column is-one-quarter-ob\">\n <button\n type=\"button\"\n className=\"button ob-files__add-new-button\"\n id={id}\n onClick={handleAdd}\n aria-describedby={ariaDescribedby}\n onBlur={setIsDirty}\n >\n <MaterialIcon className=\"icon-x-large\">add</MaterialIcon>\n </button>\n </div>\n )}\n </div>\n </div>\n\n {isDisplayingValidationMessage && (\n <FormElementValidationMessage message={validationMessage} />\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementFiles)\n"]}
1	+ {"version":3,"file":"FormElementFiles.js","sourceRoot":"","sources":["../../src/form-elements/FormElementFiles.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport FormElementFile from './FormElementFile'\nimport useAttachments from '../hooks/attachments/useAttachments'\nimport {\n checkFileNameIsValid,\n checkFileNameExtensionIsValid,\n} from '../services/form-validation/validators'\nimport { attachmentsService } from '../apps'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport MaterialIcon from '../components/MaterialIcon'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\nexport function stringifyAttachments(\n value: attachmentsService.Attachment[] \| undefined,\n): string {\n if (value?.every((attachment) => !attachment.type)) {\n return JSON.stringify(value)\n }\n return ''\n}\n\nfunction FormElementFiles({\n id,\n element,\n readOnly,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n isDirty,\n setIsDirty,\n}: {\n id: string\n element: FormTypes.FilesElement\n readOnly: boolean\n value?: attachmentsService.Attachment[]\n onChange: FormElementValueChangeHandler<attachmentsService.Attachment[]>\n displayValidationMessage: boolean\n validationMessage: string \| undefined\n} & IsDirtyProps) {\n const ariaDescribedby = useElementAriaDescribedby(id, element)\n const { addAttachments, removeAttachment, changeAttachment } = useAttachments(\n element,\n onChange,\n setIsDirty,\n )\n\n const inputRef = React.useRef<HTMLInputElement>(null)\n\n const handleAdd = React.useCallback(() => {\n if (!inputRef.current) return\n // RESET HTML FILE INPUT VALUE SO FILES PREVIOUSLY ADDED AND REMOVED ARE RECOGNISED\n inputRef.current.value = ''\n inputRef.current.click()\n }, [])\n\n const attachments = value \|\| []\n\n const { isLookingUp } = React.useContext(LookupNotificationContext)\n const isDisplayingValidationMessage =\n (isDirty \|\| displayValidationMessage) && !!validationMessage && !isLookingUp\n\n return (\n <div className=\"cypress-files-element\">\n <FormElementLabelContainer\n className=\"ob-files\"\n element={element}\n id={id}\n required={!!element.minEntries}\n >\n <input\n ref={inputRef}\n type=\"file\"\n name={element.name}\n className=\"file-input ob-input\"\n multiple={element.maxEntries !== 1}\n disabled={readOnly}\n onChange={(event) =>\n addAttachments(\n event.target.files ? Array.from(event.target.files) : [],\n )\n }\n />\n <div className=\"control cypress-files-control\">\n <div className=\"columns is-multiline ob-columns-container\">\n {attachments.map((attachment, index) => {\n return (\n <FormElementFile\n key={attachment.type ? attachment._id : attachment.id}\n element={element}\n readOnly={readOnly}\n onRemove={removeAttachment}\n file={attachment}\n onChange={changeAttachment}\n disableUpload={\n (!!element.maxEntries &&\n attachments.length > element.maxEntries) \|\|\n !checkFileNameIsValid(element, attachment.fileName) \|\|\n !checkFileNameExtensionIsValid(element, attachment.fileName)\n }\n index={index}\n />\n )\n })}\n {!readOnly &&\n (!element.maxEntries \|\|\n attachments.length < element.maxEntries) && (\n <div className=\"column is-one-quarter-ob\">\n <button\n type=\"button\"\n className=\"button ob-files__add-new-button\"\n id={id}\n onClick={handleAdd}\n aria-describedby={ariaDescribedby}\n onBlur={setIsDirty}\n >\n <MaterialIcon className=\"icon-x-large\">add</MaterialIcon>\n </button>\n </div>\n )}\n </div>\n </div>\n\n {isDisplayingValidationMessage && (\n <FormElementValidationMessage message={validationMessage} />\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementFiles)\n"]}

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

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

package/dist/form-elements/FormElementForm.js CHANGED Viewed

@@ -2,8 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import OneBlinkFormElements from '../components/renderer/OneBlinkFormElements';
 import ElementDOMId from '../utils/elementDOMIds';
-import { recursivelySetReadOnly } from '../OneBlinkReadOnlyForm';
-function FormElementForm({ formId, element, value, id, formElementValidation, displayValidationMessages, formElementConditionallyShown, onChange, onLookup, onUpdateFormElements, sectionState, }) {
+function FormElementForm({ formId, element, readOnly, childrenReadOnly, readOnlyOverrideChildren, value, id, formElementValidation, displayValidationMessages, formElementConditionallyShown, onChange, onLookup, onUpdateFormElements, sectionState, }) {
     const handleNestedChange = React.useCallback((nestedElement, { value: nestedElementValue, executedLookups: nestedExecutedLookups, sectionState, }, idPrefix) => {
         if (nestedElement.type === 'section') {
             // trigger onChange to update sectionState
@@ -90,15 +89,9 @@ function FormElementForm({ formId, element, value, id, formElementValidation, di
             ? formElementConditionallyShown.formElements
             : undefined;
     }, [formElementConditionallyShown]);
-    const parentElement = React.useMemo(() => {
-        return {
-            elements: Array.isArray(element.elements)
-                ? element.readOnly
-                    ? recursivelySetReadOnly(element.elements)
-                    : element.elements
-                : [],
-        };
-    }, [element.elements, element.readOnly]);
+    const parentElement = React.useMemo(() => ({
+        elements: Array.isArray(element.elements) ? element.elements : [],
+    }), [element.elements]);
     const handleUpdateNestedFormElements = React.useCallback((setter) => {
         onUpdateFormElements((formElements) => {
             return formElements.map((formElement) => {
@@ -115,7 +108,7 @@ function FormElementForm({ formId, element, value, id, formElementValidation, di
         });
     }, [element.id, onUpdateFormElements]);
     const elementDOMId = React.useMemo(() => new ElementDOMId(id), [id]);
-    return (_jsx(OneBlinkFormElements, { formId: formId, formElementsValidation: validation, displayValidationMessages: displayValidationMessages, elements: parentElement.elements, onChange: handleNestedChange, onLookup: handleLookup, formElementsConditionallyShown: formElementsConditionallyShown, model: value || {}, parentElement: parentElement, idPrefix: elementDOMId.subFormDOMIdPrefix, onUpdateFormElements: handleUpdateNestedFormElements, sectionState: sectionState }));
+    return (_jsx(OneBlinkFormElements, { formId: formId, formElementsValidation: validation, displayValidationMessages: displayValidationMessages, elements: parentElement.elements, onChange: handleNestedChange, onLookup: handleLookup, formElementsConditionallyShown: formElementsConditionallyShown, model: value || {}, parentElement: parentElement, readOnly: childrenReadOnly, readOnlyOverride: readOnlyOverrideChildren ? readOnly : undefined, idPrefix: elementDOMId.subFormDOMIdPrefix, onUpdateFormElements: handleUpdateNestedFormElements, sectionState: sectionState }));
 }
 export default React.memo(FormElementForm);
 //# sourceMappingURL=FormElementForm.js.map

package/dist/form-elements/FormElementForm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormElementForm.js","sourceRoot":"","sources":["../../src/form-elements/FormElementForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport * as React from 'react'\nimport OneBlinkFormElements from '../components/renderer/OneBlinkFormElements'\nimport {\n ExecutedLookups,\n FormElementConditionallyShown,\n FormElementLookupHandler,\n FormElementValidation,\n NestedFormElementValueChangeHandler,\n SectionState,\n UpdateFormElementsHandler,\n} from '../types/form'\nimport ElementDOMId from '../utils/elementDOMIds'\nimport { recursivelySetReadOnly } from '../OneBlinkReadOnlyForm'\n\nexport type Props = {\n formId: number\n id: string\n element: FormTypes.FormFormElement\n value: SubmissionTypes.S3SubmissionData['submission'] \| undefined\n onChange: NestedFormElementValueChangeHandler<\n SubmissionTypes.S3SubmissionData['submission']\n >\n onLookup: FormElementLookupHandler\n formElementValidation: FormElementValidation \| undefined\n displayValidationMessages: boolean\n formElementConditionallyShown: FormElementConditionallyShown \| undefined\n onUpdateFormElements: UpdateFormElementsHandler\n sectionState: SectionState\n}\n\nfunction FormElementForm({\n formId,\n element,\n value,\n id,\n formElementValidation,\n displayValidationMessages,\n formElementConditionallyShown,\n onChange,\n onLookup,\n onUpdateFormElements,\n sectionState,\n}: Props) {\n const handleNestedChange = React.useCallback(\n (\n nestedElement: FormTypes.FormElement,\n {\n value: nestedElementValue,\n executedLookups: nestedExecutedLookups,\n sectionState,\n }: Parameters<NestedFormElementValueChangeHandler>[1],\n idPrefix?: string,\n ) => {\n if (nestedElement.type === 'section') {\n // trigger onChange to update sectionState\n onChange(\n {\n ...nestedElement,\n id: idPrefix ? `${idPrefix}${nestedElement.id}` : nestedElement.id,\n },\n { executedLookups: undefined, sectionState },\n )\n }\n if (!('name' in nestedElement)) return\n onChange(element, {\n value: (existingValue) => ({\n ...existingValue,\n [nestedElement.name]:\n typeof nestedElementValue === 'function'\n ? nestedElementValue(\n existingValue ? existingValue[nestedElement.name] : undefined,\n )\n : nestedElementValue,\n }),\n executedLookups: (existingExecutedLookups) => {\n if (\n typeof existingExecutedLookups === 'boolean' \|\|\n Array.isArray(existingExecutedLookups)\n ) {\n return {}\n }\n return {\n ...existingExecutedLookups,\n [nestedElement.name]:\n typeof nestedExecutedLookups === 'function'\n ? nestedExecutedLookups(\n existingExecutedLookups?.[\n nestedElement.name\n ] as ExecutedLookups,\n )\n : nestedExecutedLookups,\n }\n },\n sectionState,\n })\n },\n [element, onChange],\n )\n\n const handleLookup = React.useCallback<FormElementLookupHandler>(\n (mergeLookupResults) => {\n onLookup((currentFormSubmission) => {\n let model = currentFormSubmission.submission[\n element.name\n ] as SubmissionTypes.S3SubmissionData['submission']\n let newExecutedLookups = currentFormSubmission.executedLookups?.[\n element.name\n ] as ExecutedLookups\n\n const elements = currentFormSubmission.elements.map((formElement) => {\n if (\n formElement.type === 'form' &&\n formElement.name === element.name &&\n Array.isArray(formElement.elements)\n ) {\n const { elements, submission, executedLookups } =\n mergeLookupResults({\n elements: formElement.elements,\n submission: model,\n lastElementUpdated: currentFormSubmission.lastElementUpdated,\n executedLookups: newExecutedLookups,\n sectionState: currentFormSubmission.sectionState,\n })\n model = submission\n newExecutedLookups = executedLookups as ExecutedLookups\n return {\n ...formElement,\n elements,\n }\n }\n return formElement\n })\n\n const submission = {\n ...currentFormSubmission.submission,\n [element.name]: model,\n }\n\n return {\n elements,\n submission,\n lastElementUpdated: currentFormSubmission.lastElementUpdated,\n executedLookups: {\n ...currentFormSubmission.executedLookups,\n [element.name]: newExecutedLookups,\n },\n sectionState: currentFormSubmission.sectionState,\n }\n })\n },\n [element.name, onLookup],\n )\n\n const validation = React.useMemo(() => {\n return !!formElementValidation &&\n typeof formElementValidation !== 'string' &&\n formElementValidation.type === 'formElements'\n ? formElementValidation.formElements\n : undefined\n }, [formElementValidation])\n\n const formElementsConditionallyShown = React.useMemo(() => {\n return formElementConditionallyShown &&\n formElementConditionallyShown.type === 'formElements'\n ? formElementConditionallyShown.formElements\n : undefined\n }, [formElementConditionallyShown])\n\n const parentElement = React.useMemo(() => {\n return {\n elements: Array.isArray(element.elements)\n ? element.readOnly\n ? recursivelySetReadOnly(element.elements)\n : element.elements\n : [],\n }\n }, [element.elements, element.readOnly])\n\n const handleUpdateNestedFormElements =\n React.useCallback<UpdateFormElementsHandler>(\n (setter) => {\n onUpdateFormElements((formElements) => {\n return formElements.map((formElement) => {\n if (\n formElement.id === element.id &&\n formElement.type === 'form' &&\n Array.isArray(formElement.elements)\n ) {\n return {\n ...formElement,\n elements: setter(formElement.elements),\n }\n }\n return formElement\n })\n })\n },\n [element.id, onUpdateFormElements],\n )\n\n const elementDOMId = React.useMemo(() => new ElementDOMId(id), [id])\n\n return (\n <OneBlinkFormElements\n formId={formId}\n formElementsValidation={validation}\n displayValidationMessages={displayValidationMessages}\n elements={parentElement.elements}\n onChange={handleNestedChange}\n onLookup={handleLookup}\n formElementsConditionallyShown={formElementsConditionallyShown}\n model={value \|\| {}}\n parentElement={parentElement}\n idPrefix={elementDOMId.subFormDOMIdPrefix}\n onUpdateFormElements={handleUpdateNestedFormElements}\n sectionState={sectionState}\n />\n )\n}\n\nexport default React.memo(FormElementForm)\n"]}
1	+ {"version":3,"file":"FormElementForm.js","sourceRoot":"","sources":["../../src/form-elements/FormElementForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport * as React from 'react'\nimport OneBlinkFormElements from '../components/renderer/OneBlinkFormElements'\nimport {\n ExecutedLookups,\n FormElementConditionallyShown,\n FormElementLookupHandler,\n FormElementValidation,\n NestedFormElementValueChangeHandler,\n SectionState,\n UpdateFormElementsHandler,\n} from '../types/form'\nimport ElementDOMId from '../utils/elementDOMIds'\n\nexport type Props = {\n formId: number\n id: string\n element: FormTypes.FormFormElement\n /*\n Whether this nested form is locked for the current audience or inherited\n * read-only state. Used as `readOnlyOverride` for synthetic children when\n * `readOnlyOverrideChildren` is set. Nested fields do not inherit this\n * value as a blanket lock so an `ALL_STEPS` child can stay editable.\n /\n readOnly: boolean\n /\n Lock to apply to nested fields (`OneBlinkFormElements.readOnly` /\n * `parentReadOnly`). True when the whole form is read-only, a parent is\n * read-only, or this element’s definition has `readOnly: true`. Does not\n * include this nested form’s audience lock.\n /\n childrenReadOnly: boolean\n /\n When true, nested fields use this element’s `readOnly` (including\n * audience lock) as `readOnlyOverride` instead of calculating their own.\n * Used by Civica name records and Freshdesk dependent fields.\n */\n readOnlyOverrideChildren?: boolean\n value: SubmissionTypes.S3SubmissionData['submission'] \| undefined\n onChange: NestedFormElementValueChangeHandler<\n SubmissionTypes.S3SubmissionData['submission']\n >\n onLookup: FormElementLookupHandler\n formElementValidation: FormElementValidation \| undefined\n displayValidationMessages: boolean\n formElementConditionallyShown: FormElementConditionallyShown \| undefined\n onUpdateFormElements: UpdateFormElementsHandler\n sectionState: SectionState\n}\n\nfunction FormElementForm({\n formId,\n element,\n readOnly,\n childrenReadOnly,\n readOnlyOverrideChildren,\n value,\n id,\n formElementValidation,\n displayValidationMessages,\n formElementConditionallyShown,\n onChange,\n onLookup,\n onUpdateFormElements,\n sectionState,\n}: Props) {\n const handleNestedChange = React.useCallback(\n (\n nestedElement: FormTypes.FormElement,\n {\n value: nestedElementValue,\n executedLookups: nestedExecutedLookups,\n sectionState,\n }: Parameters<NestedFormElementValueChangeHandler>[1],\n idPrefix?: string,\n ) => {\n if (nestedElement.type === 'section') {\n // trigger onChange to update sectionState\n onChange(\n {\n ...nestedElement,\n id: idPrefix ? `${idPrefix}${nestedElement.id}` : nestedElement.id,\n },\n { executedLookups: undefined, sectionState },\n )\n }\n if (!('name' in nestedElement)) return\n onChange(element, {\n value: (existingValue) => ({\n ...existingValue,\n [nestedElement.name]:\n typeof nestedElementValue === 'function'\n ? nestedElementValue(\n existingValue ? existingValue[nestedElement.name] : undefined,\n )\n : nestedElementValue,\n }),\n executedLookups: (existingExecutedLookups) => {\n if (\n typeof existingExecutedLookups === 'boolean' \|\|\n Array.isArray(existingExecutedLookups)\n ) {\n return {}\n }\n return {\n ...existingExecutedLookups,\n [nestedElement.name]:\n typeof nestedExecutedLookups === 'function'\n ? nestedExecutedLookups(\n existingExecutedLookups?.[\n nestedElement.name\n ] as ExecutedLookups,\n )\n : nestedExecutedLookups,\n }\n },\n sectionState,\n })\n },\n [element, onChange],\n )\n\n const handleLookup = React.useCallback<FormElementLookupHandler>(\n (mergeLookupResults) => {\n onLookup((currentFormSubmission) => {\n let model = currentFormSubmission.submission[\n element.name\n ] as SubmissionTypes.S3SubmissionData['submission']\n let newExecutedLookups = currentFormSubmission.executedLookups?.[\n element.name\n ] as ExecutedLookups\n\n const elements = currentFormSubmission.elements.map((formElement) => {\n if (\n formElement.type === 'form' &&\n formElement.name === element.name &&\n Array.isArray(formElement.elements)\n ) {\n const { elements, submission, executedLookups } =\n mergeLookupResults({\n elements: formElement.elements,\n submission: model,\n lastElementUpdated: currentFormSubmission.lastElementUpdated,\n executedLookups: newExecutedLookups,\n sectionState: currentFormSubmission.sectionState,\n })\n model = submission\n newExecutedLookups = executedLookups as ExecutedLookups\n return {\n ...formElement,\n elements,\n }\n }\n return formElement\n })\n\n const submission = {\n ...currentFormSubmission.submission,\n [element.name]: model,\n }\n\n return {\n elements,\n submission,\n lastElementUpdated: currentFormSubmission.lastElementUpdated,\n executedLookups: {\n ...currentFormSubmission.executedLookups,\n [element.name]: newExecutedLookups,\n },\n sectionState: currentFormSubmission.sectionState,\n }\n })\n },\n [element.name, onLookup],\n )\n\n const validation = React.useMemo(() => {\n return !!formElementValidation &&\n typeof formElementValidation !== 'string' &&\n formElementValidation.type === 'formElements'\n ? formElementValidation.formElements\n : undefined\n }, [formElementValidation])\n\n const formElementsConditionallyShown = React.useMemo(() => {\n return formElementConditionallyShown &&\n formElementConditionallyShown.type === 'formElements'\n ? formElementConditionallyShown.formElements\n : undefined\n }, [formElementConditionallyShown])\n\n const parentElement = React.useMemo(\n () => ({\n elements: Array.isArray(element.elements) ? element.elements : [],\n }),\n [element.elements],\n )\n\n const handleUpdateNestedFormElements =\n React.useCallback<UpdateFormElementsHandler>(\n (setter) => {\n onUpdateFormElements((formElements) => {\n return formElements.map((formElement) => {\n if (\n formElement.id === element.id &&\n formElement.type === 'form' &&\n Array.isArray(formElement.elements)\n ) {\n return {\n ...formElement,\n elements: setter(formElement.elements),\n }\n }\n return formElement\n })\n })\n },\n [element.id, onUpdateFormElements],\n )\n\n const elementDOMId = React.useMemo(() => new ElementDOMId(id), [id])\n\n return (\n <OneBlinkFormElements\n formId={formId}\n formElementsValidation={validation}\n displayValidationMessages={displayValidationMessages}\n elements={parentElement.elements}\n onChange={handleNestedChange}\n onLookup={handleLookup}\n formElementsConditionallyShown={formElementsConditionallyShown}\n model={value \|\| {}}\n parentElement={parentElement}\n readOnly={childrenReadOnly}\n readOnlyOverride={readOnlyOverrideChildren ? readOnly : undefined}\n idPrefix={elementDOMId.subFormDOMIdPrefix}\n onUpdateFormElements={handleUpdateNestedFormElements}\n sectionState={sectionState}\n />\n )\n}\n\nexport default React.memo(FormElementForm)\n"]}

package/dist/form-elements/FormElementFreshdeskDependentField.js CHANGED Viewed

@@ -43,7 +43,7 @@ function FormElementFreshdeskDependentField({ element, onUpdateFormElements, ...
             });
         });
     }, [element.id, formFormElement, onUpdateFormElements]);
-    return (_jsx(FormElementForm, { element: formFormElement, onUpdateFormElements: handleUpdateNestedFormElements, ...props }));
+    return (_jsx(FormElementForm, { element: formFormElement, readOnlyOverrideChildren: true, onUpdateFormElements: handleUpdateNestedFormElements, ...props }));
 }
 export default React.memo(FormElementFreshdeskDependentField);
 //# sourceMappingURL=FormElementFreshdeskDependentField.js.map