refactor(Form): make Form SSR ready

.eslintrc.yml

@@ -10,11 +10,11 @@ env:
   es2022: true
 extends:
   - plugin:react/recommended
+  - plugin:react-hooks/recommended
   - plugin:import/recommended
   - plugin:prettier/recommended
 plugins:
   - prefer-arrow
-  - react-hooks
 settings:
   react:
     version: detect
@@ -143,8 +143,10 @@ overrides:
   - files:
       - '*.stories.tsx'
     extends:
+      - 'plugin:react/jsx-runtime'
       - 'plugin:storybook/recommended'
     rules:
       'react/prop-types': 'off' # inline custom components within stories don't need prop types
       '@typescript-eslint/no-unused-vars': 'warn' # some samples can include unused vars to show the API / signature
       'react/no-unescaped-entities': 'off'
+      'react-hooks/rules-of-hooks': 'off' # the CSF-3 render() functions are not detected as react components

packages/base/src/hooks/useIsomorphicId.ts

@@ -16,6 +16,7 @@ export function useIsomorphicId(): string {
     return Reflect.get(React, 'useId')();
   }
 
-  const localId = useRef(getRandomId());
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const localId = useRef(getRandomId()); // React version never changes at runtime
   return localId.current;
 }

packages/main/src/components/AnalyticalTable/hooks/useDynamicColumnWidths.ts

@@ -19,6 +19,7 @@ const columnsDeps = (
 ) => {
   const isLoadingPlaceholder = !data?.length && webComponentsReactProperties.loading;
   const hasRows = rows?.length > 0;
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const colsEqual = useMemo(() => {
     return visibleColumns
       ?.filter(

packages/main/src/components/AnalyticalTable/hooks/useKeyboardNavigation.ts

@@ -45,7 +45,7 @@ const setFocus = (currentlyFocusedCell, nextElement) => {
   }
 };
 
-const getTableProps = (tableProps, { instance: { webComponentsReactProperties, data, columns } }) => {
+const useGetTableProps = (tableProps, { instance: { webComponentsReactProperties, data, columns } }) => {
   const { showOverlay, tableRef } = webComponentsReactProperties;
   const currentlyFocusedCell = useRef<HTMLDivElement>(null);
   const noData = data.length === 0;
@@ -294,5 +294,5 @@ const getTableProps = (tableProps, { instance: { webComponentsReactProperties, d
 };
 
 export const useKeyboardNavigation = (hooks) => {
-  hooks.getTableProps.push(getTableProps);
+  hooks.getTableProps.push(useGetTableProps);
 };

packages/main/src/components/AnalyticalTable/hooks/useSelectionChangeCallback.ts

@@ -6,6 +6,7 @@ export const useSelectionChangeCallback = (hooks) => {
   hooks.useControlledState.push((state, { instance }) => {
     const { selectedRowPayload, selectedRowIds } = state;
     const { rowsById, preFilteredRowsById, webComponentsReactProperties, dispatch, filters } = instance;
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
       if (selectedRowPayload?.fired) {
         const { event: e, row: selRow } = selectedRowPayload;

packages/main/src/components/AnalyticalTable/pluginHooks/useManualRowSelect.ts

@@ -7,6 +7,7 @@ import { useEffect } from 'react';
  */
 export const useManualRowSelect = (manualRowSelectedKey = 'isSelected') => {
   const instanceAfterData = ({ flatRows, toggleRowSelected }) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
       flatRows.forEach(({ id, original }) => {
         if (manualRowSelectedKey in original) {