docs: Add updates from the recent release (#386)

## Description

This PR adds docs updates from the recent release of the library.

Author: MatiPl01

packages/docs/docs/flex/props.mdx

@@ -766,34 +766,33 @@ type DragStartCallback = (params: DragStartParams) => void;
 type DragStartParams = {
   key: string;
   fromIndex: number;
+  indexToKey: Array<string>;
+  keyToIndex: Record<string, number>;
 };
 ```
 
 </details>
 
 ---
 
-### onDragEnd
+### onDragMove
 
-Called when the drag gesture ends. Data passed to the callback is the new order of the items.
+Called when the drag gesture moves.
 
-| type                          | default | required |
-| ----------------------------- | ------- | -------- |
-| `SortableFlexDragEndCallback` | NO      | NO       |
+| type               | default | required |
+| ------------------ | ------- | -------- |
+| `DragMoveCallback` | NO      | NO       |
 
 <details>
   <summary>Type definitions</summary>
 
 ```tsx
-type SortableFlexDragEndCallback = (params: SortableFlexDragEndParams) => void;
+type DragMoveCallback = (params: DragMoveParams) => void;
 
-type SortableFlexDragEndParams = {
+type DragMoveParams = {
   key: string;
   fromIndex: number;
-  toIndex: number;
-  indexToKey: Array<string>;
-  keyToIndex: Record<string, number>;
-  order: <I>(data: Array<I>) => Array<I>; // returns new array with items in the new order
+  touchData: TouchData;
 };
 ```
 
@@ -834,24 +833,54 @@ type OrderChangeParams = {
 
 ---
 
-### onDragMove
+### onDragEnd
 
-Called when the drag gesture moves.
+Called when the drag gesture ends. Data passed to the callback is the new order of the items.
 
-| type               | default | required |
-| ------------------ | ------- | -------- |
-| `DragMoveCallback` | NO      | NO       |
+| type                          | default | required |
+| ----------------------------- | ------- | -------- |
+| `SortableFlexDragEndCallback` | NO      | NO       |
 
 <details>
   <summary>Type definitions</summary>
 
 ```tsx
-type DragMoveCallback = (params: DragMoveParams) => void;
+type SortableFlexDragEndCallback = (params: SortableFlexDragEndParams) => void;
 
-type DragMoveParams = {
+type SortableFlexDragEndParams = {
   key: string;
   fromIndex: number;
-  touchData: TouchData;
+  toIndex: number;
+  indexToKey: Array<string>;
+  keyToIndex: Record<string, number>;
+  order: <I>(data: Array<I>) => Array<I>; // returns new array with items in the new order
+};
+```
+
+</details>
+
+---
+
+### onActiveItemDropped
+
+Called when the active item is dropped (the animation to the target item position is completed).
+
+| type                        | default | required |
+| --------------------------- | ------- | -------- |
+| `ActiveItemDroppedCallback` | NO      | NO       |
+
+<details>
+  <summary>Type definitions</summary>
+
+```tsx
+type ActiveItemDroppedCallback = (params: ActiveItemDroppedParams) => void;
+
+type ActiveItemDroppedParams = {
+  key: string;
+  fromIndex: number;
+  toIndex: number;
+  indexToKey: Array<string>;
+  keyToIndex: Record<string, number>;
 };
 ```
 

…s/docs/docs/grid/examples/touchables.mdx …es/docs/docs/grid/examples/touchable.mdxpackages/docs/docs/grid/examples/touchables.mdx renamed to packages/docs/docs/grid/examples/touchable.mdx packages/docs/docs/grid/examples/touchables.mdx renamed to packages/docs/docs/grid/examples/touchable.mdx

@@ -3,23 +3,17 @@ sidebar_position: 5
 description: ''
 ---
 
-# Touchables
+# Touchable
 
 ## Description
 
-This example shows why touchable components exported from this library are useful whe you need to **properly detect press events** on **components nested inside** the sortable component item.
-
-:::info
-
-The **usage is the same** for **all touchable components exported from this library**. To see more information about other touchable components, please **refer to the [Touchables](/helper-components/touchables) page**.
-
-:::
+This example shows why the [Sortable.Touchable](/helper-components/touchable) component is useful when you need to **properly detect press events** on **components nested inside** the sortable component item (more precisely, nested within the part of the item that detects the drag gesture - this might be the entire item or just a part of it if the custom handle, like [Sortable.Handle](/helper-components/handle), is used).
 
 ## Source Code
 
 ```tsx
 import { useCallback, useState } from 'react';
-import { Text, View, StyleSheet } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 import type { SortableGridRenderItem } from 'react-native-sortables';
 import Sortable from 'react-native-sortables';
 
@@ -32,11 +26,11 @@ export default function Example() {
     ({ item }) => (
       <View style={styles.card}>
         <Text style={styles.text}>{item}</Text>
-        <Sortable.Pressable
+        <Sortable.Touchable
           style={styles.deleteButton}
-          onPress={() => setData(prev => prev.filter(i => i !== item))}>
+          onTap={() => setData(prev => prev.filter(i => i !== item))}>
           <Text style={styles.text}>Delete</Text>
-        </Sortable.Pressable>
+        </Sortable.Touchable>
       </View>
     ),
     []
@@ -45,36 +39,36 @@ export default function Example() {
   return (
     <View style={styles.container}>
       <Sortable.Grid
+        columnGap={10}
         columns={2}
         data={data}
         renderItem={renderItem}
         rowGap={10}
-        columnGap={10}
       />
     </View>
   );
 }
 
 const styles = StyleSheet.create({
-  container: {
-    padding: 10
-  },
   card: {
+    alignItems: 'center',
     backgroundColor: '#36877F',
+    borderRadius: 10,
+    gap: 10,
     height: 100,
+    justifyContent: 'center'
+  },
+  container: {
+    padding: 10
+  },
+  deleteButton: {
+    backgroundColor: '#6AA67C',
     borderRadius: 10,
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: 10
+    padding: 10
   },
   text: {
     color: 'white',
     fontWeight: 'bold'
-  },
-  deleteButton: {
-    backgroundColor: '#6AA67C',
-    padding: 10,
-    borderRadius: 10
   }
 });
 ```
@@ -83,11 +77,11 @@ const styles = StyleSheet.create({
 
 You can see that the `Pressable` component from React Native **still detects the press event even when the item started being dragged**, which is not the desired behavior.
 
-On the contrary, the `Sortable.Pressable` component from this library **properly handles the press event** and grid items are removed only when the **Delete** button is **pressed, not when the item is dragged**.
+On the contrary, the `Sortable.Touchable` component from this library **properly handles the press event** and grid items are removed only when the **Delete** button is **pressed, not when the item is dragged**.
 
 import correctVideo from '@site/static/video/grid-touchables-correct.mp4';
 import incorrectVideo from '@site/static/video/grid-touchables-incorrect.mp4';
 
-| React Native's `Pressable`                                                                    | `Sortable.Pressable`                                                                        |
+| React Native's `Pressable`                                                                    | `Sortable.Touchable`                                                                        |
 | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
 | <video autoPlay loop muted width="100%" style={{ maxWidth: '300px' }} src={incorrectVideo} /> | <video autoPlay loop muted width="100%" style={{ maxWidth: '300px' }} src={correctVideo} /> |

packages/docs/docs/grid/props.mdx

@@ -648,36 +648,33 @@ type DragStartCallback = (params: DragStartParams) => void;
 type DragStartParams = {
   key: string;
   fromIndex: number;
+  indexToKey: Array<string>;
+  keyToIndex: Record<string, number>;
 };
 ```
 
 </details>
 
 ---
 
-### onDragEnd
+### onDragMove
 
-Called when the drag gesture ends. Data passed to the callback is sorted according to the new order of the items. If the order of items is not changed, the same data array as the one passed to the `data` prop of the grid is passed in the callback params.
+Called when the drag gesture moves.
 
-| type                             | default | required |
-| -------------------------------- | ------- | -------- |
-| `SortableGridDragEndCallback<T>` | NO      | NO       |
+| type               | default | required |
+| ------------------ | ------- | -------- |
+| `DragMoveCallback` | NO      | NO       |
 
 <details>
   <summary>Type definitions</summary>
 
 ```tsx
-type SortableGridDragEndCallback<T> = (
-  params: SortableGridDragEndParams<T>
-) => void;
+type DragMoveCallback = (params: DragMoveParams) => void;
 
-type SortableGridDragEndParams<T> = {
+type DragMoveParams = {
   key: string;
   fromIndex: number;
-  toIndex: number;
-  indexToKey: Array<string>;
-  keyToIndex: Record<string, number>;
-  data: Array<T>;
+  touchData: TouchData;
 };
 ```
 
@@ -718,24 +715,56 @@ type OrderChangeParams = {
 
 ---
 
-### onDragMove
+### onDragEnd
 
-Called when the drag gesture moves.
+Called when the drag gesture ends. Data passed to the callback is sorted according to the new order of the items. If the order of items is not changed, the same data array as the one passed to the `data` prop of the grid is passed in the callback params.
 
-| type               | default | required |
-| ------------------ | ------- | -------- |
-| `DragMoveCallback` | NO      | NO       |
+| type                             | default | required |
+| -------------------------------- | ------- | -------- |
+| `SortableGridDragEndCallback<T>` | NO      | NO       |
 
 <details>
   <summary>Type definitions</summary>
 
 ```tsx
-type DragMoveCallback = (params: DragMoveParams) => void;
+type SortableGridDragEndCallback<T> = (
+  params: SortableGridDragEndParams<T>
+) => void;
 
-type DragMoveParams = {
+type SortableGridDragEndParams<T> = {
   key: string;
   fromIndex: number;
-  touchData: TouchData;
+  toIndex: number;
+  indexToKey: Array<string>;
+  keyToIndex: Record<string, number>;
+  data: Array<T>;
+};
+```
+
+</details>
+
+---
+
+### onActiveItemDropped
+
+Called when the active item is dropped (the animation to the target item position is completed).
+
+| type                        | default | required |
+| --------------------------- | ------- | -------- |
+| `ActiveItemDroppedCallback` | NO      | NO       |
+
+<details>
+  <summary>Type definitions</summary>
+
+```tsx
+type ActiveItemDroppedCallback = (params: ActiveItemDroppedParams) => void;
+
+type ActiveItemDroppedParams = {
+  key: string;
+  fromIndex: number;
+  toIndex: number;
+  indexToKey: Array<string>;
+  keyToIndex: Record<string, number>;
 };
 ```