@oneblink/apps-react 7.3.0-beta.2 → 8.0.0-beta.10

package/dist/styles.scss

@@ -118,7 +118,6 @@ $section-padding-mobile: $section-padding-mobile-y $section-padding-mobile-x;
 @import './styles/ob-image.scss';
 @import './styles/ob-files.scss';
 @import './styles/number.scss';
-@import './styles/date.scss';
 @import './styles/autocomplete.scss';
 @import './styles/lookup.scss';
 @import './styles/steps.scss';
@@ -147,4 +146,3 @@ $section-padding-mobile: $section-padding-mobile-y $section-padding-mobile-x;
 //
 // Third Party
 //
-@import 'flatpickr/dist/flatpickr';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oneblink/apps-react",
   "description": "Helper functions for OneBlink apps in ReactJS.",
-  "version": "7.3.0-beta.2",
+  "version": "8.0.0-beta.10",
   "author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
   "bugs": {
     "url": "https://github.com/oneblink/apps-react/issues"
@@ -11,7 +11,7 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@nylas/react": "^1.3.1",
-    "@oneblink/sdk-core": "^7.3.2-beta.1",
+    "@oneblink/sdk-core": "^7.4.0-beta.3",
     "@react-google-maps/api": "2.19.2",
     "blueimp-load-image": "^5.16.0",
     "bulma": "^0.9.4",
@@ -25,7 +25,6 @@
     "email-validator": "^2.0.4",
     "escape-string-regexp": "^5.0.0",
     "file-saver": "^2.0.5",
-    "flatpickr": "^4.6.13",
     "html5-qrcode": "^2.3.8",
     "lodash.clonedeep": "^4.5.0",
     "lodash.debounce": "^4.0.8",
@@ -47,8 +46,8 @@
     "@microsoft/eslint-plugin-sdl": "^0.2.2",
     "@mui/lab": "^5.0.0-alpha.152",
     "@mui/material": "^5.15.6",
-    "@mui/x-date-pickers": "^6.19.2",
-    "@oneblink/apps": "^20.0.0-beta.1",
+    "@mui/x-date-pickers": "^6.20.2",
+    "@oneblink/apps": "^21.0.0-beta.1",
     "@oneblink/release-cli": "^3.3.0",
     "@oneblink/types": "github:oneblink/types",
     "@types/blueimp-load-image": "^5.16.6",
@@ -108,7 +107,7 @@
   "peerDependencies": {
     "@mui/lab": "^5.0.0 || ^5.0.0-alpha.152",
     "@mui/material": "^5.6.1",
-    "@mui/x-date-pickers": "^6.9.1",
+    "@mui/x-date-pickers": "^6.20.2",
     "@oneblink/apps": "*",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",

package/dist/hooks/useFlatpickr.d.ts

@@ -1,14 +0,0 @@
-import * as React from 'react';
-import { Options as FlatpickrOptions } from 'flatpickr/dist/types/options';
-export { FlatpickrOptions };
-export default function useFlatpickr({ id, value, onChange, dateOnly, label, }: {
-    id: string;
-    value: unknown | undefined;
-    onChange: (value: string | undefined) => void;
-    dateOnly?: boolean;
-    label?: string;
-}, fpOpts: FlatpickrOptions, htmlElement: {
-    current: HTMLElement | null;
-}): {
-    onBlur: (e: React.FocusEvent<HTMLInputElement, Element>) => void;
-};

package/dist/hooks/useFlatpickr.js

@@ -1,111 +0,0 @@
-import * as React from 'react';
-import Flatpickr from 'flatpickr';
-import { Sentry, localisationService } from '@oneblink/apps';
-import useFlatpickrGuid from '../hooks/useFlatpickrGuid';
-const getDateValue = (date, dateOnly) => {
-    if (!date)
-        return;
-    if (dateOnly) {
-        return Flatpickr.formatDate(date, 'Y-m-d');
-    }
-    return date.toISOString();
-};
-export default function useFlatpickr({ id, value, onChange, dateOnly, label, }, fpOpts, htmlElement) {
-    const flatpickrGuid = useFlatpickrGuid();
-    const vpRef = React.useRef(null);
-    React.useEffect(() => {
-        const options = {
-            ...fpOpts,
-            static: true,
-            appendTo: htmlElement.current || undefined,
-            onReady: (a, b, fp) => {
-                if (label) {
-                    fp.altInput.setAttribute('aria-label', label);
-                }
-            },
-            formatDate: (date, format) => {
-                if (date) {
-                    return Flatpickr.formatDate(date, format);
-                }
-                return '';
-            },
-        };
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const newVp = new Flatpickr(`[id="${flatpickrGuid}"] [id="${id}"]`, options);
-        newVp.set('onChange', (selectedDates) => {
-            onChange(getDateValue(selectedDates === null || selectedDates === void 0 ? void 0 : selectedDates[0], dateOnly));
-        });
-        // Have to update the value in an onClose event if time is
-        // enabled as changing the AM/PM via keyboard does not
-        // trigger the onChange event:
-        // https://github.com/flatpickr/flatpickr/issues/1957
-        if (fpOpts.enableTime) {
-            newVp.set('onClose', (selectedDates, currentDateString, self) => {
-                onChange(getDateValue(selectedDates === null || selectedDates === void 0 ? void 0 : selectedDates[0], dateOnly));
-                if (typeof fpOpts.onClose === 'function') {
-                    fpOpts.onClose(selectedDates, currentDateString, self);
-                }
-            });
-        }
-        vpRef.current = newVp;
-        return () => {
-            // destroy the flatpickr instance when the dom element is removed
-            vpRef.current = null;
-            if (newVp.destroy) {
-                newVp.destroy();
-            }
-        };
-    }, [dateOnly, flatpickrGuid, fpOpts, htmlElement, id, label, onChange]);
-    // Sync value with flatpickr when value is changed outside of component
-    React.useEffect(() => {
-        const vp = vpRef.current;
-        if (vp && vp.selectedDates) {
-            const selectedDate = vp.selectedDates[0];
-            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, dateOnly) !== value)) {
-                try {
-                    const date = localisationService.generateDate({
-                        daysOffset: undefined,
-                        value,
-                        dateOnly: !!dateOnly,
-                    });
-                    if (date) {
-                        vp.setDate(date, false);
-                    }
-                }
-                catch (error) {
-                    Sentry.captureException(new Error(`Error setting date: ${value}`));
-                }
-            }
-        }
-    }, [dateOnly, value]);
-    const onBlur = React.useCallback((e) => {
-        if (e.target.value) {
-            try {
-                const date = Flatpickr.parseDate(e.target.value, fpOpts.dateFormat);
-                if (date) {
-                    const newValue = getDateValue(date, dateOnly);
-                    onChange(newValue);
-                    return;
-                }
-            }
-            catch (e) {
-                console.warn('Could not parse date on blur event', id, e);
-            }
-        }
-        onChange(undefined);
-    }, [dateOnly, fpOpts.dateFormat, id, onChange]);
-    return {
-        onBlur,
-    };
-}
-//# sourceMappingURL=useFlatpickr.js.map

