@patternfly/react-code-editor 6.2.0-prerelease.8 → 6.2.0

package/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap

@@ -6,139 +6,124 @@ exports[`Matches snapshot with control buttons enabled 1`] = `
     class="pf-v6-c-code-editor"
   >
     <div
-      class="pf-v6-c-code-editor__container"
-      role="presentation"
-      tabindex="0"
+      class="pf-v6-c-code-editor__header"
     >
       <div
-        class="pf-v6-c-code-editor__header"
+        class="pf-v6-c-code-editor__header-content"
       >
         <div
-          class="pf-v6-c-code-editor__header-content"
+          class="pf-v6-c-code-editor__controls"
         >
           <div
-            class="pf-v6-c-code-editor__controls"
+            style="display: contents;"
           >
-            <div
-              style="display: contents;"
+            <button
+              aria-label="Copy code to clipboard"
+              class="pf-v6-c-button pf-m-plain"
+              data-ouia-component-id="OUIA-Generated-Button-plain-1"
+              data-ouia-component-type="PF6/Button"
+              data-ouia-safe="true"
+              type="button"
             >
-              <button
-                aria-disabled="false"
-                aria-label="Copy code to clipboard"
-                class="pf-v6-c-button pf-m-plain"
-                data-ouia-component-id="OUIA-Generated-Button-plain-1"
-                data-ouia-component-type="PF6/Button"
-                data-ouia-safe="true"
-                type="button"
+              <span
+                class="pf-v6-c-button__icon"
               >
-                <span
-                  class="pf-v6-c-button__icon"
+                <svg
+                  aria-hidden="true"
+                  class="pf-v6-svg"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  viewBox="0 0 448 512"
+                  width="1em"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v6-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 448 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </div>
-            <div
-              style="display: contents;"
+                  <path
+                    d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
+                  />
+                </svg>
+              </span>
+            </button>
+          </div>
+          <div
+            style="display: contents;"
+          >
+            <button
+              aria-label="Upload code"
+              class="pf-v6-c-button pf-m-plain"
+              data-ouia-component-id="OUIA-Generated-Button-plain-2"
+              data-ouia-component-type="PF6/Button"
+              data-ouia-safe="true"
+              type="button"
             >
-              <button
-                aria-disabled="false"
-                aria-label="Upload code"
-                class="pf-v6-c-button pf-m-plain"
-                data-ouia-component-id="OUIA-Generated-Button-plain-2"
-                data-ouia-component-type="PF6/Button"
-                data-ouia-safe="true"
-                type="button"
+              <span
+                class="pf-v6-c-button__icon"
               >
-                <span
-                  class="pf-v6-c-button__icon"
+                <svg
+                  aria-hidden="true"
+                  class="pf-v6-svg"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  viewBox="0 0 512 512"
+                  width="1em"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v6-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 512 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </div>
-            <div
-              style="display: contents;"
+                  <path
+                    d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
+                  />
+                </svg>
+              </span>
+            </button>
+          </div>
+          <div
+            style="display: contents;"
+          >
+            <button
+              aria-label="Download code"
+              class="pf-v6-c-button pf-m-plain"
+              data-ouia-component-id="OUIA-Generated-Button-plain-3"
+              data-ouia-component-type="PF6/Button"
+              data-ouia-safe="true"
+              type="button"
             >
-              <button
-                aria-disabled="false"
-                aria-label="Download code"
-                class="pf-v6-c-button pf-m-plain"
-                data-ouia-component-id="OUIA-Generated-Button-plain-3"
-                data-ouia-component-type="PF6/Button"
-                data-ouia-safe="true"
-                type="button"
+              <span
+                class="pf-v6-c-button__icon"
               >
-                <span
-                  class="pf-v6-c-button__icon"
+                <svg
+                  aria-hidden="true"
+                  class="pf-v6-svg"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  viewBox="0 0 512 512"
+                  width="1em"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v6-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 512 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </div>
+                  <path
+                    d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
+                  />
+                </svg>
+              </span>
+            </button>
           </div>
-          <div
-            class="pf-v6-c-code-editor__header-main"
-          />
         </div>
       </div>
+    </div>
+    <div
+      class="pf-v6-c-code-editor__main"
+    >
+      <input
+        hidden=""
+        style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+        tabindex="-1"
+        type="file"
+      />
       <div
-        class="pf-v6-c-code-editor__main"
+        class="pf-v6-c-code-editor__code"
+        dir="ltr"
+        tabindex="0"
       >
         <div
-          class="pf-v6-c-code-editor__upload"
-        >
-          <input
-            style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
-            tabindex="-1"
-            type="file"
-          />
-          <div
-            class="pf-v6-c-code-editor__code"
-            dir="ltr"
-            tabindex="0"
-          >
-            <div
-              data-testid="mock-editor"
-            />
-          </div>
-        </div>
+          data-testid="mock-editor"
+        />
       </div>
     </div>
   </div>
@@ -156,6 +141,12 @@ exports[`Matches snapshot without props 1`] = `
     <div
       class="pf-v6-c-code-editor__main"
     >
