@axinom/mosaic-ui 0.43.0-rc.9 → 0.43.1

package/dist/initialize.d.ts

@@ -9,6 +9,7 @@ export declare let addIndicator: AddIndicator | (() => void);
 export declare let removeIndicator: RemoveIndicator | (() => void);
 export declare let on: CustomEventEmitter['on'] | (() => void);
 export declare let setSaveIndicator: (type: SaveIndicatorType) => void;
+export declare let setTitle: (title?: string) => void;
 /**
  * Passes the PiralApi methods to the UI library.
  * @param app {UiConfig} object containing PiralApi methods for use in UI library.
@@ -20,5 +21,6 @@ export interface UiConfig {
     removeIndicator: RemoveIndicator;
     on: CustomEventEmitter['on'];
     setSaveIndicator: (type: SaveIndicatorType) => void;
+    setTitle: (title?: string) => void;
 }
 //# sourceMappingURL=initialize.d.ts.map

package/dist/initialize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"initialize.d.ts","sourceRoot":"","sources":["../src/initialize.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EACjB,MAAM,mBAAmB,CAAC;AAE3B,oBAAY,iBAAiB;IAC3B,MAAM,WAAW;IACjB,QAAQ,aAAa;IACrB,KAAK,UAAU;CAChB;AAED,eAAO,IAAI,gBAAgB,EAAE,gBAAgB,GAAG,CAAC,MAAM,IAAI,CAC7B,CAAC;AAE/B,eAAO,IAAI,YAAY,EAAE,YAAY,GAAG,CAAC,MAAM,IAAI,CAA4B,CAAC;AAEhF,eAAO,IAAI,eAAe,EAAE,eAAe,GAAG,CAAC,MAAM,IAAI,CAC5B,CAAC;AAE9B,eAAO,IAAI,EAAE,EAAE,kBAAkB,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,IAAI,CAAkB,CAAC;AAExE,eAAO,IAAI,gBAAgB,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAC5B,CAAC;AAE/B;;;GAGG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,QAAQ,GAAG,IAAI,CAQhD;AAED,MAAM,WAAW,QAAQ;IACvB,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,YAAY,EAAE,YAAY,CAAC;IAC3B,eAAe,EAAE,eAAe,CAAC;IACjC,EAAE,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAC7B,gBAAgB,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;CACrD"}
+{"version":3,"file":"initialize.d.ts","sourceRoot":"","sources":["../src/initialize.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EACjB,MAAM,mBAAmB,CAAC;AAE3B,oBAAY,iBAAiB;IAC3B,MAAM,WAAW;IACjB,QAAQ,aAAa;IACrB,KAAK,UAAU;CAChB;AAED,eAAO,IAAI,gBAAgB,EAAE,gBAAgB,GAAG,CAAC,MAAM,IAAI,CAC7B,CAAC;AAE/B,eAAO,IAAI,YAAY,EAAE,YAAY,GAAG,CAAC,MAAM,IAAI,CAA4B,CAAC;AAEhF,eAAO,IAAI,eAAe,EAAE,eAAe,GAAG,CAAC,MAAM,IAAI,CAC5B,CAAC;AAE9B,eAAO,IAAI,EAAE,EAAE,kBAAkB,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,IAAI,CAAkB,CAAC;AAExE,eAAO,IAAI,gBAAgB,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAC5B,CAAC;AAE/B,eAAO,IAAI,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAA2B,CAAC;AAErE;;;GAGG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,QAAQ,GAAG,IAAI,CAShD;AAED,MAAM,WAAW,QAAQ;IACvB,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,YAAY,EAAE,YAAY,CAAC;IAC3B,eAAe,EAAE,eAAe,CAAC;IACjC,EAAE,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAC7B,gBAAgB,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACpD,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.43.0-rc.9",
+  "version": "0.43.1",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -32,7 +32,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@axinom/mosaic-core": "^0.4.16-rc.9",
+    "@axinom/mosaic-core": "^0.4.16",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.11.8",
     "clsx": "^1.1.0",
@@ -105,5 +105,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ab964b4541c49ea5b84693de4d2a2c809dbb0f51"
+  "gitHead": "6df139c63de76d40be27d5a49ec2f159c15657dd"
 }

package/src/components/EmptyStation/EmptyStation.spec.tsx

@@ -1,10 +1,12 @@
 import { mount, shallow } from 'enzyme';
 import React from 'react';
 import { MessageBar } from '../MessageBar';
-import { StationError } from '../models';
 import { PageHeader } from '../PageHeader';
+import { StationError } from '../models';
 import { EmptyStation, EmptyStationProps } from './EmptyStation';
 
+jest.mock('../../hooks/useTabTitle/useTabTitle');
+
 describe('EmptyStation', () => {
   const defaultProps: EmptyStationProps = {
     title: 'test-title',

package/src/components/EmptyStation/EmptyStation.stories.tsx

@@ -13,6 +13,7 @@ const groups = createGroups({
     'bulkActionsDisabled',
     'openBulkActionsOnStart',
     'onBulkActionsToggled',
+    'setTabTitle',
   ],
   Content: [
     'title',

package/src/components/Explorer/Explorer.spec.tsx

@@ -34,6 +34,8 @@ import {
 } from './Explorer.model';
 import { StationMessage } from './useStationMessage';
 
+jest.mock('../../hooks/useTabTitle/useTabTitle');
+
 interface ExplorerTestData {
   id: number;
   title: string;

package/src/components/Explorer/Explorer.stories.tsx

@@ -54,6 +54,7 @@ const groups = createGroups({
     'onItemClicked',
     'openBulkActionsOnStart',
     'persistExplorerStates',
+    'setTabTitle',
   ],
   Styling: [
     'className',
@@ -251,6 +252,9 @@ initializeUi({
   on: (event, callback) => {
     action('on')(event, callback);
   },
+  setTitle: (args) => {
+    action('setTitle')(args);
+  },
 });
 
 export const ActionErrors: StoryObj<ExplorerStoryType> = {

package/src/components/Explorer/Explorer.tsx

@@ -124,6 +124,9 @@ export interface ExplorerProps<T extends Data> {
   /** Sets the default sort order for the Explorer. (default: undefined) */
   defaultSortOrder?: SortData<T>;
 
