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

package/dist/hooks/useConditionallyShowOptionCallback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useConditionallyShowOptionCallback.js","sourceRoot":"","sources":["../../src/hooks/useConditionallyShowOptionCallback.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;AAEjC,MAAM,CAAC,MAAM,sCAAsC,GAAG,KAAK,CAAC,aAAa,CACvE,cAAc,CACf,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,kCAAkC,CACxD,gBAAkC,EAClC,OAA8B;IAE9B,MAAM,yBAAyB,GAAG,KAAK,CAAC,UAAU,CAChD,sCAAsC,CACvC,CAAA;IAED,OAAO,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACxB,IACE,CAAC,OAAO,CAAC,IAAI,KAAK,QAAQ;YACxB,OAAO,CAAC,IAAI,KAAK,YAAY;YAC7B,OAAO,CAAC,IAAI,KAAK,OAAO;YACxB,OAAO,CAAC,IAAI,KAAK,YAAY;YAC7B,OAAO,CAAC,IAAI,KAAK,cAAc,CAAC;YAClC,CAAC,OAAO,CAAC,wBAAwB,EACjC;YACA,OAAO,cAAc,CAAA;SACtB;QAED,OAAO,CAAC,MAAqC,EAAE,EAAE;YAC/C,OAAO,yBAAyB,CAAC,gBAAgB,EAAE,OAAO,EAAE,MAAM,CAAC,CAAA;QACrE,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,gBAAgB,EAAE,yBAAyB,CAAC,CAAC,CAAA;AAC5D,CAAC","sourcesContent":["import { FormTypes } from '@oneblink/types'\nimport * as React from 'react'\n\nexport type ConditionallyShowOptionCallbackContextValue = (\n  formElementsCtrl: FormElementsCtrl,\n  formElementWithOptions: FormTypes.FormElementWithOptions,\n  choiceElementOption: FormTypes.ChoiceElementOption,\n) => boolean\n\nconst defaultContext = () => true\n\nexport const ConditionallyShowOptionCallbackContext = React.createContext<ConditionallyShowOptionCallbackContextValue>(\n  defaultContext,\n)\n\nexport default function useConditionallyShowOptionCallback(\n  formElementsCtrl: FormElementsCtrl,\n  element: FormTypes.FormElement,\n) {\n  const onConditionallyShowOption = React.useContext(\n    ConditionallyShowOptionCallbackContext,\n  )\n\n  return React.useMemo(() => {\n    if (\n      (element.type !== 'select' &&\n        element.type !== 'compliance' &&\n        element.type !== 'radio' &&\n        element.type !== 'checkboxes' &&\n        element.type !== 'autocomplete') ||\n      !element.conditionallyShowOptions\n    ) {\n      return defaultContext\n    }\n\n    return (option: FormTypes.ChoiceElementOption) => {\n      return onConditionallyShowOption(formElementsCtrl, element, option)\n    }\n  }, [element, formElementsCtrl, onConditionallyShowOption])\n}\n"]}

package/dist/hooks/useContrastColor.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (colorToGetContrastFor?: string) => "#000000" | "#FFFFFF";
-export default _default;
+declare const _default: (colorToGetContrastFor?: string) => "#000000" | "#FFFFFF";
+export default _default;

package/dist/hooks/useContrastColor.js

@@ -1,13 +1,13 @@
-import * as React from 'react';
-import Color from 'color';
-const black = '#000000';
-const white = '#FFFFFF';
-export default (colorToGetContrastFor) => {
-    return React.useMemo(() => {
-        if (!colorToGetContrastFor)
-            return white;
-        const color = Color(colorToGetContrastFor);
-        return color.isLight() ? black : white;
-    }, [colorToGetContrastFor]);
-};
+import * as React from 'react';
+import Color from 'color';
+const black = '#000000';
+const white = '#FFFFFF';
+export default (colorToGetContrastFor) => {
+    return React.useMemo(() => {
+        if (!colorToGetContrastFor)
+            return white;
+        const color = Color(colorToGetContrastFor);
+        return color.isLight() ? black : white;
+    }, [colorToGetContrastFor]);
+};
 //# sourceMappingURL=useContrastColor.js.map

