@axinom/mosaic-ui 0.63.0-rc.1 → 0.63.0-rc.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.63.0-rc.1",
+  "version": "0.63.0-rc.2",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -112,5 +112,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6425b41d87ac24779772f202eb544e2574d9f614"
+  "gitHead": "1138af3f812dff3185f92de01ef6104640711bc8"
 }

package/src/components/FormElements/DateTimeField/DateTimeText.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import { DateTime } from 'luxon';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { noop } from '../../../helpers/utils';
 import { Button, ButtonContext } from '../../Buttons';
 import { DateTimePicker } from '../../DateTime/DateTimePicker';
 import { IconName } from '../../Icons';
@@ -18,7 +19,7 @@ export interface DateTimeTextProps extends BaseFormControl {
   autoFocus?: boolean;
   /** Whether or not the control supports auto complete */
   autoComplete?: 'on' | 'off';
-  /** Whether the control modifies the time portion of the value */
+  /** Whether the control modifies the time portion of the value (default: true) */
   modifyTime?: boolean;
   /** Callback when the datepicker popup is closed or the date field value is changed */
   onChange?: (value: string | null, isValidDate: boolean) => void;
@@ -39,7 +40,7 @@ export const DateTimeText: React.FC<DateTimeTextProps> = ({
   error = undefined,
   autoFocus = false,
   autoComplete,
-  onChange,
+  onChange = noop,
   modifyTime = true,
   className = '',
   ...rest
@@ -60,34 +61,27 @@ export const DateTimeText: React.FC<DateTimeTextProps> = ({
 
   const onBlurHandler = useCallback(
     (e: React.FocusEvent<HTMLInputElement>) => {
-      // `display` represents the formatted version of the `value` prop and is updated whenever `value` changes.
-      // Comparing `e.target.value` with `display` ensures that onChange is only triggered when the input value has changed.
-      if (e.target.value === display) {
-        // If the value hasn't changed, do not trigger onChange
-        return;
-      }
-
       const textValue = e.target.value;
       const parsedValue = modifyTime
         ? DateTime.fromFormat(textValue, 'f')
         : DateTime.fromFormat(textValue, 'D');
 
       if (parsedValue.isValid) {
-        onChange && onChange(parsedValue.toISO(), parsedValue.isValid);
+        onChange(parsedValue.toISO(), parsedValue.isValid);
       } else if (textValue === '') {
-        onChange && onChange(null, true);
+        onChange(null, true);
       } else {
         // Fallback parser if the user types in an ISO date
         const isoParsedValue = DateTime.fromISO(textValue);
 
         if (isoParsedValue.isValid) {
-          onChange && onChange(isoParsedValue.toISO(), isoParsedValue.isValid);
+          onChange(isoParsedValue.toISO(), isoParsedValue.isValid);
         } else {
-          onChange && onChange(textValue, parsedValue.isValid);
+          onChange(textValue, parsedValue.isValid);
         }
       }
     },
-    [display, modifyTime, onChange],
+    [modifyTime, onChange],
   );
 
   return (

package/src/components/FormElements/DateTimeField/DateTimeTextField.tsx

@@ -1,4 +1,5 @@
 import { useField } from 'formik';
+import { DateTime } from 'luxon';
 import React from 'react';
 import { useFormikError } from '../useFormikError';
 import { DateTimeText, DateTimeTextProps } from './DateTimeText';
@@ -14,16 +15,28 @@ export const DateTimeTextField: React.FC<
   const error = useFormikError(props.name);
   const [, meta, helpers] = useField(props.name);
 
-  const handleChange = (value: string | null, valid?: boolean): void => {
+  const handleChange = (value: string | null, valid: boolean): void => {
     if (!valid) {
       helpers.setError('Invalid Date');
       helpers.setValue(value, false);
     } else {
-      helpers.setValue(value);
-    }
+      const initialDateTime = DateTime.fromISO(meta.initialValue);
+      const newDateTime = DateTime.fromISO(value ?? '');
 
-    if (value === meta.initialValue) {
-      helpers.setTouched(false);
+      if (newDateTime.setZone(initialDateTime.zone).equals(initialDateTime)) {
+        // If the new date is the same as the initial value and the timezone is the only change,
+        // set it to the initial value
+        helpers.setValue(meta.initialValue);
+      } else if (
+        (value === null || value === '') &&
+        (!meta.initialValue || meta.initialValue === '')
+      ) {
+        // If the value is null or empty and the initial value is also null or empty,
+        // set it to the initial value
+        helpers.setValue(meta.initialValue);
+      } else {
+        helpers.setValue(value);
+      }
     }
   };
 

package/src/components/FormStation/Create/Create.stories.tsx

@@ -7,6 +7,7 @@ import * as Yup from 'yup';
 import { createGroups } from '../../../helpers/storybook';
 import {
   CustomTagsField,
+  DateTimeTextField,
   FileUpload,
   SelectField,
   SingleLineTextField,
@@ -23,6 +24,7 @@ interface CreateValues {
   shortDescription?: string;
   longDescription?: string;
   cast?: string[];
+  released?: string;
 }
 
 interface APIResponse {
@@ -108,6 +110,12 @@ export const Default: StoryObj<CreateStoryType> = {
           as={SingleLineTextField}
           type="password"
         />
+        <Field
+          name="released"
+          label="Released"
+          as={DateTimeTextField}
+          modifyTime={false}
+        />
       </>
     ),
     title: 'Create a Movie',
@@ -127,6 +135,7 @@ export const Default: StoryObj<CreateStoryType> = {
         shortDescription: '',
         longDescription: '',
         cast: [],
+        released: '',
       },
     },
     cancelNavigationUrl: '/',

package/src/components/FormStation/FormStation.stories.tsx

@@ -169,7 +169,7 @@ export const Extended: StoryObj<typeof Details> = (() => {
           shortDescription: 'Some short abstract...',
           longDescription: '',
           cast: ['Jane Doe', 'John Doe'],
-          released: '2020-04-03T00:00:00.000+00:00',
+          released: '2020-04-03',
           list: listData,
           archived: false,
           timestamp: '00:00:00.001',
@@ -227,7 +227,7 @@ export const Extended: StoryObj<typeof Details> = (() => {
             name="released"
             label="Released"
             as={DateTimeTextField}
-            // modifyTime={false}
+            modifyTime={false}
           />
           <Field
             name="password"