+  /** Update the tab title using the 'title' field. (default: true) */
+  setTabTitle?: boolean;
+
   /**
    * When set, this function is used to generate the link that the user should be navigated to for each item.
    *
@@ -196,6 +199,7 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
     className = '',
 
     defaultSortOrder,
+    setTabTitle = true,
 
     onItemClicked,
     onBulkActionsToggled = noop,
@@ -423,6 +427,7 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
           setIsBulkOpen(isOpen);
           onBulkActionsToggled(isOpen);
         }}
+        setTabTitle={setTabTitle}
       />
       {StationMessage}
       <Filters<T>

package/src/components/Explorer/NavigationExplorer/NavigationExplorer.spec.tsx

@@ -12,6 +12,8 @@ import { Explorer } from '../Explorer';
 import { ExplorerDataProvider } from '../Explorer.model';
 import { NavigationExplorer } from './NavigationExplorer';
 
+jest.mock('../../../hooks/useTabTitle/useTabTitle');
+
 interface NavExplorerTestData {
   id: string;
   desc: string;

package/src/components/Explorer/NavigationExplorer/NavigationExplorer.tsx

@@ -9,7 +9,7 @@ import { ExplorerDataProviderConnection } from '../Explorer.model';
 export interface NavigationExplorerProps<T extends Data>
   extends Omit<
     ExplorerProps<T>,
-    'selectionMode' | 'onBulkActionsToggled' | 'onItemClicked'
+    'selectionMode' | 'onBulkActionsToggled' | 'onItemClicked' | 'setTabTitle'
   > {
   /**
    * - If a `LocationDescriptor` is provided, it will be treated as a path to the station to
@@ -54,6 +54,7 @@ export const NavigationExplorer = React.forwardRef(function NavigationExplorer<
     <Explorer<T>
       {...rest}
       ref={ref}
+      setTabTitle={true}
       actions={[
         ...actions,
         ...(onCreateAction && typeof onCreateAction !== 'function'

package/src/components/Explorer/SelectionExplorer/SelectionExplorer.spec.tsx

@@ -11,6 +11,8 @@ import { Explorer } from '../Explorer';
 import { ExplorerDataProvider } from '../Explorer.model';
 import { SelectionExplorer } from './SelectionExplorer';
 
+jest.mock('../../../hooks/useTabTitle/useTabTitle');
+
 interface SelectExplorerTestData {
   id: string;
   desc: string;

package/src/components/Explorer/SelectionExplorer/SelectionExplorer.tsx

@@ -15,7 +15,11 @@ import {
 export interface SelectionExplorerProps<T extends Data>
   extends Omit<
     ExplorerProps<T>,
-    'selectionMode' | 'onItemClicked' | 'onBulkActionsToggled' | 'bulkActions'
+    | 'selectionMode'
+    | 'onItemClicked'
+    | 'onBulkActionsToggled'
+    | 'bulkActions'
+    | 'setTabTitle'
   > {
   /** Whether or not the selection of multiple items is allowed (default: false) */
   allowBulkSelect?: boolean;