package/dist/hooks/useCustomValidation.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/hooks/useCustomValidation.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+const useCustomValidation = (element) => {
+    return React.useMemo(() => {
+        return {
+            shouldUseRegexValidation: !!element.regexPattern,
+        };
+    }, []);
+};
+//# sourceMappingURL=useCustomValidation.js.map

package/dist/hooks/useCustomValidation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCustomValidation.js","sourceRoot":"","sources":["../../src/hooks/useCustomValidation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,mBAAmB,GAAG,CAG1B,OAAU,EACV,EAAE;IACF,OAAO,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACxB,OAAO;YACL,wBAAwB,EAAE,CAAC,CAAC,OAAO,CAAC,YAAY;SACjD,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;AACR,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { FormTypes } from '@oneblink/types'\n\nconst useCustomValidation = <\n  T extends FormTypes.FormElementWithInput<T['defaultValue']>,\n>(\n  element: T,\n) => {\n  return React.useMemo(() => {\n    return {\n      shouldUseRegexValidation: !!element.regexPattern,\n    }\n  }, [])\n}\n"]}

package/dist/hooks/useDynamicOptionsLoaderEffect.d.ts

@@ -0,0 +1,7 @@
+import { OneBlinkAppsError } from '@oneblink/apps';
+import { FormTypes } from '@oneblink/types';
+import { SetFormSubmission } from '../types/form';
+export default function useDynamicOptionsLoaderState(form: FormTypes.Form, setFormSubmission: SetFormSubmission): {
+    elementId: string;
+    error: OneBlinkAppsError;
+} | null;

package/dist/hooks/useDynamicOptionsLoaderEffect.js

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import _cloneDeep from 'lodash.clonedeep';
+import { formElementsService } from '@oneblink/sdk-core';
+import { formService } from '@oneblink/apps';
+export default function useDynamicOptionsLoaderState(form, setFormSubmission) {
+    const [state, setState] = React.useState(null);
+    React.useEffect(() => {
+        if (state) {
+            return;
+        }
+        let ignore = false;
+        (async () => {
+            const optionsByElementId = await formService.getFormElementDynamicOptions(form);
+            if (ignore || !optionsByElementId.length) {
+                return;
+            }
+            const nonOkResponse = optionsByElementId.find((optionsForElementId) => !optionsForElementId.ok);
+            if (nonOkResponse && !nonOkResponse.ok) {
+                setState(nonOkResponse);
+                return;
+            }
+            setFormSubmission((currentFormSubmission) => {
+                const clonedForm = _cloneDeep(currentFormSubmission.definition);
+                for (const optionsForElementId of optionsByElementId) {
+                    if (optionsForElementId.ok) {
+                        formElementsService.forEachFormElementWithOptions(clonedForm.elements, (formElement) => {
+                            if (formElement.id === optionsForElementId.elementId) {
+                                formElement.options = optionsForElementId.options;
+                            }
+                        });
+                    }
+                }
+                return {
+                    ...currentFormSubmission,
+                    definition: clonedForm,
+                };
+            });
+        })();
+        return () => {
+            ignore = true;
+        };
+    }, [form, setFormSubmission, state]);
+    return state;
+}
+//# sourceMappingURL=useDynamicOptionsLoaderEffect.js.map

