feat: Collapsible items support

example/app/src/examples/SortableGrid/miscellaneous/CollapsibleItemsExample.tsx

@@ -0,0 +1,73 @@
+import { useCallback, useState } from 'react';
+import { StyleSheet } from 'react-native';
+import Animated, {
+  LinearTransition,
+  useAnimatedRef
+} from 'react-native-reanimated';
+import type { SortableGridRenderItem } from 'react-native-sortables';
+import Sortable from 'react-native-sortables';
+
+import { Screen } from '@/components';
+import { IS_WEB } from '@/constants';
+import { colors, radius, sizes, spacing, style, text } from '@/theme';
+
+const DATA = Array.from({ length: 5 }, (_, index) => `Item ${index + 1}`);
+
+export default function CollapsibleItemsExample() {
+  const [collapsed, setCollapsed] = useState(false);
+  const scrollableRef = useAnimatedRef<Animated.ScrollView>();
+
+  // TODO - fix portal case
+  const renderItem = useCallback<SortableGridRenderItem<string>>(
+    ({ item }) => (
+      <Animated.View
+        layout={LinearTransition.delay(40)}
+        style={[styles.card, { height: collapsed ? sizes.lg : sizes.xxxl }]}>
+        <Animated.Text layout={LinearTransition.delay(40)} style={styles.text}>
+          {item}
+        </Animated.Text>
+      </Animated.View>
+    ),
+    [collapsed]
+  );
+
+  return (
+    <Screen>
+      <Animated.ScrollView
+        contentContainerStyle={[styles.container, IS_WEB && style.webContent]}
+        ref={scrollableRef}>
+        <Sortable.Grid
+          activeItemScale={1.05}
+          columnGap={10}
+          data={DATA}
+          overDrag='vertical'
+          overflow='visible'
+          renderItem={renderItem}
+          rowGap={10}
+          scrollableRef={scrollableRef} // TODO - add correct auto scroll support for collapsible items
+          autoAdjustOffsetDuringDrag
+          onActiveItemDropped={() => setCollapsed(false)}
+          onDragStart={() => setCollapsed(true)}
+        />
+      </Animated.ScrollView>
+    </Screen>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    alignItems: 'center',
+    backgroundColor: '#36877F',
+    borderRadius: radius.md,
+    height: sizes.xl,
+    justifyContent: 'center'
+  },
+  container: {
+    padding: spacing.md,
+    paddingBottom: 120
+  },
+  text: {
+    ...text.label2,
+    color: colors.white
+  }
+});

example/app/src/examples/SortableGrid/miscellaneous/index.ts

@@ -1 +1,2 @@
+export { default as CollapsibleItemsExample } from './CollapsibleItemsExample';
 export { default as StaggerAnimationExample } from './StaggerAnimationExample';

example/app/src/examples/navigation/routes.ts

@@ -76,6 +76,10 @@ const routes: Routes = {
             StaggerAnimation: {
               Component: SortableGrid.miscellaneous.StaggerAnimationExample,
               name: 'Stagger Animation'
+            },
+            CollapsibleItems: {
+              Component: SortableGrid.miscellaneous.CollapsibleItemsExample,
+              name: 'Collapsible Items'
             }
           }
         }

packages/react-native-sortables/src/components/SortableGrid.tsx

