V6 rebase

package.json

@@ -37,7 +37,7 @@
     "@octokit/rest": "^20.0.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "14.5.1",
+    "@testing-library/user-event": "14.5.2",
     "@types/jest": "29.5.11",
     "@types/react": "^18",
     "@types/react-dom": "^18",

packages/react-charts/CHANGELOG.md

@@ -73,6 +73,26 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 **Note:** Version bump only for package @patternfly/react-charts
 
+# 7.2.0-prerelease.10 (2024-01-15)
+
+**Note:** Version bump only for package @patternfly/react-charts
+
+# 7.2.0-prerelease.9 (2024-01-11)
+
+**Note:** Version bump only for package @patternfly/react-charts
+
+# 7.2.0-prerelease.8 (2023-12-11)
+
+**Note:** Version bump only for package @patternfly/react-charts
+
+# 7.2.0-prerelease.7 (2023-11-10)
+
+**Note:** Version bump only for package @patternfly/react-charts
+
+# 7.2.0-prerelease.6 (2023-11-03)
+
+**Note:** Version bump only for package @patternfly/react-charts
+
 # 7.2.0-prerelease.5 (2023-10-26)
 
 **Note:** Version bump only for package @patternfly/react-charts

packages/react-charts/package.json

@@ -32,25 +32,25 @@
     "@patternfly/react-styles": "^6.0.0-alpha.9",
     "@patternfly/react-tokens": "^6.0.0-alpha.9",
     "hoist-non-react-statics": "^3.3.0",
-    "lodash": "^4.17.19",
+    "lodash": "^4.17.21",
     "tslib": "^2.5.0",
-    "victory-area": "^36.6.11",
-    "victory-axis": "^36.6.11",
-    "victory-bar": "^36.6.11",
-    "victory-box-plot": "^36.6.11",
-    "victory-chart": "^36.6.11",
-    "victory-core": "^36.6.11",
-    "victory-create-container": "^36.6.11",
-    "victory-cursor-container": "^36.6.11",
-    "victory-group": "^36.6.11",
-    "victory-legend": "^36.6.11",
-    "victory-line": "^36.6.11",
-    "victory-pie": "^36.6.11",
-    "victory-scatter": "^36.6.11",
-    "victory-stack": "^36.6.11",
-    "victory-tooltip": "^36.6.11",
-    "victory-voronoi-container": "^36.6.11",
-    "victory-zoom-container": "^36.6.11"
+    "victory-area": "^36.8.1",
+    "victory-axis": "^36.8.1",
+    "victory-bar": "^36.8.1",
+    "victory-box-plot": "^36.8.1",
+    "victory-chart": "^36.8.1",
+    "victory-core": "^36.8.1",
+    "victory-create-container": "^36.8.1",
+    "victory-cursor-container": "^36.8.1",
+    "victory-group": "^36.8.1",
+    "victory-legend": "^36.8.1",
+    "victory-line": "^36.8.1",
+    "victory-pie": "^36.8.1",
+    "victory-scatter": "^36.8.1",
+    "victory-stack": "^36.8.1",
+    "victory-tooltip": "^36.8.1",
+    "victory-voronoi-container": "^36.8.1",
+    "victory-zoom-container": "^36.8.1"
   },
   "peerDependencies": {
     "react": "^17 || ^18",

packages/react-charts/single-packages.config.json

@@ -1,7 +1,4 @@
 {
-    "packageName": "@patternfly/react-charts",
-    "exclude": [
-        "dist/esm/deprecated/index.js",
-        "dist/esm/next/index.js"
-    ]
-}
+  "packageName": "@patternfly/react-charts",
+  "exclude": ["dist/esm/deprecated/index.js", "dist/esm/next/index.js"]
+}

packages/react-code-editor/CHANGELOG.md

@@ -237,6 +237,128 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 **Note:** Version bump only for package @patternfly/react-code-editor
 