package/dist/hooks/useDynamicOptionsLoaderEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDynamicOptionsLoaderEffect.js","sourceRoot":"","sources":["../../src/hooks/useDynamicOptionsLoaderEffect.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,UAAU,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAA;AACxD,OAAO,EAAE,WAAW,EAAqB,MAAM,gBAAgB,CAAA;AAI/D,MAAM,CAAC,OAAO,UAAU,4BAA4B,CAClD,IAAoB,EACpB,iBAAoC;IAKpC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GACrB,KAAK,CAAC,QAAQ,CAAkD,IAAI,CAAC,CAAA;IACvE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,KAAK,EAAE;YACT,OAAM;SACP;QAED,IAAI,MAAM,GAAG,KAAK,CAEjB;QAAA,CAAC,KAAK,IAAI,EAAE;YACX,MAAM,kBAAkB,GAAG,MAAM,WAAW,CAAC,4BAA4B,CACvE,IAAI,CACL,CAAA;YAED,IAAI,MAAM,IAAI,CAAC,kBAAkB,CAAC,MAAM,EAAE;gBACxC,OAAM;aACP;YAED,MAAM,aAAa,GAAG,kBAAkB,CAAC,IAAI,CAC3C,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAC,mBAAmB,CAAC,EAAE,CACjD,CAAA;YACD,IAAI,aAAa,IAAI,CAAC,aAAa,CAAC,EAAE,EAAE;gBACtC,QAAQ,CAAC,aAAa,CAAC,CAAA;gBACvB,OAAM;aACP;YAED,iBAAiB,CAAC,CAAC,qBAAqB,EAAE,EAAE;gBAC1C,MAAM,UAAU,GAAmB,UAAU,CAC3C,qBAAqB,CAAC,UAAU,CACjC,CAAA;gBACD,KAAK,MAAM,mBAAmB,IAAI,kBAAkB,EAAE;oBACpD,IAAI,mBAAmB,CAAC,EAAE,EAAE;wBAC1B,mBAAmB,CAAC,6BAA6B,CAC/C,UAAU,CAAC,QAAQ,EACnB,CAAC,WAAW,EAAE,EAAE;4BACd,IAAI,WAAW,CAAC,EAAE,KAAK,mBAAmB,CAAC,SAAS,EAAE;gCACpD,WAAW,CAAC,OAAO,GAAG,mBAAmB,CAAC,OAAO,CAAA;6BAClD;wBACH,CAAC,CACF,CAAA;qBACF;iBACF;gBACD,OAAO;oBACL,GAAG,qBAAqB;oBACxB,UAAU,EAAE,UAAU;iBACvB,CAAA;YACH,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,EAAE,CAAA;QAEJ,OAAO,GAAG,EAAE;YACV,MAAM,GAAG,IAAI,CAAA;QACf,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,EAAE,KAAK,CAAC,CAAC,CAAA;IAEpC,OAAO,KAAK,CAAA;AACd,CAAC","sourcesContent":["import * as React from 'react'\nimport _cloneDeep from 'lodash.clonedeep'\nimport { formElementsService } from '@oneblink/sdk-core'\nimport { formService, OneBlinkAppsError } from '@oneblink/apps'\nimport { FormTypes } from '@oneblink/types'\nimport { SetFormSubmission } from '../types/form'\n\nexport default function useDynamicOptionsLoaderState(\n  form: FormTypes.Form,\n  setFormSubmission: SetFormSubmission,\n): {\n  elementId: string\n  error: OneBlinkAppsError\n} | null {\n  const [state, setState] =\n    React.useState<ReturnType<typeof useDynamicOptionsLoaderState>>(null)\n  React.useEffect(() => {\n    if (state) {\n      return\n    }\n\n    let ignore = false\n\n    ;(async () => {\n      const optionsByElementId = await formService.getFormElementDynamicOptions(\n        form,\n      )\n\n      if (ignore || !optionsByElementId.length) {\n        return\n      }\n\n      const nonOkResponse = optionsByElementId.find(\n        (optionsForElementId) => !optionsForElementId.ok,\n      )\n      if (nonOkResponse && !nonOkResponse.ok) {\n        setState(nonOkResponse)\n        return\n      }\n\n      setFormSubmission((currentFormSubmission) => {\n        const clonedForm: FormTypes.Form = _cloneDeep(\n          currentFormSubmission.definition,\n        )\n        for (const optionsForElementId of optionsByElementId) {\n          if (optionsForElementId.ok) {\n            formElementsService.forEachFormElementWithOptions(\n              clonedForm.elements,\n              (formElement) => {\n                if (formElement.id === optionsForElementId.elementId) {\n                  formElement.options = optionsForElementId.options\n                }\n              },\n            )\n          }\n        }\n        return {\n          ...currentFormSubmission,\n          definition: clonedForm,\n        }\n      })\n    })()\n\n    return () => {\n      ignore = true\n    }\n  }, [form, setFormSubmission, state])\n\n  return state\n}\n"]}

