@oneblink/apps-react 2.2.0 → 2.3.0-beta.2

package/dist/form-elements/FormElementCaptcha.js

@@ -1,15 +1,15 @@
-import * as React from 'react';
-import ReCAPTCHA from 'react-google-recaptcha';
-import useCaptchaSiteKey from '../hooks/useCaptchaSiteKey';
-function FormElementCaptcha({ element, onChange, validationMessage, displayValidationMessage, }) {
-    const captchaSiteKey = useCaptchaSiteKey();
-    return (React.createElement("div", { className: "cypress-captcha-element" },
-        React.createElement("div", { className: "ob-form__element ob-captcha" },
-            React.createElement(ReCAPTCHA, { sitekey: captchaSiteKey || '', onChange: (val) => {
-                    onChange(element, val || undefined);
-                }, className: "ob-input cypress-captcha-control" }),
-            displayValidationMessage && !!validationMessage && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
-                React.createElement("div", { className: "has-text-danger ob-error__text cypress-required cypress-validation-message" }, validationMessage))))));
-}
-export default React.memo(FormElementCaptcha);
+import * as React from 'react';
+import ReCAPTCHA from 'react-google-recaptcha';
+import useCaptchaSiteKey from '../hooks/useCaptchaSiteKey';
+function FormElementCaptcha({ element, onChange, validationMessage, displayValidationMessage, }) {
+    const captchaSiteKey = useCaptchaSiteKey();
+    return (React.createElement("div", { className: "cypress-captcha-element" },
+        React.createElement("div", { className: "ob-form__element ob-captcha" },
+            React.createElement(ReCAPTCHA, { sitekey: captchaSiteKey || '', onChange: (val) => {
+                    onChange(element, val || undefined);
+                }, className: "ob-input cypress-captcha-control" }),
+            displayValidationMessage && !!validationMessage && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
+                React.createElement("div", { className: "has-text-danger ob-error__text cypress-required cypress-validation-message" }, validationMessage))))));
+}
+export default React.memo(FormElementCaptcha);
 //# sourceMappingURL=FormElementCaptcha.js.map

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