+# [5.2.0-prerelease.49](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.48...@patternfly/react-code-editor@5.2.0-prerelease.49) (2024-01-17)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# 5.2.0-prerelease.48 (2024-01-16)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [5.2.0-prerelease.47](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.46...@patternfly/react-code-editor@5.2.0-prerelease.47) (2024-01-15)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [5.2.0-prerelease.46](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.45...@patternfly/react-code-editor@5.2.0-prerelease.46) (2024-01-11)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [5.2.0-prerelease.45](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.44...@patternfly/react-code-editor@5.2.0-prerelease.45) (2024-01-10)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [5.2.0-prerelease.44](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.43...@patternfly/react-code-editor@5.2.0-prerelease.44) (2024-01-09)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [5.2.0-prerelease.43](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.42...@patternfly/react-code-editor@5.2.0-prerelease.43) (2024-01-08)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [5.2.0-prerelease.42](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.41...@patternfly/react-code-editor@5.2.0-prerelease.42) (2024-01-05)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [5.2.0-prerelease.41](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.40...@patternfly/react-code-editor@5.2.0-prerelease.41) (2024-01-05)
+
+### Features
+
+- **CodeEditor:** use new monaco package ([#9842](https://github.com/patternfly/patternfly-react/issues/9842)) ([54dd134](https://github.com/patternfly/patternfly-react/commit/54dd134d6c67c4fc1d7630fd1e7c718f66061342))
+
+# [5.2.0-prerelease.40](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.39...@patternfly/react-code-editor@5.2.0-prerelease.40) (2024-01-04)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [5.2.0-prerelease.39](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.38...@patternfly/react-code-editor@5.2.0-prerelease.39) (2024-01-03)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [5.2.0-prerelease.38](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.37...@patternfly/react-code-editor@5.2.0-prerelease.38) (2024-01-02)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [5.2.0-prerelease.37](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.36...@patternfly/react-code-editor@5.2.0-prerelease.37) (2023-12-20)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [5.2.0-prerelease.36](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.35...@patternfly/react-code-editor@5.2.0-prerelease.36) (2023-12-14)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [5.2.0-prerelease.35](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.34...@patternfly/react-code-editor@5.2.0-prerelease.35) (2023-12-11)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [5.2.0-prerelease.34](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.33...@patternfly/react-code-editor@5.2.0-prerelease.34) (2023-12-07)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [5.2.0-prerelease.33](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.32...@patternfly/react-code-editor@5.2.0-prerelease.33) (2023-12-06)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [5.2.0-prerelease.32](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.31...@patternfly/react-code-editor@5.2.0-prerelease.32) (2023-11-21)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [5.2.0-prerelease.31](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.30...@patternfly/react-code-editor@5.2.0-prerelease.31) (2023-11-17)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [5.2.0-prerelease.30](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.29...@patternfly/react-code-editor@5.2.0-prerelease.30) (2023-11-16)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [5.2.0-prerelease.29](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.28...@patternfly/react-code-editor@5.2.0-prerelease.29) (2023-11-14)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [5.2.0-prerelease.28](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.27...@patternfly/react-code-editor@5.2.0-prerelease.28) (2023-11-14)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [5.2.0-prerelease.27](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.26...@patternfly/react-code-editor@5.2.0-prerelease.27) (2023-11-14)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [5.2.0-prerelease.26](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.25...@patternfly/react-code-editor@5.2.0-prerelease.26) (2023-11-13)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [5.2.0-prerelease.25](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.24...@patternfly/react-code-editor@5.2.0-prerelease.25) (2023-11-10)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [5.2.0-prerelease.24](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.23...@patternfly/react-code-editor@5.2.0-prerelease.24) (2023-11-03)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [5.2.0-prerelease.23](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.22...@patternfly/react-code-editor@5.2.0-prerelease.23) (2023-11-03)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [5.2.0-prerelease.22](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.21...@patternfly/react-code-editor@5.2.0-prerelease.22) (2023-11-02)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [5.2.0-prerelease.21](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.20...@patternfly/react-code-editor@5.2.0-prerelease.21) (2023-11-02)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [5.2.0-prerelease.20](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.19...@patternfly/react-code-editor@5.2.0-prerelease.20) (2023-11-02)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
 # [5.2.0-prerelease.19](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.18...@patternfly/react-code-editor@5.2.0-prerelease.19) (2023-10-30)
 
 **Note:** Version bump only for package @patternfly/react-code-editor

packages/react-code-editor/package.json

@@ -34,12 +34,12 @@
     "@patternfly/react-icons": "^6.0.0-alpha.9",
     "@patternfly/react-styles": "^6.0.0-alpha.9",
     "react-dropzone": "14.2.3",
-    "tslib": "^2.5.0"
+    "tslib": "^2.5.0",
+    "@monaco-editor/react": "^4.6.0"
   },
   "peerDependencies": {
     "react": "^17 || ^18",
-    "react-dom": "^17 || ^18",
-    "react-monaco-editor": "^0.51.0"
+    "react-dom": "^17 || ^18"
   },
   "devDependencies": {
     "rimraf": "^2.6.2",

packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx

@@ -15,7 +15,7 @@ import {
   PopoverProps,
   TooltipPosition
 } from '@patternfly/react-core';
-import MonacoEditor, { ChangeHandler, EditorDidMount } from 'react-monaco-editor';
+import Editor, { Monaco } from '@monaco-editor/react';
 import { editor } from 'monaco-editor/esm/vs/editor/editor.api';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
@@ -26,6 +26,9 @@ import Dropzone, { FileRejection } from 'react-dropzone';
 import { CodeEditorContext } from './CodeEditorUtils';
 import { CodeEditorControl } from './CodeEditorControl';
 
+export type ChangeHandler = (value: string, event: editor.IModelContentChangedEvent) => void;
+export type EditorDidMount = (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => void;
+
 export interface Shortcut {
   description: string;
   keys: string[];
@@ -619,15 +622,15 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
 
           const editor = (
             <div className={css(styles.codeEditorCode)} ref={this.wrapperRef} tabIndex={0} dir="ltr">
-              <MonacoEditor
+              <Editor
                 height={height}
                 width={width}
                 language={language}
                 value={value}
                 options={options}
                 overrideServices={overrideServices}
                 onChange={this.onChange}
-                editorDidMount={this.editorDidMount}
+                onMount={this.editorDidMount}
                 theme={isDarkTheme ? 'vs-dark' : 'vs-light'}
               />
             </div>

packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditor.test.tsx

@@ -1,46 +1,79 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen, act } from '@testing-library/react';
 import { CodeEditor, Language } from '../CodeEditor';
+import styles from '@patternfly/react-styles/css/components/CodeEditor/code-editor';
+import fileUploadStyles from '@patternfly/react-styles/css/components/FileUpload/file-upload';
 
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: jest.fn().mockImplementation((query) => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: jest.fn(), // Deprecated
-    removeListener: jest.fn(), // Deprecated
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn()
-  }))
-});
-
-describe('CodeEditor', () => {
-  beforeAll(() => {
-    window.HTMLCanvasElement.prototype.getContext = () => ({}) as any;
-  });
+jest.mock('@monaco-editor/react', () => jest.fn(() => <div data-testid="mock-editor"></div>));
 
-  test('matches snapshot without props', () => {
-    const { asFragment } = render(<CodeEditor />);
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('Matches snapshot without props', () => {
+  const { asFragment } = render(<CodeEditor code="test" />);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Matches snapshot with control buttons enabled', () => {
+  const { asFragment } = render(<CodeEditor isUploadEnabled isDownloadEnabled isCopyEnabled code="test" />);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test(`Renders with default classes ${styles.codeEditor}, ${styles.codeEditorMain}, ${styles.codeEditorCode}`, () => {
+  render(<CodeEditor />);
+  expect(screen.getByTestId('mock-editor').parentElement).toHaveClass(styles.codeEditorCode);
+  expect(screen.getByTestId('mock-editor').parentElement?.parentElement).toHaveClass(styles.codeEditorMain);
+  expect(screen.getByTestId('mock-editor').parentElement?.parentElement?.parentElement).toHaveClass(styles.codeEditor);
+});
+
+test('Renders custom class when className is passed', () => {
+  render(<CodeEditor className="custom" />);
+  expect(screen.getByTestId('mock-editor').parentElement?.parentElement?.parentElement).toHaveClass('custom');
+});
+
+test(`Renders with ${styles.modifiers.readOnly} when isReadOnly = true`, () => {
+  render(<CodeEditor isReadOnly />);
+  expect(screen.getByTestId('mock-editor').parentElement?.parentElement?.parentElement).toHaveClass(
+    styles.modifiers.readOnly
+  );
+});
+
+test(`Renders with ${fileUploadStyles.fileUpload} when isUploadEnabled = true`, () => {
+  render(<CodeEditor isUploadEnabled code="test" />);
+  expect(screen.getByTestId('mock-editor').parentElement?.parentElement?.parentElement).toHaveClass(
+    fileUploadStyles.fileUpload
+  );
+});
+
+test(`Renders with empty state when code = undefined`, () => {
+  render(<CodeEditor emptyState={<div>empty</div>} />);
+  expect(screen.getByText('empty')).toBeInTheDocument();
+});
+
+test(`Renders with empty state when isUploadEnabled = true and code = undefined`, () => {
+  render(<CodeEditor emptyState={<div>empty</div>} isUploadEnabled />);
+  expect(screen.getByText('empty')).toBeInTheDocument();
+});
+
+test(`Renders with language label when isLanguageLabelVisible`, () => {
+  render(<CodeEditor isLanguageLabelVisible language={Language.java} />);
+  expect(screen.getByText('JAVA')).toBeInTheDocument();
+});
+
+test(`Renders with custom controls when customControls is passed`, () => {
+  render(<CodeEditor customControls={<div>control</div>} />);
+  expect(screen.getByText('control')).toBeInTheDocument();
+});
+
+test(`Renders with custom header content when headerMainContent is passed`, () => {
+  render(<CodeEditor headerMainContent="header content" />);
+  expect(screen.getByText('header content')).toBeInTheDocument();
+});
 
-  test('matches snapshot with all props', () => {
-    const { asFragment } = render(
-      <CodeEditor
-        isReadOnly
-        isDarkTheme
-        isLineNumbersVisible={false}
-        isUploadEnabled
-        isLanguageLabelVisible
-        isDownloadEnabled
-        isCopyEnabled
-        height="400px"
-        code={'test'}
-        language={Language.javascript}
-      />
-    );
-    expect(asFragment()).toMatchSnapshot();
+test(`Renders with shortcuts when shortcutsPopoverButtonText is passed`, () => {
+  render(
+    <CodeEditor shortcutsPopoverButtonText="shortcuts-button" shortcutsPopoverProps={{ bodyContent: 'shortcuts' }} />
+  );
+  expect(screen.getByText('shortcuts-button')).toBeInTheDocument();
+  act(() => {
+    screen.getByText('shortcuts-button').click();
   });
+  expect(screen.getByText('shortcuts')).toBeInTheDocument();
 });