feat: update to @ui5/[email protected]

.storybook/manager-head.html

@@ -1,78 +1,5 @@
 <style>
-  @font-face {
-    font-family: '72';
-    font-style: normal;
-    font-weight: 400;
-    src: local('72'),
-      url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff2?ui5-webcomponents)
-        format('woff2');
-  }
-
-  @font-face {
-    font-family: '72full';
-    font-style: normal;
-    font-weight: 400;
-    src: local('72-full'),
-      url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular-full.woff2?ui5-webcomponents)
-        format('woff2');
-  }
-
-  @font-face {
-    font-family: '72';
-    font-style: normal;
-    font-weight: 700;
-    src: local('72-Bold'),
-      url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff2?ui5-webcomponents)
-        format('woff2');
-  }
-
-  @font-face {
-    font-family: '72full';
-    font-style: normal;
-    font-weight: 700;
-    src: local('72-Bold-full'),
-      url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff2?ui5-webcomponents)
-        format('woff2');
-  }
-
-  @font-face {
-    font-family: '72-Bold';
-    font-style: normal;
-    src: local('72-Bold'),
-      url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff2?ui5-webcomponents)
-        format('woff2');
-  }
-
-  @font-face {
-    font-family: '72-Boldfull';
-    font-style: normal;
-    src: url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff2?ui5-webcomponents)
-      format('woff2');
-  }
-
-  @font-face {
-    font-family: '72-Light';
-    font-style: normal;
-    src: local('72-Light'),
-      url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light.woff2?ui5-webcomponents)
-        format('woff2');
-  }
-
-  @font-face {
-    font-family: '72-Lightfull';
-    font-style: normal;
-    src: url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light-full.woff2?ui5-webcomponents)
-      format('woff2');
-  }
-
-  @font-face {
-    font-family: '72Black';
-    font-style: bold;
-    font-weight: 900;
-    src: local('72Black'),
-      url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_horizon/fonts/72-Black.woff2?ui5-webcomponents)
-        format('woff2');
-  }
+  @import url('@ui5/webcomponents-base/dist/css/FontFace.css');
 
   body {
     font-family: '72', Arial, Helvetica, sans-serif;
@@ -97,9 +24,7 @@
 
 <script data-ui5-config type="application/json">
   {
-    "theme": "sap_fiori_3"
+    "theme": "sap_horizon"
   }
 </script>
 <link rel="icon" href="favicon.ico" />
-
-<!--<script src="/custom-elements-es5-adapter.js"></script>-->

.storybook/preview-head.html

@@ -97,6 +97,6 @@
 </style>
 <script data-ui5-config type="application/json">
   {
-    "theme": "sap_fiori_3"
+    "theme": "sap_horizon"
   }
 </script>

docs/Welcome.mdx

@@ -117,17 +117,17 @@ import '@ui5/webcomponents-react/dist/Assets';
 You can now change the Theme by calling `setTheme` with a string parameter of the new theme.<br />
 Available Themes:
 
-- `sap_fiori_3` (default)
+- `sap_horizon` (default)
+- `sap_horizon_dark`
+- `sap_horizon_hcb`
+- `sap_horizon_hcw`
+
+- `sap_fiori_3`
 - `sap_fiori_dark`
 - `sap_belize`
 - `sap_belize_hcb`
 - `sap_belize_hcw`
 
-- `sap_horizon`
-- `sap_horizon_dark`
-- `sap_horizon_hcb`
-- `sap_horizon_hcw`
-
 ### Configure Compact/Cozy setting
 
 UI5 Web Components supports `Compact` and `Cozy` mode. It is set to `Cozy` by default. To enable `Compact`, provide the css class `ui5-content-density-compact` to any of your HTML elements and it apply compact size to all of its children.

package.json

@@ -37,9 +37,9 @@
     "@storybook/react": "7.5.2",
     "@storybook/react-vite": "7.5.2",
     "@storybook/theming": "7.5.2",
-    "@ui5/webcomponents": "1.18.0",
-    "@ui5/webcomponents-fiori": "1.18.0",
-    "@ui5/webcomponents-icons": "1.18.0",
+    "@ui5/webcomponents": "1.19.0",
+    "@ui5/webcomponents-fiori": "1.19.0",
+    "@ui5/webcomponents-icons": "1.19.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "remark-gfm": "^3.0.1",
@@ -59,7 +59,7 @@
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
-    "@ui5/webcomponents-tools": "1.18.0",
+    "@ui5/webcomponents-tools": "1.19.0",
     "@vitejs/plugin-react": "^4.0.0",
     "chromatic": "^7.0.0",
     "cssnano": "^6.0.1",

packages/base/package.json

@@ -30,7 +30,7 @@
   },
   "peerDependencies": {
     "@types/react": "*",
-    "@ui5/webcomponents-base": "~1.18.0",
+    "@ui5/webcomponents-base": "~1.19.0",
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {

packages/charts/package.json

@@ -34,8 +34,8 @@
     "recharts": "2.9.2"
   },
   "peerDependencies": {
-    "@ui5/webcomponents-react": "~1.21.0",
-    "@ui5/webcomponents-react-base": "~1.20.0",
+    "@ui5/webcomponents-react": "~1.22.0",
+    "@ui5/webcomponents-react-base": "~1.22.0",
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
     "react-jss": "^10.10.0"
   },

packages/cra-template-seed/template.json

@@ -1,9 +1,9 @@
 {
   "package": {
     "dependencies": {
-      "@ui5/webcomponents": "~1.18.0",
-      "@ui5/webcomponents-fiori": "~1.18.0",
-      "@ui5/webcomponents-icons": "~1.18.0",
+      "@ui5/webcomponents": "~1.19.0",
+      "@ui5/webcomponents-fiori": "~1.19.0",
+      "@ui5/webcomponents-icons": "~1.19.0",
       "@ui5/webcomponents-react": "latest",
       "axios": "^0.27.2",
       "formik": "^2.2.9",

packages/cra-template/template.json

@@ -1,9 +1,9 @@
 {
   "package": {
     "dependencies": {
-      "@ui5/webcomponents": "~1.18.0",
-      "@ui5/webcomponents-fiori": "~1.18.0",
-      "@ui5/webcomponents-icons": "~1.18.0",
+      "@ui5/webcomponents": "~1.19.0",
+      "@ui5/webcomponents-fiori": "~1.19.0",
+      "@ui5/webcomponents-icons": "~1.19.0",
       "@ui5/webcomponents-react": "latest",
       "web-vitals": "^2.1.0"
     },

packages/main/package.json

@@ -61,10 +61,10 @@
   "peerDependencies": {
     "@types/react": "*",
     "@types/react-dom": "*",
-    "@ui5/webcomponents": "~1.18.0",
-    "@ui5/webcomponents-base": "~1.18.0",
-    "@ui5/webcomponents-fiori": "~1.18.0",
-    "@ui5/webcomponents-icons": "~1.18.0",
+    "@ui5/webcomponents": "~1.19.0",
+    "@ui5/webcomponents-base": "~1.19.0",
+    "@ui5/webcomponents-fiori": "~1.19.0",
+    "@ui5/webcomponents-icons": "~1.19.0",
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
   },

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

@@ -347,11 +347,14 @@ describe('AnalyticalTable', () => {
     // expand
     cy.findByText('Robin Moreno').should('not.exist', { timeout: 100 });
     cy.findByText('Judith Mathews').should('not.exist', { timeout: 100 });
-    cy.get('[aria-rowindex="1"] > [aria-colindex="2"] > [title="Expand Node"] > ui5-icon').click();
+    cy.get('[aria-rowindex="1"] > [aria-colindex="2"] > [title="Expand Node"] > [ui5-button]').click();
     cy.findByText('Robin Moreno').should('be.visible');
-    cy.get('[aria-rowindex="4"] > [aria-colindex="2"] > [title="Expand Node"] > ui5-icon').trigger('keydown', {
-      key: 'Enter'
-    });
+    cy.get('[aria-rowindex="4"] > [aria-colindex="2"] > [title="Expand Node"] > [ui5-button]')
+      .shadow()
+      .find('button')
+      .focus();
+    cy.realPress('Enter');
+
     cy.findByText('Judith Mathews').should('be.visible');
 
     // select
@@ -703,9 +706,9 @@ describe('AnalyticalTable', () => {
     );
 
     // expand
-    cy.get('[aria-rowindex="2"] > [aria-colindex="2"] > [title="Expand Node"] > [ui5-icon]').click();
-    cy.get('[aria-rowindex="3"] > [aria-colindex="2"] > [title="Expand Node"] > [ui5-icon]').click();
-    cy.get('[aria-rowindex="4"] > [aria-colindex="2"] > [title="Expand Node"] > [ui5-icon]').click();
+    cy.get('[aria-rowindex="2"] > [aria-colindex="2"] > [title="Expand Node"] > [ui5-button]').click();
+    cy.get('[aria-rowindex="3"] > [aria-colindex="2"] > [title="Expand Node"] > [ui5-button]').click();
+    cy.get('[aria-rowindex="4"] > [aria-colindex="2"] > [title="Expand Node"] > [ui5-button]').click();
 
     // deselect row
     cy.findByText('Wiggins Cotton').click();
@@ -796,9 +799,9 @@ describe('AnalyticalTable', () => {
     cy.get('[data-column-id="__ui5wcr__internal_selection_column"]').click();
 
     // expand
-    cy.get('[aria-rowindex="2"] > [aria-colindex="2"] > [title="Expand Node"] > [ui5-icon]').click();
-    cy.get('[aria-rowindex="3"] > [aria-colindex="2"] > [title="Expand Node"] > [ui5-icon]').click();
-    cy.get('[aria-rowindex="4"] > [aria-colindex="2"] > [title="Expand Node"] > [ui5-icon]').click();
+    cy.get('[aria-rowindex="2"] > [aria-colindex="2"] > [title="Expand Node"] > [ui5-button]').click();
+    cy.get('[aria-rowindex="3"] > [aria-colindex="2"] > [title="Expand Node"] > [ui5-button]').click();
+    cy.get('[aria-rowindex="4"] > [aria-colindex="2"] > [title="Expand Node"] > [ui5-button]').click();
 
     // deselect row
     cy.findByText('Wiggins Cotton').click();
@@ -887,7 +890,7 @@ describe('AnalyticalTable', () => {
     cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 700);
 
     cy.findByText('Custom maxWidth').click();
-    cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 3824);
+    cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 4120);
   });
 
   it('Column Scaling: programatically change cols', () => {
@@ -1558,13 +1561,13 @@ describe('AnalyticalTable', () => {
     cy.findAllByTitle('Expand Node').should('have.length', 4);
     cy.findAllByTitle('Collapse Node').should('not.exist');
 
-    cy.get('[aria-rowindex="1"] > [aria-colindex="1"] > [title="Expand Node"] > [ui5-icon]').click();
+    cy.get('[aria-rowindex="1"] > [aria-colindex="1"] > [title="Expand Node"] > [ui5-button]').click();
 
     cy.findAllByTitle('Expand Node').should('have.length', 3);
     cy.findAllByTitle('Collapse Node').should('have.length', 1);
     cy.findByText('SubComponent').should('be.visible');
 
-    cy.get('[aria-rowindex="2"] > [aria-colindex="1"] > [title="Expand Node"] > [ui5-icon]').click();
+    cy.get('[aria-rowindex="2"] > [aria-colindex="1"] > [title="Expand Node"] > [ui5-button]').click();
 
     cy.findAllByTitle('Expand Node').should('have.length', 2);
     cy.findAllByTitle('Collapse Node').should('have.length', 2);
@@ -1575,12 +1578,12 @@ describe('AnalyticalTable', () => {
     cy.findAllByTitle('Expand Node').should('have.length', 1);
     cy.findAllByTitle('Collapse Node').should('not.exist');
 
-    cy.get('[aria-rowindex="1"] > [aria-colindex="1"] > [title="Expand Node"] > [ui5-icon]').click();
+    cy.get('[aria-rowindex="1"] > [aria-colindex="1"] > [title="Expand Node"] > [ui5-button]').click();
 
     cy.findAllByTitle('Expand Node').should('not.exist');
     cy.findAllByTitle('Collapse Node').should('have.length', 1);
     cy.findByText('SingleSubComponent').should('be.visible');
-    cy.get('[aria-rowindex="2"] > [aria-colindex="1"] > [title="Expand Node"] > [ui5-icon]').should('not.exist');
+    cy.get('[aria-rowindex="2"] > [aria-colindex="1"] > [title="Expand Node"] > [ui5-button]').should('not.exist');
 
     cy.mount(
       <AnalyticalTable

packages/main/src/components/AnalyticalTable/hooks/usePopIn.ts

@@ -4,7 +4,7 @@ const popInVisibleColumns = (cols, { instance }) => {
   const { state, dispatch } = instance;
 
   const tableClientWidth = state.isScrollable
-    ? state?.tableClientWidth + 14 /*scrollbar width*/
+    ? state?.tableClientWidth + 13 /*scrollbar width*/
     : state?.tableClientWidth;
 
   const popInColumns = cols

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

@@ -319,7 +319,7 @@ describe('FilterBar.cy.tsx', () => {
         // no border for table rows within panel - `getComputedStyle` returns the default value (`separate`) for `unset`
         cy.get('table').should('have.css', 'border-collapse', 'separate');
         // no bottom border for table within panel - `getComputedStyle` sets the border-width to 0 for `none`
-        cy.get('.ui5-table-root').should('have.css', 'border-bottom', '0px none rgb(50, 54, 58)');
+        cy.get('.ui5-table-root').should('have.css', 'border-bottom', '0px none rgb(29, 45, 62)');
         // no select-all checkbox (header row is hidden)
         cy.get('thead th.ui5-table-select-all-column').should('not.be.visible');
       });

packages/main/src/components/ObjectPage/ObjectPage.cy.tsx

@@ -390,19 +390,19 @@ describe('ObjectPage', () => {
     [ObjectPageMode.Default, ObjectPageMode.IconTabBar].forEach((item) => {
       cy.mount(<TestComp height="2000px" mode={item} />);
       cy.findByText('Update Heights').click();
-      cy.findByText('{"offset":1080,"scroll":2240}').should('exist');
+      cy.findByText('{"offset":1080,"scroll":2260}').should('exist');
 
       cy.findByTestId('op').scrollTo('bottom');
       cy.findByText('Update Heights').click({ force: true });
-      cy.findByText('{"offset":1080,"scroll":2240}').should('exist');
+      cy.findByText('{"offset":1080,"scroll":2260}').should('exist');
 
       cy.mount(<TestComp height="2000px" withFooter mode={item} />);
       cy.findByText('Update Heights').click();
-      cy.findByText('{"offset":1080,"scroll":2300}').should('exist');
+      cy.findByText('{"offset":1080,"scroll":2320}').should('exist');
 
       cy.findByTestId('op').scrollTo('bottom');
       cy.findByText('Update Heights').click({ force: true });
-      cy.findByText('{"offset":1080,"scroll":2300}').should('exist');
+      cy.findByText('{"offset":1080,"scroll":2320}').should('exist');
 
       cy.mount(<TestComp height="400px" mode={item} />);
       cy.findByText('Update Heights').click();