feat: better sortable

Author: sadmann7

docs/__registry__/icons.tsx

@@ -357,17 +357,17 @@ export const Index: Record<string, any> = {
       subcategory: "",
       chunks: []
     },
-    "sortable-grip-demo": {
-      name: "sortable-grip-demo",
+    "sortable-handle-demo": {
+      name: "sortable-handle-demo",
       description: "",
       type: "registry:example",
       registryDependencies: ["button","table"],
       files: [{
-        path: "registry/default/example/sortable-grip-demo.tsx",
+        path: "registry/default/example/sortable-handle-demo.tsx",
         type: "registry:example",
         target: ""
       }],
-      component: React.lazy(() => import("@/registry/default/example/sortable-grip-demo.tsx")),
+      component: React.lazy(() => import("@/registry/default/example/sortable-handle-demo.tsx")),
       source: "",
       category: "",
       subcategory: "",

docs/__registry__/index.tsx

@@ -51,7 +51,7 @@ import * as Sortable from "@/components/ui/sortable";
 <Sortable.Root>
   <Sortable.Content>
     <Sortable.Item >
-      <Sortable.ItemGrip />
+      <Sortable.ItemHandle />
     </Sortable.Item>
     <Sortable.Item />
   </Sortable.Content>
@@ -125,13 +125,13 @@ Individual sortable item component.
   ]}
 />
 
-### ItemGrip
+### ItemHandle
 
 A button component that acts as a drag handle for sortable items.
 
 <AutoTypeTable
   path="./types/docs/sortable.ts"
-  name="ItemGripProps"
+  name="ItemHandleProps"
 />
 
 <DataAttributesTable

docs/content/docs/components/sortable.mdx

@@ -0,0 +1,27 @@
+/**
+ * @see https://github.com/radix-ui/primitives/blob/main/packages/react/use-callback-ref/src/useCallbackRef.tsx
+ */
+
+import * as React from "react";
+
+/**
+ * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a
+ * prop or avoid re-executing effects when passed as a dependency
+ */
+function useCallbackRef<T extends (...args: never[]) => unknown>(
+  callback: T | undefined,
+): T {
+  const callbackRef = React.useRef(callback);
+
+  React.useEffect(() => {
+    callbackRef.current = callback;
+  });
+
+  // https://github.com/facebook/react/issues/19240
+  return React.useMemo(
+    () => ((...args) => callbackRef.current?.(...args)) as T,
+    [],
+  );
+}
+
+export { useCallbackRef };