@@ -1,15 +1,15 @@
-import * as React from 'react';
-import { FormTypes } from '@oneblink/types';
-import { FormElementValueChangeHandler } from '../types/form';
-declare type Props = {
-    id: string;
-    element: FormTypes.CheckboxElement;
-    value: unknown;
-    onChange: FormElementValueChangeHandler<string[]>;
-    displayValidationMessage: boolean;
-    validationMessage: string | undefined;
-    conditionallyShownOptions: FormTypes.ChoiceElementOption[] | undefined;
-};
-declare function FormElementCheckboxes({ id, element, value, onChange, validationMessage, displayValidationMessage, conditionallyShownOptions, }: Props): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof FormElementCheckboxes>;
-export default _default;
+import * as React from 'react';
+import { FormTypes } from '@oneblink/types';
+import { FormElementValueChangeHandler } from '../types/form';
+declare type Props = {
+    id: string;
+    element: FormTypes.CheckboxElement;
+    value: unknown;
+    onChange: FormElementValueChangeHandler<string[]>;
+    displayValidationMessage: boolean;
+    validationMessage: string | undefined;
+    conditionallyShownOptions: FormTypes.ChoiceElementOption[] | undefined;
+};
+declare function FormElementCheckboxes({ id, element, value, onChange, validationMessage, displayValidationMessage, conditionallyShownOptions, }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FormElementCheckboxes>;
+export default _default;

package/dist/form-elements/FormElementCheckBoxes.js

@@ -1,65 +1,65 @@
-import * as React from 'react';
-import clsx from 'clsx';
-import { Checkbox } from '@mui/material';
-import FormElementOptions from '../components/renderer/FormElementOptions';
-import useFormElementOptions from '../hooks/useFormElementOptions';
-import LookupButton from '../components/renderer/LookupButton';
-import OptionButton from './OptionButton';
-import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
-import ToggleAllCheckbox from '../components/renderer/ToggleAllCheckbox';
-function FormElementCheckboxes({ id, element, value, onChange, validationMessage, displayValidationMessage, conditionallyShownOptions, }) {
-    const selectedValues = React.useMemo(() => {
-        if (!Array.isArray(value))
-            return [];
-        return value;
-    }, [value]);
-    const changeValues = React.useCallback((toggledValue, hasSelectedValue) => {
-        onChange(element, (existingValue) => {
-            if (hasSelectedValue) {
-                const newValue = (existingValue || []).filter((existingValue) => existingValue !== toggledValue);
-                if (newValue.length) {
-                    return newValue;
-                }
-            }
-            else {
-                const newValue = Array.isArray(existingValue)
-                    ? [...existingValue]
-                    : [];
-                newValue.push(toggledValue);
-                return newValue;
-            }
-        });
-    }, [element, onChange]);
-    const filteredOptions = useFormElementOptions({
-        element,
-        value,
-        onChange,
-        conditionallyShownOptions,
-    });
-    return (React.createElement("div", { className: "cypress-checkbox-element" },
-        React.createElement(FormElementLabelContainer, { className: "ob-checkbox", id: id, element: element, required: element.required },
-            React.createElement(FormElementOptions, { options: element.options },
-                element.canToggleAll && (React.createElement(ToggleAllCheckbox, { id: id, element: element, options: filteredOptions, selected: selectedValues, disabled: element.readOnly, onChange: onChange })),
-                element.buttons ? (React.createElement("div", { className: "ob-button-radio-container" },
-                    React.createElement("div", { className: "buttons ob-buttons ob-buttons-radio" }, filteredOptions.map((option, index) => {
-                        const isSelected = selectedValues.includes(option.value);
-                        return (React.createElement(OptionButton, { key: index, element: element, option: option, isSelected: isSelected, onClick: () => changeValues(option.value, isSelected), className: clsx('button ob-button ob-button__input ob-checkbox__button cypress-checkbox-button-control', {
-                                'is-primary': isSelected,
-                                'is-light': !isSelected,
-                            }) }));
-                    })))) : (React.createElement("div", null, filteredOptions.map((option, index) => {
-                    const isSelected = selectedValues.includes(option.value);
-                    return (React.createElement("div", { className: "control", key: index },
-                        React.createElement("label", { className: "checkbox ob-checkbox__input-label cypress-checkbox-label", htmlFor: `${id}_${option.value}` },
-                            React.createElement(Checkbox, { color: "primary", className: "ob-checkbox__input cypress-checkbox-control", classes: {
-                                    checked: 'ob-checkbox__input-checked',
-                                }, disableRipple: true, value: option.value, id: `${id}_${option.value}`, checked: isSelected, onChange: () => changeValues(option.value, isSelected), disabled: element.readOnly }),
-                            ' ',
-                            option.label)));
-                }))),
-                React.createElement(LookupButton, { hasMarginTop: true, value: value, validationMessage: validationMessage })),
-            displayValidationMessage && !!validationMessage && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
-                React.createElement("div", { className: "has-text-danger ob-error__text cypress-validation-message" }, validationMessage))))));
-}
-export default React.memo(FormElementCheckboxes);
+import * as React from 'react';
+import clsx from 'clsx';
+import { Checkbox } from '@mui/material';
+import FormElementOptions from '../components/renderer/FormElementOptions';
+import useFormElementOptions from '../hooks/useFormElementOptions';
+import LookupButton from '../components/renderer/LookupButton';
+import OptionButton from './OptionButton';
+import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
+import ToggleAllCheckbox from '../components/renderer/ToggleAllCheckbox';
+function FormElementCheckboxes({ id, element, value, onChange, validationMessage, displayValidationMessage, conditionallyShownOptions, }) {
+    const selectedValues = React.useMemo(() => {
+        if (!Array.isArray(value))
+            return [];
+        return value;
+    }, [value]);
+    const changeValues = React.useCallback((toggledValue, hasSelectedValue) => {
+        onChange(element, (existingValue) => {
+            if (hasSelectedValue) {
+                const newValue = (existingValue || []).filter((existingValue) => existingValue !== toggledValue);
+                if (newValue.length) {
+                    return newValue;
+                }
+            }
+            else {
+                const newValue = Array.isArray(existingValue)
+                    ? [...existingValue]
+                    : [];
+                newValue.push(toggledValue);
+                return newValue;
+            }
+        });
+    }, [element, onChange]);
+    const filteredOptions = useFormElementOptions({
+        element,
+        value,
+        onChange,
+        conditionallyShownOptions,
+    });
+    return (React.createElement("div", { className: "cypress-checkbox-element" },
+        React.createElement(FormElementLabelContainer, { className: "ob-checkbox", id: id, element: element, required: element.required },
+            React.createElement(FormElementOptions, { options: element.options },
+                element.canToggleAll && (React.createElement(ToggleAllCheckbox, { id: id, element: element, options: filteredOptions, selected: selectedValues, disabled: element.readOnly, onChange: onChange })),
+                element.buttons ? (React.createElement("div", { className: "ob-button-radio-container" },
+                    React.createElement("div", { className: "buttons ob-buttons ob-buttons-radio" }, filteredOptions.map((option, index) => {
+                        const isSelected = selectedValues.includes(option.value);
+                        return (React.createElement(OptionButton, { key: index, element: element, option: option, isSelected: isSelected, onClick: () => changeValues(option.value, isSelected), className: clsx('button ob-button ob-button__input ob-checkbox__button cypress-checkbox-button-control', {
+                                'is-primary': isSelected,
+                                'is-light': !isSelected,
+                            }) }));
+                    })))) : (React.createElement("div", null, filteredOptions.map((option, index) => {
+                    const isSelected = selectedValues.includes(option.value);
+                    return (React.createElement("div", { className: "control", key: index },
+                        React.createElement("label", { className: "checkbox ob-checkbox__input-label cypress-checkbox-label", htmlFor: `${id}_${option.value}` },
+                            React.createElement(Checkbox, { color: "primary", className: "ob-checkbox__input cypress-checkbox-control", classes: {
+                                    checked: 'ob-checkbox__input-checked',
+                                }, disableRipple: true, value: option.value, id: `${id}_${option.value}`, checked: isSelected, onChange: () => changeValues(option.value, isSelected), disabled: element.readOnly }),
+                            ' ',
+                            option.label)));
+                }))),
+                React.createElement(LookupButton, { hasMarginTop: true, value: value, validationMessage: validationMessage })),
+            displayValidationMessage && !!validationMessage && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
+                React.createElement("div", { className: "has-text-danger ob-error__text cypress-validation-message" }, validationMessage))))));
+}
+export default React.memo(FormElementCheckboxes);
 //# sourceMappingURL=FormElementCheckBoxes.js.map

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

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { FormTypes } from '@oneblink/types';
-import { Props } from './FormElementForm';
-declare function FormElementCivicaNameRecord({ element, ...props }: Omit<Props, 'element'> & {
-    element: FormTypes.CivicaNameRecordElement;
-}): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof FormElementCivicaNameRecord>;
-export default _default;
+import * as React from 'react';
+import { FormTypes } from '@oneblink/types';
+import { Props } from './FormElementForm';
+declare function FormElementCivicaNameRecord({ element, ...props }: Omit<Props, 'element'> & {
+    element: FormTypes.CivicaNameRecordElement;
+}): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FormElementCivicaNameRecord>;
+export default _default;

