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

package/dist/form-elements/FormElementDate.js

@@ -1,47 +1,43 @@
 import * as React from 'react';
 import { localisationService } from '@oneblink/apps';
+import { DatePicker } from '@mui/x-date-pickers';
+import { format } from 'date-fns';
 import CopyToClipboardButton from '../components/renderer/CopyToClipboardButton';
-import useFlatpickr from '../hooks/useFlatpickr';
 import LookupButton from '../components/renderer/LookupButton';
 import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
 import { parseDateValue } from '../services/generate-default-data';
 import useFormElementDateFromTo from '../hooks/useFormElementDateFromTo';
 import { LookupNotificationContext } from '../hooks/useLookupNotification';
 import useElementAriaDescribedby from '../hooks/useElementAriaDescribedby';
-import MaterialIcon from '../components/MaterialIcon';
+import useFormDatePickerProps from '../hooks/form-date-picker/useFormDatePickerProps';
+const shortDateFormat = localisationService.getDateFnsFormats().shortDate;
 function FormElementDate({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, autocompleteAttributes, }) {
     const ariaDescribedby = useElementAriaDescribedby(id, element);
-    const htmlDivElementRef = React.useRef(null);
     const { fromDate, fromDaysOffset, toDate, toDaysOffset } = useFormElementDateFromTo(element);
-    const flatpickrOptions = React.useMemo(() => {
-        const opts = {
-            dateFormat: localisationService.getFlatpickrFormats().shortDate,
-            allowInput: false,
-            minDate: parseDateValue({
-                dateOnly: false,
-                daysOffset: fromDaysOffset,
-                value: fromDate,
-            }),
-            maxDate: parseDateValue({
-                dateOnly: false,
-                daysOffset: toDaysOffset,
-                value: toDate,
-            }),
-            defaultDate: undefined,
-            allowInvalidPreload: true,
-            onClose: setIsDirty,
-        };
-        return opts;
-    }, [fromDate, fromDaysOffset, setIsDirty, toDate, toDaysOffset]);
-    const handleChange = React.useCallback((newValue) => onChange(element, {
-        value: newValue,
-    }), [element, onChange]);
-    const { onBlur } = useFlatpickr({
+    const handleChange = React.useCallback((newValue) => {
+        onChange(element, {
+            value: newValue ? format(new Date(newValue), 'yyyy-MM-dd') : undefined,
+        });
+        setIsDirty();
+    }, [element, onChange, setIsDirty]);
+    const commonProps = useFormDatePickerProps({
         id,
-        value,
-        onChange: handleChange,
-        dateOnly: true,
-    }, flatpickrOptions, htmlDivElementRef);
+        value: typeof value === 'string' ? value : undefined,
+        maxDate: parseDateValue({
+            dateOnly: true,
+            daysOffset: toDaysOffset,
+            value: toDate,
+        }),
+        minDate: parseDateValue({
+            dateOnly: true,
+            daysOffset: fromDaysOffset,
+            value: fromDate,
+        }),
+        icon: 'event',
+        ariaDescribedby,
+        autocompleteAttributes,
+        placeholder: element.placeholderValue,
+    });
     const text = React.useMemo(() => {
         if (typeof value === 'string') {
             const date = localisationService.generateDate({
@@ -57,13 +53,13 @@ function FormElementDate({ id, element, value, onChange, validationMessage, disp
     }, [value]);
     const { isLookingUp } = React.useContext(LookupNotificationContext);
     const isDisplayingValidationMessage = (displayValidationMessage || isDirty) && !!validationMessage && !isLookingUp;
-    return (React.createElement("div", { className: "cypress-date-element", ref: htmlDivElementRef },
+    return (React.createElement("div", { className: "cypress-date-element" },
         React.createElement(FormElementLabelContainer, { className: "ob-date", id: id, element: element, required: element.required },
             React.createElement("div", { className: "field has-addons" },
                 React.createElement("div", { className: "control is-expanded has-icons-right" },
-                    React.createElement("input", { id: id, name: element.name, placeholder: element.placeholderValue, disabled: element.readOnly, className: "input ob-input cypress-date-control", onBlur: onBlur, autoComplete: autocompleteAttributes, "aria-describedby": ariaDescribedby }),
-                    React.createElement("span", { className: "ob-input-icon icon is-small is-right" },
-                        React.createElement(MaterialIcon, { className: "is-size-5" }, "event"))),
+                    React.createElement(DatePicker, { label: element.label, format: shortDateFormat, ...commonProps, onAccept: (newDate) => {
+                            handleChange(newDate === null || newDate === void 0 ? void 0 : newDate.toISOString());
+                        }, disabled: element.readOnly })),
                 !!element.readOnly && !!text && (React.createElement("div", { className: "control" },
                     React.createElement(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }))),
                 React.createElement(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton })),

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

@@ -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,gBAAgB,CAAA;AAEpD,OAAO,qBAAqB,MAAM,8CAA8C,CAAA;AAChF,OAAO,YAAkC,MAAM,uBAAuB,CAAA;AACtE,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,YAAY,MAAM,4BAA4B,CAAA;AAYrD,SAAS,eAAe,CAAC,EACvB,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,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAA;IAE5D,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,EAAE,YAAY,EAAE,GACtD,wBAAwB,CAAC,OAAO,CAAC,CAAA;IAEnC,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC1C,MAAM,IAAI,GAAqB;YAC7B,UAAU,EAAE,mBAAmB,CAAC,mBAAmB,EAAE,CAAC,SAAS;YAC/D,UAAU,EAAE,KAAK;YACjB,OAAO,EAAE,cAAc,CAAC;gBACtB,QAAQ,EAAE,KAAK;gBACf,UAAU,EAAE,cAAc;gBAC1B,KAAK,EAAE,QAAQ;aAChB,CAAC;YACF,OAAO,EAAE,cAAc,CAAC;gBACtB,QAAQ,EAAE,KAAK;gBACf,UAAU,EAAE,YAAY;gBACxB,KAAK,EAAE,MAAM;aACd,CAAC;YACF,WAAW,EAAE,SAAS;YACtB,mBAAmB,EAAE,IAAI;YACzB,OAAO,EAAE,UAAU;SACpB,CAAA;QAED,OAAO,IAAI,CAAA;IACb,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,EAAE,YAAY,CAAC,CAAC,CAAA;IAEhE,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,CAAC,QAA4B,EAAE,EAAE,CAC/B,QAAQ,CAAC,OAAO,EAAE;QAChB,KAAK,EAAE,QAAQ;KAChB,CAAC,EACJ,CAAC,OAAO,EAAE,QAAQ,CAAC,CACpB,CAAA;IAED,MAAM,EAAE,MAAM,EAAE,GAAG,YAAY,CAC7B;QACE,EAAE;QACF,KAAK;QACL,QAAQ,EAAE,YAAY;QACtB,QAAQ,EAAE,IAAI;KACf,EACD,gBAAgB,EAChB,iBAAiB,CAClB,CAAA;IAED,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;gBACL,QAAQ,EAAE,IAAI;aACf,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,6BAAK,SAAS,EAAC,sBAAsB,EAAC,GAAG,EAAE,iBAAiB;QAC1D,oBAAC,yBAAyB,IACxB,SAAS,EAAC,SAAS,EACnB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ;YAE1B,6BAAK,SAAS,EAAC,kBAAkB;gBAC/B,6BAAK,SAAS,EAAC,qCAAqC;oBAClD,+BACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,WAAW,EAAE,OAAO,CAAC,gBAAgB,EACrC,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,SAAS,EAAC,qCAAqC,EAC/C,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,sBAAsB,sBAClB,eAAe,GACjC;oBAEF,8BAAM,SAAS,EAAC,sCAAsC;wBACpD,oBAAC,YAAY,IAAC,SAAS,EAAC,WAAW,YAAqB,CACnD,CACH;gBACL,CAAC,CAAC,OAAO,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,IAAI,CAC/B,6BAAK,SAAS,EAAC,SAAS;oBACtB,oBAAC,qBAAqB,IACpB,SAAS,EAAC,oEAAoE,EAC9E,IAAI,EAAE,IAAI,GACV,CACE,CACP;gBACD,oBAAC,YAAY,IACX,aAAa,QACb,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,OAAO,CAAC,YAAY,GACxC,CACE;YAEL,6BAA6B,IAAI,CAChC,6BAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,kBAAkB;gBAC5C,6BAAK,SAAS,EAAC,2DAA2D,IACvE,iBAAiB,CACd,CACF,CACP,CACyB,CACxB,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { localisationService } from '@oneblink/apps'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport useFlatpickr, { FlatpickrOptions } from '../hooks/useFlatpickr'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\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 MaterialIcon from '../components/MaterialIcon'\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  autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementDate({\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 htmlDivElementRef = React.useRef<HTMLDivElement>(null)\n\n  const { fromDate, fromDaysOffset, toDate, toDaysOffset } =\n    useFormElementDateFromTo(element)\n\n  const flatpickrOptions = React.useMemo(() => {\n    const opts: FlatpickrOptions = {\n      dateFormat: localisationService.getFlatpickrFormats().shortDate,\n      allowInput: false,\n      minDate: parseDateValue({\n        dateOnly: false,\n        daysOffset: fromDaysOffset,\n        value: fromDate,\n      }),\n      maxDate: parseDateValue({\n        dateOnly: false,\n        daysOffset: toDaysOffset,\n        value: toDate,\n      }),\n      defaultDate: undefined,\n      allowInvalidPreload: true,\n      onClose: setIsDirty,\n    }\n\n    return opts\n  }, [fromDate, fromDaysOffset, setIsDirty, toDate, toDaysOffset])\n\n  const handleChange = React.useCallback(\n    (newValue: string | undefined) =>\n      onChange(element, {\n        value: newValue,\n      }),\n    [element, onChange],\n  )\n\n  const { onBlur } = useFlatpickr(\n    {\n      id,\n      value,\n      onChange: handleChange,\n      dateOnly: true,\n    },\n    flatpickrOptions,\n    htmlDivElementRef,\n  )\n\n  const text = React.useMemo(() => {\n    if (typeof value === 'string') {\n      const date = localisationService.generateDate({\n        daysOffset: undefined,\n        value,\n        dateOnly: true,\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\" ref={htmlDivElementRef}>\n      <FormElementLabelContainer\n        className=\"ob-date\"\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              id={id}\n              name={element.name}\n              placeholder={element.placeholderValue}\n              disabled={element.readOnly}\n              className=\"input ob-input cypress-date-control\"\n              onBlur={onBlur}\n              autoComplete={autocompleteAttributes}\n              aria-describedby={ariaDescribedby}\n            />\n\n            <span className=\"ob-input-icon icon is-small is-right\">\n              <MaterialIcon className=\"is-size-5\">event</MaterialIcon>\n            </span>\n          </div>\n          {!!element.readOnly && !!text && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n            lookupButtonConfig={element.lookupButton}\n          />\n        </div>\n\n        {isDisplayingValidationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementDate)\n"]}
+{"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 '@oneblink/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 from '../hooks/form-date-picker/useFormDatePickerProps'\n\nconst shortDateFormat = localisationService.getDateFnsFormats().shortDate\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  autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementDate({\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\n  const { fromDate, fromDaysOffset, toDate, toDaysOffset } =\n    useFormElementDateFromTo(element)\n\n  const handleChange = React.useCallback(\n    (newValue: string | undefined) => {\n      onChange(element, {\n        value: newValue ? format(new Date(newValue), 'yyyy-MM-dd') : undefined,\n      })\n      setIsDirty()\n    },\n\n    [element, onChange, setIsDirty],\n  )\n\n  const commonProps = useFormDatePickerProps({\n    id,\n    value: typeof value === 'string' ? value : undefined,\n    maxDate: parseDateValue({\n      dateOnly: true,\n      daysOffset: toDaysOffset,\n      value: toDate,\n    }),\n    minDate: parseDateValue({\n      dateOnly: true,\n      daysOffset: fromDaysOffset,\n      value: fromDate,\n    }),\n    icon: 'event',\n    ariaDescribedby,\n    autocompleteAttributes,\n    placeholder: element.placeholderValue,\n  })\n\n  const text = React.useMemo(() => {\n    if (typeof value === 'string') {\n      const date = localisationService.generateDate({\n        daysOffset: undefined,\n        value,\n        dateOnly: true,\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          <div className=\"control is-expanded has-icons-right\">\n            <DatePicker\n              label={element.label}\n              format={shortDateFormat}\n              {...commonProps}\n              onAccept={(newDate) => {\n                handleChange(newDate?.toISOString())\n              }}\n              disabled={element.readOnly}\n            />\n          </div>\n          {!!element.readOnly && !!text && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n            lookupButtonConfig={element.lookupButton}\n          />\n        </div>\n\n        {isDisplayingValidationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementDate)\n"]}

package/dist/form-elements/FormElementDateTime.js

@@ -1,51 +1,42 @@
 import * as React from 'react';
 import { localisationService } from '@oneblink/apps';
+import { DateTimePicker } from '@mui/x-date-pickers';
 import CopyToClipboardButton from '../components/renderer/CopyToClipboardButton';
-import useFlatpickr from '../hooks/useFlatpickr';
 import LookupButton from '../components/renderer/LookupButton';
 import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
 import { parseDateValue } from '../services/generate-default-data';
 import useFormElementDateFromTo from '../hooks/useFormElementDateFromTo';
 import { LookupNotificationContext } from '../hooks/useLookupNotification';
 import useElementAriaDescribedby from '../hooks/useElementAriaDescribedby';
-import MaterialIcon from '../components/MaterialIcon';
+import useFormDatePickerProps from '../hooks/form-date-picker/useFormDatePickerProps';
+const shortDateTimeFormat = localisationService.getDateFnsFormats().shortDateTime;
 function FormElementDateTime({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, autocompleteAttributes, }) {
     const ariaDescribedby = useElementAriaDescribedby(id, element);
-    const htmlDivElementRef = React.useRef(null);
     const { fromDate, fromDaysOffset, toDate, toDaysOffset } = useFormElementDateFromTo(element);
-    const flatpickrOptions = React.useMemo(() => {
-        const opts = {
-            altInput: true,
-            dateFormat: 'Y-m-dTH:i:S',
-            altFormat: localisationService.getFlatpickrFormats().shortDateTime,
-            allowInput: false,
-            altInputClass: 'input ob-input cypress-date-time-control',
-            minDate: parseDateValue({
-                dateOnly: false,
-                daysOffset: fromDaysOffset,
-                value: fromDate,
-            }),
-            maxDate: parseDateValue({
-                dateOnly: false,
-                daysOffset: toDaysOffset,
-                value: toDate,
-            }),
-            defaultDate: undefined,
-            enableTime: true,
-            allowInvalidPreload: true,
-            onClose: setIsDirty,
-        };
-        return opts;
-    }, [fromDate, fromDaysOffset, setIsDirty, toDate, toDaysOffset]);
-    const handleChange = React.useCallback((newValue) => onChange(element, {
-        value: newValue,
-    }), [element, onChange]);
-    useFlatpickr({
+    const handleChange = React.useCallback((newValue) => {
+        onChange(element, {
+            value: newValue,
+        });
+        setIsDirty();
+    }, [element, onChange, setIsDirty]);
+    const commonProps = useFormDatePickerProps({
         id,
-        value,
-        onChange: handleChange,
-        label: element.label,
-    }, flatpickrOptions, htmlDivElementRef);
+        value: typeof value === 'string' ? value : undefined,
+        maxDate: parseDateValue({
+            dateOnly: false,
+            daysOffset: toDaysOffset,
+            value: toDate,
+        }),
+        minDate: parseDateValue({
+            dateOnly: false,
+            daysOffset: fromDaysOffset,
+            value: fromDate,
+        }),
+        icon: 'date_range',
+        ariaDescribedby,
+        autocompleteAttributes,
+        placeholder: element.placeholderValue,
+    });
     const text = React.useMemo(() => {
         if (typeof value !== 'string') {
             return null;
@@ -54,13 +45,13 @@ function FormElementDateTime({ id, element, value, onChange, validationMessage,
     }, [value]);
     const { isLookingUp } = React.useContext(LookupNotificationContext);
     const isDisplayingValidationMessage = (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp;
-    return (React.createElement("div", { className: "cypress-datetime-element", ref: htmlDivElementRef },
+    return (React.createElement("div", { className: "cypress-datetime-element" },
         React.createElement(FormElementLabelContainer, { className: "ob-datetime", id: id, element: element, required: element.required },
             React.createElement("div", { className: "field has-addons" },
                 React.createElement("div", { className: "control is-expanded has-icons-right" },
-                    React.createElement("input", { type: "datetime-local", id: id, name: element.name, placeholder: element.placeholderValue, disabled: element.readOnly, className: "input ob-input", "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes }),
-                    React.createElement("span", { className: "ob-input-icon icon is-small is-right" },
-                        React.createElement(MaterialIcon, { className: "is-size-5" }, "date_range"))),
+                    React.createElement(DateTimePicker, { label: element.label, format: shortDateTimeFormat, ...commonProps, onAccept: (newDate) => {
+                            handleChange(newDate === null || newDate === void 0 ? void 0 : newDate.toISOString());
+                        }, disabled: element.readOnly, timeSteps: { minutes: 1 } })),
                 !!element.readOnly && !!text && (React.createElement("div", { className: "control" },
                     React.createElement(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }))),
                 React.createElement(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton })),

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

@@ -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,gBAAgB,CAAA;AAEpD,OAAO,qBAAqB,MAAM,8CAA8C,CAAA;AAChF,OAAO,YAAkC,MAAM,uBAAuB,CAAA;AACtE,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,YAAY,MAAM,4BAA4B,CAAA;AAYrD,SAAS,mBAAmB,CAAC,EAC3B,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,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAA;IAE5D,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,EAAE,YAAY,EAAE,GACtD,wBAAwB,CAAC,OAAO,CAAC,CAAA;IAEnC,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC1C,MAAM,IAAI,GAAqB;YAC7B,QAAQ,EAAE,IAAI;YACd,UAAU,EAAE,aAAa;YACzB,SAAS,EAAE,mBAAmB,CAAC,mBAAmB,EAAE,CAAC,aAAa;YAClE,UAAU,EAAE,KAAK;YACjB,aAAa,EAAE,0CAA0C;YACzD,OAAO,EAAE,cAAc,CAAC;gBACtB,QAAQ,EAAE,KAAK;gBACf,UAAU,EAAE,cAAc;gBAC1B,KAAK,EAAE,QAAQ;aAChB,CAAC;YACF,OAAO,EAAE,cAAc,CAAC;gBACtB,QAAQ,EAAE,KAAK;gBACf,UAAU,EAAE,YAAY;gBACxB,KAAK,EAAE,MAAM;aACd,CAAC;YACF,WAAW,EAAE,SAAS;YACtB,UAAU,EAAE,IAAI;YAChB,mBAAmB,EAAE,IAAI;YACzB,OAAO,EAAE,UAAU;SACpB,CAAA;QAED,OAAO,IAAI,CAAA;IACb,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,EAAE,YAAY,CAAC,CAAC,CAAA;IAEhE,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,CAAC,QAA4B,EAAE,EAAE,CAC/B,QAAQ,CAAC,OAAO,EAAE;QAChB,KAAK,EAAE,QAAQ;KAChB,CAAC,EACJ,CAAC,OAAO,EAAE,QAAQ,CAAC,CACpB,CAAA;IAED,YAAY,CACV;QACE,EAAE;QACF,KAAK;QACL,QAAQ,EAAE,YAAY;QACtB,KAAK,EAAE,OAAO,CAAC,KAAK;KACrB,EACD,gBAAgB,EAChB,iBAAiB,CAClB,CAAA;IAED,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,6BAAK,SAAS,EAAC,0BAA0B,EAAC,GAAG,EAAE,iBAAiB;QAC9D,oBAAC,yBAAyB,IACxB,SAAS,EAAC,aAAa,EACvB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ;YAE1B,6BAAK,SAAS,EAAC,kBAAkB;gBAC/B,6BAAK,SAAS,EAAC,qCAAqC;oBAClD,+BACE,IAAI,EAAC,gBAAgB,EACrB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,WAAW,EAAE,OAAO,CAAC,gBAAgB,EACrC,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,SAAS,EAAC,gBAAgB,sBACR,eAAe,EACjC,YAAY,EAAE,sBAAsB,GACpC;oBACF,8BAAM,SAAS,EAAC,sCAAsC;wBACpD,oBAAC,YAAY,IAAC,SAAS,EAAC,WAAW,iBAA0B,CACxD,CACH;gBACL,CAAC,CAAC,OAAO,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,IAAI,CAC/B,6BAAK,SAAS,EAAC,SAAS;oBACtB,oBAAC,qBAAqB,IACpB,SAAS,EAAC,oEAAoE,EAC9E,IAAI,EAAE,IAAI,GACV,CACE,CACP;gBACD,oBAAC,YAAY,IACX,aAAa,QACb,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,OAAO,CAAC,YAAY,GACxC,CACE;YAEL,6BAA6B,IAAI,CAChC,6BAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,kBAAkB;gBAC5C,6BAAK,SAAS,EAAC,2DAA2D,IACvE,iBAAiB,CACd,CACF,CACP,CACyB,CACxB,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { localisationService } from '@oneblink/apps'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport useFlatpickr, { FlatpickrOptions } from '../hooks/useFlatpickr'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\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 MaterialIcon from '../components/MaterialIcon'\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  autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementDateTime({\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 htmlDivElementRef = React.useRef<HTMLDivElement>(null)\n\n  const { fromDate, fromDaysOffset, toDate, toDaysOffset } =\n    useFormElementDateFromTo(element)\n\n  const flatpickrOptions = React.useMemo(() => {\n    const opts: FlatpickrOptions = {\n      altInput: true,\n      dateFormat: 'Y-m-dTH:i:S',\n      altFormat: localisationService.getFlatpickrFormats().shortDateTime,\n      allowInput: false,\n      altInputClass: 'input ob-input cypress-date-time-control',\n      minDate: parseDateValue({\n        dateOnly: false,\n        daysOffset: fromDaysOffset,\n        value: fromDate,\n      }),\n      maxDate: parseDateValue({\n        dateOnly: false,\n        daysOffset: toDaysOffset,\n        value: toDate,\n      }),\n      defaultDate: undefined,\n      enableTime: true,\n      allowInvalidPreload: true,\n      onClose: setIsDirty,\n    }\n\n    return opts\n  }, [fromDate, fromDaysOffset, setIsDirty, toDate, toDaysOffset])\n\n  const handleChange = React.useCallback(\n    (newValue: string | undefined) =>\n      onChange(element, {\n        value: newValue,\n      }),\n    [element, onChange],\n  )\n\n  useFlatpickr(\n    {\n      id,\n      value,\n      onChange: handleChange,\n      label: element.label,\n    },\n    flatpickrOptions,\n    htmlDivElementRef,\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\" ref={htmlDivElementRef}>\n      <FormElementLabelContainer\n        className=\"ob-datetime\"\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=\"datetime-local\"\n              id={id}\n              name={element.name}\n              placeholder={element.placeholderValue}\n              disabled={element.readOnly}\n              className=\"input ob-input\"\n              aria-describedby={ariaDescribedby}\n              autoComplete={autocompleteAttributes}\n            />\n            <span className=\"ob-input-icon icon is-small is-right\">\n              <MaterialIcon className=\"is-size-5\">date_range</MaterialIcon>\n            </span>\n          </div>\n          {!!element.readOnly && !!text && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n            lookupButtonConfig={element.lookupButton}\n          />\n        </div>\n\n        {isDisplayingValidationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementDateTime)\n"]}
+{"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 '@oneblink/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 from '../hooks/form-date-picker/useFormDatePickerProps'\n\nconst shortDateTimeFormat =\n  localisationService.getDateFnsFormats().shortDateTime\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  autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementDateTime({\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\n  const { fromDate, fromDaysOffset, toDate, toDaysOffset } =\n    useFormElementDateFromTo(element)\n\n  const handleChange = React.useCallback(\n    (newValue: string | undefined) => {\n      onChange(element, {\n        value: newValue,\n      })\n      setIsDirty()\n    },\n    [element, onChange, setIsDirty],\n  )\n\n  const commonProps = useFormDatePickerProps({\n    id,\n    value: typeof value === 'string' ? value : undefined,\n    maxDate: parseDateValue({\n      dateOnly: false,\n      daysOffset: toDaysOffset,\n      value: toDate,\n    }),\n    minDate: parseDateValue({\n      dateOnly: false,\n      daysOffset: fromDaysOffset,\n      value: fromDate,\n    }),\n    icon: 'date_range',\n    ariaDescribedby,\n    autocompleteAttributes,\n    placeholder: element.placeholderValue,\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          <div className=\"control is-expanded has-icons-right\">\n            <DateTimePicker\n              label={element.label}\n              format={shortDateTimeFormat}\n              {...commonProps}\n              onAccept={(newDate) => {\n                handleChange(newDate?.toISOString())\n              }}\n              disabled={element.readOnly}\n              timeSteps={{ minutes: 1 }}\n            />\n          </div>\n          {!!element.readOnly && !!text && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n            lookupButtonConfig={element.lookupButton}\n          />\n        </div>\n\n        {isDisplayingValidationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementDateTime)\n"]}

package/dist/form-elements/FormElementTime.js

@@ -1,41 +1,37 @@
 import * as React from 'react';
 import { localisationService } from '@oneblink/apps';
+import { TimePicker } from '@mui/x-date-pickers';
 import CopyToClipboardButton from '../components/renderer/CopyToClipboardButton';
-import useFlatpickr from '../hooks/useFlatpickr';
 import LookupButton from '../components/renderer/LookupButton';
 import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
 import { LookupNotificationContext } from '../hooks/useLookupNotification';
 import useElementAriaDescribedby from '../hooks/useElementAriaDescribedby';
-import MaterialIcon from '../components/MaterialIcon';
+import useFormDatePickerProps from '../hooks/form-date-picker/useFormDatePickerProps';
+const timeFormat = localisationService.getDateFnsFormats().time;
 function FormElementTime({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, autocompleteAttributes, }) {
     const ariaDescribedby = useElementAriaDescribedby(id, element);
-    const htmlDivElementRef = React.useRef(null);
-    const flatpickrOptions = React.useMemo(() => {
-        const opts = {
-            altInput: true,
-            dateFormat: 'H:i',
-            altFormat: localisationService.getFlatpickrFormats().time,
-            allowInput: false,
-            altInputClass: 'input ob-input cypress-time-control',
-            minDate: undefined,
-            maxDate: undefined,
-            defaultDate: undefined,
-            enableTime: true,
-            noCalendar: true,
-            time_24hr: false,
-            onClose: setIsDirty,
-        };
-        return opts;
-    }, [setIsDirty]);
-    const handleChange = React.useCallback((newValue) => onChange(element, {
-        value: newValue,
-    }), [element, onChange]);
-    useFlatpickr({
+    const handleChange = React.useCallback((newValue) => {
+        onChange(element, {
+            value: newValue,
+        });
+        setIsDirty();
+    }, [element, onChange, setIsDirty]);
+    const commonProps = useFormDatePickerProps({
         id,
-        value,
-        onChange: handleChange,
-        label: element.label,
-    }, flatpickrOptions, htmlDivElementRef);
+        value: typeof value === 'string' ? value : undefined,
+        maxDate: undefined,
+        minDate: undefined,
+        icon: 'schedule',
+        ariaDescribedby,
+        autocompleteAttributes,
+        placeholder: element.placeholderValue,
+    });
+    const timeProps = React.useMemo(() => {
+        // maxDate and minDate not applicable to a timepicker
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { maxDate, minDate, ...rest } = commonProps;
+        return rest;
+    }, [commonProps]);
     const text = React.useMemo(() => {
         if (typeof value !== 'string') {
             return null;
@@ -44,13 +40,13 @@ function FormElementTime({ id, element, value, onChange, validationMessage, disp
     }, [value]);
     const { isLookingUp } = React.useContext(LookupNotificationContext);
     const isDisplayingValidationMessage = (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp;
-    return (React.createElement("div", { className: "cypress-time-element", ref: htmlDivElementRef },
+    return (React.createElement("div", { className: "cypress-time-element" },
         React.createElement(FormElementLabelContainer, { className: "ob-time", id: id, element: element, required: element.required },
             React.createElement("div", { className: "field has-addons" },
                 React.createElement("div", { className: "control is-expanded has-icons-right" },
-                    React.createElement("input", { type: "time", id: id, name: element.name, placeholder: element.placeholderValue, disabled: element.readOnly, className: "input ob-input", "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes }),
-                    React.createElement("span", { className: "ob-input-icon icon is-small is-right" },
-                        React.createElement(MaterialIcon, { className: "is-size-5" }, "schedule"))),
+                    React.createElement(TimePicker, { label: element.label, format: timeFormat, ...timeProps, onAccept: (newDate) => {
+                            handleChange(newDate === null || newDate === void 0 ? void 0 : newDate.toISOString());
+                        }, disabled: element.readOnly, timeSteps: { minutes: 1 } })),
                 !!element.readOnly && !!text && (React.createElement("div", { className: "control" },
                     React.createElement(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }))),
                 React.createElement(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton })),

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementTime.js","sourceRoot":"","sources":["../../src/form-elements/FormElementTime.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { localisationService } from '@oneblink/apps'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport useFlatpickr, { FlatpickrOptions } from '../hooks/useFlatpickr'\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'\n\ntype Props = {\n  id: string\n  element: FormTypes.TimeElement\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementTime({\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 htmlDivElementRef = React.useRef<HTMLDivElement>(null)\n\n  const flatpickrOptions = React.useMemo(() => {\n    const opts: FlatpickrOptions = {\n      altInput: true,\n      dateFormat: 'H:i',\n      altFormat: localisationService.getFlatpickrFormats().time,\n      allowInput: false,\n      altInputClass: 'input ob-input cypress-time-control',\n      minDate: undefined,\n      maxDate: undefined,\n      defaultDate: undefined,\n      enableTime: true,\n      noCalendar: true,\n      time_24hr: false,\n      onClose: setIsDirty,\n    }\n\n    return opts\n  }, [setIsDirty])\n\n  const handleChange = React.useCallback(\n    (newValue: string | undefined) =>\n      onChange(element, {\n        value: newValue,\n      }),\n    [element, onChange],\n  )\n\n  useFlatpickr(\n    {\n      id,\n      value,\n      onChange: handleChange,\n      label: element.label,\n    },\n    flatpickrOptions,\n    htmlDivElementRef,\n  )\n\n  const text = React.useMemo(() => {\n    if (typeof value !== 'string') {\n      return null\n    }\n    return localisationService.formatTime(new Date(value))\n  }, [value])\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n  return (\n    <div className=\"cypress-time-element\" ref={htmlDivElementRef}>\n      <FormElementLabelContainer\n        className=\"ob-time\"\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=\"time\"\n              id={id}\n              name={element.name}\n              placeholder={element.placeholderValue}\n              disabled={element.readOnly}\n              className=\"input ob-input\"\n              aria-describedby={ariaDescribedby}\n              autoComplete={autocompleteAttributes}\n            />\n            <span className=\"ob-input-icon icon is-small is-right\">\n              <MaterialIcon className=\"is-size-5\">schedule</MaterialIcon>\n            </span>\n          </div>\n          {!!element.readOnly && !!text && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n            lookupButtonConfig={element.lookupButton}\n          />\n        </div>\n\n        {isDisplayingValidationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementTime)\n"]}
+{"version":3,"file":"FormElementTime.js","sourceRoot":"","sources":["../../src/form-elements/FormElementTime.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { localisationService } from '@oneblink/apps'\nimport { FormTypes } from '@oneblink/types'\nimport { TimePicker } from '@mui/x-date-pickers'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\n\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport useFormDatePickerProps from '../hooks/form-date-picker/useFormDatePickerProps'\n\ntype Props = {\n  id: string\n  element: FormTypes.TimeElement\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  autocompleteAttributes?: string\n} & IsDirtyProps\n\nconst timeFormat = localisationService.getDateFnsFormats().time\n\nfunction FormElementTime({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n  autocompleteAttributes,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n\n  const handleChange = React.useCallback(\n    (newValue: string | undefined) => {\n      onChange(element, {\n        value: newValue,\n      })\n      setIsDirty()\n    },\n    [element, onChange, setIsDirty],\n  )\n\n  const commonProps = useFormDatePickerProps({\n    id,\n    value: typeof value === 'string' ? value : undefined,\n    maxDate: undefined,\n    minDate: undefined,\n    icon: 'schedule',\n    ariaDescribedby,\n    autocompleteAttributes,\n    placeholder: element.placeholderValue,\n  })\n\n  const timeProps = React.useMemo(() => {\n    // maxDate and minDate not applicable to a timepicker\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { maxDate, minDate, ...rest } = commonProps\n    return rest\n  }, [commonProps])\n\n  const text = React.useMemo(() => {\n    if (typeof value !== 'string') {\n      return null\n    }\n    return localisationService.formatTime(new Date(value))\n  }, [value])\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n  return (\n    <div className=\"cypress-time-element\">\n      <FormElementLabelContainer\n        className=\"ob-time\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"field has-addons\">\n          <div className=\"control is-expanded has-icons-right\">\n            <TimePicker\n              label={element.label}\n              format={timeFormat}\n              {...timeProps}\n              onAccept={(newDate) => {\n                handleChange(newDate?.toISOString())\n              }}\n              disabled={element.readOnly}\n              timeSteps={{ minutes: 1 }}\n            />\n          </div>\n          {!!element.readOnly && !!text && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n            lookupButtonConfig={element.lookupButton}\n          />\n        </div>\n\n        {isDisplayingValidationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementTime)\n"]}

package/dist/hooks/form-date-picker/useFormDatePickerProps.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { TextFieldProps } from '@mui/material';
+import { PickersActionBarAction } from '@mui/x-date-pickers';
+export default function useFormDatePickerProps({ id, value, maxDate, minDate, icon, ariaDescribedby, autocompleteAttributes, placeholder, }: {
+    id: string;
+    value: string | undefined;
+    maxDate: string | undefined;
+    minDate: string | undefined;
+    icon: 'event' | 'date_range' | 'schedule';
+    ariaDescribedby: string | undefined;
+    autocompleteAttributes: string | undefined;
+    placeholder: string | undefined;
+}): {
+    slots: {
+        textField: (params: React.PropsWithChildren<TextFieldProps>) => React.JSX.Element;
+        openPickerIcon: () => React.JSX.Element;
+    };
+    slotProps: {
+        actionBar: {
+            actions: PickersActionBarAction[];
+        };
+    };
+    maxDate: Date | null;
+    minDate: Date | null;
+    value: Date | null;
+};

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

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { TextField, styled } from '@mui/material';
+import clsx from 'clsx';
+import MaterialIcon from '../../components/MaterialIcon';
+const StyledTextField = styled(TextField)(() => ({
+    '& .MuiOutlinedInput-root': {
+        fontFamily: 'inherit',
+        '& fieldset': {
+            borderColor: '#dbdbdb',
+        },
+        '&:hover fieldset': {
+            borderColor: '#b5b5b5',
+        },
+        '&.Mui-focused fieldset': {
+            borderColor: '#485fc7',
+            borderWidth: '1px',
+        },
+    },
+}));
+export default function useFormDatePickerProps({ id, value, maxDate, minDate, icon, ariaDescribedby, autocompleteAttributes, placeholder, }) {
+    const valueMemo = React.useMemo(() => {
+        return value ? new Date(value) : null;
+    }, [value]);
+    const maxDateMemo = React.useMemo(() => (maxDate ? new Date(maxDate) : null), [maxDate]);
+    const minDateMemo = React.useMemo(() => (minDate ? new Date(minDate) : null), [minDate]);
+    //must be a fuction
+    const openPickerIcon = React.useCallback(() => React.createElement(MaterialIcon, { className: "is-size-5" }, icon), [icon]);
+    return {
+        slots: {
+            textField: (params) => {
+                var _a;
+                return (React.createElement(StyledTextField, { ...params, id: id, variant: "outlined", margin: "dense", size: "small", label: undefined, placeholder: placeholder, autoComplete: autocompleteAttributes, "aria-describedby": "once once", inputProps: {
+                        ...params.inputProps,
+                        className: clsx((_a = params.inputProps) === null || _a === void 0 ? void 0 : _a.className, 'input ob-input'),
+                        ariaDescribedby: ariaDescribedby,
+                    }, fullWidth: true, 
+                    //we have our own error and helper text state
+                    error: undefined }));
+            },
+            openPickerIcon,
+        },
+        slotProps: {
+            actionBar: {
+                actions: [
+                    'clear',
+                    'today',
+                    'cancel',
+                    'accept',
+                ],
+            },
+        },
+        maxDate: maxDateMemo,
+        minDate: minDateMemo,
+        value: valueMemo,
+    };
+}
+//# sourceMappingURL=useFormDatePickerProps.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFormDatePickerProps.js","sourceRoot":"","sources":["../../../src/hooks/form-date-picker/useFormDatePickerProps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAkB,MAAM,EAAE,MAAM,eAAe,CAAA;AAEjE,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,YAAY,MAAM,+BAA+B,CAAA;AAExD,MAAM,eAAe,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IAC/C,0BAA0B,EAAE;QAC1B,UAAU,EAAE,SAAS;QACrB,YAAY,EAAE;YACZ,WAAW,EAAE,SAAS;SACvB;QACD,kBAAkB,EAAE;YAClB,WAAW,EAAE,SAAS;SACvB;QACD,wBAAwB,EAAE;YACxB,WAAW,EAAE,SAAS;YACtB,WAAW,EAAE,KAAK;SACnB;KACF;CACF,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,EAAE,EACF,KAAK,EACL,OAAO,EACP,OAAO,EACP,IAAI,EACJ,eAAe,EACf,sBAAsB,EACtB,WAAW,GAUZ;IACC,MAAM,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACnC,OAAO,KAAK,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;IACvC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAC/B,GAAG,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAC1C,CAAC,OAAO,CAAC,CACV,CAAA;IACD,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAC/B,GAAG,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAC1C,CAAC,OAAO,CAAC,CACV,CAAA;IAED,mBAAmB;IACnB,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CACtC,GAAG,EAAE,CAAC,oBAAC,YAAY,IAAC,SAAS,EAAC,WAAW,IAAE,IAAI,CAAgB,EAC/D,CAAC,IAAI,CAAC,CACP,CAAA;IAED,OAAO;QACL,KAAK,EAAE;YACL,SAAS,EAAE,CAAC,MAA+C,EAAE,EAAE;;gBAAC,OAAA,CAC9D,oBAAC,eAAe,OACV,MAAM,EACV,EAAE,EAAE,EAAE,EACN,OAAO,EAAC,UAAU,EAClB,MAAM,EAAC,OAAO,EACd,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,SAAS,EAChB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,sBAAsB,sBACnB,WAAW,EAC5B,UAAU,EAAE;wBACV,GAAG,MAAM,CAAC,UAAU;wBACpB,SAAS,EAAE,IAAI,CAAC,MAAA,MAAM,CAAC,UAAU,0CAAE,SAAS,EAAE,gBAAgB,CAAC;wBAC/D,eAAe,EAAE,eAAe;qBACjC,EACD,SAAS;oBACT,6CAA6C;oBAC7C,KAAK,EAAE,SAAS,GAChB,CACH,CAAA;aAAA;YACD,cAAc;SACf;QACD,SAAS,EAAE;YACT,SAAS,EAAE;gBACT,OAAO,EAAE;oBACP,OAAO;oBACP,OAAO;oBACP,QAAQ;oBACR,QAAQ;iBACmB;aAC9B;SACF;QACD,OAAO,EAAE,WAAW;QACpB,OAAO,EAAE,WAAW;QACpB,KAAK,EAAE,SAAS;KACjB,CAAA;AACH,CAAC","sourcesContent":["import * as React from 'react'\nimport { TextField, TextFieldProps, styled } from '@mui/material'\nimport { PickersActionBarAction } from '@mui/x-date-pickers'\nimport clsx from 'clsx'\nimport MaterialIcon from '../../components/MaterialIcon'\n\nconst StyledTextField = styled(TextField)(() => ({\n  '& .MuiOutlinedInput-root': {\n    fontFamily: 'inherit',\n    '& fieldset': {\n      borderColor: '#dbdbdb',\n    },\n    '&:hover fieldset': {\n      borderColor: '#b5b5b5',\n    },\n    '&.Mui-focused fieldset': {\n      borderColor: '#485fc7',\n      borderWidth: '1px',\n    },\n  },\n}))\n\nexport default function useFormDatePickerProps({\n  id,\n  value,\n  maxDate,\n  minDate,\n  icon,\n  ariaDescribedby,\n  autocompleteAttributes,\n  placeholder,\n}: {\n  id: string\n  value: string | undefined\n  maxDate: string | undefined\n  minDate: string | undefined\n  icon: 'event' | 'date_range' | 'schedule'\n  ariaDescribedby: string | undefined\n  autocompleteAttributes: string | undefined\n  placeholder: string | undefined\n}) {\n  const valueMemo = React.useMemo(() => {\n    return value ? new Date(value) : null\n  }, [value])\n\n  const maxDateMemo = React.useMemo(\n    () => (maxDate ? new Date(maxDate) : null),\n    [maxDate],\n  )\n  const minDateMemo = React.useMemo(\n    () => (minDate ? new Date(minDate) : null),\n    [minDate],\n  )\n\n  //must be a fuction\n  const openPickerIcon = React.useCallback(\n    () => <MaterialIcon className=\"is-size-5\">{icon}</MaterialIcon>,\n    [icon],\n  )\n\n  return {\n    slots: {\n      textField: (params: React.PropsWithChildren<TextFieldProps>) => (\n        <StyledTextField\n          {...params}\n          id={id}\n          variant=\"outlined\"\n          margin=\"dense\"\n          size=\"small\"\n          label={undefined}\n          placeholder={placeholder}\n          autoComplete={autocompleteAttributes}\n          aria-describedby=\"once once\"\n          inputProps={{\n            ...params.inputProps,\n            className: clsx(params.inputProps?.className, 'input ob-input'),\n            ariaDescribedby: ariaDescribedby,\n          }}\n          fullWidth\n          //we have our own error and helper text state\n          error={undefined}\n        />\n      ),\n      openPickerIcon,\n    },\n    slotProps: {\n      actionBar: {\n        actions: [\n          'clear',\n          'today',\n          'cancel',\n          'accept',\n        ] as PickersActionBarAction[],\n      },\n    },\n    maxDate: maxDateMemo,\n    minDate: minDateMemo,\n    value: valueMemo,\n  }\n}\n"]}