@@ -79,6 +83,7 @@ export const SelectionExplorer = React.forwardRef(function SelectionExplorer<
       {...rest}
       ref={ref}
       modalMode={modalMode}
+      setTabTitle={false}
       bulkActions={[
         ...(allowBulkSelect
           ? [

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

@@ -13,7 +13,7 @@ import {
   TagsField,
 } from '../../FormElements';
 import { FileUploadField } from '../../FormElements/FileUploadControl/FileUploadField';
-import { ObjectSchemaDefinition } from '../FormStation';
+import { ObjectSchemaDefinition } from '../FormStation.models';
 import { Create } from './Create';
 
 interface CreateValues {

package/src/components/FormStation/FormStation.spec.tsx

@@ -10,7 +10,8 @@ import { ActionData, Actions } from '../Actions';
 import { Action } from '../Actions/Action';
 import { MessageBar } from '../MessageBar/MessageBar';
 import { PageHeader, PageHeaderAction } from '../PageHeader';
-import { FormStation, ObjectSchemaDefinition } from './FormStation';
+import { FormStation } from './FormStation';
+import { ObjectSchemaDefinition } from './FormStation.models';
 import { SaveOnNavigate } from './SaveOnNavigate/SaveOnNavigate';
 
 jest.mock('../../initialize');

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

@@ -47,6 +47,7 @@ const groups = createGroups({
     'alwaysShowActionsPanel',
     'alwaysSubmitBeforeAction',
     'edgeToEdgeContent',
+    'setTabTitle',
   ],
   Styling: ['actionsWidth', 'className'],
 });

package/src/components/FormStation/FormStation.tsx

@@ -56,6 +56,8 @@ export interface FormStationProps<
    * @example stationMessage={{type: 'info', message: 'Informative message.'}}
    */
   stationMessage?: StationMessage;
+  /** Update the tab title using the 'titleProperty' or 'defaultTitle' field. (default: true) */
+  setTabTitle?: boolean;
   /**
    * Called whenever the form needs to be saved.
    * This method needs to throw an exception in case the saving did not succeed.
@@ -82,6 +84,7 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
   alwaysSubmitBeforeAction = false,
   stationMessage,
   className = '',
+  setTabTitle = true,
 }: PropsWithChildren<
   FormStationProps<TValues, TSubmitResponse>
 >): JSX.Element => {
@@ -123,6 +126,7 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
             subtitle={subtitle}
             cancelNavigationUrl={cancelNavigationUrl}
             className={classes.header}
+            setTabTitle={setTabTitle}
           />
           <SaveOnNavigate
             isSubmitting={isFormSubmitting}

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

@@ -8,6 +8,7 @@ import {
   PageHeaderActionType,
   PageHeaderProps,
 } from '../../PageHeader';
+import { useTitle } from '../helpers/useTitle';
 
 /**
  * Handles showRefresh and cancel buttons based on form states
@@ -17,6 +18,7 @@ export const FormStationHeader: React.FC<
     titleProperty?: string;
     defaultTitle?: string;
     cancelNavigationUrl?: string;
+    setTabTitle?: boolean;
   }
 > = ({
   titleProperty,
@@ -24,8 +26,9 @@ export const FormStationHeader: React.FC<
   subtitle,
   cancelNavigationUrl,
   className,
+  setTabTitle,
 }) => {
-  const { dirty, resetForm, values } = useFormikContext<FormikValues>();
+  const { dirty, resetForm } = useFormikContext<FormikValues>();
 
   useEffect(() => {
     // Set the save indicator to dirty depending on the form state
@@ -44,16 +47,14 @@ export const FormStationHeader: React.FC<
 
   const history = useHistory();
 
-  const title =
-    titleProperty && values[titleProperty] !== ''
-      ? values[titleProperty]
-      : defaultTitle ?? '';
+  const title = useTitle(titleProperty, defaultTitle);
 
   return (
     <PageHeader
       title={title}
       subtitle={subtitle}
       className={className}
+      setTabTitle={setTabTitle}
       actions={[
         ...(dirty === true // add undo action if form as been altered
           ? [

package/src/components/FormStation/helpers/useTitle.spec.ts

@@ -0,0 +1,52 @@
+import { useFormikContext } from 'formik';
+import { useTitle } from './useTitle';
+
+jest.mock('formik', () => ({
+  useFormikContext: jest.fn(),
+}));
+
+describe('useTitle', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should return default title when titleProperty is not provided', () => {
+    const defaultTitle = 'Default Title';
+    (useFormikContext as jest.Mock).mockReturnValueOnce({});
+
+    const result = useTitle(undefined, defaultTitle);
+
+    expect(result).toBe(defaultTitle);
+  });
+
+  it('should return title from formik context when titleProperty is provided', () => {
+    const titleProperty = 'title';
+    const titleValue = 'Form Title';
+    (useFormikContext as jest.Mock).mockReturnValueOnce({
+      values: { [titleProperty]: titleValue },
+    });
+
+    const result = useTitle(titleProperty);
+
+    expect(result).toBe(titleValue);
+  });
+
+  it('should return default title when titleProperty is provided but not found in formik context', () => {
+    const titleProperty = 'title';
+    const defaultTitle = 'Default Title';
+    (useFormikContext as jest.Mock).mockReturnValueOnce({ values: {} });
+
+    const result = useTitle(titleProperty, defaultTitle);
+
+    expect(result).toBe(defaultTitle);
+  });
+
+  it('should prepend an * when dirty is true', () => {
+    const defaultTitle = 'Default Title';
+    (useFormikContext as jest.Mock).mockReturnValueOnce({ dirty: true });
+
+    const result = useTitle(undefined, defaultTitle);
+
+    expect(result).toBe(`*${defaultTitle}`);
+  });
+});

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

@@ -0,0 +1,20 @@
+import { useFormikContext } from 'formik';
+import { Data } from '../../../types';
+
+export const useTitle = <TValues extends Data>(
+  titleProperty?: string,
+  defaultTitle?: string,
+): string | undefined => {
+  const { values, dirty } = useFormikContext<TValues>();
+
+  const title: string | undefined =
+    titleProperty && values[titleProperty] !== '' && values[titleProperty]
+      ? values[titleProperty]
+      : defaultTitle ?? '';
+
+  if (dirty) {
+    return `*${title}`;
+  }
+
+  return title;
+};

package/src/components/PageHeader/PageHeader.model.ts

@@ -20,4 +20,6 @@ export interface PageHeaderProps {
   onBulkActionsToggled?: (expanded: boolean) => void;
   /** CSS Class name for additional styles */
   className?: string;
+  /** Update the tab title using the 'title' field. (default: true) */
+  setTabTitle?: boolean;
 }

package/src/components/PageHeader/PageHeader.spec.tsx

@@ -6,6 +6,8 @@ import { PageHeaderAction } from './PageHeaderAction/PageHeaderAction';
 import { PageHeaderActionProps } from './PageHeaderAction/PageHeaderAction.model';
 import { PageHeaderBulkActions } from './PageHeaderBulkActions/PageHeaderBulkActions';
 
+jest.mock('../../hooks/useTabTitle/useTabTitle');
+
 const defaultbulkActions: PageHeaderActionProps[] = [
   {
     label: 'Bulk Action 1',

package/src/components/PageHeader/PageHeader.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { noop } from '../../helpers/utils';
+import { useTabTitle } from '../../hooks/useTabTitle/useTabTitle';
 import { useWindowSize } from '../../hooks/useWindowSize/useWindowSize';
 import { PageHeaderProps } from './PageHeader.model';
 import classes from './PageHeader.scss';
@@ -21,6 +22,7 @@ export const PageHeader: React.FC<PageHeaderProps> = ({
   openBulkActionsOnStart = false,
   onBulkActionsToggled = noop,
   className = '',
+  setTabTitle = true,
 }) => {
   const [containerScrollWidth, setContainerScrollWidth] = useState<number>(0);
   const [childrenScrollWidth, setChildrenScrollWidth] = useState<number>(0);
@@ -39,6 +41,8 @@ export const PageHeader: React.FC<PageHeaderProps> = ({
     }
   };
 
+  useTabTitle(title, setTabTitle);
+
   useEffect(() => {
     // only perform calculation if there are bulkActions
     if (bulkActions.length > 0) {

package/src/hooks/useTabTitle/useTabTitle.spec.tsx

@@ -0,0 +1,84 @@
+import { mount } from 'enzyme';
+import React from 'react';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { useHistory } from 'react-router-dom';
+import { setTitle } from '../../initialize';
+import { useTabTitle } from './useTabTitle';
+
+jest.mock('../../initialize');
+jest.mock('react-router-dom');
+
+const TestWrapper: React.FC<{ title?: string; setTabTitle: boolean }> = ({
+  title,
+  setTabTitle,
+}) => {
+  useTabTitle(title, setTabTitle);
+
+  return null;
+};
+
+describe('useTabTitle', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (useHistory as jest.Mock) = jest.fn().mockReturnValue({
+      location: {
+        pathname: '/test',
+      },
+    });
+  });
+
+  it('should set the tab title when setTabTitle is true', () => {
+    const firstTitle = 'First Title';
+    const secondTitle = 'Second Title';
+
+    const setTabTitle = true;
+
+    const wrapper = mount(
+      <TestWrapper title={firstTitle} setTabTitle={setTabTitle} />,
+    );
+
+    expect(setTitle).toHaveBeenCalledWith(firstTitle);
+
+    wrapper.setProps({ title: secondTitle });
+
+    expect(setTitle).toHaveBeenNthCalledWith(2, secondTitle);
+  });
+
+  it('should not set the tab title when setTabTitle is false', () => {
+    const title = 'Test Title';
+    const setTabTitle = false;
+
+    mount(<TestWrapper title={title} setTabTitle={setTabTitle} />);
+
+    expect(setTitle).not.toHaveBeenCalled();
+  });
+
+  it('should not set the tab title when the URL has changed', () => {
+    (useHistory as jest.Mock) = jest
+      .fn()
+      .mockReturnValueOnce({
+        location: {
+          pathname: '/test',
+        },
+      })
+      .mockReturnValueOnce({
+        location: {
+          pathname: '/test2',
+        },
+      });
+
+    const firstTitle = 'First Title';
+    const secondTitle = 'Second Title';
+    const setTabTitle = true;
+
+    const wrapper = mount(
+      <TestWrapper title={firstTitle} setTabTitle={setTabTitle} />,
+    );
+
+    expect(setTitle).toHaveBeenCalledWith(firstTitle);
+
+    wrapper.setProps({ title: secondTitle });
+
+    expect(setTitle).toHaveBeenCalledTimes(1);
+  });
+});

package/src/hooks/useTabTitle/useTabTitle.tsx

@@ -0,0 +1,15 @@
+import { useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import { setTitle } from '../../initialize';
+
+export const useTabTitle = (
+  title: string | undefined,
+  setTabTitle: boolean | undefined,
+): void => {
+  const { location: currentLocation } = useHistory();
+  const [initialLocation] = useState(currentLocation);
+
+  if (setTabTitle && currentLocation.pathname === initialLocation.pathname) {
+    setTitle(title);
+  }
+};

package/src/initialize.ts

@@ -24,6 +24,8 @@ export let on: CustomEventEmitter['on'] | (() => void) = polyfill('on');
 export let setSaveIndicator: (type: SaveIndicatorType) => void =
   polyfill('setSaveIndicator');
 
+export let setTitle: (title?: string) => void = polyfill('setTitle');
+
 /**
  * Passes the PiralApi methods to the UI library.
  * @param app {UiConfig} object containing PiralApi methods for use in UI library.
@@ -35,6 +37,7 @@ export function initializeUi(app: UiConfig): void {
     removeIndicator = polyfill('removeIndicator'),
     on = polyfill('on'),
     setSaveIndicator = polyfill('setSaveIndicator'),
+    setTitle = polyfill('setTitle'),
   } = app);
 }
 
@@ -44,6 +47,7 @@ export interface UiConfig {
   removeIndicator: RemoveIndicator;
   on: CustomEventEmitter['on'];
   setSaveIndicator: (type: SaveIndicatorType) => void;
+  setTitle: (title?: string) => void;
 }
 
 function polyfill(methodName: string): () => void {