package/dist/form-elements/FormElementCivicaNameRecord.js

@@ -1,52 +1,52 @@
-import * as React from 'react';
-import { formService } from '@oneblink/apps';
-import FormElementForm from './FormElementForm';
-import generateCivicaNameRecordElements from '../services/generateCivicaNameRecordElements';
-function FormElementCivicaNameRecord({ element, ...props }) {
-    const [state, setState] = React.useState({
-        isLoading: true,
-    });
-    const formElement = React.useMemo(() => {
-        return {
-            id: element.id,
-            conditionallyShow: false,
-            requiresAllConditionallyShowPredicates: false,
-            type: 'form',
-            name: element.name,
-            formId: NaN,
-            elements: generateCivicaNameRecordElements(element, state.titleCodeOptions),
-        };
-    }, [element, state.titleCodeOptions]);
-    React.useEffect(() => {
-        setState({
-            isLoading: true,
-        });
-        const abortController = new AbortController();
-        const request = async () => {
-            try {
-                const items = await formService.getCivicaTitleCodes(props.formId, abortController.signal);
-                if (!abortController.signal.aborted) {
-                    setState({
-                        isLoading: false,
-                        titleCodeOptions: items,
-                    });
-                }
-            }
-            catch (error) {
-                if (!abortController.signal.aborted) {
-                    setState({
-                        isLoading: false,
-                        loadError: error,
-                    });
-                }
-            }
-        };
-        request();
-        return () => {
-            abortController.abort();
-        };
-    }, [props.formId]);
-    return React.createElement(FormElementForm, { element: formElement, ...props });
-}
-export default React.memo(FormElementCivicaNameRecord);
+import * as React from 'react';
+import { formService } from '@oneblink/apps';
+import FormElementForm from './FormElementForm';
+import generateCivicaNameRecordElements from '../services/generateCivicaNameRecordElements';
+function FormElementCivicaNameRecord({ element, ...props }) {
+    const [state, setState] = React.useState({
+        isLoading: true,
+    });
+    const formElement = React.useMemo(() => {
+        return {
+            id: element.id,
+            conditionallyShow: false,
+            requiresAllConditionallyShowPredicates: false,
+            type: 'form',
+            name: element.name,
+            formId: NaN,
+            elements: generateCivicaNameRecordElements(element, state.titleCodeOptions),
+        };
+    }, [element, state.titleCodeOptions]);
+    React.useEffect(() => {
+        setState({
+            isLoading: true,
+        });
+        const abortController = new AbortController();
+        const request = async () => {
+            try {
+                const items = await formService.getCivicaTitleCodes(props.formId, abortController.signal);
+                if (!abortController.signal.aborted) {
+                    setState({
+                        isLoading: false,
+                        titleCodeOptions: items,
+                    });
+                }
+            }
+            catch (error) {
+                if (!abortController.signal.aborted) {
+                    setState({
+                        isLoading: false,
+                        loadError: error,
+                    });
+                }
+            }
+        };
+        request();
+        return () => {
+            abortController.abort();
+        };
+    }, [props.formId]);
+    return React.createElement(FormElementForm, { element: formElement, ...props });
+}
+export default React.memo(FormElementCivicaNameRecord);
 //# sourceMappingURL=FormElementCivicaNameRecord.js.map

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

