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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.63.0-rc.0",
+  "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": "c111f5f22c27fa1ceaff19826888a61590b80651"
+  "gitHead": "1138af3f812dff3185f92de01ef6104640711bc8"
 }

package/src/components/Accordion/Accordion.stories.tsx

@@ -5,6 +5,7 @@ import { default as React, ReactNode, useEffect, useState } from 'react';
 import { createGroups, generateItemArray } from '../../helpers/storybook';
 import { TextButton } from '../Buttons/TextButton/TextButton';
 import { Divider } from '../FormElements';
+import { List } from '../List';
 import { Accordion } from './Accordion';
 import { AccordionItem } from './AccordionItem/AccordionItem';
 
@@ -17,12 +18,13 @@ const groups = createGroups({
 const generateItems = (
   startIndex?: number,
   sticky?: boolean,
+  children?: JSX.Element,
 ): JSX.Element[] => {
   return generateItemArray(10, (index) => {
     const key = index + (startIndex ?? 1);
     return (
       <AccordionItem key={key} header={<b>Item {key}</b>} sticky={sticky}>
-        <p>{faker.lorem.paragraph(20)}</p>
+        {children ?? <p>{faker.lorem.paragraph(20)}</p>}
       </AccordionItem>
     );
   });
@@ -56,7 +58,7 @@ export const Default: StoryObj<typeof Accordion> = {
   render: (args) => <Accordion {...args} header={<b>{args.header}</b>} />,
   args: {
     children: generateItems(),
-    header: 'Header' as any,
+    header: 'Header' as unknown as JSX.Element,
   },
   name: 'Default',
 };
@@ -103,3 +105,43 @@ export const AddingAndShuffling: StoryObj<typeof Accordion> = {
   },
   name: 'Adding and shuffling',
 };
+
+export const NestedSticky: StoryObj<typeof Accordion> = {
+  args: {
+    ...Default.args,
+    children: generateItems(
+      1,
+      true,
+      <div style={{ height: '350px' }}>
+        <List
+          columns={[
+            {
+              propertyName: 'id',
+              label: 'Id',
+              size: '50px',
+            },
+            {
+              propertyName: 'title',
+              label: 'Title',
+            },
+            {
+              propertyName: 'desc',
+              label: 'Description',
+            },
+          ]}
+          data={generateItemArray(10, (index) => ({
+            id: index + 1,
+            desc: `Description ${index + 1}: ${faker.lorem.words(
+              faker.datatype.number({ min: 10, max: 50 }),
+            )}`,
+            title: `Item ${index + 1}: ${faker.random.words(
+              faker.datatype.number({ min: 1, max: 3 }),
+            )}`,
+          }))}
+        />
+      </div>,
+    ),
+    stickyRows: true,
+  },
+  name: 'Nested Sticky',
+};

package/src/components/Accordion/AccordionItem/AccordionItem.scss

@@ -23,6 +23,7 @@
   }
 
   &.sticky {
+    z-index: 1;
     position: sticky;
     top: 50px;
   }

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"