Misc compile error fixes.

src/components/SuperDrawer/useSuperDrawer.test.tsx

@@ -39,7 +39,7 @@ describe("useSuperDrawer", () => {
     const canCloseDrawerCheck = jest.fn(() => true);
 
     // Given the useSuperDrawer hook
-    const hook = renderHook(useSuperDrawer, { wrapper }).result.current;
+    const hook = renderHook(useSuperDrawer, { wrapper: wrapper as any }).result.current;
     // And a opened SuperDrawer
     act(() => hook.openInDrawer({ content: "content" }));
 
@@ -55,8 +55,8 @@ describe("useSuperDrawer", () => {
 
   it("should not add canCloseDrawerCheck when SuperDrawer is closed", () => {
     // Given the useSuperDrawer hook
-    const superDrawerHook = renderHook(useSuperDrawer, { wrapper }).result.current;
-    const beamHook = renderHook(() => useBeamContext(), { wrapper }).result.current;
+    const superDrawerHook = renderHook(useSuperDrawer, { wrapper: wrapper as any }).result.current;
+    const beamHook = renderHook(() => useBeamContext(), { wrapper: wrapper as any }).result.current;
 
     // When adding a canCloseDrawerCheck
     act(() => superDrawerHook.addCanCloseDrawerCheck(() => true));
@@ -69,7 +69,7 @@ describe("useSuperDrawer", () => {
     const canCloseDrawerDetailCheck = jest.fn(() => true);
 
     // Given the useSuperDrawer hook
-    const hook = renderHook(useSuperDrawer, { wrapper }).result.current;
+    const hook = renderHook(useSuperDrawer, { wrapper: wrapper as any }).result.current;
     // And a opened SuperDrawer with a detail content
     act(() => {
       hook.openInDrawer({ content: "content" });
@@ -88,8 +88,8 @@ describe("useSuperDrawer", () => {
 
   it("should not add canCloseDrawerCheckDetail when SuperDrawer details is closed", () => {
     // Given the useSuperDrawer and beamContent hook
-    const superDrawerHook = renderHook(useSuperDrawer, { wrapper }).result.current;
-    const beamHook = renderHook(() => useBeamContext(), { wrapper }).result.current;
+    const superDrawerHook = renderHook(useSuperDrawer, { wrapper: wrapper as any }).result.current;
+    const beamHook = renderHook(() => useBeamContext(), { wrapper: wrapper as any }).result.current;
     // And a opened SuperDrawer with no detail content
     act(() => {
       superDrawerHook.openInDrawer({ content: "content" });
@@ -104,7 +104,7 @@ describe("useSuperDrawer", () => {
 
   it("should show ConfirmCloseModal when a canCloseDrawerCheck fails", async () => {
     // Given a useSuperDrawer and BeamContext hook
-    const hook = renderHook(useSuperDrawer, { wrapper }).result.current;
+    const hook = renderHook(useSuperDrawer, { wrapper: wrapper as any }).result.current;
     // And a opened SuperDrawer
     act(() => hook.openInDrawer({ content: "content" }));
 
@@ -117,7 +117,7 @@ describe("useSuperDrawer", () => {
 
   it("should show ConfirmCloseModal when a canCloseDrawerDetailCheck fails", async () => {
     // Given a useSuperDrawer and BeamContext hook
-    const hook = renderHook(useSuperDrawer, { wrapper }).result.current;
+    const hook = renderHook(useSuperDrawer, { wrapper: wrapper as any }).result.current;
     // And a opened SuperDrawer
     act(() => {
       hook.openInDrawer({ content: "content" });
@@ -135,7 +135,7 @@ describe("useSuperDrawer", () => {
     const onClose = jest.fn();
 
     // Given the useSuperDrawer hook
-    const hook = renderHook(useSuperDrawer, { wrapper }).result.current;
+    const hook = renderHook(useSuperDrawer, { wrapper: wrapper as any }).result.current;
 
     // When the drawer is opened and closed
     act(() => hook.openInDrawer({ content: "content", onClose }));
@@ -149,7 +149,7 @@ describe("useSuperDrawer", () => {
 
   it("should not throw when attempting to closeDrawer with an empty content stack", () => {
     // Given a useSuperDrawer and BeamContext hook
-    const hook = renderHook(useSuperDrawer, { wrapper }).result.current;
+    const hook = renderHook(useSuperDrawer, { wrapper: wrapper as any }).result.current;
     // And a closed SuperDrawer
     // When we call onClose
     // Then we do not expect to have an error thrown

src/components/Table/utils/RowStates.ts

@@ -93,7 +93,7 @@ export class RowStates<R extends Kinded> {
     this.header.children = [this.keptGroupRow, ...this.topRows];
 
     // Then mark any remaining as removed
-    for (const state of maybeKept) state.markRemoved();
+    for (const state of maybeKept) (state as any).markRemoved();
 
     // After the first load of real data, we detach collapse state, to respect
     // any incoming initCollapsed.

src/forms/BoundSelectAndTextField.stories.tsx

@@ -10,7 +10,7 @@ export default {
 } as Meta;
 
 export function Example() {
-  const formState = useFormState({ config, init: { type: ScheduleTypes.Task } });
+  const formState = useFormState({ config, init: { input: { type: ScheduleTypes.Task } } });
   const types = [
     { id: ScheduleTypes.Task, name: "Task" },
     { id: ScheduleTypes.Milestone, name: "Milestone" },

src/forms/FormStateApp.tsx

@@ -48,7 +48,7 @@ export function FormStateApp() {
 
   const formState = useFormState({
     config: formConfig,
-    init: queryResponse,
+    init: { input: queryResponse },
     addRules(state) {
       state.lastName.rules.push(() => {
         return state.firstName.value === state.lastName.value ? "Last name cannot equal first name" : undefined;

src/forms/SuperDrawerApp.stories.tsx

@@ -44,9 +44,10 @@ export function SuperDrawerApp() {
 }
 
 const initFormValue: AuthorInput = {};
+
 function SuperDrawerForm() {
   const { closeDrawer, addCanCloseDrawerCheck } = useSuperDrawer();
-  const formState = useFormState({ config: formConfig, init: initFormValue });
+  const formState = useFormState({ config: formConfig, init: { input: initFormValue } });
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => addCanCloseDrawerCheck(() => !formState.dirty), []);

src/inputs/Autocomplete.tsx

@@ -13,7 +13,7 @@ export interface AutocompleteProps<T>
   extends Pick<PresentationFieldProps, "labelStyle">,
     Pick<TextFieldBaseProps<any>, "label" | "clearable" | "startAdornment" | "fullWidth"> {
   onSelect: (item: T) => void;
-  /** A function that returns how to render the an option in the menu. If not set, `getOptionLabel` will be used */
+  /** A function that returns how to render the option in the menu. If not set, `getOptionLabel` will be used */
   getOptionMenuLabel?: (o: T) => ReactNode;
   /** A function that returns the string value of the option. Used for accessibility purposes */
   getOptionLabel: (o: T) => string;
@@ -72,7 +72,7 @@ export function Autocomplete<T extends object>(props: AutocompleteProps<T>) {
     ...others,
   };
 
-  const state = useComboBoxState<T>(comboBoxProps);
+  const state = useComboBoxState<T>(comboBoxProps as any);
   const inputWrapRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef(null);
   const listBoxRef = useRef(null);
@@ -85,7 +85,7 @@ export function Autocomplete<T extends object>(props: AutocompleteProps<T>) {
       popoverRef,
       // When the input is focused and there are options, open the menu
       onFocus: () => options.length > 0 && state.open(),
-    },
+    } as any,
     state,
   );
 

src/utils/index.ts

@@ -31,7 +31,7 @@ export function toGroupState<T extends string>(values: T[], onChange: (value: T[
     // We do not use the validation state, as our Switch groups do not support error states. However, this field is required by the `CheckboxGroupState` so we need to include it.
     // If we ever update our SwitchGroup component to support error states, we'll need to update this.
     validationState: "valid",
-  };
+  } as any;
 }
 
 /**

src/utils/sb.tsx

@@ -1,10 +1,10 @@
-import { DecoratorFn } from "@storybook/react";
+import { Decorator } from "@storybook/react";
 import { ReactNode } from "react";
 import { BeamProvider } from "src/components";
 import { Css, Properties } from "src/Css";
 import { withRouter as rtlWithRouter } from "src/utils/rtl";
 
-export function withRouter(url?: string, path?: string): DecoratorFn {
+export function withRouter(url?: string, path?: string): Decorator {
   return (Story: () => JSX.Element) => rtlWithRouter(url, path).wrap(<Story />);
 }
 
@@ -16,7 +16,7 @@ export function newStory(
   storyFn: Function,
   opts: {
     parameters?: StoryParameters;
-    decorators?: DecoratorFn[];
+    decorators?: Decorator[];
   },
 ): Function {
   Object.assign(storyFn, opts);

tsconfig.json

@@ -3,7 +3,6 @@
   "compilerOptions": {
     "lib": ["esnext", "dom"],
     "types": ["jest"],
-    // Use React 17 _jsx / automatic runtime support for nice emotion integration
     "jsx": "react-jsx",
     "jsxImportSource": "@emotion/react",
     "plugins": [