fix: Collapsible items shift when size changes

packages/react-native-sortables/src/providers/flex/FlexProvider.tsx

@@ -9,8 +9,8 @@ import type {
 import type { SharedProviderProps } from '../shared';
 import { SharedProvider, useOrderUpdater, useStrategyKey } from '../shared';
 import { ContextProviderComposer } from '../utils';
-import type { FlexLayoutProviderProps } from './layout';
-import { FLEX_STRATEGIES, FlexLayoutProvider } from './layout';
+import type { FlexLayoutProviderProps } from './FlexLayoutProvider';
+import { FLEX_STRATEGIES, FlexLayoutProvider } from './FlexLayoutProvider';
 
 type FlexProviderProps = PropsWithChildren<
   SharedProviderProps & {

packages/react-native-sortables/src/providers/flex/index.ts

@@ -1,2 +1,2 @@
+export * from './FlexLayoutProvider';
 export { default as FlexProvider } from './FlexProvider';
-export * from './layout';

packages/react-native-sortables/src/providers/grid/AdditionalCrossOffsetProvider.tsx

@@ -7,7 +7,7 @@ import type { AdditionalCrossOffsetContextType } from '../../types';
 import { calculateSnapOffset } from '../../utils';
 import { useCommonValuesContext, useCustomHandleContext } from '../shared';
 import { createProvider } from '../utils';
-import { calculateActiveItemCrossOffset } from './layout/utils';
+import { calculateActiveItemCrossOffset } from './GridLayoutProvider/utils';
 
 type AdditionalCrossOffsetProviderProps = PropsWithChildren<{
   isVertical: boolean;

packages/react-native-sortables/src/providers/grid/layout/GridLayoutProvider.tsx → packages/react-native-sortables/src/providers/grid/GridLayoutProvider/GridLayoutProvider.tsx

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 import type { SharedValue } from 'react-native-reanimated';
 import { useAnimatedReaction } from 'react-native-reanimated';
 
@@ -8,7 +8,7 @@ import type { GridLayoutContextType } from '../../../types';
 import { useCommonValuesContext, useMeasurementsContext } from '../../shared';
 import { createProvider } from '../../utils';
 import { useAdditionalCrossOffsetContext } from '../AdditionalCrossOffsetProvider';
-import { calculateLayout } from './utils';
+import { calculateLayout, shouldUpdateContainerDimensions } from './utils';
 
 const DEBUG_COLORS = {
   backgroundColor: '#ffa500',
@@ -35,6 +35,7 @@ const { GridLayoutProvider, useGridLayoutContext } = createProvider(
   rowHeight
 }) => {
   const {
+    containerHeight,
     containerWidth,
     indexToKey,
     itemHeights,
@@ -115,8 +116,19 @@ const { GridLayoutProvider, useGridLayoutContext } = createProvider(
 
       // Update item positions
       itemPositions.value = layout.itemPositions;
+
       // Update controlled container dimensions
-      applyControlledContainerDimensions(layout.controlledContainerDimensions); // TODO - adjust container height properly to prevent content jumps when items are collapsed
+      if (
+        shouldUpdateContainerDimensions(
+          isVertical ? containerHeight.value : containerWidth.value,
+          layout.containerCrossSize,
+          !!additionalCrossOffset?.value
+        )
+      ) {
+        applyControlledContainerDimensions({
+          [isVertical ? 'height' : 'width']: layout.containerCrossSize
+        });
+      }
 
       // On the web, animate layout only if parent container is not resized
       // (e.g. skip animation when the browser window is resized)

packages/react-native-sortables/src/providers/grid/GridLayoutProvider/utils/helpers.ts

@@ -0,0 +1,22 @@
+'worklet';
+import { areValuesDifferent } from '../../../../utils';
+
+export const getMainIndex = (index: number, numGroups: number): number =>
+  +index % numGroups;
+
+export const getCrossIndex = (index: number, numGroups: number): number =>
+  Math.floor(+index / numGroups);
+
+export const shouldUpdateContainerDimensions = (
+  currentContainerCrossSize: null | number,
+  calculatedContainerCrossSize: number,
+  hasAdditionalCrossOffset: boolean
+): boolean =>
+  !currentContainerCrossSize ||
+  (areValuesDifferent(
+    currentContainerCrossSize,
+    calculatedContainerCrossSize,
+    1
+  ) &&
+    (!hasAdditionalCrossOffset ||
+      calculatedContainerCrossSize > currentContainerCrossSize));

packages/react-native-sortables/src/providers/grid/layout/utils/layout.ts → packages/react-native-sortables/src/providers/grid/GridLayoutProvider/utils/layout.ts

@@ -76,11 +76,9 @@ export const calculateLayout = (
   const lastCrossOffset = crossAxisOffsets[crossAxisOffsets.length - 1];
 
   return {
-    controlledContainerDimensions: {
-      [isVertical ? 'height' : 'width']: lastCrossOffset
-        ? Math.max(lastCrossOffset - gaps.cross, 0)
-        : 0
-    },
+    containerCrossSize: lastCrossOffset
+      ? Math.max(lastCrossOffset - gaps.cross, 0)
+      : 0,
     crossAxisOffsets,
     itemPositions
   };

packages/react-native-sortables/src/providers/grid/GridProvider.tsx

@@ -7,8 +7,8 @@ import type { SharedProviderProps } from '../shared';
 import { SharedProvider, useOrderUpdater, useStrategyKey } from '../shared';
 import { ContextProviderComposer } from '../utils';
 import { AdditionalCrossOffsetProvider } from './AdditionalCrossOffsetProvider';
-import type { GridLayoutProviderProps } from './layout';
-import { GRID_STRATEGIES, GridLayoutProvider } from './layout';
+import type { GridLayoutProviderProps } from './GridLayoutProvider';
+import { GRID_STRATEGIES, GridLayoutProvider } from './GridLayoutProvider';
 
 type GridProviderProps = PropsWithChildren<
   GridLayoutProviderProps &

packages/react-native-sortables/src/providers/grid/index.ts

@@ -1,2 +1,2 @@
+export * from './GridLayoutProvider';
 export { default as GridProvider } from './GridProvider';
-export * from './layout';

packages/react-native-sortables/src/types/layout/grid.ts

@@ -1,4 +1,4 @@
-import type { Coordinate, Dimensions, ItemSizes, Vector } from './shared';
+import type { Coordinate, ItemSizes, Vector } from './shared';
 
 export type GridLayoutProps = {
   gaps: {
@@ -15,7 +15,7 @@ export type GridLayoutProps = {
 export type GridLayout = {
   itemPositions: Record<string, Vector>;
   crossAxisOffsets: Array<number>;
-  controlledContainerDimensions: Partial<Dimensions>;
+  containerCrossSize: number;
 };
 
 export type AdditionalCrossOffsetProps = {