+      <input
+        hidden=""
+        style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+        tabindex="-1"
+        type="file"
+      />
       <div
         class="pf-v6-c-code-editor__code"
         dir="ltr"

package/src/components/CodeEditor/__test__/__snapshots__/CodeEditorControl.test.tsx.snap

@@ -6,7 +6,6 @@ exports[`Matches snapshot 1`] = `
     style="display: contents;"
   >
     <button
-      aria-disabled="false"
       class="pf-v6-c-button pf-m-plain"
       data-ouia-component-id="OUIA-Generated-Button-plain-1"
       data-ouia-component-type="PF6/Button"

package/src/components/CodeEditor/examples/CodeEditor.md

@@ -7,6 +7,7 @@ propComponents: ['CodeEditor', 'CodeEditorControl', 'Popover']
 
 Note: Code editor lives in its own package at [@patternfly/react-code-editor](https://www.npmjs.com/package/@patternfly/react-code-editor) and has [**required peer deps**](https://github.com/patternfly/patternfly-react/blob/main/packages/react-code-editor/package.json).
 
+import { Fragment, useState } from 'react';
 import { CodeEditor, CodeEditorControl, Language } from '@patternfly/react-code-editor';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 

package/src/components/CodeEditor/examples/CodeEditorBasic.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
+import { useState } from 'react';
 import { CodeEditor, Language } from '@patternfly/react-code-editor';
 import { Checkbox } from '@patternfly/react-core';
 
 export const CodeEditorBasic: React.FunctionComponent = () => {
-  const [isDarkTheme, setIsDarkTheme] = React.useState(false);
-  const [isLineNumbersVisible, setIsLineNumbersVisible] = React.useState(true);
-  const [isReadOnly, setIsReadOnly] = React.useState(false);
-  const [isMinimapVisible, setIsMinimapVisible] = React.useState(false);
+  const [isDarkTheme, setIsDarkTheme] = useState(false);
+  const [isLineNumbersVisible, setIsLineNumbersVisible] = useState(true);
+  const [isReadOnly, setIsReadOnly] = useState(false);
+  const [isMinimapVisible, setIsMinimapVisible] = useState(false);
 
   const toggleDarkTheme = (checked) => {
     setIsDarkTheme(checked);

package/src/components/CodeEditor/examples/CodeEditorCustomControl.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import { useState } from 'react';
 import { CodeEditor, CodeEditorControl } from '@patternfly/react-code-editor';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 
 export const CodeEditorCustomControl: React.FunctionComponent = () => {
-  const [code, setCode] = React.useState('Some example content');
+  const [code, setCode] = useState('Some example content');
 
   const onChange = (code) => {
     setCode(code);

package/src/components/CodeEditor/examples/CodeEditorFullHeight.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { CodeEditor, Language } from '@patternfly/react-code-editor';
 
 export const CodeEditorFullHeight: React.FunctionComponent = () => {

package/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import { Fragment, useState } from 'react';
 import { CodeEditor, Language } from '@patternfly/react-code-editor';
 import { Grid, GridItem, Label, Radio } from '@patternfly/react-core';
 
 export const CodeEditorShortcutMainHeader: React.FunctionComponent = () => {
   type ShortcutMode = 'PC' | 'Mac';
 
-  const [currentShortcutMode, setCurrentShortcutMode] = React.useState<ShortcutMode>('PC');
+  const [currentShortcutMode, setCurrentShortcutMode] = useState<ShortcutMode>('PC');
 
   const onEditorDidMount = (editor, monaco) => {
     editor.layout();
@@ -51,7 +51,7 @@ export const CodeEditorShortcutMainHeader: React.FunctionComponent = () => {
     bodyContent: (
       <Grid span={6} hasGutter key="grid">
         {shortcuts.map((shortcut, index) => (
-          <React.Fragment key={index}>
+          <Fragment key={index}>
             <GridItem style={{ textAlign: 'right', marginRight: '1em' }}>
               {shortcut[currentShortcutMode]
                 .map((key) => (
@@ -64,7 +64,7 @@ export const CodeEditorShortcutMainHeader: React.FunctionComponent = () => {
                 ))}
             </GridItem>
             <GridItem>{shortcut.description}</GridItem>
-          </React.Fragment>
+          </Fragment>
         ))}
       </Grid>
     ),

package/src/components/CodeEditor/examples/CodeEditorSizeToFit.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { CodeEditor, Language } from '@patternfly/react-code-editor';
 
 export const CodeEditorSizeToFit: React.FunctionComponent = () => {

package/src/components/CodeEditor/examples/CodeEditorWithActions.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { CodeEditor } from '@patternfly/react-code-editor';
 
 export const CodeEditorWithActions: React.FunctionComponent = () => (