package/dist/hooks/useDynamicOptionsLoaderState.d.ts

@@ -1,7 +1,7 @@
-import { OneBlinkAppsError } from '@oneblink/apps';
-import { FormTypes } from '@oneblink/types';
-import { SetFormSubmission } from '../types/form';
-export default function useDynamicOptionsLoaderState(form: FormTypes.Form, setFormSubmission: SetFormSubmission): {
-    elementId: string;
-    error: OneBlinkAppsError;
-} | null;
+import { OneBlinkAppsError } from '@oneblink/apps';
+import { FormTypes } from '@oneblink/types';
+import { SetFormSubmission } from '../types/form';
+export default function useDynamicOptionsLoaderState(form: FormTypes.Form, setFormSubmission: SetFormSubmission): {
+    elementId: string;
+    error: OneBlinkAppsError;
+} | null;

package/dist/hooks/useDynamicOptionsLoaderState.js

@@ -1,45 +1,45 @@
-import * as React from 'react';
-import _cloneDeep from 'lodash.clonedeep';
-import { formElementsService } from '@oneblink/sdk-core';
-import { formService } from '@oneblink/apps';
-export default function useDynamicOptionsLoaderState(form, setFormSubmission) {
-    const [state, setState] = React.useState(null);
-    React.useEffect(() => {
-        if (state) {
-            return;
-        }
-        const abortController = new AbortController();
-        (async () => {
-            const optionsByElementId = await formService.getFormElementDynamicOptions(form);
-            if (abortController.signal.aborted || !optionsByElementId.length) {
-                return;
-            }
-            const nonOkResponse = optionsByElementId.find((optionsForElementId) => !optionsForElementId.ok);
-            if (nonOkResponse && !nonOkResponse.ok) {
-                setState(nonOkResponse);
-                return;
-            }
-            setFormSubmission((currentFormSubmission) => {
-                const clonedForm = _cloneDeep(currentFormSubmission.definition);
-                for (const optionsForElementId of optionsByElementId) {
-                    if (optionsForElementId.ok) {
-                        formElementsService.forEachFormElementWithOptions(clonedForm.elements, (formElement) => {
-                            if (formElement.id === optionsForElementId.elementId) {
-                                formElement.options = optionsForElementId.options;
-                            }
-                        });
-                    }
-                }
-                return {
-                    ...currentFormSubmission,
-                    definition: clonedForm,
-                };
-            });
-        })();
-        return () => {
-            abortController.abort();
-        };
-    }, [form, setFormSubmission, state]);
-    return state;
-}
+import * as React from 'react';
+import _cloneDeep from 'lodash.clonedeep';
+import { formElementsService } from '@oneblink/sdk-core';
+import { formService } from '@oneblink/apps';
+export default function useDynamicOptionsLoaderState(form, setFormSubmission) {
+    const [state, setState] = React.useState(null);
+    React.useEffect(() => {
+        if (state) {
+            return;
+        }
+        const abortController = new AbortController();
+        (async () => {
+            const optionsByElementId = await formService.getFormElementDynamicOptions(form);
+            if (abortController.signal.aborted || !optionsByElementId.length) {
+                return;
+            }
+            const nonOkResponse = optionsByElementId.find((optionsForElementId) => !optionsForElementId.ok);
+            if (nonOkResponse && !nonOkResponse.ok) {
+                setState(nonOkResponse);
+                return;
+            }
+            setFormSubmission((currentFormSubmission) => {
+                const clonedForm = _cloneDeep(currentFormSubmission.definition);
+                for (const optionsForElementId of optionsByElementId) {
+                    if (optionsForElementId.ok) {
+                        formElementsService.forEachFormElementWithOptions(clonedForm.elements, (formElement) => {
+                            if (formElement.id === optionsForElementId.elementId) {
+                                formElement.options = optionsForElementId.options;
+                            }
+                        });
+                    }
+                }
+                return {
+                    ...currentFormSubmission,
+                    definition: clonedForm,
+                };
+            });
+        })();
+        return () => {
+            abortController.abort();
+        };
+    }, [form, setFormSubmission, state]);
+    return state;
+}
 //# sourceMappingURL=useDynamicOptionsLoaderState.js.map

