chore: update react-jss to 10.0.4 (#293)

packages/main/package.json

@@ -28,7 +28,7 @@
     "@ui5/webcomponents-react-base": "^0.7.0",
     "lodash.debounce": "^4.0.8",
     "react-content-loader": "^4.3.4",
-    "react-jss": "10.0.3",
+    "react-jss": "10.0.4",
     "react-table": "7.0.0-rc.15",
     "react-toastify": "^5.5.0",
     "react-window": "^1.8.5"

packages/main/src/components/AnalyticalCard/index.tsx

@@ -3,6 +3,7 @@ import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePa
 import React, { CSSProperties, FC, forwardRef, ReactNode, ReactNodeArray, Ref, useMemo } from 'react';
 import { createUseStyles } from 'react-jss';
 import { CommonProps } from '../../interfaces/CommonProps';
+import { JSSTheme } from '../../interfaces/JSSTheme';
 
 import styles from './AnalyticalCard.jss';
 
@@ -18,7 +19,7 @@ export interface AnalyticalCardTypes extends CommonProps {
   width?: CSSProperties['width'];
 }
 
-const useStyles = createUseStyles<keyof ReturnType<typeof styles>>(styles, { name: 'AnalyticalCard' });
+const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof styles>>(styles, { name: 'AnalyticalCard' });
 
 /**
  * <code>import { AnalyticalCard } from '@ui5/webcomponents-react/lib/AnalyticalCard';</code>

packages/main/src/components/AnalyticalCardHeader/index.tsx

@@ -12,6 +12,7 @@ import { ValueState } from '@ui5/webcomponents-react/lib/ValueState';
 import React, { FC, forwardRef, Ref, useCallback, useMemo } from 'react';
 import { createUseStyles } from 'react-jss';
 import { CommonProps } from '../../interfaces/CommonProps';
+import { JSSTheme } from '../../interfaces/JSSTheme';
 import styles from './AnalyticalCardHeader.jss';
 
 export interface AnalyticalCardHeaderPropTypes extends CommonProps {
@@ -32,7 +33,7 @@ export interface AnalyticalCardHeaderPropTypes extends CommonProps {
   currency?: string;
 }
 
-const useStyles = createUseStyles<keyof ReturnType<typeof styles>>(styles, {
+const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof styles>>(styles, {
   name: 'AnalyticalCardHeader'
 });
 

packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx

@@ -79,7 +79,7 @@ const styles = ({ parameters }: JSSTheme) => ({
   }
 });
 
-const useStyles = createUseStyles<keyof ReturnType<typeof styles>>(styles, { name: 'TableColumnHeader' });
+const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof styles>>(styles, { name: 'TableColumnHeader' });
 
 export /**
  * <code>import { ColumnHeader } from '@ui5/webcomponents-react/lib/ColumnHeader';</code>

packages/main/src/components/AnalyticalTable/index.tsx

@@ -125,7 +125,7 @@ export interface TableProps extends CommonProps {
   LoadingComponent?: ComponentType<any>;
 }
 
-const useStyles = createUseStyles<keyof ReturnType<typeof styles>>(styles, { name: 'AnalyticalTable' });
+const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof styles>>(styles, { name: 'AnalyticalTable' });
 
 /**
  * <code>import { AnalyticalTable } from '@ui5/webcomponents-react/lib/AnalyticalTable';</code>

packages/main/src/components/Avatar/index.tsx

@@ -5,6 +5,7 @@ import { AvatarSize } from '@ui5/webcomponents-react/lib/AvatarSize';
 import React, { CSSProperties, FC, forwardRef, Ref, useCallback } from 'react';
 import { createUseStyles } from 'react-jss';
 import { CommonProps } from '../../interfaces/CommonProps';
+import { JSSTheme } from '../../interfaces/JSSTheme';
 import styles from './Avatar.jss';
 
 export interface AvatarPropTypes extends CommonProps {
@@ -18,7 +19,7 @@ export interface AvatarPropTypes extends CommonProps {
   customFontSize?: CSSProperties['width'];
 }
 
-const useStyles = createUseStyles<keyof ReturnType<typeof styles>>(styles, { name: 'Avatar' });
+const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof styles>>(styles, { name: 'Avatar' });
 
 /**
  * <code>import { Avatar } from '@ui5/webcomponents-react/lib/Avatar';</code>

packages/main/src/components/Carousel/CarouselPagination.tsx

@@ -7,9 +7,10 @@ import { Label } from '@ui5/webcomponents-react/lib/Label';
 import { PlacementType } from '@ui5/webcomponents-react/lib/PlacementType';
 import React, { Children, FC, useMemo } from 'react';
 import { createUseStyles } from 'react-jss';
+import { JSSTheme } from '../../interfaces/JSSTheme';
 import styles from './CarouselPagination.jss';
 
-const useStyles = createUseStyles<keyof ReturnType<typeof styles>>(styles, { name: 'CarouselPagination' });
+const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof styles>>(styles, { name: 'CarouselPagination' });
 
 export interface CarouselPaginationPropTypes {
   /**

packages/main/src/components/Carousel/index.tsx

@@ -17,6 +17,7 @@ import React, {
 } from 'react';
 import { createUseStyles } from 'react-jss';
 import { CommonProps } from '../../interfaces/CommonProps';
+import { JSSTheme } from '../../interfaces/JSSTheme';
 import styles from './Carousel.jss';
 import { CarouselPagination, CarouselPaginationPropTypes } from './CarouselPagination';
 
@@ -47,7 +48,7 @@ export interface CarouselPropTypes
   loop?: boolean;
 }
 
-const useStyles = createUseStyles<keyof ReturnType<typeof styles>>(styles, { name: 'Carousel' });
+const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof styles>>(styles, { name: 'Carousel' });
 
 /**
  * <code>import { Carousel } from '@ui5/webcomponents-react/lib/Carousel';</code>

packages/main/src/components/FilterBar/index.tsx

@@ -6,6 +6,7 @@ import React, { FC, forwardRef, ReactNode, ReactNodeArray, RefObject, useCallbac
 import { createUseStyles } from 'react-jss';
 import { ClassProps } from '../../interfaces/ClassProps';
 import { CommonProps } from '../../interfaces/CommonProps';
+import { JSSTheme } from '../../interfaces/JSSTheme';
 import styles from './FilterBar.jss';
 
 export interface FilterBarPropTypes extends CommonProps {
@@ -16,7 +17,7 @@ export interface FilterBarPropTypes extends CommonProps {
 
 interface FilterBarInternalProps extends FilterBarPropTypes, ClassProps {}
 
-const useStyles = createUseStyles<keyof ReturnType<typeof styles>>(styles, { name: 'FilterBar' });
+const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof styles>>(styles, { name: 'FilterBar' });
 
 /**
  * <code>import { FilterBar } from '@ui5/webcomponents-react/lib/FilterBar';</code>

packages/main/src/components/Form/FormGroup/index.tsx

@@ -7,14 +7,15 @@ import { TitleLevel } from '@ui5/webcomponents-react/lib/TitleLevel';
 import React, { Children, FC, forwardRef, ReactNode, ReactNodeArray, Ref } from 'react';
 import { createUseStyles } from 'react-jss';
 import { CommonProps } from '../../../interfaces/CommonProps';
+import { JSSTheme } from '../../../interfaces/JSSTheme';
 import { styles } from '../Form.jss';
 
 export interface FormGroupProps extends CommonProps {
   title?: string;
   children: ReactNode | ReactNodeArray;
 }
 
-const useStyles = createUseStyles<keyof ReturnType<typeof styles>>(styles, { name: 'FormGroup' });
+const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof styles>>(styles, { name: 'FormGroup' });
 
 /**
  * <code>import { FormGroup } from '@ui5/webcomponents-react/lib/FormGroup';</code>

packages/main/src/components/Form/FormItem/index.tsx

@@ -3,6 +3,7 @@ import { Label } from '@ui5/webcomponents-react/lib/Label';
 import React, { FC, forwardRef, ReactNode, ReactNodeArray, Ref, useContext, useMemo } from 'react';
 import { createUseStyles } from 'react-jss';
 import { CommonProps } from '../../../interfaces/CommonProps';
+import { JSSTheme } from '../../../interfaces/JSSTheme';
 import { styles } from '../Form.jss';
 
 export interface FormItemProps extends CommonProps {
@@ -14,7 +15,7 @@ const calculateWidth = (rate) => {
   return Math.floor((100 / 12) * rate) + '%';
 };
 
-const useStyles = createUseStyles<keyof ReturnType<typeof styles>>(styles, { name: 'FormItem' });
+const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof styles>>(styles, { name: 'FormItem' });
 
 /**
  * <code>import { FormItem } from '@ui5/webcomponents-react/lib/FormItem';</code>

packages/main/src/components/Form/index.tsx

@@ -8,6 +8,7 @@ import { TitleLevel } from '@ui5/webcomponents-react/lib/TitleLevel';
 import React, { FC, forwardRef, ReactElement, Ref, useMemo } from 'react';
 import { createUseStyles } from 'react-jss';
 import { CommonProps } from '../../interfaces/CommonProps';
+import { JSSTheme } from '../../interfaces/JSSTheme';
 import { styles } from './Form.jss';
 
 export interface FormPropTypes extends CommonProps {
@@ -21,7 +22,7 @@ export interface FormPropTypes extends CommonProps {
   title?: string;
 }
 
-const useStyles = createUseStyles<keyof ReturnType<typeof styles>>(styles, { name: 'Form' });
+const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof styles>>(styles, { name: 'Form' });
 
 /**
  * <code>import { Form } from '@ui5/webcomponents-react/lib/Form';</code>

packages/main/src/components/Loader/index.tsx

@@ -4,6 +4,7 @@ import { LoaderType } from '@ui5/webcomponents-react/lib/LoaderType';
 import React, { CSSProperties, FC, forwardRef, RefObject, useEffect, useMemo, useState } from 'react';
 import { createUseStyles } from 'react-jss';
 import { CommonProps } from '../../interfaces/CommonProps';
+import { JSSTheme } from '../../interfaces/JSSTheme';
 import { styles } from './Loader.jss';
 
 export interface LoaderProps extends CommonProps {
@@ -15,7 +16,7 @@ export interface LoaderProps extends CommonProps {
   progress?: CSSProperties['width'];
 }
 
-const useStyles = createUseStyles<keyof ReturnType<typeof styles>>(styles, { name: 'Loader' });
+const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof styles>>(styles, { name: 'Loader' });
 
 /**
  * <code>import { Loader } from '@ui5/webcomponents-react/lib/Loader';</code>

packages/main/src/components/MessageBox/index.tsx

@@ -18,6 +18,7 @@ import { TitleLevel } from '@ui5/webcomponents-react/lib/TitleLevel';
 import React, { FC, forwardRef, isValidElement, ReactNode, Ref, useCallback, useMemo } from 'react';
 import { createUseStyles } from 'react-jss';
 import { CommonProps } from '../../interfaces/CommonProps';
+import { JSSTheme } from '../../interfaces/JSSTheme';
 import { Ui5DialogDomRef } from '../../interfaces/Ui5DialogDomRef';
 import styles from './MessageBox.jss';
 
@@ -31,7 +32,7 @@ export interface MessageBoxPropTypes extends CommonProps {
   onClose: (event: Event) => void;
 }
 
-const useStyles = createUseStyles<keyof ReturnType<typeof styles>>(styles, { name: 'MessageBox' });
+const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof styles>>(styles, { name: 'MessageBox' });
 
 /**
  * <code>import { MessageBox } from '@ui5/webcomponents-react/lib/MessageBox';</code>

packages/main/src/components/MessageToast/index.tsx

@@ -30,7 +30,7 @@ const coloredStyles = ({ parameters }: JSSTheme) => ({
   }
 });
 
-const useIconStyles = createUseStyles<keyof ReturnType<typeof coloredStyles>>(coloredStyles, {
+const useIconStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof coloredStyles>>(coloredStyles, {
   name: 'MessageToastIcon'
 });
 
@@ -39,7 +39,7 @@ const ColoredIcon = ({ name, state }) => {
   return <Icon name={name} className={`${classes.base} ${classes[state]}`} />;
 };
 
-const useMessageToastStyles = createUseStyles<keyof ReturnType<typeof styles>>(styles, {
+const useMessageToastStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof styles>>(styles, {
   name: 'MessageToast'
 });
 

packages/main/src/components/Notification/index.tsx

@@ -16,6 +16,7 @@ import { Text } from '@ui5/webcomponents-react/lib/Text';
 import React, { FC, forwardRef, ReactNode, RefObject, useCallback, useEffect, useMemo, useState } from 'react';
 import { createUseStyles } from 'react-jss';
 import { CommonProps } from '../../interfaces/CommonProps';
+import { JSSTheme } from '../../interfaces/JSSTheme';
 import styles from './Notification.jss';
 
 export interface NotificationProptypes extends CommonProps {
@@ -38,7 +39,7 @@ export interface NotificationProptypes extends CommonProps {
   autoPriority?: boolean;
 }
 
-const useStyles = createUseStyles<keyof ReturnType<typeof styles>>(styles, { name: 'Notification' });
+const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof styles>>(styles, { name: 'Notification' });
 
 const WEIGHT = { None: 0, Low: 1, Medium: 2, High: 3 };
 

packages/main/src/components/ObjectPageSection/index.tsx

@@ -5,6 +5,7 @@ import { useScrollElement } from '@ui5/webcomponents-react-base/lib/useScrollEle
 import React, { FC, forwardRef, ReactNode, ReactNodeArray, RefObject } from 'react';
 import { createUseStyles } from 'react-jss';
 import { CommonProps } from '../../interfaces/CommonProps';
+import { JSSTheme } from '../../interfaces/JSSTheme';
 import { EmptyIdPropException } from '../ObjectPage/EmptyIdPropException';
 import styles from './ObjectPageSection.jss';
 
@@ -15,7 +16,7 @@ export interface ObjectPageSectionPropTypes extends CommonProps {
   children: ReactNode | ReactNodeArray;
 }
 
-const useStyles = createUseStyles<keyof ReturnType<typeof styles>>(styles, { name: 'ObjectPageSection' });
+const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof styles>>(styles, { name: 'ObjectPageSection' });
 
 /**
  * <code>import { ObjectPageSection } from '@ui5/webcomponents-react/lib/ObjectPageSection';</code>

packages/main/src/components/ObjectPageSubSection/index.tsx

@@ -32,7 +32,7 @@ const styles = ({ parameters }: JSSTheme) => ({
   }
 });
 
-const useStyles = createUseStyles<keyof ReturnType<typeof styles>>(styles, { name: 'ObjectPageSubSection' });
+const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof styles>>(styles, { name: 'ObjectPageSubSection' });
 
 /**
  * <code>import { ObjectPageSubSection } from '@ui5/webcomponents-react/lib/ObjectPageSubSection';</code>

packages/main/src/components/ObjectStatus/index.tsx

@@ -10,6 +10,7 @@ import { ValueState } from '@ui5/webcomponents-react/lib/ValueState';
 import React, { FC, forwardRef, ReactNode, Ref, useMemo } from 'react';
 import { createUseStyles } from 'react-jss';
 import { CommonProps } from '../../interfaces/CommonProps';
+import { JSSTheme } from '../../interfaces/JSSTheme';
 import styles from './ObjectStatus.jss';
 
 export interface ObjectStatusPropTypes extends CommonProps {
@@ -38,7 +39,7 @@ const getDefaultIcon = (state) => {
   }
 };
 
-const useStyles = createUseStyles<keyof ReturnType<typeof styles>>(styles, { name: 'ObjectStatus' });
+const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof styles>>(styles, { name: 'ObjectStatus' });
 
 /**
  * <code>import { ObjectStatus } from '@ui5/webcomponents-react/lib/ObjectStatus';</code>

packages/main/src/components/Page/index.tsx

@@ -11,6 +11,7 @@ import { TitleLevel } from '@ui5/webcomponents-react/lib/TitleLevel';
 import React, { FC, forwardRef, ReactElement, ReactNode, Ref, useCallback, useMemo } from 'react';
 import { createUseStyles } from 'react-jss';
 import { CommonProps } from '../../interfaces/CommonProps';
+import { JSSTheme } from '../../interfaces/JSSTheme';
 import { BarPropTypes } from '../Bar';
 import styles from './Page.jss';
 
@@ -26,7 +27,7 @@ export interface PagePropTypes extends CommonProps {
   children: ReactElement<any> | Array<ReactElement<any>> | ReactNode;
 }
 
-const useStyles = createUseStyles<keyof ReturnType<typeof styles>>(styles, {
+const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof styles>>(styles, {
   name: 'Page'
 });
 

packages/main/src/components/ProgressIndicator/index.tsx

@@ -4,6 +4,7 @@ import { ValueState } from '@ui5/webcomponents-react/lib/ValueState';
 import React, { FC, forwardRef, Ref, useMemo } from 'react';
 import { createUseStyles } from 'react-jss';
 import { CommonProps } from '../../interfaces/CommonProps';
+import { JSSTheme } from '../../interfaces/JSSTheme';
 import styles from './ProgressIndicator.jss';
 
 export interface ProgressIndicatorPropTypes extends CommonProps {
@@ -32,7 +33,7 @@ export interface ProgressIndicatorPropTypes extends CommonProps {
   state?: ValueState;
 }
 
-const useStyles = createUseStyles<keyof ReturnType<typeof styles>>(styles, { name: 'ProgressIndicator' });
+const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof styles>>(styles, { name: 'ProgressIndicator' });
 
 /**
  * <code>import { ProgressIndicator } from '@ui5/webcomponents-react/lib/ProgressIndicator';</code>

packages/main/src/components/SegmentedButtonItem/index.tsx

@@ -4,6 +4,7 @@ import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePa
 import React, { CSSProperties, FC, forwardRef, Ref, useCallback, useMemo } from 'react';
 import { createUseStyles } from 'react-jss';
 import { CommonProps } from '../../interfaces/CommonProps';
+import { JSSTheme } from '../../interfaces/JSSTheme';
 import styles from './SegmentedButtonItem.jss';
 
 export interface SegmentedButtonItemPropTypes extends CommonProps {
@@ -15,7 +16,7 @@ export interface SegmentedButtonItemPropTypes extends CommonProps {
   onClick?: (e: Event) => void;
 }
 
-const useStyles = createUseStyles<keyof ReturnType<typeof styles>>(styles, { name: 'SegmentedButtonItem' });
+const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof styles>>(styles, { name: 'SegmentedButtonItem' });
 
 /**
  * <code>import { SegmentedButtonItem } from '@ui5/webcomponents-react/lib/SegmentedButtonItem';</code>

packages/main/src/components/SideNavigation/index.tsx

@@ -6,6 +6,7 @@ import { SideNavigationOpenState } from '@ui5/webcomponents-react/lib/SideNaviga
 import React, { Children, cloneElement, FC, forwardRef, ReactNode, Ref, useCallback, useEffect, useState } from 'react';
 import { createUseStyles } from 'react-jss';
 import { CommonProps } from '../../interfaces/CommonProps';
+import { JSSTheme } from '../../interfaces/JSSTheme';
 import { sideNavigationStyles } from './SideNavigation.jss';
 
 export interface SideNavigationProps extends CommonProps {
@@ -23,7 +24,7 @@ export interface SideNavigationProps extends CommonProps {
 
 let lastFiredSelection = '';
 
-const useStyles = createUseStyles<keyof ReturnType<typeof sideNavigationStyles>>(sideNavigationStyles, {
+const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof sideNavigationStyles>>(sideNavigationStyles, {
   name: 'SideNavigation'
 });
 

packages/main/src/components/SideNavigationListItem/index.tsx

@@ -27,6 +27,7 @@ import React, {
 import { createPortal } from 'react-dom';
 import { createUseStyles } from 'react-jss';
 import { CommonProps } from '../../interfaces/CommonProps';
+import { JSSTheme } from '../../interfaces/JSSTheme';
 import { sideNavigationListItemStyles } from './SideNavigationListItem.jss';
 
 export interface SideNavigationListItemProps extends CommonProps {
@@ -36,9 +37,12 @@ export interface SideNavigationListItemProps extends CommonProps {
   children?: ReactNode | ReactNodeArray;
 }
 
-const useStyles = createUseStyles<keyof ReturnType<typeof sideNavigationListItemStyles>>(sideNavigationListItemStyles, {
-  name: 'SideNavigationListItem'
-});
+const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof sideNavigationListItemStyles>>(
+  sideNavigationListItemStyles,
+  {
+    name: 'SideNavigationListItem'
+  }
+);
 /**
  * <code>import { SideNavigationListItem } from '@ui5/webcomponents-react/lib/SideNavigationListItem';</code>
  */

packages/main/src/components/Text/index.tsx

@@ -3,6 +3,7 @@ import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePa
 import React, { CSSProperties, FC, forwardRef, ReactNode, Ref } from 'react';
 import { createUseStyles } from 'react-jss';
 import { CommonProps } from '../../interfaces/CommonProps';
+import { JSSTheme } from '../../interfaces/JSSTheme';
 import { ThemeOptions } from '../../interfaces/ThemeOptions';
 import { TextStyles } from './Text.jss';
 
@@ -23,7 +24,7 @@ export interface TextProps extends CommonProps {
   width?: CSSProperties['width'];
 }
 
-const useStyles = createUseStyles<keyof ReturnType<typeof TextStyles>>(TextStyles, { name: 'Text' });
+const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof TextStyles>>(TextStyles, { name: 'Text' });
 
 /**
  * <code>import { Text } from '@ui5/webcomponents-react/lib/Text';</code>