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

package/src/components/Explorer/BulkEdit/FormFieldsConfigConverter.tsx

@@ -1,5 +1,7 @@
-import { Field } from 'formik';
-import React from 'react';
+import { Field, useFormikContext } from 'formik';
+import React, { useEffect, useMemo } from 'react';
+import { Data } from '../../../types';
+import { FieldSelection } from '../../FieldSelection';
 import {
   CheckboxField,
   CustomTagsField,
@@ -17,29 +19,101 @@ export const defaultComponentMap = {
 export const BulkEditFormFieldsConfigConverter = (
   config: BulkEditFieldConfigMap,
   componentMap: Record<string, React.ElementType> = defaultComponentMap,
-): JSX.Element[] => {
+): JSX.Element => {
   const keys = Object.keys(config);
 
-  return keys
-    .map((key) => {
-      const fieldConfig = config[key];
+  const FormFields: React.FC = () => {
+    const {
+      setFieldValue,
+      setFieldTouched,
+      setErrors,
+      errors,
+      validateForm,
+      values,
+    } = useFormikContext<Data>();
 
-      // Determine the type of the field
-      const fieldType = Array.isArray(fieldConfig.type)
-        ? 'Array' // Use 'Array' as the key for array types
-        : fieldConfig.type;
+    const onFieldRemoved = (field: string): void => {
+      setFieldValue(field, undefined, false); // Clear the field value when removed
+      setFieldTouched(field, false, false); // Mark the field as not touched
 
-      const Component = componentMap[fieldType as keyof typeof componentMap];
+      if (errors[field]) {
+        // If there was an error for this field, clear it
+        const newErrors = { ...errors };
+        delete newErrors[field];
 
-      if (!Component) {
-        // eslint-disable-next-line no-console
-        console.warn(`No component found for field type: ${fieldType}`);
-        return null; // Filter out null entries later
+        setErrors(newErrors);
+
+        validateForm();
       }
+    };
+
+    // Effect to clear empty fields
+    // This will set fields with empty strings or empty arrays to undefined
+    useEffect(() => {
+      values &&
+        Object.keys(values).forEach((key) => {
+          if (values[key] === '' || values[key].length === 0) {
+            setFieldValue(key, undefined);
+          }
+        });
+    }, [setFieldValue, values]);
+
+    const onFieldAdded = (field: string): void => {
+      setFieldTouched(field, true); // Mark the field as touched when added
+    };
+
+    const fields = useMemo(
+      () =>
+        keys
+          .map((key) => {
+            const fieldConfig = config[key];
+
+            // Determine the type of the field
+            const fieldType = Array.isArray(fieldConfig.type)
+              ? 'Array' // Use 'Array' as the key for array types
+              : fieldConfig.type;
+
+            const Component =
+              componentMap[fieldType as keyof typeof componentMap];
+
+            if (!Component) {
+              // eslint-disable-next-line no-console
+              console.warn(`No component found for field type: ${fieldType}`);
+              return null; // Filter out null entries later
+            }
+
+            return (
+              <Field
+                name={key}
+                key={key}
+                label={fieldConfig.label}
+                validate={(value: unknown) => {
+                  if (fieldType === 'Array') {
+                    // Array can be empty, so no validation needed
+                    return;
+                  }
+                  if (value === null || value === undefined || value === '') {
+                    return 'This field is required';
+                  }
+                }}
+                autoFocus={true}
+                as={Component}
+              />
+            );
+          })
+          .filter((element): element is JSX.Element => element !== null),
+      [],
+    );
+
+    return (
+      <FieldSelection
+        onFieldRemoved={onFieldRemoved}
+        onFieldAdded={onFieldAdded}
+      >
+        {fields}
+      </FieldSelection>
+    );
+  };
 
-      return (
-        <Field name={key} key={key} label={fieldConfig.label} as={Component} />
-      );
-    })
-    .filter((element): element is JSX.Element => element !== null);
+  return <FormFields />;
 };

package/src/components/Explorer/BulkEdit/useBulkEdit.tsx

@@ -6,7 +6,6 @@ import React, {
   useState,
 } from 'react';
 import { Data } from '../../../types';
-import { FieldSelection } from '../../FieldSelection';
 import { FormStation } from '../../FormStation';
 import { IconName } from '../../Icons';
 import {
@@ -74,8 +73,9 @@ export const useBulkEdit = <T extends Data>({
     () =>
       bulkEditRegistration
         ? {
-            label: bulkEditRegistration.label,
+            label: bulkEditRegistration.label ?? 'Bulk Edit',
             icon: bulkEditRegistration.icon ?? IconName.BulkEdit,
+            tag: 'BETA',
             onClick: () => setIsBulkEditMode((prev) => !prev),
           }
         : undefined,
@@ -93,12 +93,8 @@ export const useBulkEdit = <T extends Data>({
     if (bulkEditRegistration?.component) {
       return bulkEditRegistration.component;
     } else if (bulkEditRegistration?.config) {
-      return (
-        <FieldSelection>
-          {BulkEditFormFieldsConfigConverter(
-            bulkEditRegistration?.config.fields,
-          )}
-        </FieldSelection>
+      return BulkEditFormFieldsConfigConverter(
+        bulkEditRegistration?.config.fields,
       );
     }
     return null;
@@ -116,6 +112,8 @@ export const useBulkEdit = <T extends Data>({
             : undefined
         }
         showSaveHeaderAction={!noItemsSelected}
+        saveHeaderActionConfig={{ label: 'Apply', icon: IconName.Checkmark }}
+        saveNotificationMessage="Your changes are being applied to the selected items."
       >
         {BulkEditContent}
       </FormStation>

package/src/components/Explorer/Explorer.model.ts

@@ -127,7 +127,7 @@ export interface QuickEditRegistration<T> {
 
 export interface BulkEditRegistration<T extends Data> {
   /** The label of the action. */
-  label: string;
+  label?: string;
   /** Optional built in icon. This prop also accepts an img src. */
   icon?: IconName | string;
   /** Component to render. This will override the component that is generated. */

package/src/components/Explorer/Explorer.tsx

@@ -487,6 +487,7 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
             onItemSelected={itemSelectedHandler}
             onRequestMoreData={onRequestMoreData}
             onSortChanged={(sortData: SortData<T>) => {
+              listRef.current?.resetSelection();
               onSortChanged(sortData);
               setSortOrder(sortData);
             }}

package/src/components/Explorer/helpers/useActions.ts

@@ -63,6 +63,7 @@ export const useActions = <T extends Data>({
 }: UseActionsProps<T>): UseActionsReturnType => {
   const bulkActionItems: PageHeaderJsActionProps[] = useMemo(
     () => [
+      ...(bulkEditAction ? [bulkEditAction] : []),
       ...(bulkActions ?? []).map((action) => ({
         ...action,
         onClick: async () => {
@@ -101,7 +102,6 @@ export const useActions = <T extends Data>({
           }
         },
       })),
-      ...(bulkEditAction ? [bulkEditAction] : []),
     ],
     [
       bulkActions,

package/src/components/FieldSelection/FieldSelection.scss

@@ -5,6 +5,13 @@
   grid-template-columns: 1fr 50px;
   gap: 10px;
   align-items: center;
+}
+
+.selectionHeader {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 10px;
+  align-items: center;
 
   div:has(> input) {
     padding: 2px;

package/src/components/FieldSelection/FieldSelection.spec.tsx

@@ -34,7 +34,6 @@ describe('FieldSelection', () => {
       target: { value: 'field1' },
     });
     fireEvent.click(screen.getByText('Field 1'));
-    fireEvent.click(screen.getByTestId('add-field-button'));
 
     expect(screen.getByTestId('field-field1')).toBeInTheDocument();
   });
@@ -51,7 +50,6 @@ describe('FieldSelection', () => {
       target: { value: 'field1' },
     });
     fireEvent.click(screen.getByText('Field 1'));
-    fireEvent.click(screen.getByTestId('add-field-button'));
 
     expect(screen.getByTestId('field-field1')).toBeInTheDocument();
 

package/src/components/FieldSelection/FieldSelection.tsx

@@ -1,4 +1,5 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useEffect } from 'react';
+import { noop } from '../../helpers/utils';
 import { Accordion, AccordionItem } from '../Accordion';
 import { Button, ButtonContext } from '../Buttons';
 import { Select } from '../FormElements';
@@ -8,6 +9,8 @@ import classes from './FieldSelection.scss';
 
 interface FieldSelectionProps {
   className?: string;
+  onFieldAdded?: (field: string) => void;
+  onFieldRemoved?: (field: string) => void;
 }
 
 interface FieldDefinition {
@@ -19,6 +22,8 @@ interface FieldDefinition {
 
 export const FieldSelection: React.FC<FieldSelectionProps> = ({
   className,
+  onFieldAdded = noop,
+  onFieldRemoved = noop,
   children,
 }) => {
   useEffect(() => {
@@ -70,14 +75,15 @@ export const FieldSelection: React.FC<FieldSelectionProps> = ({
                 ...currentFields,
                 newField,
               ]);
+              onFieldAdded(newField.value);
             }
           }}
         />
       }
     >
-      {selectedFields.map((field, i) => (
+      {selectedFields.map((field) => (
         <AccordionItem
-          key={i}
+          key={field.value}
           header={
             <FieldSelectionItemHeader
               label={field.label as string}
@@ -88,6 +94,7 @@ export const FieldSelection: React.FC<FieldSelectionProps> = ({
                 setAvailableFields((currentFields) =>
                   [...currentFields, field].sort((a, b) => a.index - b.index),
                 );
+                onFieldRemoved(field.value);
               }}
             />
           }
@@ -105,7 +112,7 @@ const FieldSelectionHeader: React.FC<{
 }> = ({ fields, onAddField }) => {
   const [value, setValue] = React.useState<string>();
 
-  const handleButtonClicked = useCallback(() => {
+  useEffect(() => {
     if (value) {
       onAddField(value);
       setValue(undefined);
@@ -113,22 +120,17 @@ const FieldSelectionHeader: React.FC<{
   }, [onAddField, value]);
 
   return (
-    <div className={classes.header}>
+    <div className={classes.selectionHeader}>
       <Select
         label="Field"
         name="field"
         placeholder="Select Field"
         options={fields}
+        disabled={fields.length === 0}
         inlineMode={true}
         onChange={(e) => setValue(e.currentTarget.value)}
         value={value}
       />
-      <Button
-        icon={IconName.Plus}
-        buttonContext={value ? ButtonContext.Active : ButtonContext.Icon}
-        onButtonClicked={handleButtonClicked}
-        dataTestId="add-field-button"
-      />
     </div>
   );
 };

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"

package/src/components/FormStation/FormStation.tsx

@@ -5,6 +5,7 @@ import { OptionalObjectSchema } from 'yup/lib/object';
 import { Data } from '../../types/data';
 import { BulkEditContext } from '../Explorer/BulkEdit/BulkEditContext';
 import { QuickEditContext } from '../Explorer/QuickEdit/QuickEditContext';
+import { PageHeaderJsActionProps } from '../PageHeader/PageHeaderAction';
 import { StationMessage } from '../models';
 import {
   FormActionData,
@@ -39,6 +40,16 @@ export interface FormStationProps<
   actionsWidth?: string;
   /** If set to true, the save header action is shown. (default: true) */
   showSaveHeaderAction?: boolean;
+  /**
+   * Optional configuration for the save header action button.
+   * Allows customizing the label and icon.
+   */
+  saveHeaderActionConfig?: Pick<PageHeaderJsActionProps, 'label' | 'icon'>;
+  /**
+   * If set, this will override the default notification message shown
+   * after a successful save.
+   */
+  saveNotificationMessage?: string;
   /**
    * An object containing the initial data of the form.
    */
@@ -91,6 +102,8 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
   className = '',
   setTabTitle = true,
   showSaveHeaderAction = true,
+  saveHeaderActionConfig,
+  saveNotificationMessage,
 }: PropsWithChildren<
   FormStationProps<TValues, TSubmitResponse>
 >): JSX.Element => {
@@ -103,7 +116,7 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
     setStationError,
     isFormSubmitting,
     lastSubmittedResponse,
-  } = useDataProvider(initialData, saveData);
+  } = useDataProvider(initialData, saveData, saveNotificationMessage);
 
   const { setValidationError, validationWatcher } = useValidationError(
     stationError,
@@ -137,6 +150,8 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
             className={classes.header}
             setTabTitle={setTabTitle}
             showSaveHeaderAction={showSaveHeaderAction}
+            saveHeaderActionConfig={saveHeaderActionConfig}
+            setValidationError={setValidationError}
           />
           {!bulkEditContext && (
             <SaveOnNavigate

package/src/components/FormStation/FormStationHeader/FormStationHeader.tsx

@@ -10,6 +10,7 @@ import {
   PageHeaderActionType,
   PageHeaderProps,
 } from '../../PageHeader';
+import { PageHeaderJsActionProps } from '../../PageHeader/PageHeaderAction';
 import { useTitle } from '../helpers/useTitle';
 
 /**
@@ -22,6 +23,8 @@ export const FormStationHeader: React.FC<
     cancelNavigationUrl?: string;
     setTabTitle?: boolean;
     showSaveHeaderAction?: boolean;
+    saveHeaderActionConfig?: Pick<PageHeaderJsActionProps, 'label' | 'icon'>;
+    setValidationError: () => void;
   }
 > = ({
   titleProperty,
@@ -31,8 +34,14 @@ export const FormStationHeader: React.FC<
   className,
   setTabTitle,
   showSaveHeaderAction,
+  saveHeaderActionConfig = {
+    label: 'Save',
+    icon: IconName.Save,
+  },
+  setValidationError,
 }) => {
-  const { dirty, submitForm, resetForm } = useFormikContext<FormikValues>();
+  const { dirty, submitForm, resetForm, isValid } =
+    useFormikContext<FormikValues>();
   const quickEditContext = useContext(QuickEditContext);
   const bulkEditContext = useContext(BulkEditContext);
 
@@ -56,14 +65,18 @@ export const FormStationHeader: React.FC<
 
       if (showSaveHeaderAction) {
         actionItems.push({
-          label: 'Save',
-          icon: IconName.Save,
+          label: saveHeaderActionConfig.label,
+          icon: saveHeaderActionConfig.icon,
           kind: 'action',
           actionType: PageHeaderActionType.Context,
           onClick: async () => {
             if (quickEditContext?.isQuickEditMode) {
               quickEditContext.refresh();
             } else if (bulkEditContext?.isBulkEditMode) {
+              if (!isValid) {
+                setValidationError();
+                return;
+              }
               await submitForm();
               history.replace(history.location.pathname);
             } else {
@@ -114,8 +127,12 @@ export const FormStationHeader: React.FC<
     cancelNavigationUrl,
     dirty,
     history,
+    isValid,
     quickEditContext,
     resetForm,
+    saveHeaderActionConfig.icon,
+    saveHeaderActionConfig.label,
+    setValidationError,
     showSaveHeaderAction,
     submitForm,
   ]);

package/src/components/FormStation/helpers/useDataProvider.ts

@@ -20,6 +20,7 @@ import {
 export type FormStationDataProvider = <TValues extends Data, TSubmitResponse>(
   initialData: InitialFormData<TValues>,
   saveData: SaveDataFunction<TValues, TSubmitResponse>,
+  saveNotificationMessage?: string,
 ) => {
   onSubmit: (
     values: TValues,
@@ -38,6 +39,7 @@ export const useDataProvider: FormStationDataProvider = <
 >(
   initialData: InitialFormData<TValues>,
   saveData: SaveDataFunction<TValues, TSubmitResponse>,
+  saveNotificationMessage?: string,
 ) => {
   const [stationError, setStationError] = useState<StationErrorStateType>();
   const [isFormSubmitting, setIsFormSubmitting] = useState<boolean>(false);
@@ -92,7 +94,9 @@ export const useDataProvider: FormStationDataProvider = <
           }
 
           showNotification({
-            title: 'Your changes were saved successfully.',
+            title:
+              saveNotificationMessage ??
+              'Your changes were saved successfully.',
             options: {
               type: 'success',
               autoClose: 1500,
@@ -115,7 +119,7 @@ export const useDataProvider: FormStationDataProvider = <
         setIsFormSubmitting(false);
       }
     },
-    [isFormSubmitting, initialData, saveData, setStationError],
+    [isFormSubmitting, initialData, saveData, saveNotificationMessage],
   );
 
   return {

package/src/components/Icons/Icons.models.ts

@@ -56,4 +56,5 @@ export enum IconName {
   Video,
   Warning,
   X,
+  Axi,
 }

package/src/components/Icons/Icons.tsx

@@ -10,6 +10,22 @@ export interface IconsProps {
   className?: string;
 }
 
+const AxiIcon: React.FC<{ className?: string }> = ({ className }) => (
+  <svg
+    className={clsx(classes.icons, className)}
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 40 40"
+  >
+    <path
+      vectorEffect="non-scaling-stroke"
+      fill="none"
+      strokeWidth="2"
+      d="M24.3,36h-8.5c-5,0-9.1-4.1-9.1-9.1v-5.3c0-5,4.1-9.1,9.1-9.1h8.5c5,0,9.1,4.1,9.1,9.1v5.3c0,5-4.1,9.1-9.1,9.1ZM6.8,20.4h-.9c-1.3,0-2.3,1.1-2.3,2.3v3c0,1.3,1.1,2.3,2.3,2.3h.9M33.3,28.2h.9c1.3,0,2.3-1.1,2.3-2.3v-3c0-1.3-1.1-2.3-2.3-2.3h-.9M14.1,20.4c-1.4,0-2.5,1.1-2.5,2.5s1.1,2.5,2.5,2.5,2.5-1.1,2.5-2.5-1.1-2.5-2.5-2.5ZM19.7,4c-1.4,0-2.5,1.1-2.5,2.5s1.1,2.5,2.5,2.5,2.5-1.1,2.5-2.5-1.1-2.5-2.5-2.5ZM25.9,20.4c-1.4,0-2.5,1.1-2.5,2.5s1.1,2.5,2.5,2.5,2.5-1.1,2.5-2.5-1.1-2.5-2.5-2.5ZM19.7,9v3.5M16.1,30.2h7.8"
+    />
+  </svg>
+);
+
 const ArchiveIcon: React.FC<{ className?: string }> = ({ className }) => (
   <svg
     className={clsx(classes.icons, className)}
@@ -924,6 +940,7 @@ const XIcon: React.FC<{ className?: string }> = ({ className }) => (
  */
 export const Icons: React.FC<IconsProps> = ({ icon, className }) => {
   const icons: { [key in IconName]: JSX.Element } = {
+    [IconName.Axi]: <AxiIcon className={className} />,
     [IconName.Archive]: <ArchiveIcon className={className} />,
     [IconName.Audio]: <AudioIcon className={className} />,
     [IconName.DescriptiveAudio]: <DescriptiveAudioIcon className={className} />,