@@ -1,15 +1,15 @@
-import * as React from 'react';
-import { FormTypes, CivicaTypes } from '@oneblink/types';
-import { FormElementValueChangeHandler } from '../types/form';
-declare type Props = {
-    formId: number;
-    id: string;
-    element: FormTypes.CivicaStreetNameElement;
-    value: CivicaTypes.CivicaStreetName | undefined;
-    displayValidationMessage: boolean;
-    validationMessage: string | undefined;
-    onChange: FormElementValueChangeHandler<CivicaTypes.CivicaStreetName>;
-};
-declare function FormElementCivicaStreetName({ formId, id, element, value, displayValidationMessage, validationMessage, onChange, }: Props): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof FormElementCivicaStreetName>;
-export default _default;
+import * as React from 'react';
+import { FormTypes, CivicaTypes } from '@oneblink/types';
+import { FormElementValueChangeHandler } from '../types/form';
+declare type Props = {
+    formId: number;
+    id: string;
+    element: FormTypes.CivicaStreetNameElement;
+    value: CivicaTypes.CivicaStreetName | undefined;
+    displayValidationMessage: boolean;
+    validationMessage: string | undefined;
+    onChange: FormElementValueChangeHandler<CivicaTypes.CivicaStreetName>;
+};
+declare function FormElementCivicaStreetName({ formId, id, element, value, displayValidationMessage, validationMessage, onChange, }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FormElementCivicaStreetName>;
+export default _default;

package/dist/form-elements/FormElementCivicaStreetName.js

@@ -1,39 +1,39 @@
-import * as React from 'react';
-import { formService } from '@oneblink/apps';
-import AutocompleteDropdown from '../components/renderer/AutocompleteDropdown';
-import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
-function FormElementCivicaStreetName({ formId, id, element, value, displayValidationMessage, validationMessage, onChange, }) {
-    const [label, setLabel] = React.useState('');
-    const [error, setError] = React.useState();
-    const handleSearch = React.useCallback(async (searchTerm, abortSignal) => {
-        setError(undefined);
-        const results = await formService.searchCivicaStreetNames(formId, {
-            search: searchTerm,
-        }, abortSignal);
-        return results.map((suggestion, index) => ({
-            value: suggestion.formattedAccount || index.toString(),
-            label: suggestion.formattedStreet || index.toString(),
-            data: suggestion,
-        }));
-    }, [formId]);
-    const handleChange = React.useCallback(async (streetId, streetData) => {
-        onChange(element, streetData);
-    }, [onChange, element]);
-    // Ensure the label is set if the value is set outside of this component
-    React.useEffect(() => {
-        if (value) {
-            const newLabel = value === null || value === void 0 ? void 0 : value.formattedStreet;
-            if (label !== newLabel) {
-                setLabel(newLabel || '');
-            }
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [value]);
-    return (React.createElement("div", { className: "cypress-civica-street-name-element" },
-        React.createElement(FormElementLabelContainer, { className: "ob-civica-street-name ob-autocomplete", element: element, id: id, required: element.required },
-            React.createElement(AutocompleteDropdown, { id: id, label: label, disabled: element.readOnly, placeholder: element.placeholderValue, required: element.required, value: value, validationMessage: validationMessage, displayValidationMessage: displayValidationMessage, onChangeValue: handleChange, hasError: !!error, onChangeLabel: setLabel, searchDebounceMs: 750, searchMinCharacters: 4, onSearch: handleSearch })),
-        error && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
-            React.createElement("div", { className: "has-text-danger ob-error__text cypress-civica-street-name-error-message" }, error.toString())))));
-}
-export default React.memo(FormElementCivicaStreetName);
+import * as React from 'react';
+import { formService } from '@oneblink/apps';
+import AutocompleteDropdown from '../components/renderer/AutocompleteDropdown';
+import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
+function FormElementCivicaStreetName({ formId, id, element, value, displayValidationMessage, validationMessage, onChange, }) {
+    const [label, setLabel] = React.useState('');
+    const [error, setError] = React.useState();
+    const handleSearch = React.useCallback(async (searchTerm, abortSignal) => {
+        setError(undefined);
+        const results = await formService.searchCivicaStreetNames(formId, {
+            search: searchTerm,
+        }, abortSignal);
+        return results.map((suggestion, index) => ({
+            value: suggestion.formattedAccount || index.toString(),
+            label: suggestion.formattedStreet || index.toString(),
+            data: suggestion,
+        }));
+    }, [formId]);
+    const handleChange = React.useCallback(async (streetId, streetData) => {
+        onChange(element, streetData);
+    }, [onChange, element]);
+    // Ensure the label is set if the value is set outside of this component
+    React.useEffect(() => {
+        if (value) {
+            const newLabel = value === null || value === void 0 ? void 0 : value.formattedStreet;
+            if (label !== newLabel) {
+                setLabel(newLabel || '');
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value]);
+    return (React.createElement("div", { className: "cypress-civica-street-name-element" },
+        React.createElement(FormElementLabelContainer, { className: "ob-civica-street-name ob-autocomplete", element: element, id: id, required: element.required },
+            React.createElement(AutocompleteDropdown, { id: id, label: label, disabled: element.readOnly, placeholder: element.placeholderValue, required: element.required, value: value, validationMessage: validationMessage, displayValidationMessage: displayValidationMessage, onChangeValue: handleChange, hasError: !!error, onChangeLabel: setLabel, searchDebounceMs: 750, searchMinCharacters: 4, onSearch: handleSearch })),
+        error && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
+            React.createElement("div", { className: "has-text-danger ob-error__text cypress-civica-street-name-error-message" }, error.toString())))));
+}
+export default React.memo(FormElementCivicaStreetName);
 //# sourceMappingURL=FormElementCivicaStreetName.js.map

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

@@ -1,22 +1,22 @@
-import * as React from 'react';
-import { FormTypes } from '@oneblink/types';
-import { FormElementValueChangeHandler } from '../types/form';
-import { Attachment } from '../types/attachments';
-interface Props {
-    id: string;
-    element: FormTypes.ComplianceElement;
-    value: unknown;
-    onChange: FormElementValueChangeHandler<Value>;
-    displayValidationMessage: boolean;
-    validationMessage: string | undefined;
-    conditionallyShownOptions: FormTypes.ChoiceElementOption[] | undefined;
-    isEven?: boolean;
-}
-export interface Value {
-    value?: string;
-    notes?: string;
-    files?: Attachment[];
-}
-declare function FormElementCompliance({ id, element, value, onChange, conditionallyShownOptions, validationMessage, displayValidationMessage, isEven, }: Props): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof FormElementCompliance>;
-export default _default;
+import * as React from 'react';
+import { FormTypes } from '@oneblink/types';
+import { FormElementValueChangeHandler } from '../types/form';
+import { Attachment } from '../types/attachments';
+interface Props {
+    id: string;
+    element: FormTypes.ComplianceElement;
+    value: unknown;
+    onChange: FormElementValueChangeHandler<Value>;
+    displayValidationMessage: boolean;
+    validationMessage: string | undefined;
+    conditionallyShownOptions: FormTypes.ChoiceElementOption[] | undefined;
+    isEven?: boolean;
+}
+export interface Value {
+    value?: string;
+    notes?: string;
+    files?: Attachment[];
+}
+declare function FormElementCompliance({ id, element, value, onChange, conditionallyShownOptions, validationMessage, displayValidationMessage, isEven, }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FormElementCompliance>;
+export default _default;