package/dist/hooks/useExecutedLookupCallback.d.ts

@@ -1,12 +1,12 @@
-import { FormTypes } from '@oneblink/types';
-import * as React from 'react';
-declare type ExecutedLookupContextValue = {
-    executedLookup: (lookupFormElement: FormTypes.LookupFormElement) => void;
-    executeLookupFailed: (lookupFormElement: FormTypes.LookupFormElement) => void;
-};
-declare type Props = ExecutedLookupContextValue & {
-    children: React.ReactNode;
-};
-export declare const ExecutedLookupProvider: React.NamedExoticComponent<Props>;
-export default function useExecutedLookupCallback(): ExecutedLookupContextValue;
-export {};
+import { FormTypes } from '@oneblink/types';
+import * as React from 'react';
+declare type ExecutedLookupContextValue = {
+    executedLookup: (lookupFormElement: FormTypes.LookupFormElement) => void;
+    executeLookupFailed: (lookupFormElement: FormTypes.LookupFormElement) => void;
+};
+declare type Props = ExecutedLookupContextValue & {
+    children: React.ReactNode;
+};
+export declare const ExecutedLookupProvider: React.NamedExoticComponent<Props>;
+export default function useExecutedLookupCallback(): ExecutedLookupContextValue;
+export {};

package/dist/hooks/useExecutedLookupCallback.js

@@ -1,16 +1,16 @@
-import * as React from 'react';
-const ExecutedLookupContext = React.createContext({
-    executedLookup: () => { },
-    executeLookupFailed: () => { },
-});
-export const ExecutedLookupProvider = React.memo(function ExecutedLookupProvider({ executedLookup, executeLookupFailed, children, }) {
-    const value = React.useMemo(() => ({
-        executedLookup,
-        executeLookupFailed,
-    }), [executeLookupFailed, executedLookup]);
-    return (React.createElement(ExecutedLookupContext.Provider, { value: value }, children));
-});
-export default function useExecutedLookupCallback() {
-    return React.useContext(ExecutedLookupContext);
-}
+import * as React from 'react';
+const ExecutedLookupContext = React.createContext({
+    executedLookup: () => { },
+    executeLookupFailed: () => { },
+});
+export const ExecutedLookupProvider = React.memo(function ExecutedLookupProvider({ executedLookup, executeLookupFailed, children, }) {
+    const value = React.useMemo(() => ({
+        executedLookup,
+        executeLookupFailed,
+    }), [executeLookupFailed, executedLookup]);
+    return (React.createElement(ExecutedLookupContext.Provider, { value: value }, children));
+});
+export default function useExecutedLookupCallback() {
+    return React.useContext(ExecutedLookupContext);
+}
 //# sourceMappingURL=useExecutedLookupCallback.js.map

package/dist/hooks/useFlatpickr.d.ts

