Dependabot/merge

package.json

@@ -10,13 +10,14 @@
     "serve": "vite preview",
     "test": "jest",
     "predeploy": "yarn build && cp CNAME ./dist/CNAME",
-    "deploy": "gh-pages -d dist"
+    "deploy": "gh-pages -d dist",
+    "postinstall": "patch-package"
   },
   "dependencies": {
     "@apollo/client": "^3.6.9",
-    "@honeybadger-io/js": "^4.0.3",
-    "@honeybadger-io/react": "^2.1.0",
-    "@pluralsight/ps-design-system-appframe": "^6.1.1",
+    "@honeybadger-io/js": "^5.1.1",
+    "@honeybadger-io/react": "^5.1.3",
+    "@pluralsight/ps-design-system-appframe": "^6.1.2",
     "@pluralsight/ps-design-system-button": "^24.1.1",
     "@pluralsight/ps-design-system-carousel": "^14.1.1",
     "@pluralsight/ps-design-system-core": "^10.0.4",
@@ -44,8 +45,8 @@
     "lottie-web": "^5.9.6",
     "posthog-js": "^1.50.0",
     "prismjs": "^1.28.0",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-github-btn": "^1.3.0",
     "react-table": "^7.7.0"
   },
@@ -55,19 +56,21 @@
     "@types/express": "^4.17.13",
     "@types/jest": "^27.4.1",
     "@types/prismjs": "^1.26.0",
-    "@types/react": "^17.0.43",
-    "@types/react-dom": "^18.0.5",
+    "@types/react": "^ 18.0.28",
+    "@types/react-dom": "^18.0.11",
     "@types/react-table": "^7.7.10",
     "@types/testing-library__jest-dom": "^5.14.5",
     "@vitejs/plugin-react-refresh": "^1.3.6",
     "autoprefixer": "^10.4.8",
     "gh-pages": "^4.0.0",
     "jest": "^27.5.1",
+    "patch-package": "^6.5.1",
     "postcss": "^8.4.21",
+    "postinstall-postinstall": "^2.1.0",
     "rollup-plugin-analyzer": "^4.0.0",
     "tailwindcss": "^3.2.7",
     "ts-jest": "^27.1.4",
-    "typescript": "^4.7.4",
+    "typescript": "^4.9.5",
     "vite": "^3.0.9"
   }
 }

patches/@pluralsight+ps-design-system-appframe+6.1.2.patch

