@axinom/mosaic-ui 0.44.0-rc.1 → 0.44.0-rc.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.44.0-rc.1",
+  "version": "0.44.0-rc.10",
   "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.17-rc.1",
+    "@axinom/mosaic-core": "^0.4.17-rc.10",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.11.8",
     "clsx": "^1.1.0",
@@ -105,5 +105,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a59e7ea3b1d1ee3427e6553c097ae6e29df14353"
+  "gitHead": "996702d66aaab62214cb3db5f20966918e6b1007"
 }

package/src/components/DateTime/DatePicker/Calendar.scss

@@ -1,91 +0,0 @@
-/** Default Styles from the Calendar Library */
-:global(.react-calendar) {
-  max-width: 100%;
-  background: white;
-}
-:global(.react-calendar--doubleView .react-calendar__viewContainer) {
-  display: flex;
-  margin: -0.5em;
-}
-:global(.react-calendar--doubleView .react-calendar__viewContainer) > * {
-  width: 50%;
-  margin: 0.5em;
-}
-:global(.react-calendar),
-:global(.react-calendar) *,
-:global(.react-calendar) *:before,
-:global(.react-calendar) *:after {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-:global(.react-calendar) button {
-  margin: 0;
-  border: 0;
-  outline: none;
-}
-:global(.react-calendar) button:enabled:hover {
-  cursor: pointer;
-}
-:global(.react-calendar__navigation) button[disabled] {
-  background-color: #f0f0f0;
-}
-:global(.react-calendar__month-view__weekdays) {
-  text-align: center;
-  text-transform: uppercase;
-  font-weight: bold;
-  // font-size: 0.75em;
-}
-:global(.react-calendar__month-view__weekdays__weekday) {
-  font-size: 18px;
-  padding: 8px;
-}
-:global(.react-calendar__month-view__weekNumbers) {
-  font-weight: bold;
-}
-:global(.react-calendar__month-view__weekNumbers .react-calendar__tile) {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.75em;
-  padding: calc(0.75em / 0.75) calc(0.5em / 0.75);
-}
-:global(.react-calendar__month-view__days__day--neighboringMonth) {
-  color: #757575;
-}
-:global(.react-calendar__year-view) :global(.react-calendar__tile),
-:global(.react-calendar__decade-view) :global(.react-calendar__tile),
-:global(.react-calendar__century-view) :global(.react-calendar__tile) {
-  padding: 2em 0.5em;
-}
-:global(.react-calendar__tile) {
-  max-width: 100%;
-  text-align: center;
-  padding: 0.5em 0.5em;
-  font-size: 16px;
-  background: none;
-}
-:global(.react-calendar__tile):disabled {
-  background-color: #f0f0f0;
-}
-:global(.react-calendar__tile):enabled:hover {
-  background-color: #e6e6e6;
-}
-:global(.react-calendar__tile--hasActive) {
-  background: #76baff;
-}
-:global(.react-calendar__tile--hasActive):enabled:hover,
-:global(.react-calendar__tile--hasActive):enabled:focus {
-  background: #a9d4ff;
-}
-:global(.react-calendar__tile--active) {
-  background: #006edc;
-  color: white;
-}
-:global(.react-calendar__tile--active):enabled:hover,
-:global(.react-calendar__tile--active):enabled:focus {
-  background: #1087ff;
-}
-:global(.react-calendar--selectRange) :global(.react-calendar__tile--hover) {
-  background-color: #e6e6e6;
-}

package/src/components/DateTime/DatePicker/DatePicker.scss

@@ -6,6 +6,98 @@
   width: 325px;
   border: none;
 
+  /** Default Styles from the Calendar Library */
+  &:global(.react-calendar) {
+    max-width: 100%;
+    background: white;
+  }
+  :global(.react-calendar--doubleView .react-calendar__viewContainer) {
+    display: flex;
+    margin: -0.5em;
+  }
+  :global(.react-calendar--doubleView .react-calendar__viewContainer) > * {
+    width: 50%;
+    margin: 0.5em;
+  }
+  &:global(.react-calendar),
+  &:global(.react-calendar) *,
+  &:global(.react-calendar) *:before,
+  &:global(.react-calendar) *:after {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+  &:global(.react-calendar) button {
+    margin: 0;
+    border: 0;
+    outline: none;
+  }
+  &:global(.react-calendar) button:enabled:hover {
+    cursor: pointer;
+  }
+  :global(.react-calendar__navigation) button[disabled] {
+    background-color: #f0f0f0;
+  }
+  :global(.react-calendar__month-view__weekdays) {
+    text-align: center;
+    text-transform: uppercase;
+    font-weight: bold;
+    // font-size: 0.75em;
+  }
+  :global(.react-calendar__month-view__weekdays__weekday) {
+    font-size: 18px;
+    padding: 8px;
+  }
+  :global(.react-calendar__month-view__weekNumbers) {
+    font-weight: bold;
+  }
+  :global(.react-calendar__month-view__weekNumbers .react-calendar__tile) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.75em;
+    padding: calc(0.75em / 0.75) calc(0.5em / 0.75);
+  }
+  :global(.react-calendar__month-view__days__day--neighboringMonth) {
+    color: #757575;
+  }
+  :global(.react-calendar__year-view) :global(.react-calendar__tile),
+  :global(.react-calendar__decade-view) :global(.react-calendar__tile),
+  :global(.react-calendar__century-view) :global(.react-calendar__tile) {
+    padding: 2em 0.5em;
+  }
+  :global(.react-calendar__tile) {
+    max-width: 100%;
+    text-align: center;
+    padding: 0.5em 0.5em;
+    font-size: 16px;
+    background: none;
+  }
+  :global(.react-calendar__tile):disabled {
+    background-color: #f0f0f0;
+  }
+  :global(.react-calendar__tile):enabled:hover {
+    background-color: #e6e6e6;
+  }
+  :global(.react-calendar__tile--hasActive) {
+    background: #76baff;
+  }
+  :global(.react-calendar__tile--hasActive):enabled:hover,
+  :global(.react-calendar__tile--hasActive):enabled:focus {
+    background: #a9d4ff;
+  }
+  :global(.react-calendar__tile--active) {
+    background: #006edc;
+    color: white;
+  }
+  :global(.react-calendar__tile--active):enabled:hover,
+  :global(.react-calendar__tile--active):enabled:focus {
+    background: #1087ff;
+  }
+  :global(.react-calendar--selectRange) :global(.react-calendar__tile--hover) {
+    background-color: #e6e6e6;
+  }
+
   :global(.react-calendar__tile) {
     transition: background-color 0.15s ease-in-out 0s;
 

package/src/components/DateTime/DatePicker/DatePicker.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import Calendar from 'react-calendar';
 import { noop } from '../../../helpers/utils';
 import { IconName, Icons } from '../../Icons';
-import './Calendar.scss';
 import classes from './DatePicker.scss';
 
 export interface DatePickerProps {

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

@@ -5,8 +5,6 @@ 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/Explorer/Explorer.spec.tsx

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

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

@@ -12,8 +12,6 @@ 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/SelectionExplorer/SelectionExplorer.spec.tsx

@@ -11,8 +11,6 @@ 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/hooks/useTabTitle/useTabTitle.spec.tsx

@@ -81,4 +81,15 @@ describe('useTabTitle', () => {
 
     expect(setTitle).toHaveBeenCalledTimes(1);
   });
+
+  it('should set the tab title outside a react router context', () => {
+    (useHistory as jest.Mock) = jest.fn().mockReturnValue(undefined);
+
+    const title = 'Test Title';
+    const setTabTitle = true;
+
+    mount(<TestWrapper title={title} setTabTitle={setTabTitle} />);
+
+    expect(setTitle).toHaveBeenCalled();
+  });
 });

package/src/hooks/useTabTitle/useTabTitle.tsx

@@ -6,10 +6,11 @@ export const useTabTitle = (
   title: string | undefined,
   setTabTitle: boolean | undefined,
 ): void => {
-  const { location: currentLocation } = useHistory();
-  const [initialLocation] = useState(currentLocation);
+  // useTabTitle should work outside a react router context
+  const { location } = useHistory() ?? {};
+  const [initialLocation] = useState(location);
 
-  if (setTabTitle && currentLocation.pathname === initialLocation.pathname) {
+  if (setTabTitle && location?.pathname === initialLocation?.pathname) {
     setTitle(title);
   }
 };