@@ -1,10 +1,10 @@
-import { Options as FlatpickrOptions } from 'flatpickr/dist/types/options';
-export { FlatpickrOptions };
-export default function useFlatpickr({ id, value, onChange, dateOnly, }: {
-    id: string;
-    value: unknown | undefined;
-    onChange: (value: string | undefined) => void;
-    dateOnly?: boolean;
-}, fpOpts: FlatpickrOptions, htmlElement: {
-    current: HTMLElement | null;
-}): void;
+import { Options as FlatpickrOptions } from 'flatpickr/dist/types/options';
+export { FlatpickrOptions };
+export default function useFlatpickr({ id, value, onChange, dateOnly, }: {
+    id: string;
+    value: unknown | undefined;
+    onChange: (value: string | undefined) => void;
+    dateOnly?: boolean;
+}, fpOpts: FlatpickrOptions, htmlElement: {
+    current: HTMLElement | null;
+}): void;

package/dist/hooks/useFlatpickr.js

@@ -1,74 +1,74 @@
-import * as React from 'react';
-import Flatpickr from 'flatpickr';
-import { Sentry } from '@oneblink/apps';
-import useFlatpickrGuid from '../hooks/useFlatpickrGuid';
-export default function useFlatpickr({ id, value, onChange, dateOnly, }, fpOpts, htmlElement) {
-    const flatpickrGuid = useFlatpickrGuid();
-    const vpRef = React.useRef(null);
-    const getDateValue = React.useCallback((date) => {
-        var _a;
-        if (!date)
-            return;
-        if (dateOnly) {
-            return (_a = vpRef.current) === null || _a === void 0 ? void 0 : _a.formatDate(date, 'Y-m-d');
-        }
-        return date.toISOString();
-    }, [dateOnly]);
-    React.useEffect(() => {
-        const options = {
-            ...fpOpts,
-            static: true,
-            appendTo: htmlElement.current || undefined,
-        };
-        const newVp = new Flatpickr(`[id="${flatpickrGuid}"] [id="${id}"]`, options);
-        vpRef.current = newVp;
-        return () => {
-            // destroy the flatpickr instance when the dom element is removed
-            vpRef.current = null;
-            if (newVp.destroy) {
-                newVp.destroy();
-            }
-        };
-    }, [flatpickrGuid, fpOpts, htmlElement, id, vpRef]);
-    React.useEffect(() => {
-        if (vpRef.current && vpRef.current.config) {
-            vpRef.current.set('onChange', (selectedDates) => {
-                onChange(getDateValue(selectedDates[0]));
-            });
-        }
-    }, [getDateValue, onChange, vpRef]);
-    // Sync value with flatpickr when value is changed outside of component
-    React.useEffect(() => {
-        // try {
-        const vp = vpRef.current;
-        if (vp && vp.selectedDates) {
-            const selectedDate = vp.selectedDates[0];
-            // Sentry.captureException(
-            //   new Error(`selectedDate: ${selectedDate} value: ${value}`),
-            // )
-            if (!value && selectedDate) {
-                try {
-                    vp.clear(false);
-                }
-                catch (error) {
-                    Sentry.captureException(new Error('Error clearing value'));
-                }
-            }
-            else if (value &&
-                typeof value === 'string' &&
-                (!selectedDate || getDateValue(selectedDate) !== value)) {
-                try {
-                    vp.setDate(value, false);
-                    // vp.setDate('2021-10-07', false)
-                }
-                catch (error) {
-                    Sentry.captureException(new Error(`Error setting date: ${value}`));
-                }
-            }
-        }
-        // } catch (error) {
-        //   Sentry.captureException(error)
-        // }
-    }, [getDateValue, value, vpRef]);
-}
+import * as React from 'react';
+import Flatpickr from 'flatpickr';
+import { Sentry } from '@oneblink/apps';
+import useFlatpickrGuid from '../hooks/useFlatpickrGuid';
+export default function useFlatpickr({ id, value, onChange, dateOnly, }, fpOpts, htmlElement) {
+    const flatpickrGuid = useFlatpickrGuid();
+    const vpRef = React.useRef(null);
+    const getDateValue = React.useCallback((date) => {
+        var _a;
+        if (!date)
+            return;
+        if (dateOnly) {
+            return (_a = vpRef.current) === null || _a === void 0 ? void 0 : _a.formatDate(date, 'Y-m-d');
+        }
+        return date.toISOString();
+    }, [dateOnly]);
+    React.useEffect(() => {
+        const options = {
+            ...fpOpts,
+            static: true,
+            appendTo: htmlElement.current || undefined,
+        };
+        const newVp = new Flatpickr(`[id="${flatpickrGuid}"] [id="${id}"]`, options);
+        vpRef.current = newVp;
+        return () => {
+            // destroy the flatpickr instance when the dom element is removed
+            vpRef.current = null;
+            if (newVp.destroy) {
+                newVp.destroy();
+            }
+        };
+    }, [flatpickrGuid, fpOpts, htmlElement, id, vpRef]);
+    React.useEffect(() => {
+        if (vpRef.current && vpRef.current.config) {
+            vpRef.current.set('onChange', (selectedDates) => {
+                onChange(getDateValue(selectedDates[0]));
+            });
+        }
+    }, [getDateValue, onChange, vpRef]);
+    // Sync value with flatpickr when value is changed outside of component
+    React.useEffect(() => {
+        // try {
+        const vp = vpRef.current;
+        if (vp && vp.selectedDates) {
+            const selectedDate = vp.selectedDates[0];
+            // Sentry.captureException(
+            //   new Error(`selectedDate: ${selectedDate} value: ${value}`),
+            // )
+            if (!value && selectedDate) {
+                try {
+                    vp.clear(false);
+                }
+                catch (error) {
+                    Sentry.captureException(new Error('Error clearing value'));
+                }
+            }
+            else if (value &&
+                typeof value === 'string' &&
+                (!selectedDate || getDateValue(selectedDate) !== value)) {
+                try {
+                    vp.setDate(value, false);
+                    // vp.setDate('2021-10-07', false)
+                }
+                catch (error) {
+                    Sentry.captureException(new Error(`Error setting date: ${value}`));
+                }
+            }
+        }
+        // } catch (error) {
+        //   Sentry.captureException(error)
+        // }
+    }, [getDateValue, value, vpRef]);
+}
 //# sourceMappingURL=useFlatpickr.js.map