@@ -0,0 +1,20 @@
+diff --git a/node_modules/@pluralsight/ps-design-system-appframe/dist/esm/react/index.d.ts b/node_modules/@pluralsight/ps-design-system-appframe/dist/esm/react/index.d.ts
+index 25aab2a..4ed1b8c 100644
+--- a/node_modules/@pluralsight/ps-design-system-appframe/dist/esm/react/index.d.ts
++++ b/node_modules/@pluralsight/ps-design-system-appframe/dist/esm/react/index.d.ts
+@@ -25,6 +25,7 @@ interface AppFrameStatics {
+ interface AppFrameComponent extends RefForwardingComponent<AppFrameProps, HTMLDivElement, AppFrameStatics> {
+ }
+ declare const AppFrame: AppFrameComponent;
++//@ts-ignore
+ interface SideNavProps extends React.HTMLAttributes<HTMLDivElement> {
+     children: AppFrameProps['sidenav'];
+ }
+@@ -32,6 +33,7 @@ interface SideNavStatics {
+     variants: typeof vars.sidenavVariants;
+ }
+ declare const SideNav: React.FC<SideNavProps> & SideNavStatics;
++//@ts-ignore
+ interface TopNavProps extends React.HTMLAttributes<HTMLDivElement> {
+     children: AppFrameProps['topnav'];
+ }

patches/@pluralsight+ps-design-system-dropdown+13.1.3.patch

@@ -0,0 +1,12 @@
+diff --git a/node_modules/@pluralsight/ps-design-system-dropdown/dist/esm/js/index.d.ts b/node_modules/@pluralsight/ps-design-system-dropdown/dist/esm/js/index.d.ts
+index 1741a52..f240f44 100644
+--- a/node_modules/@pluralsight/ps-design-system-dropdown/dist/esm/js/index.d.ts
++++ b/node_modules/@pluralsight/ps-design-system-dropdown/dist/esm/js/index.d.ts
+@@ -286,6 +286,7 @@ export declare const useDropdown: (props: UseDropdownProps, forwardedRef: React.
+         onAnimationIterationCapture?: ((event: React.AnimationEvent<HTMLButtonElement>) => void) | undefined;
+         onTransitionEnd?: ((event: React.TransitionEvent<HTMLButtonElement>) => void) | undefined;
+         onTransitionEndCapture?: ((event: React.TransitionEvent<HTMLButtonElement>) => void) | undefined;
++        //@ts-ignore
+         css?: import("@emotion/core").InterpolationWithTheme<any>;
+         appearance: "default" | "subtle" | undefined;
+         disabled: boolean | undefined;

patches/@pluralsight+ps-design-system-theme+8.1.24.patch

@@ -0,0 +1,25 @@
+diff --git a/node_modules/@pluralsight/ps-design-system-theme/dist/esm/react/index.d.ts b/node_modules/@pluralsight/ps-design-system-theme/dist/esm/react/index.d.ts
+index 18df805..6d0eae7 100644
+--- a/node_modules/@pluralsight/ps-design-system-theme/dist/esm/react/index.d.ts
++++ b/node_modules/@pluralsight/ps-design-system-theme/dist/esm/react/index.d.ts
+@@ -7,6 +7,7 @@ declare type Names = typeof names;
+ export declare const ThemeContext: React.Context<"dark" | "light">;
+ declare type ThemeProps = {
+     name?: ValueOf<Names>;
++    children?: React.ReactNode;
+ };
+ declare type ThemeStatics = {
+     defaultName: typeof defaultName;
+diff --git a/node_modules/@pluralsight/ps-design-system-theme/src/react/index.tsx b/node_modules/@pluralsight/ps-design-system-theme/src/react/index.tsx
+index a2fbd65..10a84ac 100644
+--- a/node_modules/@pluralsight/ps-design-system-theme/src/react/index.tsx
++++ b/node_modules/@pluralsight/ps-design-system-theme/src/react/index.tsx
+@@ -8,7 +8,7 @@ export { defaultName, names }
+ type Names = typeof names
+ export const ThemeContext = React.createContext<ValueOf<Names>>(defaultName)
+
+-type ThemeProps = { name?: ValueOf<Names> }
++type ThemeProps = { name?: ValueOf<Names>; children?: React.ReactNode }
+ type ThemeStatics = { defaultName: typeof defaultName; names: Names }
+ type ThemeComponent = React.FC<ThemeProps> & ThemeStatics
+

src/WebhookDisplay/Paginator.component.tsx

@@ -15,7 +15,7 @@ export interface PaginatorProps {
   table: TableInstance<Webhook>;
 }
 
-export const FlexContainer: React.FC = (props) => (
+export const FlexContainer = (props: React.PropsWithChildren) => (
   <div
     style={{ display: "flex", alignItems: "center", justifyContent: "center" }}
     {...props}

src/WebhookDisplay/WebhookTable.component.tsx

@@ -4,28 +4,6 @@ import React from "react";
 import { Webhook } from "./WebhookList.component";
 import { HeaderGroup, TableInstance } from "react-table";
 
-const largePayloadCellStyle: React.CSSProperties = {
-  width: 500,
-  maxWidth: 500,
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-};
-
-const FlexContainer: React.FC = (props) => (
-  <div style={{ display: "flex", alignItems: "center" }} {...props} />
-);
-
-const HorzSpacer: React.FC = (props) => (
-  <div
-    style={{
-      display: "inline-block",
-      width: layout.spacingSmall,
-    }}
-    {...props}
-  />
-);
-
 export const WebhookTable: React.FC<{
   webhooks: Webhook[];
   setSelectedWebhook: (webhook: Webhook) => void;