@@ -27,6 +27,7 @@ import { type DraggableViewProps } from './shared';
 function SortableGrid<I>(props: SortableGridProps<I>) {
   const {
     rest: {
+      autoAdjustOffsetDuringDrag,
       columnGap,
       columns,
       data,
@@ -92,6 +93,7 @@ function SortableGrid<I>(props: SortableGridProps<I>) {
   return (
     <GridProvider
       {...sharedProps}
+      autoAdjustOffsetDuringDrag={autoAdjustOffsetDuringDrag}
       columnGap={columnGapValue}
       controlledContainerDimensions={controlledContainerDimensions}
       controlledItemDimensions={controlledItemDimensions}

packages/react-native-sortables/src/constants/props.ts

@@ -63,6 +63,7 @@ export const DEFAULT_SHARED_PROPS = {
 } satisfies DefaultSharedProps;
 
 export const DEFAULT_SORTABLE_GRID_PROPS = {
+  autoAdjustOffsetDuringDrag: false,
   columnGap: 0,
   columns: 1,
   keyExtractor: defaultKeyExtractor,

packages/react-native-sortables/src/helperTypes.ts

@@ -6,6 +6,8 @@ export type AnyFunction = (...args: Array<any>) => any;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type AnyRecord = Record<string, any>;
 
+export type EmptyRecord = Record<string, never>;
+
 export type Simplify<T> = {
   [K in keyof T]: T[K];
 } & {};

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

@@ -16,13 +16,13 @@ export {
   useCommonValuesContext,
   useCustomHandleContext,
   useDragContext,
-  useFlexLayoutContext,
-  useGridLayoutContext,
   useIsInPortalOutlet,
   useMeasurementsContext,
   usePortalContext,
   useZoneContext
 } from './providers';
+export { useFlexLayoutContext } from './providers/flex';
+export { useGridLayoutContext } from './providers/grid';
 export type {
   ActiveItemDroppedCallback,
   ActiveItemDroppedParams,

packages/react-native-sortables/src/integrations/reanimated/hooks/useAnimatedDebounce.ts

@@ -16,7 +16,13 @@ export default function useAnimatedDebounce() {
     };
   }, [updateTimeoutId]);
 
-  const debounce = useCallback(
+  const cancel = useCallback(() => {
+    'worklet';
+    clearAnimatedTimeout(updateTimeoutId.value);
+    updateTimeoutId.value = -1;
+  }, [updateTimeoutId]);
+
+  const schedule = useCallback(
     (callback: () => void, timeout: number) => {
       'worklet';
       if (updateTimeoutId.value !== -1) {
@@ -30,5 +36,5 @@ export default function useAnimatedDebounce() {
     [updateTimeoutId]
   );
 
-  return debounce;
+  return { cancel, schedule };
 }

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

@@ -7,11 +7,7 @@ import type {
   SortableFlexStrategy
 } from '../../types';
 import type { SharedProviderProps } from '../shared';
-import {
-  OrderUpdaterComponent,
-  SharedProvider,
-  useStrategyKey
-} from '../shared';
+import { SharedProvider, useOrderUpdater, useStrategyKey } from '../shared';
 import { ContextProviderComposer } from '../utils';
 import type { FlexLayoutProviderProps } from './layout';
 import { FLEX_STRATEGIES, FlexLayoutProvider } from './layout';
@@ -28,13 +24,14 @@ type FlexProviderProps = PropsWithChildren<
 
 export default function FlexProvider({
   children,
-  reorderTriggerOrigin,
   strategy,
   styleProps,
   ...sharedProps
 }: FlexProviderProps) {
   const providers = [
+    // Provider with common sortables functionality
     <SharedProvider {...sharedProps} />,
+    // Provider with flex layout calculations
     <FlexLayoutProvider
       {...styleProps}
       itemsCount={sharedProps.itemKeys.length}
@@ -43,13 +40,19 @@ export default function FlexProvider({
 
   return (
     <ContextProviderComposer providers={providers}>
-      <OrderUpdaterComponent
-        key={useStrategyKey(strategy)}
-        predefinedStrategies={FLEX_STRATEGIES}
-        strategy={strategy}
-        triggerOrigin={reorderTriggerOrigin}
-      />
-      {children}
+      <FlexProviderInner key={useStrategyKey(strategy)} strategy={strategy}>
+        {children}
+      </FlexProviderInner>
     </ContextProviderComposer>
   );
 }
+
+type FlexProviderInnerProps = PropsWithChildren<{
+  strategy: SortableFlexStrategy;
+}>;
+
+function FlexProviderInner({ children, strategy }: FlexProviderInnerProps) {
+  useOrderUpdater(strategy, FLEX_STRATEGIES);
+
+  return <>{children}</>;
+}

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

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

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

@@ -3,10 +3,10 @@ import { useAnimatedReaction, useDerivedValue } from 'react-native-reanimated';
 
 import { useMutableValue } from '../../../../../integrations/reanimated';
 import type {
-  ControlledSizes,
   Coordinate,
   Dimension,
   FlexLayout,
+  ItemSizes,
   SortStrategyFactory
 } from '../../../../../types';
 import {
@@ -53,7 +53,7 @@ const useInsertStrategy: SortStrategyFactory = () => {
   let mainDimension: Dimension;
   let crossDimension: Dimension;
   let mainGap: SharedValue<number>;
-  let mainItemSizes: SharedValue<ControlledSizes>;
+  let mainItemSizes: SharedValue<ItemSizes>;
 
   if (isRow) {
     mainCoordinate = 'x';

packages/react-native-sortables/src/providers/flex/layout/updates/insert/utils.ts

@@ -1,5 +1,5 @@
 'worklet';
-import type { ControlledSizes } from '../../../../../types';
+import type { ItemSizes } from '../../../../../types';
 import { reorderInsert, resolveDimension } from '../../../../../utils';
 
 export type ItemGroupSwapProps = {
@@ -9,7 +9,7 @@ export type ItemGroupSwapProps = {
   groupSizeLimit: number;
   indexToKey: Array<string>;
   keyToIndex: Record<string, number>;
-  mainItemSizes: ControlledSizes;
+  mainItemSizes: ItemSizes;
   itemGroups: Array<Array<string>>;
   mainGap: number;
   fixedKeys: Record<string, boolean> | undefined;
@@ -35,7 +35,7 @@ const getGroupItemIndex = (
 
 export const getTotalGroupSize = (
   group: Array<string>,
-  mainItemSizes: ControlledSizes,
+  mainItemSizes: ItemSizes,
   gap: number
 ) => {
   const sizesSum = group.reduce(

packages/react-native-sortables/src/providers/flex/layout/utils/debug.ts

@@ -1,8 +1,8 @@
 import type { DebugRectUpdater } from '../../../../debug';
 import type {
-  ControlledSizes,
   FlexDirection,
   FlexLayout,
+  ItemSizes,
   Vector
 } from '../../../../types';
 import { resolveDimension } from '../../../../utils';
@@ -17,8 +17,8 @@ export const updateLayoutDebugRects = (
   layout: FlexLayout,
   debugCrossAxisGapRects: Array<DebugRectUpdater>,
   debugMainAxisGapRects: Array<DebugRectUpdater>,
-  itemWidths: ControlledSizes,
-  itemHeights: ControlledSizes
+  itemWidths: ItemSizes,
+  itemHeights: ItemSizes
 ) => {
   'worklet';
   const isRow = flexDirection.startsWith('row');

packages/react-native-sortables/src/providers/flex/layout/utils/layout.ts

@@ -3,11 +3,11 @@ import { IS_WEB } from '../../../../constants';
 import type {
   AlignContent,
   AlignItems,
-  ControlledSizes,
   Direction,
   FlexAlignments,
   FlexLayout,
   FlexLayoutProps,
+  ItemSizes,
   JustifyContent,
   Vector
 } from '../../../../types';
@@ -17,8 +17,8 @@ type AxisDirections = { cross: Direction; main: Direction };
 
 const createGroups = (
   indexToKey: Array<string>,
-  mainItemSizes: ControlledSizes,
-  crossItemSizes: ControlledSizes,
+  mainItemSizes: ItemSizes,
+  crossItemSizes: ItemSizes,
   gap: number,
   groupMainSizeLimit: number
 ): null | {
@@ -140,8 +140,8 @@ const calculateAlignment = (
 const handleLayoutCalculation = (
   groups: Array<Array<string>>,
   crossAxisGroupSizes: Array<number>,
-  mainItemSizes: ControlledSizes,
-  crossItemSizes: ControlledSizes,
+  mainItemSizes: ItemSizes,
+  crossItemSizes: ItemSizes,
   gaps: FlexLayoutProps['gaps'],
   axisDirections: AxisDirections,
   { alignContent, alignItems, justifyContent }: FlexAlignments,