package/dist/hooks/useFlatpickrGuid.d.ts

@@ -1,7 +1,7 @@
-import * as React from 'react';
-declare type Props = {
-    children: React.ReactNode;
-};
-export declare const FlatpickrGuidProvider: ({ children }: Props) => JSX.Element;
-export default function useFlatpickrGuidCallback(): string;
-export {};
+import * as React from 'react';
+declare type Props = {
+    children: React.ReactNode;
+};
+export declare const FlatpickrGuidProvider: ({ children }: Props) => JSX.Element;
+export default function useFlatpickrGuidCallback(): string;
+export {};

package/dist/hooks/useFlatpickrGuid.js

@@ -1,12 +1,12 @@
-import { v4 as guid } from 'uuid';
-import * as React from 'react';
-const FlatpickrGuidContext = React.createContext('');
-export const FlatpickrGuidProvider = ({ children }) => {
-    const value = React.useMemo(() => guid(), []);
-    return (React.createElement(FlatpickrGuidContext.Provider, { value: value },
-        React.createElement("div", { id: value }, children)));
-};
-export default function useFlatpickrGuidCallback() {
-    return React.useContext(FlatpickrGuidContext);
-}
+import { v4 as guid } from 'uuid';
+import * as React from 'react';
+const FlatpickrGuidContext = React.createContext('');
+export const FlatpickrGuidProvider = ({ children }) => {
+    const value = React.useMemo(() => guid(), []);
+    return (React.createElement(FlatpickrGuidContext.Provider, { value: value },
+        React.createElement("div", { id: value }, children)));
+};
+export default function useFlatpickrGuidCallback() {
+    return React.useContext(FlatpickrGuidContext);
+}
 //# sourceMappingURL=useFlatpickrGuid.js.map

