Refactor recoil v4 (#3266)

* Refactor recoil v4 * Fix ci
2024-01-05 19:18:22 +01:00
parent 8455e15443
commit 96264e264c
140 changed files with 467 additions and 482 deletions
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/scopes/scope-internal-context/ObjectFilterDropdownScopeInternalContext.ts
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/scopes/scope-internal-context/ObjectFilterDropdownScopeInternalContext.ts
@ -1,7 +1,7 @@
-import { ScopedStateKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/ScopedStateKey';
+import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
 import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext';

-type ObjectFilterDropdownScopeInternalContextProps = ScopedStateKey;
+type ObjectFilterDropdownScopeInternalContextProps = StateScopeMapKey;

 export const ObjectFilterDropdownScopeInternalContext =
  createScopeInternalContext<ObjectFilterDropdownScopeInternalContextProps>();
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/availableFilterDefinitionsScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/availableFilterDefinitionsScopedState.ts
@ -1,7 +1,7 @@
 import { FilterDefinition } from '@/object-record/object-filter-dropdown/types/FilterDefinition';
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

-export const availableFilterDefinitionsScopedState = createScopedState<
+export const availableFilterDefinitionsScopedState = createStateScopeMap<
  FilterDefinition[]
 >({
  key: 'availableFilterDefinitionsScopedState',
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownScopedState.ts
@ -1,9 +1,9 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

 import { FilterDefinition } from '../types/FilterDefinition';

 export const filterDefinitionUsedInDropdownScopedState =
-  createScopedState<FilterDefinition | null>({
+  createStateScopeMap<FilterDefinition | null>({
    key: 'filterDefinitionUsedInDropdownScopedState',
    defaultValue: null,
  });
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/isObjectFilterDropdownOperandSelectUnfoldedScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/isObjectFilterDropdownOperandSelectUnfoldedScopedState.ts
@ -1,7 +1,7 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

 export const isObjectFilterDropdownOperandSelectUnfoldedScopedState =
-  createScopedState<boolean>({
+  createStateScopeMap<boolean>({
    key: 'isObjectFilterDropdownOperandSelectUnfoldedScopedState',
    defaultValue: false,
  });
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/isObjectFilterDropdownUnfoldedScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/isObjectFilterDropdownUnfoldedScopedState.ts
@ -1,7 +1,7 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

 export const isObjectFilterDropdownUnfoldedScopedState =
-  createScopedState<boolean>({
+  createStateScopeMap<boolean>({
    key: 'isObjectFilterDropdownUnfoldedScopedState',
    defaultValue: false,
  });
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/objectFilterDropdownSearchInputScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/objectFilterDropdownSearchInputScopedState.ts
@ -1,7 +1,7 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

 export const objectFilterDropdownSearchInputScopedState =
-  createScopedState<string>({
+  createStateScopeMap<string>({
    key: 'objectFilterDropdownSearchInputScopedState',
    defaultValue: '',
  });
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedEntityIdScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedEntityIdScopedState.ts
@ -1,7 +1,7 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

 export const objectFilterDropdownSelectedEntityIdScopedState =
-  createScopedState<string | null>({
+  createStateScopeMap<string | null>({
    key: 'objectFilterDropdownSelectedEntityIdScopedState',
    defaultValue: null,
  });
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedRecordIdsScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedRecordIdsScopedState.ts
@ -1,7 +1,7 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

 export const objectFilterDropdownSelectedRecordIdsScopedState =
-  createScopedState<string[]>({
+  createStateScopeMap<string[]>({
    key: 'objectFilterDropdownSelectedRecordIdsScopedState',
    defaultValue: [],
  });
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/onFilterSelectScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/onFilterSelectScopedState.ts
@ -1,8 +1,8 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

 import { Filter } from '../types/Filter';

-export const onFilterSelectScopedState = createScopedState<
+export const onFilterSelectScopedState = createStateScopeMap<
  ((filter: Filter) => void) | undefined
 >({
  key: 'onFilterSelectScopedState',
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/selectedFilterScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/selectedFilterScopedState.ts
@ -1,8 +1,10 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

 import { Filter } from '../types/Filter';

-export const selectedFilterScopedState = createScopedState<Filter | undefined>({
+export const selectedFilterScopedState = createStateScopeMap<
+  Filter | undefined
+>({
  key: 'selectedFilterScopedState',
  defaultValue: undefined,
 });
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/selectedOperandInDropdownScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/selectedOperandInDropdownScopedState.ts
@ -1,8 +1,8 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';

 export const selectedOperandInDropdownScopedState =
-  createScopedState<ViewFilterOperand | null>({
+  createStateScopeMap<ViewFilterOperand | null>({
    key: 'selectedOperandInDropdownScopedState',
    defaultValue: null,
  });
--- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/scopes/scope-internal-context/ObjectSortDropdownScopeInternalContext.ts
+++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/scopes/scope-internal-context/ObjectSortDropdownScopeInternalContext.ts
@ -1,9 +1,9 @@
-import { ScopedStateKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/ScopedStateKey';
+import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
 import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext';

 import { Sort } from '../../types/Sort';

-type ObjectSortDropdownScopeInternalContextProps = ScopedStateKey & {
+type ObjectSortDropdownScopeInternalContextProps = StateScopeMapKey & {
  onSortSelect?: (sort: Sort) => void;
 };

--- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/availableSortDefinitionsScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/availableSortDefinitionsScopedState.ts
@ -1,8 +1,8 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

 import { SortDefinition } from '../types/SortDefinition';

-export const availableSortDefinitionsScopedState = createScopedState<
+export const availableSortDefinitionsScopedState = createStateScopeMap<
  SortDefinition[]
 >({
  key: 'availableSortDefinitionsScopedState',
--- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/isSortSelectedScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/isSortSelectedScopedState.ts
@ -1,6 +1,6 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

-export const isSortSelectedScopedState = createScopedState<boolean>({
+export const isSortSelectedScopedState = createStateScopeMap<boolean>({
  key: 'isSortSelectedScopedState',
  defaultValue: false,
 });
--- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/onSortSelectScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/onSortSelectScopedState.ts
@ -1,8 +1,8 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

 import { Sort } from '../types/Sort';

-export const onSortSelectScopedState = createScopedState<
+export const onSortSelectScopedState = createStateScopeMap<
  ((sort: Sort) => void) | undefined
 >({
  key: 'onSortSelectScopedState',
--- a/packages/twenty-front/src/modules/object-record/record-board/scopes/scope-internal-context/RecordBoardScopeInternalContext.ts
+++ b/packages/twenty-front/src/modules/object-record/record-board/scopes/scope-internal-context/RecordBoardScopeInternalContext.ts
@ -1,7 +1,7 @@
-import { ScopedStateKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/ScopedStateKey';
+import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
 import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext';

-type RecordBoardScopeInternalContextProps = ScopedStateKey;
+type RecordBoardScopeInternalContextProps = StateScopeMapKey;

 export const RecordBoardScopeInternalContext =
  createScopeInternalContext<RecordBoardScopeInternalContextProps>();
--- a/packages/twenty-front/src/modules/object-record/record-board/states/activeRecordBoardCardIdsScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-board/states/activeRecordBoardCardIdsScopedState.ts
@ -1,6 +1,8 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

-export const activeRecordBoardCardIdsScopedState = createScopedState<string[]>({
+export const activeRecordBoardCardIdsScopedState = createStateScopeMap<
+  string[]
+>({
  key: 'activeRecordBoardCardIdsScopedState',
  defaultValue: [],
 });
--- a/packages/twenty-front/src/modules/object-record/record-board/states/availableRecordBoardCardFieldsScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-board/states/availableRecordBoardCardFieldsScopedState.ts
@ -1,9 +1,9 @@
 import { FieldMetadata } from '@/object-record/field/types/FieldMetadata';
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

 import { BoardFieldDefinition } from '../types/BoardFieldDefinition';

-export const availableRecordBoardCardFieldsScopedState = createScopedState<
+export const availableRecordBoardCardFieldsScopedState = createStateScopeMap<
  BoardFieldDefinition<FieldMetadata>[]
 >({
  key: 'availableRecordBoardCardFieldsScopedState',
--- a/packages/twenty-front/src/modules/object-record/record-board/states/isCompactViewEnabledScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-board/states/isCompactViewEnabledScopedState.ts
@ -1,6 +1,6 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

-export const isCompactViewEnabledScopedState = createScopedState<boolean>({
+export const isCompactViewEnabledScopedState = createStateScopeMap<boolean>({
  key: 'isCompactViewEnabledScopedState',
  defaultValue: false,
 });
--- a/packages/twenty-front/src/modules/object-record/record-board/states/isRecordBoardLoadedScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-board/states/isRecordBoardLoadedScopedState.ts
@ -1,6 +1,6 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

-export const isRecordBoardLoadedScopedState = createScopedState<boolean>({
+export const isRecordBoardLoadedScopedState = createStateScopeMap<boolean>({
  key: 'isRecordBoardLoadedScopedState',
  defaultValue: false,
 });
--- a/packages/twenty-front/src/modules/object-record/record-board/states/onFieldsChangeScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-board/states/onFieldsChangeScopedState.ts
@ -1,8 +1,8 @@
 import { FieldMetadata } from '@/object-record/field/types/FieldMetadata';
 import { BoardFieldDefinition } from '@/object-record/record-board/types/BoardFieldDefinition';
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

-export const onFieldsChangeScopedState = createScopedState<
+export const onFieldsChangeScopedState = createStateScopeMap<
  (fields: BoardFieldDefinition<FieldMetadata>[]) => void
 >({
  key: 'onFieldsChangeScopedState',
--- a/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardCardFieldsScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardCardFieldsScopedState.ts
@ -1,9 +1,9 @@
 import { FieldMetadata } from '@/object-record/field/types/FieldMetadata';
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

 import { BoardFieldDefinition } from '../types/BoardFieldDefinition';

-export const recordBoardCardFieldsScopedState = createScopedState<
+export const recordBoardCardFieldsScopedState = createStateScopeMap<
  BoardFieldDefinition<FieldMetadata>[]
 >({
  key: 'recordBoardCardFieldsScopedState',
--- a/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardColumnsScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardColumnsScopedState.ts
@ -1,7 +1,7 @@
 import { BoardColumnDefinition } from '@/object-record/record-board/types/BoardColumnDefinition';
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

-export const recordBoardColumnsScopedState = createScopedState<
+export const recordBoardColumnsScopedState = createStateScopeMap<
  BoardColumnDefinition[]
 >({
  key: 'recordBoardColumnsScopedState',
--- a/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardFiltersScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardFiltersScopedState.ts
@ -1,7 +1,7 @@
 import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

-export const recordBoardFiltersScopedState = createScopedState<Filter[]>({
+export const recordBoardFiltersScopedState = createStateScopeMap<Filter[]>({
  key: 'recordBoardFiltersScopedState',
  defaultValue: [],
 });
--- a/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardSortsScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardSortsScopedState.ts
@ -1,8 +1,8 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

 import { Sort } from '../../object-sort-dropdown/types/Sort';

-export const recordBoardSortsScopedState = createScopedState<Sort[]>({
+export const recordBoardSortsScopedState = createStateScopeMap<Sort[]>({
  key: 'recordBoardSortsScopedState',
  defaultValue: [],
 });
--- a/packages/twenty-front/src/modules/object-record/record-board/states/savedOpportunitiesScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-board/states/savedOpportunitiesScopedState.ts
@ -1,7 +1,9 @@
 import { Opportunity } from '@/pipeline/types/Opportunity';
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

-export const savedOpportunitiesScopedState = createScopedState<Opportunity[]>({
-  key: 'savedOpportunitiesScopedState',
-  defaultValue: [],
-});
+export const savedOpportunitiesScopedState = createStateScopeMap<Opportunity[]>(
+  {
+    key: 'savedOpportunitiesScopedState',
+    defaultValue: [],
+  },
+);
--- a/packages/twenty-front/src/modules/object-record/record-board/states/savedPipelineStepsScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-board/states/savedPipelineStepsScopedState.ts
@ -1,7 +1,9 @@
 import { PipelineStep } from '@/pipeline/types/PipelineStep';
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

-export const savedPipelineStepsScopedState = createScopedState<PipelineStep[]>({
+export const savedPipelineStepsScopedState = createStateScopeMap<
+  PipelineStep[]
+>({
  key: 'savedPipelineStepsScopedState',
  defaultValue: [],
 });
--- a/packages/twenty-front/src/modules/object-record/record-board/states/savedRecordBoardCardFieldsScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-board/states/savedRecordBoardCardFieldsScopedState.ts
@ -1,9 +1,9 @@
 import { FieldMetadata } from '@/object-record/field/types/FieldMetadata';
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

 import { BoardFieldDefinition } from '../types/BoardFieldDefinition';

-export const savedRecordBoardCardFieldsScopedState = createScopedState<
+export const savedRecordBoardCardFieldsScopedState = createStateScopeMap<
  BoardFieldDefinition<FieldMetadata>[]
 >({
  key: 'savedRecordBoardCardFieldsScopedState',
--- a/packages/twenty-front/src/modules/object-record/record-board/states/savedRecordBoardColumnsScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-board/states/savedRecordBoardColumnsScopedState.ts
@ -1,8 +1,8 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

 import { BoardColumnDefinition } from '../types/BoardColumnDefinition';

-export const savedRecordBoardColumnsScopedState = createScopedState<
+export const savedRecordBoardColumnsScopedState = createStateScopeMap<
  BoardColumnDefinition[]
 >({
  key: 'savedRecordBoardColumnsScopedState',
--- a/packages/twenty-front/src/modules/object-record/record-board/states/savedRecordsScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-board/states/savedRecordsScopedState.ts
@ -1,7 +1,7 @@
 import { Company } from '@/companies/types/Company';
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

-export const savedRecordsScopedState = createScopedState<Company[]>({
+export const savedRecordsScopedState = createStateScopeMap<Company[]>({
  key: 'savedRecordsScopedState',
  defaultValue: [],
 });
--- a/packages/twenty-front/src/modules/object-record/record-board/states/selectors/hiddenRecordBoardCardFieldsScopedSelector.ts
+++ b/packages/twenty-front/src/modules/object-record/record-board/states/selectors/hiddenRecordBoardCardFieldsScopedSelector.ts
@ -1,22 +1,24 @@
-import { createScopedSelector } from '@/ui/utilities/recoil-scope/utils/createScopedSelector';
+import { createSelectorScopeMap } from '@/ui/utilities/recoil-scope/utils/createSelectorScopeMap';

 import { availableRecordBoardCardFieldsScopedState } from '../availableRecordBoardCardFieldsScopedState';
 import { recordBoardCardFieldsScopedState } from '../recordBoardCardFieldsScopedState';

-export const hiddenRecordBoardCardFieldsScopedSelector = createScopedSelector({
-  key: 'hiddenRecordBoardCardFieldsScopedSelector',
-  get:
-    ({ scopeId }) =>
-    ({ get }) => {
-      const fields = get(recordBoardCardFieldsScopedState({ scopeId }));
-      const fieldKeys = fields.map(({ fieldMetadataId }) => fieldMetadataId);
-      const otherAvailableKeys = get(
-        availableRecordBoardCardFieldsScopedState({ scopeId }),
-      ).filter(({ fieldMetadataId }) => !fieldKeys.includes(fieldMetadataId));
+export const hiddenRecordBoardCardFieldsScopedSelector = createSelectorScopeMap(
+  {
+    key: 'hiddenRecordBoardCardFieldsScopedSelector',
+    get:
+      ({ scopeId }) =>
+      ({ get }) => {
+        const fields = get(recordBoardCardFieldsScopedState({ scopeId }));
+        const fieldKeys = fields.map(({ fieldMetadataId }) => fieldMetadataId);
+        const otherAvailableKeys = get(
+          availableRecordBoardCardFieldsScopedState({ scopeId }),
+        ).filter(({ fieldMetadataId }) => !fieldKeys.includes(fieldMetadataId));

-      return [
-        ...fields.filter((field) => !field.isVisible),
-        ...otherAvailableKeys,
-      ];
-    },
-});
+        return [
+          ...fields.filter((field) => !field.isVisible),
+          ...otherAvailableKeys,
+        ];
+      },
+  },
+);
--- a/packages/twenty-front/src/modules/object-record/record-board/states/selectors/selectedRecordBoardCardIdsScopedSelector.ts
+++ b/packages/twenty-front/src/modules/object-record/record-board/states/selectors/selectedRecordBoardCardIdsScopedSelector.ts
@ -1,10 +1,10 @@
-import { createScopedSelector } from '@/ui/utilities/recoil-scope/utils/createScopedSelector';
+import { createSelectorScopeMap } from '@/ui/utilities/recoil-scope/utils/createSelectorScopeMap';

 import { isRecordBoardCardSelectedFamilyState } from '../isRecordBoardCardSelectedFamilyState';
 import { recordBoardCardIdsByColumnIdFamilyState } from '../recordBoardCardIdsByColumnIdFamilyState';
 import { recordBoardColumnsScopedState } from '../recordBoardColumnsScopedState';

-export const selectedRecordBoardCardIdsScopedSelector = createScopedSelector<
+export const selectedRecordBoardCardIdsScopedSelector = createSelectorScopeMap<
  string[]
 >({
  key: 'selectedRecordBoardCardIdsScopedSelector',
--- a/packages/twenty-front/src/modules/object-record/record-board/states/selectors/visibleRecordBoardCardFieldsScopedSelector.ts
+++ b/packages/twenty-front/src/modules/object-record/record-board/states/selectors/visibleRecordBoardCardFieldsScopedSelector.ts
@ -1,13 +1,14 @@
-import { createScopedSelector } from '@/ui/utilities/recoil-scope/utils/createScopedSelector';
+import { createSelectorScopeMap } from '@/ui/utilities/recoil-scope/utils/createSelectorScopeMap';

 import { recordBoardCardFieldsScopedState } from '../recordBoardCardFieldsScopedState';

-export const visibleRecordBoardCardFieldsScopedSelector = createScopedSelector({
-  key: 'visibleRecordBoardCardFieldsScopedSelector',
-  get:
-    ({ scopeId }) =>
-    ({ get }) =>
-      get(recordBoardCardFieldsScopedState({ scopeId }))
-        .filter((field) => field.isVisible)
-        .sort((a, b) => a.position - b.position),
-});
+export const visibleRecordBoardCardFieldsScopedSelector =
+  createSelectorScopeMap({
+    key: 'visibleRecordBoardCardFieldsScopedSelector',
+    get:
+      ({ scopeId }) =>
+      ({ get }) =>
+        get(recordBoardCardFieldsScopedState({ scopeId }))
+          .filter((field) => field.isVisible)
+          .sort((a, b) => a.position - b.position),
+  });
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/states/isRowSelectedScopedFamilyState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/states/isRowSelectedScopedFamilyState.ts
@ -1,6 +1,6 @@
-import { createScopedFamilyState } from '@/ui/utilities/recoil-scope/utils/createScopedFamilyState';
+import { createFamilyStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap';

-export const isRowSelectedScopedFamilyState = createScopedFamilyState<
+export const isRowSelectedScopedFamilyState = createFamilyStateScopeMap<
  boolean,
  string
 >({
--- a/packages/twenty-front/src/modules/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext.ts
@ -1,10 +1,10 @@
 import { FieldMetadata } from '@/object-record/field/types/FieldMetadata';
-import { ScopedStateKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/ScopedStateKey';
+import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
 import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext';

 import { ColumnDefinition } from '../../types/ColumnDefinition';

-type RecordTableScopeInternalContextProps = ScopedStateKey & {
+type RecordTableScopeInternalContextProps = StateScopeMapKey & {
  onColumnsChange: (columns: ColumnDefinition<FieldMetadata>[]) => void;
 };

--- a/packages/twenty-front/src/modules/object-record/record-table/states/availableTableColumnsScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/states/availableTableColumnsScopedState.ts
@ -1,9 +1,9 @@
 import { FieldMetadata } from '@/object-record/field/types/FieldMetadata';
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

 import { ColumnDefinition } from '../types/ColumnDefinition';

-export const availableTableColumnsScopedState = createScopedState<
+export const availableTableColumnsScopedState = createStateScopeMap<
  ColumnDefinition<FieldMetadata>[]
 >({
  key: 'availableTableColumnsScopedState',
--- a/packages/twenty-front/src/modules/object-record/record-table/states/currentTableCellInEditModePositionScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/states/currentTableCellInEditModePositionScopedState.ts
@ -1,9 +1,9 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

 import { TableCellPosition } from '../types/TableCellPosition';

 export const currentTableCellInEditModePositionScopedState =
-  createScopedState<TableCellPosition>({
+  createStateScopeMap<TableCellPosition>({
    key: 'currentTableCellInEditModePositionScopedState',
    defaultValue: {
      row: 0,
--- a/packages/twenty-front/src/modules/object-record/record-table/states/isRecordTableInitialLoadingScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/states/isRecordTableInitialLoadingScopedState.ts
@ -1,7 +1,7 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

 export const isRecordTableInitialLoadingScopedState =
-  createScopedState<boolean>({
+  createStateScopeMap<boolean>({
    key: 'isRecordTableInitialLoadingScopedState',
    defaultValue: true,
  });
--- a/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusActiveScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusActiveScopedState.ts
@ -1,6 +1,6 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

-export const isSoftFocusActiveScopedState = createScopedState<boolean>({
+export const isSoftFocusActiveScopedState = createStateScopeMap<boolean>({
  key: 'isSoftFocusActiveScopedState',
  defaultValue: false,
 });
--- a/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusOnTableCellScopedFamilyState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusOnTableCellScopedFamilyState.ts
@ -1,11 +1,9 @@
-import { createScopedFamilyState } from '@/ui/utilities/recoil-scope/utils/createScopedFamilyState';
+import { createFamilyStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap';

 import { TableCellPosition } from '../types/TableCellPosition';

-export const isSoftFocusOnTableCellScopedFamilyState = createScopedFamilyState<
-  boolean,
-  TableCellPosition
->({
-  key: 'isSoftFocusOnTableCellScopedFamilyState',
-  defaultValue: false,
-});
+export const isSoftFocusOnTableCellScopedFamilyState =
+  createFamilyStateScopeMap<boolean, TableCellPosition>({
+    key: 'isSoftFocusOnTableCellScopedFamilyState',
+    defaultValue: false,
+  });
--- a/packages/twenty-front/src/modules/object-record/record-table/states/isTableCellInEditModeScopedFamilyState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/states/isTableCellInEditModeScopedFamilyState.ts
@ -1,8 +1,8 @@
-import { createScopedFamilyState } from '@/ui/utilities/recoil-scope/utils/createScopedFamilyState';
+import { createFamilyStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap';

 import { TableCellPosition } from '../types/TableCellPosition';

-export const isTableCellInEditModeScopedFamilyState = createScopedFamilyState<
+export const isTableCellInEditModeScopedFamilyState = createFamilyStateScopeMap<
  boolean,
  TableCellPosition
 >({
--- a/packages/twenty-front/src/modules/object-record/record-table/states/numberOfTableRowsScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/states/numberOfTableRowsScopedState.ts
@ -1,6 +1,6 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

-export const numberOfTableRowsScopedState = createScopedState<number>({
+export const numberOfTableRowsScopedState = createStateScopeMap<number>({
  key: 'numberOfTableRowsScopedState',
  defaultValue: 0,
 });
--- a/packages/twenty-front/src/modules/object-record/record-table/states/objectMetadataConfigScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/states/objectMetadataConfigScopedState.ts
@ -1,8 +1,8 @@
 import { ObjectMetadataConfig } from '@/object-record/record-table/types/ObjectMetadataConfig';
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

 export const objectMetadataConfigScopedState =
-  createScopedState<ObjectMetadataConfig | null>({
+  createStateScopeMap<ObjectMetadataConfig | null>({
    key: 'objectMetadataConfigScopedState',
    defaultValue: null,
  });
--- a/packages/twenty-front/src/modules/object-record/record-table/states/onColumnsChangeScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/states/onColumnsChangeScopedState.ts
@ -1,9 +1,9 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

 import { FieldMetadata } from '../../field/types/FieldMetadata';
 import { ColumnDefinition } from '../types/ColumnDefinition';

-export const onColumnsChangeScopedState = createScopedState<
+export const onColumnsChangeScopedState = createStateScopeMap<
  ((columns: ColumnDefinition<FieldMetadata>[]) => void) | undefined
 >({
  key: 'onColumnsChangeScopedState',
--- a/packages/twenty-front/src/modules/object-record/record-table/states/onEntityCountChangeScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/states/onEntityCountChangeScopedState.ts
@ -1,6 +1,6 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

-export const onEntityCountChangeScopedState = createScopedState<
+export const onEntityCountChangeScopedState = createStateScopeMap<
  ((entityCount: number) => void) | undefined
 >({
  key: 'onEntityCountChangeScopedState',
--- a/packages/twenty-front/src/modules/object-record/record-table/states/resizeFieldOffsetScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/states/resizeFieldOffsetScopedState.ts
@ -1,6 +1,6 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

-export const resizeFieldOffsetScopedState = createScopedState<number>({
+export const resizeFieldOffsetScopedState = createStateScopeMap<number>({
  key: 'resizeFieldOffsetScopedState',
  defaultValue: 0,
 });
--- a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/allRowsSelectedStatusScopedSelector.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/allRowsSelectedStatusScopedSelector.ts
@ -1,4 +1,4 @@
-import { createScopedSelector } from '@/ui/utilities/recoil-scope/utils/createScopedSelector';
+import { createSelectorScopeMap } from '@/ui/utilities/recoil-scope/utils/createSelectorScopeMap';

 import { AllRowsSelectedStatus } from '../../types/AllRowSelectedStatus';
 import { numberOfTableRowsScopedState } from '../numberOfTableRowsScopedState';
@ -6,7 +6,7 @@ import { numberOfTableRowsScopedState } from '../numberOfTableRowsScopedState';
 import { selectedRowIdsScopedSelector } from './selectedRowIdsScopedSelector';

 export const allRowsSelectedStatusScopedSelector =
-  createScopedSelector<AllRowsSelectedStatus>({
+  createSelectorScopeMap<AllRowsSelectedStatus>({
    key: 'allRowsSelectedStatusScopedSelector',
    get:
      ({ scopeId }) =>
--- a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/hiddenTableColumnsScopedSelector.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/hiddenTableColumnsScopedSelector.ts
@ -1,9 +1,9 @@
-import { createScopedSelector } from '@/ui/utilities/recoil-scope/utils/createScopedSelector';
+import { createSelectorScopeMap } from '@/ui/utilities/recoil-scope/utils/createSelectorScopeMap';

 import { availableTableColumnsScopedState } from '../availableTableColumnsScopedState';
 import { tableColumnsScopedState } from '../tableColumnsScopedState';

-export const hiddenTableColumnsScopedSelector = createScopedSelector({
+export const hiddenTableColumnsScopedSelector = createSelectorScopeMap({
  key: 'hiddenTableColumnsScopedSelector',
  get:
    ({ scopeId }) =>
--- a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/numberOfTableColumnsScopedSelector.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/numberOfTableColumnsScopedSelector.ts
@ -1,8 +1,8 @@
-import { createScopedSelector } from '@/ui/utilities/recoil-scope/utils/createScopedSelector';
+import { createSelectorScopeMap } from '@/ui/utilities/recoil-scope/utils/createSelectorScopeMap';

 import { tableColumnsScopedState } from '../tableColumnsScopedState';

-export const numberOfTableColumnsScopedSelector = createScopedSelector({
+export const numberOfTableColumnsScopedSelector = createSelectorScopeMap({
  key: 'numberOfTableColumnsScopedSelector',
  get:
    ({ scopeId }) =>
--- a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/selectedRowIdsScopedSelector.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/selectedRowIdsScopedSelector.ts
@ -1,9 +1,9 @@
-import { createScopedSelector } from '@/ui/utilities/recoil-scope/utils/createScopedSelector';
+import { createSelectorScopeMap } from '@/ui/utilities/recoil-scope/utils/createSelectorScopeMap';

 import { isRowSelectedScopedFamilyState } from '../../record-table-row/states/isRowSelectedScopedFamilyState';
 import { tableRowIdsScopedState } from '../tableRowIdsScopedState';

-export const selectedRowIdsScopedSelector = createScopedSelector<string[]>({
+export const selectedRowIdsScopedSelector = createSelectorScopeMap<string[]>({
  key: 'selectedRowIdsScopedSelector',
  get:
    ({ scopeId }) =>
--- a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/tableColumnsByKeyScopedSelector.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/tableColumnsByKeyScopedSelector.ts
@ -1,10 +1,10 @@
 import { FieldMetadata } from '@/object-record/field/types/FieldMetadata';
-import { createScopedSelector } from '@/ui/utilities/recoil-scope/utils/createScopedSelector';
+import { createSelectorScopeMap } from '@/ui/utilities/recoil-scope/utils/createSelectorScopeMap';

 import { ColumnDefinition } from '../../types/ColumnDefinition';
 import { tableColumnsScopedState } from '../tableColumnsScopedState';

-export const tableColumnsByKeyScopedSelector = createScopedSelector({
+export const tableColumnsByKeyScopedSelector = createSelectorScopeMap({
  key: 'tableColumnsByKeyScopedSelector',
  get:
    ({ scopeId }) =>
--- a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/visibleTableColumnsScopedSelector.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/visibleTableColumnsScopedSelector.ts
@ -1,9 +1,9 @@
-import { createScopedSelector } from '@/ui/utilities/recoil-scope/utils/createScopedSelector';
+import { createSelectorScopeMap } from '@/ui/utilities/recoil-scope/utils/createSelectorScopeMap';

 import { availableTableColumnsScopedState } from '../availableTableColumnsScopedState';
 import { tableColumnsScopedState } from '../tableColumnsScopedState';

-export const visibleTableColumnsScopedSelector = createScopedSelector({
+export const visibleTableColumnsScopedSelector = createSelectorScopeMap({
  key: 'visibleTableColumnsScopedSelector',
  get:
    ({ scopeId }) =>
--- a/packages/twenty-front/src/modules/object-record/record-table/states/softFocusPositionScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/states/softFocusPositionScopedState.ts
@ -1,9 +1,9 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

 import { TableCellPosition } from '../types/TableCellPosition';

 export const softFocusPositionScopedState =
-  createScopedState<TableCellPosition>({
+  createStateScopeMap<TableCellPosition>({
    key: 'softFocusPositionScopedState',
    defaultValue: {
      row: 0,
--- a/packages/twenty-front/src/modules/object-record/record-table/states/tableColumnsScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/states/tableColumnsScopedState.ts
@ -1,9 +1,9 @@
 import { FieldMetadata } from '@/object-record/field/types/FieldMetadata';
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

 import { ColumnDefinition } from '../types/ColumnDefinition';

-export const tableColumnsScopedState = createScopedState<
+export const tableColumnsScopedState = createStateScopeMap<
  ColumnDefinition<FieldMetadata>[]
 >({
  key: 'tableColumnsScopedState',
--- a/packages/twenty-front/src/modules/object-record/record-table/states/tableFiltersScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/states/tableFiltersScopedState.ts
@ -1,8 +1,8 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

 import { Filter } from '../../object-filter-dropdown/types/Filter';

-export const tableFiltersScopedState = createScopedState<Filter[]>({
+export const tableFiltersScopedState = createStateScopeMap<Filter[]>({
  key: 'tableFiltersScopedState',
  defaultValue: [],
 });
--- a/packages/twenty-front/src/modules/object-record/record-table/states/tableLastRowVisibleScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/states/tableLastRowVisibleScopedState.ts
@ -1,6 +1,6 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

-export const tableLastRowVisibleScopedState = createScopedState<boolean>({
+export const tableLastRowVisibleScopedState = createStateScopeMap<boolean>({
  key: 'tableLastRowVisibleScopedState',
  defaultValue: false,
 });
--- a/packages/twenty-front/src/modules/object-record/record-table/states/tableRowIdsScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/states/tableRowIdsScopedState.ts
@ -1,6 +1,6 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

-export const tableRowIdsScopedState = createScopedState<string[]>({
+export const tableRowIdsScopedState = createStateScopeMap<string[]>({
  key: 'tableRowIdsScopedState',
  defaultValue: [],
 });
--- a/packages/twenty-front/src/modules/object-record/record-table/states/tableSortsScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/states/tableSortsScopedState.ts
@ -1,8 +1,8 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

 import { Sort } from '../../object-sort-dropdown/types/Sort';

-export const tableSortsScopedState = createScopedState<Sort[]>({
+export const tableSortsScopedState = createStateScopeMap<Sort[]>({
  key: 'tableSortsScopedState',
  defaultValue: [],
 });
--- a/packages/twenty-front/src/modules/object-record/relation-picker/components/SelectableMenuItemSelect.tsx
+++ b/packages/twenty-front/src/modules/object-record/relation-picker/components/SelectableMenuItemSelect.tsx
@ -22,13 +22,11 @@ export const SelectableMenuItemSelect = ({
  onEntitySelected,
  selectedEntity,
 }: SelectableMenuItemSelectProps) => {
-  const { isSelectedItemIdFamilyState } = useSelectableList(
+  const { isSelectedItemIdSelector } = useSelectableList(
    'single-entity-select-base-list',
  );

-  const isSelectedItemId = useRecoilValue(
-    isSelectedItemIdFamilyState(entity.id),
-  );
+  const isSelectedItemId = useRecoilValue(isSelectedItemIdSelector(entity.id));

  return (
    <StyledSelectableItem itemId={entity.id} key={entity.id}>
--- a/packages/twenty-front/src/modules/object-record/relation-picker/scopes/scope-internal-context/RelationPickerScopeInternalContext.ts
+++ b/packages/twenty-front/src/modules/object-record/relation-picker/scopes/scope-internal-context/RelationPickerScopeInternalContext.ts
@ -1,7 +1,7 @@
-import { ScopedStateKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/ScopedStateKey';
+import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
 import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext';

-type RelationPickerScopeInternalContextProps = ScopedStateKey;
+type RelationPickerScopeInternalContextProps = StateScopeMapKey;

 export const RelationPickerScopeInternalContext =
  createScopeInternalContext<RelationPickerScopeInternalContextProps>();
--- a/packages/twenty-front/src/modules/object-record/relation-picker/states/identifiersMapperScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/relation-picker/states/identifiersMapperScopedState.ts
@ -1,8 +1,8 @@
 import { IdentifiersMapper } from '@/object-record/relation-picker/types/IdentifiersMapper';
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

 export const identifiersMapperScopedState =
-  createScopedState<IdentifiersMapper | null>({
+  createStateScopeMap<IdentifiersMapper | null>({
    key: 'identifiersMapperScopedState',
    defaultValue: null,
  });
--- a/packages/twenty-front/src/modules/object-record/relation-picker/states/relationPickerPreselectedIdScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/relation-picker/states/relationPickerPreselectedIdScopedState.ts
@ -1,6 +1,6 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

-export const relationPickerPreselectedIdScopedState = createScopedState<
+export const relationPickerPreselectedIdScopedState = createStateScopeMap<
  string | undefined
 >({
  key: 'relationPickerPreselectedIdScopedState',
--- a/packages/twenty-front/src/modules/object-record/relation-picker/states/relationPickerSearchFilterScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/relation-picker/states/relationPickerSearchFilterScopedState.ts
@ -1,6 +1,7 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

-export const relationPickerSearchFilterScopedState = createScopedState<string>({
-  key: 'relationPickerSearchFilterScopedState',
-  defaultValue: '',
-});
+export const relationPickerSearchFilterScopedState =
+  createStateScopeMap<string>({
+    key: 'relationPickerSearchFilterScopedState',
+    defaultValue: '',
+  });
--- a/packages/twenty-front/src/modules/object-record/relation-picker/states/searchQueryScopedState.ts
+++ b/packages/twenty-front/src/modules/object-record/relation-picker/states/searchQueryScopedState.ts
@ -1,7 +1,7 @@
 import { SearchQuery } from '@/object-record/relation-picker/types/SearchQuery';
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

-export const searchQueryScopedState = createScopedState<SearchQuery | null>({
+export const searchQueryScopedState = createStateScopeMap<SearchQuery | null>({
  key: 'searchQueryScopedState',
  defaultValue: null,
 });