package/dist/hooks/useFlatpickr.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useFlatpickr.js","sourceRoot":"","sources":["../../src/hooks/useFlatpickr.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport Flatpickr from 'flatpickr'\nimport { Options as FlatpickrOptions } from 'flatpickr/dist/types/options'\nimport { Instance as FlatpickrInstance } from 'flatpickr/dist/types/instance'\nimport { Sentry, localisationService } from '@oneblink/apps'\nimport useFlatpickrGuid from '../hooks/useFlatpickrGuid'\n\nexport { FlatpickrOptions }\n\nconst getDateValue = (\n  date: Date | undefined,\n  dateOnly: boolean | undefined,\n) => {\n  if (!date) return\n  if (dateOnly) {\n    return Flatpickr.formatDate(date, 'Y-m-d')\n  }\n  return date.toISOString()\n}\n\nexport default function useFlatpickr(\n  {\n    id,\n    value,\n    onChange,\n    dateOnly,\n    label,\n  }: {\n    id: string\n    value: unknown | undefined\n    onChange: (value: string | undefined) => void\n    dateOnly?: boolean\n    label?: string\n  },\n  fpOpts: FlatpickrOptions,\n  htmlElement: { current: HTMLElement | null },\n) {\n  const flatpickrGuid = useFlatpickrGuid()\n  const vpRef = React.useRef<FlatpickrInstance | null>(null)\n\n  React.useEffect(() => {\n    const options: FlatpickrOptions = {\n      ...fpOpts,\n      static: true,\n      appendTo: htmlElement.current || undefined,\n      onReady: (a, b, fp) => {\n        if (label) {\n          fp.altInput!.setAttribute('aria-label', label)\n        }\n      },\n      formatDate: (date: Date | undefined, format: string) => {\n        if (date) {\n          return Flatpickr.formatDate(date, format)\n        }\n        return ''\n      },\n    }\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const newVp: FlatpickrInstance = new (Flatpickr as any)(\n      `[id=\"${flatpickrGuid}\"] [id=\"${id}\"]`,\n      options,\n    )\n    newVp.set('onChange', (selectedDates: Date[]) => {\n      onChange(getDateValue(selectedDates?.[0], dateOnly))\n    })\n    // Have to update the value in an onClose event if time is\n    // enabled as changing the AM/PM via keyboard does not\n    // trigger the onChange event:\n    // https://github.com/flatpickr/flatpickr/issues/1957\n    if (fpOpts.enableTime) {\n      newVp.set(\n        'onClose',\n        (\n          selectedDates: Date[],\n          currentDateString: string,\n          self: FlatpickrInstance,\n        ) => {\n          onChange(getDateValue(selectedDates?.[0], dateOnly))\n          if (typeof fpOpts.onClose === 'function') {\n            fpOpts.onClose(selectedDates, currentDateString, self)\n          }\n        },\n      )\n    }\n    vpRef.current = newVp\n    return () => {\n      // destroy the flatpickr instance when the dom element is removed\n      vpRef.current = null\n      if (newVp.destroy) {\n        newVp.destroy()\n      }\n    }\n  }, [dateOnly, flatpickrGuid, fpOpts, htmlElement, id, label, onChange])\n\n  // Sync value with flatpickr when value is changed outside of component\n  React.useEffect(() => {\n    const vp = vpRef.current\n\n    if (vp && vp.selectedDates) {\n      const selectedDate = vp.selectedDates[0]\n      if (!value && selectedDate) {\n        try {\n          vp.clear(false)\n        } catch (error) {\n          Sentry.captureException(new Error('Error clearing value'))\n        }\n      } else if (\n        value &&\n        typeof value === 'string' &&\n        (!selectedDate || getDateValue(selectedDate, dateOnly) !== value)\n      ) {\n        try {\n          const date = localisationService.generateDate({\n            daysOffset: undefined,\n            value,\n            dateOnly: !!dateOnly,\n          })\n          if (date) {\n            vp.setDate(date, false)\n          }\n        } catch (error) {\n          Sentry.captureException(new Error(`Error setting date: ${value}`))\n        }\n      }\n    }\n  }, [dateOnly, value])\n\n  const onBlur = React.useCallback(\n    (e: React.FocusEvent<HTMLInputElement, Element>) => {\n      if (e.target.value) {\n        try {\n          const date = Flatpickr.parseDate(e.target.value, fpOpts.dateFormat)\n          if (date) {\n            const newValue = getDateValue(date, dateOnly)\n            onChange(newValue)\n            return\n          }\n        } catch (e) {\n          console.warn('Could not parse date on blur event', id, e)\n        }\n      }\n      onChange(undefined)\n    },\n    [dateOnly, fpOpts.dateFormat, id, onChange],\n  )\n\n  return {\n    onBlur,\n  }\n}\n"]}

package/dist/hooks/useFlatpickrGuid.d.ts

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

package/dist/hooks/useFlatpickrGuid.js

@@ -1,12 +0,0 @@
-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/useFlatpickrGuid.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useFlatpickrGuid.js","sourceRoot":"","sources":["../../src/hooks/useFlatpickrGuid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,IAAI,IAAI,EAAE,MAAM,MAAM,CAAA;AACjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,oBAAoB,GAAG,KAAK,CAAC,aAAa,CAAS,EAAE,CAAC,CAAA;AAK5D,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,EAAE,QAAQ,EAAS,EAAE,EAAE;IAC3D,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC,CAAA;IAC7C,OAAO,CACL,oBAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK;QACzC,6BAAK,EAAE,EAAE,KAAK,IAAG,QAAQ,CAAO,CACF,CACjC,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,wBAAwB;IAC9C,OAAO,KAAK,CAAC,UAAU,CAAC,oBAAoB,CAAC,CAAA;AAC/C,CAAC","sourcesContent":["import { v4 as guid } from 'uuid'\nimport * as React from 'react'\n\nconst FlatpickrGuidContext = React.createContext<string>('')\n\ntype Props = {\n  children: React.ReactNode\n}\nexport const FlatpickrGuidProvider = ({ children }: Props) => {\n  const value = React.useMemo(() => guid(), [])\n  return (\n    <FlatpickrGuidContext.Provider value={value}>\n      <div id={value}>{children}</div>\n    </FlatpickrGuidContext.Provider>\n  )\n}\n\nexport default function useFlatpickrGuidCallback() {\n  return React.useContext(FlatpickrGuidContext)\n}\n"]}

package/dist/styles/date.scss

@@ -1,7 +0,0 @@
-.ob-input.flatpickr-input[disabled] {
-  cursor: not-allowed;
-}
-
-.ob-form__element .flatpickr-wrapper {
-  display: block;
-}