package/dist/hooks/useFlattenElementsContext.d.ts

@@ -1,2 +1,2 @@
-import { FormTypes } from '@oneblink/types';
-export default function useFlattenElements(): FormTypes.FormElement[];
+import { FormTypes } from '@oneblink/types';
+export default function useFlattenElements(): FormTypes.FormElement[];

package/dist/hooks/useFlattenElementsContext.js

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { formElementsService } from '@oneblink/sdk-core';
-import useFormDefinition from './useFormDefinition';
-export default function useFlattenElements() {
-    const definition = useFormDefinition();
-    return React.useMemo(() => formElementsService.flattenFormElements(definition.elements), [definition.elements]);
-}
+import * as React from 'react';
+import { formElementsService } from '@oneblink/sdk-core';
+import useFormDefinition from './useFormDefinition';
+export default function useFlattenElements() {
+    const definition = useFormDefinition();
+    return React.useMemo(() => formElementsService.flattenFormElements(definition.elements), [definition.elements]);
+}
 //# sourceMappingURL=useFlattenElementsContext.js.map

package/dist/hooks/useFormDefinition.d.ts

@@ -1,4 +1,4 @@
-import { FormTypes } from '@oneblink/types';
-import * as React from 'react';
-export declare const FormDefinitionContext: React.Context<FormTypes.Form | undefined>;
-export default function useFormDefinition(): FormTypes.Form;
+import { FormTypes } from '@oneblink/types';
+import * as React from 'react';
+export declare const FormDefinitionContext: React.Context<FormTypes.Form | undefined>;
+export default function useFormDefinition(): FormTypes.Form;

package/dist/hooks/useFormDefinition.js

@@ -1,10 +1,10 @@
-import * as React from 'react';
-export const FormDefinitionContext = React.createContext(undefined);
-export default function useFormDefinition() {
-    const form = React.useContext(FormDefinitionContext);
-    if (!form) {
-        throw new Error('<FormDefinitionContext.Provider> does not have a value');
-    }
-    return form;
-}
+import * as React from 'react';
+export const FormDefinitionContext = React.createContext(undefined);
+export default function useFormDefinition() {
+    const form = React.useContext(FormDefinitionContext);
+    if (!form) {
+        throw new Error('<FormDefinitionContext.Provider> does not have a value');
+    }
+    return form;
+}
 //# sourceMappingURL=useFormDefinition.js.map

package/dist/hooks/useFormElementOptions.d.ts

@@ -1,9 +1,9 @@
-import { FormTypes } from '@oneblink/types';
-import { FormElementValueChangeHandler } from '../types/form';
-export default function useFormElementOptions<T>({ element, value, onChange, conditionallyShownOptions, onFilter, }: {
-    element: FormTypes.FormElementWithOptions;
-    value: unknown | undefined;
-    onChange: FormElementValueChangeHandler<T>;
-    conditionallyShownOptions: FormTypes.ChoiceElementOption[] | undefined;
-    onFilter?: (choiceElementOption: FormTypes.ChoiceElementOption) => boolean;
-}): FormTypes.ChoiceElementOption[];
+import { FormTypes } from '@oneblink/types';
+import { FormElementValueChangeHandler } from '../types/form';
+export default function useFormElementOptions<T>({ element, value, onChange, conditionallyShownOptions, onFilter, }: {
+    element: FormTypes.FormElementWithOptions;
+    value: unknown | undefined;
+    onChange: FormElementValueChangeHandler<T>;
+    conditionallyShownOptions: FormTypes.ChoiceElementOption[] | undefined;
+    onFilter?: (choiceElementOption: FormTypes.ChoiceElementOption) => boolean;
+}): FormTypes.ChoiceElementOption[];