@atlassian/clientside-extensions-components 4.0.2 → 5.1.0-5a180d69-mdyn784a

package/lib/__snapshots__/ExtensionPointInfo.test.tsx.snap

@@ -21,7 +21,9 @@ exports[`ExtensionPointInfo should show the extension info in a modal when the i
   id="___cse_info_container"
   style="overflow-y: auto; overflow-x: hidden; padding: 24px; flex: 1 1 auto;"
 >
-  <h2>
+  <h2
+    class="_1mouidpf _1dyz4jg8 _1p1dglyw _11c8lodh _syaz1fxt"
+  >
     Attributes
   </h2>
   <p>
@@ -33,25 +35,25 @@ exports[`ExtensionPointInfo should show the extension info in a modal when the i
   >
     <thead>
       <tr
-        class="css-19act59"
+        class="css-14xksyd"
       >
         <th
-          class="css-1hdb03v"
+          class="css-1b5w8kk"
         >
           Name
         </th>
         <th
-          class="css-1hdb03v"
+          class="css-1b5w8kk"
         >
           Type
         </th>
         <th
-          class="css-1hdb03v"
+          class="css-1b5w8kk"
         >
           Required
         </th>
         <th
-          class="css-1hdb03v"
+          class="css-1b5w8kk"
         >
           Description
         </th>
@@ -59,17 +61,17 @@ exports[`ExtensionPointInfo should show the extension info in a modal when the i
     </thead>
     <tbody>
       <tr
-        class="css-19n8cn9"
+        class="css-j23gk5"
       >
         <td
-          class="css-f1b4tf"
+          class="css-155dnrl"
           width="15%"
         >
            
           type
         </td>
         <td
-          class="css-f1b4tf"
+          class="css-155dnrl"
           width="15%"
         >
           <a
@@ -79,29 +81,29 @@ exports[`ExtensionPointInfo should show the extension info in a modal when the i
           </a>
         </td>
         <td
-          class="css-f1b4tf"
+          class="css-155dnrl"
           width="10%"
         >
           true
         </td>
         <td
-          class="css-f1b4tf"
+          class="css-155dnrl"
         >
           Extension type
         </td>
       </tr>
       <tr
-        class="css-19n8cn9"
+        class="css-j23gk5"
       >
         <td
-          class="css-f1b4tf"
+          class="css-155dnrl"
           width="15%"
         >
            
           label
         </td>
         <td
-          class="css-f1b4tf"
+          class="css-155dnrl"
           width="15%"
         >
           <a
@@ -111,27 +113,27 @@ exports[`ExtensionPointInfo should show the extension info in a modal when the i
           </a>
         </td>
         <td
-          class="css-f1b4tf"
+          class="css-155dnrl"
           width="10%"
         >
           true
         </td>
         <td
-          class="css-f1b4tf"
+          class="css-155dnrl"
         />
       </tr>
       <tr
-        class="css-19n8cn9"
+        class="css-j23gk5"
       >
         <td
-          class="css-f1b4tf"
+          class="css-155dnrl"
           width="15%"
         >
            
           glyph
         </td>
         <td
-          class="css-f1b4tf"
+          class="css-155dnrl"
           width="15%"
         >
           <a
@@ -141,29 +143,29 @@ exports[`ExtensionPointInfo should show the extension info in a modal when the i
           </a>
         </td>
         <td
-          class="css-f1b4tf"
+          class="css-155dnrl"
           width="10%"
         >
           false
         </td>
         <td
-          class="css-f1b4tf"
+          class="css-155dnrl"
         >
           Glyph name
         </td>
       </tr>
       <tr
-        class="css-19n8cn9"
+        class="css-j23gk5"
       >
         <td
-          class="css-f1b4tf"
+          class="css-155dnrl"
           width="15%"
         >
            
           hidden
         </td>
         <td
-          class="css-f1b4tf"
+          class="css-155dnrl"
           width="15%"
         >
           <a
@@ -173,29 +175,29 @@ exports[`ExtensionPointInfo should show the extension info in a modal when the i
           </a>
         </td>
         <td
-          class="css-f1b4tf"
+          class="css-155dnrl"
           width="10%"
         >
           false
         </td>
         <td
-          class="css-f1b4tf"
+          class="css-155dnrl"
         >
           Hidden flag to hide web-item
         </td>
       </tr>
       <tr
-        class="css-19n8cn9"
+        class="css-j23gk5"
       >
         <td
-          class="css-f1b4tf"
+          class="css-155dnrl"
           width="15%"
         >
            
           onAction
         </td>
         <td
-          class="css-f1b4tf"
+          class="css-155dnrl"
           width="15%"
         >
           <a
@@ -205,22 +207,28 @@ exports[`ExtensionPointInfo should show the extension info in a modal when the i
           </a>
         </td>
         <td
-          class="css-f1b4tf"
+          class="css-155dnrl"
           width="10%"
         >
           false
         </td>
         <td
-          class="css-f1b4tf"
+          class="css-155dnrl"
         >
           Callback triggered on user interaction with the Web-item. Signature depends on web-item type.
         </td>
       </tr>
     </tbody>
   </table>
-  <h2>
-    Context
-  </h2>
+  <div
+    class="css-1dlo9dk"
+  >
+    <h2
+      class="_1mouidpf _1dyz4jg8 _1p1dglyw _11c8lodh _syaz1fxt"
+    >
+      Context
+    </h2>
+  </div>
   <p>
     List of values provided by this extension point as context.
   </p>
@@ -230,25 +238,25 @@ exports[`ExtensionPointInfo should show the extension info in a modal when the i
   >
     <thead>
       <tr
-        class="css-19act59"
+        class="css-14xksyd"
       >
         <th
-          class="css-1hdb03v"
+          class="css-1b5w8kk"
         >
           Name
         </th>
         <th
-          class="css-1hdb03v"
+          class="css-1b5w8kk"
         >
           Type
         </th>
         <th
-          class="css-1hdb03v"
+          class="css-1b5w8kk"
         >
           Required
         </th>
         <th
-          class="css-1hdb03v"
+          class="css-1b5w8kk"
         >
           Description
         </th>
@@ -256,17 +264,17 @@ exports[`ExtensionPointInfo should show the extension info in a modal when the i
     </thead>
     <tbody>
       <tr
-        class="css-19n8cn9"
+        class="css-j23gk5"
       >
         <td
-          class="css-f1b4tf"
+          class="css-155dnrl"
           width="15%"
         >
            
           value
         </td>
         <td
-          class="css-f1b4tf"
+          class="css-155dnrl"
           width="15%"
         >
           <a
@@ -276,52 +284,64 @@ exports[`ExtensionPointInfo should show the extension info in a modal when the i
           </a>
         </td>
         <td
-          class="css-f1b4tf"
+          class="css-155dnrl"
           width="10%"
         >
           false
         </td>
         <td
-          class="css-f1b4tf"
+          class="css-155dnrl"
         />
       </tr>
     </tbody>
   </table>
-  <h2>
-    Types reference
-  </h2>
-  <h3>
-    <div
-      name="FooInput"
+  <div
+    class="css-1dlo9dk"
+  >
+    <h2
+      class="_1mouidpf _1dyz4jg8 _1p1dglyw _11c8lodh _syaz1fxt"
+    >
+      Types reference
+    </h2>
+  </div>
+  <div
+    class="css-1dlo9dk"
+  >
+    <h3
+      class="_1mouidpf _1dyz4jg8 _1p1dglyw _11c8nbxd _syaz1fxt"
     >
-      FooInput
-    </div>
-  </h3>
+      <div
+        id="FooInput"
+      >
+        FooInput
+      </div>
+    </h3>
+  </div>
   <p />
   <table
     class="css-1qasree"
   >
     <thead>
       <tr
-        class="css-19act59"
+        class="css-14xksyd"
       >
         <th
-          class="css-1hdb03v"
+          class="css-1b5w8kk"
         >
           Name
         </th>
         <th
-          class="css-1hdb03v"
+          class="css-1b5w8kk"
         >
           Type
         </th>
         <th
-          class="css-1hdb03v"
+          class="css-1b5w8kk"
         >
           Required
         </th>
         <th
-          class="css-1hdb03v"
+          class="css-1b5w8kk"
         >
           Description
         </th>
@@ -329,17 +349,17 @@ exports[`ExtensionPointInfo should show the extension info in a modal when the i
     </thead>
     <tbody>
       <tr
-        class="css-19n8cn9"
+        class="css-j23gk5"
       >
         <td
-          class="css-f1b4tf"
+          class="css-155dnrl"
           width="15%"
         >
            
           foo
         </td>
         <td
-          class="css-f1b4tf"
+          class="css-155dnrl"
           width="15%"
         >
           <a
@@ -349,41 +369,52 @@ exports[`ExtensionPointInfo should show the extension info in a modal when the i
           </a>
         </td>
         <td
-          class="css-f1b4tf"
+          class="css-155dnrl"
           width="10%"
         >
           true
         </td>
         <td
-          class="css-f1b4tf"
+          class="css-155dnrl"
         />
       </tr>
     </tbody>
   </table>
-  <h3>
-    <div
-      name="GlyphType"
+  <div
+    class="css-1dlo9dk"
+  >
+    <h3
+      class="_1mouidpf _1dyz4jg8 _1p1dglyw _11c8nbxd _syaz1fxt"
     >
-      GlyphType
-    </div>
-  </h3>
+      <div
+        id="GlyphType"
+      >
+        GlyphType
+      </div>
+    </h3>
+  </div>
   <p>
     Enum type with the following values: 
     <b>
       cross, tick
     </b>
   </p>
-  <h3>
-    <div
-      name="AvailableTypes"
+  <div
+    class="css-1dlo9dk"
+  >
+    <h3
+      class="_1mouidpf _1dyz4jg8 _1p1dglyw _11c8nbxd _syaz1fxt"
     >
-      AvailableTypes
-    </div>
-  </h3>
+      <div
+        id="AvailableTypes"
+      >
+        AvailableTypes
+      </div>
+    </h3>
+  </div>
   <p>
     Union of the following types:
      
-    
     <a
       href=""
     >
@@ -408,83 +439,131 @@ exports[`ExtensionPointInfo should show the extension info in a modal when the i
       PanelType
     </a>
   </p>
-  <h3>
-    <div
-      name="ModalType"
+  <div
+    class="css-1dlo9dk"
+  >
+    <h3
+      class="_1mouidpf _1dyz4jg8 _1p1dglyw _11c8nbxd _syaz1fxt"
     >
-      ModalType
-    </div>
-  </h3>
+      <div
+        id="ModalType"
+      >
+        ModalType
+      </div>
+    </h3>
+  </div>
   <p>
     The value must be the constant "modal".
   </p>
-  <h3>
-    <div
-      name="LinkType"
+  <div
+    class="css-1dlo9dk"
+  >
+    <h3
+      class="_1mouidpf _1dyz4jg8 _1p1dglyw _11c8nbxd _syaz1fxt"
     >
-      LinkType
-    </div>
-  </h3>
+      <div
+        id="LinkType"
+      >
+        LinkType
+      </div>
+    </h3>
+  </div>
   <p>
     The value must be the constant "link".
   </p>
-  <h3>
-    <div
-      name="ButtonType"
+  <div
+    class="css-1dlo9dk"
+  >
+    <h3
+      class="_1mouidpf _1dyz4jg8 _1p1dglyw _11c8nbxd _syaz1fxt"
     >
-      ButtonType
-    </div>
-  </h3>
+      <div
+        id="ButtonType"
+      >
+        ButtonType
+      </div>
+    </h3>
+  </div>
   <p>
     The value must be the constant "button".
   </p>
-  <h3>
-    <div
-      name="PanelType"
+  <div
+    class="css-1dlo9dk"
+  >
+    <h3
+      class="_1mouidpf _1dyz4jg8 _1p1dglyw _11c8nbxd _syaz1fxt"
     >
-      PanelType
-    </div>
-  </h3>
+      <div
+        id="PanelType"
+      >
+        PanelType
+      </div>
+    </h3>
+  </div>
   <p>
     The value must be the constant "panel".
   </p>
-  <h3>
-    <div
-      name="String"
+  <div
+    class="css-1dlo9dk"
+  >
+    <h3
+      class="_1mouidpf _1dyz4jg8 _1p1dglyw _11c8nbxd _syaz1fxt"
     >
-      String
-    </div>
-  </h3>
+      <div
+        id="String"
+      >
+        String
+      </div>
+    </h3>
+  </div>
   <p>
     The \`String\` type represents textual data.
   </p>
-  <h3>
-    <div
-      name="Boolean"
+  <div
+    class="css-1dlo9dk"
+  >
+    <h3
+      class="_1mouidpf _1dyz4jg8 _1p1dglyw _11c8nbxd _syaz1fxt"
     >
-      Boolean
-    </div>
-  </h3>
+      <div
+        id="Boolean"
+      >
+        Boolean
+      </div>
+    </h3>
+  </div>
   <p>
     The \`Boolean\` type represents \`true\` or \`false\`.
   </p>
-  <h3>
-    <div
-      name="Function"
+  <div
+    class="css-1dlo9dk"
+  >
+    <h3
+      class="_1mouidpf _1dyz4jg8 _1p1dglyw _11c8nbxd _syaz1fxt"
     >
-      Function
-    </div>
-  </h3>
+      <div
+        id="Function"
+      >
+        Function
+      </div>
+    </h3>
+  </div>
   <p>
     The \`Function\` type represents any javascript function.
   </p>
-  <h3>
-    <div
-      name="Number"
+  <div
+    class="css-1dlo9dk"
+  >
+    <h3
+      class="_1mouidpf _1dyz4jg8 _1p1dglyw _11c8nbxd _syaz1fxt"
     >
-      Number
-    </div>
-  </h3>
+      <div
+        id="Number"
+      >
+        Number
+      </div>
+    </h3>
+  </div>
   <p>
     The value should be a number.
   </p>

package/lib/debug/useDebug.test.ts

@@ -1,5 +1,5 @@
-import { mocked } from 'ts-jest/utils';
-import { act, renderHook } from '@testing-library/react-hooks';
+import { mocked } from 'jest-mock';
+import { act, renderHook } from '@testing-library/react';
 import { isDebugEnabled, LogLevel, observeStateChange } from '@atlassian/clientside-extensions-debug';
 import useDebug from './useDebug';
 

package/lib/debug/useDiscovery.test.ts

@@ -1,5 +1,5 @@
-import { mocked } from 'ts-jest/utils';
-import { act, renderHook } from '@testing-library/react-hooks';
+import { mocked } from 'jest-mock';
+import { act, renderHook } from '@testing-library/react';
 import { isDiscoveryEnabled, LogLevel, observeStateChange } from '@atlassian/clientside-extensions-debug';
 import useDiscovery from './useDiscovery';
 

package/lib/debug/useLogging.test.ts

@@ -1,5 +1,5 @@
-import { mocked } from 'ts-jest/utils';
-import { act, renderHook } from '@testing-library/react-hooks';
+import { mocked } from 'jest-mock';
+import { act, renderHook } from '@testing-library/react';
 import { isLoggingEnabled, LogLevel, observeStateChange } from '@atlassian/clientside-extensions-debug';
 import useLogging from './useLogging';
 

package/lib/debug/useValidation.test.ts

@@ -1,5 +1,5 @@
-import { mocked } from 'ts-jest/utils';
-import { act, renderHook } from '@testing-library/react-hooks';
+import { mocked } from 'jest-mock';
+import { act, renderHook } from '@testing-library/react';
 import { isValidationEnabled, LogLevel, observeStateChange } from '@atlassian/clientside-extensions-debug';
 import useValidation from './useValidation';
 

package/lib/handlers/ButtonHandler.test.tsx

@@ -6,7 +6,11 @@ import type { FunctionComponent } from 'react';
 import { ButtonHandler } from './ButtonHandler';
 import Mock = jest.Mock;
 
-const TestComponent: FunctionComponent<{ onAction: () => void; attributes?: object }> = ({ onAction, attributes, children }) => {
+const TestComponent: FunctionComponent<{ onAction: () => void; attributes?: object; children?: React.ReactNode }> = ({
+    onAction,
+    attributes,
+    children,
+}) => {
     return (
         // eslint-disable-next-line react/jsx-props-no-spreading
         <ButtonHandler onAction={onAction} {...attributes}>

package/lib/handlers/ButtonHandler.tsx

@@ -3,7 +3,9 @@ import Button from '@atlaskit/button/standard-button';
 import type { FunctionComponent } from 'react';
 import type { OnClickHandler } from './types';
 
-export interface ButtonHandlerProps extends OnClickHandler {}
+export interface ButtonHandlerProps extends OnClickHandler {
+    children?: React.ReactNode;
+}
 
 export const ButtonHandler: FunctionComponent<ButtonHandlerProps> = ({
     appearance,