diff --git a/integration-tests/cypress/e2e/project/diagrams/custom-shape.cy.ts b/integration-tests/cypress/e2e/project/diagrams/custom-shape.cy.ts index e5542ede14d..0b596e45635 100644 --- a/integration-tests/cypress/e2e/project/diagrams/custom-shape.cy.ts +++ b/integration-tests/cypress/e2e/project/diagrams/custom-shape.cy.ts @@ -33,7 +33,7 @@ describe('/projects/:projectId/edit - Custom Shape', () => { cy.getByTestId('delete').click(); cy.getByTestId('Entity1 Node-more').click(); cy.getByTestId('new-object').click(); - cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1); + cy.getByTestId('childCreationDescription').children('[role="combobox"]').invoke('text').should('have.length.gt', 1); cy.getByTestId('childCreationDescription').click(); cy.getByTestId('childCreationDescription') .get('[data-value="Ellipse Node Style Description"]') @@ -41,11 +41,11 @@ describe('/projects/:projectId/edit - Custom Shape', () => { .click(); cy.getByTestId('create-object').click(); - cy.get('[title="Back to the homepage"]').click(); + cy.get('[aria-label="Back to the homepage"]').click(); // Create the domain instance cy.url().should('eq', Cypress.config().baseUrl + '/projects'); - cy.get('[title="Blank Studio"]').should('be.visible'); + cy.get('[aria-label="Blank Studio"]').should('be.visible'); cy.getByTestId('create').click(); cy.url().should('eq', Cypress.config().baseUrl + '/new/project'); @@ -56,7 +56,7 @@ describe('/projects/:projectId/edit - Custom Shape', () => { cy.getByTestId('empty').click(); cy.getByTestId('Others...-more').click(); cy.getByTestId('new-object').click(); - cy.getByTestId('domain').children('[role="button"]').invoke('text').should('have.length.gt', 1); + cy.getByTestId('domain').children('[role="combobox"]').invoke('text').should('have.length.gt', 1); cy.getByTestId('domain').find('div').first().should('not.have.attr', 'aria-disabled'); cy.getByTestId('domain').click(); cy.getByTestId('domain').get('[data-value^="domain://"]').should('exist').click(); @@ -64,14 +64,17 @@ describe('/projects/:projectId/edit - Custom Shape', () => { cy.getByTestId('Root-more').click(); cy.getByTestId('treeitem-contextmenu').findByTestId('new-representation').click(); - cy.getByTestId('representationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1); + cy.getByTestId('representationDescription') + .children('[role="combobox"]') + .invoke('text') + .should('have.length.gt', 1); cy.getByTestId('representationDescription').click(); cy.get('[data-testid$=" Diagram Description"]').should('exist').click(); cy.getByTestId('create-representation').click(); cy.getByTestId('Root-more').click(); cy.getByTestId('new-object').click(); - cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1); + cy.getByTestId('childCreationDescription').children('[role="combobox"]').invoke('text').should('have.length.gt', 1); cy.getByTestId('childCreationDescription').click(); cy.getByTestId('childCreationDescription').get('[data-value="Entity1s Entity1"]').should('exist').click(); cy.getByTestId('create-object').click(); diff --git a/integration-tests/cypress/e2e/project/diagrams/diagram-contextual-palette.cy.js b/integration-tests/cypress/e2e/project/diagrams/diagram-contextual-palette.cy.js index f268880cf44..f35870e488a 100644 --- a/integration-tests/cypress/e2e/project/diagrams/diagram-contextual-palette.cy.js +++ b/integration-tests/cypress/e2e/project/diagrams/diagram-contextual-palette.cy.js @@ -125,10 +125,10 @@ describe('/projects/:projectId/edit - Robot Diagram', () => { cy.getByTestId('Tool').click(); cy.getByTestId('Name').type('{selectAll}tool2_section2'); - cy.get('[title="Back to the homepage"]').click(); + cy.get('[aria-label="Back to the homepage"]').click(); cy.url().should('eq', Cypress.config().baseUrl + '/projects'); - cy.get('[title="Blank Studio"]').should('be.visible'); + cy.get('[aria-label="Blank Studio"]').should('be.visible'); cy.getByTestId('create').click(); cy.url().should('eq', Cypress.config().baseUrl + '/new/project'); @@ -138,7 +138,7 @@ describe('/projects/:projectId/edit - Robot Diagram', () => { cy.getByTestId('empty').click(); cy.getByTestId('Others...-more').click(); cy.getByTestId('new-object').click(); - cy.getByTestId('domain').children('[role="button"]').invoke('text').should('have.length.gt', 1); + cy.getByTestId('domain').children('[role="combobox"]').invoke('text').should('have.length.gt', 1); cy.getByTestId('domain').find('div').first().should('not.have.attr', 'aria-disabled'); cy.getByTestId('domain').click(); cy.getByTestId('domain').get('[data-value^="domain://"]').should('exist').click(); @@ -270,7 +270,6 @@ describe('/projects/:projectId/edit - Robot Diagram', () => { cy.getByTestId('confirmation-dialog').should('not.exist'); }); - it('diagram palette is closed once element palette is opened', () => { createFlowReactFlowDiagram(); diff --git a/integration-tests/cypress/e2e/project/formdescriptioneditor/formdescriptioneditor.cy.js b/integration-tests/cypress/e2e/project/formdescriptioneditor/formdescriptioneditor.cy.js index 9ad57b5c116..7dc0a20567c 100644 --- a/integration-tests/cypress/e2e/project/formdescriptioneditor/formdescriptioneditor.cy.js +++ b/integration-tests/cypress/e2e/project/formdescriptioneditor/formdescriptioneditor.cy.js @@ -60,7 +60,7 @@ describe('/projects/:projectId/edit - FormDescriptionEditor', () => { cy.wait(500); // Wait for representation to refresh cy.get('[data-testid^="Page-"]').not('[data-testid="Page-DropArea"]').should('have.lengthOf', 2); cy.get('[data-testid^="Page-"]').not('[data-testid="Page-DropArea"]').eq(1).click(); - cy.get('[title="Group"]').should('exist'); + cy.get('[aria-label="Group"]').should('exist'); }); it('try to rename a page', () => { @@ -116,7 +116,7 @@ describe('/projects/:projectId/edit - FormDescriptionEditor', () => { const dataTransfer = new DataTransfer(); cy.getByTestId('FormDescriptionEditor-Slider').trigger('dragstart', { dataTransfer }); cy.get('[data-testid^="Group-Widgets-DropArea-"]').trigger('drop', { dataTransfer }); - cy.get('[title="Slider"]').should('be.visible'); + cy.get('[aria-label="Slider"]').should('be.visible'); }); it('can create a slider widget in a Flexbox Container', () => { @@ -126,12 +126,12 @@ describe('/projects/:projectId/edit - FormDescriptionEditor', () => { var dataTransfer = new DataTransfer(); cy.getByTestId('FormDescriptionEditor-FlexboxContainer').trigger('dragstart', { dataTransfer }); cy.get('[data-testid^="Group-Widgets-DropArea-"]').trigger('drop', { dataTransfer }); - cy.get('[title="FlexboxContainer"]').should('be.visible'); + cy.get('[aria-label="FlexboxContainer"]').should('be.visible'); // Create a slider inside the Flexbox dataTransfer = new DataTransfer(); cy.getByTestId('FormDescriptionEditor-Slider').trigger('dragstart', { dataTransfer }); cy.get('[data-testid^="FlexboxContainer-Widgets-DropArea-"]').trigger('drop', { dataTransfer }); - cy.get('[title="Slider"]').should('be.visible'); + cy.get('[aria-label="Slider"]').should('be.visible'); }); it('display the page of the element selected', () => { @@ -139,7 +139,7 @@ describe('/projects/:projectId/edit - FormDescriptionEditor', () => { cy.getByTestId('New Form Description').click(); cy.getByTestId('New Form Description-more').should('be.enabled').click(); cy.getByTestId('treeitem-contextmenu').findByTestId('new-object').click(); - cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1); + cy.getByTestId('childCreationDescription').children('[role="combobox"]').invoke('text').should('have.length.gt', 1); cy.getByTestId('childCreationDescription').click().get('[data-value="Page Description"]').should('exist').click(); cy.getByTestId('create-object').click(); // Adds a widget to the first page @@ -147,7 +147,7 @@ describe('/projects/:projectId/edit - FormDescriptionEditor', () => { cy.getByTestId('GroupDescription').eq(0).click(); cy.getByTestId('GroupDescription-more').eq(0).should('be.enabled').click(); cy.getByTestId('treeitem-contextmenu').findByTestId('new-object').click(); - cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1); + cy.getByTestId('childCreationDescription').children('[role="combobox"]').invoke('text').should('have.length.gt', 1); cy.getByTestId('childCreationDescription') .click() .get('[data-value="Widgets Pie Chart Description"]') @@ -159,7 +159,7 @@ describe('/projects/:projectId/edit - FormDescriptionEditor', () => { cy.getByTestId('GroupDescription').eq(1).click(); cy.getByTestId('GroupDescription-more').eq(1).should('be.enabled').click(); cy.getByTestId('treeitem-contextmenu').findByTestId('new-object').click(); - cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1); + cy.getByTestId('childCreationDescription').children('[role="combobox"]').invoke('text').should('have.length.gt', 1); cy.getByTestId('childCreationDescription') .click() .get('[data-value="Widgets Bar Chart Description"]') @@ -200,12 +200,12 @@ describe('/projects/:projectId/edit - FormDescriptionEditor', () => { const dataTransfer = new DataTransfer(); cy.getByTestId('FormDescriptionEditor-ReferenceWidget').trigger('dragstart', { dataTransfer }); cy.get('[data-testid^="Group-Widgets-DropArea-"]').trigger('drop', { dataTransfer }); - cy.get('[title="ReferenceWidget"]').should('be.visible'); + cy.get('[aria-label="ReferenceWidget"]').should('be.visible'); cy.getByTestId('PageDescription').dblclick(); cy.getByTestId('GroupDescription').dblclick(); cy.getByTestId('ReferenceWidgetDescription-more').should('be.enabled').click(); cy.getByTestId('treeitem-contextmenu').findByTestId('new-object').click(); - cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1); + cy.getByTestId('childCreationDescription').children('[role="combobox"]').invoke('text').should('have.length.gt', 1); cy.getByTestId('childCreationDescription') .click() .get('[data-value="Conditional Styles Conditional Reference Widget Description Style"]') @@ -227,18 +227,18 @@ describe('/projects/:projectId/edit - FormDescriptionEditor', () => { var dataTransfer = new DataTransfer(); cy.getByTestId('FormDescriptionEditor-FlexboxContainer').trigger('dragstart', { dataTransfer }); cy.get('[data-testid^="Group-Widgets-DropArea-"]').trigger('drop', { dataTransfer }); - cy.get('[title="FlexboxContainer"]').should('be.visible'); + cy.get('[aria-label="FlexboxContainer"]').should('be.visible'); // Create a Reference inside the Flexbox dataTransfer = new DataTransfer(); cy.getByTestId('FormDescriptionEditor-ReferenceWidget').trigger('dragstart', { dataTransfer }); cy.get('[data-testid^="FlexboxContainer-Widgets-DropArea-"]').trigger('drop', { dataTransfer }); - cy.get('[title="ReferenceWidget"]').should('be.visible'); + cy.get('[aria-label="ReferenceWidget"]').should('be.visible'); }); function checkWidgetIsEnabledExpression(widgetName, should) { cy.getByTestId('GroupDescription-more').should('be.enabled').click(); cy.getByTestId('treeitem-contextmenu').findByTestId('new-object').click(); - cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1); + cy.getByTestId('childCreationDescription').children('[role="combobox"]').invoke('text').should('have.length.gt', 1); cy.getByTestId('childCreationDescription') .click() .get('[data-value="' + widgetName + ' Description"]') @@ -264,7 +264,7 @@ describe('/projects/:projectId/edit - FormDescriptionEditor', () => { function createBorderStyleAndCheckProperties(styleName) { cy.getByTestId('treeitem-contextmenu').findByTestId('new-object').click(); - cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1); + cy.getByTestId('childCreationDescription').children('[role="combobox"]').invoke('text').should('have.length.gt', 1); cy.getByTestId('childCreationDescription') .click() .get('[data-value="' + styleName + '"]') @@ -296,7 +296,7 @@ describe('/projects/:projectId/edit - FormDescriptionEditor', () => { var dataTransfer = new DataTransfer(); cy.getByTestId('FormDescriptionEditor-FlexboxContainer').trigger('dragstart', { dataTransfer }); cy.get('[data-testid^="Group-Widgets-DropArea-"]').trigger('drop', { dataTransfer }); - cy.get('[title="FlexboxContainer"]').should('be.visible'); + cy.get('[aria-label="FlexboxContainer"]').should('be.visible'); cy.getByTestId('GroupDescription').dblclick(); cy.getByTestId('FlexboxContainerDescription-more').click(); @@ -316,42 +316,42 @@ describe('/projects/:projectId/edit - FormDescriptionEditor', () => { // Create top-level If, For and Flexbox inside the Group createControl('FormElementIf', 'Group-Widgets-DropArea', 0); - cy.get('[title="FormDescriptionEditorIf"]').eq(0).should('be.visible'); + cy.get('[aria-label="FormDescriptionEditorIf"]').eq(0).should('be.visible'); createControl('FormElementFor', 'Group-Widgets-DropArea', 0); - cy.get('[title="FormDescriptionEditorFor"]').eq(0).should('be.visible'); + cy.get('[aria-label="FormDescriptionEditorFor"]').eq(0).should('be.visible'); createControl('FlexboxContainer', 'Group-Widgets-DropArea', 0); - cy.get('[title="FlexboxContainer"]').eq(0).should('be.visible'); + cy.get('[aria-label="FlexboxContainer"]').eq(0).should('be.visible'); // NOTE: the indexes for the target drop-area depend on the order in which the // widgets of the same kind were created and appear before on the page. // If, For, Flexbox and Label widget inside an If createControl('FormElementIf', 'FormDescriptionEditorIf-Widgets-DropArea', 0); - cy.get('[title="FormDescriptionEditorIf"]').should('have.lengthOf', 2); + cy.get('[aria-label="FormDescriptionEditorIf"]').should('have.lengthOf', 2); createControl('FormElementFor', 'FormDescriptionEditorIf-Widgets-DropArea', 1); - cy.get('[title="FormDescriptionEditorFor"]').should('have.lengthOf', 2); + cy.get('[aria-label="FormDescriptionEditorFor"]').should('have.lengthOf', 2); createControl('FlexboxContainer', 'FormDescriptionEditorIf-Widgets-DropArea', 1); - cy.get('[title="FlexboxContainer"]').should('have.lengthOf', 2); + cy.get('[aria-label="FlexboxContainer"]').should('have.lengthOf', 2); createControl('Label', 'FormDescriptionEditorIf-Widgets-DropArea', 1); - cy.get('[title="LabelWidget"]').should('have.lengthOf', 1); + cy.get('[aria-label="LabelWidget"]').should('have.lengthOf', 1); // The same, but inside the For createControl('FormElementIf', 'FormDescriptionEditorFor-Widgets-DropArea', 1); - cy.get('[title="FormDescriptionEditorIf"]').should('have.lengthOf', 3); + cy.get('[aria-label="FormDescriptionEditorIf"]').should('have.lengthOf', 3); createControl('FormElementFor', 'FormDescriptionEditorFor-Widgets-DropArea', 1); - cy.get('[title="FormDescriptionEditorFor"]').should('have.lengthOf', 3); + cy.get('[aria-label="FormDescriptionEditorFor"]').should('have.lengthOf', 3); createControl('FlexboxContainer', 'FormDescriptionEditorFor-Widgets-DropArea', 2); - cy.get('[title="FlexboxContainer"]').should('have.lengthOf', 3); + cy.get('[aria-label="FlexboxContainer"]').should('have.lengthOf', 3); createControl('Label', 'FormDescriptionEditorFor-Widgets-DropArea', 2); - cy.get('[title="LabelWidget"]').should('have.lengthOf', 2); + cy.get('[aria-label="LabelWidget"]').should('have.lengthOf', 2); // The same, but inside the flexbox container createControl('FormElementIf', 'FlexboxContainer-Widgets-DropArea', 2); - cy.get('[title="FormDescriptionEditorIf"]').should('have.lengthOf', 4); + cy.get('[aria-label="FormDescriptionEditorIf"]').should('have.lengthOf', 4); createControl('FormElementFor', 'FlexboxContainer-Widgets-DropArea', 2); - cy.get('[title="FormDescriptionEditorFor"]').should('have.lengthOf', 4); + cy.get('[aria-label="FormDescriptionEditorFor"]').should('have.lengthOf', 4); createControl('FlexboxContainer', 'FlexboxContainer-Widgets-DropArea', 2); - cy.get('[title="FlexboxContainer"]').should('have.lengthOf', 4); + cy.get('[aria-label="FlexboxContainer"]').should('have.lengthOf', 4); createControl('Label', 'FlexboxContainer-Widgets-DropArea', 3); - cy.get('[title="LabelWidget"]').should('have.lengthOf', 2); + cy.get('[aria-label="LabelWidget"]').should('have.lengthOf', 2); }); }); diff --git a/integration-tests/cypress/e2e/project/forms/widget-reference.cy.ts b/integration-tests/cypress/e2e/project/forms/widget-reference.cy.ts index 3107fd69641..e739f95ab61 100644 --- a/integration-tests/cypress/e2e/project/forms/widget-reference.cy.ts +++ b/integration-tests/cypress/e2e/project/forms/widget-reference.cy.ts @@ -165,7 +165,7 @@ describe('Forms Widget-reference', () => { cy.getByTestId('create-modal').findByTestId('tree-root-elements').should('not.exist'); cy.getByTestId('create-modal').findByTestId('childCreationDescription').should('exist'); cy.getByTestId('childCreationDescription') - .children('[role="button"]') + .children('[role="combobox"]') .invoke('text') .should('have.length.gt', 1); cy.getByTestId('childCreationDescription').click(); @@ -197,7 +197,7 @@ describe('Forms Widget-reference', () => { cy.getByTestId('create-modal').findByTestId('tree-root-elements').should('not.exist'); cy.getByTestId('create-modal').findByTestId('childCreationDescription').should('exist'); cy.getByTestId('childCreationDescription') - .children('[role="button"]') + .children('[role="combobox"]') .invoke('text') .should('have.length.gt', 1); cy.getByTestId('childCreationDescription').click(); @@ -251,7 +251,7 @@ describe('Forms Widget-reference', () => { cy.getByTestId('create-modal').findByTestId('standard').should('not.exist'); cy.getByTestId('create-modal').findByTestId('CompositeProcessor1').click(); cy.getByTestId('childCreationDescription') - .children('[role="button"]') + .children('[role="combobox"]') .invoke('text') .should('have.length.gt', 1); cy.getByTestId('childCreationDescription').click(); @@ -341,7 +341,10 @@ describe('Forms Widget-reference', () => { cy.getByTestId('create-modal').should('exist'); cy.getByTestId('create-modal').findByTestId('tree-root-elements').should('not.exist'); cy.getByTestId('create-modal').findByTestId('childCreationDescription').should('exist'); - cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1); + cy.getByTestId('childCreationDescription') + .children('[role="combobox"]') + .invoke('text') + .should('have.length.gt', 1); cy.getByTestId('childCreationDescription').click(); cy.getByTestId('childCreationDescription').get('[data-value]').should('have.length', 1); cy.getByTestId('childCreationDescription') @@ -361,7 +364,10 @@ describe('Forms Widget-reference', () => { cy.getByTestId('create-modal').should('exist'); cy.getByTestId('create-modal').findByTestId('tree-root-elements').should('not.exist'); cy.getByTestId('create-modal').findByTestId('childCreationDescription').should('exist'); - cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1); + cy.getByTestId('childCreationDescription') + .children('[role="combobox"]') + .invoke('text') + .should('have.length.gt', 1); cy.getByTestId('childCreationDescription').click(); cy.getByTestId('childCreationDescription').get('[data-value]').should('have.length', 1); cy.getByTestId('childCreationDescription') diff --git a/integration-tests/cypress/e2e/project/studio/color-palette.cy.js b/integration-tests/cypress/e2e/project/studio/color-palette.cy.js index 380d2419f2c..509e4c0f9b8 100644 --- a/integration-tests/cypress/e2e/project/studio/color-palette.cy.js +++ b/integration-tests/cypress/e2e/project/studio/color-palette.cy.js @@ -33,7 +33,7 @@ describe('/projects/:projectId/edit - Color Palette', () => { cy.getByTestId('View-toggle').click(); cy.getByTestId('ColorPalette-more').click(); cy.getByTestId('new-object').click(); - cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1); + cy.getByTestId('childCreationDescription').children('[role="combobox"]').invoke('text').should('have.length.gt', 1); cy.getByTestId('childCreationDescription').click().get('[data-value="Fixed Color"]').should('exist').click(); cy.getByTestId('create-object').click(); cy.getByTestId('FixedColor').should('exist').click(); @@ -47,14 +47,14 @@ describe('/projects/:projectId/edit - Color Palette', () => { cy.getByTestId('View-toggle').click(); cy.getByTestId('View-more').click(); cy.getByTestId('new-object').click(); - cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1); + cy.getByTestId('childCreationDescription').children('[role="combobox"]').invoke('text').should('have.length.gt', 1); cy.getByTestId('childCreationDescription').click().get('[data-value="Color Palette"]').should('exist').click(); cy.getByTestId('create-object').click(); cy.getByTestId('New Color Palette').should('exist').click(); cy.getByTestId('Name').clear().type('OtherColorPalette{enter}'); cy.getByTestId('OtherColorPalette-more').click(); cy.getByTestId('new-object').click(); - cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1); + cy.getByTestId('childCreationDescription').children('[role="combobox"]').invoke('text').should('have.length.gt', 1); cy.getByTestId('childCreationDescription').click().get('[data-value="Fixed Color"]').should('exist'); }); diff --git a/integration-tests/cypress/e2e/project/studio/studio.cy.ts b/integration-tests/cypress/e2e/project/studio/studio.cy.ts index e2afca350a4..b2c1279ec18 100644 --- a/integration-tests/cypress/e2e/project/studio/studio.cy.ts +++ b/integration-tests/cypress/e2e/project/studio/studio.cy.ts @@ -123,7 +123,7 @@ describe('/projects/:projectId/edit - Studio', () => { cy.get('[data-testid$=" Diagram Description"]').dblclick(); cy.getByTestId('DiagramPalette-more').click(); cy.getByTestId('new-object').click(); - cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1); + cy.getByTestId('childCreationDescription').children('[role="combobox"]').invoke('text').should('have.length.gt', 1); cy.getByTestId('childCreationDescription').click(); cy.getByTestId('childCreationDescription').get('[data-value="Node Tool"]').should('exist').click(); cy.getByTestId('create-object').click(); @@ -132,9 +132,9 @@ describe('/projects/:projectId/edit - Studio', () => { cy.getByTestId('Name').clear(); cy.getByTestId('Name').type('TestTool'); - cy.get('[title="Back to the homepage"]').click(); + cy.get('[aria-label="Back to the homepage"]').click(); cy.url().should('eq', Cypress.config().baseUrl + '/projects'); - cy.get('[title="Blank Studio"]').should('be.visible'); + cy.get('[aria-label="Blank Studio"]').should('be.visible'); cy.getByTestId('create').click(); cy.url().should('eq', Cypress.config().baseUrl + '/new/project'); @@ -145,7 +145,7 @@ describe('/projects/:projectId/edit - Studio', () => { cy.getByTestId('empty').click(); cy.getByTestId('Others...-more').click(); cy.getByTestId('new-object').click(); - cy.getByTestId('domain').children('[role="button"]').invoke('text').should('have.length.gt', 1); + cy.getByTestId('domain').children('[role="combobox"]').invoke('text').should('have.length.gt', 1); cy.getByTestId('domain').find('div').first().should('not.have.attr', 'aria-disabled'); cy.getByTestId('domain').click(); cy.getByTestId('domain').get('[data-value^="domain://"]').should('exist').click(); @@ -153,7 +153,10 @@ describe('/projects/:projectId/edit - Studio', () => { cy.getByTestId('Root-more').click(); cy.getByTestId('treeitem-contextmenu').findByTestId('new-representation').click(); - cy.getByTestId('representationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1); + cy.getByTestId('representationDescription') + .children('[role="combobox"]') + .invoke('text') + .should('have.length.gt', 1); cy.getByTestId('representationDescription').click(); cy.get('[data-testid$=" Diagram Description"]').should('exist').click(); cy.getByTestId('name').clear(); @@ -183,7 +186,7 @@ describe('/projects/:projectId/edit - Studio', () => { cy.get('[data-testid$=" Diagram Description"]').dblclick(); cy.get('[data-testid$=" Diagram Description-more"]').click(); cy.getByTestId('new-object').click(); - cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1); + cy.getByTestId('childCreationDescription').children('[role="combobox"]').invoke('text').should('have.length.gt', 1); cy.getByTestId('childCreationDescription').click(); cy.getByTestId('childCreationDescription').get('[data-value="Node Description"]').should('exist').click(); cy.getByTestId('create-object').click(); @@ -199,14 +202,14 @@ describe('/projects/:projectId/edit - Studio', () => { cy.get('[data-testid$=" Diagram Description"]').dblclick(); cy.get('[data-testid$=" Diagram Description-more"]').click(); cy.getByTestId('new-object').click(); - cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1); + cy.getByTestId('childCreationDescription').children('[role="combobox"]').invoke('text').should('have.length.gt', 1); cy.getByTestId('childCreationDescription').click(); cy.getByTestId('childCreationDescription').get('[data-value="Node Description"]').should('exist').click(); cy.getByTestId('create-object').click(); cy.getByTestId('Node-toggle').click(); cy.getByTestId('Node-more').click(); cy.getByTestId('new-object').click(); - cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1); + cy.getByTestId('childCreationDescription').children('[role="combobox"]').invoke('text').should('have.length.gt', 1); cy.getByTestId('childCreationDescription').click(); cy.getByTestId('childCreationDescription').get('[data-value="Sub-node"]').should('exist').click(); cy.getByTestId('create-object').click(); @@ -222,14 +225,14 @@ describe('/projects/:projectId/edit - Studio', () => { cy.get('[data-testid$=" Diagram Description"]').dblclick(); cy.get('[data-testid$=" Diagram Description-more"]').click(); cy.getByTestId('new-object').click(); - cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1); + cy.getByTestId('childCreationDescription').children('[role="combobox"]').invoke('text').should('have.length.gt', 1); cy.getByTestId('childCreationDescription').click(); cy.getByTestId('childCreationDescription').get('[data-value="Node Description"]').should('exist').click(); cy.getByTestId('create-object').click(); cy.getByTestId('Node-toggle').click(); cy.getByTestId('Node-more').click(); cy.getByTestId('new-object').click(); - cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1); + cy.getByTestId('childCreationDescription').children('[role="combobox"]').invoke('text').should('have.length.gt', 1); cy.getByTestId('childCreationDescription').click(); cy.getByTestId('childCreationDescription').get('[data-value="Border node"]').should('exist').click(); cy.getByTestId('create-object').click(); @@ -248,7 +251,7 @@ describe('/projects/:projectId/edit - Studio', () => { cy.getByTestId('delete').click(); cy.getByTestId('Entity1 Node-more').click(); cy.getByTestId('new-object').click(); - cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1); + cy.getByTestId('childCreationDescription').children('[role="combobox"]').invoke('text').should('have.length.gt', 1); cy.getByTestId('childCreationDescription').click(); cy.getByTestId('childCreationDescription').get('[data-value="Style Rectangular"]').should('exist').click(); cy.getByTestId('create-object').click(); @@ -263,7 +266,7 @@ describe('/projects/:projectId/edit - Studio', () => { cy.get('[data-testid$=" Diagram Description"]').dblclick(); cy.get('[data-testid$=" Diagram Description-more"]').click(); cy.getByTestId('new-object').click(); - cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1); + cy.getByTestId('childCreationDescription').children('[role="combobox"]').invoke('text').should('have.length.gt', 1); cy.getByTestId('childCreationDescription').click(); cy.getByTestId('childCreationDescription').get('[data-value="Edge Description"]').should('exist').click(); cy.getByTestId('create-object').click(); @@ -277,7 +280,7 @@ describe('/projects/:projectId/edit - Studio', () => { cy.getByTestId('ViewNewModel').dblclick(); cy.getByTestId('View-more').click(); cy.getByTestId('new-object').click(); - cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1); + cy.getByTestId('childCreationDescription').children('[role="combobox"]').invoke('text').should('have.length.gt', 1); cy.getByTestId('childCreationDescription').click(); cy.getByTestId('childCreationDescription').get('[data-value="Form Description"]').should('exist').click(); cy.getByTestId('create-object').click(); @@ -286,7 +289,7 @@ describe('/projects/:projectId/edit - Studio', () => { cy.getByTestId('GroupDescription').dblclick(); cy.getByTestId('GroupDescription-more').click(); cy.getByTestId('new-object').click(); - cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1); + cy.getByTestId('childCreationDescription').children('[role="combobox"]').invoke('text').should('have.length.gt', 1); cy.getByTestId('childCreationDescription').click(); cy.getByTestId('childCreationDescription') .get('[data-value="Widgets Textfield Description"]') @@ -295,7 +298,7 @@ describe('/projects/:projectId/edit - Studio', () => { cy.getByTestId('create-object').click(); cy.getByTestId('TextfieldDescription-more').click(); cy.getByTestId('new-object').click(); - cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1); + cy.getByTestId('childCreationDescription').children('[role="combobox"]').invoke('text').should('have.length.gt', 1); cy.getByTestId('childCreationDescription').click(); cy.getByTestId('childCreationDescription') .get('[data-value="Style Textfield Description Style"]') @@ -317,7 +320,7 @@ describe('/projects/:projectId/edit - Studio', () => { cy.get('[data-testid$=" Diagram Description"]').dblclick(); cy.get('[data-testid$=" Diagram Description-more"]').click(); cy.getByTestId('new-object').click(); - cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1); + cy.getByTestId('childCreationDescription').children('[role="combobox"]').invoke('text').should('have.length.gt', 1); cy.getByTestId('childCreationDescription').click(); cy.getByTestId('childCreationDescription').get('[data-value="Node Description"]').should('exist').click(); cy.getByTestId('create-object').click(); diff --git a/integration-tests/cypress/support/explorerCommands.js b/integration-tests/cypress/support/explorerCommands.js index 57f551fa2ae..a24b24706f9 100644 --- a/integration-tests/cypress/support/explorerCommands.js +++ b/integration-tests/cypress/support/explorerCommands.js @@ -15,7 +15,7 @@ Cypress.Commands.add('createChildObject', (parent, objectType) => { cy.getByTestId(`${parent}-more`).click(); cy.getByTestId('new-object').click(); cy.getByTestId('new-object-modal').should('exist'); - cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1); + cy.getByTestId('childCreationDescription').children('[role="combobox"]').invoke('text').should('have.length.gt', 1); cy.getByTestId('childCreationDescription').click(); cy.getByTestId('childCreationDescription').get(`[data-value="${objectType}"]`).should('exist').click(); cy.getByTestId('create-object').click(); @@ -25,7 +25,7 @@ Cypress.Commands.add('createChildObject', (parent, objectType) => { Cypress.Commands.add('createRepresentationFromExplorer', (parent, representationType) => { cy.getByTestId(`${parent}-more`).click(); cy.getByTestId('treeitem-contextmenu').findByTestId('new-representation').click(); - cy.getByTestId('representationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1); + cy.getByTestId('representationDescription').children('[role="combobox"]').invoke('text').should('have.length.gt', 1); cy.getByTestId('representationDescription').click(); cy.getByTestId(representationType).should('exist').click(); cy.getByTestId('create-representation').click(); diff --git a/integration-tests/cypress/support/studioCommands.js b/integration-tests/cypress/support/studioCommands.js index ae5a4b652fe..0132ee29ec3 100644 --- a/integration-tests/cypress/support/studioCommands.js +++ b/integration-tests/cypress/support/studioCommands.js @@ -13,7 +13,7 @@ Cypress.Commands.add('createInstanceFromDomainModel', (domain, withReactFlowRepresentation) => { cy.url().should('eq', Cypress.config().baseUrl + '/projects'); - cy.get('[title="Blank Studio"]').should('be.visible'); + cy.get('[aria-label="Blank Studio"]').should('be.visible'); cy.getByTestId('create').click(); cy.url().should('eq', Cypress.config().baseUrl + '/new/project'); @@ -23,7 +23,7 @@ Cypress.Commands.add('createInstanceFromDomainModel', (domain, withReactFlowRepr cy.getByTestId('empty').click(); cy.getByTestId('Others...-more').click(); cy.getByTestId('new-object').click(); - cy.getByTestId('domain').children('[role="button"]').invoke('text').should('have.length.gt', 1); + cy.getByTestId('domain').children('[role="combobox"]').invoke('text').should('have.length.gt', 1); cy.getByTestId('domain').find('div').first().should('not.have.attr', 'aria-disabled'); cy.getByTestId('domain').click(); cy.getByTestId('domain').get(`[data-value="domain://${domain}"]`).should('exist').click(); @@ -31,7 +31,10 @@ Cypress.Commands.add('createInstanceFromDomainModel', (domain, withReactFlowRepr if (withReactFlowRepresentation) { cy.getByTestId('Root-more').click(); cy.getByTestId('treeitem-contextmenu').findByTestId('new-representation').click(); - cy.getByTestId('representationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1); + cy.getByTestId('representationDescription') + .children('[role="combobox"]') + .invoke('text') + .should('have.length.gt', 1); cy.getByTestId('representationDescription').click(); cy.get(`[data-testid="${domain} Diagram Description"]`).should('exist').click(); cy.getByTestId('name').clear().type('diagram__REACT_FLOW'); diff --git a/integration-tests/cypress/workbench/Explorer.ts b/integration-tests/cypress/workbench/Explorer.ts index 72698864569..2dc3ddf7814 100644 --- a/integration-tests/cypress/workbench/Explorer.ts +++ b/integration-tests/cypress/workbench/Explorer.ts @@ -57,7 +57,7 @@ export class Explorer { this.getTreeItemByLabel(objectTreeItemLabel).find('button').click(); cy.getByTestId('new-object').click(); - cy.getByTestId('childCreationDescription').children('[role="button"]').invoke('text').should('have.length.gt', 1); + cy.getByTestId('childCreationDescription').children('[role="combobox"]').invoke('text').should('have.length.gt', 1); cy.getByTestId('childCreationDescription').click(); cy.getByTestId('childCreationDescription') .get(`[data-value="${childCreationDescriptionLabel}"]`) @@ -112,7 +112,7 @@ export class Explorer { this.getTreeItemByLabel(treeItemLabel).trigger('dragstart', { dataTransfer }); } - public createNewModel(modelName: string, modelType:string): void { + public createNewModel(modelName: string, modelType: string): void { cy.getByTestId('new-model').should('exist'); cy.getByTestId('tree-filter-menu-icon').should('exist'); // trick to avoid error if this menu is not render yet cy.getByTestId('new-model').click(); diff --git a/package-lock.json b/package-lock.json index 0a82a44a116..37490719752 100644 --- a/package-lock.json +++ b/package-lock.json @@ -77,7 +77,6 @@ "version": "7.23.5", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz", "integrity": "sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==", - "dev": true, "dependencies": { "@babel/highlight": "^7.23.4", "chalk": "^2.4.2" @@ -90,7 +89,6 @@ "version": "3.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", - "dev": true, "dependencies": { "color-convert": "^1.9.0" }, @@ -102,7 +100,6 @@ "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "dev": true, "dependencies": { "ansi-styles": "^3.2.1", "escape-string-regexp": "^1.0.5", @@ -116,7 +113,6 @@ "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "dev": true, "dependencies": { "color-name": "1.1.3" } @@ -124,14 +120,12 @@ "node_modules/@babel/code-frame/node_modules/color-name": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", - "dev": true + "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" }, "node_modules/@babel/code-frame/node_modules/has-flag": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", - "dev": true, "engines": { "node": ">=4" } @@ -140,7 +134,6 @@ "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "dev": true, "dependencies": { "has-flag": "^3.0.0" }, @@ -256,7 +249,6 @@ "version": "7.22.15", "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz", "integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==", - "dev": true, "dependencies": { "@babel/types": "^7.22.15" }, @@ -320,7 +312,6 @@ "version": "7.23.4", "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz", "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==", - "dev": true, "engines": { "node": ">=6.9.0" } @@ -329,7 +320,6 @@ "version": "7.22.20", "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz", "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==", - "dev": true, "engines": { "node": ">=6.9.0" } @@ -361,7 +351,6 @@ "version": "7.23.4", "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz", "integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==", - "dev": true, "dependencies": { "@babel/helper-validator-identifier": "^7.22.20", "chalk": "^2.4.2", @@ -375,7 +364,6 @@ "version": "3.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", - "dev": true, "dependencies": { "color-convert": "^1.9.0" }, @@ -387,7 +375,6 @@ "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "dev": true, "dependencies": { "ansi-styles": "^3.2.1", "escape-string-regexp": "^1.0.5", @@ -401,7 +388,6 @@ "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "dev": true, "dependencies": { "color-name": "1.1.3" } @@ -409,14 +395,12 @@ "node_modules/@babel/highlight/node_modules/color-name": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", - "dev": true + "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" }, "node_modules/@babel/highlight/node_modules/has-flag": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", - "dev": true, "engines": { "node": ">=4" } @@ -425,7 +409,6 @@ "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "dev": true, "dependencies": { "has-flag": "^3.0.0" }, @@ -476,9 +459,9 @@ } }, "node_modules/@babel/runtime": { - "version": "7.23.5", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.5.tgz", - "integrity": "sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w==", + "version": "7.24.5", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.5.tgz", + "integrity": "sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==", "dependencies": { "regenerator-runtime": "^0.14.0" }, @@ -525,7 +508,6 @@ "version": "7.23.5", "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.5.tgz", "integrity": "sha512-ON5kSOJwVO6xXVRTvOI0eOnWe7VdUcIpsovGo9U/Br4Ie4UVFQTboO2cYnDhAGU6Fp+UxSiT+pMft0SMHfuq6w==", - "dev": true, "dependencies": { "@babel/helper-string-parser": "^7.23.4", "@babel/helper-validator-identifier": "^7.22.20", @@ -597,10 +579,6 @@ "resolved": "packages/forms/frontend/sirius-components-widget-reference", "link": true }, - "node_modules/@eclipse-sirius/sirius-components-widget-slider": { - "resolved": "packages/forms/frontend/sirius-components-widget-slider", - "link": true - }, "node_modules/@eclipse-sirius/sirius-web": { "resolved": "packages/sirius-web/frontend/sirius-web", "link": true @@ -609,15 +587,91 @@ "resolved": "packages/sirius-web/frontend/sirius-web-application", "link": true }, + "node_modules/@emotion/babel-plugin": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz", + "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==", + "peer": true, + "dependencies": { + "@babel/helper-module-imports": "^7.16.7", + "@babel/runtime": "^7.18.3", + "@emotion/hash": "^0.9.1", + "@emotion/memoize": "^0.8.1", + "@emotion/serialize": "^1.1.2", + "babel-plugin-macros": "^3.1.0", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^4.0.0", + "find-root": "^1.1.0", + "source-map": "^0.5.7", + "stylis": "4.2.0" + } + }, + "node_modules/@emotion/babel-plugin/node_modules/@emotion/hash": { + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", + "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==", + "peer": true + }, + "node_modules/@emotion/babel-plugin/node_modules/convert-source-map": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz", + "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==", + "peer": true + }, + "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", + "peer": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@emotion/babel-plugin/node_modules/source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==", + "peer": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/@emotion/babel-plugin/node_modules/stylis": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz", + "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==", + "peer": true + }, + "node_modules/@emotion/cache": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz", + "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==", + "dependencies": { + "@emotion/memoize": "^0.8.1", + "@emotion/sheet": "^1.2.2", + "@emotion/utils": "^1.2.1", + "@emotion/weak-memoize": "^0.3.1", + "stylis": "4.2.0" + } + }, + "node_modules/@emotion/cache/node_modules/stylis": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz", + "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==" + }, "node_modules/@emotion/hash": { "version": "0.8.0", "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", - "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==" + "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==", + "peer": true }, "node_modules/@emotion/is-prop-valid": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz", - "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==", + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz", + "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==", "dependencies": { "@emotion/memoize": "^0.8.1" } @@ -627,11 +681,105 @@ "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" }, + "node_modules/@emotion/react": { + "version": "11.11.4", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.4.tgz", + "integrity": "sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==", + "peer": true, + "dependencies": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.11.0", + "@emotion/cache": "^11.11.0", + "@emotion/serialize": "^1.1.3", + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1", + "@emotion/utils": "^1.2.1", + "@emotion/weak-memoize": "^0.3.1", + "hoist-non-react-statics": "^3.3.1" + }, + "peerDependencies": { + "react": ">=16.8.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@emotion/serialize": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.4.tgz", + "integrity": "sha512-RIN04MBT8g+FnDwgvIUi8czvr1LU1alUMI05LekWB5DGyTm8cCBMCRpq3GqaiyEDRptEXOyXnvZ58GZYu4kBxQ==", + "dependencies": { + "@emotion/hash": "^0.9.1", + "@emotion/memoize": "^0.8.1", + "@emotion/unitless": "^0.8.1", + "@emotion/utils": "^1.2.1", + "csstype": "^3.0.2" + } + }, + "node_modules/@emotion/serialize/node_modules/@emotion/hash": { + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", + "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==" + }, + "node_modules/@emotion/serialize/node_modules/csstype": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" + }, + "node_modules/@emotion/sheet": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz", + "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==" + }, + "node_modules/@emotion/styled": { + "version": "11.11.5", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.5.tgz", + "integrity": "sha512-/ZjjnaNKvuMPxcIiUkf/9SHoG4Q196DRl1w82hQ3WCsjo1IUR8uaGWrC6a87CrYAW0Kb/pK7hk8BnLgLRi9KoQ==", + "devOptional": true, + "peer": true, + "dependencies": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.11.0", + "@emotion/is-prop-valid": "^1.2.2", + "@emotion/serialize": "^1.1.4", + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1", + "@emotion/utils": "^1.2.1" + }, + "peerDependencies": { + "@emotion/react": "^11.0.0-rc.0", + "react": ">=16.8.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@emotion/unitless": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==" }, + "node_modules/@emotion/use-insertion-effect-with-fallbacks": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz", + "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==", + "peer": true, + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/@emotion/utils": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz", + "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==" + }, + "node_modules/@emotion/weak-memoize": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz", + "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==" + }, "node_modules/@esbuild/android-arm": { "version": "0.18.20", "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz", @@ -1390,6 +1538,7 @@ "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.12.4.tgz", "integrity": "sha512-tr7xekNlM9LjA6pagJmL8QCgZXaubWUwkJnoYcMKd4gw/t4XiyvnTkjdGrUVicyB2BsdaAv1tvow45bPM4sSwQ==", "deprecated": "Material UI v4 doesn't receive active development since September 2021. See the guide https://mui.com/material-ui/migration/migration-v4/ to upgrade to v5.", + "peer": true, "dependencies": { "@babel/runtime": "^7.4.4", "@material-ui/styles": "^4.11.5", @@ -1426,6 +1575,7 @@ "version": "4.11.3", "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.3.tgz", "integrity": "sha512-IKHlyx6LDh8n19vzwH5RtHIOHl9Tu90aAAxcbWME6kp4dmvODM3UvOHJeMIDzUbd4muuJKHmlNoBN+mDY4XkBA==", + "peer": true, "dependencies": { "@babel/runtime": "^7.4.4" }, @@ -1444,38 +1594,12 @@ } } }, - "node_modules/@material-ui/lab": { - "version": "4.0.0-alpha.61", - "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.61.tgz", - "integrity": "sha512-rSzm+XKiNUjKegj8bzt5+pygZeckNLOr+IjykH8sYdVk7dE9y2ZuUSofiMV2bJk3qU+JHwexmw+q0RyNZB9ugg==", - "deprecated": "Material UI v4 doesn't receive active development since September 2021. See the guide https://mui.com/material-ui/migration/migration-v4/ to upgrade to v5.", - "dependencies": { - "@babel/runtime": "^7.4.4", - "@material-ui/utils": "^4.11.3", - "clsx": "^1.0.4", - "prop-types": "^15.7.2", - "react-is": "^16.8.0 || ^17.0.0" - }, - "engines": { - "node": ">=8.0.0" - }, - "peerDependencies": { - "@material-ui/core": "^4.12.1", - "@types/react": "^16.8.6 || ^17.0.0", - "react": "^16.8.0 || ^17.0.0", - "react-dom": "^16.8.0 || ^17.0.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, "node_modules/@material-ui/styles": { "version": "4.11.5", "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.5.tgz", "integrity": "sha512-o/41ot5JJiUsIETME9wVLAJrmIWL3j0R0Bj2kCOLbSfqEkKf0fmaPt+5vtblUh5eXr2S+J/8J3DaCb10+CzPGA==", "deprecated": "Material UI v4 doesn't receive active development since September 2021. See the guide https://mui.com/material-ui/migration/migration-v4/ to upgrade to v5.", + "peer": true, "dependencies": { "@babel/runtime": "^7.4.4", "@emotion/hash": "^0.8.0", @@ -1516,6 +1640,7 @@ "version": "4.12.2", "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.12.2.tgz", "integrity": "sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw==", + "peer": true, "dependencies": { "@babel/runtime": "^7.4.4", "@material-ui/utils": "^4.11.3", @@ -1544,6 +1669,7 @@ "version": "5.1.0", "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz", "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==", + "peer": true, "peerDependencies": { "@types/react": "*" }, @@ -1557,6 +1683,7 @@ "version": "4.11.3", "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.3.tgz", "integrity": "sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==", + "peer": true, "dependencies": { "@babel/runtime": "^7.4.4", "prop-types": "^15.7.2", @@ -1570,6 +1697,351 @@ "react-dom": "^16.8.0 || ^17.0.0" } }, + "node_modules/@mui/base": { + "version": "5.0.0-beta.40", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.40.tgz", + "integrity": "sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@floating-ui/react-dom": "^2.0.8", + "@mui/types": "^7.2.14", + "@mui/utils": "^5.15.14", + "@popperjs/core": "^2.11.8", + "clsx": "^2.1.0", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/base/node_modules/@floating-ui/react-dom": { + "version": "2.0.9", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.9.tgz", + "integrity": "sha512-q0umO0+LQK4+p6aGyvzASqKbKOJcAHJ7ycE9CuUvfx3s9zTHWmGJTPOIlM/hmSBfUfg/XfY5YhLBLR/LHwShQQ==", + "dependencies": { + "@floating-ui/dom": "^1.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@mui/base/node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "engines": { + "node": ">=6" + } + }, + "node_modules/@mui/core-downloads-tracker": { + "version": "5.15.15", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.15.tgz", + "integrity": "sha512-aXnw29OWQ6I5A47iuWEI6qSSUfH6G/aCsW9KmW3LiFqr7uXZBK4Ks+z8G+qeIub8k0T5CMqlT2q0L+ZJTMrqpg==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + } + }, + "node_modules/@mui/icons-material": { + "version": "5.15.15", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.15.15.tgz", + "integrity": "sha512-kkeU/pe+hABcYDH6Uqy8RmIsr2S/y5bP2rp+Gat4CcRjCcVne6KudS1NrZQhUCRysrTDCAhcbcf9gt+/+pGO2g==", + "dependencies": { + "@babel/runtime": "^7.23.9" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@mui/material": "^5.0.0", + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/material": { + "version": "5.15.15", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.15.tgz", + "integrity": "sha512-3zvWayJ+E1kzoIsvwyEvkTUKVKt1AjchFFns+JtluHCuvxgKcLSRJTADw37k0doaRtVAsyh8bz9Afqzv+KYrIA==", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@mui/base": "5.0.0-beta.40", + "@mui/core-downloads-tracker": "^5.15.15", + "@mui/system": "^5.15.15", + "@mui/types": "^7.2.14", + "@mui/utils": "^5.15.14", + "@types/react-transition-group": "^4.4.10", + "clsx": "^2.1.0", + "csstype": "^3.1.3", + "prop-types": "^15.8.1", + "react-is": "^18.2.0", + "react-transition-group": "^4.4.5" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@emotion/react": "^11.5.0", + "@emotion/styled": "^11.3.0", + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/material/node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "engines": { + "node": ">=6" + } + }, + "node_modules/@mui/material/node_modules/csstype": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" + }, + "node_modules/@mui/material/node_modules/react-is": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", + "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==" + }, + "node_modules/@mui/private-theming": { + "version": "5.15.14", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.14.tgz", + "integrity": "sha512-UH0EiZckOWcxiXLX3Jbb0K7rC8mxTr9L9l6QhOZxYc4r8FHUkefltV9VDGLrzCaWh30SQiJvAEd7djX3XXY6Xw==", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@mui/utils": "^5.15.14", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/styled-engine": { + "version": "5.15.14", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.14.tgz", + "integrity": "sha512-RILkuVD8gY6PvjZjqnWhz8fu68dVkqhM5+jYWfB5yhlSQKg+2rHkmEwm75XIeAqI3qwOndK6zELK5H6Zxn4NHw==", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@emotion/cache": "^11.11.0", + "csstype": "^3.1.3", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@emotion/react": "^11.4.1", + "@emotion/styled": "^11.3.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + } + } + }, + "node_modules/@mui/styled-engine/node_modules/csstype": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" + }, + "node_modules/@mui/system": { + "version": "5.15.15", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.15.tgz", + "integrity": "sha512-aulox6N1dnu5PABsfxVGOZffDVmlxPOVgj56HrUnJE8MCSh8lOvvkd47cebIVQQYAjpwieXQXiDPj5pwM40jTQ==", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@mui/private-theming": "^5.15.14", + "@mui/styled-engine": "^5.15.14", + "@mui/types": "^7.2.14", + "@mui/utils": "^5.15.14", + "clsx": "^2.1.0", + "csstype": "^3.1.3", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@emotion/react": "^11.5.0", + "@emotion/styled": "^11.3.0", + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/system/node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "engines": { + "node": ">=6" + } + }, + "node_modules/@mui/system/node_modules/csstype": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" + }, + "node_modules/@mui/types": { + "version": "7.2.14", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.14.tgz", + "integrity": "sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ==", + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/utils": { + "version": "5.15.14", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.14.tgz", + "integrity": "sha512-0lF/7Hh/ezDv5X7Pry6enMsbYyGKjADzvHyo3Qrc/SSlTsQ1VkbDMbH0m2t3OR5iIVLwMoxwM7yGd+6FCMtTFA==", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@types/prop-types": "^15.7.11", + "prop-types": "^15.8.1", + "react-is": "^18.2.0" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/utils/node_modules/react-is": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", + "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==" + }, + "node_modules/@mui/x-tree-view": { + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/@mui/x-tree-view/-/x-tree-view-7.3.1.tgz", + "integrity": "sha512-sGVj1+0F4B7TpAsq1xwKN/9kLO0Px/ZH/Vr3vANOc+VKg/vFtHjZCCzmh9PEZun/vZNOGpMWXccDEZqUi3QjYA==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.24.0", + "@mui/base": "^5.0.0-beta.40", + "@mui/system": "^5.15.14", + "@mui/utils": "^5.15.14", + "@types/react-transition-group": "^4.4.10", + "clsx": "^2.1.0", + "prop-types": "^15.8.1", + "react-transition-group": "^4.4.5" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@emotion/react": "^11.9.0", + "@emotion/styled": "^11.8.1", + "@mui/material": "^5.15.14", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + } + }, + "node_modules/@mui/x-tree-view/node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "dev": true, + "engines": { + "node": ">=6" + } + }, "node_modules/@ObeoNetwork/gantt-task-react": { "version": "0.4.9", "resolved": "https://npm.pkg.github.com/download/@ObeoNetwork/gantt-task-react/0.4.9/c8a8fa0c3ec657f40bdfbe4318c985405c670d2d", @@ -1640,6 +2112,15 @@ "redux": "^2.0.0 || ^3.0.0 || ^4.0.0-0" } }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@reactflow/background": { "version": "11.3.6", "resolved": "https://registry.npmjs.org/@reactflow/background/-/background-11.3.6.tgz", @@ -2165,6 +2646,12 @@ "integrity": "sha512-qjd88DrCxupx/kJD5yQgZdcYKZKSIGBVDIBE1/LTGcNm3d2Np/jxojkdePDdfnBHJc5W7vSMpbJ1aB7p/Py69A==", "dev": true }, + "node_modules/@types/parse-json": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz", + "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==", + "peer": true + }, "node_modules/@types/prop-types": { "version": "15.7.11", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz", @@ -2612,6 +3099,21 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/babel-plugin-macros": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz", + "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==", + "peer": true, + "dependencies": { + "@babel/runtime": "^7.12.5", + "cosmiconfig": "^7.0.0", + "resolve": "^1.19.0" + }, + "engines": { + "node": ">=10", + "npm": ">=6" + } + }, "node_modules/backo2": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz", @@ -2702,6 +3204,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/callsites": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", + "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", + "peer": true, + "engines": { + "node": ">=6" + } + }, "node_modules/camelize": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", @@ -2844,6 +3355,22 @@ "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==", "dev": true }, + "node_modules/cosmiconfig": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz", + "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==", + "peer": true, + "dependencies": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.2.1", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.10.0" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/css-color-keywords": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", @@ -2866,6 +3393,7 @@ "version": "2.0.8", "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz", "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==", + "peer": true, "dependencies": { "@babel/runtime": "^7.8.3", "is-in-browser": "^1.0.2" @@ -2898,7 +3426,8 @@ "node_modules/csstype": { "version": "2.6.21", "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz", - "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==" + "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==", + "peer": true }, "node_modules/d3": { "version": "7.0.0", @@ -3478,6 +4007,15 @@ "resolved": "https://registry.npmjs.org/elkjs/-/elkjs-0.8.2.tgz", "integrity": "sha512-L6uRgvZTH+4OF5NE/MBbzQx/WYpru1xCBE9respNj6qznEewGUIfhzmm7horWWxbNO2M0WckQypGctR8lH79xQ==" }, + "node_modules/error-ex": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", + "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", + "peer": true, + "dependencies": { + "is-arrayish": "^0.2.1" + } + }, "node_modules/es-get-iterator": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.3.tgz", @@ -3548,7 +4086,6 @@ "version": "1.0.5", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", - "dev": true, "engines": { "node": ">=0.8.0" } @@ -3622,6 +4159,12 @@ "integrity": "sha512-G3BSX9cfKttjr+2o1O22tYMLq0DPluZnYtq1rXumE1SpL/F/SLIfHx08WYQoWSIpeMYf8sRbJ8++71+v6Pnxfg==", "dev": true }, + "node_modules/find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==", + "peer": true + }, "node_modules/fontsource-roboto": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/fontsource-roboto/-/fontsource-roboto-4.0.0.tgz", @@ -3675,7 +4218,6 @@ "version": "1.1.2", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", - "dev": true, "funding": { "url": "https://github.com/sponsors/ljharb" } @@ -3858,7 +4400,6 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz", "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==", - "dev": true, "dependencies": { "function-bind": "^1.1.2" }, @@ -3945,7 +4486,8 @@ "node_modules/hyphenate-style-name": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz", - "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==" + "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==", + "peer": true }, "node_modules/iconv-lite": { "version": "0.6.3", @@ -3966,6 +4508,22 @@ "invariant": "^2.2.0" } }, + "node_modules/import-fresh": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", + "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==", + "peer": true, + "dependencies": { + "parent-module": "^1.0.0", + "resolve-from": "^4.0.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/inflight": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", @@ -4042,6 +4600,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-arrayish": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", + "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==", + "peer": true + }, "node_modules/is-bigint": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz", @@ -4082,6 +4646,18 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-core-module": { + "version": "2.13.1", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz", + "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==", + "peer": true, + "dependencies": { + "hasown": "^2.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/is-date-object": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz", @@ -4100,7 +4676,8 @@ "node_modules/is-in-browser": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz", - "integrity": "sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g==" + "integrity": "sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g==", + "peer": true }, "node_modules/is-map": { "version": "2.0.2", @@ -4380,6 +4957,12 @@ "node": ">=4" } }, + "node_modules/json-parse-even-better-errors": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", + "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==", + "peer": true + }, "node_modules/json5": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", @@ -4402,6 +4985,7 @@ "version": "10.10.0", "resolved": "https://registry.npmjs.org/jss/-/jss-10.10.0.tgz", "integrity": "sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==", + "peer": true, "dependencies": { "@babel/runtime": "^7.3.1", "csstype": "^3.0.2", @@ -4417,6 +5001,7 @@ "version": "10.10.0", "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.10.0.tgz", "integrity": "sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==", + "peer": true, "dependencies": { "@babel/runtime": "^7.3.1", "hyphenate-style-name": "^1.0.3", @@ -4427,6 +5012,7 @@ "version": "10.10.0", "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.10.0.tgz", "integrity": "sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ==", + "peer": true, "dependencies": { "@babel/runtime": "^7.3.1", "jss": "10.10.0" @@ -4436,6 +5022,7 @@ "version": "10.10.0", "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.10.0.tgz", "integrity": "sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==", + "peer": true, "dependencies": { "@babel/runtime": "^7.3.1", "jss": "10.10.0" @@ -4445,6 +5032,7 @@ "version": "10.10.0", "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.10.0.tgz", "integrity": "sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA==", + "peer": true, "dependencies": { "@babel/runtime": "^7.3.1", "jss": "10.10.0", @@ -4455,6 +5043,7 @@ "version": "10.10.0", "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.10.0.tgz", "integrity": "sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg==", + "peer": true, "dependencies": { "@babel/runtime": "^7.3.1", "jss": "10.10.0" @@ -4464,6 +5053,7 @@ "version": "10.10.0", "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.10.0.tgz", "integrity": "sha512-uEFJFgaCtkXeIPgki8ICw3Y7VMkL9GEan6SqmT9tqpwM+/t+hxfMUdU4wQ0MtOiMNWhwnckBV0IebrKcZM9C0g==", + "peer": true, "dependencies": { "@babel/runtime": "^7.3.1", "jss": "10.10.0", @@ -4474,6 +5064,7 @@ "version": "10.10.0", "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.10.0.tgz", "integrity": "sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg==", + "peer": true, "dependencies": { "@babel/runtime": "^7.3.1", "css-vendor": "^2.0.8", @@ -4483,7 +5074,8 @@ "node_modules/jss/node_modules/csstype": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", - "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==", + "peer": true }, "node_modules/just-curry-it": { "version": "3.2.1", @@ -4517,6 +5109,12 @@ "url": "https://github.com/sponsors/dmonad" } }, + "node_modules/lines-and-columns": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", + "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", + "peer": true + }, "node_modules/local-pkg": { "version": "0.4.3", "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.3.tgz", @@ -4864,6 +5462,36 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/parent-module": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", + "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==", + "peer": true, + "dependencies": { + "callsites": "^3.0.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/parse-json": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", + "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", + "peer": true, + "dependencies": { + "@babel/code-frame": "^7.0.0", + "error-ex": "^1.3.1", + "json-parse-even-better-errors": "^2.3.0", + "lines-and-columns": "^1.1.6" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/parse5": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz", @@ -4879,6 +5507,12 @@ "node": ">=0.10.0" } }, + "node_modules/path-parse": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", + "peer": true + }, "node_modules/path-to-regexp": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz", @@ -4892,6 +5526,15 @@ "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==" }, + "node_modules/path-type": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", + "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==", + "peer": true, + "engines": { + "node": ">=8" + } + }, "node_modules/pathe": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.1.tgz", @@ -4938,7 +5581,8 @@ "node_modules/popper.js": { "version": "1.16.1-lts", "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz", - "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==" + "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==", + "peer": true }, "node_modules/postcss": { "version": "8.4.32", @@ -5328,6 +5972,32 @@ "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==", "dev": true }, + "node_modules/resolve": { + "version": "1.22.8", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", + "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==", + "peer": true, + "dependencies": { + "is-core-module": "^2.13.0", + "path-parse": "^1.0.7", + "supports-preserve-symlinks-flag": "^1.0.0" + }, + "bin": { + "resolve": "bin/resolve" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/resolve-from": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", + "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", + "peer": true, + "engines": { + "node": ">=4" + } + }, "node_modules/resolve-pathname": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz", @@ -5603,6 +6273,18 @@ "node": ">=8" } }, + "node_modules/supports-preserve-symlinks-flag": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", + "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", + "peer": true, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/symbol-observable": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-4.0.0.tgz", @@ -5710,7 +6392,6 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==", - "dev": true, "engines": { "node": ">=4" } @@ -5776,6 +6457,30 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" }, + "node_modules/tss-react": { + "version": "4.9.7", + "resolved": "https://registry.npmjs.org/tss-react/-/tss-react-4.9.7.tgz", + "integrity": "sha512-3BhmQH6DeIujDRtvU9UlxadN2SakriKOwdaNp6cn4JSx+YNSF0lFWGNBzQzpRQ7laCbRm9YKBKVolwYhBv+yyg==", + "dependencies": { + "@emotion/cache": "*", + "@emotion/serialize": "*", + "@emotion/utils": "*" + }, + "peerDependencies": { + "@emotion/react": "^11.4.1", + "@emotion/server": "^11.4.0", + "@mui/material": "^5.0.0", + "react": "^16.8.0 || ^17.0.2 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/server": { + "optional": true + }, + "@mui/material": { + "optional": true + } + } + }, "node_modules/turbo": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/turbo/-/turbo-1.4.2.tgz", @@ -6498,6 +7203,15 @@ "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", "dev": true }, + "node_modules/yaml": { + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", + "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", + "peer": true, + "engines": { + "node": ">= 6" + } + }, "node_modules/yjs": { "version": "13.6.10", "resolved": "https://registry.npmjs.org/yjs/-/yjs-13.6.10.tgz", @@ -6595,8 +7309,8 @@ "devDependencies": { "@apollo/client": "3.8.1", "@eclipse-sirius/sirius-components-tsconfig": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", "@types/react": "17.0.37", "@vitejs/plugin-react": "4.0.4", "@vitest/coverage-v8": "0.34.2", @@ -6606,6 +7320,7 @@ "prettier": "2.7.1", "react": "17.0.2", "rollup-plugin-peer-deps-external": "2.2.4", + "tss-react": "4.9.7", "typescript": "5.1.6", "vite": "4.4.9", "vitest": "0.34.2", @@ -6613,11 +7328,12 @@ }, "peerDependencies": { "@apollo/client": "3.8.1", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", "@xstate/react": "1.6.3", "graphql": "16.8.0", "react": "17.0.2", + "tss-react": "4.9.7", "xstate": "4.32.1" } }, @@ -6629,8 +7345,8 @@ "@apollo/client": "3.8.1", "@eclipse-sirius/sirius-components-core": "*", "@eclipse-sirius/sirius-components-tsconfig": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", "@ObeoNetwork/react-trello": "2.4.11", "@types/react": "17.0.37", "@vitejs/plugin-react": "4.0.4", @@ -6648,8 +7364,8 @@ "peerDependencies": { "@apollo/client": "3.8.1", "@eclipse-sirius/sirius-components-core": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", "@ObeoNetwork/react-trello": "2.4.11", "@xstate/react": "1.6.3", "graphql": "16.8.0", @@ -6666,50 +7382,8 @@ "@apollo/client": "3.8.1", "@eclipse-sirius/sirius-components-core": "*", "@eclipse-sirius/sirius-components-tsconfig": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", - "@rollup/plugin-image": "2.1.1", - "@types/react": "17.0.37", - "@types/react-dom": "17.0.9", - "@vitejs/plugin-react": "4.0.4", - "@vitest/coverage-v8": "0.34.2", - "elkjs": "0.8.2", - "graphql": "16.8.0", - "html-to-image": "1.11.11", - "jsdom": "16.7.0", - "prettier": "2.7.1", - "react": "17.0.2", - "react-dom": "17.0.2", - "reactflow": "11.10.1", - "rollup-plugin-peer-deps-external": "2.2.4", - "typescript": "5.1.6", - "vite": "4.4.9", - "vitest": "0.34.2" - }, - "peerDependencies": { - "@apollo/client": "3.8.1", - "@eclipse-sirius/sirius-components-core": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", - "elkjs": "0.8.2", - "graphql": "16.8.0", - "html-to-image": "1.11.11", - "react": "17.0.2", - "react-dom": "17.0.2", - "reactflow": "11.10.1" - } - }, - "packages/diagrams/frontend/sirius-components-diagrams-reactflow": { - "name": "@eclipse-sirius/sirius-components-diagrams-reactflow", - "version": "2024.1.1", - "extraneous": true, - "license": "EPL-2.0", - "devDependencies": { - "@apollo/client": "3.8.1", - "@eclipse-sirius/sirius-components-core": "*", - "@eclipse-sirius/sirius-components-tsconfig": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", "@rollup/plugin-image": "2.1.1", "@types/react": "17.0.37", "@types/react-dom": "17.0.9", @@ -6731,8 +7405,8 @@ "peerDependencies": { "@apollo/client": "3.8.1", "@eclipse-sirius/sirius-components-core": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", "elkjs": "0.8.2", "graphql": "16.8.0", "html-to-image": "1.11.11", @@ -6751,8 +7425,9 @@ "@eclipse-sirius/sirius-components-core": "*", "@eclipse-sirius/sirius-components-forms": "*", "@eclipse-sirius/sirius-components-tsconfig": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", + "@mui/x-tree-view": "7.3.1", "@testing-library/react": "12.1.2", "@testing-library/user-event": "13.2.1", "@types/react": "17.0.37", @@ -6773,8 +7448,9 @@ "@eclipse-sirius/sirius-components-charts": "*", "@eclipse-sirius/sirius-components-core": "*", "@eclipse-sirius/sirius-components-forms": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", + "@mui/x-tree-view": "7.3.1", "@xstate/react": "1.6.3", "graphql": "16.8.0", "react": "17.0.2", @@ -6792,9 +7468,8 @@ "@eclipse-sirius/sirius-components-core": "*", "@eclipse-sirius/sirius-components-tsconfig": "*", "@lexical/react": "0.8.1", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", - "@material-ui/lab": "4.0.0-alpha.61", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", "@testing-library/react": "12.1.2", "@testing-library/user-event": "13.2.1", "@types/react": "17.0.37", @@ -6819,9 +7494,8 @@ "@eclipse-sirius/sirius-components-charts": "*", "@eclipse-sirius/sirius-components-core": "*", "@lexical/react": "0.8.1", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", - "@material-ui/lab": "4.0.0-alpha.61", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", "@xstate/react": "1.6.3", "d3": "7.0.0", "graphql": "16.8.0", @@ -6842,9 +7516,8 @@ "@eclipse-sirius/sirius-components-trees": "*", "@eclipse-sirius/sirius-components-tsconfig": "*", "@lexical/react": "0.8.1", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", - "@material-ui/lab": "4.0.0-alpha.61", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", "@testing-library/react": "12.1.2", "@testing-library/user-event": "13.2.1", "@types/react": "17.0.37", @@ -6870,58 +7543,8 @@ "@eclipse-sirius/sirius-components-forms": "*", "@eclipse-sirius/sirius-components-trees": "*", "@lexical/react": "0.8.1", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", - "@material-ui/lab": "4.0.0-alpha.61", - "@xstate/react": "1.6.3", - "d3": "7.0.0", - "graphql": "16.8.0", - "lexical": "0.8.1", - "react": "17.0.2", - "react-dom": "17.0.2", - "xstate": "4.32.1" - } - }, - "packages/forms/frontend/sirius-components-widget-slider": { - "name": "@eclipse-sirius/sirius-components-widget-slider", - "version": "2024.3.0", - "license": "EPL-2.0", - "devDependencies": { - "@apollo/client": "3.8.1", - "@eclipse-sirius/sirius-components-core": "*", - "@eclipse-sirius/sirius-components-forms": "*", - "@eclipse-sirius/sirius-components-tsconfig": "*", - "@lexical/react": "0.8.1", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", - "@material-ui/lab": "4.0.0-alpha.61", - "@testing-library/react": "12.1.2", - "@testing-library/user-event": "13.2.1", - "@types/react": "17.0.37", - "@vitejs/plugin-react": "4.0.4", - "@vitest/coverage-v8": "0.34.2", - "@xstate/react": "1.6.3", - "d3": "7.0.0", - "graphql": "16.8.0", - "jsdom": "16.7.0", - "lexical": "0.8.1", - "prettier": "2.7.1", - "react": "17.0.2", - "react-dom": "17.0.2", - "rollup-plugin-peer-deps-external": "2.2.4", - "typescript": "5.1.6", - "vite": "4.4.9", - "vitest": "0.34.2", - "xstate": "4.32.1" - }, - "peerDependencies": { - "@apollo/client": "3.8.1", - "@eclipse-sirius/sirius-components-core": "*", - "@eclipse-sirius/sirius-components-forms": "*", - "@lexical/react": "0.8.1", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", - "@material-ui/lab": "4.0.0-alpha.61", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", "@xstate/react": "1.6.3", "d3": "7.0.0", "graphql": "16.8.0", @@ -6939,8 +7562,8 @@ "@apollo/client": "3.8.1", "@eclipse-sirius/sirius-components-core": "*", "@eclipse-sirius/sirius-components-tsconfig": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", "@ObeoNetwork/gantt-task-react": "0.4.9", "@types/react": "17.0.37", "@vitejs/plugin-react": "4.0.4", @@ -6957,8 +7580,8 @@ "peerDependencies": { "@apollo/client": "3.8.1", "@eclipse-sirius/sirius-components-core": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", "@ObeoNetwork/gantt-task-react": "0.4.9", "@xstate/react": "1.6.3", "graphql": "16.8.0", @@ -6975,9 +7598,8 @@ "@apollo/client": "3.8.1", "@eclipse-sirius/sirius-components-core": "*", "@eclipse-sirius/sirius-components-tsconfig": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", - "@material-ui/lab": "4.0.0-alpha.61", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", "@testing-library/react": "12.1.2", "@testing-library/user-event": "13.2.1", "@types/react": "17.0.37", @@ -6997,9 +7619,8 @@ "peerDependencies": { "@apollo/client": "3.8.1", "@eclipse-sirius/sirius-components-core": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", - "@material-ui/lab": "4.0.0-alpha.61", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", "graphql": "16.8.0", "react": "17.0.2", "react-dom": "17.0.2", @@ -7020,8 +7641,8 @@ "@apollo/client": "3.8.1", "@eclipse-sirius/sirius-components-core": "*", "@eclipse-sirius/sirius-components-tsconfig": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", "@types/react": "17.0.37", "@vitejs/plugin-react": "4.0.4", "@xstate/react": "1.6.3", @@ -7036,8 +7657,8 @@ "peerDependencies": { "@apollo/client": "3.8.1", "@eclipse-sirius/sirius-components-core": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", "@xstate/react": "1.6.3", "graphql": "16.8.0", "react": "17.0.2", @@ -7062,11 +7683,9 @@ "@eclipse-sirius/sirius-components-trees": "*", "@eclipse-sirius/sirius-components-validation": "*", "@eclipse-sirius/sirius-components-widget-reference": "*", - "@eclipse-sirius/sirius-components-widget-slider": "*", "@eclipse-sirius/sirius-web-application": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", - "@material-ui/lab": "4.0.0-alpha.61", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", "@ObeoNetwork/gantt-task-react": "0.4.9", "@ObeoNetwork/react-trello": "2.4.11", "@types/react": "17.0.37", @@ -7145,9 +7764,8 @@ "@eclipse-sirius/sirius-components-portals": "*", "@eclipse-sirius/sirius-components-trees": "*", "@eclipse-sirius/sirius-components-widget-reference": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", - "@material-ui/lab": "4.0.0-alpha.61", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", "@types/react": "17.0.37", "@types/react-router-dom": "5.3.3", "@xstate/react": "1.6.3", @@ -7157,6 +7775,7 @@ "react-dom": "17.0.2", "react-router-dom": "5.2.0", "reactflow": "11.10.1", + "tss-react": "4.9.7", "xstate": "4.32.1" } }, @@ -7326,8 +7945,8 @@ "version": "2024.3.4", "license": "EPL-2.0", "devDependencies": { - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", "@types/react": "17.0.37", "@vitejs/plugin-react": "4.0.4", "prettier": "2.7.1", @@ -7336,8 +7955,8 @@ "vite": "4.4.9" }, "peerDependencies": { - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", "react": "17.0.2" } }, @@ -7349,8 +7968,8 @@ "@apollo/client": "3.8.1", "@eclipse-sirius/sirius-components-core": "*", "@eclipse-sirius/sirius-components-tsconfig": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", "@types/react": "17.0.37", "@vitejs/plugin-react": "4.0.4", "@vitest/coverage-v8": "0.34.2", @@ -7368,8 +7987,8 @@ "peerDependencies": { "@apollo/client": "3.8.1", "@eclipse-sirius/sirius-components-core": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", "@xstate/react": "1.6.3", "graphql": "16.8.0", "react": "17.0.2", @@ -7384,8 +8003,8 @@ "@apollo/client": "3.8.1", "@eclipse-sirius/sirius-components-core": "*", "@eclipse-sirius/sirius-components-tsconfig": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", "@types/react": "17.0.37", "@vitejs/plugin-react": "4.0.4", "@xstate/react": "1.6.3", @@ -7400,8 +8019,8 @@ "peerDependencies": { "@apollo/client": "3.8.1", "@eclipse-sirius/sirius-components-core": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", "@xstate/react": "1.6.3", "graphql": "16.8.0", "react": "17.0.2", @@ -7444,7 +8063,6 @@ "version": "7.23.5", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz", "integrity": "sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==", - "dev": true, "requires": { "@babel/highlight": "^7.23.4", "chalk": "^2.4.2" @@ -7454,7 +8072,6 @@ "version": "3.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", - "dev": true, "requires": { "color-convert": "^1.9.0" } @@ -7463,7 +8080,6 @@ "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "dev": true, "requires": { "ansi-styles": "^3.2.1", "escape-string-regexp": "^1.0.5", @@ -7474,7 +8090,6 @@ "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "dev": true, "requires": { "color-name": "1.1.3" } @@ -7482,20 +8097,17 @@ "color-name": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", - "dev": true + "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" }, "has-flag": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", - "dev": true + "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==" }, "supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "dev": true, "requires": { "has-flag": "^3.0.0" } @@ -7585,7 +8197,6 @@ "version": "7.22.15", "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz", "integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==", - "dev": true, "requires": { "@babel/types": "^7.22.15" } @@ -7630,14 +8241,12 @@ "@babel/helper-string-parser": { "version": "7.23.4", "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz", - "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==", - "dev": true + "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==" }, "@babel/helper-validator-identifier": { "version": "7.22.20", "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz", - "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==", - "dev": true + "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==" }, "@babel/helper-validator-option": { "version": "7.23.5", @@ -7660,7 +8269,6 @@ "version": "7.23.4", "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz", "integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==", - "dev": true, "requires": { "@babel/helper-validator-identifier": "^7.22.20", "chalk": "^2.4.2", @@ -7671,7 +8279,6 @@ "version": "3.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", - "dev": true, "requires": { "color-convert": "^1.9.0" } @@ -7680,7 +8287,6 @@ "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "dev": true, "requires": { "ansi-styles": "^3.2.1", "escape-string-regexp": "^1.0.5", @@ -7691,7 +8297,6 @@ "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "dev": true, "requires": { "color-name": "1.1.3" } @@ -7699,20 +8304,17 @@ "color-name": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", - "dev": true + "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" }, "has-flag": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", - "dev": true + "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==" }, "supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "dev": true, "requires": { "has-flag": "^3.0.0" } @@ -7744,9 +8346,9 @@ } }, "@babel/runtime": { - "version": "7.23.5", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.5.tgz", - "integrity": "sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w==", + "version": "7.24.5", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.5.tgz", + "integrity": "sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==", "requires": { "regenerator-runtime": "^0.14.0" } @@ -7784,7 +8386,6 @@ "version": "7.23.5", "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.5.tgz", "integrity": "sha512-ON5kSOJwVO6xXVRTvOI0eOnWe7VdUcIpsovGo9U/Br4Ie4UVFQTboO2cYnDhAGU6Fp+UxSiT+pMft0SMHfuq6w==", - "dev": true, "requires": { "@babel/helper-string-parser": "^7.23.4", "@babel/helper-validator-identifier": "^7.22.20", @@ -7816,8 +8417,8 @@ "requires": { "@apollo/client": "3.8.1", "@eclipse-sirius/sirius-components-tsconfig": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", "@types/react": "17.0.37", "@vitejs/plugin-react": "4.0.4", "@vitest/coverage-v8": "0.34.2", @@ -7827,6 +8428,7 @@ "prettier": "2.7.1", "react": "17.0.2", "rollup-plugin-peer-deps-external": "2.2.4", + "tss-react": "4.9.7", "typescript": "5.1.6", "vite": "4.4.9", "vitest": "0.34.2", @@ -7839,8 +8441,8 @@ "@apollo/client": "3.8.1", "@eclipse-sirius/sirius-components-core": "*", "@eclipse-sirius/sirius-components-tsconfig": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", "@ObeoNetwork/react-trello": "2.4.11", "@types/react": "17.0.37", "@vitejs/plugin-react": "4.0.4", @@ -7862,8 +8464,8 @@ "@apollo/client": "3.8.1", "@eclipse-sirius/sirius-components-core": "*", "@eclipse-sirius/sirius-components-tsconfig": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", "@rollup/plugin-image": "2.1.1", "@types/react": "17.0.37", "@types/react-dom": "17.0.9", @@ -7891,8 +8493,9 @@ "@eclipse-sirius/sirius-components-core": "*", "@eclipse-sirius/sirius-components-forms": "*", "@eclipse-sirius/sirius-components-tsconfig": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", + "@mui/x-tree-view": "7.3.1", "@testing-library/react": "12.1.2", "@testing-library/user-event": "13.2.1", "@types/react": "17.0.37", @@ -7917,9 +8520,8 @@ "@eclipse-sirius/sirius-components-core": "*", "@eclipse-sirius/sirius-components-tsconfig": "*", "@lexical/react": "0.8.1", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", - "@material-ui/lab": "4.0.0-alpha.61", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", "@testing-library/react": "12.1.2", "@testing-library/user-event": "13.2.1", "@types/react": "17.0.37", @@ -7946,8 +8548,8 @@ "@apollo/client": "3.8.1", "@eclipse-sirius/sirius-components-core": "*", "@eclipse-sirius/sirius-components-tsconfig": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", "@ObeoNetwork/gantt-task-react": "0.4.9", "@types/react": "17.0.37", "@vitejs/plugin-react": "4.0.4", @@ -7968,9 +8570,8 @@ "@apollo/client": "3.8.1", "@eclipse-sirius/sirius-components-core": "*", "@eclipse-sirius/sirius-components-tsconfig": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", - "@material-ui/lab": "4.0.0-alpha.61", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", "@testing-library/react": "12.1.2", "@testing-library/user-event": "13.2.1", "@types/react": "17.0.37", @@ -7994,8 +8595,8 @@ "@apollo/client": "3.8.1", "@eclipse-sirius/sirius-components-core": "*", "@eclipse-sirius/sirius-components-tsconfig": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", "@types/react": "17.0.37", "@vitejs/plugin-react": "4.0.4", "@xstate/react": "1.6.3", @@ -8011,8 +8612,8 @@ "@eclipse-sirius/sirius-components-specification-layout": { "version": "file:packages/tools/frontend/sirius-components-specification-layout", "requires": { - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", "@types/react": "17.0.37", "@vitejs/plugin-react": "4.0.4", "prettier": "2.7.1", @@ -8027,8 +8628,8 @@ "@apollo/client": "3.8.1", "@eclipse-sirius/sirius-components-core": "*", "@eclipse-sirius/sirius-components-tsconfig": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", "@types/react": "17.0.37", "@vitejs/plugin-react": "4.0.4", "@vitest/coverage-v8": "0.34.2", @@ -8051,65 +8652,33 @@ "version": "file:packages/validation/frontend/sirius-components-validation", "requires": { "@apollo/client": "3.8.1", - "@eclipse-sirius/sirius-components-core": "*", - "@eclipse-sirius/sirius-components-tsconfig": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", - "@types/react": "17.0.37", - "@vitejs/plugin-react": "4.0.4", - "@xstate/react": "1.6.3", - "graphql": "16.8.0", - "prettier": "2.7.1", - "react": "17.0.2", - "rollup-plugin-peer-deps-external": "2.2.4", - "typescript": "5.1.6", - "vite": "4.4.9", - "xstate": "4.32.1" - } - }, - "@eclipse-sirius/sirius-components-widget-reference": { - "version": "file:packages/forms/frontend/sirius-components-widget-reference", - "requires": { - "@apollo/client": "3.8.1", - "@eclipse-sirius/sirius-components-core": "*", - "@eclipse-sirius/sirius-components-forms": "*", - "@eclipse-sirius/sirius-components-trees": "*", - "@eclipse-sirius/sirius-components-tsconfig": "*", - "@lexical/react": "0.8.1", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", - "@material-ui/lab": "4.0.0-alpha.61", - "@testing-library/react": "12.1.2", - "@testing-library/user-event": "13.2.1", + "@eclipse-sirius/sirius-components-core": "*", + "@eclipse-sirius/sirius-components-tsconfig": "*", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", "@types/react": "17.0.37", "@vitejs/plugin-react": "4.0.4", - "@vitest/coverage-v8": "0.34.2", "@xstate/react": "1.6.3", - "d3": "7.0.0", "graphql": "16.8.0", - "jsdom": "16.7.0", - "lexical": "0.8.1", "prettier": "2.7.1", "react": "17.0.2", - "react-dom": "17.0.2", "rollup-plugin-peer-deps-external": "2.2.4", "typescript": "5.1.6", "vite": "4.4.9", - "vitest": "0.34.2", "xstate": "4.32.1" } }, - "@eclipse-sirius/sirius-components-widget-slider": { - "version": "file:packages/forms/frontend/sirius-components-widget-slider", + "@eclipse-sirius/sirius-components-widget-reference": { + "version": "file:packages/forms/frontend/sirius-components-widget-reference", "requires": { "@apollo/client": "3.8.1", "@eclipse-sirius/sirius-components-core": "*", "@eclipse-sirius/sirius-components-forms": "*", + "@eclipse-sirius/sirius-components-trees": "*", "@eclipse-sirius/sirius-components-tsconfig": "*", "@lexical/react": "0.8.1", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", - "@material-ui/lab": "4.0.0-alpha.61", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", "@testing-library/react": "12.1.2", "@testing-library/user-event": "13.2.1", "@types/react": "17.0.37", @@ -8146,11 +8715,9 @@ "@eclipse-sirius/sirius-components-trees": "*", "@eclipse-sirius/sirius-components-validation": "*", "@eclipse-sirius/sirius-components-widget-reference": "*", - "@eclipse-sirius/sirius-components-widget-slider": "*", "@eclipse-sirius/sirius-web-application": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", - "@material-ui/lab": "4.0.0-alpha.61", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", "@ObeoNetwork/gantt-task-react": "0.4.9", "@ObeoNetwork/react-trello": "2.4.11", "@testing-library/jest-dom": "5.14.1", @@ -8332,15 +8899,86 @@ } } }, + "@emotion/babel-plugin": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz", + "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==", + "peer": true, + "requires": { + "@babel/helper-module-imports": "^7.16.7", + "@babel/runtime": "^7.18.3", + "@emotion/hash": "^0.9.1", + "@emotion/memoize": "^0.8.1", + "@emotion/serialize": "^1.1.2", + "babel-plugin-macros": "^3.1.0", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^4.0.0", + "find-root": "^1.1.0", + "source-map": "^0.5.7", + "stylis": "4.2.0" + }, + "dependencies": { + "@emotion/hash": { + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", + "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==", + "peer": true + }, + "convert-source-map": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz", + "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==", + "peer": true + }, + "escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", + "peer": true + }, + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==", + "peer": true + }, + "stylis": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz", + "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==", + "peer": true + } + } + }, + "@emotion/cache": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz", + "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==", + "requires": { + "@emotion/memoize": "^0.8.1", + "@emotion/sheet": "^1.2.2", + "@emotion/utils": "^1.2.1", + "@emotion/weak-memoize": "^0.3.1", + "stylis": "4.2.0" + }, + "dependencies": { + "stylis": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz", + "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==" + } + } + }, "@emotion/hash": { "version": "0.8.0", "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", - "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==" + "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==", + "peer": true }, "@emotion/is-prop-valid": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz", - "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==", + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz", + "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==", "requires": { "@emotion/memoize": "^0.8.1" } @@ -8350,11 +8988,88 @@ "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" }, + "@emotion/react": { + "version": "11.11.4", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.4.tgz", + "integrity": "sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==", + "peer": true, + "requires": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.11.0", + "@emotion/cache": "^11.11.0", + "@emotion/serialize": "^1.1.3", + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1", + "@emotion/utils": "^1.2.1", + "@emotion/weak-memoize": "^0.3.1", + "hoist-non-react-statics": "^3.3.1" + } + }, + "@emotion/serialize": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.4.tgz", + "integrity": "sha512-RIN04MBT8g+FnDwgvIUi8czvr1LU1alUMI05LekWB5DGyTm8cCBMCRpq3GqaiyEDRptEXOyXnvZ58GZYu4kBxQ==", + "requires": { + "@emotion/hash": "^0.9.1", + "@emotion/memoize": "^0.8.1", + "@emotion/unitless": "^0.8.1", + "@emotion/utils": "^1.2.1", + "csstype": "^3.0.2" + }, + "dependencies": { + "@emotion/hash": { + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", + "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==" + }, + "csstype": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" + } + } + }, + "@emotion/sheet": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz", + "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==" + }, + "@emotion/styled": { + "version": "11.11.5", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.5.tgz", + "integrity": "sha512-/ZjjnaNKvuMPxcIiUkf/9SHoG4Q196DRl1w82hQ3WCsjo1IUR8uaGWrC6a87CrYAW0Kb/pK7hk8BnLgLRi9KoQ==", + "devOptional": true, + "peer": true, + "requires": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.11.0", + "@emotion/is-prop-valid": "^1.2.2", + "@emotion/serialize": "^1.1.4", + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1", + "@emotion/utils": "^1.2.1" + } + }, "@emotion/unitless": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==" }, + "@emotion/use-insertion-effect-with-fallbacks": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz", + "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==", + "peer": true, + "requires": {} + }, + "@emotion/utils": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz", + "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==" + }, + "@emotion/weak-memoize": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz", + "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==" + }, "@esbuild/android-arm": { "version": "0.18.20", "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz", @@ -8829,6 +9544,7 @@ "version": "4.12.4", "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.12.4.tgz", "integrity": "sha512-tr7xekNlM9LjA6pagJmL8QCgZXaubWUwkJnoYcMKd4gw/t4XiyvnTkjdGrUVicyB2BsdaAv1tvow45bPM4sSwQ==", + "peer": true, "requires": { "@babel/runtime": "^7.4.4", "@material-ui/styles": "^4.11.5", @@ -8848,26 +9564,16 @@ "version": "4.11.3", "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.3.tgz", "integrity": "sha512-IKHlyx6LDh8n19vzwH5RtHIOHl9Tu90aAAxcbWME6kp4dmvODM3UvOHJeMIDzUbd4muuJKHmlNoBN+mDY4XkBA==", + "peer": true, "requires": { "@babel/runtime": "^7.4.4" } }, - "@material-ui/lab": { - "version": "4.0.0-alpha.61", - "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.61.tgz", - "integrity": "sha512-rSzm+XKiNUjKegj8bzt5+pygZeckNLOr+IjykH8sYdVk7dE9y2ZuUSofiMV2bJk3qU+JHwexmw+q0RyNZB9ugg==", - "requires": { - "@babel/runtime": "^7.4.4", - "@material-ui/utils": "^4.11.3", - "clsx": "^1.0.4", - "prop-types": "^15.7.2", - "react-is": "^16.8.0 || ^17.0.0" - } - }, "@material-ui/styles": { "version": "4.11.5", "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.5.tgz", "integrity": "sha512-o/41ot5JJiUsIETME9wVLAJrmIWL3j0R0Bj2kCOLbSfqEkKf0fmaPt+5vtblUh5eXr2S+J/8J3DaCb10+CzPGA==", + "peer": true, "requires": { "@babel/runtime": "^7.4.4", "@emotion/hash": "^0.8.0", @@ -8891,6 +9597,7 @@ "version": "4.12.2", "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.12.2.tgz", "integrity": "sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw==", + "peer": true, "requires": { "@babel/runtime": "^7.4.4", "@material-ui/utils": "^4.11.3", @@ -8902,18 +9609,201 @@ "version": "5.1.0", "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz", "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==", + "peer": true, "requires": {} }, "@material-ui/utils": { "version": "4.11.3", "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.3.tgz", "integrity": "sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==", + "peer": true, "requires": { "@babel/runtime": "^7.4.4", "prop-types": "^15.7.2", "react-is": "^16.8.0 || ^17.0.0" } }, + "@mui/base": { + "version": "5.0.0-beta.40", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.40.tgz", + "integrity": "sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==", + "requires": { + "@babel/runtime": "^7.23.9", + "@floating-ui/react-dom": "^2.0.8", + "@mui/types": "^7.2.14", + "@mui/utils": "^5.15.14", + "@popperjs/core": "^2.11.8", + "clsx": "^2.1.0", + "prop-types": "^15.8.1" + }, + "dependencies": { + "@floating-ui/react-dom": { + "version": "2.0.9", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.9.tgz", + "integrity": "sha512-q0umO0+LQK4+p6aGyvzASqKbKOJcAHJ7ycE9CuUvfx3s9zTHWmGJTPOIlM/hmSBfUfg/XfY5YhLBLR/LHwShQQ==", + "requires": { + "@floating-ui/dom": "^1.0.0" + } + }, + "clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==" + } + } + }, + "@mui/core-downloads-tracker": { + "version": "5.15.15", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.15.tgz", + "integrity": "sha512-aXnw29OWQ6I5A47iuWEI6qSSUfH6G/aCsW9KmW3LiFqr7uXZBK4Ks+z8G+qeIub8k0T5CMqlT2q0L+ZJTMrqpg==" + }, + "@mui/icons-material": { + "version": "5.15.15", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.15.15.tgz", + "integrity": "sha512-kkeU/pe+hABcYDH6Uqy8RmIsr2S/y5bP2rp+Gat4CcRjCcVne6KudS1NrZQhUCRysrTDCAhcbcf9gt+/+pGO2g==", + "requires": { + "@babel/runtime": "^7.23.9" + } + }, + "@mui/material": { + "version": "5.15.15", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.15.tgz", + "integrity": "sha512-3zvWayJ+E1kzoIsvwyEvkTUKVKt1AjchFFns+JtluHCuvxgKcLSRJTADw37k0doaRtVAsyh8bz9Afqzv+KYrIA==", + "requires": { + "@babel/runtime": "^7.23.9", + "@mui/base": "5.0.0-beta.40", + "@mui/core-downloads-tracker": "^5.15.15", + "@mui/system": "^5.15.15", + "@mui/types": "^7.2.14", + "@mui/utils": "^5.15.14", + "@types/react-transition-group": "^4.4.10", + "clsx": "^2.1.0", + "csstype": "^3.1.3", + "prop-types": "^15.8.1", + "react-is": "^18.2.0", + "react-transition-group": "^4.4.5" + }, + "dependencies": { + "clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==" + }, + "csstype": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" + }, + "react-is": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", + "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==" + } + } + }, + "@mui/private-theming": { + "version": "5.15.14", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.14.tgz", + "integrity": "sha512-UH0EiZckOWcxiXLX3Jbb0K7rC8mxTr9L9l6QhOZxYc4r8FHUkefltV9VDGLrzCaWh30SQiJvAEd7djX3XXY6Xw==", + "requires": { + "@babel/runtime": "^7.23.9", + "@mui/utils": "^5.15.14", + "prop-types": "^15.8.1" + } + }, + "@mui/styled-engine": { + "version": "5.15.14", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.14.tgz", + "integrity": "sha512-RILkuVD8gY6PvjZjqnWhz8fu68dVkqhM5+jYWfB5yhlSQKg+2rHkmEwm75XIeAqI3qwOndK6zELK5H6Zxn4NHw==", + "requires": { + "@babel/runtime": "^7.23.9", + "@emotion/cache": "^11.11.0", + "csstype": "^3.1.3", + "prop-types": "^15.8.1" + }, + "dependencies": { + "csstype": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" + } + } + }, + "@mui/system": { + "version": "5.15.15", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.15.tgz", + "integrity": "sha512-aulox6N1dnu5PABsfxVGOZffDVmlxPOVgj56HrUnJE8MCSh8lOvvkd47cebIVQQYAjpwieXQXiDPj5pwM40jTQ==", + "requires": { + "@babel/runtime": "^7.23.9", + "@mui/private-theming": "^5.15.14", + "@mui/styled-engine": "^5.15.14", + "@mui/types": "^7.2.14", + "@mui/utils": "^5.15.14", + "clsx": "^2.1.0", + "csstype": "^3.1.3", + "prop-types": "^15.8.1" + }, + "dependencies": { + "clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==" + }, + "csstype": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" + } + } + }, + "@mui/types": { + "version": "7.2.14", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.14.tgz", + "integrity": "sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ==", + "requires": {} + }, + "@mui/utils": { + "version": "5.15.14", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.14.tgz", + "integrity": "sha512-0lF/7Hh/ezDv5X7Pry6enMsbYyGKjADzvHyo3Qrc/SSlTsQ1VkbDMbH0m2t3OR5iIVLwMoxwM7yGd+6FCMtTFA==", + "requires": { + "@babel/runtime": "^7.23.9", + "@types/prop-types": "^15.7.11", + "prop-types": "^15.8.1", + "react-is": "^18.2.0" + }, + "dependencies": { + "react-is": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", + "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==" + } + } + }, + "@mui/x-tree-view": { + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/@mui/x-tree-view/-/x-tree-view-7.3.1.tgz", + "integrity": "sha512-sGVj1+0F4B7TpAsq1xwKN/9kLO0Px/ZH/Vr3vANOc+VKg/vFtHjZCCzmh9PEZun/vZNOGpMWXccDEZqUi3QjYA==", + "dev": true, + "requires": { + "@babel/runtime": "^7.24.0", + "@mui/base": "^5.0.0-beta.40", + "@mui/system": "^5.15.14", + "@mui/utils": "^5.15.14", + "@types/react-transition-group": "^4.4.10", + "clsx": "^2.1.0", + "prop-types": "^15.8.1", + "react-transition-group": "^4.4.5" + }, + "dependencies": { + "clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "dev": true + } + } + }, "@ObeoNetwork/gantt-task-react": { "version": "0.4.9", "resolved": "https://npm.pkg.github.com/download/@ObeoNetwork/gantt-task-react/0.4.9/c8a8fa0c3ec657f40bdfbe4318c985405c670d2d", @@ -8963,6 +9853,11 @@ } } }, + "@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==" + }, "@reactflow/background": { "version": "11.3.6", "resolved": "https://registry.npmjs.org/@reactflow/background/-/background-11.3.6.tgz", @@ -9433,6 +10328,12 @@ "integrity": "sha512-qjd88DrCxupx/kJD5yQgZdcYKZKSIGBVDIBE1/LTGcNm3d2Np/jxojkdePDdfnBHJc5W7vSMpbJ1aB7p/Py69A==", "dev": true }, + "@types/parse-json": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz", + "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==", + "peer": true + }, "@types/prop-types": { "version": "15.7.11", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz", @@ -9778,6 +10679,17 @@ "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==", "dev": true }, + "babel-plugin-macros": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz", + "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==", + "peer": true, + "requires": { + "@babel/runtime": "^7.12.5", + "cosmiconfig": "^7.0.0", + "resolve": "^1.19.0" + } + }, "backo2": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz", @@ -9842,6 +10754,12 @@ "set-function-length": "^1.1.1" } }, + "callsites": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", + "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", + "peer": true + }, "camelize": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", @@ -9943,6 +10861,19 @@ "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==", "dev": true }, + "cosmiconfig": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz", + "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==", + "peer": true, + "requires": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.2.1", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.10.0" + } + }, "css-color-keywords": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", @@ -9962,6 +10893,7 @@ "version": "2.0.8", "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz", "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==", + "peer": true, "requires": { "@babel/runtime": "^7.8.3", "is-in-browser": "^1.0.2" @@ -9993,7 +10925,8 @@ "csstype": { "version": "2.6.21", "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz", - "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==" + "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==", + "peer": true }, "d3": { "version": "7.0.0", @@ -10421,6 +11354,15 @@ "resolved": "https://registry.npmjs.org/elkjs/-/elkjs-0.8.2.tgz", "integrity": "sha512-L6uRgvZTH+4OF5NE/MBbzQx/WYpru1xCBE9respNj6qznEewGUIfhzmm7horWWxbNO2M0WckQypGctR8lH79xQ==" }, + "error-ex": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", + "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", + "peer": true, + "requires": { + "is-arrayish": "^0.2.1" + } + }, "es-get-iterator": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.3.tgz", @@ -10477,8 +11419,7 @@ "escape-string-regexp": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", - "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", - "dev": true + "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==" }, "escodegen": { "version": "2.1.0", @@ -10527,6 +11468,12 @@ "integrity": "sha512-G3BSX9cfKttjr+2o1O22tYMLq0DPluZnYtq1rXumE1SpL/F/SLIfHx08WYQoWSIpeMYf8sRbJ8++71+v6Pnxfg==", "dev": true }, + "find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==", + "peer": true + }, "fontsource-roboto": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/fontsource-roboto/-/fontsource-roboto-4.0.0.tgz", @@ -10568,8 +11515,7 @@ "function-bind": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", - "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", - "dev": true + "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==" }, "functions-have-names": { "version": "1.2.3", @@ -10689,7 +11635,6 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz", "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==", - "dev": true, "requires": { "function-bind": "^1.1.2" } @@ -10766,7 +11711,8 @@ "hyphenate-style-name": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz", - "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==" + "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==", + "peer": true }, "iconv-lite": { "version": "0.6.3", @@ -10784,6 +11730,16 @@ "invariant": "^2.2.0" } }, + "import-fresh": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", + "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==", + "peer": true, + "requires": { + "parent-module": "^1.0.0", + "resolve-from": "^4.0.0" + } + }, "inflight": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", @@ -10845,6 +11801,12 @@ "is-typed-array": "^1.1.10" } }, + "is-arrayish": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", + "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==", + "peer": true + }, "is-bigint": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz", @@ -10870,6 +11832,15 @@ "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==", "dev": true }, + "is-core-module": { + "version": "2.13.1", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz", + "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==", + "peer": true, + "requires": { + "hasown": "^2.0.0" + } + }, "is-date-object": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz", @@ -10882,7 +11853,8 @@ "is-in-browser": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz", - "integrity": "sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g==" + "integrity": "sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g==", + "peer": true }, "is-map": { "version": "2.0.2", @@ -11084,6 +12056,12 @@ "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==", "dev": true }, + "json-parse-even-better-errors": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", + "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==", + "peer": true + }, "json5": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", @@ -11100,6 +12078,7 @@ "version": "10.10.0", "resolved": "https://registry.npmjs.org/jss/-/jss-10.10.0.tgz", "integrity": "sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==", + "peer": true, "requires": { "@babel/runtime": "^7.3.1", "csstype": "^3.0.2", @@ -11110,7 +12089,8 @@ "csstype": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", - "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==", + "peer": true } } }, @@ -11118,6 +12098,7 @@ "version": "10.10.0", "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.10.0.tgz", "integrity": "sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==", + "peer": true, "requires": { "@babel/runtime": "^7.3.1", "hyphenate-style-name": "^1.0.3", @@ -11128,6 +12109,7 @@ "version": "10.10.0", "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.10.0.tgz", "integrity": "sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ==", + "peer": true, "requires": { "@babel/runtime": "^7.3.1", "jss": "10.10.0" @@ -11137,6 +12119,7 @@ "version": "10.10.0", "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.10.0.tgz", "integrity": "sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==", + "peer": true, "requires": { "@babel/runtime": "^7.3.1", "jss": "10.10.0" @@ -11146,6 +12129,7 @@ "version": "10.10.0", "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.10.0.tgz", "integrity": "sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA==", + "peer": true, "requires": { "@babel/runtime": "^7.3.1", "jss": "10.10.0", @@ -11156,6 +12140,7 @@ "version": "10.10.0", "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.10.0.tgz", "integrity": "sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg==", + "peer": true, "requires": { "@babel/runtime": "^7.3.1", "jss": "10.10.0" @@ -11165,6 +12150,7 @@ "version": "10.10.0", "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.10.0.tgz", "integrity": "sha512-uEFJFgaCtkXeIPgki8ICw3Y7VMkL9GEan6SqmT9tqpwM+/t+hxfMUdU4wQ0MtOiMNWhwnckBV0IebrKcZM9C0g==", + "peer": true, "requires": { "@babel/runtime": "^7.3.1", "jss": "10.10.0", @@ -11175,6 +12161,7 @@ "version": "10.10.0", "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.10.0.tgz", "integrity": "sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg==", + "peer": true, "requires": { "@babel/runtime": "^7.3.1", "css-vendor": "^2.0.8", @@ -11202,6 +12189,12 @@ "isomorphic.js": "^0.2.4" } }, + "lines-and-columns": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", + "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", + "peer": true + }, "local-pkg": { "version": "0.4.3", "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.3.tgz", @@ -11453,6 +12446,27 @@ "yocto-queue": "^1.0.0" } }, + "parent-module": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", + "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==", + "peer": true, + "requires": { + "callsites": "^3.0.0" + } + }, + "parse-json": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", + "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", + "peer": true, + "requires": { + "@babel/code-frame": "^7.0.0", + "error-ex": "^1.3.1", + "json-parse-even-better-errors": "^2.3.0", + "lines-and-columns": "^1.1.6" + } + }, "parse5": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz", @@ -11465,6 +12479,12 @@ "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==", "dev": true }, + "path-parse": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", + "peer": true + }, "path-to-regexp": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz", @@ -11480,6 +12500,12 @@ } } }, + "path-type": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", + "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==", + "peer": true + }, "pathe": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.1.tgz", @@ -11517,7 +12543,8 @@ "popper.js": { "version": "1.16.1-lts", "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz", - "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==" + "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==", + "peer": true }, "postcss": { "version": "8.4.32", @@ -11818,6 +12845,23 @@ "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==", "dev": true }, + "resolve": { + "version": "1.22.8", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", + "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==", + "peer": true, + "requires": { + "is-core-module": "^2.13.0", + "path-parse": "^1.0.7", + "supports-preserve-symlinks-flag": "^1.0.0" + } + }, + "resolve-from": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", + "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", + "peer": true + }, "resolve-pathname": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz", @@ -12038,6 +13082,12 @@ "has-flag": "^4.0.0" } }, + "supports-preserve-symlinks-flag": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", + "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", + "peer": true + }, "symbol-observable": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-4.0.0.tgz", @@ -12128,8 +13178,7 @@ "to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==", - "dev": true + "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==" }, "to-no-case": { "version": "1.0.2", @@ -12183,6 +13232,16 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" }, + "tss-react": { + "version": "4.9.7", + "resolved": "https://registry.npmjs.org/tss-react/-/tss-react-4.9.7.tgz", + "integrity": "sha512-3BhmQH6DeIujDRtvU9UlxadN2SakriKOwdaNp6cn4JSx+YNSF0lFWGNBzQzpRQ7laCbRm9YKBKVolwYhBv+yyg==", + "requires": { + "@emotion/cache": "*", + "@emotion/serialize": "*", + "@emotion/utils": "*" + } + }, "turbo": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/turbo/-/turbo-1.4.2.tgz", @@ -12615,6 +13674,12 @@ "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", "dev": true }, + "yaml": { + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", + "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", + "peer": true + }, "yjs": { "version": "13.6.10", "resolved": "https://registry.npmjs.org/yjs/-/yjs-13.6.10.tgz", diff --git a/packages/core/frontend/sirius-components-core/package.json b/packages/core/frontend/sirius-components-core/package.json index a6c449c6ceb..eddf182fb38 100644 --- a/packages/core/frontend/sirius-components-core/package.json +++ b/packages/core/frontend/sirius-components-core/package.json @@ -33,30 +33,32 @@ }, "peerDependencies": { "@apollo/client": "3.8.1", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", "@xstate/react": "1.6.3", "graphql": "16.8.0", "react": "17.0.2", + "tss-react": "4.9.7", "xstate": "4.32.1" }, "devDependencies": { "@apollo/client": "3.8.1", "@eclipse-sirius/sirius-components-tsconfig": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", "@types/react": "17.0.37", "@vitejs/plugin-react": "4.0.4", - "@xstate/react": "1.6.3", "@vitest/coverage-v8": "0.34.2", - "jsdom": "16.7.0", + "@xstate/react": "1.6.3", "graphql": "16.8.0", + "jsdom": "16.7.0", "prettier": "2.7.1", "react": "17.0.2", "rollup-plugin-peer-deps-external": "2.2.4", - "xstate": "4.32.1", + "tss-react": "4.9.7", "typescript": "5.1.6", "vite": "4.4.9", - "vitest": "0.34.2" + "vitest": "0.34.2", + "xstate": "4.32.1" } } diff --git a/packages/core/frontend/sirius-components-core/src/color/getCSSColor.ts b/packages/core/frontend/sirius-components-core/src/color/getCSSColor.ts index 819141d97e4..0356c4779ad 100644 --- a/packages/core/frontend/sirius-components-core/src/color/getCSSColor.ts +++ b/packages/core/frontend/sirius-components-core/src/color/getCSSColor.ts @@ -31,8 +31,8 @@ import { red, teal, yellow, -} from '@material-ui/core/colors'; -import { Theme } from '@material-ui/core/styles'; +} from '@mui/material/colors'; +import { Theme } from '@mui/material/styles'; const muiColors = { amber: amber, @@ -76,8 +76,6 @@ export const getCSSColor = (value: string, theme: Theme): string => { cssColor = theme.palette.text.primary; } else if (value === 'theme.palette.text.disabled') { cssColor = theme.palette.text.disabled; - } else if (value === 'theme.palette.text.hint') { - cssColor = theme.palette.text.hint; } else if (value === 'theme.palette.error.main') { cssColor = theme.palette.error.main; } else if (value === 'theme.palette.error.light') { diff --git a/packages/core/frontend/sirius-components-core/src/icon/IconOverlay.tsx b/packages/core/frontend/sirius-components-core/src/icon/IconOverlay.tsx index d667d03c257..7087fd92067 100644 --- a/packages/core/frontend/sirius-components-core/src/icon/IconOverlay.tsx +++ b/packages/core/frontend/sirius-components-core/src/icon/IconOverlay.tsx @@ -10,7 +10,7 @@ * Contributors: * Obeo - initial API and implementation *******************************************************************************/ -import Tooltip from '@material-ui/core/Tooltip'; +import Tooltip from '@mui/material/Tooltip'; import { useContext } from 'react'; import { ServerContext } from '../contexts/ServerContext'; import { ServerContextValue } from '../contexts/ServerContext.types'; diff --git a/packages/core/frontend/sirius-components-core/src/index.ts b/packages/core/frontend/sirius-components-core/src/index.ts index 35b15fbdc44..c9e28a6ae7e 100644 --- a/packages/core/frontend/sirius-components-core/src/index.ts +++ b/packages/core/frontend/sirius-components-core/src/index.ts @@ -10,6 +10,11 @@ * Contributors: * Obeo - initial API and implementation *******************************************************************************/ +// It should be the first import +// Otherwise the following error will be thrown: styled_default is not a function +// https://github.com/vitejs/vite/issues/12423#issuecomment-2080351394 +import '@mui/material/styles/styled'; + export * from './color/getCSSColor'; export * from './contexts/RepresentationPathContext'; export * from './contexts/RepresentationPathContext.types'; diff --git a/packages/core/frontend/sirius-components-core/src/materialui.ts b/packages/core/frontend/sirius-components-core/src/materialui.ts index f7267661a26..c08bdb3fba7 100644 --- a/packages/core/frontend/sirius-components-core/src/materialui.ts +++ b/packages/core/frontend/sirius-components-core/src/materialui.ts @@ -12,7 +12,7 @@ *******************************************************************************/ import React from 'react'; -declare module '@material-ui/core/styles' { +declare module '@mui/material/styles' { export interface Palette { navigation: { leftBackground: React.CSSProperties['color']; @@ -26,7 +26,7 @@ declare module '@material-ui/core/styles' { } } -declare module '@material-ui/core/styles/createPalette' { +declare module '@mui/material/styles/createPalette' { export interface Palette { navigation: { leftBackground: React.CSSProperties['color']; diff --git a/packages/core/frontend/sirius-components-core/src/modals/confirmation/ConfirmationDialog.tsx b/packages/core/frontend/sirius-components-core/src/modals/confirmation/ConfirmationDialog.tsx index 1229ee13d53..8f411859b54 100644 --- a/packages/core/frontend/sirius-components-core/src/modals/confirmation/ConfirmationDialog.tsx +++ b/packages/core/frontend/sirius-components-core/src/modals/confirmation/ConfirmationDialog.tsx @@ -11,22 +11,23 @@ * Obeo - initial API and implementation *******************************************************************************/ -import Button from '@material-ui/core/Button'; -import Checkbox from '@material-ui/core/Checkbox'; -import Dialog from '@material-ui/core/Dialog'; -import DialogActions from '@material-ui/core/DialogActions'; -import DialogContent from '@material-ui/core/DialogContent'; -import DialogContentText from '@material-ui/core/DialogContentText'; -import DialogTitle from '@material-ui/core/DialogTitle'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; -import Typography from '@material-ui/core/Typography'; -import { Theme, makeStyles } from '@material-ui/core/styles'; -import { WarningOutlined } from '@material-ui/icons'; -import CheckBoxIcon from '@material-ui/icons/CheckBox'; -import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'; +import CheckBoxIcon from '@mui/icons-material/CheckBox'; +import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank'; +import WarningOutlined from '@mui/icons-material/WarningOutlined'; +import Button from '@mui/material/Button'; +import Checkbox from '@mui/material/Checkbox'; +import Dialog from '@mui/material/Dialog'; +import DialogActions from '@mui/material/DialogActions'; +import DialogContent from '@mui/material/DialogContent'; +import DialogContentText from '@mui/material/DialogContentText'; +import DialogTitle from '@mui/material/DialogTitle'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Typography from '@mui/material/Typography'; +import { Theme } from '@mui/material/styles'; +import { makeStyles } from 'tss-react/mui'; import { ConfirmationDialogProps } from './ConfirmationDialog.types'; -const useConfirmationDialogStyles = makeStyles((theme: Theme) => ({ +const useConfirmationDialogStyles = makeStyles()((theme: Theme) => ({ title: { display: 'flex', flexDirection: 'column', @@ -72,7 +73,7 @@ export const ConfirmationDialog = ({ onConfirm, onCancel, }: ConfirmationDialogProps) => { - const classes = useConfirmationDialogStyles(); + const { classes } = useConfirmationDialogStyles(); let confirmationDisabledElement: JSX.Element | null = null; if (allowConfirmationDisabled) { diff --git a/packages/core/frontend/sirius-components-core/src/modals/share-representation/ShareRepresentationModal.tsx b/packages/core/frontend/sirius-components-core/src/modals/share-representation/ShareRepresentationModal.tsx index 5b2a304924f..9adff07be38 100644 --- a/packages/core/frontend/sirius-components-core/src/modals/share-representation/ShareRepresentationModal.tsx +++ b/packages/core/frontend/sirius-components-core/src/modals/share-representation/ShareRepresentationModal.tsx @@ -11,10 +11,10 @@ * Obeo - initial API and implementation *******************************************************************************/ -import Dialog from '@material-ui/core/Dialog'; -import DialogContent from '@material-ui/core/DialogContent'; -import DialogContentText from '@material-ui/core/DialogContentText'; -import DialogTitle from '@material-ui/core/DialogTitle'; +import Dialog from '@mui/material/Dialog'; +import DialogContent from '@mui/material/DialogContent'; +import DialogContentText from '@mui/material/DialogContentText'; +import DialogTitle from '@mui/material/DialogTitle'; import { useContext } from 'react'; import { RepresentationPathContext } from '../../contexts/RepresentationPathContext'; import { RepresentationPathContextValue } from '../../contexts/RepresentationPathContext.types'; diff --git a/packages/core/frontend/sirius-components-core/src/theme.ts b/packages/core/frontend/sirius-components-core/src/theme.ts index a885cf457f4..8245c19efe7 100644 --- a/packages/core/frontend/sirius-components-core/src/theme.ts +++ b/packages/core/frontend/sirius-components-core/src/theme.ts @@ -10,7 +10,7 @@ * Contributors: * Obeo - initial API and implementation *******************************************************************************/ -import { createTheme, responsiveFontSizes } from '@material-ui/core/styles'; +import { createTheme, responsiveFontSizes } from '@mui/material/styles'; const fallbackTheme = createTheme({ palette: { diff --git a/packages/core/frontend/sirius-components-core/src/toast/Toast.tsx b/packages/core/frontend/sirius-components-core/src/toast/Toast.tsx index 9a760a07ac8..fd879915ec4 100644 --- a/packages/core/frontend/sirius-components-core/src/toast/Toast.tsx +++ b/packages/core/frontend/sirius-components-core/src/toast/Toast.tsx @@ -10,9 +10,9 @@ * Contributors: * Obeo - initial API and implementation *******************************************************************************/ -import IconButton from '@material-ui/core/IconButton'; -import Snackbar from '@material-ui/core/Snackbar'; -import CloseIcon from '@material-ui/icons/Close'; +import CloseIcon from '@mui/icons-material/Close'; +import IconButton from '@mui/material/IconButton'; +import Snackbar from '@mui/material/Snackbar'; import { ToastProps } from './Toast.types'; export const Toast = ({ message, open, onClose }: ToastProps) => { diff --git a/packages/core/frontend/sirius-components-core/src/workbench/Panels.tsx b/packages/core/frontend/sirius-components-core/src/workbench/Panels.tsx index 5d300ae5daa..81a0c439a1e 100644 --- a/packages/core/frontend/sirius-components-core/src/workbench/Panels.tsx +++ b/packages/core/frontend/sirius-components-core/src/workbench/Panels.tsx @@ -10,7 +10,8 @@ * Contributors: * Obeo - initial API and implementation *******************************************************************************/ -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from 'tss-react/mui'; + import React, { useRef, useState } from 'react'; import { PanelState, PanelsProps } from './Panels.types'; import { Site } from './Site'; @@ -19,7 +20,7 @@ const MIN_PANEL_WIDTH: number = 42; const MAIN_AREA_MIN_WIDTH: number = 100; const RESIZER_WIDTH: number = 4; -const usePanelStyles = makeStyles((theme) => ({ +const usePanelStyles = makeStyles()((theme) => ({ panel: { display: 'grid', gridTemplateRows: 'minmax(0, 1fr)', @@ -151,7 +152,7 @@ export const Panels = ({ gridTemplateColumns: `${leftWidth}px min-content minmax(0, 1fr) min-content ${rightWidth}px`, }; - const styles = usePanelStyles(); + const { classes: styles } = usePanelStyles(); return (
diff --git a/packages/core/frontend/sirius-components-core/src/workbench/RepresentationNavigation.tsx b/packages/core/frontend/sirius-components-core/src/workbench/RepresentationNavigation.tsx index 00d39154c7a..78b69988588 100644 --- a/packages/core/frontend/sirius-components-core/src/workbench/RepresentationNavigation.tsx +++ b/packages/core/frontend/sirius-components-core/src/workbench/RepresentationNavigation.tsx @@ -10,14 +10,14 @@ * Contributors: * Obeo - initial API and implementation *******************************************************************************/ -import Tab from '@material-ui/core/Tab'; -import Tabs from '@material-ui/core/Tabs'; -import { makeStyles } from '@material-ui/core/styles'; -import CloseIcon from '@material-ui/icons/Close'; +import CloseIcon from '@mui/icons-material/Close'; +import Tab from '@mui/material/Tab'; +import Tabs from '@mui/material/Tabs'; +import { makeStyles } from 'tss-react/mui'; import { RepresentationNavigationProps } from './RepresentationNavigation.types'; import { Representation } from './Workbench.types'; -const useRepresentationNavigationStyles = makeStyles((theme) => ({ +const useRepresentationNavigationStyles = makeStyles()((theme) => ({ tabsRoot: { minHeight: theme.spacing(4), borderBottomColor: theme.palette.divider, @@ -32,9 +32,6 @@ const useRepresentationNavigationStyles = makeStyles((theme) => ({ display: 'flex', flexDirection: 'row', alignItems: 'center', - '& > *:nth-child(2)': { - marginLeft: theme.spacing(1), - }, width: 'inherit', }, tabLabelText: { @@ -42,6 +39,9 @@ const useRepresentationNavigationStyles = makeStyles((theme) => ({ whiteSpace: 'nowrap', overflow: 'hidden', }, + tabCloseIcon: { + marginLeft: theme.spacing(1), + }, })); const a11yProps = (id: string) => { @@ -57,7 +57,7 @@ export const RepresentationNavigation = ({ onRepresentationClick, onClose, }: RepresentationNavigationProps) => { - const classes = useRepresentationNavigationStyles(); + const { classes } = useRepresentationNavigationStyles(); const onChange = (_event: React.ChangeEvent<{}>, value: string) => { const representationSelected = representations.find((representation) => representation.id === value); @@ -83,7 +83,7 @@ export const RepresentationNavigation = ({ value={displayedRepresentation.id} onChange={onChange} variant="scrollable" - scrollButtons="on" + scrollButtons textColor="primary" indicatorColor="primary"> {representations.map((representation) => { @@ -96,6 +96,7 @@ export const RepresentationNavigation = ({
{representation.label}
onRepresentationClose(event, representation)} data-testid={`close-representation-tab-${representation.label}`} diff --git a/packages/core/frontend/sirius-components-core/src/workbench/Site.tsx b/packages/core/frontend/sirius-components-core/src/workbench/Site.tsx index 47a3bc19121..4751ef0e436 100644 --- a/packages/core/frontend/sirius-components-core/src/workbench/Site.tsx +++ b/packages/core/frontend/sirius-components-core/src/workbench/Site.tsx @@ -11,14 +11,14 @@ * Obeo - initial API and implementation *******************************************************************************/ -import IconButton from '@material-ui/core/IconButton'; -import Tooltip from '@material-ui/core/Tooltip'; -import Typography from '@material-ui/core/Typography'; -import { makeStyles } from '@material-ui/core/styles'; +import IconButton from '@mui/material/IconButton'; +import Tooltip from '@mui/material/Tooltip'; +import Typography from '@mui/material/Typography'; +import { makeStyles } from 'tss-react/mui'; import React, { useEffect, useState } from 'react'; import { SiteProps } from './Site.types'; -const useSiteStyles = makeStyles((theme) => ({ +const useSiteStyles = makeStyles()((theme) => ({ leftSite: { display: 'flex', flexDirection: 'row', @@ -98,7 +98,7 @@ const useSiteStyles = makeStyles((theme) => ({ })); export const Site = ({ editingContextId, readOnly, side, expanded, toggleExpansion, contributions }: SiteProps) => { - const classes = useSiteStyles(); + const { classes } = useSiteStyles(); const [isExpanded, setExpanded] = useState(expanded); const [selectedViewIndex, setSelectedViewIndex] = useState(0); diff --git a/packages/core/frontend/sirius-components-core/src/workbench/Workbench.tsx b/packages/core/frontend/sirius-components-core/src/workbench/Workbench.tsx index 1a83757c19b..261204faf6d 100644 --- a/packages/core/frontend/sirius-components-core/src/workbench/Workbench.tsx +++ b/packages/core/frontend/sirius-components-core/src/workbench/Workbench.tsx @@ -11,7 +11,7 @@ * Obeo - initial API and implementation *******************************************************************************/ import { gql, useSubscription } from '@apollo/client'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from 'tss-react/mui'; import { useMachine } from '@xstate/react'; import { useContext, useEffect } from 'react'; import { useComponent } from '../extension/useComponent'; @@ -55,7 +55,7 @@ const editingContextEventSubscription = gql` } `; -const useWorkbenchStyles = makeStyles(() => ({ +const useWorkbenchStyles = makeStyles()(() => ({ main: { display: 'grid', gridTemplateRows: 'minmax(0, 1fr)', @@ -75,7 +75,7 @@ export const Workbench = ({ onRepresentationSelected, readOnly, }: WorkbenchProps) => { - const classes = useWorkbenchStyles(); + const { classes } = useWorkbenchStyles(); const { registry } = useContext(RepresentationContext); const [{ value, context }, dispatch] = useMachine(workbenchMachine, { context: { diff --git a/packages/core/frontend/sirius-components-core/src/workbench/__tests__/Site.test.tsx b/packages/core/frontend/sirius-components-core/src/workbench/__tests__/Site.test.tsx index 083cffb5688..c30cecd4183 100644 --- a/packages/core/frontend/sirius-components-core/src/workbench/__tests__/Site.test.tsx +++ b/packages/core/frontend/sirius-components-core/src/workbench/__tests__/Site.test.tsx @@ -10,7 +10,7 @@ * Contributors: * Obeo - initial API and implementation *******************************************************************************/ -import { ThemeProvider } from '@material-ui/core/styles'; +import { ThemeProvider } from '@mui/material/styles'; import { cleanup, fireEvent, render, screen } from '@testing-library/react'; import { afterEach, expect, test } from 'vitest'; import { theme } from '../../theme'; @@ -31,12 +31,12 @@ const MockView3 = () => { return
; }; -const hasClass = (element: HTMLElement, classPrefix: string) => { - return Array.from(element.classList).some((className) => className.startsWith(classPrefix)); +const hasClass = (element: HTMLElement, classSuffix: string) => { + return Array.from(element.classList).some((className) => className.endsWith(classSuffix)); }; const isIconHighlighted = (title: string) => { - return hasClass(screen.getByTestId('viewselector-' + title), 'makeStyles-viewSelectorIconSelectedLeft'); + return hasClass(screen.getByTestId('viewselector-' + title), '-viewSelectorIconSelectedLeft'); }; test('should render an empty site with no selector or view', () => { diff --git a/packages/deck/frontend/sirius-components-deck/package.json b/packages/deck/frontend/sirius-components-deck/package.json index 1394dca4d43..4f344f28ba6 100644 --- a/packages/deck/frontend/sirius-components-deck/package.json +++ b/packages/deck/frontend/sirius-components-deck/package.json @@ -32,9 +32,9 @@ "peerDependencies": { "@apollo/client": "3.8.1", "@eclipse-sirius/sirius-components-core": "*", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", "@ObeoNetwork/react-trello": "2.4.11", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", "@xstate/react": "1.6.3", "graphql": "16.8.0", "react": "17.0.2", @@ -45,11 +45,11 @@ "@apollo/client": "3.8.1", "@eclipse-sirius/sirius-components-core": "*", "@eclipse-sirius/sirius-components-tsconfig": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", + "@ObeoNetwork/react-trello": "2.4.11", "@types/react": "17.0.37", "@vitejs/plugin-react": "4.0.4", - "@ObeoNetwork/react-trello": "2.4.11", "@xstate/react": "1.6.3", "graphql": "16.8.0", "prettier": "2.7.1", diff --git a/packages/deck/frontend/sirius-components-deck/src/Deck.tsx b/packages/deck/frontend/sirius-components-deck/src/Deck.tsx index 99fd28ea8b3..14f8d4b93b5 100644 --- a/packages/deck/frontend/sirius-components-deck/src/Deck.tsx +++ b/packages/deck/frontend/sirius-components-deck/src/Deck.tsx @@ -11,7 +11,8 @@ * Obeo - initial API and implementation *******************************************************************************/ import Board from '@ObeoNetwork/react-trello'; -import { Theme, makeStyles, useTheme } from '@material-ui/core/styles'; +import { Theme, useTheme } from '@mui/material/styles'; +import { makeStyles } from 'tss-react/mui'; import { CSSProperties, useEffect, useRef } from 'react'; import { DeckProps } from './Deck.types'; import { DeckCard } from './card/DeckCard'; @@ -21,7 +22,7 @@ import { DeckLaneHeader } from './laneHeader/DeckLaneHeader'; import { DeckContext } from './representation/DeckContext'; import { DeckToolbar } from './toolbar/DeckToolbar'; -const useDeckStyle = makeStyles((theme) => ({ +const useDeckStyle = makeStyles()((theme) => ({ boardContainer: { //We need to make the board display flex to fit to screen when the deck is smaller than the representation container. //Without that, the board div occupies the whole representation container width. @@ -53,7 +54,7 @@ export const Deck = ({ const boardRef = useRef(null); const { zoom, zoomIn, zoomOut, fitToScreen, resetZoom }: UseZoomValue = useZoom(boardRef, representationContainerRef); - const deckClasses = useDeckStyle(); + const { classes: deckClasses } = useDeckStyle(); useEffect(() => { const representationContainer = deckContainerRef.current?.parentElement; diff --git a/packages/deck/frontend/sirius-components-deck/src/card/DeckCard.tsx b/packages/deck/frontend/sirius-components-deck/src/card/DeckCard.tsx index bd2490293bb..a7b56563fd5 100644 --- a/packages/deck/frontend/sirius-components-deck/src/card/DeckCard.tsx +++ b/packages/deck/frontend/sirius-components-deck/src/card/DeckCard.tsx @@ -11,7 +11,7 @@ * Obeo - initial API and implementation *******************************************************************************/ -import { Theme, useTheme } from '@material-ui/core/styles'; +import { Theme, useTheme } from '@mui/material/styles'; import { useRef } from 'react'; import { DeckInput } from '../common/DeckInput'; import { diff --git a/packages/deck/frontend/sirius-components-deck/src/card/DeckDeleteButton.tsx b/packages/deck/frontend/sirius-components-deck/src/card/DeckDeleteButton.tsx index 90cf65a9fbf..046ab4a6e03 100644 --- a/packages/deck/frontend/sirius-components-deck/src/card/DeckDeleteButton.tsx +++ b/packages/deck/frontend/sirius-components-deck/src/card/DeckDeleteButton.tsx @@ -11,7 +11,7 @@ * Obeo - initial API and implementation *******************************************************************************/ -import DeleteIcon from '@material-ui/icons/Delete'; +import DeleteIcon from '@mui/icons-material/Delete'; import { CardDeleteIconButton } from '../styled/DeckCardStyledComponents'; export const DeckDeleteButton = (props) => { diff --git a/packages/deck/frontend/sirius-components-deck/src/common/DeckInput.tsx b/packages/deck/frontend/sirius-components-deck/src/common/DeckInput.tsx index fc3055144a6..cd44d6ea689 100644 --- a/packages/deck/frontend/sirius-components-deck/src/common/DeckInput.tsx +++ b/packages/deck/frontend/sirius-components-deck/src/common/DeckInput.tsx @@ -11,8 +11,8 @@ * Obeo - initial API and implementation *******************************************************************************/ -import TextField from '@material-ui/core/TextField'; -import { styled } from '@material-ui/core/styles'; +import TextField from '@mui/material/TextField'; +import { styled } from '@mui/material/styles'; import { forwardRef, useImperativeHandle, useRef } from 'react'; import { DeckCardInputProps } from './DeckInput.types'; diff --git a/packages/deck/frontend/sirius-components-deck/src/laneHeader/DeckLaneHeader.tsx b/packages/deck/frontend/sirius-components-deck/src/laneHeader/DeckLaneHeader.tsx index 77c8b745bd5..6b4d975267b 100644 --- a/packages/deck/frontend/sirius-components-deck/src/laneHeader/DeckLaneHeader.tsx +++ b/packages/deck/frontend/sirius-components-deck/src/laneHeader/DeckLaneHeader.tsx @@ -11,18 +11,19 @@ * Obeo - initial API and implementation *******************************************************************************/ -import { Theme, makeStyles, useTheme } from '@material-ui/core/styles'; -import MoreVertIcon from '@material-ui/icons/MoreVert'; +import MoreVertIcon from '@mui/icons-material/MoreVert'; +import { Theme, useTheme } from '@mui/material/styles'; +import { makeStyles } from 'tss-react/mui'; import { useEffect, useRef } from 'react'; import { DeckInput } from '../common/DeckInput'; import { LaneHeader } from '../styled/DeckLaneStyledComponents'; import { DeckTitle, RightContent, titleFontStyle } from '../styled/DeckStyledComponents'; import { DeckLaneHeaderProps } from './DeckLaneHeader.types'; -import IconButton from '@material-ui/core/IconButton'; +import IconButton from '@mui/material/IconButton'; import { useLaneContextMenu } from './useLaneContextMenu'; -const useLaneHeaderStyle = makeStyles((theme) => ({ +const useLaneHeaderStyle = makeStyles()((theme) => ({ more: { hover: { backgroundColor: theme.palette.action.hover, @@ -65,7 +66,7 @@ export const DeckLaneHeader = ({ } }; - const classes = useLaneHeaderStyle(); + const { classes } = useLaneHeaderStyle(); return ( <> diff --git a/packages/deck/frontend/sirius-components-deck/src/laneHeader/LaneContextMenu.tsx b/packages/deck/frontend/sirius-components-deck/src/laneHeader/LaneContextMenu.tsx index a18bd65f425..a971e2d2e61 100644 --- a/packages/deck/frontend/sirius-components-deck/src/laneHeader/LaneContextMenu.tsx +++ b/packages/deck/frontend/sirius-components-deck/src/laneHeader/LaneContextMenu.tsx @@ -10,23 +10,23 @@ * Contributors: * Obeo - initial API and implementation *******************************************************************************/ -import Box from '@material-ui/core/Box'; -import Button from '@material-ui/core/Button'; -import Divider from '@material-ui/core/Divider'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemIcon from '@material-ui/core/ListItemIcon'; -import ListItemText from '@material-ui/core/ListItemText'; -import ListSubheader from '@material-ui/core/ListSubheader'; -import Menu from '@material-ui/core/Menu'; -import Typography from '@material-ui/core/Typography'; -import { makeStyles } from '@material-ui/core/styles'; -import Visibility from '@material-ui/icons/Visibility'; -import VisibilityOff from '@material-ui/icons/VisibilityOff'; +import Visibility from '@mui/icons-material/Visibility'; +import VisibilityOff from '@mui/icons-material/VisibilityOff'; +import Box from '@mui/material/Box'; +import Button from '@mui/material/Button'; +import Divider from '@mui/material/Divider'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import ListItemText from '@mui/material/ListItemText'; +import ListSubheader from '@mui/material/ListSubheader'; +import Menu from '@mui/material/Menu'; +import Typography from '@mui/material/Typography'; +import { makeStyles } from 'tss-react/mui'; import { LaneContextMenuProps } from './LaneContextMenu.types'; import { useCardVisibility } from './useCardVisibility'; -const useStyle = makeStyles((theme) => ({ +const useStyle = makeStyles()((theme) => ({ listItemText: { fontSize: theme.typography.fontSize, color: theme.palette.text.primary, @@ -48,7 +48,7 @@ export const LaneContextMenu = ({ menuAnchor, onClose, onChangesApplied, cards } onChangesApplied(selectedCardsIds); }; - const classes = useStyle(); + const { classes } = useStyle(); return ( <> ({ +const useDeckRepresentationStyles = makeStyles()(() => ({ complete: { display: 'flex', alignItems: 'center', @@ -58,7 +59,7 @@ const isErrorPayload = (payload: GQLDeckEventPayload): payload is GQLErrorPayloa export const DeckRepresentation = ({ editingContextId, representationId }: RepresentationComponentProps) => { const theme: Theme = useTheme(); - const classes = useDeckRepresentationStyles(); + const { classes } = useDeckRepresentationStyles(); const { selection, setSelection }: UseSelectionValue = useSelection(); const { addErrorMessage, addMessages } = useMultiToast(); const [{ id, deck, complete }, setState] = useState({ diff --git a/packages/deck/frontend/sirius-components-deck/src/styled/DeckCardStyledComponents.tsx b/packages/deck/frontend/sirius-components-deck/src/styled/DeckCardStyledComponents.tsx index 73e95963ba5..cc1879ad745 100644 --- a/packages/deck/frontend/sirius-components-deck/src/styled/DeckCardStyledComponents.tsx +++ b/packages/deck/frontend/sirius-components-deck/src/styled/DeckCardStyledComponents.tsx @@ -11,9 +11,9 @@ * Obeo - initial API and implementation *******************************************************************************/ -import IconButton from '@material-ui/core/IconButton'; -import { styled } from '@material-ui/core/styles'; -import { CSSProperties } from '@material-ui/core/styles/withStyles'; +import IconButton from '@mui/material/IconButton'; +import { styled } from '@mui/material/styles'; +import { CSSProperties } from 'react'; export const cardLabelFontStyle: CSSProperties = { fontSize: '10px', diff --git a/packages/deck/frontend/sirius-components-deck/src/styled/DeckLaneStyledComponents.tsx b/packages/deck/frontend/sirius-components-deck/src/styled/DeckLaneStyledComponents.tsx index cf84c511b37..06678609213 100644 --- a/packages/deck/frontend/sirius-components-deck/src/styled/DeckLaneStyledComponents.tsx +++ b/packages/deck/frontend/sirius-components-deck/src/styled/DeckLaneStyledComponents.tsx @@ -11,7 +11,7 @@ * Obeo - initial API and implementation *******************************************************************************/ -import { styled } from '@material-ui/core/styles'; +import { styled } from '@mui/material/styles'; export const LaneHeader = styled('header')({ marginBottom: ' 10px', diff --git a/packages/deck/frontend/sirius-components-deck/src/styled/DeckStyledComponents.tsx b/packages/deck/frontend/sirius-components-deck/src/styled/DeckStyledComponents.tsx index af1e2e1fddf..16dfbf00f1b 100644 --- a/packages/deck/frontend/sirius-components-deck/src/styled/DeckStyledComponents.tsx +++ b/packages/deck/frontend/sirius-components-deck/src/styled/DeckStyledComponents.tsx @@ -11,8 +11,8 @@ * Obeo - initial API and implementation *******************************************************************************/ -import { styled } from '@material-ui/core/styles'; -import { CSSProperties } from '@material-ui/core/styles/withStyles'; +import { styled } from '@mui/material/styles'; +import { CSSProperties } from 'react'; import { DeckTitleProps } from './DeckStyledComponents.types'; export const titleFontStyle: CSSProperties = { @@ -26,9 +26,9 @@ export const Title = styled('span')(({ theme }) => ({ color: theme.palette.text.primary, })); -export const DeckTitle = styled(Title)({ - cursor: (props: DeckTitleProps) => (props.draggable ? 'grab' : `auto`), -}); +export const DeckTitle = styled(Title)((props: DeckTitleProps) => ({ + cursor: props.draggable ? 'grab' : `auto`, +})); export const RightContent = styled('span')({ width: '38%', diff --git a/packages/deck/frontend/sirius-components-deck/src/styled/DeckStyledComponents.types.tsx b/packages/deck/frontend/sirius-components-deck/src/styled/DeckStyledComponents.types.tsx index 9affa87cfcf..7f55f2ba297 100644 --- a/packages/deck/frontend/sirius-components-deck/src/styled/DeckStyledComponents.types.tsx +++ b/packages/deck/frontend/sirius-components-deck/src/styled/DeckStyledComponents.types.tsx @@ -11,7 +11,7 @@ * Obeo - initial API and implementation *******************************************************************************/ -import { Theme } from '@material-ui/core/styles'; +import { Theme } from '@mui/material/styles'; export interface DeckTitleProps { draggable: boolean; diff --git a/packages/deck/frontend/sirius-components-deck/src/toolbar/DeckToolbar.tsx b/packages/deck/frontend/sirius-components-deck/src/toolbar/DeckToolbar.tsx index e938375222f..d03857c276a 100644 --- a/packages/deck/frontend/sirius-components-deck/src/toolbar/DeckToolbar.tsx +++ b/packages/deck/frontend/sirius-components-deck/src/toolbar/DeckToolbar.tsx @@ -11,21 +11,21 @@ * Obeo - initial API and implementation *******************************************************************************/ import { ShareRepresentationModal } from '@eclipse-sirius/sirius-components-core'; -import IconButton from '@material-ui/core/IconButton'; -import Tooltip from '@material-ui/core/Tooltip'; -import { makeStyles } from '@material-ui/core/styles'; -import AspectRatioIcon from '@material-ui/icons/AspectRatio'; -import FullscreenIcon from '@material-ui/icons/Fullscreen'; -import FullscreenExitIcon from '@material-ui/icons/FullscreenExit'; -import SearchIcon from '@material-ui/icons/Search'; -import ShareIcon from '@material-ui/icons/Share'; -import ZoomInIcon from '@material-ui/icons/ZoomIn'; -import ZoomOutIcon from '@material-ui/icons/ZoomOut'; +import AspectRatioIcon from '@mui/icons-material/AspectRatio'; +import FullscreenIcon from '@mui/icons-material/Fullscreen'; +import FullscreenExitIcon from '@mui/icons-material/FullscreenExit'; +import SearchIcon from '@mui/icons-material/Search'; +import ShareIcon from '@mui/icons-material/Share'; +import ZoomInIcon from '@mui/icons-material/ZoomIn'; +import ZoomOutIcon from '@mui/icons-material/ZoomOut'; +import IconButton from '@mui/material/IconButton'; +import Tooltip from '@mui/material/Tooltip'; +import { makeStyles } from 'tss-react/mui'; import { useState } from 'react'; import { useFullscreen } from '../hooks/useFullScreen'; import { ToolbarProps, ToolbarState } from './Toolbar.types'; -const useToolbarStyles = makeStyles((theme) => ({ +const useToolbarStyles = makeStyles()((theme) => ({ toolbar: { display: 'flex', flexDirection: 'row', @@ -47,7 +47,7 @@ export const DeckToolbar = ({ fullscreenNode, onResetZoom, }: ToolbarProps) => { - const classes = useToolbarStyles(); + const { classes } = useToolbarStyles(); const [state, setState] = useState({ modal: null }); const { fullscreen, setFullscreen } = useFullscreen(fullscreenNode); diff --git a/packages/deck/frontend/sirius-components-deck/src/utils/deckGQLHelper.tsx b/packages/deck/frontend/sirius-components-deck/src/utils/deckGQLHelper.tsx index 8e52117306a..711204d229a 100644 --- a/packages/deck/frontend/sirius-components-deck/src/utils/deckGQLHelper.tsx +++ b/packages/deck/frontend/sirius-components-deck/src/utils/deckGQLHelper.tsx @@ -11,7 +11,7 @@ * Obeo - initial API and implementation *******************************************************************************/ import { getCSSColor } from '@eclipse-sirius/sirius-components-core'; -import { Theme } from '@material-ui/core/styles'; +import { Theme } from '@mui/material/styles'; import { Card, DeckData, Lane } from '../Deck.types'; import { GQLCard, GQLDeck, GQLDeckElementStyle, GQLLane } from '../representation/deckSubscription.types'; diff --git a/packages/diagrams/frontend/sirius-components-diagrams/package.json b/packages/diagrams/frontend/sirius-components-diagrams/package.json index 424e6e8431d..2259ddd7fad 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/package.json +++ b/packages/diagrams/frontend/sirius-components-diagrams/package.json @@ -32,8 +32,8 @@ "peerDependencies": { "@apollo/client": "3.8.1", "@eclipse-sirius/sirius-components-core": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", + "@mui/material": "5.15.15", + "@mui/icons-material": "5.15.15", "elkjs": "0.8.2", "graphql": "16.8.0", "html-to-image": "1.11.11", @@ -45,8 +45,8 @@ "@apollo/client": "3.8.1", "@eclipse-sirius/sirius-components-core": "*", "@eclipse-sirius/sirius-components-tsconfig": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", + "@mui/material": "5.15.15", + "@mui/icons-material": "5.15.15", "@rollup/plugin-image": "2.1.1", "@types/react": "17.0.37", "@types/react-dom": "17.0.9", diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/icons/AlignHorizontalCenterIcon.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/icons/AlignHorizontalCenterIcon.tsx index a918e8a7e80..9e91c9db3af 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/icons/AlignHorizontalCenterIcon.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/icons/AlignHorizontalCenterIcon.tsx @@ -11,7 +11,7 @@ * Obeo - initial API and implementation *******************************************************************************/ -import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon'; +import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'; export const AlignHorizontalCenterIcon = (props: SvgIconProps) => { return ( diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/icons/AlignHorizontalLeftIcon.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/icons/AlignHorizontalLeftIcon.tsx index acba6a3df4a..b148014c6eb 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/icons/AlignHorizontalLeftIcon.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/icons/AlignHorizontalLeftIcon.tsx @@ -11,7 +11,7 @@ * Obeo - initial API and implementation *******************************************************************************/ -import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon'; +import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'; export const AlignHorizontalLeftIcon = (props: SvgIconProps) => { return ( diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/icons/AlignHorizontalRightIcon.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/icons/AlignHorizontalRightIcon.tsx index 8f5bb3798dd..79a89129a46 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/icons/AlignHorizontalRightIcon.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/icons/AlignHorizontalRightIcon.tsx @@ -11,7 +11,7 @@ * Obeo - initial API and implementation *******************************************************************************/ -import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon'; +import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'; export const AlignHorizontalRightIcon = (props: SvgIconProps) => { return ( diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/icons/AlignVerticalBottomIcon.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/icons/AlignVerticalBottomIcon.tsx index f30df7ef47c..0e14e272c47 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/icons/AlignVerticalBottomIcon.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/icons/AlignVerticalBottomIcon.tsx @@ -11,7 +11,7 @@ * Obeo - initial API and implementation *******************************************************************************/ -import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon'; +import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'; export const AlignVerticalBottomIcon = (props: SvgIconProps) => { return ( diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/icons/AlignVerticalCenterIcon.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/icons/AlignVerticalCenterIcon.tsx index 80233f27b1a..acc6989626c 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/icons/AlignVerticalCenterIcon.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/icons/AlignVerticalCenterIcon.tsx @@ -11,7 +11,7 @@ * Obeo - initial API and implementation *******************************************************************************/ -import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon'; +import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'; export const AlignVerticalCenterIcon = (props: SvgIconProps) => { return ( diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/icons/AlignVerticalTopIcon.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/icons/AlignVerticalTopIcon.tsx index 84fd20490bf..0e7f2e2435b 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/icons/AlignVerticalTopIcon.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/icons/AlignVerticalTopIcon.tsx @@ -11,7 +11,7 @@ * Obeo - initial API and implementation *******************************************************************************/ -import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon'; +import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'; export const AlignVerticalTopIcon = (props: SvgIconProps) => { return ( diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/icons/HelperLinesIcon.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/icons/HelperLinesIcon.tsx index ba36cd88533..66e618a0f6a 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/icons/HelperLinesIcon.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/icons/HelperLinesIcon.tsx @@ -11,7 +11,7 @@ * Obeo - initial API and implementation *******************************************************************************/ -import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon'; +import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'; export const HelperLinesIcon = (props: SvgIconProps) => { return ( diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/icons/HelperLinesIconOff.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/icons/HelperLinesIconOff.tsx index a621c5e07dc..a94dc4f99c3 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/icons/HelperLinesIconOff.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/icons/HelperLinesIconOff.tsx @@ -11,7 +11,7 @@ * Obeo - initial API and implementation *******************************************************************************/ -import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon'; +import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'; export const HelperLinesIconOff = (props: SvgIconProps) => { return ( diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/icons/JustifyHorizontalIcon.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/icons/JustifyHorizontalIcon.tsx index c42aa1162b6..8b3ff08b0ee 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/icons/JustifyHorizontalIcon.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/icons/JustifyHorizontalIcon.tsx @@ -11,7 +11,7 @@ * Obeo - initial API and implementation *******************************************************************************/ -import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon'; +import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'; export const JustifyHorizontalIcon = (props: SvgIconProps) => { return ( diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/icons/JustifyVerticalIcon.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/icons/JustifyVerticalIcon.tsx index 1a6d87c1442..d268bbae38c 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/icons/JustifyVerticalIcon.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/icons/JustifyVerticalIcon.tsx @@ -11,7 +11,7 @@ * Obeo - initial API and implementation *******************************************************************************/ -import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon'; +import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'; export const JustifyVerticalIcon = (props: SvgIconProps) => { return ( diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/icons/PinIcon.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/icons/PinIcon.tsx index 8191da77847..6c5038415bf 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/icons/PinIcon.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/icons/PinIcon.tsx @@ -11,7 +11,7 @@ * Obeo - initial API and implementation *******************************************************************************/ -import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon'; +import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'; export const PinIcon = (props: SvgIconProps) => { return ( diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/icons/UnpinIcon.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/icons/UnpinIcon.tsx index 3ef7e38bee7..a0be468c73c 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/icons/UnpinIcon.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/icons/UnpinIcon.tsx @@ -11,7 +11,7 @@ * Obeo - initial API and implementation *******************************************************************************/ -import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon'; +import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'; export const UnpinIcon = (props: SvgIconProps) => { return ( diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/Label.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/Label.tsx index 13ec3ca71b8..f8beb3a26f4 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/Label.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/Label.tsx @@ -12,7 +12,7 @@ *******************************************************************************/ import { getCSSColor, IconOverlay } from '@eclipse-sirius/sirius-components-core'; -import { Theme, useTheme } from '@material-ui/core/styles'; +import { Theme, useTheme } from '@mui/material/styles'; import { memo, useContext } from 'react'; import { DiagramContext } from '../contexts/DiagramContext'; import { DiagramContextValue } from '../contexts/DiagramContext.types'; diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/Tool.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/Tool.tsx index dbf24c77d44..63cf9c520ca 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/Tool.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/Tool.tsx @@ -11,11 +11,11 @@ * Obeo - initial API and implementation *******************************************************************************/ import { IconOverlay } from '@eclipse-sirius/sirius-components-core'; -import Typography from '@material-ui/core/Typography'; -import { makeStyles } from '@material-ui/core/styles'; +import Typography from '@mui/material/Typography'; +import { makeStyles } from 'tss-react/mui'; import { ToolProps } from './Tool.types'; -const useToolStyle = makeStyles(() => ({ +const useToolStyle = makeStyles()(() => ({ tool: { display: 'grid', gridTemplateRows: '1fr', @@ -27,7 +27,7 @@ const useToolStyle = makeStyles(() => ({ export const Tool = ({ tool, onClick, thumbnail }: ToolProps) => { const { id, label, iconURL } = tool; - const classes = useToolStyle(); + const { classes } = useToolStyle(); let image: JSX.Element | null = null; if (iconURL.length > 0) { image = ; diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/connector/ConnectorContextualMenu.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/connector/ConnectorContextualMenu.tsx index c8563aca25c..c34fd162bab 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/connector/ConnectorContextualMenu.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/connector/ConnectorContextualMenu.tsx @@ -13,10 +13,10 @@ import { gql, useMutation, useQuery } from '@apollo/client'; import { IconOverlay, useMultiToast } from '@eclipse-sirius/sirius-components-core'; -import ListItemIcon from '@material-ui/core/ListItemIcon'; -import Menu from '@material-ui/core/Menu'; -import MenuItem from '@material-ui/core/MenuItem'; -import Typography from '@material-ui/core/Typography'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import Menu from '@mui/material/Menu'; +import MenuItem from '@mui/material/MenuItem'; +import Typography from '@mui/material/Typography'; import { memo, useContext, useEffect } from 'react'; import { DiagramContext } from '../../contexts/DiagramContext'; import { DiagramContextValue } from '../../contexts/DiagramContext.types'; diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/connector/useConnector.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/connector/useConnector.tsx index 13632a93e2a..53acc043e19 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/connector/useConnector.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/connector/useConnector.tsx @@ -11,7 +11,7 @@ * Obeo - initial API and implementation *******************************************************************************/ -import { Theme, useTheme } from '@material-ui/core/styles'; +import { Theme, useTheme } from '@mui/material/styles'; import { useCallback, useContext } from 'react'; import { Connection, diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/connector/useConnectorNodeStyle.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/connector/useConnectorNodeStyle.tsx index 2157628e146..023e0785179 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/connector/useConnectorNodeStyle.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/connector/useConnectorNodeStyle.tsx @@ -11,7 +11,7 @@ * Obeo - initial API and implementation *******************************************************************************/ -import { useTheme } from '@material-ui/core/styles'; +import { useTheme } from '@mui/material/styles'; import { useContext } from 'react'; import { NodeContext } from '../node/NodeContext'; import { NodeContextValue } from '../node/NodeContext.types'; diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/debug/DebugPanel.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/debug/DebugPanel.tsx index d62612ff8e7..902ac0e6cd4 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/debug/DebugPanel.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/debug/DebugPanel.tsx @@ -11,7 +11,7 @@ * Obeo - initial API and implementation *******************************************************************************/ -import Box from '@material-ui/core/Box'; +import Box from '@mui/material/Box'; import { useContext } from 'react'; import { Edge, Node, Panel, useReactFlow } from 'reactflow'; import { EdgeData, NodeData } from '../DiagramRenderer.types'; diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/debug/EdgePanelInfos.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/debug/EdgePanelInfos.tsx index 3b0879d3cef..b05923b1539 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/debug/EdgePanelInfos.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/debug/EdgePanelInfos.tsx @@ -11,15 +11,15 @@ * Obeo - initial API and implementation *******************************************************************************/ -import Box from '@material-ui/core/Box'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemText from '@material-ui/core/ListItemText'; -import Typography from '@material-ui/core/Typography'; -import { makeStyles } from '@material-ui/core/styles'; +import Box from '@mui/material/Box'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemText from '@mui/material/ListItemText'; +import Typography from '@mui/material/Typography'; +import { makeStyles } from 'tss-react/mui'; import { EdgePanelInfosProps } from './EdgePanelInfos.types'; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles()((theme) => ({ list: { marginTop: 0, marginBottom: 0, @@ -46,7 +46,7 @@ const useStyles = makeStyles((theme) => ({ })); export const EdgePanelInfos = ({ title, edge }: EdgePanelInfosProps) => { - const classes = useStyles(); + const { classes } = useStyles(); return ( diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/debug/NodePanelInfos.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/debug/NodePanelInfos.tsx index 3a3eb26fc5c..0e4b3018b58 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/debug/NodePanelInfos.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/debug/NodePanelInfos.tsx @@ -11,16 +11,16 @@ * Obeo - initial API and implementation *******************************************************************************/ -import Box from '@material-ui/core/Box'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemText from '@material-ui/core/ListItemText'; -import Typography from '@material-ui/core/Typography'; -import { makeStyles } from '@material-ui/core/styles'; -import { alpha } from '@material-ui/core/styles/colorManipulator'; +import Box from '@mui/material/Box'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemText from '@mui/material/ListItemText'; +import Typography from '@mui/material/Typography'; +import { alpha } from '@mui/material/styles'; +import { makeStyles } from 'tss-react/mui'; import { NodePanelInfosProps } from './NodePanelInfos.types'; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles()((theme) => ({ list: { marginTop: 0, marginBottom: 0, @@ -48,7 +48,7 @@ const useStyles = makeStyles((theme) => ({ })); export const NodePanelInfos = ({ title, node }: NodePanelInfosProps) => { - const classes = useStyles(); + const { classes } = useStyles(); return ( diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/direct-edit/DiagramDirectEditInput.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/direct-edit/DiagramDirectEditInput.tsx index feef9db6a5a..f6fa93054ea 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/direct-edit/DiagramDirectEditInput.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/direct-edit/DiagramDirectEditInput.tsx @@ -12,7 +12,7 @@ *******************************************************************************/ import { gql, useMutation, useQuery } from '@apollo/client'; import { useMultiToast } from '@eclipse-sirius/sirius-components-core'; -import TextField from '@material-ui/core/TextField'; +import TextField from '@mui/material/TextField'; import { useContext, useEffect, useRef, useState } from 'react'; import { DiagramContext } from '../../contexts/DiagramContext'; import { DiagramContextValue } from '../../contexts/DiagramContext.types'; diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/dropNode/useDropNode.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/dropNode/useDropNode.ts index f3bdf5139eb..ac47278c1e0 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/dropNode/useDropNode.ts +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/dropNode/useDropNode.ts @@ -12,7 +12,7 @@ *******************************************************************************/ import { gql, useMutation } from '@apollo/client'; import { useMultiToast } from '@eclipse-sirius/sirius-components-core'; -import { useTheme } from '@material-ui/core/styles'; +import { useTheme } from '@mui/material/styles'; import { useCallback, useContext, useEffect } from 'react'; import { Node, NodeDragHandler, XYPosition, useReactFlow } from 'reactflow'; import { DiagramContext } from '../../contexts/DiagramContext'; diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/dropNode/useDropNodeStyle.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/dropNode/useDropNodeStyle.ts index de944f6ff7c..433c9f55c6f 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/dropNode/useDropNodeStyle.ts +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/dropNode/useDropNodeStyle.ts @@ -11,7 +11,7 @@ * Obeo - initial API and implementation *******************************************************************************/ -import { useTheme } from '@material-ui/core/styles'; +import { useTheme } from '@mui/material/styles'; import { useContext } from 'react'; import { ReactFlowState, useStore } from 'reactflow'; import { DiagramContext } from '../../contexts/DiagramContext'; diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/edge/ConnectionLine.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/edge/ConnectionLine.tsx index 59a0e00d05e..a41fe7021a2 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/edge/ConnectionLine.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/edge/ConnectionLine.tsx @@ -11,7 +11,7 @@ * Obeo - initial API and implementation *******************************************************************************/ -import { Theme, useTheme } from '@material-ui/core/styles'; +import { Theme, useTheme } from '@mui/material/styles'; import React, { memo } from 'react'; import { ConnectionLineComponentProps, getSmoothStepPath } from 'reactflow'; diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/edge/MarkerDefinitions.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/edge/MarkerDefinitions.tsx index da8970705c7..880ef408a70 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/edge/MarkerDefinitions.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/edge/MarkerDefinitions.tsx @@ -12,7 +12,7 @@ *******************************************************************************/ import { getCSSColor } from '@eclipse-sirius/sirius-components-core'; -import { Theme, useTheme } from '@material-ui/core/styles'; +import { Theme, useTheme } from '@mui/material/styles'; import { useCallback } from 'react'; import { Edge, EdgeMarkerType, ReactFlowState, useStore } from 'reactflow'; import { MarkerProps } from './MarkerDefinitions.types'; diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/edge/MultiLabelEdge.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/edge/MultiLabelEdge.tsx index c0641485b81..03a270667ab 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/edge/MultiLabelEdge.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/edge/MultiLabelEdge.tsx @@ -11,7 +11,7 @@ * Obeo - initial API and implementation *******************************************************************************/ import { getCSSColor } from '@eclipse-sirius/sirius-components-core'; -import { Theme, useTheme } from '@material-ui/core/styles'; +import { Theme, useTheme } from '@mui/material/styles'; import { memo, useCallback } from 'react'; import { BaseEdge, diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/handles/ConnectionCreationHandles.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/handles/ConnectionCreationHandles.tsx index a04c0289ccb..868fdbe9197 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/handles/ConnectionCreationHandles.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/handles/ConnectionCreationHandles.tsx @@ -10,7 +10,7 @@ * Contributors: * Obeo - initial API and implementation *******************************************************************************/ -import { Theme, useTheme } from '@material-ui/core/styles'; +import { Theme, useTheme } from '@mui/material/styles'; import React, { memo, useContext, useEffect, useState } from 'react'; import { Handle, Position } from 'reactflow'; import { DiagramContext } from '../../contexts/DiagramContext'; diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/handles/ConnectionHandles.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/handles/ConnectionHandles.tsx index 54fdda1b93c..846f592e125 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/handles/ConnectionHandles.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/handles/ConnectionHandles.tsx @@ -10,7 +10,7 @@ * Contributors: * Obeo - initial API and implementation *******************************************************************************/ -import { Theme, useTheme } from '@material-ui/core/styles'; +import { Theme, useTheme } from '@mui/material/styles'; import React, { useContext } from 'react'; import { Handle, Position, ReactFlowState, useStore } from 'reactflow'; import { DiagramContext } from '../../contexts/DiagramContext'; diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/helper-lines/HelperLines.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/helper-lines/HelperLines.tsx index 8893ce7104e..ac1eba7e8cf 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/helper-lines/HelperLines.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/helper-lines/HelperLines.tsx @@ -10,7 +10,7 @@ * Contributors: * Obeo - initial API and implementation *******************************************************************************/ -import { Theme, useTheme } from '@material-ui/core/styles'; +import { Theme, useTheme } from '@mui/material/styles'; import { CSSProperties, useEffect, useRef } from 'react'; import { ReactFlowState, useStore, useViewport } from 'reactflow'; import { HelperLinesProps } from './HelperLines.types'; diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/layout/layout.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/layout/layout.tsx index b2d7226ae84..e3b95e45444 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/layout/layout.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/layout/layout.tsx @@ -14,7 +14,7 @@ import { ApolloClient, InMemoryCache } from '@apollo/client/core'; import { ApolloProvider } from '@apollo/client/react'; import { MessageOptions, ServerContext, ToastContext, theme } from '@eclipse-sirius/sirius-components-core'; -import { ThemeProvider } from '@material-ui/core/styles'; +import { ThemeProvider } from '@mui/material/styles'; import { Fragment, createElement } from 'react'; import ReactDOM from 'react-dom'; import { Node, ReactFlowProvider } from 'reactflow'; @@ -31,7 +31,7 @@ import { LayoutEngine } from './LayoutEngine'; import { ILayoutEngine, INodeLayoutHandler } from './LayoutEngine.types'; import { computePreviousPosition } from './bounds'; import { RawDiagram } from './layout.types'; -import { isEastBorderNode, isWestBorderNode, getNewlyAddedBorderNodePosition } from './layoutBorderNodes'; +import { getNewlyAddedBorderNodePosition, isEastBorderNode, isWestBorderNode } from './layoutBorderNodes'; import { getChildren } from './layoutNode'; const emptyNodeProps = { diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/node/FreeFormNode.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/node/FreeFormNode.tsx index 569aecaf7e0..e98f38ddce0 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/node/FreeFormNode.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/node/FreeFormNode.tsx @@ -12,7 +12,7 @@ *******************************************************************************/ import { ServerContext, ServerContextValue, getCSSColor } from '@eclipse-sirius/sirius-components-core'; -import { Theme, useTheme } from '@material-ui/core/styles'; +import { Theme, useTheme } from '@mui/material/styles'; import React, { memo, useContext } from 'react'; import { NodeProps } from 'reactflow'; import { BorderNodePosition } from '../DiagramRenderer.types'; diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/node/IconLabelNode.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/node/IconLabelNode.tsx index cedace0639d..22fafe4ef8d 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/node/IconLabelNode.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/node/IconLabelNode.tsx @@ -11,7 +11,7 @@ * Obeo - initial API and implementation *******************************************************************************/ -import { Theme, useTheme } from '@material-ui/core/styles'; +import { Theme, useTheme } from '@mui/material/styles'; import { memo } from 'react'; import { NodeProps } from 'reactflow'; import { Label } from '../Label'; diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/node/ListNode.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/node/ListNode.tsx index 5b52abe2768..ee5d037a6d3 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/node/ListNode.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/node/ListNode.tsx @@ -12,7 +12,7 @@ *******************************************************************************/ import { getCSSColor } from '@eclipse-sirius/sirius-components-core'; -import { Theme, useTheme } from '@material-ui/core/styles'; +import { Theme, useTheme } from '@mui/material/styles'; import { memo } from 'react'; import { NodeProps } from 'reactflow'; import { Label } from '../Label'; diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/node/Resizer.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/node/Resizer.tsx index 4d762c2f45d..a04ed9b535c 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/node/Resizer.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/node/Resizer.tsx @@ -10,9 +10,9 @@ * Contributors: * Obeo - initial API and implementation *******************************************************************************/ -import { Theme, useTheme } from '@material-ui/core/styles'; +import { Theme, useTheme } from '@mui/material/styles'; import { memo, useContext } from 'react'; -import { NodeResizer, NodeResizeControl, ResizeControlVariant } from 'reactflow'; +import { NodeResizeControl, NodeResizer, ResizeControlVariant } from 'reactflow'; import { DiagramContext } from '../../contexts/DiagramContext'; import { DiagramContextValue } from '../../contexts/DiagramContext.types'; import { ResizerProps } from './Resizer.types'; diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/Palette.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/Palette.tsx index 479db750975..421f41e47b6 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/Palette.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/Palette.tsx @@ -13,14 +13,14 @@ import { gql, useMutation, useQuery } from '@apollo/client'; import { useDeletionConfirmationDialog, useMultiToast } from '@eclipse-sirius/sirius-components-core'; -import IconButton from '@material-ui/core/IconButton'; -import Paper from '@material-ui/core/Paper'; -import Tooltip from '@material-ui/core/Tooltip'; -import { makeStyles } from '@material-ui/core/styles'; -import AdjustIcon from '@material-ui/icons/Adjust'; -import TonalityIcon from '@material-ui/icons/Tonality'; +import AdjustIcon from '@mui/icons-material/Adjust'; +import TonalityIcon from '@mui/icons-material/Tonality'; +import IconButton from '@mui/material/IconButton'; +import Paper from '@mui/material/Paper'; +import Tooltip from '@mui/material/Tooltip'; import React, { useCallback, useContext, useEffect, useState } from 'react'; import { useReactFlow, useViewport } from 'reactflow'; +import { makeStyles } from 'tss-react/mui'; import { DiagramContext } from '../../contexts/DiagramContext'; import { DiagramContextValue } from '../../contexts/DiagramContext.types'; import { PinIcon } from '../../icons/PinIcon'; @@ -63,7 +63,7 @@ import { } from './Palette.types'; import { ToolSection } from './tool-section/ToolSection'; -const usePaletteStyle = makeStyles((theme) => ({ +const usePaletteStyle = makeStyles()((theme, { toolCount }) => ({ palette: { border: `1px solid ${theme.palette.divider}`, borderRadius: '2px', @@ -74,7 +74,7 @@ const usePaletteStyle = makeStyles((theme) => ({ }, paletteContent: { display: 'grid', - gridTemplateColumns: ({ toolCount }: ContextualPaletteStyleProps) => `repeat(${Math.min(toolCount, 10)}, 36px)`, + gridTemplateColumns: `repeat(${Math.min(toolCount, 10)}, 36px)`, gridTemplateRows: '28px', gridAutoRows: '28px', placeItems: 'center', @@ -255,7 +255,7 @@ export const Palette = ({ : 0) + (hideableDiagramElement ? (node ? 3 : 1) : 0) + diagramPaletteToolComponents.length; - const classes = usePaletteStyle({ toolCount }); + const { classes } = usePaletteStyle({ toolCount }); let pinUnpinTool: JSX.Element | undefined; let adjustSizeTool: JSX.Element | undefined; diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/PaletteTool.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/PaletteTool.tsx index 7ba35b381e8..a12865aee90 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/PaletteTool.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/PaletteTool.tsx @@ -10,19 +10,19 @@ * Contributors: * Obeo - initial API and implementation *******************************************************************************/ -import IconButton from '@material-ui/core/IconButton'; -import Tooltip from '@material-ui/core/Tooltip'; -import { makeStyles } from '@material-ui/core/styles'; +import IconButton from '@mui/material/IconButton'; +import Tooltip from '@mui/material/Tooltip'; +import { makeStyles } from 'tss-react/mui'; import { PaletteToolProps } from './PaletteTool.types'; -const usePaletteToolStyle = makeStyles((theme) => ({ +const usePaletteToolStyle = makeStyles()((theme) => ({ toolIcon: { color: theme.palette.text.primary, }, })); export const PaletteTool = ({ toolName, onClick, children }: PaletteToolProps) => { - const classes = usePaletteToolStyle(); + const { classes } = usePaletteToolStyle(); return ( diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/group-tool/GroupPalette.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/group-tool/GroupPalette.tsx index 22c3149f1ea..61823259c31 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/group-tool/GroupPalette.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/group-tool/GroupPalette.tsx @@ -11,20 +11,20 @@ * Obeo - initial API and implementation *******************************************************************************/ -import ClickAwayListener from '@material-ui/core/ClickAwayListener'; -import Paper from '@material-ui/core/Paper'; -import Popper from '@material-ui/core/Popper'; -import { makeStyles } from '@material-ui/core/styles'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; -import PhotoSizeSelectSmallIcon from '@material-ui/icons/PhotoSizeSelectSmall'; -import TonalityIcon from '@material-ui/icons/Tonality'; -import VerticalAlignCenterIcon from '@material-ui/icons/VerticalAlignCenter'; -import ViewColumnIcon from '@material-ui/icons/ViewColumn'; -import ViewModuleIcon from '@material-ui/icons/ViewModule'; -import ViewStreamIcon from '@material-ui/icons/ViewStream'; -import VisibilityOffIcon from '@material-ui/icons/VisibilityOff'; -import { memo, useCallback, useRef, useState, Fragment } from 'react'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import PhotoSizeSelectSmallIcon from '@mui/icons-material/PhotoSizeSelectSmall'; +import TonalityIcon from '@mui/icons-material/Tonality'; +import VerticalAlignCenterIcon from '@mui/icons-material/VerticalAlignCenter'; +import ViewColumnIcon from '@mui/icons-material/ViewColumn'; +import ViewModuleIcon from '@mui/icons-material/ViewModule'; +import ViewStreamIcon from '@mui/icons-material/ViewStream'; +import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; +import ClickAwayListener from '@mui/material/ClickAwayListener'; +import Paper from '@mui/material/Paper'; +import Popper from '@mui/material/Popper'; +import { Fragment, memo, useCallback, useRef, useState } from 'react'; import { Node, OnSelectionChangeFunc, useOnSelectionChange, useReactFlow } from 'reactflow'; +import { makeStyles } from 'tss-react/mui'; import { AlignHorizontalCenterIcon } from '../../../icons/AlignHorizontalCenterIcon'; import { AlignHorizontalLeftIcon } from '../../../icons/AlignHorizontalLeftIcon'; import { AlignHorizontalRightIcon } from '../../../icons/AlignHorizontalRightIcon'; @@ -45,7 +45,7 @@ import { PalettePortal } from '../PalettePortal'; import { PaletteTool } from '../PaletteTool'; import { GroupPaletteProps, GroupPaletteSectionTool, GroupPaletteState } from './GroupPalette.types'; -const usePaletteStyle = makeStyles((theme) => ({ +const usePaletteStyle = makeStyles()((theme, { toolCount }) => ({ palette: { border: `1px solid ${theme.palette.divider}`, borderRadius: '2px', @@ -56,7 +56,7 @@ const usePaletteStyle = makeStyles((theme) => ({ }, paletteContent: { display: 'grid', - gridTemplateColumns: ({ toolCount }: ContextualPaletteStyleProps) => `repeat(${Math.min(toolCount, 10)}, 36px)`, + gridTemplateColumns: `repeat(${Math.min(toolCount, 10)}, 36px)`, gridTemplateRows: theme.spacing(3.5), gridAutoRows: theme.spacing(3.5), placeItems: 'center', @@ -155,7 +155,7 @@ export const GroupPalette = memo(({ x, y, isOpened, refElementId, hidePalette }: }); const toolCount = state.isMinimalPalette ? 2 : 4; - const classes = usePaletteStyle({ toolCount }); + const { classes } = usePaletteStyle({ toolCount }); const anchorRef = useRef(null); const distributeElementTools: GroupPaletteSectionTool[][] = state.isMinimalPalette diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/tool-section/ToolSection.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/tool-section/ToolSection.tsx index 6a2870ee5e8..5d8b5f4c8a7 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/tool-section/ToolSection.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/tool-section/ToolSection.tsx @@ -10,18 +10,18 @@ * Contributors: * Obeo - initial API and implementation *******************************************************************************/ -import ClickAwayListener from '@material-ui/core/ClickAwayListener'; -import Paper from '@material-ui/core/Paper'; -import Popper from '@material-ui/core/Popper'; -import { makeStyles } from '@material-ui/core/styles'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import ClickAwayListener from '@mui/material/ClickAwayListener'; +import Paper from '@mui/material/Paper'; +import Popper from '@mui/material/Popper'; import { useCallback, useRef } from 'react'; +import { makeStyles } from 'tss-react/mui'; import { Tool } from '../../Tool'; import { GQLSingleClickOnDiagramElementTool, GQLTool } from '../Palette.types'; import { useDiagramPalette } from '../useDiagramPalette'; import { ToolSectionProps } from './ToolSection.types'; -const useToolSectionStyles = makeStyles((theme) => ({ +const useToolSectionStyles = makeStyles()((theme) => ({ toolSection: { display: 'flex', flexDirection: 'row', @@ -51,7 +51,7 @@ export const ToolSection = ({ toolSection, onToolClick, toolSectionExpandId, onE const tools = toolSection.tools.filter(isSingleClickOnDiagramElementTool); const { getLastToolInvoked, setLastToolInvoked } = useDiagramPalette(); - const classes = useToolSectionStyles(); + const { classes } = useToolSectionStyles(); const onActiveTool = useCallback( (tool) => { @@ -100,7 +100,6 @@ export const ToolSection = ({ toolSection, onToolClick, toolSectionExpandId, onE open={toolSectionExpandId === toolSection.id} anchorEl={anchorRef.current} placement="bottom-start" - transition disablePortal style={{ zIndex: 9999 }}> diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/panel/DiagramPanel.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/panel/DiagramPanel.tsx index ef4682be11f..f37fee2cf7e 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/panel/DiagramPanel.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/panel/DiagramPanel.tsx @@ -12,21 +12,21 @@ *******************************************************************************/ import { ShareRepresentationModal } from '@eclipse-sirius/sirius-components-core'; -import IconButton from '@material-ui/core/IconButton'; -import Paper from '@material-ui/core/Paper'; -import Tooltip from '@material-ui/core/Tooltip'; -import AccountTreeIcon from '@material-ui/icons/AccountTree'; -import AspectRatioIcon from '@material-ui/icons/AspectRatio'; -import FullscreenIcon from '@material-ui/icons/Fullscreen'; -import FullscreenExitIcon from '@material-ui/icons/FullscreenExit'; -import GridOffIcon from '@material-ui/icons/GridOff'; -import GridOnIcon from '@material-ui/icons/GridOn'; -import ImageIcon from '@material-ui/icons/Image'; -import ShareIcon from '@material-ui/icons/Share'; -import TonalityIcon from '@material-ui/icons/Tonality'; -import VisibilityOffIcon from '@material-ui/icons/VisibilityOff'; -import ZoomInIcon from '@material-ui/icons/ZoomIn'; -import ZoomOutIcon from '@material-ui/icons/ZoomOut'; +import AccountTreeIcon from '@mui/icons-material/AccountTree'; +import AspectRatioIcon from '@mui/icons-material/AspectRatio'; +import FullscreenIcon from '@mui/icons-material/Fullscreen'; +import FullscreenExitIcon from '@mui/icons-material/FullscreenExit'; +import GridOffIcon from '@mui/icons-material/GridOff'; +import GridOnIcon from '@mui/icons-material/GridOn'; +import ImageIcon from '@mui/icons-material/Image'; +import ShareIcon from '@mui/icons-material/Share'; +import TonalityIcon from '@mui/icons-material/Tonality'; +import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; +import ZoomInIcon from '@mui/icons-material/ZoomIn'; +import ZoomOutIcon from '@mui/icons-material/ZoomOut'; +import IconButton from '@mui/material/IconButton'; +import Paper from '@mui/material/Paper'; +import Tooltip from '@mui/material/Tooltip'; import { memo, useContext, useState } from 'react'; import { Panel, useReactFlow } from 'reactflow'; import { DiagramContext } from '../../contexts/DiagramContext'; @@ -161,44 +161,52 @@ export const DiagramPanel = memo( )} - arrangeAll()} - data-testid={'arrange-all'} - disabled={readOnly}> - - + + arrangeAll()} + data-testid={'arrange-all'} + disabled={readOnly}> + + + - - - + + + + + - - - + + + + + - - - + + + + + diff --git a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/package.json b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/package.json index ab730262fcb..21bf07e85b6 100644 --- a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/package.json +++ b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/package.json @@ -33,11 +33,12 @@ }, "peerDependencies": { "@apollo/client": "3.8.1", - "@eclipse-sirius/sirius-components-core": "*", "@eclipse-sirius/sirius-components-charts": "*", + "@eclipse-sirius/sirius-components-core": "*", "@eclipse-sirius/sirius-components-forms": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", + "@mui/x-tree-view": "7.3.1", "@xstate/react": "1.6.3", "graphql": "16.8.0", "react": "17.0.2", @@ -46,25 +47,26 @@ }, "devDependencies": { "@apollo/client": "3.8.1", - "@eclipse-sirius/sirius-components-core": "*", "@eclipse-sirius/sirius-components-charts": "*", + "@eclipse-sirius/sirius-components-core": "*", "@eclipse-sirius/sirius-components-forms": "*", "@eclipse-sirius/sirius-components-tsconfig": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", + "@mui/x-tree-view": "7.3.1", "@testing-library/react": "12.1.2", "@testing-library/user-event": "13.2.1", "@types/react": "17.0.37", "@vitejs/plugin-react": "4.0.4", - "@xstate/react": "1.6.3", "@vitest/coverage-v8": "0.34.2", + "@xstate/react": "1.6.3", "graphql": "16.8.0", "prettier": "2.7.1", - "rollup-plugin-peer-deps-external": "2.2.4", "react": "17.0.2", - "xstate": "4.32.1", + "rollup-plugin-peer-deps-external": "2.2.4", "typescript": "5.1.6", "vite": "4.4.9", - "vitest": "0.34.2" + "vitest": "0.34.2", + "xstate": "4.32.1" } } diff --git a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/BarChartWidget.tsx b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/BarChartWidget.tsx index 7c55cb0f76b..a573bd276d6 100644 --- a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/BarChartWidget.tsx +++ b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/BarChartWidget.tsx @@ -13,13 +13,13 @@ import { BarChart, BarChartRepresentation } from '@eclipse-sirius/sirius-components-charts'; import { useSelection } from '@eclipse-sirius/sirius-components-core'; import { GQLBarChart } from '@eclipse-sirius/sirius-components-forms'; -import Typography from '@material-ui/core/Typography'; -import { Theme, makeStyles } from '@material-ui/core/styles'; -import HelpOutlineOutlined from '@material-ui/icons/HelpOutlineOutlined'; +import HelpOutlineOutlined from '@mui/icons-material/HelpOutlineOutlined'; +import Typography from '@mui/material/Typography'; import { useEffect, useRef, useState } from 'react'; +import { makeStyles } from 'tss-react/mui'; import { BarChartWidgetProps } from './WidgetEntry.types'; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles()((theme) => ({ selected: { color: theme.palette.primary.main, }, @@ -34,7 +34,7 @@ const useStyles = makeStyles((theme) => ({ })); export const BarChartWidget = ({ widget }: BarChartWidgetProps) => { - const classes = useStyles(); + const { classes } = useStyles(); const barChartWidget = widget.chart as GQLBarChart; const chart: BarChartRepresentation = { diff --git a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/ButtonWidget.tsx b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/ButtonWidget.tsx index 42027366f21..9e77f196c43 100644 --- a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/ButtonWidget.tsx +++ b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/ButtonWidget.tsx @@ -12,45 +12,45 @@ *******************************************************************************/ import { ServerContext, ServerContextValue, getCSSColor, useSelection } from '@eclipse-sirius/sirius-components-core'; import { ButtonStyleProps, getTextDecorationLineValue } from '@eclipse-sirius/sirius-components-forms'; -import Button from '@material-ui/core/Button'; -import Typography from '@material-ui/core/Typography'; -import { Theme, makeStyles } from '@material-ui/core/styles'; -import HelpOutlineOutlined from '@material-ui/icons/HelpOutlineOutlined'; +import HelpOutlineOutlined from '@mui/icons-material/HelpOutlineOutlined'; +import Button from '@mui/material/Button'; +import Typography from '@mui/material/Typography'; import { useContext, useEffect, useRef, useState } from 'react'; +import { makeStyles } from 'tss-react/mui'; import { ButtonWidgetState } from './ButtonWidget.types'; import { ButtonWidgetProps } from './WidgetEntry.types'; -const useStyles = makeStyles((theme) => ({ - style: { - backgroundColor: ({ backgroundColor }) => - backgroundColor ? getCSSColor(backgroundColor, theme) : theme.palette.primary.light, - color: ({ foregroundColor }) => (foregroundColor ? getCSSColor(foregroundColor, theme) : 'white'), - fontSize: ({ fontSize }) => (fontSize ? fontSize : null), - fontStyle: ({ italic }) => (italic ? 'italic' : null), - fontWeight: ({ bold }) => (bold ? 'bold' : null), - textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough), - '&:hover': { - backgroundColor: ({ backgroundColor }) => - backgroundColor ? getCSSColor(backgroundColor, theme) : theme.palette.primary.main, - color: ({ foregroundColor }) => (foregroundColor ? getCSSColor(foregroundColor, theme) : 'white'), - fontSize: ({ fontSize }) => (fontSize ? fontSize : null), - fontStyle: ({ italic }) => (italic ? 'italic' : null), - fontWeight: ({ bold }) => (bold ? 'bold' : null), - textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough), +const useStyles = makeStyles()( + (theme, { backgroundColor, foregroundColor, fontSize, italic, bold, underline, strikeThrough, iconOnly }) => ({ + style: { + backgroundColor: backgroundColor ? getCSSColor(backgroundColor, theme) : theme.palette.primary.light, + color: foregroundColor ? getCSSColor(foregroundColor, theme) : 'white', + fontSize: fontSize ? fontSize : null, + fontStyle: italic ? 'italic' : null, + fontWeight: bold ? 'bold' : null, + textDecorationLine: getTextDecorationLineValue(underline, strikeThrough), + '&:hover': { + backgroundColor: backgroundColor ? getCSSColor(backgroundColor, theme) : theme.palette.primary.main, + color: foregroundColor ? getCSSColor(foregroundColor, theme) : 'white', + fontSize: fontSize ? fontSize : null, + fontStyle: italic ? 'italic' : null, + fontWeight: bold ? 'bold' : null, + textDecorationLine: getTextDecorationLineValue(underline, strikeThrough), + }, }, - }, - icon: { - marginRight: ({ iconOnly }) => (iconOnly ? theme.spacing(0) : theme.spacing(2)), - }, - selected: { - color: theme.palette.primary.main, - }, - propertySectionLabel: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - }, -})); + icon: { + marginRight: iconOnly ? theme.spacing(0) : theme.spacing(2), + }, + selected: { + color: theme.palette.primary.main, + }, + propertySectionLabel: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + }, + }) +); export const ButtonWidget = ({ widget }: ButtonWidgetProps) => { const initialState: ButtonWidgetState = { @@ -71,7 +71,7 @@ export const ButtonWidget = ({ widget }: ButtonWidgetProps) => { strikeThrough: widget.style?.strikeThrough ?? null, iconOnly: state.buttonLabel ? false : true, }; - const classes = useStyles(props); + const { classes } = useStyles(props); const { httpOrigin } = useContext(ServerContext); const { selection } = useSelection(); diff --git a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/CheckboxWidget.tsx b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/CheckboxWidget.tsx index 70c14c267e3..0e1f395d00a 100644 --- a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/CheckboxWidget.tsx +++ b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/CheckboxWidget.tsx @@ -12,19 +12,19 @@ *******************************************************************************/ import { getCSSColor, useSelection } from '@eclipse-sirius/sirius-components-core'; import { CheckboxStyleProps } from '@eclipse-sirius/sirius-components-forms'; -import Checkbox from '@material-ui/core/Checkbox'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; -import { makeStyles, Theme } from '@material-ui/core/styles'; -import Typography from '@material-ui/core/Typography'; -import HelpOutlineOutlined from '@material-ui/icons/HelpOutlineOutlined'; +import HelpOutlineOutlined from '@mui/icons-material/HelpOutlineOutlined'; +import Checkbox from '@mui/material/Checkbox'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Typography from '@mui/material/Typography'; import { useEffect, useRef, useState } from 'react'; +import { makeStyles } from 'tss-react/mui'; import { CheckboxWidgetProps } from './WidgetEntry.types'; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles()((theme, { color }) => ({ style: { - color: ({ color }) => (color ? getCSSColor(color, theme) : theme.palette.primary.light), + color: color ? getCSSColor(color, theme) : theme.palette.primary.light, '&.Mui-checked': { - color: ({ color }) => (color ? getCSSColor(color, theme) : theme.palette.primary.light), + color: color ? getCSSColor(color, theme) : theme.palette.primary.light, }, }, selected: { @@ -41,7 +41,7 @@ export const CheckboxWidget = ({ widget }: CheckboxWidgetProps) => { const props: CheckboxStyleProps = { color: widget.style?.color ?? null, }; - const classes = useStyles(props); + const { classes } = useStyles(props); const [selected, setSelected] = useState(false); const { selection } = useSelection(); diff --git a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/CustomWidget.tsx b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/CustomWidget.tsx index ede4c5fc97b..1326a767fa8 100644 --- a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/CustomWidget.tsx +++ b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/CustomWidget.tsx @@ -11,15 +11,15 @@ * Obeo - initial API and implementation *******************************************************************************/ import { useSelection } from '@eclipse-sirius/sirius-components-core'; -import Typography from '@material-ui/core/Typography'; -import { Theme, makeStyles } from '@material-ui/core/styles'; -import ExtensionIcon from '@material-ui/icons/Extension'; -import HelpOutlineOutlined from '@material-ui/icons/HelpOutlineOutlined'; +import ExtensionIcon from '@mui/icons-material/Extension'; +import HelpOutlineOutlined from '@mui/icons-material/HelpOutlineOutlined'; +import Typography from '@mui/material/Typography'; import { useEffect, useRef, useState } from 'react'; +import { makeStyles } from 'tss-react/mui'; import { CustomWidgetProps } from './CustomWidget.types'; type CustomWidgetStyleProps = {}; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles()((theme) => ({ style: { color: theme.palette.secondary.main, }, @@ -40,7 +40,7 @@ const useStyles = makeStyles((theme) => ({ */ export const CustomWidget = ({ widget }: CustomWidgetProps) => { const props: CustomWidgetStyleProps = {}; - const classes = useStyles(props); + const { classes } = useStyles(props); const [selected, setSelected] = useState(false); const { selection } = useSelection(); diff --git a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/FlexboxContainerWidget.tsx b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/FlexboxContainerWidget.tsx index 8275a23bfd3..44c073cab3c 100644 --- a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/FlexboxContainerWidget.tsx +++ b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/FlexboxContainerWidget.tsx @@ -13,15 +13,18 @@ import { useMutation } from '@apollo/client'; import { Toast, getCSSColor, useSelection } from '@eclipse-sirius/sirius-components-core'; import { + GQLContainerBorderStyle, + GQLFlexDirection, + GQLFlexWrap, GQLWidget, PropertySectionContext, PropertySectionContextValue, } from '@eclipse-sirius/sirius-components-forms'; -import Typography from '@material-ui/core/Typography'; -import { Theme, makeStyles } from '@material-ui/core/styles'; -import HelpOutlineOutlined from '@material-ui/icons/HelpOutlineOutlined'; +import HelpOutlineOutlined from '@mui/icons-material/HelpOutlineOutlined'; +import Typography from '@mui/material/Typography'; import React, { useContext, useEffect, useRef, useState } from 'react'; -import { FlexboxContainerWidgetState, FlexboxContainerWidgetStyleProps } from './FlexboxContainerWidget.types'; +import { makeStyles } from 'tss-react/mui'; +import { FlexboxContainerWidgetState } from './FlexboxContainerWidget.types'; import { addWidgetMutation, moveWidgetMutation } from './FormDescriptionEditorEventFragment'; import { GQLAddWidgetInput, @@ -42,22 +45,26 @@ import { useFormDescriptionEditor } from './hooks/useFormDescriptionEditor'; const isErrorPayload = (payload: GQLAddWidgetPayload | GQLMoveWidgetPayload): payload is GQLErrorPayload => payload.__typename === 'ErrorPayload'; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles<{ + flexDirection: GQLFlexDirection; + flexWrap: GQLFlexWrap; + borderStyle: GQLContainerBorderStyle; +}>()((theme, { flexDirection, flexWrap, borderStyle }) => ({ selected: { color: theme.palette.primary.main, }, containerAndLabel: { - margin: ({ borderStyle }) => (borderStyle ? theme.spacing(0.5) : 0), - padding: ({ borderStyle }) => (borderStyle ? theme.spacing(0.5) : 0), - borderWidth: ({ borderStyle }) => borderStyle?.size || 1, - borderColor: ({ borderStyle }) => getCSSColor(borderStyle?.color, theme) || 'gray', - borderStyle: ({ borderStyle }) => borderStyle?.lineStyle || 'solid', - borderRadius: ({ borderStyle }) => borderStyle?.radius || 0, + margin: borderStyle ? theme.spacing(0.5) : 0, + padding: borderStyle ? theme.spacing(0.5) : 0, + borderWidth: borderStyle?.size || 1, + borderColor: getCSSColor(borderStyle?.color, theme) || 'gray', + borderStyle: borderStyle?.lineStyle || 'solid', + borderRadius: borderStyle?.radius || 0, }, container: { display: 'flex', - flexWrap: ({ flexWrap }) => flexWrap, - flexDirection: ({ flexDirection }) => flexDirection, + flexWrap: flexWrap, + flexDirection: flexDirection, '& > *': { marginBottom: theme.spacing(0), }, @@ -89,7 +96,7 @@ const useStyles = makeStyles((theme) => export const FlexboxContainerWidget = ({ page, widget }: FlexboxContainerWidgetProps) => { const { editingContextId, representationId, readOnly } = useFormDescriptionEditor(); const noop = () => {}; - const classes = useStyles({ + const { classes } = useStyles({ flexDirection: widget.flexDirection, flexWrap: widget.flexWrap, borderStyle: widget.borderStyle, diff --git a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/FormDescriptionEditorRepresentation.tsx b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/FormDescriptionEditorRepresentation.tsx index 5ae8710807e..4dad0b1c0c6 100644 --- a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/FormDescriptionEditorRepresentation.tsx +++ b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/FormDescriptionEditorRepresentation.tsx @@ -13,12 +13,12 @@ import { gql, useSubscription } from '@apollo/client'; import { RepresentationComponentProps, Toast } from '@eclipse-sirius/sirius-components-core'; import { PropertySectionContext, PropertySectionContextValue } from '@eclipse-sirius/sirius-components-forms'; -import Avatar from '@material-ui/core/Avatar'; -import Tooltip from '@material-ui/core/Tooltip'; -import Typography from '@material-ui/core/Typography'; -import { makeStyles } from '@material-ui/core/styles'; -import ViewAgendaIcon from '@material-ui/icons/ViewAgenda'; -import WebIcon from '@material-ui/icons/Web'; +import ViewAgendaIcon from '@mui/icons-material/ViewAgenda'; +import WebIcon from '@mui/icons-material/Web'; +import Avatar from '@mui/material/Avatar'; +import Tooltip from '@mui/material/Tooltip'; +import Typography from '@mui/material/Typography'; +import { makeStyles } from 'tss-react/mui'; import { useMachine } from '@xstate/react'; import React, { useContext, useEffect } from 'react'; import { formDescriptionEditorEventSubscription } from './FormDescriptionEditorEventFragment'; @@ -44,7 +44,7 @@ import { FormDescriptionEditorContextProvider } from './hooks/FormDescriptionEdi import { ForIcon } from './icons/ForIcon'; import { IfIcon } from './icons/IfIcon'; -const useFormDescriptionEditorStyles = makeStyles((theme) => ({ +const useFormDescriptionEditorStyles = makeStyles()((theme) => ({ formDescriptionEditor: { display: 'flex', flexDirection: 'column', @@ -138,7 +138,7 @@ export const FormDescriptionEditorRepresentation = ({ representationId, readOnly, }: RepresentationComponentProps) => { - const classes = useFormDescriptionEditorStyles(); + const { classes } = useFormDescriptionEditorStyles(); const noop = () => {}; const [{ value, context }, dispatch] = useMachine< diff --git a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/Group.tsx b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/Group.tsx index 2c1071b0647..5b1243ada5b 100644 --- a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/Group.tsx +++ b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/Group.tsx @@ -19,17 +19,18 @@ import { useSelection, } from '@eclipse-sirius/sirius-components-core'; import { + GQLContainerBorderStyle, GQLWidget, PropertySectionContext, PropertySectionContextValue, } from '@eclipse-sirius/sirius-components-forms'; -import { GroupStyleProps } from '@eclipse-sirius/sirius-components-forms/src/groups/Group.types'; -import Tooltip from '@material-ui/core/Tooltip'; -import Typography from '@material-ui/core/Typography'; -import { Theme, makeStyles, withStyles } from '@material-ui/core/styles'; -import ToggleButton from '@material-ui/lab/ToggleButton'; -import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'; +import ToggleButton from '@mui/material/ToggleButton'; +import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; +import Tooltip from '@mui/material/Tooltip'; +import Typography from '@mui/material/Typography'; +import { Theme } from '@mui/material/styles'; import React, { useContext, useEffect, useRef, useState } from 'react'; +import { makeStyles, withStyles } from 'tss-react/mui'; import { addGroupMutation, addWidgetMutation, @@ -65,23 +66,26 @@ import { WidgetEntry } from './WidgetEntry'; import { isKind } from './WidgetOperations'; import { useFormDescriptionEditor } from './hooks/useFormDescriptionEditor'; -const useGroupEntryStyles = makeStyles((theme) => ({ +const useGroupEntryStyles = makeStyles< + { borderStyle: GQLContainerBorderStyle }, + 'verticalSections' | 'adaptableSections' +>()((theme, { borderStyle }, classes) => ({ group: { display: 'flex', flexDirection: 'column', flexGrow: 1, - borderWidth: ({ borderStyle }) => (borderStyle ? borderStyle.size : 1), - borderColor: ({ borderStyle }) => (borderStyle ? getCSSColor(borderStyle?.color, theme) || 'transparent' : 'gray'), - borderStyle: ({ borderStyle }) => borderStyle?.lineStyle || 'solid', - borderRadius: ({ borderStyle }) => (borderStyle ? borderStyle.radius : 10), + borderWidth: borderStyle ? borderStyle.size : 1, + borderColor: borderStyle ? getCSSColor(borderStyle?.color, theme) || 'transparent' : 'gray', + borderStyle: borderStyle?.lineStyle || 'solid', + borderRadius: borderStyle ? borderStyle.radius : 10, paddingTop: '1px', '&:hover': { borderColor: theme.palette.primary.main, }, - '&:has($verticalSections:hover)': { + [`&:has(.${classes.verticalSections}:hover)`]: { borderStyle: 'dashed', }, - '&:has($adaptableSections:hover)': { + [`&:has(.${classes.adaptableSections}:hover)`]: { borderStyle: 'dashed', }, }, @@ -138,13 +142,13 @@ const useGroupEntryStyles = makeStyles((theme) => ({ }, })); -const GroupTooltip = withStyles((theme: Theme) => ({ +const GroupTooltip = withStyles(Tooltip, (theme: Theme) => ({ tooltip: { backgroundColor: theme.palette.primary.main, margin: '0px', borderRadius: '0px', }, -}))(Tooltip); +})); const isErrorPayload = ( payload: GQLAddWidgetPayload | GQLDeleteGroupPayload | GQLMoveGroupPayload | GQLMoveWidgetPayload @@ -153,7 +157,7 @@ const isErrorPayload = ( export const Group = ({ page, group }: GroupProps) => { const { editingContextId, representationId, readOnly } = useFormDescriptionEditor(); const noop = () => {}; - const classes = useGroupEntryStyles({ + const { classes } = useGroupEntryStyles({ borderStyle: group.borderStyle, }); diff --git a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/ImageWidget.tsx b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/ImageWidget.tsx index 1f122cae68e..e9b2db8d2e0 100644 --- a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/ImageWidget.tsx +++ b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/ImageWidget.tsx @@ -12,44 +12,46 @@ *******************************************************************************/ import { ServerContext, ServerContextValue, useSelection } from '@eclipse-sirius/sirius-components-core'; import { ImageStyleProps } from '@eclipse-sirius/sirius-components-forms'; -import Typography from '@material-ui/core/Typography'; -import { Theme, makeStyles } from '@material-ui/core/styles'; -import HelpOutlineOutlined from '@material-ui/icons/HelpOutlineOutlined'; -import ImageIcon from '@material-ui/icons/Image'; +import HelpOutlineOutlined from '@mui/icons-material/HelpOutlineOutlined'; +import ImageIcon from '@mui/icons-material/Image'; +import Typography from '@mui/material/Typography'; import { useContext, useEffect, useRef, useState } from 'react'; +import { makeStyles } from 'tss-react/mui'; import { ImageWidgetState } from './ImageWidget.types'; import { ImageWidgetProps } from './WidgetEntry.types'; -const useStyles = makeStyles((theme) => ({ - container: { - display: 'grid', - gridTemplateColumns: ({ maxWidth }) => { - if (maxWidth) { - let max = maxWidth; - if (maxWidth.match(/[0-9]$/)) { - max = maxWidth + 'px'; - } - return `minmax(auto, ${max})`; - } else { - return '1fr'; - } +const useStyles = makeStyles()((theme, { maxWidth }) => { + let gridTemplateColumns: string; + if (maxWidth) { + let max = maxWidth; + if (maxWidth.match(/[0-9]$/)) { + max = maxWidth + 'px'; + } + gridTemplateColumns = `minmax(auto, ${max})`; + } else { + gridTemplateColumns = '1fr'; + } + return { + container: { + display: 'grid', + gridTemplateColumns, }, - }, - selected: { - color: theme.palette.primary.main, - }, - propertySectionLabel: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - }, -})); + selected: { + color: theme.palette.primary.main, + }, + propertySectionLabel: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + }, + }; +}); export const ImageWidget = ({ widget }: ImageWidgetProps) => { const props: ImageStyleProps = { maxWidth: widget.maxWidth, }; - const classes = useStyles(props); + const { classes } = useStyles(props); const { httpOrigin } = useContext(ServerContext); const initialState: ImageWidgetState = { imageURL: widget.url, validImage: false, selected: false }; const [state, setState] = useState(initialState); diff --git a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/LabelWidget.tsx b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/LabelWidget.tsx index ed9c4d1a19c..6320faa93e8 100644 --- a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/LabelWidget.tsx +++ b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/LabelWidget.tsx @@ -11,30 +11,32 @@ * Obeo - initial API and implementation *******************************************************************************/ import { getCSSColor, useSelection } from '@eclipse-sirius/sirius-components-core'; -import { getTextDecorationLineValue, LabelStyleProps } from '@eclipse-sirius/sirius-components-forms'; -import { makeStyles, Theme } from '@material-ui/core/styles'; -import Typography from '@material-ui/core/Typography'; -import HelpOutlineOutlined from '@material-ui/icons/HelpOutlineOutlined'; +import { LabelStyleProps, getTextDecorationLineValue } from '@eclipse-sirius/sirius-components-forms'; +import HelpOutlineOutlined from '@mui/icons-material/HelpOutlineOutlined'; +import Typography from '@mui/material/Typography'; import { useEffect, useRef, useState } from 'react'; +import { makeStyles } from 'tss-react/mui'; import { LabelWidgetProps } from './WidgetEntry.types'; -const useStyles = makeStyles((theme) => ({ - style: { - color: ({ color }) => (color ? getCSSColor(color, theme) : null), - fontSize: ({ fontSize }) => (fontSize ? fontSize : null), - fontStyle: ({ italic }) => (italic ? 'italic' : null), - fontWeight: ({ bold }) => (bold ? 'bold' : null), - textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough), - }, - selected: { - color: theme.palette.primary.main, - }, - propertySectionLabel: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - }, -})); +const useStyles = makeStyles()( + (theme, { color, fontSize, italic, bold, underline, strikeThrough }) => ({ + style: { + color: color ? getCSSColor(color, theme) : null, + fontSize: fontSize ? fontSize : null, + fontStyle: italic ? 'italic' : null, + fontWeight: bold ? 'bold' : null, + textDecorationLine: getTextDecorationLineValue(underline, strikeThrough), + }, + selected: { + color: theme.palette.primary.main, + }, + propertySectionLabel: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + }, + }) +); export const LabelWidget = ({ widget }: LabelWidgetProps) => { const props: LabelStyleProps = { @@ -45,7 +47,7 @@ export const LabelWidget = ({ widget }: LabelWidgetProps) => { underline: widget.style?.underline ?? null, strikeThrough: widget.style?.strikeThrough ?? null, }; - const classes = useStyles(props); + const { classes } = useStyles(props); const [selected, setSelected] = useState(false); const { selection } = useSelection(); diff --git a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/LinkWidget.tsx b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/LinkWidget.tsx index eb38119da64..602ccd752dc 100644 --- a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/LinkWidget.tsx +++ b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/LinkWidget.tsx @@ -11,30 +11,32 @@ * Obeo - initial API and implementation *******************************************************************************/ import { getCSSColor, useSelection } from '@eclipse-sirius/sirius-components-core'; -import { getTextDecorationLineValue, LinkStyleProps } from '@eclipse-sirius/sirius-components-forms'; -import Link from '@material-ui/core/Link'; -import { makeStyles, Theme } from '@material-ui/core/styles'; -import HelpOutlineOutlined from '@material-ui/icons/HelpOutlineOutlined'; +import { LinkStyleProps, getTextDecorationLineValue } from '@eclipse-sirius/sirius-components-forms'; +import HelpOutlineOutlined from '@mui/icons-material/HelpOutlineOutlined'; +import Link from '@mui/material/Link'; import { useEffect, useRef, useState } from 'react'; +import { makeStyles } from 'tss-react/mui'; import { LinkWidgetProps } from './WidgetEntry.types'; -const useStyles = makeStyles((theme) => ({ - style: { - color: ({ color }) => (color ? getCSSColor(color, theme) : null), - fontSize: ({ fontSize }) => (fontSize ? fontSize : null), - fontStyle: ({ italic }) => (italic ? 'italic' : null), - fontWeight: ({ bold }) => (bold ? 'bold' : null), - textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough), - }, - selected: { - color: theme.palette.primary.main, - }, - propertySectionLabel: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - }, -})); +const useStyles = makeStyles()( + (theme, { color, fontSize, italic, bold, underline, strikeThrough }) => ({ + style: { + color: color ? getCSSColor(color, theme) : null, + fontSize: fontSize ? fontSize : null, + fontStyle: italic ? 'italic' : null, + fontWeight: bold ? 'bold' : null, + textDecorationLine: getTextDecorationLineValue(underline, strikeThrough), + }, + selected: { + color: theme.palette.primary.main, + }, + propertySectionLabel: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + }, + }) +); export const LinkWidget = ({ widget }: LinkWidgetProps) => { const props: LinkStyleProps = { @@ -45,12 +47,12 @@ export const LinkWidget = ({ widget }: LinkWidgetProps) => { underline: widget.style?.underline ?? null, strikeThrough: widget.style?.strikeThrough ?? null, }; - const classes = useStyles(props); + const { classes } = useStyles(props); const [selected, setSelected] = useState(false); const { selection } = useSelection(); - const ref = useRef(null); + const ref = useRef(null); useEffect(() => { if (ref.current && selection.entries.find((entry) => entry.id === widget.id)) { diff --git a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/ListWidget.tsx b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/ListWidget.tsx index 3dda627ad08..661ca1251a4 100644 --- a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/ListWidget.tsx +++ b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/ListWidget.tsx @@ -12,42 +12,44 @@ *******************************************************************************/ import { getCSSColor, useSelection } from '@eclipse-sirius/sirius-components-core'; -import { getTextDecorationLineValue, ListStyleProps } from '@eclipse-sirius/sirius-components-forms'; -import IconButton from '@material-ui/core/IconButton'; -import { makeStyles, Theme } from '@material-ui/core/styles'; -import Table from '@material-ui/core/Table'; -import TableBody from '@material-ui/core/TableBody'; -import TableCell from '@material-ui/core/TableCell'; -import TableRow from '@material-ui/core/TableRow'; -import Typography from '@material-ui/core/Typography'; -import DeleteIcon from '@material-ui/icons/Delete'; -import HelpOutlineOutlined from '@material-ui/icons/HelpOutlineOutlined'; -import ImageIcon from '@material-ui/icons/Image'; +import { ListStyleProps, getTextDecorationLineValue } from '@eclipse-sirius/sirius-components-forms'; +import DeleteIcon from '@mui/icons-material/Delete'; +import HelpOutlineOutlined from '@mui/icons-material/HelpOutlineOutlined'; +import ImageIcon from '@mui/icons-material/Image'; +import IconButton from '@mui/material/IconButton'; +import Table from '@mui/material/Table'; +import TableBody from '@mui/material/TableBody'; +import TableCell from '@mui/material/TableCell'; +import TableRow from '@mui/material/TableRow'; +import Typography from '@mui/material/Typography'; import { useEffect, useRef, useState } from 'react'; +import { makeStyles } from 'tss-react/mui'; import { ListWidgetProps } from './WidgetEntry.types'; -const useStyles = makeStyles((theme) => ({ - style: { - color: ({ color }) => (color ? getCSSColor(color, theme) : null), - fontSize: ({ fontSize }) => (fontSize ? fontSize : null), - fontStyle: ({ italic }) => (italic ? 'italic' : null), - fontWeight: ({ bold }) => (bold ? 'bold' : null), - textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough), - }, - icon: { - width: '16px', - height: '16px', - marginRight: theme.spacing(2), - }, - selected: { - color: theme.palette.primary.main, - }, - propertySectionLabel: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - }, -})); +const useStyles = makeStyles()( + (theme, { color, fontSize, italic, bold, underline, strikeThrough }) => ({ + style: { + color: color ? getCSSColor(color, theme) : null, + fontSize: fontSize ? fontSize : null, + fontStyle: italic ? 'italic' : null, + fontWeight: bold ? 'bold' : null, + textDecorationLine: getTextDecorationLineValue(underline, strikeThrough), + }, + icon: { + width: '16px', + height: '16px', + marginRight: theme.spacing(2), + }, + selected: { + color: theme.palette.primary.main, + }, + propertySectionLabel: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + }, + }) +); export const ListWidget = ({ widget }: ListWidgetProps) => { const props: ListStyleProps = { @@ -58,7 +60,7 @@ export const ListWidget = ({ widget }: ListWidgetProps) => { underline: widget.style?.underline ?? null, strikeThrough: widget.style?.strikeThrough ?? null, }; - const classes = useStyles(props); + const { classes } = useStyles(props); const [selected, setSelected] = useState(false); const { selection } = useSelection(); diff --git a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/MultiSelectWidget.tsx b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/MultiSelectWidget.tsx index fde9a06eace..3a8a2d6b232 100644 --- a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/MultiSelectWidget.tsx +++ b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/MultiSelectWidget.tsx @@ -11,35 +11,37 @@ * Obeo - initial API and implementation *******************************************************************************/ import { getCSSColor, useSelection } from '@eclipse-sirius/sirius-components-core'; -import { getTextDecorationLineValue, MultiSelectStyleProps } from '@eclipse-sirius/sirius-components-forms'; -import Checkbox from '@material-ui/core/Checkbox'; -import ListItemText from '@material-ui/core/ListItemText'; -import MenuItem from '@material-ui/core/MenuItem'; -import Select from '@material-ui/core/Select'; -import { makeStyles, Theme } from '@material-ui/core/styles'; -import Typography from '@material-ui/core/Typography'; -import HelpOutlineOutlined from '@material-ui/icons/HelpOutlineOutlined'; +import { MultiSelectStyleProps, getTextDecorationLineValue } from '@eclipse-sirius/sirius-components-forms'; +import HelpOutlineOutlined from '@mui/icons-material/HelpOutlineOutlined'; +import Checkbox from '@mui/material/Checkbox'; +import ListItemText from '@mui/material/ListItemText'; +import MenuItem from '@mui/material/MenuItem'; +import Select from '@mui/material/Select'; +import Typography from '@mui/material/Typography'; import { useEffect, useRef, useState } from 'react'; +import { makeStyles } from 'tss-react/mui'; import { MultiSelectWidgetProps } from './WidgetEntry.types'; -const useStyles = makeStyles((theme) => ({ - style: { - backgroundColor: ({ backgroundColor }) => (backgroundColor ? getCSSColor(backgroundColor, theme) : null), - color: ({ foregroundColor }) => (foregroundColor ? getCSSColor(foregroundColor, theme) : null), - fontSize: ({ fontSize }) => (fontSize ? fontSize : null), - fontStyle: ({ italic }) => (italic ? 'italic' : null), - fontWeight: ({ bold }) => (bold ? 'bold' : null), - textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough), - }, - selected: { - color: theme.palette.primary.main, - }, - propertySectionLabel: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - }, -})); +const useStyles = makeStyles()( + (theme, { backgroundColor, foregroundColor, fontSize, italic, bold, underline, strikeThrough }) => ({ + style: { + backgroundColor: backgroundColor ? getCSSColor(backgroundColor, theme) : null, + color: foregroundColor ? getCSSColor(foregroundColor, theme) : null, + fontSize: fontSize ? fontSize : null, + fontStyle: italic ? 'italic' : null, + fontWeight: bold ? 'bold' : null, + textDecorationLine: getTextDecorationLineValue(underline, strikeThrough), + }, + selected: { + color: theme.palette.primary.main, + }, + propertySectionLabel: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + }, + }) +); export const MultiSelectWidget = ({ widget }: MultiSelectWidgetProps) => { const props: MultiSelectStyleProps = { @@ -51,7 +53,7 @@ export const MultiSelectWidget = ({ widget }: MultiSelectWidgetProps) => { underline: widget.style?.underline ?? null, strikeThrough: widget.style?.strikeThrough ?? null, }; - const classes = useStyles(props); + const { classes } = useStyles(props); const [selected, setSelected] = useState(false); const { selection } = useSelection(); diff --git a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/Page.tsx b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/Page.tsx index 025b6f9084d..eb1ddb12c05 100644 --- a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/Page.tsx +++ b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/Page.tsx @@ -12,8 +12,8 @@ *******************************************************************************/ import { useMutation } from '@apollo/client'; import { Toast, useSelection } from '@eclipse-sirius/sirius-components-core'; -import Typography from '@material-ui/core/Typography'; -import { makeStyles } from '@material-ui/core/styles'; +import Typography from '@mui/material/Typography'; +import { makeStyles } from 'tss-react/mui'; import React, { useEffect, useRef, useState } from 'react'; import { addGroupMutation, moveGroupMutation } from './FormDescriptionEditorEventFragment'; import { @@ -34,7 +34,7 @@ import { useFormDescriptionEditor } from './hooks/useFormDescriptionEditor'; const isErrorPayload = (payload: GQLAddPagePayload | GQLMovePagePayload): payload is GQLErrorPayload => payload.__typename === 'ErrorPayload'; -const usePageStyles = makeStyles((theme) => ({ +const usePageStyles = makeStyles()((theme) => ({ page: { display: 'flex', flexDirection: 'column', @@ -68,7 +68,7 @@ const usePageStyles = makeStyles((theme) => ({ export const Page = ({ page }: PageProps) => { const { editingContextId, representationId, readOnly } = useFormDescriptionEditor(); const noop = () => {}; - const classes = usePageStyles(); + const { classes } = usePageStyles(); const initialState: PageState = { message: null, selected: false }; const [state, setState] = useState(initialState); diff --git a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/PageList.tsx b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/PageList.tsx index 7cf5306eb48..5c21f24ecd1 100644 --- a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/PageList.tsx +++ b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/PageList.tsx @@ -13,10 +13,10 @@ import { useMutation } from '@apollo/client'; import { Selection, Toast, useDeletionConfirmationDialog, useSelection } from '@eclipse-sirius/sirius-components-core'; import { GQLFlexboxContainer, GQLPage, GQLWidget } from '@eclipse-sirius/sirius-components-forms'; -import Tab from '@material-ui/core/Tab'; -import Tabs from '@material-ui/core/Tabs'; -import Typography from '@material-ui/core/Typography'; -import { makeStyles } from '@material-ui/core/styles'; +import Tab from '@mui/material/Tab'; +import Tabs from '@mui/material/Tabs'; +import Typography from '@mui/material/Typography'; +import { makeStyles } from 'tss-react/mui'; import React, { useEffect, useState } from 'react'; import { addPageMutation, deletePageMutation, movePageMutation } from './FormDescriptionEditorEventFragment'; import { @@ -55,7 +55,7 @@ const recursiveWidgetSearch = (widget: GQLWidget, entryId: string): boolean => { return false; }; -const usePageListStyles = makeStyles((theme) => ({ +const usePageListStyles = makeStyles()((theme) => ({ rightDropArea: { display: 'flex', flexDirection: 'column', @@ -109,7 +109,7 @@ const a11yProps = (id: string) => { export const PageList = () => { const { editingContextId, representationId, readOnly, formDescriptionEditor } = useFormDescriptionEditor(); const noop = () => {}; - const classes = usePageListStyles(); + const { classes } = usePageListStyles(); const { pages } = formDescriptionEditor; @@ -379,7 +379,7 @@ export const PageList = () => { value={state.selectedPage.id} onChange={readOnly ? noop : onChangeTab} variant="scrollable" - scrollButtons="on" + scrollButtons textColor="primary" indicatorColor="primary"> {state.pages.map((page) => { diff --git a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/PieChartWidget.tsx b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/PieChartWidget.tsx index 741b29f08ba..2bdd8c55e7b 100644 --- a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/PieChartWidget.tsx +++ b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/PieChartWidget.tsx @@ -13,13 +13,13 @@ import { PieChart, PieChartRepresentation } from '@eclipse-sirius/sirius-components-charts'; import { useSelection } from '@eclipse-sirius/sirius-components-core'; import { GQLPieChart } from '@eclipse-sirius/sirius-components-forms'; -import Typography from '@material-ui/core/Typography'; -import { makeStyles } from '@material-ui/core/styles'; -import HelpOutlineOutlined from '@material-ui/icons/HelpOutlineOutlined'; +import HelpOutlineOutlined from '@mui/icons-material/HelpOutlineOutlined'; +import Typography from '@mui/material/Typography'; +import { makeStyles } from 'tss-react/mui'; import { useEffect, useRef, useState } from 'react'; import { PieChartWidgetProps } from './WidgetEntry.types'; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles()((theme) => ({ selected: { color: theme.palette.primary.main, }, @@ -31,7 +31,7 @@ const useStyles = makeStyles((theme) => ({ })); export const PieChartWidget = ({ widget }: PieChartWidgetProps) => { - const classes = useStyles(); + const { classes } = useStyles(); const pieChartWidget = widget.chart as GQLPieChart; const chart: PieChartRepresentation = { diff --git a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/RadioWidget.tsx b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/RadioWidget.tsx index 8b14721a125..b8c082640c6 100644 --- a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/RadioWidget.tsx +++ b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/RadioWidget.tsx @@ -11,33 +11,35 @@ * Obeo - initial API and implementation *******************************************************************************/ import { getCSSColor, useSelection } from '@eclipse-sirius/sirius-components-core'; -import { getTextDecorationLineValue, RadioStyleProps } from '@eclipse-sirius/sirius-components-forms'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; -import Radio from '@material-ui/core/Radio'; -import RadioGroup from '@material-ui/core/RadioGroup'; -import { makeStyles, Theme } from '@material-ui/core/styles'; -import Typography from '@material-ui/core/Typography'; -import HelpOutlineOutlined from '@material-ui/icons/HelpOutlineOutlined'; +import { RadioStyleProps, getTextDecorationLineValue } from '@eclipse-sirius/sirius-components-forms'; +import HelpOutlineOutlined from '@mui/icons-material/HelpOutlineOutlined'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Radio from '@mui/material/Radio'; +import RadioGroup from '@mui/material/RadioGroup'; +import Typography from '@mui/material/Typography'; import { useEffect, useRef, useState } from 'react'; +import { makeStyles } from 'tss-react/mui'; import { RadioWidgetProps } from './WidgetEntry.types'; -const useStyles = makeStyles((theme) => ({ - style: { - color: ({ color }) => (color ? getCSSColor(color, theme) : null), - fontSize: ({ fontSize }) => (fontSize ? fontSize : null), - fontStyle: ({ italic }) => (italic ? 'italic' : null), - fontWeight: ({ bold }) => (bold ? 'bold' : null), - textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough), - }, - selected: { - color: theme.palette.primary.main, - }, - propertySectionLabel: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - }, -})); +const useStyles = makeStyles()( + (theme, { color, fontSize, italic, bold, underline, strikeThrough }) => ({ + style: { + color: color ? getCSSColor(color, theme) : null, + fontSize: fontSize ? fontSize : null, + fontStyle: italic ? 'italic' : null, + fontWeight: bold ? 'bold' : null, + textDecorationLine: getTextDecorationLineValue(underline, strikeThrough), + }, + selected: { + color: theme.palette.primary.main, + }, + propertySectionLabel: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + }, + }) +); export const RadioWidget = ({ widget }: RadioWidgetProps) => { const props: RadioStyleProps = { @@ -48,7 +50,7 @@ export const RadioWidget = ({ widget }: RadioWidgetProps) => { underline: widget.style?.underline ?? null, strikeThrough: widget.style?.strikeThrough ?? null, }; - const classes = useStyles(props); + const { classes } = useStyles(props); const [selected, setSelected] = useState(false); const { selection } = useSelection(); diff --git a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/RichTextWidget.tsx b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/RichTextWidget.tsx index f2dc5bf2da1..ce2cbfadc22 100644 --- a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/RichTextWidget.tsx +++ b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/RichTextWidget.tsx @@ -11,25 +11,25 @@ * Obeo - initial API and implementation *******************************************************************************/ import { useSelection } from '@eclipse-sirius/sirius-components-core'; -import Divider from '@material-ui/core/Divider'; -import Paper from '@material-ui/core/Paper'; -import Typography from '@material-ui/core/Typography'; -import { makeStyles, withStyles } from '@material-ui/core/styles'; -import CodeIcon from '@material-ui/icons/Code'; -import FormatBoldIcon from '@material-ui/icons/FormatBold'; -import FormatItalicIcon from '@material-ui/icons/FormatItalic'; -import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted'; -import FormatListNumberedIcon from '@material-ui/icons/FormatListNumbered'; -import HelpOutlineOutlined from '@material-ui/icons/HelpOutlineOutlined'; -import StrikethroughSIcon from '@material-ui/icons/StrikethroughS'; -import SubjectIcon from '@material-ui/icons/Subject'; -import TitleIcon from '@material-ui/icons/Title'; -import ToggleButton from '@material-ui/lab/ToggleButton'; -import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'; +import CodeIcon from '@mui/icons-material/Code'; +import FormatBoldIcon from '@mui/icons-material/FormatBold'; +import FormatItalicIcon from '@mui/icons-material/FormatItalic'; +import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted'; +import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered'; +import HelpOutlineOutlined from '@mui/icons-material/HelpOutlineOutlined'; +import StrikethroughSIcon from '@mui/icons-material/StrikethroughS'; +import SubjectIcon from '@mui/icons-material/Subject'; +import TitleIcon from '@mui/icons-material/Title'; +import Divider from '@mui/material/Divider'; +import Paper from '@mui/material/Paper'; +import ToggleButton from '@mui/material/ToggleButton'; +import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; +import Typography from '@mui/material/Typography'; +import { makeStyles, withStyles } from 'tss-react/mui'; import { useEffect, useRef, useState } from 'react'; import { RichTextWidgetProps } from './WidgetEntry.types'; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles()((theme) => ({ selected: { color: theme.palette.primary.main, }, @@ -66,7 +66,7 @@ const useStyles = makeStyles((theme) => ({ }, })); -const StyledToggleButtonGroup = withStyles((theme) => ({ +const StyledToggleButtonGroup = withStyles(ToggleButtonGroup, (theme) => ({ grouped: { margin: theme.spacing(0.5), border: 'none', @@ -77,10 +77,10 @@ const StyledToggleButtonGroup = withStyles((theme) => ({ borderRadius: theme.shape.borderRadius, }, }, -}))(ToggleButtonGroup); +})); export const RichTextWidget = ({ widget }: RichTextWidgetProps) => { - const classes = useStyles(); + const { classes } = useStyles(); const [selected, setSelected] = useState(false); const { selection } = useSelection(); const ref = useRef(null); diff --git a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/SelectWidget.tsx b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/SelectWidget.tsx index bba40c31c29..3815b350c4e 100644 --- a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/SelectWidget.tsx +++ b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/SelectWidget.tsx @@ -11,33 +11,35 @@ * Obeo - initial API and implementation *******************************************************************************/ import { getCSSColor, useSelection } from '@eclipse-sirius/sirius-components-core'; -import { getTextDecorationLineValue, SelectStyleProps } from '@eclipse-sirius/sirius-components-forms'; -import MenuItem from '@material-ui/core/MenuItem'; -import Select from '@material-ui/core/Select'; -import { makeStyles, Theme } from '@material-ui/core/styles'; -import Typography from '@material-ui/core/Typography'; -import HelpOutlineOutlined from '@material-ui/icons/HelpOutlineOutlined'; +import { SelectStyleProps, getTextDecorationLineValue } from '@eclipse-sirius/sirius-components-forms'; +import HelpOutlineOutlined from '@mui/icons-material/HelpOutlineOutlined'; +import MenuItem from '@mui/material/MenuItem'; +import Select from '@mui/material/Select'; +import Typography from '@mui/material/Typography'; import { useEffect, useRef, useState } from 'react'; +import { makeStyles } from 'tss-react/mui'; import { SelectWidgetProps } from './WidgetEntry.types'; -const useStyles = makeStyles((theme) => ({ - style: { - backgroundColor: ({ backgroundColor }) => (backgroundColor ? getCSSColor(backgroundColor, theme) : null), - color: ({ foregroundColor }) => (foregroundColor ? getCSSColor(foregroundColor, theme) : null), - fontSize: ({ fontSize }) => (fontSize ? fontSize : null), - fontStyle: ({ italic }) => (italic ? 'italic' : null), - fontWeight: ({ bold }) => (bold ? 'bold' : null), - textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough), - }, - selected: { - color: theme.palette.primary.main, - }, - propertySectionLabel: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - }, -})); +const useStyles = makeStyles()( + (theme, { backgroundColor, foregroundColor, fontSize, italic, bold, underline, strikeThrough }) => ({ + style: { + backgroundColor: backgroundColor ? getCSSColor(backgroundColor, theme) : null, + color: foregroundColor ? getCSSColor(foregroundColor, theme) : null, + fontSize: fontSize ? fontSize : null, + fontStyle: italic ? 'italic' : null, + fontWeight: bold ? 'bold' : null, + textDecorationLine: getTextDecorationLineValue(underline, strikeThrough), + }, + selected: { + color: theme.palette.primary.main, + }, + propertySectionLabel: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + }, + }) +); export const SelectWidget = ({ widget }: SelectWidgetProps) => { const props: SelectStyleProps = { @@ -49,7 +51,7 @@ export const SelectWidget = ({ widget }: SelectWidgetProps) => { underline: widget.style?.underline ?? null, strikeThrough: widget.style?.strikeThrough ?? null, }; - const classes = useStyles(props); + const { classes } = useStyles(props); const [selected, setSelected] = useState(false); const { selection } = useSelection(); diff --git a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/SliderWidget.tsx b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/SliderWidget.tsx index 5510f726e77..3f8e884d53a 100644 --- a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/SliderWidget.tsx +++ b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/SliderWidget.tsx @@ -11,15 +11,15 @@ * Obeo - initial API and implementation *******************************************************************************/ import { useSelection } from '@eclipse-sirius/sirius-components-core'; -import Slider from '@material-ui/core/Slider'; -import Typography from '@material-ui/core/Typography'; -import { Theme, makeStyles } from '@material-ui/core/styles'; -import ExtensionIcon from '@material-ui/icons/Extension'; -import HelpOutlineOutlined from '@material-ui/icons/HelpOutlineOutlined'; +import ExtensionIcon from '@mui/icons-material/Extension'; +import HelpOutlineOutlined from '@mui/icons-material/HelpOutlineOutlined'; +import Slider from '@mui/material/Slider'; +import Typography from '@mui/material/Typography'; import { useEffect, useRef, useState } from 'react'; +import { makeStyles } from 'tss-react/mui'; import { SliderWidgetProps } from './WidgetEntry.types'; -const useSliderWidgetStyles = makeStyles((theme) => ({ +const useSliderWidgetStyles = makeStyles()((theme) => ({ style: { color: theme.palette.secondary.main, }, @@ -34,7 +34,7 @@ const useSliderWidgetStyles = makeStyles((theme) => ({ })); export const SliderWidget = ({ widget }: SliderWidgetProps) => { - const classes = useSliderWidgetStyles(); + const { classes } = useSliderWidgetStyles(); const [selected, setSelected] = useState(false); diff --git a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/SplitButtonWidget.tsx b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/SplitButtonWidget.tsx index 18f68826aa5..c4bd608bf06 100644 --- a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/SplitButtonWidget.tsx +++ b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/SplitButtonWidget.tsx @@ -19,18 +19,19 @@ import { useSelection, } from '@eclipse-sirius/sirius-components-core'; import { GQLButtonStyle, getTextDecorationLineValue } from '@eclipse-sirius/sirius-components-forms'; -import Button from '@material-ui/core/Button'; -import ButtonGroup from '@material-ui/core/ButtonGroup'; -import ClickAwayListener from '@material-ui/core/ClickAwayListener'; -import Grow from '@material-ui/core/Grow'; -import MenuItem from '@material-ui/core/MenuItem'; -import MenuList from '@material-ui/core/MenuList'; -import Paper from '@material-ui/core/Paper'; -import Popper from '@material-ui/core/Popper'; -import Typography from '@material-ui/core/Typography'; -import { Theme, makeStyles, useTheme } from '@material-ui/core/styles'; -import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown'; -import HelpOutlineOutlined from '@material-ui/icons/HelpOutlineOutlined'; +import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'; +import HelpOutlineOutlined from '@mui/icons-material/HelpOutlineOutlined'; +import Button from '@mui/material/Button'; +import ButtonGroup from '@mui/material/ButtonGroup'; +import ClickAwayListener from '@mui/material/ClickAwayListener'; +import Grow from '@mui/material/Grow'; +import MenuItem from '@mui/material/MenuItem'; +import MenuList from '@mui/material/MenuList'; +import Paper from '@mui/material/Paper'; +import Popper from '@mui/material/Popper'; +import Typography from '@mui/material/Typography'; +import { Theme, useTheme } from '@mui/material/styles'; +import { makeStyles } from 'tss-react/mui'; import React, { useContext, useEffect, useRef, useState } from 'react'; import { addWidgetMutation } from './FormDescriptionEditorEventFragment'; import { @@ -70,7 +71,7 @@ const imageStyle = (theme: Theme, iconOnly: boolean): React.CSSProperties => { }; }; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles()((theme) => ({ bottomDropArea: { display: 'flex', flexDirection: 'column', @@ -200,7 +201,7 @@ export const SplitButtonWidget = ({ widget }: SplitButtonWidgetProps) => { } }, [selection, widget]); - const classes = useStyles(); + const { classes } = useStyles(); const handleMenuItemClick = (_event, index) => { setState((prevState) => ({ ...prevState, open: false, selectedIndex: index })); diff --git a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/TextAreaWidget.tsx b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/TextAreaWidget.tsx index 9bb7b2c4985..6b8d3d68b3f 100644 --- a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/TextAreaWidget.tsx +++ b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/TextAreaWidget.tsx @@ -11,32 +11,34 @@ * Obeo - initial API and implementation *******************************************************************************/ import { getCSSColor, useSelection } from '@eclipse-sirius/sirius-components-core'; -import { getTextDecorationLineValue, TextfieldStyleProps } from '@eclipse-sirius/sirius-components-forms'; -import { makeStyles, Theme } from '@material-ui/core/styles'; -import TextField from '@material-ui/core/TextField'; -import Typography from '@material-ui/core/Typography'; -import HelpOutlineOutlined from '@material-ui/icons/HelpOutlineOutlined'; +import { TextfieldStyleProps, getTextDecorationLineValue } from '@eclipse-sirius/sirius-components-forms'; +import HelpOutlineOutlined from '@mui/icons-material/HelpOutlineOutlined'; +import TextField from '@mui/material/TextField'; +import Typography from '@mui/material/Typography'; import { useEffect, useRef, useState } from 'react'; +import { makeStyles } from 'tss-react/mui'; import { TextareaWidgetProps } from './WidgetEntry.types'; -const useStyles = makeStyles((theme) => ({ - style: { - backgroundColor: ({ backgroundColor }) => (backgroundColor ? getCSSColor(backgroundColor, theme) : null), - color: ({ foregroundColor }) => (foregroundColor ? getCSSColor(foregroundColor, theme) : null), - fontSize: ({ fontSize }) => (fontSize ? fontSize : null), - fontStyle: ({ italic }) => (italic ? 'italic' : null), - fontWeight: ({ bold }) => (bold ? 'bold' : null), - textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough), - }, - selected: { - color: theme.palette.primary.main, - }, - propertySectionLabel: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - }, -})); +const useStyles = makeStyles()( + (theme, { backgroundColor, foregroundColor, fontSize, italic, bold, underline, strikeThrough }) => ({ + style: { + backgroundColor: backgroundColor ? getCSSColor(backgroundColor, theme) : null, + color: foregroundColor ? getCSSColor(foregroundColor, theme) : null, + fontSize: fontSize ? fontSize : null, + fontStyle: italic ? 'italic' : null, + fontWeight: bold ? 'bold' : null, + textDecorationLine: getTextDecorationLineValue(underline, strikeThrough), + }, + selected: { + color: theme.palette.primary.main, + }, + propertySectionLabel: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + }, + }) +); export const TextAreaWidget = ({ widget }: TextareaWidgetProps) => { const props: TextfieldStyleProps = { @@ -48,7 +50,7 @@ export const TextAreaWidget = ({ widget }: TextareaWidgetProps) => { underline: widget.style?.underline ?? null, strikeThrough: widget.style?.strikeThrough ?? null, }; - const classes = useStyles(props); + const { classes } = useStyles(props); const [selected, setSelected] = useState(false); const { selection } = useSelection(); diff --git a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/TextfieldWidget.tsx b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/TextfieldWidget.tsx index b9aec5d12c0..5330afb51ca 100644 --- a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/TextfieldWidget.tsx +++ b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/TextfieldWidget.tsx @@ -11,32 +11,34 @@ * Obeo - initial API and implementation *******************************************************************************/ import { getCSSColor, useSelection } from '@eclipse-sirius/sirius-components-core'; -import { getTextDecorationLineValue, TextfieldStyleProps } from '@eclipse-sirius/sirius-components-forms'; -import { makeStyles, Theme } from '@material-ui/core/styles'; -import TextField from '@material-ui/core/TextField'; -import Typography from '@material-ui/core/Typography'; -import HelpOutlineOutlined from '@material-ui/icons/HelpOutlineOutlined'; +import { TextfieldStyleProps, getTextDecorationLineValue } from '@eclipse-sirius/sirius-components-forms'; +import HelpOutlineOutlined from '@mui/icons-material/HelpOutlineOutlined'; +import TextField from '@mui/material/TextField'; +import Typography from '@mui/material/Typography'; import { useEffect, useRef, useState } from 'react'; +import { makeStyles } from 'tss-react/mui'; import { TextfieldWidgetProps } from './WidgetEntry.types'; -const useStyles = makeStyles((theme) => ({ - style: { - backgroundColor: ({ backgroundColor }) => (backgroundColor ? getCSSColor(backgroundColor, theme) : null), - color: ({ foregroundColor }) => (foregroundColor ? getCSSColor(foregroundColor, theme) : null), - fontSize: ({ fontSize }) => (fontSize ? fontSize : null), - fontStyle: ({ italic }) => (italic ? 'italic' : null), - fontWeight: ({ bold }) => (bold ? 'bold' : null), - textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough), - }, - selected: { - color: theme.palette.primary.main, - }, - propertySectionLabel: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - }, -})); +const useStyles = makeStyles()( + (theme, { backgroundColor, foregroundColor, fontSize, italic, bold, underline, strikeThrough }) => ({ + style: { + backgroundColor: backgroundColor ? getCSSColor(backgroundColor, theme) : null, + color: foregroundColor ? getCSSColor(foregroundColor, theme) : null, + fontSize: fontSize ? fontSize : null, + fontStyle: italic ? 'italic' : null, + fontWeight: bold ? 'bold' : null, + textDecorationLine: getTextDecorationLineValue(underline, strikeThrough), + }, + selected: { + color: theme.palette.primary.main, + }, + propertySectionLabel: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + }, + }) +); export const TextfieldWidget = ({ widget }: TextfieldWidgetProps) => { const props: TextfieldStyleProps = { @@ -48,7 +50,7 @@ export const TextfieldWidget = ({ widget }: TextfieldWidgetProps) => { underline: widget.style?.underline ?? null, strikeThrough: widget.style?.strikeThrough ?? null, }; - const classes = useStyles(props); + const { classes } = useStyles(props); const [selected, setSelected] = useState(false); const { selection } = useSelection(); diff --git a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/ToolbarActionWidget.tsx b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/ToolbarActionWidget.tsx index 1d7021b4bdc..495476467af 100644 --- a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/ToolbarActionWidget.tsx +++ b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/ToolbarActionWidget.tsx @@ -25,9 +25,9 @@ import { GQLToolbarAction, getTextDecorationLineValue, } from '@eclipse-sirius/sirius-components-forms'; -import Button from '@material-ui/core/Button'; -import { Theme, makeStyles } from '@material-ui/core/styles'; +import Button from '@mui/material/Button'; import React, { useContext, useEffect, useRef, useState } from 'react'; +import { makeStyles } from 'tss-react/mui'; import { deleteToolbarActionMutation, moveToolbarActionMutation } from './FormDescriptionEditorEventFragment'; import { GQLDeleteToolbarActionInput, @@ -42,70 +42,70 @@ import { import { ToolbarActionProps, ToolbarActionState } from './ToolbarActionWidget.types'; import { useFormDescriptionEditor } from './hooks/useFormDescriptionEditor'; -const useStyles = makeStyles((theme) => ({ - style: { - minWidth: '32px', - lineHeight: 1.25, - backgroundColor: ({ backgroundColor }) => - backgroundColor ? getCSSColor(backgroundColor, theme) : theme.palette.primary.light, - color: ({ foregroundColor }) => (foregroundColor ? getCSSColor(foregroundColor, theme) : 'white'), - fontSize: ({ fontSize }) => (fontSize ? fontSize : null), - fontStyle: ({ italic }) => (italic ? 'italic' : null), - fontWeight: ({ bold }) => (bold ? 'bold' : null), - textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough), - '&:hover': { - backgroundColor: ({ backgroundColor }) => - backgroundColor ? getCSSColor(backgroundColor, theme) : theme.palette.primary.main, - color: ({ foregroundColor }) => (foregroundColor ? getCSSColor(foregroundColor, theme) : 'white'), - fontSize: ({ fontSize }) => (fontSize ? fontSize : null), - fontStyle: ({ italic }) => (italic ? 'italic' : null), - fontWeight: ({ bold }) => (bold ? 'bold' : null), - textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough), +const useStyles = makeStyles()( + (theme, { backgroundColor, foregroundColor, fontSize, italic, bold, underline, strikeThrough, iconOnly }) => ({ + style: { + minWidth: '32px', + lineHeight: 1.25, + backgroundColor: backgroundColor ? getCSSColor(backgroundColor, theme) : theme.palette.primary.light, + color: foregroundColor ? getCSSColor(foregroundColor, theme) : 'white', + fontSize: fontSize ? fontSize : null, + fontStyle: italic ? 'italic' : null, + fontWeight: bold ? 'bold' : null, + textDecorationLine: getTextDecorationLineValue(underline, strikeThrough), + '&:hover': { + backgroundColor: backgroundColor ? getCSSColor(backgroundColor, theme) : theme.palette.primary.main, + color: foregroundColor ? getCSSColor(foregroundColor, theme) : 'white', + fontSize: fontSize ? fontSize : null, + fontStyle: italic ? 'italic' : null, + fontWeight: bold ? 'bold' : null, + textDecorationLine: getTextDecorationLineValue(underline, strikeThrough), + }, }, - }, - selected: { - minWidth: '32px', - lineHeight: 1.25, - backgroundColor: theme.palette.secondary.light, - color: 'white', - fontSize: ({ fontSize }) => (fontSize ? fontSize : null), - fontStyle: ({ italic }) => (italic ? 'italic' : null), - fontWeight: ({ bold }) => (bold ? 'bold' : null), - textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough), - '&:hover': { - backgroundColor: theme.palette.secondary.main, + selected: { + minWidth: '32px', + lineHeight: 1.25, + backgroundColor: theme.palette.secondary.light, color: 'white', - fontSize: ({ fontSize }) => (fontSize ? fontSize : null), - fontStyle: ({ italic }) => (italic ? 'italic' : null), - fontWeight: ({ bold }) => (bold ? 'bold' : null), - textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough), + fontSize: fontSize ? fontSize : null, + fontStyle: italic ? 'italic' : null, + fontWeight: bold ? 'bold' : null, + textDecorationLine: getTextDecorationLineValue(underline, strikeThrough), + '&:hover': { + backgroundColor: theme.palette.secondary.main, + color: 'white', + fontSize: fontSize ? fontSize : null, + fontStyle: italic ? 'italic' : null, + fontWeight: bold ? 'bold' : null, + textDecorationLine: getTextDecorationLineValue(underline, strikeThrough), + }, }, - }, - toolbarAction: { - display: 'flex', - flexDirection: 'row', - flexGrow: 1, - }, - placeholder: { - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center', - backgroundColor: 'whitesmoke', - border: '1px solid whitesmoke', - borderRadius: '5px', - height: 'inherit', - width: '20px', - }, - dragOver: { - borderWidth: '1px', - borderStyle: 'dashed', - borderColor: theme.palette.primary.main, - }, - icon: { - marginRight: ({ iconOnly }) => (iconOnly ? theme.spacing(0) : theme.spacing(2)), - }, -})); + toolbarAction: { + display: 'flex', + flexDirection: 'row', + flexGrow: 1, + }, + placeholder: { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + backgroundColor: 'whitesmoke', + border: '1px solid whitesmoke', + borderRadius: '5px', + height: 'inherit', + width: '20px', + }, + dragOver: { + borderWidth: '1px', + borderStyle: 'dashed', + borderColor: theme.palette.primary.main, + }, + icon: { + marginRight: iconOnly ? theme.spacing(0) : theme.spacing(2), + }, + }) +); const isErrorPayload = (payload: GQLDeleteToolbarActionPayload): payload is GQLErrorPayload => payload.__typename === 'ErrorPayload'; @@ -132,7 +132,7 @@ export const ToolbarActionWidget = ({ toolbarActions, containerId, toolbarAction strikeThrough: toolbarAction.style?.strikeThrough ?? null, iconOnly: state.buttonLabel ? false : true, }; - const classes = useStyles(props); + const { classes } = useStyles(props); const { httpOrigin } = useContext(ServerContext); diff --git a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/ToolbarActions.tsx b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/ToolbarActions.tsx index 80c87a4c6db..be078cde9fc 100644 --- a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/ToolbarActions.tsx +++ b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/ToolbarActions.tsx @@ -14,10 +14,11 @@ import { useMutation } from '@apollo/client'; import { Toast } from '@eclipse-sirius/sirius-components-core'; import { GQLToolbarAction } from '@eclipse-sirius/sirius-components-forms'; -import IconButton from '@material-ui/core/IconButton'; -import { makeStyles, Theme } from '@material-ui/core/styles'; -import Tooltip from '@material-ui/core/Tooltip'; -import AddIcon from '@material-ui/icons/Add'; +import AddIcon from '@mui/icons-material/Add'; +import IconButton from '@mui/material/IconButton'; +import Tooltip from '@mui/material/Tooltip'; +import { Theme } from '@mui/material/styles'; +import { makeStyles } from 'tss-react/mui'; import { useEffect, useState } from 'react'; import { addToolbarActionMutation, moveToolbarActionMutation } from './FormDescriptionEditorEventFragment'; import { @@ -31,11 +32,11 @@ import { GQLMoveToolbarActionMutationVariables, GQLMoveToolbarActionPayload, } from './FormDescriptionEditorEventFragment.types'; -import { useFormDescriptionEditor } from './hooks/useFormDescriptionEditor'; -import { ToolbarActionsProps } from './ToolbarActions.types'; import { ToolbarActionWidget } from './ToolbarActionWidget'; +import { ToolbarActionsProps } from './ToolbarActions.types'; +import { useFormDescriptionEditor } from './hooks/useFormDescriptionEditor'; -const useToolbarActionsStyles = makeStyles((theme: Theme) => ({ +const useToolbarActionsStyles = makeStyles()((theme: Theme) => ({ toolbar: { display: 'flex', flexDirection: 'row', @@ -72,7 +73,7 @@ const isErrorPayload = ( export const ToolbarActions = ({ toolbarActions, containerId }: ToolbarActionsProps) => { const { editingContextId, representationId, readOnly } = useFormDescriptionEditor(); const noop = () => {}; - const classes = useToolbarActionsStyles(); + const { classes } = useToolbarActionsStyles(); const [message, setMessage] = useState(null); diff --git a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/TreeWidget.tsx b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/TreeWidget.tsx index 716b2308d2f..dbae058c4d9 100644 --- a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/TreeWidget.tsx +++ b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/TreeWidget.tsx @@ -12,17 +12,17 @@ *******************************************************************************/ import { useSelection } from '@eclipse-sirius/sirius-components-core'; -import Typography from '@material-ui/core/Typography'; -import { Theme, makeStyles } from '@material-ui/core/styles'; -import ChevronRightIcon from '@material-ui/icons/ChevronRight'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; -import HelpOutlineOutlined from '@material-ui/icons/HelpOutlineOutlined'; -import { TreeItem } from '@material-ui/lab'; -import TreeView from '@material-ui/lab/TreeView'; +import ChevronRightIcon from '@mui/icons-material/ChevronRight'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import HelpOutlineOutlined from '@mui/icons-material/HelpOutlineOutlined'; +import Typography from '@mui/material/Typography'; +import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; +import { TreeItem } from '@mui/x-tree-view/TreeItem'; import { useEffect, useRef, useState } from 'react'; +import { makeStyles } from 'tss-react/mui'; import { TreeWidgetProps } from './WidgetEntry.types'; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles()((theme) => ({ selected: { color: theme.palette.primary.main, }, @@ -34,7 +34,7 @@ const useStyles = makeStyles((theme) => ({ })); export const TreeWidget = ({ widget }: TreeWidgetProps) => { - const classes = useStyles(); + const { classes } = useStyles(); const [selected, setSelected] = useState(false); const { selection } = useSelection(); @@ -62,19 +62,18 @@ export const TreeWidget = ({ widget }: TreeWidgetProps) => {
- } - defaultExpandIcon={} - expanded={['5']}> - - + slots={{ collapseIcon: ExpandMoreIcon, expandIcon: ChevronRightIcon }} + expandedItems={['5']}> + + - - - + + + - +
); diff --git a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/WidgetEntry.tsx b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/WidgetEntry.tsx index 18e971fea03..16ee30fcb0f 100644 --- a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/WidgetEntry.tsx +++ b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/WidgetEntry.tsx @@ -16,6 +16,8 @@ import { GQLButton, GQLChartWidget, GQLCheckbox, + GQLContainer, + GQLFlexDirection, GQLFlexboxContainer, GQLGroup, GQLImage, @@ -35,10 +37,10 @@ import { PropertySectionContext, PropertySectionContextValue, } from '@eclipse-sirius/sirius-components-forms'; -import { GQLContainer } from '@eclipse-sirius/sirius-components-forms/src'; -import Tooltip from '@material-ui/core/Tooltip'; -import { Theme, makeStyles, withStyles } from '@material-ui/core/styles'; +import Tooltip from '@mui/material/Tooltip'; +import { Theme } from '@mui/material/styles'; import React, { useContext, useEffect, useState } from 'react'; +import { makeStyles, withStyles } from 'tss-react/mui'; import { BarChartWidget } from './BarChartWidget'; import { ButtonWidget } from './ButtonWidget'; import { CheckboxWidget } from './CheckboxWidget'; @@ -74,30 +76,32 @@ import { SplitButtonWidget } from './SplitButtonWidget'; import { TextAreaWidget } from './TextAreaWidget'; import { TextfieldWidget } from './TextfieldWidget'; import { TreeWidget } from './TreeWidget'; -import { WidgetEntryProps, WidgetEntryState, WidgetEntryStyleProps } from './WidgetEntry.types'; +import { WidgetEntryProps, WidgetEntryState } from './WidgetEntry.types'; import { isFlexboxContainer, isGroup, isKind } from './WidgetOperations'; import { useFormDescriptionEditor } from './hooks/useFormDescriptionEditor'; -const useWidgetEntryStyles = makeStyles((theme) => ({ +const useWidgetEntryStyles = makeStyles< + { flexDirection: GQLFlexDirection; flexGrow: number; kind: any }, + 'widgetElement' +>()((theme, { flexDirection, flexGrow, kind: _kind }, classes) => ({ widget: { display: 'flex', - flexDirection: ({ flexDirection }) => flexDirection, - flexGrow: ({ flexGrow }) => flexGrow, + flexDirection: flexDirection, + flexGrow: flexGrow, }, widgetElement: { - flexGrow: ({ flexGrow }) => flexGrow, + flexGrow: flexGrow, border: '1px solid transparent', '&:hover': { borderColor: theme.palette.primary.main, }, - '&:has($widgetElement:hover)': { + [`&:has(.${classes.widgetElement}:hover)`]: { borderStyle: 'dashed', }, }, placeholder: { - height: ({ flexDirection }) => - flexDirection === 'column' || flexDirection === 'column-reverse' ? '10px' : 'inherit', - width: ({ flexDirection }) => (flexDirection === 'row' || flexDirection === 'row-reverse' ? '10px' : 'inherit'), + height: flexDirection === 'column' || flexDirection === 'column-reverse' ? '10px' : 'inherit', + width: flexDirection === 'row' || flexDirection === 'row-reverse' ? '10px' : 'inherit', display: 'flex', flexDirection: 'column', alignItems: 'center', @@ -113,13 +117,13 @@ const useWidgetEntryStyles = makeStyles((theme) => }, })); -const WidgetTooltip = withStyles((theme: Theme) => ({ +const WidgetTooltip = withStyles(Tooltip, (theme: Theme) => ({ tooltip: { backgroundColor: theme.palette.primary.main, margin: '0px', borderRadius: '0px', }, -}))(Tooltip); +})); const isErrorPayload = ( payload: GQLAddWidgetPayload | GQLDeleteWidgetPayload | GQLMoveWidgetPayload @@ -128,7 +132,7 @@ const isErrorPayload = ( export const WidgetEntry = ({ page, container, widget, flexDirection, flexGrow }: WidgetEntryProps) => { const { editingContextId, representationId, readOnly } = useFormDescriptionEditor(); const noop = () => {}; - const classes = useWidgetEntryStyles({ flexDirection, flexGrow, kind: widget.__typename }); + const { classes } = useWidgetEntryStyles({ flexDirection, flexGrow, kind: widget.__typename }); const initialState: WidgetEntryState = { message: null }; const [state, setState] = useState(initialState); diff --git a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/coreWidgets.tsx b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/coreWidgets.tsx index e2af46ff272..822e4a9785f 100644 --- a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/coreWidgets.tsx +++ b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/coreWidgets.tsx @@ -10,20 +10,20 @@ * Contributors: * Obeo - initial API and implementation *******************************************************************************/ -import AccountTreeIcon from '@material-ui/icons/AccountTree'; -import ArrowDropDownCircleIcon from '@material-ui/icons/ArrowDropDownCircle'; -import BarChartIcon from '@material-ui/icons/BarChart'; -import CheckBoxIcon from '@material-ui/icons/CheckBox'; -import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted'; -import ImageIcon from '@material-ui/icons/Image'; -import LabelOutlinedIcon from '@material-ui/icons/LabelOutlined'; -import LinearScaleOutlinedIcon from '@material-ui/icons/LinearScaleOutlined'; -import LinkIcon from '@material-ui/icons/Link'; -import PieChartIcon from '@material-ui/icons/PieChart'; -import RadioButtonCheckedIcon from '@material-ui/icons/RadioButtonChecked'; -import TextFieldsIcon from '@material-ui/icons/TextFields'; -import TextFormatIcon from '@material-ui/icons/TextFormat'; -import ViewColumnIcon from '@material-ui/icons/ViewColumn'; +import AccountTreeIcon from '@mui/icons-material/AccountTree'; +import ArrowDropDownCircleIcon from '@mui/icons-material/ArrowDropDownCircle'; +import BarChartIcon from '@mui/icons-material/BarChart'; +import CheckBoxIcon from '@mui/icons-material/CheckBox'; +import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted'; +import ImageIcon from '@mui/icons-material/Image'; +import LabelOutlinedIcon from '@mui/icons-material/LabelOutlined'; +import LinearScaleOutlinedIcon from '@mui/icons-material/LinearScaleOutlined'; +import LinkIcon from '@mui/icons-material/Link'; +import PieChartIcon from '@mui/icons-material/PieChart'; +import RadioButtonCheckedIcon from '@mui/icons-material/RadioButtonChecked'; +import TextFieldsIcon from '@mui/icons-material/TextFields'; +import TextFormatIcon from '@mui/icons-material/TextFormat'; +import ViewColumnIcon from '@mui/icons-material/ViewColumn'; import { WidgetDescriptor } from './FormDescriptionEditorRepresentation.types'; import { Button } from './icons/Button'; diff --git a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/icons/Button.tsx b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/icons/Button.tsx index b012aac8899..b3ba222626c 100644 --- a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/icons/Button.tsx +++ b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/icons/Button.tsx @@ -10,7 +10,7 @@ * Contributors: * Obeo - initial API and implementation *******************************************************************************/ -import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon'; +import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'; export const Button = (props: SvgIconProps) => { return ( diff --git a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/icons/ForIcon.tsx b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/icons/ForIcon.tsx index 38dc1eb9f9c..dc7d1a6ef2a 100644 --- a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/icons/ForIcon.tsx +++ b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/icons/ForIcon.tsx @@ -10,7 +10,7 @@ * Contributors: * Obeo - initial API and implementation *******************************************************************************/ -import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon'; +import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'; export const ForIcon = (props: SvgIconProps) => { return ( diff --git a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/icons/IfIcon.tsx b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/icons/IfIcon.tsx index 132ce6ce272..db28d27ea9c 100644 --- a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/icons/IfIcon.tsx +++ b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/icons/IfIcon.tsx @@ -10,7 +10,7 @@ * Contributors: * Obeo - initial API and implementation *******************************************************************************/ -import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon'; +import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'; export const IfIcon = (props: SvgIconProps) => { return ( diff --git a/packages/forms/frontend/sirius-components-forms/package.json b/packages/forms/frontend/sirius-components-forms/package.json index bae1b3d1c03..b5bcfcbe7af 100644 --- a/packages/forms/frontend/sirius-components-forms/package.json +++ b/packages/forms/frontend/sirius-components-forms/package.json @@ -36,9 +36,8 @@ "@eclipse-sirius/sirius-components-core": "*", "@eclipse-sirius/sirius-components-charts": "*", "@lexical/react": "0.8.1", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", - "@material-ui/lab": "4.0.0-alpha.61", + "@mui/material": "5.15.15", + "@mui/icons-material": "5.15.15", "@xstate/react": "1.6.3", "d3": "7.0.0", "graphql": "16.8.0", @@ -53,9 +52,8 @@ "@eclipse-sirius/sirius-components-charts": "*", "@eclipse-sirius/sirius-components-tsconfig": "*", "@lexical/react": "0.8.1", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", - "@material-ui/lab": "4.0.0-alpha.61", + "@mui/material": "5.15.15", + "@mui/icons-material": "5.15.15", "@testing-library/react": "12.1.2", "@testing-library/user-event": "13.2.1", "@types/react": "17.0.37", diff --git a/packages/forms/frontend/sirius-components-forms/src/form/Form.tsx b/packages/forms/frontend/sirius-components-forms/src/form/Form.tsx index 4eb6d798712..5818f19ad0e 100644 --- a/packages/forms/frontend/sirius-components-forms/src/form/Form.tsx +++ b/packages/forms/frontend/sirius-components-forms/src/form/Form.tsx @@ -10,15 +10,15 @@ * Contributors: * Obeo - initial API and implementation *******************************************************************************/ -import Tab from '@material-ui/core/Tab'; -import Tabs from '@material-ui/core/Tabs'; -import { makeStyles } from '@material-ui/core/styles'; +import Tab from '@mui/material/Tab'; +import Tabs from '@mui/material/Tabs'; +import { makeStyles } from 'tss-react/mui'; import React, { useEffect, useState } from 'react'; import { Page } from '../pages/Page'; import { ToolbarAction } from '../toolbaraction/ToolbarAction'; import { FormProps, FormState } from './Form.types'; -const useFormStyles = makeStyles((theme) => ({ +const useFormStyles = makeStyles()((theme) => ({ form: { display: 'flex', flexDirection: 'column', @@ -72,7 +72,7 @@ const a11yProps = (id: string) => { }; export const Form = ({ editingContextId, form, widgetSubscriptions, readOnly }: FormProps) => { - const classes = useFormStyles(); + const { classes } = useFormStyles(); const { id, pages } = form; const [state, setState] = useState({ selectedPage: pages[0], pages }); @@ -129,7 +129,7 @@ export const Form = ({ editingContextId, form, widgetSubscriptions, readOnly }: value={state.selectedPage.id} onChange={onChangeTab} variant={variant} - scrollButtons="on" + scrollButtons textColor="primary" indicatorColor="primary"> {state.pages.map((page) => { diff --git a/packages/forms/frontend/sirius-components-forms/src/groups/Group.tsx b/packages/forms/frontend/sirius-components-forms/src/groups/Group.tsx index a2d33bb3fb3..c61917ab1ba 100644 --- a/packages/forms/frontend/sirius-components-forms/src/groups/Group.tsx +++ b/packages/forms/frontend/sirius-components-forms/src/groups/Group.tsx @@ -11,25 +11,26 @@ * Obeo - initial API and implementation *******************************************************************************/ import { getCSSColor, IconOverlay } from '@eclipse-sirius/sirius-components-core'; -import { makeStyles, Theme, useTheme } from '@material-ui/core/styles'; -import Typography from '@material-ui/core/Typography'; -import ToggleButton from '@material-ui/lab/ToggleButton'; -import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'; +import { useTheme } from '@mui/material/styles'; +import ToggleButton from '@mui/material/ToggleButton'; +import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; +import Typography from '@mui/material/Typography'; import { useEffect, useState } from 'react'; +import { makeStyles } from 'tss-react/mui'; import { PropertySection } from '../propertysections/PropertySection'; import { ToolbarAction } from '../toolbaraction/ToolbarAction'; import { GroupProps, GroupStyleProps } from './Group.types'; -const useGroupStyles = makeStyles((theme) => ({ +const useGroupStyles = makeStyles()((theme, { borderStyle }) => ({ group: { display: 'flex', flexDirection: 'column', - margin: ({ borderStyle }) => (borderStyle ? theme.spacing(0.5) : 0), - padding: ({ borderStyle }) => (borderStyle ? theme.spacing(0.5) : 0), - borderWidth: ({ borderStyle }) => borderStyle?.size || 0, - borderColor: ({ borderStyle }) => getCSSColor(borderStyle?.color, theme) || 'transparent', - borderStyle: ({ borderStyle }) => borderStyle?.lineStyle || 'solid', - borderRadius: ({ borderStyle }) => borderStyle?.radius || 0, + margin: borderStyle ? theme.spacing(0.5) : 0, + padding: borderStyle ? theme.spacing(0.5) : 0, + borderWidth: borderStyle?.size || 0, + borderColor: getCSSColor(borderStyle?.color, theme) || 'transparent', + borderStyle: borderStyle?.lineStyle || 'solid', + borderRadius: borderStyle?.radius || 0, }, groupLabelAndToolbar: { display: 'flex', @@ -76,7 +77,7 @@ export const Group = ({ editingContextId, formId, group, widgetSubscriptions, re borderStyle: group.borderStyle, }; - const classes = useGroupStyles(props); + const { classes } = useGroupStyles(props); const theme = useTheme(); const [visibleWidgetIds, setVisibleWidgetIds] = useState([]); diff --git a/packages/forms/frontend/sirius-components-forms/src/pagelist/PageList.tsx b/packages/forms/frontend/sirius-components-forms/src/pagelist/PageList.tsx index 95d2fe53857..555c41ea325 100644 --- a/packages/forms/frontend/sirius-components-forms/src/pagelist/PageList.tsx +++ b/packages/forms/frontend/sirius-components-forms/src/pagelist/PageList.tsx @@ -10,11 +10,11 @@ * Contributors: * Obeo - initial API and implementation *******************************************************************************/ -import { makeStyles } from '@material-ui/core/styles'; -import Typography from '@material-ui/core/Typography'; +import Typography from '@mui/material/Typography'; +import { makeStyles } from 'tss-react/mui'; import { PageListProps } from './PageList.types'; -const usePageListStyles = makeStyles((theme) => ({ +const usePageListStyles = makeStyles()((theme) => ({ pageList: { display: 'flex', flexDirection: 'column', @@ -24,7 +24,7 @@ const usePageListStyles = makeStyles((theme) => ({ })); export const PageList = ({ pages }: PageListProps) => { - const styles = usePageListStyles(); + const { classes: styles } = usePageListStyles(); return (
{pages.map((page) => { diff --git a/packages/forms/frontend/sirius-components-forms/src/pages/Page.tsx b/packages/forms/frontend/sirius-components-forms/src/pages/Page.tsx index 74c0218aebb..f5ba64496db 100644 --- a/packages/forms/frontend/sirius-components-forms/src/pages/Page.tsx +++ b/packages/forms/frontend/sirius-components-forms/src/pages/Page.tsx @@ -10,11 +10,12 @@ * Contributors: * Obeo - initial API and implementation *******************************************************************************/ -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from 'tss-react/mui'; + import { Group } from '../groups/Group'; import { PageProps } from './Page.types'; -const usePageStyles = makeStyles((theme) => ({ +const usePageStyles = makeStyles()((theme) => ({ page: { display: 'flex', flexDirection: 'column', @@ -26,7 +27,7 @@ const usePageStyles = makeStyles((theme) => ({ })); export const Page = ({ editingContextId, formId, page, widgetSubscriptions, readOnly }: PageProps) => { - const classes = usePageStyles(); + const { classes } = usePageStyles(); return (
{page.groups.map((group) => { diff --git a/packages/forms/frontend/sirius-components-forms/src/propertysections/ButtonPropertySection.tsx b/packages/forms/frontend/sirius-components-forms/src/propertysections/ButtonPropertySection.tsx index 0e11ed9daec..3c8e82d39c3 100644 --- a/packages/forms/frontend/sirius-components-forms/src/propertysections/ButtonPropertySection.tsx +++ b/packages/forms/frontend/sirius-components-forms/src/propertysections/ButtonPropertySection.tsx @@ -12,10 +12,10 @@ *******************************************************************************/ import { useMutation } from '@apollo/client'; import { ServerContext, ServerContextValue, getCSSColor, useMultiToast } from '@eclipse-sirius/sirius-components-core'; -import Button from '@material-ui/core/Button'; -import { Theme, makeStyles } from '@material-ui/core/styles'; +import Button from '@mui/material/Button'; import gql from 'graphql-tag'; import { useContext, useEffect } from 'react'; +import { makeStyles } from 'tss-react/mui'; import { PropertySectionComponent, PropertySectionComponentProps } from '../form/Form.types'; import { GQLButton } from '../form/FormEventFragments.types'; import { @@ -34,36 +34,36 @@ import { import { PropertySectionLabel } from './PropertySectionLabel'; import { getTextDecorationLineValue } from './getTextDecorationLineValue'; -const useStyle = makeStyles((theme) => ({ - style: { - backgroundColor: ({ backgroundColor }) => - backgroundColor ? getCSSColor(backgroundColor, theme) : theme.palette.primary.light, - color: ({ foregroundColor }) => (foregroundColor ? getCSSColor(foregroundColor, theme) : 'white'), - fontSize: ({ fontSize }) => (fontSize ? fontSize : null), - fontStyle: ({ italic }) => (italic ? 'italic' : null), - fontWeight: ({ bold }) => (bold ? 'bold' : null), - textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough), - paddingTop: theme.spacing(0.5), - paddingBottom: theme.spacing(0.5), - '&:hover': { - backgroundColor: ({ backgroundColor }) => - backgroundColor ? getCSSColor(backgroundColor, theme) : theme.palette.primary.main, - color: ({ foregroundColor }) => (foregroundColor ? getCSSColor(foregroundColor, theme) : 'white'), - fontSize: ({ fontSize }) => (fontSize ? fontSize : null), - fontStyle: ({ italic }) => (italic ? 'italic' : null), - fontWeight: ({ bold }) => (bold ? 'bold' : null), - textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough), +const useStyle = makeStyles()( + (theme, { backgroundColor, foregroundColor, fontSize, italic, bold, underline, strikeThrough, iconOnly }) => ({ + style: { + backgroundColor: backgroundColor ? getCSSColor(backgroundColor, theme) : theme.palette.primary.light, + color: foregroundColor ? getCSSColor(foregroundColor, theme) : 'white', + fontSize: fontSize ? fontSize : null, + fontStyle: italic ? 'italic' : null, + fontWeight: bold ? 'bold' : null, + textDecorationLine: getTextDecorationLineValue(underline, strikeThrough), + paddingTop: theme.spacing(0.5), + paddingBottom: theme.spacing(0.5), + '&:hover': { + backgroundColor: backgroundColor ? getCSSColor(backgroundColor, theme) : theme.palette.primary.main, + color: foregroundColor ? getCSSColor(foregroundColor, theme) : 'white', + fontSize: fontSize ? fontSize : null, + fontStyle: italic ? 'italic' : null, + fontWeight: bold ? 'bold' : null, + textDecorationLine: getTextDecorationLineValue(underline, strikeThrough), + }, }, - }, - icon: { - marginRight: ({ iconOnly }) => (iconOnly ? theme.spacing(0) : theme.spacing(2)), - }, - propertySection: { - display: 'flex', - flexDirection: 'row', - gap: theme.spacing(2), - }, -})); + icon: { + marginRight: iconOnly ? theme.spacing(0) : theme.spacing(2), + }, + propertySection: { + display: 'flex', + flexDirection: 'row', + gap: theme.spacing(2), + }, + }) +); export const pushButtonMutation = gql` mutation pushButton($input: PushButtonInput!) { @@ -126,7 +126,7 @@ export const ButtonPropertySection: PropertySectionComponent = ({ strikeThrough: widget.style?.strikeThrough ?? null, iconOnly: widget.buttonLabel ? false : true, }; - const classes = useStyle(props); + const { classes } = useStyle(props); const { httpOrigin } = useContext(ServerContext); diff --git a/packages/forms/frontend/sirius-components-forms/src/propertysections/ChartWidgetPropertySection.tsx b/packages/forms/frontend/sirius-components-forms/src/propertysections/ChartWidgetPropertySection.tsx index fa0f60b202d..24c3f5e94df 100644 --- a/packages/forms/frontend/sirius-components-forms/src/propertysections/ChartWidgetPropertySection.tsx +++ b/packages/forms/frontend/sirius-components-forms/src/propertysections/ChartWidgetPropertySection.tsx @@ -11,12 +11,12 @@ * Obeo - initial API and implementation *******************************************************************************/ import { BarChart, PieChart } from '@eclipse-sirius/sirius-components-charts'; -import { Theme, makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from 'tss-react/mui'; import { PropertySectionComponent, PropertySectionComponentProps } from '../form/Form.types'; import { GQLBarChart, GQLChart, GQLChartWidget, GQLPieChart } from '../form/FormEventFragments.types'; import { PropertySectionLabel } from './PropertySectionLabel'; -const useStyles = makeStyles(() => ({ +const useStyles = makeStyles()(() => ({ chart: { overflowX: 'auto', }, @@ -31,7 +31,7 @@ export const ChartWidgetPropertySection: PropertySectionComponent) => { - const classes = useStyles(); + const { classes } = useStyles(); const { chart } = widget; let chartComponent: JSX.Element | null; diff --git a/packages/forms/frontend/sirius-components-forms/src/propertysections/CheckboxPropertySection.tsx b/packages/forms/frontend/sirius-components-forms/src/propertysections/CheckboxPropertySection.tsx index cb19a2f076f..64cba5105bc 100644 --- a/packages/forms/frontend/sirius-components-forms/src/propertysections/CheckboxPropertySection.tsx +++ b/packages/forms/frontend/sirius-components-forms/src/propertysections/CheckboxPropertySection.tsx @@ -12,12 +12,12 @@ *******************************************************************************/ import { gql, useMutation } from '@apollo/client'; import { getCSSColor, useMultiToast } from '@eclipse-sirius/sirius-components-core'; -import Checkbox from '@material-ui/core/Checkbox'; -import FormControl from '@material-ui/core/FormControl'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; -import FormHelperText from '@material-ui/core/FormHelperText'; -import { Theme, makeStyles } from '@material-ui/core/styles'; +import Checkbox from '@mui/material/Checkbox'; +import FormControl from '@mui/material/FormControl'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import FormHelperText from '@mui/material/FormHelperText'; import { useEffect } from 'react'; +import { makeStyles } from 'tss-react/mui'; import { PropertySectionComponent, PropertySectionComponentProps } from '../form/Form.types'; import { GQLCheckbox } from '../form/FormEventFragments.types'; import { @@ -35,12 +35,12 @@ import { } from './CheckboxPropertySection.types'; import { PropertySectionLabel } from './PropertySectionLabel'; -const useStyle = makeStyles((theme) => ({ +const useStyle = makeStyles()((theme, { color }) => ({ formControl: { alignItems: 'flex-start', }, style: { - color: ({ color }) => (color ? getCSSColor(color, theme) : theme.palette.primary.light), + color: color ? getCSSColor(color, theme) : theme.palette.primary.light, paddingTop: theme.spacing(0.5), paddingBottom: theme.spacing(0.5), }, @@ -97,7 +97,7 @@ export const CheckboxPropertySection: PropertySectionComponent = ({ const props: CheckboxStyleProps = { color: widget.style?.color ?? null, }; - const classes = useStyle(props); + const { classes } = useStyle(props); const [editCheckbox, { loading, error, data }] = useMutation(editCheckboxMutation); const onChange = (event) => { diff --git a/packages/forms/frontend/sirius-components-forms/src/propertysections/FlexboxContainerPropertySection.tsx b/packages/forms/frontend/sirius-components-forms/src/propertysections/FlexboxContainerPropertySection.tsx index a25deae2232..bfa3eee94f3 100644 --- a/packages/forms/frontend/sirius-components-forms/src/propertysections/FlexboxContainerPropertySection.tsx +++ b/packages/forms/frontend/sirius-components-forms/src/propertysections/FlexboxContainerPropertySection.tsx @@ -11,37 +11,38 @@ * Obeo - initial API and implementation *******************************************************************************/ import { getCSSColor } from '@eclipse-sirius/sirius-components-core'; -import { makeStyles, Theme } from '@material-ui/core/styles'; -import { - FlexboxContainerPropertySectionProps, - FlexboxContainerPropertySectionStyleProps, -} from './FlexboxContainerPropertySection.types'; +import { makeStyles } from 'tss-react/mui'; +import { GQLContainerBorderStyle, GQLFlexDirection, GQLFlexWrap } from '../form/FormEventFragments.types'; +import { FlexboxContainerPropertySectionProps } from './FlexboxContainerPropertySection.types'; import { PropertySection } from './PropertySection'; import { PropertySectionLabel } from './PropertySectionLabel'; -const useFlexboxContainerPropertySectionStyles = makeStyles( - (theme) => ({ - containerAndLabel: { - margin: ({ borderStyle }) => (borderStyle ? theme.spacing(0.5) : 0), - padding: ({ borderStyle }) => (borderStyle ? theme.spacing(0.5) : 0), - borderWidth: ({ borderStyle }) => borderStyle?.size || 0, - borderColor: ({ borderStyle }) => getCSSColor(borderStyle?.color, theme) || 'transparent', - borderStyle: ({ borderStyle }) => borderStyle?.lineStyle || 'solid', - borderRadius: ({ borderStyle }) => borderStyle?.radius || 0, +const useFlexboxContainerPropertySectionStyles = makeStyles<{ + flexDirection: GQLFlexDirection; + flexWrap: GQLFlexWrap; + flexGrow: number; + borderStyle: GQLContainerBorderStyle; +}>()((theme, { flexDirection, flexWrap, flexGrow, borderStyle }) => ({ + containerAndLabel: { + margin: borderStyle ? theme.spacing(0.5) : 0, + padding: borderStyle ? theme.spacing(0.5) : 0, + borderWidth: borderStyle?.size || 0, + borderColor: getCSSColor(borderStyle?.color, theme) || 'transparent', + borderStyle: borderStyle?.lineStyle || 'solid', + borderRadius: borderStyle?.radius || 0, + }, + container: { + display: 'flex', + flexWrap: flexWrap, + flexDirection: flexDirection, + '& > *': { + marginBottom: theme.spacing(0), }, - container: { - display: 'flex', - flexWrap: ({ flexWrap }) => flexWrap, - flexDirection: ({ flexDirection }) => flexDirection, - '& > *': { - marginBottom: theme.spacing(0), - }, - }, - children: { - flexGrow: ({ flexGrow }) => flexGrow, - }, - }) -); + }, + children: { + flexGrow: flexGrow, + }, +})); export const FlexboxContainerPropertySection = ({ editingContextId, @@ -50,7 +51,7 @@ export const FlexboxContainerPropertySection = ({ widgetSubscriptions, readOnly, }: FlexboxContainerPropertySectionProps) => { - const classes = useFlexboxContainerPropertySectionStyles({ + const { classes } = useFlexboxContainerPropertySectionStyles({ flexDirection: widget.flexDirection, flexWrap: widget.flexWrap, flexGrow: widget.flexGrow, diff --git a/packages/forms/frontend/sirius-components-forms/src/propertysections/HelpTooltip.tsx b/packages/forms/frontend/sirius-components-forms/src/propertysections/HelpTooltip.tsx index c1739e33c5b..12d4ffcf485 100644 --- a/packages/forms/frontend/sirius-components-forms/src/propertysections/HelpTooltip.tsx +++ b/packages/forms/frontend/sirius-components-forms/src/propertysections/HelpTooltip.tsx @@ -11,9 +11,9 @@ * Obeo - initial API and implementation *******************************************************************************/ import { gql, useLazyQuery } from '@apollo/client'; -import CircularProgress from '@material-ui/core/CircularProgress'; -import Tooltip from '@material-ui/core/Tooltip'; -import HelpOutlineOutlined from '@material-ui/icons/HelpOutlineOutlined'; +import HelpOutlineOutlined from '@mui/icons-material/HelpOutlineOutlined'; +import CircularProgress from '@mui/material/CircularProgress'; +import Tooltip from '@mui/material/Tooltip'; import { Fragment, useEffect, useState } from 'react'; import { GQLHelpTextQueryData, diff --git a/packages/forms/frontend/sirius-components-forms/src/propertysections/ImagePropertySection.tsx b/packages/forms/frontend/sirius-components-forms/src/propertysections/ImagePropertySection.tsx index 402cafbdefa..54310cfafe9 100644 --- a/packages/forms/frontend/sirius-components-forms/src/propertysections/ImagePropertySection.tsx +++ b/packages/forms/frontend/sirius-components-forms/src/propertysections/ImagePropertySection.tsx @@ -11,30 +11,31 @@ * Obeo - initial API and implementation *******************************************************************************/ import { ServerContext, ServerContextValue } from '@eclipse-sirius/sirius-components-core'; -import Typography from '@material-ui/core/Typography'; -import { Theme, makeStyles } from '@material-ui/core/styles'; +import Typography from '@mui/material/Typography'; import { useContext, useEffect, useState } from 'react'; +import { makeStyles } from 'tss-react/mui'; import { PropertySectionComponent, PropertySectionComponentProps } from '../form/Form.types'; import { GQLImage } from '../form/FormEventFragments.types'; -import { ImageStyleProps } from './ImagePropertySection.types'; import { PropertySectionLabel } from './PropertySectionLabel'; -const useImageStyles = makeStyles(() => ({ - container: { - display: 'grid', - gridTemplateColumns: ({ maxWidth }) => { - if (maxWidth) { - let max = maxWidth; - if (maxWidth.match(/[0-9]$/)) { - max = maxWidth + 'px'; - } - return `minmax(auto, ${max})`; - } else { - return '1fr'; - } +const useImageStyles = makeStyles<{ maxWidth: string }>()((_theme, { maxWidth }) => { + let gridTemplateColumns: string; + if (maxWidth) { + let max = maxWidth; + if (maxWidth.match(/[0-9]$/)) { + max = maxWidth + 'px'; + } + gridTemplateColumns = `minmax(auto, ${max})`; + } else { + gridTemplateColumns = '1fr'; + } + return { + container: { + display: 'grid', + gridTemplateColumns, }, - }, -})); + }; +}); /** * Defines the content of a Image property section. @@ -61,7 +62,7 @@ export const ImagePropertySection: PropertySectionComponent = ({ } else { imageURL = httpOrigin + widget.url; } - const classes = useImageStyles({ + const { classes } = useImageStyles({ maxWidth: widget.maxWidth, }); return ( diff --git a/packages/forms/frontend/sirius-components-forms/src/propertysections/LabelWidgetPropertySection.tsx b/packages/forms/frontend/sirius-components-forms/src/propertysections/LabelWidgetPropertySection.tsx index 4752f671bab..c9c19c600a9 100644 --- a/packages/forms/frontend/sirius-components-forms/src/propertysections/LabelWidgetPropertySection.tsx +++ b/packages/forms/frontend/sirius-components-forms/src/propertysections/LabelWidgetPropertySection.tsx @@ -11,31 +11,33 @@ * Obeo - initial API and implementation *******************************************************************************/ import { getCSSColor } from '@eclipse-sirius/sirius-components-core'; -import { makeStyles, Theme } from '@material-ui/core/styles'; -import Typography from '@material-ui/core/Typography'; +import Typography from '@mui/material/Typography'; +import { makeStyles } from 'tss-react/mui'; import { PropertySectionComponent, PropertySectionComponentProps } from '../form/Form.types'; import { GQLLabelWidget } from '../form/FormEventFragments.types'; -import { getTextDecorationLineValue } from './getTextDecorationLineValue'; import { LabelStyleProps } from './LabelWidgetPropertySection.types'; import { PropertySectionLabel } from './PropertySectionLabel'; +import { getTextDecorationLineValue } from './getTextDecorationLineValue'; -const useStyle = makeStyles((theme) => ({ - style: { - color: ({ color }) => (color ? getCSSColor(color, theme) : null), - fontSize: ({ fontSize }) => (fontSize ? fontSize : null), - fontStyle: ({ italic }) => (italic ? 'italic' : null), - fontWeight: ({ bold }) => (bold ? 'bold' : null), - textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough), - verticalAlign: 'baseline', - alignItems: 'center', - display: 'flex', - }, - propertySection: { - display: 'flex', - flexDirection: 'row', - gap: theme.spacing(2), - }, -})); +const useStyle = makeStyles()( + (theme, { color, fontSize, italic, bold, underline, strikeThrough }) => ({ + style: { + color: color ? getCSSColor(color, theme) : null, + fontSize: fontSize ? fontSize : null, + fontStyle: italic ? 'italic' : null, + fontWeight: bold ? 'bold' : null, + textDecorationLine: getTextDecorationLineValue(underline, strikeThrough), + verticalAlign: 'baseline', + alignItems: 'center', + display: 'flex', + }, + propertySection: { + display: 'flex', + flexDirection: 'row', + gap: theme.spacing(2), + }, + }) +); export const LabelWidgetPropertySection: PropertySectionComponent = ({ editingContextId, @@ -51,7 +53,7 @@ export const LabelWidgetPropertySection: PropertySectionComponent ((theme) => ({ +const useStyle = makeStyles()((theme, { color, fontSize, italic, bold, underline, strikeThrough }) => ({ style: { - color: ({ color }) => (color ? getCSSColor(color, theme) : null), - fontSize: ({ fontSize }) => (fontSize ? fontSize : null), - fontStyle: ({ italic }) => (italic ? 'italic' : null), - fontWeight: ({ bold }) => (bold ? 'bold' : null), - textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough), + color: color ? getCSSColor(color, theme) : null, + fontSize: fontSize ? fontSize : null, + fontStyle: italic ? 'italic' : null, + fontWeight: bold ? 'bold' : null, + textDecorationLine: getTextDecorationLineValue(underline, strikeThrough), }, propertySectionLabel: { display: 'flex', @@ -50,7 +50,7 @@ export const LinkPropertySection: PropertySectionComponent = ({ underline: widget.style?.underline ?? null, strikeThrough: widget.style?.strikeThrough ?? null, }; - const classes = useStyle(props); + const { classes } = useStyle(props); return (
diff --git a/packages/forms/frontend/sirius-components-forms/src/propertysections/ListPropertySection.tsx b/packages/forms/frontend/sirius-components-forms/src/propertysections/ListPropertySection.tsx index 6461097d0c5..c41fd30deae 100644 --- a/packages/forms/frontend/sirius-components-forms/src/propertysections/ListPropertySection.tsx +++ b/packages/forms/frontend/sirius-components-forms/src/propertysections/ListPropertySection.tsx @@ -18,17 +18,18 @@ import { useMultiToast, useSelection, } from '@eclipse-sirius/sirius-components-core'; -import FormControl from '@material-ui/core/FormControl'; -import FormHelperText from '@material-ui/core/FormHelperText'; -import IconButton from '@material-ui/core/IconButton'; -import Table from '@material-ui/core/Table'; -import TableBody from '@material-ui/core/TableBody'; -import TableCell from '@material-ui/core/TableCell'; -import TableRow from '@material-ui/core/TableRow'; -import Typography from '@material-ui/core/Typography'; -import { Theme, makeStyles, useTheme } from '@material-ui/core/styles'; -import DeleteIcon from '@material-ui/icons/Delete'; +import DeleteIcon from '@mui/icons-material/Delete'; +import FormControl from '@mui/material/FormControl'; +import FormHelperText from '@mui/material/FormHelperText'; +import IconButton from '@mui/material/IconButton'; +import Table from '@mui/material/Table'; +import TableBody from '@mui/material/TableBody'; +import TableCell from '@mui/material/TableCell'; +import TableRow from '@mui/material/TableRow'; +import Typography from '@mui/material/Typography'; +import { useTheme } from '@mui/material/styles'; import { MouseEvent, useEffect } from 'react'; +import { makeStyles } from 'tss-react/mui'; import { PropertySectionComponent, PropertySectionComponentProps } from '../form/Form.types'; import { GQLList, GQLListItem } from '../form/FormEventFragments.types'; import { @@ -84,32 +85,34 @@ export const clickListItemMutation = gql` } `; -const useListPropertySectionStyles = makeStyles((theme) => ({ - cell: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - paddingTop: theme.spacing(0.25), - paddingBottom: theme.spacing(0.25), - }, - canBeSelectedItem: { - '&:hover': { - textDecoration: 'underline', - cursor: 'pointer', +const useListPropertySectionStyles = makeStyles()( + (theme, { color, fontSize, italic, bold, underline, strikeThrough }) => ({ + cell: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + paddingTop: theme.spacing(0.25), + paddingBottom: theme.spacing(0.25), }, - }, - style: { - color: ({ color }) => (color ? getCSSColor(color, theme) : null), - fontSize: ({ fontSize }) => (fontSize ? fontSize : null), - fontStyle: ({ italic }) => (italic ? 'italic' : null), - fontWeight: ({ bold }) => (bold ? 'bold' : null), - textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough), - overflow: 'hidden', - textOverflow: 'ellipsis', - whiteSpace: 'nowrap', - flexGrow: 1, - }, -})); + canBeSelectedItem: { + '&:hover': { + textDecoration: 'underline', + cursor: 'pointer', + }, + }, + style: { + color: color ? getCSSColor(color, theme) : null, + fontSize: fontSize ? fontSize : null, + fontStyle: italic ? 'italic' : null, + fontWeight: bold ? 'bold' : null, + textDecorationLine: getTextDecorationLineValue(underline, strikeThrough), + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + flexGrow: 1, + }, + }) +); const NONE_WIDGET_ITEM_ID = 'none'; @@ -133,7 +136,7 @@ export const ListPropertySection: PropertySectionComponent = ({ underline: widget.style?.underline ?? null, strikeThrough: widget.style?.strikeThrough ?? null, }; - const classes = useListPropertySectionStyles(props); + const { classes } = useListPropertySectionStyles(props); const theme = useTheme(); const { setSelection } = useSelection(); const { showDeletionConfirmation } = useDeletionConfirmationDialog(); diff --git a/packages/forms/frontend/sirius-components-forms/src/propertysections/MultiSelectPropertySection.tsx b/packages/forms/frontend/sirius-components-forms/src/propertysections/MultiSelectPropertySection.tsx index e474c043443..0480d81740b 100644 --- a/packages/forms/frontend/sirius-components-forms/src/propertysections/MultiSelectPropertySection.tsx +++ b/packages/forms/frontend/sirius-components-forms/src/propertysections/MultiSelectPropertySection.tsx @@ -12,15 +12,15 @@ *******************************************************************************/ import { gql, useMutation } from '@apollo/client'; import { IconOverlay, getCSSColor, useMultiToast } from '@eclipse-sirius/sirius-components-core'; -import Checkbox from '@material-ui/core/Checkbox'; -import FormControl from '@material-ui/core/FormControl'; -import FormHelperText from '@material-ui/core/FormHelperText'; -import ListItemIcon from '@material-ui/core/ListItemIcon'; -import ListItemText from '@material-ui/core/ListItemText'; -import MenuItem from '@material-ui/core/MenuItem'; -import Select from '@material-ui/core/Select'; -import { Theme, makeStyles } from '@material-ui/core/styles'; +import Checkbox from '@mui/material/Checkbox'; +import FormControl from '@mui/material/FormControl'; +import FormHelperText from '@mui/material/FormHelperText'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import ListItemText from '@mui/material/ListItemText'; +import MenuItem from '@mui/material/MenuItem'; +import Select from '@mui/material/Select'; import { useEffect, useState } from 'react'; +import { makeStyles } from 'tss-react/mui'; import { PropertySectionComponent, PropertySectionComponentProps } from '../form/Form.types'; import { GQLMultiSelect } from '../form/FormEventFragments.types'; import { @@ -35,21 +35,23 @@ import { import { PropertySectionLabel } from './PropertySectionLabel'; import { getTextDecorationLineValue } from './getTextDecorationLineValue'; -const useStyle = makeStyles((theme) => ({ - style: { - backgroundColor: ({ backgroundColor }) => (backgroundColor ? getCSSColor(backgroundColor, theme) : null), - color: ({ foregroundColor }) => (foregroundColor ? getCSSColor(foregroundColor, theme) : null), - fontSize: ({ fontSize }) => (fontSize ? fontSize : null), - fontStyle: ({ italic }) => (italic ? 'italic' : null), - fontWeight: ({ bold }) => (bold ? 'bold' : null), - textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough), - paddingTop: theme.spacing(0.5), - paddingBottom: theme.spacing(0.5), - }, - iconRoot: { - minWidth: theme.spacing(1), - }, -})); +const useStyle = makeStyles()( + (theme, { backgroundColor, foregroundColor, fontSize, italic, bold, underline, strikeThrough }) => ({ + style: { + backgroundColor: backgroundColor ? getCSSColor(backgroundColor, theme) : null, + color: foregroundColor ? getCSSColor(foregroundColor, theme) : null, + fontSize: fontSize ? fontSize : null, + fontStyle: italic ? 'italic' : null, + fontWeight: bold ? 'bold' : null, + textDecorationLine: getTextDecorationLineValue(underline, strikeThrough), + paddingTop: theme.spacing(0.5), + paddingBottom: theme.spacing(0.5), + }, + iconRoot: { + minWidth: theme.spacing(1), + }, + }) +); export const editMultiSelectMutation = gql` mutation editMultiSelect($input: EditMultiSelectInput!) { @@ -107,7 +109,7 @@ export const MultiSelectPropertySection: PropertySectionComponent ({ +const usePropertySectionLabelStyles = makeStyles()((theme) => ({ propertySectionLabel: { display: 'flex', flexDirection: 'row', @@ -44,7 +44,7 @@ const usePropertySectionLabelStyles = makeStyles((theme) => ({ })); export const PropertySectionLabel = ({ editingContextId, formId, widget, subscribers }: PropertySectionLabelProps) => { - const classes = usePropertySectionLabelStyles(); + const { classes } = usePropertySectionLabelStyles(); if (!widget.label && subscribers.length == 0 && !widget.hasHelpText) { return null; diff --git a/packages/forms/frontend/sirius-components-forms/src/propertysections/ProposalsList.tsx b/packages/forms/frontend/sirius-components-forms/src/propertysections/ProposalsList.tsx index 74b816de2ae..79460228ad5 100644 --- a/packages/forms/frontend/sirius-components-forms/src/propertysections/ProposalsList.tsx +++ b/packages/forms/frontend/sirius-components-forms/src/propertysections/ProposalsList.tsx @@ -11,11 +11,11 @@ * Obeo - initial API and implementation *******************************************************************************/ -import ListItemText from '@material-ui/core/ListItemText'; -import MenuItem from '@material-ui/core/MenuItem'; -import MenuList from '@material-ui/core/MenuList'; -import Popover from '@material-ui/core/Popover'; -import Tooltip from '@material-ui/core/Tooltip'; +import ListItemText from '@mui/material/ListItemText'; +import MenuItem from '@mui/material/MenuItem'; +import MenuList from '@mui/material/MenuList'; +import Popover from '@mui/material/Popover'; +import Tooltip from '@mui/material/Tooltip'; import { ProposalsListProps } from './ProposalsList.types'; export const ProposalsList = ({ anchorEl, proposals, onProposalSelected, onClose }: ProposalsListProps) => { @@ -39,7 +39,7 @@ export const ProposalsList = ({ anchorEl, proposals, onProposalSelected, onClose key={index} title={proposal.description} placement="right"> - onProposalSelected(proposal)}> + onProposalSelected(proposal)}> diff --git a/packages/forms/frontend/sirius-components-forms/src/propertysections/RadioPropertySection.tsx b/packages/forms/frontend/sirius-components-forms/src/propertysections/RadioPropertySection.tsx index f2fe3ef7e43..30157da1714 100644 --- a/packages/forms/frontend/sirius-components-forms/src/propertysections/RadioPropertySection.tsx +++ b/packages/forms/frontend/sirius-components-forms/src/propertysections/RadioPropertySection.tsx @@ -12,14 +12,14 @@ *******************************************************************************/ import { gql, useMutation } from '@apollo/client'; import { useMultiToast } from '@eclipse-sirius/sirius-components-core'; -import FormControl from '@material-ui/core/FormControl'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; -import FormHelperText from '@material-ui/core/FormHelperText'; -import Radio from '@material-ui/core/Radio'; -import RadioGroup from '@material-ui/core/RadioGroup'; -import Typography from '@material-ui/core/Typography'; -import { Theme, makeStyles } from '@material-ui/core/styles'; +import FormControl from '@mui/material/FormControl'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import FormHelperText from '@mui/material/FormHelperText'; +import Radio from '@mui/material/Radio'; +import RadioGroup from '@mui/material/RadioGroup'; +import Typography from '@mui/material/Typography'; import { useEffect } from 'react'; +import { makeStyles } from 'tss-react/mui'; import { getTextDecorationLineValue } from './getTextDecorationLineValue'; import { getCSSColor } from '@eclipse-sirius/sirius-components-core'; @@ -74,22 +74,24 @@ export const updateWidgetFocusMutation = gql` } `; -const useRadioPropertySectionStyles = makeStyles((theme) => ({ - radioGroupRoot: { - flexDirection: 'row', - }, - style: { - color: ({ color }) => (color ? getCSSColor(color, theme) : null), - fontSize: ({ fontSize }) => (fontSize ? fontSize : null), - fontStyle: ({ italic }) => (italic ? 'italic' : null), - fontWeight: ({ bold }) => (bold ? 'bold' : null), - textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough), - }, - radio: { - paddingBottom: theme.spacing(0.5), - paddingTop: theme.spacing(0.5), - }, -})); +const useRadioPropertySectionStyles = makeStyles()( + (theme, { color, fontSize, italic, bold, underline, strikeThrough }) => ({ + radioGroupRoot: { + flexDirection: 'row', + }, + style: { + color: color ? getCSSColor(color, theme) : null, + fontSize: fontSize ? fontSize : null, + fontStyle: italic ? 'italic' : null, + fontWeight: bold ? 'bold' : null, + textDecorationLine: getTextDecorationLineValue(underline, strikeThrough), + }, + radio: { + paddingBottom: theme.spacing(0.5), + paddingTop: theme.spacing(0.5), + }, + }) +); const isErrorPayload = (payload: GQLEditRadioPayload | GQLUpdateWidgetFocusPayload): payload is GQLErrorPayload => payload.__typename === 'ErrorPayload'; @@ -111,7 +113,7 @@ export const RadioPropertySection: PropertySectionComponent = ({ underline: widget.style?.underline ?? null, strikeThrough: widget.style?.strikeThrough ?? null, }; - const classes = useRadioPropertySectionStyles(props); + const { classes } = useRadioPropertySectionStyles(props); const [editRadio, { loading, error, data }] = useMutation(editRadioMutation); diff --git a/packages/forms/frontend/sirius-components-forms/src/propertysections/SelectPropertySection.tsx b/packages/forms/frontend/sirius-components-forms/src/propertysections/SelectPropertySection.tsx index 93149f16a8c..5982fbbc6bf 100644 --- a/packages/forms/frontend/sirius-components-forms/src/propertysections/SelectPropertySection.tsx +++ b/packages/forms/frontend/sirius-components-forms/src/propertysections/SelectPropertySection.tsx @@ -12,13 +12,13 @@ *******************************************************************************/ import { gql, useMutation } from '@apollo/client'; import { IconOverlay, getCSSColor, useMultiToast } from '@eclipse-sirius/sirius-components-core'; -import FormControl from '@material-ui/core/FormControl'; -import FormHelperText from '@material-ui/core/FormHelperText'; -import ListItemIcon from '@material-ui/core/ListItemIcon'; -import MenuItem from '@material-ui/core/MenuItem'; -import Select from '@material-ui/core/Select'; -import { Theme, makeStyles } from '@material-ui/core/styles'; +import FormControl from '@mui/material/FormControl'; +import FormHelperText from '@mui/material/FormHelperText'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import MenuItem from '@mui/material/MenuItem'; +import Select from '@mui/material/Select'; import { useEffect, useState } from 'react'; +import { makeStyles } from 'tss-react/mui'; import { PropertySectionComponent, PropertySectionComponentProps } from '../form/Form.types'; import { GQLSelect } from '../form/FormEventFragments.types'; import { PropertySectionLabel } from './PropertySectionLabel'; @@ -32,19 +32,21 @@ import { } from './SelectPropertySection.types'; import { getTextDecorationLineValue } from './getTextDecorationLineValue'; -const useStyle = makeStyles((theme) => ({ - style: { - backgroundColor: ({ backgroundColor }) => (backgroundColor ? getCSSColor(backgroundColor, theme) : null), - color: ({ foregroundColor }) => (foregroundColor ? getCSSColor(foregroundColor, theme) : null), - fontSize: ({ fontSize }) => (fontSize ? fontSize : null), - fontStyle: ({ italic }) => (italic ? 'italic' : null), - fontWeight: ({ bold }) => (bold ? 'bold' : null), - textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough), - }, - iconRoot: { - minWidth: theme.spacing(3), - }, -})); +const useStyle = makeStyles()( + (theme, { backgroundColor, foregroundColor, fontSize, italic, bold, underline, strikeThrough }) => ({ + style: { + backgroundColor: backgroundColor ? getCSSColor(backgroundColor, theme) : null, + color: foregroundColor ? getCSSColor(foregroundColor, theme) : null, + fontSize: fontSize ? fontSize : null, + fontStyle: italic ? 'italic' : null, + fontWeight: bold ? 'bold' : null, + textDecorationLine: getTextDecorationLineValue(underline, strikeThrough), + }, + iconRoot: { + minWidth: theme.spacing(3), + }, + }) +); export const editSelectMutation = gql` mutation editSelect($input: EditSelectInput!) { @@ -101,7 +103,7 @@ export const SelectPropertySection: PropertySectionComponent = ({ underline: widget.style?.underline ?? null, strikeThrough: widget.style?.strikeThrough ?? null, }; - const classes = useStyle(props); + const { classes } = useStyle(props); const [isFocused, setFocus] = useState(false); diff --git a/packages/forms/frontend/sirius-components-forms/src/propertysections/SliderPropertySection.tsx b/packages/forms/frontend/sirius-components-forms/src/propertysections/SliderPropertySection.tsx index 8a1e7d89843..573acb55ad1 100644 --- a/packages/forms/frontend/sirius-components-forms/src/propertysections/SliderPropertySection.tsx +++ b/packages/forms/frontend/sirius-components-forms/src/propertysections/SliderPropertySection.tsx @@ -12,7 +12,7 @@ *******************************************************************************/ import { useMutation } from '@apollo/client'; import { useMultiToast } from '@eclipse-sirius/sirius-components-core'; -import Slider from '@material-ui/core/Slider'; +import Slider from '@mui/material/Slider'; import gql from 'graphql-tag'; import { useEffect, useState } from 'react'; import { PropertySectionComponent, PropertySectionComponentProps } from '../form/Form.types'; diff --git a/packages/forms/frontend/sirius-components-forms/src/propertysections/SplitButtonPropertySection.tsx b/packages/forms/frontend/sirius-components-forms/src/propertysections/SplitButtonPropertySection.tsx index 4da8a7c4601..47e2b9ba3e6 100644 --- a/packages/forms/frontend/sirius-components-forms/src/propertysections/SplitButtonPropertySection.tsx +++ b/packages/forms/frontend/sirius-components-forms/src/propertysections/SplitButtonPropertySection.tsx @@ -12,18 +12,18 @@ *******************************************************************************/ import { useMutation } from '@apollo/client'; import { ServerContext, ServerContextValue, getCSSColor, useMultiToast } from '@eclipse-sirius/sirius-components-core'; -import Button from '@material-ui/core/Button'; -import ButtonGroup from '@material-ui/core/ButtonGroup'; -import ClickAwayListener from '@material-ui/core/ClickAwayListener'; -import Grow from '@material-ui/core/Grow'; -import MenuItem from '@material-ui/core/MenuItem'; -import MenuList from '@material-ui/core/MenuList'; -import Paper from '@material-ui/core/Paper'; -import Popper from '@material-ui/core/Popper'; -import { Theme, makeStyles } from '@material-ui/core/styles'; -import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown'; +import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'; +import Button from '@mui/material/Button'; +import ButtonGroup from '@mui/material/ButtonGroup'; +import ClickAwayListener from '@mui/material/ClickAwayListener'; +import Grow from '@mui/material/Grow'; +import MenuItem from '@mui/material/MenuItem'; +import MenuList from '@mui/material/MenuList'; +import Paper from '@mui/material/Paper'; +import Popper from '@mui/material/Popper'; import gql from 'graphql-tag'; import { useContext, useEffect, useRef, useState } from 'react'; +import { makeStyles } from 'tss-react/mui'; import { GQLButton } from '../form/FormEventFragments.types'; import { ButtonStyleProps, @@ -45,40 +45,40 @@ import { } from './SplitButtonPropertySection.types'; import { getTextDecorationLineValue } from './getTextDecorationLineValue'; -const useStyle = makeStyles((theme) => ({ - style: { - backgroundColor: ({ backgroundColor }) => - backgroundColor ? getCSSColor(backgroundColor, theme) : theme.palette.primary.light, - color: ({ foregroundColor }) => (foregroundColor ? getCSSColor(foregroundColor, theme) : 'white'), - fontSize: ({ fontSize }) => (fontSize ? fontSize : null), - fontStyle: ({ italic }) => (italic ? 'italic' : null), - fontWeight: ({ bold }) => (bold ? 'bold' : null), - textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough), - paddingTop: theme.spacing(0.5), - paddingBottom: theme.spacing(0.5), - '&:hover': { - backgroundColor: ({ backgroundColor }) => - backgroundColor ? getCSSColor(backgroundColor, theme) : theme.palette.primary.main, - color: ({ foregroundColor }) => (foregroundColor ? getCSSColor(foregroundColor, theme) : 'white'), - fontSize: ({ fontSize }) => (fontSize ? fontSize : null), - fontStyle: ({ italic }) => (italic ? 'italic' : null), - fontWeight: ({ bold }) => (bold ? 'bold' : null), - textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough), +const useStyle = makeStyles()( + (theme, { backgroundColor, foregroundColor, fontSize, italic, bold, underline, strikeThrough, iconOnly }) => ({ + style: { + backgroundColor: backgroundColor ? getCSSColor(backgroundColor, theme) : theme.palette.primary.light, + color: foregroundColor ? getCSSColor(foregroundColor, theme) : 'white', + fontSize: fontSize ? fontSize : null, + fontStyle: italic ? 'italic' : null, + fontWeight: bold ? 'bold' : null, + textDecorationLine: getTextDecorationLineValue(underline, strikeThrough), + paddingTop: theme.spacing(0.5), + paddingBottom: theme.spacing(0.5), + '&:hover': { + backgroundColor: backgroundColor ? getCSSColor(backgroundColor, theme) : theme.palette.primary.main, + color: foregroundColor ? getCSSColor(foregroundColor, theme) : 'white', + fontSize: fontSize ? fontSize : null, + fontStyle: italic ? 'italic' : null, + fontWeight: bold ? 'bold' : null, + textDecorationLine: getTextDecorationLineValue(underline, strikeThrough), + }, + '&.Mui-disabled': { + color: theme.palette.action.disabled, + backgroundColor: theme.palette.action.disabledBackground, + opacity: 1, + }, }, - '&.Mui-disabled': { - color: theme.palette.action.disabled, - backgroundColor: theme.palette.action.disabledBackground, - opacity: 1, + icon: { + marginRight: iconOnly ? theme.spacing(0) : theme.spacing(2), + height: theme.spacing(2), + width: theme.spacing(2), }, - }, - icon: { - marginRight: ({ iconOnly }) => (iconOnly ? theme.spacing(0) : theme.spacing(2)), - height: theme.spacing(2), - width: theme.spacing(2), - }, -})); + }) +); -const useContainerStyle = makeStyles((theme) => ({ +const useContainerStyle = makeStyles()((theme) => ({ style: { display: 'flex', flexDirection: 'row', @@ -166,10 +166,10 @@ export const SplitButtonPropertySection = ({ strikeThrough: action.style?.strikeThrough ?? null, iconOnly: action.buttonLabel ? false : true, }; - return useStyle(props); + return useStyle(props).classes; }); - const containerClasses = useContainerStyle(); + const { classes: containerClasses } = useContainerStyle(); const [pushButton, { loading, data, error }] = useMutation( pushButtonMutation diff --git a/packages/forms/frontend/sirius-components-forms/src/propertysections/TextfieldPropertySection.tsx b/packages/forms/frontend/sirius-components-forms/src/propertysections/TextfieldPropertySection.tsx index 59493274ec1..4db59121cdd 100644 --- a/packages/forms/frontend/sirius-components-forms/src/propertysections/TextfieldPropertySection.tsx +++ b/packages/forms/frontend/sirius-components-forms/src/propertysections/TextfieldPropertySection.tsx @@ -12,10 +12,10 @@ *******************************************************************************/ import { gql, useLazyQuery, useMutation } from '@apollo/client'; import { getCSSColor, useMultiToast } from '@eclipse-sirius/sirius-components-core'; -import TextField from '@material-ui/core/TextField'; -import { Theme, makeStyles } from '@material-ui/core/styles'; +import TextField from '@mui/material/TextField'; import { useMachine } from '@xstate/react'; import React, { FocusEvent, useEffect, useRef, useState } from 'react'; +import { makeStyles } from 'tss-react/mui'; import { PropertySectionComponent, PropertySectionComponentProps } from '../form/Form.types'; import { GQLTextarea, GQLTextfield, GQLWidget } from '../form/FormEventFragments.types'; import { GQLSuccessPayload } from './ListPropertySection.types'; @@ -50,24 +50,26 @@ import { } from './TextfieldPropertySectionMachine'; import { getTextDecorationLineValue } from './getTextDecorationLineValue'; -const useStyle = makeStyles((theme) => ({ - style: { - backgroundColor: ({ backgroundColor }) => (backgroundColor ? getCSSColor(backgroundColor, theme) : null), - color: ({ foregroundColor }) => (foregroundColor ? getCSSColor(foregroundColor, theme) : null), - fontSize: ({ fontSize }) => (fontSize ? fontSize : null), - fontStyle: ({ italic }) => (italic ? 'italic' : null), - fontWeight: ({ bold }) => (bold ? 'bold' : null), - textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough), - }, - input: { - paddingTop: theme.spacing(0.5), - paddingBottom: theme.spacing(0.5), - }, - textfield: { - marginTop: theme.spacing(0.5), - marginBottom: theme.spacing(0.5), - }, -})); +const useStyle = makeStyles()( + (theme, { backgroundColor, foregroundColor, fontSize, italic, bold, underline, strikeThrough }) => ({ + style: { + backgroundColor: backgroundColor ? getCSSColor(backgroundColor, theme) : null, + color: foregroundColor ? getCSSColor(foregroundColor, theme) : null, + fontSize: fontSize ? fontSize : null, + fontStyle: italic ? 'italic' : null, + fontWeight: bold ? 'bold' : null, + textDecorationLine: getTextDecorationLineValue(underline, strikeThrough), + }, + input: { + paddingTop: theme.spacing(0.5), + paddingBottom: theme.spacing(0.5), + }, + textfield: { + marginTop: theme.spacing(0.5), + marginBottom: theme.spacing(0.5), + }, + }) +); export const getCompletionProposalsQuery = gql` query completionProposals( @@ -158,7 +160,7 @@ export const TextfieldPropertySection: PropertySectionComponent ({ +const useTreeItemWidgetStyles = makeStyles()((theme) => ({ label: { display: 'flex', flexDirection: 'row', @@ -115,7 +116,7 @@ export const updateWidgetFocusMutation = gql` `; const TreeItem = ({ node, nodes, readOnly, editingContextId, formId, widgetId }: TreeItemProps) => { - const classes = useTreeItemWidgetStyles(); + const { classes } = useTreeItemWidgetStyles(); const { setSelection } = useSelection(); const [editTreeCheckbox, { loading, error, data }] = @@ -191,7 +192,7 @@ const TreeItem = ({ node, nodes, readOnly, editingContextId, formId, widgetId }: const childNodes = nodes.filter((childNode) => childNode.parentId === node.id); return ( - + {childNodes.map((childNode) => ( = ({ widget={widget} subscribers={subscribers} /> - } - defaultExpanded={expandedNodesIds} - defaultExpandIcon={} + {rootNodes.map((rootNode) => ( @@ -307,7 +307,7 @@ export const TreePropertySection: PropertySectionComponent = ({ widgetId={widget.id} /> ))} - +
); }; diff --git a/packages/forms/frontend/sirius-components-forms/src/representations/FormRepresentation.tsx b/packages/forms/frontend/sirius-components-forms/src/representations/FormRepresentation.tsx index 15c0e34bc35..37d73f95b64 100644 --- a/packages/forms/frontend/sirius-components-forms/src/representations/FormRepresentation.tsx +++ b/packages/forms/frontend/sirius-components-forms/src/representations/FormRepresentation.tsx @@ -12,8 +12,8 @@ *******************************************************************************/ import { gql, useSubscription } from '@apollo/client'; import { RepresentationComponentProps, Toast } from '@eclipse-sirius/sirius-components-core'; -import Typography from '@material-ui/core/Typography'; -import { makeStyles } from '@material-ui/core/styles'; +import Typography from '@mui/material/Typography'; +import { makeStyles } from 'tss-react/mui'; import { useMachine } from '@xstate/react'; import { useContext, useEffect } from 'react'; import { Form } from '../form/Form'; @@ -31,13 +31,13 @@ import { ToolbarAction } from '../toolbaraction/ToolbarAction'; import { FormRepresentationContext, FormRepresentationEvent, - formRepresentationMachine, HandleCompleteEvent, HandleSubscriptionResultEvent, HideToastEvent, SchemaValue, ShowToastEvent, SwitchFormEvent, + formRepresentationMachine, } from './FormRepresentationMachine'; const formEventSubscription = (contributions: Array) => @@ -61,7 +61,7 @@ const formEventSubscription = (contributions: Array) => ${formRefreshedEventPayloadFragment(contributions)} `); -const useFormRepresentationStyles = makeStyles((theme) => ({ +const useFormRepresentationStyles = makeStyles()((theme) => ({ page: { display: 'flex', flexDirection: 'column', @@ -94,7 +94,7 @@ const useFormRepresentationStyles = makeStyles((theme) => ({ * Connect the Form component to the GraphQL API over Web Socket. */ export const FormRepresentation = ({ editingContextId, representationId, readOnly }: RepresentationComponentProps) => { - const classes = useFormRepresentationStyles(); + const { classes } = useFormRepresentationStyles(); const [{ value, context }, dispatch] = useMachine( formRepresentationMachine, { diff --git a/packages/forms/frontend/sirius-components-forms/src/richtexteditor/RichTextEditor.tsx b/packages/forms/frontend/sirius-components-forms/src/richtexteditor/RichTextEditor.tsx index 31303daf343..ee7bd861768 100644 --- a/packages/forms/frontend/sirius-components-forms/src/richtexteditor/RichTextEditor.tsx +++ b/packages/forms/frontend/sirius-components-forms/src/richtexteditor/RichTextEditor.tsx @@ -22,7 +22,7 @@ import { MarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPl import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'; import { TabIndentationPlugin } from '@lexical/react/LexicalTabIndentationPlugin'; import { HeadingNode, QuoteNode } from '@lexical/rich-text'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from 'tss-react/mui'; import { $setSelection, TextNode } from 'lexical'; import { FocusEvent, useCallback, useEffect } from 'react'; import { ListPlugin } from './ListPlugin'; @@ -83,7 +83,7 @@ const OnBlurPlugin = ({ onBlur, children }: OnBlurPluginProps): JSX.Element => { ); }; -const useRichTextEditorStyles = makeStyles((theme) => ({ +const useRichTextEditorStyles = makeStyles()((theme) => ({ editorContainer: { marginTop: theme.spacing(2), color: theme.palette.text.primary, @@ -179,7 +179,7 @@ const useRichTextEditorStyles = makeStyles((theme) => ({ })); export const RichTextEditor = ({ value, placeholder, readOnly, onFocus, onBlur }: RichTextEditorProps) => { - const classes = useRichTextEditorStyles(); + const { classes } = useRichTextEditorStyles(); const theme = { placeholder: classes.editorPlaceholder, paragraph: classes.editorParagraph, diff --git a/packages/forms/frontend/sirius-components-forms/src/richtexteditor/ToolbarPlugin.tsx b/packages/forms/frontend/sirius-components-forms/src/richtexteditor/ToolbarPlugin.tsx index 7c671df61b0..fcf2f22dd63 100644 --- a/packages/forms/frontend/sirius-components-forms/src/richtexteditor/ToolbarPlugin.tsx +++ b/packages/forms/frontend/sirius-components-forms/src/richtexteditor/ToolbarPlugin.tsx @@ -21,19 +21,18 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext import { $createHeadingNode, $isHeadingNode } from '@lexical/rich-text'; import { $wrapNodes } from '@lexical/selection'; import { $getNearestNodeOfType, mergeRegister } from '@lexical/utils'; -import Divider from '@material-ui/core/Divider'; -import Paper from '@material-ui/core/Paper'; -import { makeStyles, withStyles } from '@material-ui/core/styles'; -import CodeIcon from '@material-ui/icons/Code'; -import FormatBoldIcon from '@material-ui/icons/FormatBold'; -import FormatItalicIcon from '@material-ui/icons/FormatItalic'; -import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted'; -import FormatListNumberedIcon from '@material-ui/icons/FormatListNumbered'; -import StrikethroughSIcon from '@material-ui/icons/StrikethroughS'; -import SubjectIcon from '@material-ui/icons/Subject'; -import TitleIcon from '@material-ui/icons/Title'; -import ToggleButton from '@material-ui/lab/ToggleButton'; -import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'; +import CodeIcon from '@mui/icons-material/Code'; +import FormatBoldIcon from '@mui/icons-material/FormatBold'; +import FormatItalicIcon from '@mui/icons-material/FormatItalic'; +import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted'; +import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered'; +import StrikethroughSIcon from '@mui/icons-material/StrikethroughS'; +import SubjectIcon from '@mui/icons-material/Subject'; +import TitleIcon from '@mui/icons-material/Title'; +import Divider from '@mui/material/Divider'; +import Paper from '@mui/material/Paper'; +import ToggleButton from '@mui/material/ToggleButton'; +import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; import { $createParagraphNode, $getSelection, @@ -43,9 +42,10 @@ import { SELECTION_CHANGE_COMMAND, } from 'lexical'; import { useCallback, useEffect, useState } from 'react'; +import { makeStyles, withStyles } from 'tss-react/mui'; import { ToolbarPluginProps } from './RichTextEditor.types'; -const useToolbarStyles = makeStyles((theme) => ({ +const useToolbarStyles = makeStyles()((theme) => ({ paper: { display: 'flex', flexDirection: 'row', @@ -63,7 +63,7 @@ const useToolbarStyles = makeStyles((theme) => ({ }, })); -const StyledToggleButtonGroup = withStyles((theme) => ({ +const StyledToggleButtonGroup = withStyles(ToggleButtonGroup, (theme) => ({ grouped: { margin: theme.spacing(0.5), border: 'none', @@ -74,7 +74,7 @@ const StyledToggleButtonGroup = withStyles((theme) => ({ borderRadius: theme.shape.borderRadius, }, }, -}))(ToggleButtonGroup); +})); export const ToolbarPlugin = ({ readOnly }: ToolbarPluginProps) => { const [editor] = useLexicalComposerContext(); @@ -173,7 +173,7 @@ export const ToolbarPlugin = ({ readOnly }: ToolbarPluginProps) => { toggled.push('code'); } - const classes = useToolbarStyles({}); + const { classes } = useToolbarStyles(); return ( updateButtons(newStyles)}> diff --git a/packages/forms/frontend/sirius-components-forms/src/toolbaraction/ToolbarAction.tsx b/packages/forms/frontend/sirius-components-forms/src/toolbaraction/ToolbarAction.tsx index 3fa1c683b82..0977838615b 100644 --- a/packages/forms/frontend/sirius-components-forms/src/toolbaraction/ToolbarAction.tsx +++ b/packages/forms/frontend/sirius-components-forms/src/toolbaraction/ToolbarAction.tsx @@ -12,10 +12,10 @@ *******************************************************************************/ import { useMutation } from '@apollo/client'; import { ServerContext, ServerContextValue, getCSSColor, useMultiToast } from '@eclipse-sirius/sirius-components-core'; -import Button from '@material-ui/core/Button'; -import { Theme, makeStyles } from '@material-ui/core/styles'; +import Button from '@mui/material/Button'; import gql from 'graphql-tag'; import { useContext, useEffect } from 'react'; +import { makeStyles } from 'tss-react/mui'; import { GQLButton } from '../form/FormEventFragments.types'; import { HelpTooltip } from '../propertysections/HelpTooltip'; import { getTextDecorationLineValue } from './../propertysections/getTextDecorationLineValue'; @@ -34,31 +34,31 @@ import { ToolbarActionStyleProps, } from './ToolbarAction.types'; -const useStyle = makeStyles((theme) => ({ - style: { - minWidth: '32px', - lineHeight: 1.25, - backgroundColor: ({ backgroundColor }) => - backgroundColor ? getCSSColor(backgroundColor, theme) : theme.palette.primary.light, - color: ({ foregroundColor }) => (foregroundColor ? getCSSColor(foregroundColor, theme) : 'white'), - fontSize: ({ fontSize }) => (fontSize ? fontSize : null), - fontStyle: ({ italic }) => (italic ? 'italic' : null), - fontWeight: ({ bold }) => (bold ? 'bold' : null), - textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough), - '&:hover': { - backgroundColor: ({ backgroundColor }) => - backgroundColor ? getCSSColor(backgroundColor, theme) : theme.palette.primary.main, - color: ({ foregroundColor }) => (foregroundColor ? getCSSColor(foregroundColor, theme) : 'white'), - fontSize: ({ fontSize }) => (fontSize ? fontSize : null), - fontStyle: ({ italic }) => (italic ? 'italic' : null), - fontWeight: ({ bold }) => (bold ? 'bold' : null), - textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough), +const useStyle = makeStyles()( + (theme, { backgroundColor, foregroundColor, fontSize, italic, bold, underline, strikeThrough, iconOnly }) => ({ + style: { + minWidth: '32px', + lineHeight: 1.25, + backgroundColor: backgroundColor ? getCSSColor(backgroundColor, theme) : theme.palette.primary.light, + color: foregroundColor ? getCSSColor(foregroundColor, theme) : 'white', + fontSize: fontSize ? fontSize : null, + fontStyle: italic ? 'italic' : null, + fontWeight: bold ? 'bold' : null, + textDecorationLine: getTextDecorationLineValue(underline, strikeThrough), + '&:hover': { + backgroundColor: backgroundColor ? getCSSColor(backgroundColor, theme) : theme.palette.primary.main, + color: foregroundColor ? getCSSColor(foregroundColor, theme) : 'white', + fontSize: fontSize ? fontSize : null, + fontStyle: italic ? 'italic' : null, + fontWeight: bold ? 'bold' : null, + textDecorationLine: getTextDecorationLineValue(underline, strikeThrough), + }, }, - }, - icon: { - marginRight: ({ iconOnly }) => (iconOnly ? theme.spacing(0) : theme.spacing(2)), - }, -})); + icon: { + marginRight: iconOnly ? theme.spacing(0) : theme.spacing(2), + }, + }) +); export const pushButtonMutation = gql` mutation pushButton($input: PushButtonInput!) { @@ -115,7 +115,7 @@ export const ToolbarAction = ({ editingContextId, formId, widget, readOnly }: To strikeThrough: widget.style?.strikeThrough ?? null, iconOnly: widget.buttonLabel ? false : true, }; - const classes = useStyle(props); + const { classes } = useStyle(props); const { httpOrigin } = useContext(ServerContext); diff --git a/packages/forms/frontend/sirius-components-forms/src/views/FormBasedView.tsx b/packages/forms/frontend/sirius-components-forms/src/views/FormBasedView.tsx index 39c2a471ced..e1fe6a231bf 100644 --- a/packages/forms/frontend/sirius-components-forms/src/views/FormBasedView.tsx +++ b/packages/forms/frontend/sirius-components-forms/src/views/FormBasedView.tsx @@ -12,8 +12,8 @@ *******************************************************************************/ import { gql, useSubscription } from '@apollo/client'; import { Toast, useSelection } from '@eclipse-sirius/sirius-components-core'; -import Typography from '@material-ui/core/Typography'; -import { makeStyles } from '@material-ui/core/styles'; +import Typography from '@mui/material/Typography'; +import { makeStyles } from 'tss-react/mui'; import { useMachine } from '@xstate/react'; import { useContext, useEffect } from 'react'; import { Form } from '../form/Form'; @@ -66,7 +66,7 @@ export const getFormEventSubscription = (subscriptionName: string, contributions `; }; -const useFormBasedViewStyles = makeStyles((theme) => ({ +const useFormBasedViewStyles = makeStyles()((theme) => ({ idle: { padding: theme.spacing(1), }, @@ -82,7 +82,7 @@ export const FormBasedView = ({ converter, postProcessor, }: FormBasedViewProps) => { - const classes = useFormBasedViewStyles(); + const { classes } = useFormBasedViewStyles(); const [{ value, context }, dispatch] = useMachine(formBasedViewMachine); const { toast, formBasedView } = value as SchemaValue; const { id, currentSelection, form, widgetSubscriptions, message } = context; diff --git a/packages/forms/frontend/sirius-components-forms/src/views/RelatedElementsView.tsx b/packages/forms/frontend/sirius-components-forms/src/views/RelatedElementsView.tsx index f45194096e6..c3d0d829fe2 100644 --- a/packages/forms/frontend/sirius-components-forms/src/views/RelatedElementsView.tsx +++ b/packages/forms/frontend/sirius-components-forms/src/views/RelatedElementsView.tsx @@ -11,19 +11,19 @@ * Obeo - initial API and implementation *******************************************************************************/ import { WorkbenchViewComponentProps } from '@eclipse-sirius/sirius-components-core'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from 'tss-react/mui'; import { GQLForm, GQLWidgetSubscription } from '../form/FormEventFragments.types'; import { Group } from '../groups/Group'; import { FormBasedView } from './FormBasedView'; -const useRelatedElementsViewStyles = makeStyles((theme) => ({ +const useRelatedElementsViewStyles = makeStyles()((theme) => ({ content: { padding: theme.spacing(1), }, })); export const RelatedElementsView = (props: WorkbenchViewComponentProps) => { - const classes = useRelatedElementsViewStyles(); + const { classes } = useRelatedElementsViewStyles(); const extractFirstGroup = ( props: WorkbenchViewComponentProps, diff --git a/packages/forms/frontend/sirius-components-forms/src/views/RepresentationsView.tsx b/packages/forms/frontend/sirius-components-forms/src/views/RepresentationsView.tsx index 29289a734e3..df7a41d9276 100644 --- a/packages/forms/frontend/sirius-components-forms/src/views/RepresentationsView.tsx +++ b/packages/forms/frontend/sirius-components-forms/src/views/RepresentationsView.tsx @@ -11,7 +11,7 @@ * Obeo - initial API and implementation *******************************************************************************/ import { WorkbenchViewComponentProps } from '@eclipse-sirius/sirius-components-core'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from 'tss-react/mui'; import { GQLForm, GQLList, @@ -24,7 +24,7 @@ import { ListPropertySection } from '../propertysections/ListPropertySection'; import { TreePropertySection } from '../propertysections/TreePropertySection'; import { FormBasedView } from './FormBasedView'; -const useRepresentationsViewStyles = makeStyles((theme) => ({ +const useRepresentationsViewStyles = makeStyles()((theme) => ({ content: { padding: theme.spacing(1), }, @@ -34,7 +34,7 @@ const isList = (widget: GQLWidget | undefined): widget is GQLList => widget && w const isTree = (widget: GQLWidget | undefined): widget is GQLTree => widget && widget.__typename === 'TreeWidget'; export const RepresentationsView = (props: WorkbenchViewComponentProps) => { - const classes = useRepresentationsViewStyles(); + const { classes } = useRepresentationsViewStyles(); const extractPlainList = ( props: WorkbenchViewComponentProps, diff --git a/packages/forms/frontend/sirius-components-widget-reference/package.json b/packages/forms/frontend/sirius-components-widget-reference/package.json index f81b662d314..8cc808adfa2 100644 --- a/packages/forms/frontend/sirius-components-widget-reference/package.json +++ b/packages/forms/frontend/sirius-components-widget-reference/package.json @@ -37,9 +37,8 @@ "@eclipse-sirius/sirius-components-forms": "*", "@eclipse-sirius/sirius-components-trees": "*", "@lexical/react": "0.8.1", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", - "@material-ui/lab": "4.0.0-alpha.61", + "@mui/material": "5.15.15", + "@mui/icons-material": "5.15.15", "@xstate/react": "1.6.3", "d3": "7.0.0", "graphql": "16.8.0", @@ -55,9 +54,8 @@ "@eclipse-sirius/sirius-components-trees": "*", "@eclipse-sirius/sirius-components-tsconfig": "*", "@lexical/react": "0.8.1", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", - "@material-ui/lab": "4.0.0-alpha.61", + "@mui/material": "5.15.15", + "@mui/icons-material": "5.15.15", "@testing-library/react": "12.1.2", "@testing-library/user-event": "13.2.1", "@types/react": "17.0.37", diff --git a/packages/forms/frontend/sirius-components-widget-reference/src/ReferenceIcon.tsx b/packages/forms/frontend/sirius-components-widget-reference/src/ReferenceIcon.tsx index d1a038d49d2..f72893287f2 100644 --- a/packages/forms/frontend/sirius-components-widget-reference/src/ReferenceIcon.tsx +++ b/packages/forms/frontend/sirius-components-widget-reference/src/ReferenceIcon.tsx @@ -10,7 +10,7 @@ * Contributors: * Obeo - initial API and implementation *******************************************************************************/ -import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon'; +import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'; export const ReferenceIcon = (props: SvgIconProps) => { return ( diff --git a/packages/forms/frontend/sirius-components-widget-reference/src/ReferencePreview.tsx b/packages/forms/frontend/sirius-components-widget-reference/src/ReferencePreview.tsx index 0e0dd05513d..7646f4885d4 100644 --- a/packages/forms/frontend/sirius-components-widget-reference/src/ReferencePreview.tsx +++ b/packages/forms/frontend/sirius-components-widget-reference/src/ReferencePreview.tsx @@ -18,43 +18,44 @@ import { getTextDecorationLineValue, } from '@eclipse-sirius/sirius-components-forms'; import { GQLReferenceWidget } from '@eclipse-sirius/sirius-components-widget-reference'; -import Chip from '@material-ui/core/Chip'; -import IconButton from '@material-ui/core/IconButton'; -import InputAdornment from '@material-ui/core/InputAdornment'; -import TextField from '@material-ui/core/TextField'; -import Typography from '@material-ui/core/Typography'; -import { Theme, makeStyles } from '@material-ui/core/styles'; -import AddIcon from '@material-ui/icons/Add'; -import DeleteIcon from '@material-ui/icons/Delete'; -import HelpOutlineOutlined from '@material-ui/icons/HelpOutlineOutlined'; -import MoreHorizIcon from '@material-ui/icons/MoreHoriz'; -import Autocomplete from '@material-ui/lab/Autocomplete'; +import AddIcon from '@mui/icons-material/Add'; +import DeleteIcon from '@mui/icons-material/Delete'; +import HelpOutlineOutlined from '@mui/icons-material/HelpOutlineOutlined'; +import MoreHorizIcon from '@mui/icons-material/MoreHoriz'; +import Autocomplete from '@mui/material/Autocomplete'; +import Chip from '@mui/material/Chip'; +import IconButton from '@mui/material/IconButton'; +import InputAdornment from '@mui/material/InputAdornment'; +import TextField from '@mui/material/TextField'; +import Typography from '@mui/material/Typography'; import { useEffect, useRef, useState } from 'react'; +import { makeStyles } from 'tss-react/mui'; import { GQLReferenceWidgetStyle } from './ReferenceWidgetFragment.types'; const isReferenceWidget = (widget: GQLWidget): widget is GQLReferenceWidget => widget.__typename === 'ReferenceWidget'; -const useStyles = makeStyles((theme) => ({ - referenceValueStyle: { - color: ({ color }) => (color ? getCSSColor(color, theme) : undefined), - fontSize: ({ fontSize }) => (fontSize ? fontSize : undefined), - fontStyle: ({ italic }) => (italic ? 'italic' : 'unset'), - fontWeight: ({ bold }) => (bold ? 'bold' : 'unset'), - textDecorationLine: ({ underline, strikeThrough }) => - getTextDecorationLineValue(underline ?? null, strikeThrough ?? null), - }, - selected: { - color: theme.palette.primary.main, - }, - propertySectionLabel: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - }, - propertySection: { - overflowX: 'hidden', - }, -})); +const useStyles = makeStyles()( + (theme, { color, fontSize, italic, bold, underline, strikeThrough }) => ({ + referenceValueStyle: { + color: color ? getCSSColor(color, theme) : undefined, + fontSize: fontSize ? fontSize : undefined, + fontStyle: italic ? 'italic' : 'unset', + fontWeight: bold ? 'bold' : 'unset', + textDecorationLine: getTextDecorationLineValue(underline ?? null, strikeThrough ?? null), + }, + selected: { + color: theme.palette.primary.main, + }, + propertySectionLabel: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + }, + propertySection: { + overflowX: 'hidden', + }, + }) +); export const ReferencePreview: PreviewWidgetComponent = ({ widget }: PreviewWidgetProps) => { let style: GQLReferenceWidgetStyle | null = null; @@ -70,7 +71,7 @@ export const ReferencePreview: PreviewWidgetComponent = ({ widget }: PreviewWidg underline: style?.underline ?? null, strikeThrough: style?.strikeThrough ?? null, }; - const classes = useStyles(props); + const { classes } = useStyles(props); const [selected, setSelected] = useState(false); const { selection } = useSelection(); @@ -111,7 +112,6 @@ export const ReferencePreview: PreviewWidgetComponent = ({ widget }: PreviewWidg renderTags={(value, getTagProps) => value.map(({ label, iconURL }, index) => ( {params.InputProps.endAdornment} - + (() => ({ +const useStyles = makeStyles()(() => ({ root: { overflow: 'hidden', }, @@ -195,7 +195,7 @@ const RawReferencePropertySection: PropertySectionComponent subscribers, readOnly, }: PropertySectionComponentProps) => { - const classes = useStyles(); + const { classes } = useStyles(); const { setSelection } = useSelection(); const { showDeletionConfirmation } = useDeletionConfirmationDialog(); diff --git a/packages/forms/frontend/sirius-components-widget-reference/src/components/FilterableSortableList.tsx b/packages/forms/frontend/sirius-components-widget-reference/src/components/FilterableSortableList.tsx index 71d17fdd452..73fe7f0ff92 100644 --- a/packages/forms/frontend/sirius-components-widget-reference/src/components/FilterableSortableList.tsx +++ b/packages/forms/frontend/sirius-components-widget-reference/src/components/FilterableSortableList.tsx @@ -12,13 +12,14 @@ *******************************************************************************/ import { IconOverlay } from '@eclipse-sirius/sirius-components-core'; import { splitText } from '@eclipse-sirius/sirius-components-trees'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemIcon from '@material-ui/core/ListItemIcon'; -import ListItemText from '@material-ui/core/ListItemText'; -import { makeStyles, Theme } from '@material-ui/core/styles'; -import Typography from '@material-ui/core/Typography'; -import DragHandleIcon from '@material-ui/icons/DragHandle'; +import DragHandleIcon from '@mui/icons-material/DragHandle'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import ListItemText from '@mui/material/ListItemText'; +import Typography from '@mui/material/Typography'; +import { Theme } from '@mui/material/styles'; +import { makeStyles } from 'tss-react/mui'; import React, { useState } from 'react'; import { FilterableSortableListProps, @@ -27,7 +28,7 @@ import { } from './FilterableSortableList.types'; import { ModelBrowserFilterBar } from './ModelBrowserFilterBar'; -const useStyles = makeStyles((theme: Theme) => ({ +const useStyles = makeStyles()((theme: Theme) => ({ selectable: { cursor: 'pointer', '&:hover': { @@ -58,14 +59,14 @@ const useStyles = makeStyles((theme: Theme) => ({ display: 'none', }, })); -const useLabelStyles = makeStyles((theme: Theme) => ({ +const useLabelStyles = makeStyles()((theme: Theme) => ({ highlight: { backgroundColor: theme.palette.navigation.leftBackground, }, })); const HighlightedLabel = ({ label, textToHighlight }: HighlightedLabelProps) => { - const classes = useLabelStyles(); + const { classes } = useLabelStyles(); let itemLabel: JSX.Element; const splitLabelWithTextToHighlight: string[] = splitText(label, textToHighlight); if ( @@ -107,7 +108,7 @@ export const FilterableSortableList = ({ selectedItems, moveElement, }: FilterableSortableListProps) => { - const classes = useStyles(); + const { classes } = useStyles(); const [state, setState] = useState({ filterBarText: '', diff --git a/packages/forms/frontend/sirius-components-widget-reference/src/components/ModelBrowserFilterBar.tsx b/packages/forms/frontend/sirius-components-widget-reference/src/components/ModelBrowserFilterBar.tsx index 93be499f98d..e10435d2968 100644 --- a/packages/forms/frontend/sirius-components-widget-reference/src/components/ModelBrowserFilterBar.tsx +++ b/packages/forms/frontend/sirius-components-widget-reference/src/components/ModelBrowserFilterBar.tsx @@ -11,15 +11,16 @@ * Obeo - initial API and implementation *******************************************************************************/ -import IconButton from '@material-ui/core/IconButton'; -import InputAdornment from '@material-ui/core/InputAdornment'; -import { makeStyles, Theme } from '@material-ui/core/styles'; -import TextField from '@material-ui/core/TextField'; -import ClearIcon from '@material-ui/icons/Clear'; -import SearchIcon from '@material-ui/icons/Search'; +import ClearIcon from '@mui/icons-material/Clear'; +import SearchIcon from '@mui/icons-material/Search'; +import IconButton from '@mui/material/IconButton'; +import InputAdornment from '@mui/material/InputAdornment'; +import TextField from '@mui/material/TextField'; +import { Theme } from '@mui/material/styles'; +import { makeStyles } from 'tss-react/mui'; import { ModelBrowserFilterBarProps } from './ModelBrowserFilterBar.types'; -const useFilterBarStyles = makeStyles((theme: Theme) => ({ +const useFilterBarStyles = makeStyles()((theme: Theme) => ({ filterbar: { display: 'flex', flexDirection: 'row', @@ -34,7 +35,7 @@ const useFilterBarStyles = makeStyles((theme: Theme) => ({ }, })); export const ModelBrowserFilterBar = ({ onTextChange, onTextClear, text }: ModelBrowserFilterBarProps) => { - const classes = useFilterBarStyles(); + const { classes } = useFilterBarStyles(); return (
diff --git a/packages/forms/frontend/sirius-components-widget-reference/src/components/ModelBrowserTreeView.tsx b/packages/forms/frontend/sirius-components-widget-reference/src/components/ModelBrowserTreeView.tsx index 04641fa3677..5a68043faca 100644 --- a/packages/forms/frontend/sirius-components-widget-reference/src/components/ModelBrowserTreeView.tsx +++ b/packages/forms/frontend/sirius-components-widget-reference/src/components/ModelBrowserTreeView.tsx @@ -11,12 +11,12 @@ * Obeo - initial API and implementation *******************************************************************************/ import { TreeView } from '@eclipse-sirius/sirius-components-trees'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from 'tss-react/mui'; import { useState } from 'react'; import { ModelBrowserFilterBar } from './ModelBrowserFilterBar'; import { ModelBrowserTreeViewProps, ModelBrowserTreeViewState } from './ModelBrowserTreeView.types'; -const useTreeStyle = makeStyles((theme) => ({ +const useTreeStyle = makeStyles()((theme) => ({ title: { opacity: 0.6, fontSize: theme.typography.caption.fontSize, @@ -38,7 +38,7 @@ export const ModelBrowserTreeView = ({ leafType, ownerKind, }: ModelBrowserTreeViewProps) => { - const classes = useTreeStyle(); + const { classes } = useTreeStyle(); const [state, setState] = useState({ filterBarText: '' }); diff --git a/packages/forms/frontend/sirius-components-widget-reference/src/components/ValuedReferenceAutocomplete.tsx b/packages/forms/frontend/sirius-components-widget-reference/src/components/ValuedReferenceAutocomplete.tsx index 4d31bab8529..c2b3e68abf0 100644 --- a/packages/forms/frontend/sirius-components-widget-reference/src/components/ValuedReferenceAutocomplete.tsx +++ b/packages/forms/frontend/sirius-components-widget-reference/src/components/ValuedReferenceAutocomplete.tsx @@ -13,16 +13,17 @@ import { gql, useLazyQuery } from '@apollo/client'; import { IconOverlay, getCSSColor, useMultiToast } from '@eclipse-sirius/sirius-components-core'; import { getTextDecorationLineValue } from '@eclipse-sirius/sirius-components-forms'; -import Chip from '@material-ui/core/Chip'; -import IconButton from '@material-ui/core/IconButton'; -import InputAdornment from '@material-ui/core/InputAdornment'; -import TextField from '@material-ui/core/TextField'; -import { Theme, makeStyles, useTheme } from '@material-ui/core/styles'; -import AddIcon from '@material-ui/icons/Add'; -import DeleteIcon from '@material-ui/icons/Delete'; -import MoreHorizIcon from '@material-ui/icons/MoreHoriz'; -import Autocomplete from '@material-ui/lab/Autocomplete'; -import { useEffect, useState } from 'react'; +import AddIcon from '@mui/icons-material/Add'; +import DeleteIcon from '@mui/icons-material/Delete'; +import MoreHorizIcon from '@mui/icons-material/MoreHoriz'; +import Autocomplete from '@mui/material/Autocomplete'; +import Chip from '@mui/material/Chip'; +import IconButton from '@mui/material/IconButton'; +import InputAdornment from '@mui/material/InputAdornment'; +import TextField from '@mui/material/TextField'; +import { useTheme } from '@mui/material/styles'; +import { HTMLAttributes, useEffect, useState } from 'react'; +import { makeStyles } from 'tss-react/mui'; import { GQLReferenceValue, GQLReferenceWidgetStyle } from '../ReferenceWidgetFragment.types'; import { GQLFormDescription, @@ -33,27 +34,28 @@ import { ValuedReferenceAutocompleteState, } from './ValuedReferenceAutocomplete.types'; -const useStyles = makeStyles((theme) => ({ - optionLabel: { - paddingLeft: theme.spacing(0.5), - }, - referenceValueStyle: { - color: ({ color }) => (color ? getCSSColor(color, theme) : undefined), - fontSize: ({ fontSize }) => (fontSize ? fontSize : undefined), - fontStyle: ({ italic }) => (italic ? 'italic' : 'unset'), - fontWeight: ({ bold }) => (bold ? 'bold' : 'unset'), - textDecorationLine: ({ underline, strikeThrough }) => - getTextDecorationLineValue(underline ?? null, strikeThrough ?? null), - }, - endAdornmentButton: { - position: 'absolute', - display: 'flex', - right: theme.spacing(2.5), - '& > *': { - padding: 0, +const useStyles = makeStyles()( + (theme, { color, fontSize, italic, bold, underline, strikeThrough }) => ({ + optionLabel: { + paddingLeft: theme.spacing(0.5), }, - }, -})); + referenceValueStyle: { + color: color ? getCSSColor(color, theme) : undefined, + fontSize: fontSize ? fontSize : undefined, + fontStyle: italic ? 'italic' : 'unset', + fontWeight: bold ? 'bold' : 'unset', + textDecorationLine: getTextDecorationLineValue(underline ?? null, strikeThrough ?? null), + }, + endAdornmentButton: { + position: 'absolute', + display: 'flex', + right: theme.spacing(2.5), + '& > *': { + padding: 0, + }, + }, + }) +); const getReferenceValueOptionsQuery = gql` query getReferenceValueOptions($editingContextId: ID!, $representationId: ID!, $referenceWidgetId: ID!) { @@ -104,7 +106,7 @@ export const ValuedReferenceAutocomplete = ({ underline: widget.style?.underline ?? null, strikeThrough: widget.style?.strikeThrough ?? null, }; - const classes = useStyles(props); + const { classes } = useStyles(props); const theme = useTheme(); const { addErrorMessage } = useMultiToast(); @@ -173,7 +175,7 @@ export const ValuedReferenceAutocomplete = ({ }; const handleAutocompleteChange = (_event, updatedValues: GQLReferenceValue[], reason: string) => { - if (reason === 'remove-option') { + if (reason === 'removeOption') { handleRemoveReferenceValue(updatedValues); } else { const newValueIds = getOnlyNewValueIds(updatedValues); @@ -227,23 +229,23 @@ export const ValuedReferenceAutocomplete = ({ } loading={loading} options={state.options || []} + getOptionKey={(option: GQLReferenceValue) => option.id} getOptionLabel={(option: GQLReferenceValue) => option.label} value={widget.referenceValues} - getOptionSelected={(option, value) => option.id === value.id} + isOptionEqualToValue={(option, value) => option.id === value.id} onChange={handleAutocompleteChange} - renderOption={(option: GQLReferenceValue) => ( - <> + renderOption={(props: HTMLAttributes, option: GQLReferenceValue) => ( +
  • {option.label} - +
    • )} disableClearable renderTags={(value, getTagProps) => value.map((option, index) => ( ({ +const useBrowserModalStyles = makeStyles()((_) => ({ content: { height: 400, }, })); export const BrowseModal = ({ editingContextId, widget, onClose }: BrowseModalProps) => { - const styles = useBrowserModalStyles(); + const { classes: styles } = useBrowserModalStyles(); const [browserSelection, setBrowserSelection] = useState({ entries: widget.referenceValues }); return ( diff --git a/packages/forms/frontend/sirius-components-widget-reference/src/modals/CreateModal.tsx b/packages/forms/frontend/sirius-components-widget-reference/src/modals/CreateModal.tsx index fc26a33ed96..fd2b5269805 100644 --- a/packages/forms/frontend/sirius-components-widget-reference/src/modals/CreateModal.tsx +++ b/packages/forms/frontend/sirius-components-widget-reference/src/modals/CreateModal.tsx @@ -12,18 +12,18 @@ *******************************************************************************/ import { gql, useLazyQuery, useMutation } from '@apollo/client'; import { IconOverlay, Selection, SelectionContext, useMultiToast } from '@eclipse-sirius/sirius-components-core'; -import Button from '@material-ui/core/Button'; -import Dialog from '@material-ui/core/Dialog'; -import DialogActions from '@material-ui/core/DialogActions'; -import DialogContent from '@material-ui/core/DialogContent'; -import DialogTitle from '@material-ui/core/DialogTitle'; -import ListItemIcon from '@material-ui/core/ListItemIcon'; -import ListItemText from '@material-ui/core/ListItemText'; -import MenuItem from '@material-ui/core/MenuItem'; -import Select from '@material-ui/core/Select'; -import { makeStyles } from '@material-ui/core/styles'; +import Button from '@mui/material/Button'; +import Dialog from '@mui/material/Dialog'; +import DialogActions from '@mui/material/DialogActions'; +import DialogContent from '@mui/material/DialogContent'; +import DialogTitle from '@mui/material/DialogTitle'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import ListItemText from '@mui/material/ListItemText'; +import MenuItem from '@mui/material/MenuItem'; +import Select from '@mui/material/Select'; import { useMachine } from '@xstate/react'; import { useEffect } from 'react'; +import { makeStyles } from 'tss-react/mui'; import { ModelBrowserTreeView } from '../components/ModelBrowserTreeView'; import { CreateModalProps, @@ -57,14 +57,16 @@ import { createModalMachine, } from './CreateModalMachine'; -const useStyle = makeStyles((theme) => ({ +const useStyle = makeStyles()((theme) => ({ title: { opacity: 0.6, fontSize: theme.typography.caption.fontSize, }, select: { - display: 'flex', - alignItems: 'center', + '&': { + display: 'flex', + alignItems: 'center', + }, }, iconRoot: { minWidth: theme.spacing(3), @@ -163,7 +165,7 @@ const isSuccessPayload = ( payload.__typename === 'CreateElementInReferenceSuccessPayload'; export const CreateModal = ({ editingContextId, widget, onClose, formId }: CreateModalProps) => { - const classes = useStyle(); + const { classes } = useStyle(); const { addErrorMessage, addMessages } = useMultiToast(); const [{ value, context }, dispatch] = useMachine(createModalMachine); const { createModal } = value as SchemaValue; diff --git a/packages/forms/frontend/sirius-components-widget-reference/src/modals/TransferModal.tsx b/packages/forms/frontend/sirius-components-widget-reference/src/modals/TransferModal.tsx index 67dcbad8b31..88f4a2adc4a 100644 --- a/packages/forms/frontend/sirius-components-widget-reference/src/modals/TransferModal.tsx +++ b/packages/forms/frontend/sirius-components-widget-reference/src/modals/TransferModal.tsx @@ -17,16 +17,16 @@ import { SelectionEntry, useMultiToast, } from '@eclipse-sirius/sirius-components-core'; -import Button from '@material-ui/core/Button'; -import Dialog from '@material-ui/core/Dialog'; -import DialogActions from '@material-ui/core/DialogActions'; -import DialogContent from '@material-ui/core/DialogContent'; -import DialogTitle from '@material-ui/core/DialogTitle'; -import Grid from '@material-ui/core/Grid'; -import IconButton from '@material-ui/core/IconButton'; -import { makeStyles } from '@material-ui/core/styles'; -import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'; -import ChevronRightIcon from '@material-ui/icons/ChevronRight'; +import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'; +import ChevronRightIcon from '@mui/icons-material/ChevronRight'; +import Button from '@mui/material/Button'; +import Dialog from '@mui/material/Dialog'; +import DialogActions from '@mui/material/DialogActions'; +import DialogContent from '@mui/material/DialogContent'; +import DialogTitle from '@mui/material/DialogTitle'; +import Grid from '@mui/material/Grid'; +import IconButton from '@mui/material/IconButton'; +import { makeStyles } from 'tss-react/mui'; import React, { useEffect, useState } from 'react'; import { FilterableSortableList } from '../components/FilterableSortableList'; import { ModelBrowserTreeView } from '../components/ModelBrowserTreeView'; @@ -38,7 +38,7 @@ import { } from '../components/ValuedReferenceAutocomplete.types'; import { TransferModalProps, TransferModalState } from './TransferModal.types'; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles()((theme) => ({ dialogContent: { overflowX: 'hidden', }, @@ -89,7 +89,7 @@ export const TransferModal = ({ removeElement, moveElement, }: TransferModalProps) => { - const classes = useStyles(); + const { classes } = useStyles(); const { addErrorMessage } = useMultiToast(); const [state, setState] = useState({ right: widget.referenceValues, diff --git a/packages/gantt/frontend/sirius-components-gantt/package.json b/packages/gantt/frontend/sirius-components-gantt/package.json index e242ffd4aa4..34b2f96bf37 100644 --- a/packages/gantt/frontend/sirius-components-gantt/package.json +++ b/packages/gantt/frontend/sirius-components-gantt/package.json @@ -33,8 +33,8 @@ "@apollo/client": "3.8.1", "@ObeoNetwork/gantt-task-react": "0.4.9", "@eclipse-sirius/sirius-components-core": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", + "@mui/material": "5.15.15", + "@mui/icons-material": "5.15.15", "@xstate/react": "1.6.3", "graphql": "16.8.0", "react": "17.0.2", @@ -45,8 +45,8 @@ "@apollo/client": "3.8.1", "@eclipse-sirius/sirius-components-core": "*", "@eclipse-sirius/sirius-components-tsconfig": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", + "@mui/material": "5.15.15", + "@mui/icons-material": "5.15.15", "@ObeoNetwork/gantt-task-react": "0.4.9", "@types/react": "17.0.37", "@vitejs/plugin-react": "4.0.4", diff --git a/packages/gantt/frontend/sirius-components-gantt/src/icons/TaskIcon.tsx b/packages/gantt/frontend/sirius-components-gantt/src/icons/TaskIcon.tsx index 02e6ab6c6e9..41f0eca6ac4 100644 --- a/packages/gantt/frontend/sirius-components-gantt/src/icons/TaskIcon.tsx +++ b/packages/gantt/frontend/sirius-components-gantt/src/icons/TaskIcon.tsx @@ -11,7 +11,7 @@ * Obeo - initial API and implementation *******************************************************************************/ -import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon'; +import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'; export const TaskIcon = (props: SvgIconProps) => { return ( diff --git a/packages/gantt/frontend/sirius-components-gantt/src/palette/ContextualPalette.tsx b/packages/gantt/frontend/sirius-components-gantt/src/palette/ContextualPalette.tsx index d96c162b77c..645efa28940 100644 --- a/packages/gantt/frontend/sirius-components-gantt/src/palette/ContextualPalette.tsx +++ b/packages/gantt/frontend/sirius-components-gantt/src/palette/ContextualPalette.tsx @@ -10,15 +10,15 @@ * Contributors: * Obeo - initial API and implementation *******************************************************************************/ -import IconButton from '@material-ui/core/IconButton'; -import { makeStyles } from '@material-ui/core/styles'; -import DeleteForeverIcon from '@material-ui/icons/DeleteForever'; +import DeleteForeverIcon from '@mui/icons-material/DeleteForever'; +import IconButton from '@mui/material/IconButton'; +import { makeStyles } from 'tss-react/mui'; import { TaskIcon } from '../icons/TaskIcon'; import { TaskContextualPaletteProps } from '@ObeoNetwork/gantt-task-react'; import { ContextualPaletteProps } from './ContextualPalette.types'; -const useContextualPaletteStyle = makeStyles((theme) => ({ +const useContextualPaletteStyle = makeStyles()((theme) => ({ buttonEntries: { display: 'grid', gridTemplateColumns: `repeat(2, 28px)`, @@ -39,7 +39,7 @@ const useContextualPaletteStyle = makeStyles((theme) => ({ export const getContextalPalette = ({ onCreateTask, onDeleteTask }: ContextualPaletteProps) => { const ContextualPalette: React.FC = ({ selectedTask }) => { - const classes = useContextualPaletteStyle(); + const { classes } = useContextualPaletteStyle(); return (
    ({ +const useGanttStyle = makeStyles()((theme) => ({ ganttContainer: { backgroundColor: theme.palette.background.default, overflowX: 'hidden', @@ -80,7 +81,7 @@ export const Gantt = ({ }); const ganttContainerRef = useRef(null); - const ganttClasses = useGanttStyle(); + const { classes: ganttClasses } = useGanttStyle(); const theme: Theme = useTheme(); const onwheel = (wheelEvent: WheelEvent) => { diff --git a/packages/gantt/frontend/sirius-components-gantt/src/representation/Gantt.types.ts b/packages/gantt/frontend/sirius-components-gantt/src/representation/Gantt.types.ts index 5b8a300eddf..c2496e5f93b 100644 --- a/packages/gantt/frontend/sirius-components-gantt/src/representation/Gantt.types.ts +++ b/packages/gantt/frontend/sirius-components-gantt/src/representation/Gantt.types.ts @@ -10,8 +10,8 @@ * Contributors: * Obeo - initial API and implementation *******************************************************************************/ -import { Selection } from '@eclipse-sirius/sirius-components-core'; import { Column, Task, TaskOrEmpty, ViewMode } from '@ObeoNetwork/gantt-task-react'; +import { Selection } from '@eclipse-sirius/sirius-components-core'; export enum TaskListColumnEnum { NAME = 'Name', diff --git a/packages/gantt/frontend/sirius-components-gantt/src/representation/GanttRepresentation.tsx b/packages/gantt/frontend/sirius-components-gantt/src/representation/GanttRepresentation.tsx index 9420bca23e2..106e5ec95f0 100644 --- a/packages/gantt/frontend/sirius-components-gantt/src/representation/GanttRepresentation.tsx +++ b/packages/gantt/frontend/sirius-components-gantt/src/representation/GanttRepresentation.tsx @@ -13,9 +13,9 @@ import { Task, TaskOrEmpty } from '@ObeoNetwork/gantt-task-react'; import { useSubscription } from '@apollo/client'; import { RepresentationComponentProps, useMultiToast, useSelection } from '@eclipse-sirius/sirius-components-core'; -import Typography from '@material-ui/core/Typography'; -import { makeStyles } from '@material-ui/core/styles'; +import Typography from '@mui/material/Typography'; import { useEffect, useState } from 'react'; +import { makeStyles } from 'tss-react/mui'; import { useGanttMutations } from '../graphql/mutation/useGanttMutations'; import { GQLErrorPayload, @@ -28,7 +28,7 @@ import { ganttEventSubscription } from '../graphql/subscription/ganttSubscriptio import { getTaskFromGQLTask, updateTask } from '../helper/helper'; import { Gantt } from './Gantt'; import { GanttRepresentationState } from './GanttRepresentation.types'; -const useGanttRepresentationStyles = makeStyles((theme) => ({ +const useGanttRepresentationStyles = makeStyles()((theme) => ({ page: { paddingLeft: theme.spacing(1), paddingRight: theme.spacing(1), @@ -62,7 +62,7 @@ const isErrorPayload = (payload: GQLGanttEventPayload): payload is GQLErrorPaylo * Connect the Gantt component to the GraphQL API. */ export const GanttRepresentation = ({ editingContextId, representationId }: RepresentationComponentProps) => { - const classes = useGanttRepresentationStyles(); + const { classes } = useGanttRepresentationStyles(); const { addErrorMessage, addMessages } = useMultiToast(); diff --git a/packages/gantt/frontend/sirius-components-gantt/src/toolbar/Toolbar.tsx b/packages/gantt/frontend/sirius-components-gantt/src/toolbar/Toolbar.tsx index 110289b3032..b08acaafafe 100644 --- a/packages/gantt/frontend/sirius-components-gantt/src/toolbar/Toolbar.tsx +++ b/packages/gantt/frontend/sirius-components-gantt/src/toolbar/Toolbar.tsx @@ -12,27 +12,27 @@ *******************************************************************************/ import { Task, TaskOrEmpty, ViewMode } from '@ObeoNetwork/gantt-task-react'; import { ShareRepresentationModal } from '@eclipse-sirius/sirius-components-core'; -import Checkbox from '@material-ui/core/Checkbox'; -import FormControl from '@material-ui/core/FormControl'; -import IconButton from '@material-ui/core/IconButton'; -import ListItemText from '@material-ui/core/ListItemText'; -import MenuItem from '@material-ui/core/MenuItem'; -import Select from '@material-ui/core/Select'; -import Tooltip from '@material-ui/core/Tooltip/Tooltip'; -import { makeStyles } from '@material-ui/core/styles'; -import { ViewColumn } from '@material-ui/icons'; -import AspectRatioIcon from '@material-ui/icons/AspectRatio'; -import FullscreenIcon from '@material-ui/icons/Fullscreen'; -import FullscreenExitIcon from '@material-ui/icons/FullscreenExit'; -import ShareIcon from '@material-ui/icons/Share'; -import ZoomInIcon from '@material-ui/icons/ZoomIn'; -import ZoomOutIcon from '@material-ui/icons/ZoomOut'; +import AspectRatioIcon from '@mui/icons-material/AspectRatio'; +import FullscreenIcon from '@mui/icons-material/Fullscreen'; +import FullscreenExitIcon from '@mui/icons-material/FullscreenExit'; +import ShareIcon from '@mui/icons-material/Share'; +import ViewColumn from '@mui/icons-material/ViewColumn'; +import ZoomInIcon from '@mui/icons-material/ZoomIn'; +import ZoomOutIcon from '@mui/icons-material/ZoomOut'; +import Checkbox from '@mui/material/Checkbox'; +import FormControl from '@mui/material/FormControl'; +import IconButton from '@mui/material/IconButton'; +import ListItemText from '@mui/material/ListItemText'; +import MenuItem from '@mui/material/MenuItem'; +import Select from '@mui/material/Select'; +import Tooltip from '@mui/material/Tooltip'; import React, { useEffect, useState } from 'react'; +import { makeStyles } from 'tss-react/mui'; import { TaskListColumnEnum } from '../representation/Gantt.types'; import { ToolbarProps, ToolbarState } from './Toolbar.types'; import { useFullscreen } from './useFullScreen'; -const useToolbarStyles = makeStyles((theme) => ({ +const useToolbarStyles = makeStyles()((theme) => ({ toolbar: { display: 'flex', flexDirection: 'row', @@ -66,7 +66,7 @@ export const Toolbar = ({ const [state, setState] = useState({ modal: null }); const { fullscreen, setFullscreen } = useFullscreen(fullscreenNode); - const classes = useToolbarStyles(); + const { classes } = useToolbarStyles(); const onShare = () => setState((prevState) => ({ ...prevState, modal: 'share' })); const closeModal = () => setState((prevState) => ({ ...prevState, modal: null })); diff --git a/packages/portals/frontend/sirius-components-portals/package.json b/packages/portals/frontend/sirius-components-portals/package.json index 6ba669c0334..499bef122f7 100644 --- a/packages/portals/frontend/sirius-components-portals/package.json +++ b/packages/portals/frontend/sirius-components-portals/package.json @@ -32,9 +32,8 @@ "peerDependencies": { "@apollo/client": "3.8.1", "@eclipse-sirius/sirius-components-core": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", - "@material-ui/lab": "4.0.0-alpha.61", + "@mui/material": "5.15.15", + "@mui/icons-material": "5.15.15", "graphql": "16.8.0", "react": "17.0.2", "react-dom": "17.0.2", @@ -45,9 +44,8 @@ "@apollo/client": "3.8.1", "@eclipse-sirius/sirius-components-core": "*", "@eclipse-sirius/sirius-components-tsconfig": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", - "@material-ui/lab": "4.0.0-alpha.61", + "@mui/material": "5.15.15", + "@mui/icons-material": "5.15.15", "@testing-library/react": "12.1.2", "@testing-library/user-event": "13.2.1", "@types/react": "17.0.37", diff --git a/packages/portals/frontend/sirius-components-portals/src/representations/PortalRepresentation.tsx b/packages/portals/frontend/sirius-components-portals/src/representations/PortalRepresentation.tsx index a84368d1bbb..7aac135fadd 100644 --- a/packages/portals/frontend/sirius-components-portals/src/representations/PortalRepresentation.tsx +++ b/packages/portals/frontend/sirius-components-portals/src/representations/PortalRepresentation.tsx @@ -18,13 +18,14 @@ import { useMultiToast, useSelection, } from '@eclipse-sirius/sirius-components-core'; -import Typography from '@material-ui/core/Typography'; -import { makeStyles, useTheme } from '@material-ui/core/styles'; -import AddIcon from '@material-ui/icons/Add'; +import AddIcon from '@mui/icons-material/Add'; +import Typography from '@mui/material/Typography'; +import { useTheme } from '@mui/material/styles'; import { useCallback, useEffect, useRef, useState } from 'react'; import GridLayout, { Layout, LayoutItem, WidthProvider } from 'react-grid-layout'; import 'react-grid-layout/css/styles.css'; import 'react-resizable/css/styles.css'; +import { makeStyles } from 'tss-react/mui'; import { usePortal } from '../hooks/usePortal'; import { GQLPortalView } from '../hooks/usePortal.types'; import { usePortalMutations } from '../hooks/usePortalMutations'; @@ -33,7 +34,7 @@ import { PortalRepresentationMode } from './PortalRepresentation.types'; import { PortalToolbar } from './PortalToolbar'; import { RepresentationFrame } from './RepresentationFrame'; -const usePortalRepresentationStyles = makeStyles((theme) => ({ +const usePortalRepresentationStyles = makeStyles()((theme) => ({ portalRepresentationArea: { display: 'grid', gridTemplateColumns: '1fr', @@ -74,7 +75,7 @@ export const PortalRepresentation = ({ readOnly, }: RepresentationComponentProps) => { const theme = useTheme(); - const classes = usePortalRepresentationStyles(); + const { classes } = usePortalRepresentationStyles(); const domNode = useRef(null); const { addErrorMessage } = useMultiToast(); const { selection, setSelection } = useSelection(); @@ -214,7 +215,7 @@ export const PortalRepresentation = ({ return
    ; } - const cellSize: number = theme.spacing(3); + const cellSize: number = parseInt(theme.spacing(3)); return (
    - setPortalMode('edit')} - data-testid="portal-edit-portal-mode"> - - + + setPortalMode('edit')} + data-testid="portal-edit-portal-mode"> + + + - setPortalMode('direct')} - data-testid="portal-edit-representations-mode"> - - + + setPortalMode('direct')} + data-testid="portal-edit-representations-mode"> + + + {modalElement} diff --git a/packages/portals/frontend/sirius-components-portals/src/representations/RepresentationFrame.tsx b/packages/portals/frontend/sirius-components-portals/src/representations/RepresentationFrame.tsx index d9cc3bf3e60..ba795f2286e 100644 --- a/packages/portals/frontend/sirius-components-portals/src/representations/RepresentationFrame.tsx +++ b/packages/portals/frontend/sirius-components-portals/src/representations/RepresentationFrame.tsx @@ -16,14 +16,14 @@ import { RepresentationContext, RepresentationContextValue, } from '@eclipse-sirius/sirius-components-core'; -import IconButton from '@material-ui/core/IconButton'; -import Typography from '@material-ui/core/Typography'; -import { makeStyles } from '@material-ui/core/styles'; -import CloseOutlinedIcon from '@material-ui/icons/CloseOutlined'; +import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined'; +import IconButton from '@mui/material/IconButton'; +import Typography from '@mui/material/Typography'; +import { makeStyles } from 'tss-react/mui'; import { useContext } from 'react'; import { RepresentationFrameProps } from './RepresentationFrame.types'; -const useFrameStyles = makeStyles((theme) => ({ +const useFrameStyles = makeStyles()((theme) => ({ representationFrame: { display: 'grid', gridTemplateColumns: '1fr', @@ -62,7 +62,7 @@ export const RepresentationFrame = ({ const RepresentationComponent = registry.getComponent(representation); if (RepresentationComponent) { - const classes = useFrameStyles(); + const { classes } = useFrameStyles(); const props: RepresentationComponentProps = { editingContextId, representationId: representation.id, diff --git a/packages/selection/frontend/sirius-components-selection/package.json b/packages/selection/frontend/sirius-components-selection/package.json index 547aa0802ae..ad404be20a9 100644 --- a/packages/selection/frontend/sirius-components-selection/package.json +++ b/packages/selection/frontend/sirius-components-selection/package.json @@ -32,8 +32,8 @@ "peerDependencies": { "@apollo/client": "3.8.1", "@eclipse-sirius/sirius-components-core": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", + "@mui/material": "5.15.15", + "@mui/icons-material": "5.15.15", "@xstate/react": "1.6.3", "graphql": "16.8.0", "react": "17.0.2", @@ -43,8 +43,8 @@ "@apollo/client": "3.8.1", "@eclipse-sirius/sirius-components-core": "*", "@eclipse-sirius/sirius-components-tsconfig": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", + "@mui/material": "5.15.15", + "@mui/icons-material": "5.15.15", "@types/react": "17.0.37", "@vitejs/plugin-react": "4.0.4", "@xstate/react": "1.6.3", diff --git a/packages/selection/frontend/sirius-components-selection/src/SelectionDialog.tsx b/packages/selection/frontend/sirius-components-selection/src/SelectionDialog.tsx index 13541f758e4..a042fddf723 100644 --- a/packages/selection/frontend/sirius-components-selection/src/SelectionDialog.tsx +++ b/packages/selection/frontend/sirius-components-selection/src/SelectionDialog.tsx @@ -12,18 +12,18 @@ *******************************************************************************/ import { gql, useSubscription } from '@apollo/client'; import { IconOverlay, Toast } from '@eclipse-sirius/sirius-components-core'; -import Button from '@material-ui/core/Button'; -import Dialog from '@material-ui/core/Dialog'; -import DialogActions from '@material-ui/core/DialogActions'; -import DialogContent from '@material-ui/core/DialogContent'; -import DialogContentText from '@material-ui/core/DialogContentText'; -import DialogTitle from '@material-ui/core/DialogTitle'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemIcon from '@material-ui/core/ListItemIcon'; -import ListItemText from '@material-ui/core/ListItemText'; -import { createStyles, makeStyles } from '@material-ui/core/styles'; -import CropDinIcon from '@material-ui/icons/CropDin'; +import CropDinIcon from '@mui/icons-material/CropDin'; +import Button from '@mui/material/Button'; +import Dialog from '@mui/material/Dialog'; +import DialogActions from '@mui/material/DialogActions'; +import DialogContent from '@mui/material/DialogContent'; +import DialogContentText from '@mui/material/DialogContentText'; +import DialogTitle from '@mui/material/DialogTitle'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import ListItemText from '@mui/material/ListItemText'; +import { makeStyles } from 'tss-react/mui'; import { useMachine } from '@xstate/react'; import { useEffect } from 'react'; import { SelectionDialogProps } from './SelectionDialog.types'; @@ -35,8 +35,8 @@ import { SchemaValue, SelectionDialogContext, SelectionDialogEvent, - selectionDialogMachine, ShowToastEvent, + selectionDialogMachine, } from './SelectionDialogMachine'; import { GQLSelectionEventSubscription } from './SelectionEvent.types'; @@ -60,16 +60,14 @@ const selectionEventSubscription = gql` } `; -const useSelectionObjectModalStyles = makeStyles((_theme) => - createStyles({ - root: { - width: '100%', - position: 'relative', - overflow: 'auto', - maxHeight: 300, - }, - }) -); +const useSelectionObjectModalStyles = makeStyles()((_theme) => ({ + root: { + width: '100%', + position: 'relative', + overflow: 'auto', + maxHeight: 300, + }, +})); export const SelectionDialog = ({ editingContextId, @@ -78,7 +76,7 @@ export const SelectionDialog = ({ onClose, onFinish, }: SelectionDialogProps) => { - const classes = useSelectionObjectModalStyles(); + const { classes } = useSelectionObjectModalStyles(); const [{ value, context }, dispatch] = useMachine( selectionDialogMachine diff --git a/packages/sirius-web/frontend/sirius-web-application/package.json b/packages/sirius-web/frontend/sirius-web-application/package.json index c4841199257..e28ba54ad13 100644 --- a/packages/sirius-web/frontend/sirius-web-application/package.json +++ b/packages/sirius-web/frontend/sirius-web-application/package.json @@ -32,17 +32,16 @@ "peerDependencies": { "@apollo/client": "3.8.1", "@eclipse-sirius/sirius-components-core": "*", + "@eclipse-sirius/sirius-components-deck": "*", "@eclipse-sirius/sirius-components-diagrams": "*", "@eclipse-sirius/sirius-components-formdescriptioneditors": "*", "@eclipse-sirius/sirius-components-forms": "*", "@eclipse-sirius/sirius-components-gantt": "*", - "@eclipse-sirius/sirius-components-deck": "*", "@eclipse-sirius/sirius-components-portals": "*", "@eclipse-sirius/sirius-components-trees": "*", "@eclipse-sirius/sirius-components-widget-reference": "*", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", - "@material-ui/lab": "4.0.0-alpha.61", + "@mui/icons-material": "5.15.15", + "@mui/material": "5.15.15", "@types/react": "17.0.37", "@types/react-router-dom": "5.3.3", "@xstate/react": "1.6.3", @@ -52,33 +51,34 @@ "react-dom": "17.0.2", "react-router-dom": "5.2.0", "reactflow": "11.10.1", + "tss-react": "4.9.7", "xstate": "4.32.1" }, "devDependencies": { "@apollo/client": "3.8.1", "@eclipse-sirius/sirius-components-core": "*", + "@eclipse-sirius/sirius-components-deck": "*", "@eclipse-sirius/sirius-components-diagrams": "*", "@eclipse-sirius/sirius-components-formdescriptioneditors": "*", - "@eclipse-sirius/sirius-components-widget-reference": "*", "@eclipse-sirius/sirius-components-forms": "*", "@eclipse-sirius/sirius-components-gantt": "*", - "@eclipse-sirius/sirius-components-deck": "*", "@eclipse-sirius/sirius-components-portals": "*", "@eclipse-sirius/sirius-components-trees": "*", "@eclipse-sirius/sirius-components-tsconfig": "*", + "@eclipse-sirius/sirius-components-widget-reference": "*", "@types/node": "16.6.0", "@types/react": "17.0.37", "@vitejs/plugin-react": "4.0.4", "@xstate/react": "1.6.3", - "jest-junit-reporter": "1.1.0", "graphql": "16.8.0", + "jest-junit-reporter": "1.1.0", "prettier": "2.7.1", "react": "17.0.2", "react-dom": "17.0.2", "react-router-dom": "5.2.0", "rollup-plugin-peer-deps-external": "2.2.4", - "xstate": "4.32.1", "typescript": "5.1.6", - "vite": "4.4.9" + "vite": "4.4.9", + "xstate": "4.32.1" } } diff --git a/packages/sirius-web/frontend/sirius-web-application/src/application/SiriusWebApplication.tsx b/packages/sirius-web/frontend/sirius-web-application/src/application/SiriusWebApplication.tsx index 689d752e232..95fd8b19f95 100644 --- a/packages/sirius-web/frontend/sirius-web-application/src/application/SiriusWebApplication.tsx +++ b/packages/sirius-web/frontend/sirius-web-application/src/application/SiriusWebApplication.tsx @@ -29,13 +29,13 @@ import { } from '@eclipse-sirius/sirius-components-forms'; import { ExplorerView } from '@eclipse-sirius/sirius-components-trees'; import { ValidationView } from '@eclipse-sirius/sirius-components-validation'; -import CssBaseline from '@material-ui/core/CssBaseline'; -import { Theme, ThemeProvider } from '@material-ui/core/styles'; -import AccountTreeIcon from '@material-ui/icons/AccountTree'; -import Filter from '@material-ui/icons/Filter'; -import LinkIcon from '@material-ui/icons/Link'; -import MenuIcon from '@material-ui/icons/Menu'; -import WarningIcon from '@material-ui/icons/Warning'; +import AccountTreeIcon from '@mui/icons-material/AccountTree'; +import Filter from '@mui/icons-material/Filter'; +import LinkIcon from '@mui/icons-material/Link'; +import MenuIcon from '@mui/icons-material/Menu'; +import WarningIcon from '@mui/icons-material/Warning'; +import CssBaseline from '@mui/material/CssBaseline'; +import { Theme, ThemeProvider } from '@mui/material/styles'; import React from 'react'; import { BrowserRouter } from 'react-router-dom'; import { ToastProvider } from '../../src/toast/ToastProvider'; diff --git a/packages/sirius-web/frontend/sirius-web-application/src/application/SiriusWebApplication.types.ts b/packages/sirius-web/frontend/sirius-web-application/src/application/SiriusWebApplication.types.ts index 2ce9dfe378d..7817009b4d7 100644 --- a/packages/sirius-web/frontend/sirius-web-application/src/application/SiriusWebApplication.types.ts +++ b/packages/sirius-web/frontend/sirius-web-application/src/application/SiriusWebApplication.types.ts @@ -11,7 +11,7 @@ * Obeo - initial API and implementation *******************************************************************************/ import { ExtensionRegistry } from '@eclipse-sirius/sirius-components-core'; -import { Theme } from '@material-ui/core/styles'; +import { Theme } from '@mui/material/styles'; import { ReactNode } from 'react'; export interface SiriusWebApplicationProps { diff --git a/packages/sirius-web/frontend/sirius-web-application/src/core/SiriusIcon.tsx b/packages/sirius-web/frontend/sirius-web-application/src/core/SiriusIcon.tsx index 5f32db1f811..d8d0382e09d 100644 --- a/packages/sirius-web/frontend/sirius-web-application/src/core/SiriusIcon.tsx +++ b/packages/sirius-web/frontend/sirius-web-application/src/core/SiriusIcon.tsx @@ -10,7 +10,7 @@ * Contributors: * Obeo - initial API and implementation *******************************************************************************/ -import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon'; +import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'; export const SiriusIcon = (props: SvgIconProps) => { return ( diff --git a/packages/sirius-web/frontend/sirius-web-application/src/core/file-upload/FileUpload.tsx b/packages/sirius-web/frontend/sirius-web-application/src/core/file-upload/FileUpload.tsx index 7e00e6523ec..bb1a87d3706 100644 --- a/packages/sirius-web/frontend/sirius-web-application/src/core/file-upload/FileUpload.tsx +++ b/packages/sirius-web/frontend/sirius-web-application/src/core/file-upload/FileUpload.tsx @@ -10,12 +10,12 @@ * Contributors: * Obeo - initial API and implementation *******************************************************************************/ -import Typography from '@material-ui/core/Typography'; -import { makeStyles } from '@material-ui/core/styles'; +import Typography from '@mui/material/Typography'; +import { makeStyles } from 'tss-react/mui'; import React, { useEffect, useState } from 'react'; import { FileUploadProps, FileUploadState } from './FileUpload.types'; -const useFileUploadViewStyles = makeStyles((theme) => ({ +const useFileUploadViewStyles = makeStyles()((theme) => ({ fileUpload: { display: 'grid', gridTemplateColumns: '1fr', @@ -48,7 +48,7 @@ const initialState: FileUploadState = { message: DEFAULT_MESSAGE, }; export const FileUpload = ({ onFileSelected, 'data-testid': dataTestId }: FileUploadProps) => { - const styles = useFileUploadViewStyles(); + const { classes: styles } = useFileUploadViewStyles(); const fileInput = React.createRef(); const [state, setState] = useState(initialState); diff --git a/packages/sirius-web/frontend/sirius-web-application/src/footer/Footer.tsx b/packages/sirius-web/frontend/sirius-web-application/src/footer/Footer.tsx index 3f4c304a509..80ce843de40 100644 --- a/packages/sirius-web/frontend/sirius-web-application/src/footer/Footer.tsx +++ b/packages/sirius-web/frontend/sirius-web-application/src/footer/Footer.tsx @@ -10,11 +10,11 @@ * Contributors: * Obeo - initial API and implementation *******************************************************************************/ -import Link from '@material-ui/core/Link'; -import { makeStyles } from '@material-ui/core/styles'; -import Typography from '@material-ui/core/Typography'; +import Link from '@mui/material/Link'; +import Typography from '@mui/material/Typography'; +import { makeStyles } from 'tss-react/mui'; -const useFooterStyles = makeStyles((theme) => ({ +const useFooterStyles = makeStyles()((theme) => ({ footer: { display: 'flex', justifyContent: 'center', @@ -27,7 +27,7 @@ const useFooterStyles = makeStyles((theme) => ({ })); export const Footer = () => { - const classes = useFooterStyles(); + const { classes } = useFooterStyles(); return (