Merge remote-tracking branch 'refs/remotes/origin/changeset-release/e…

…xperimental' into changeset-release/experimental-vue

apps/docs/react/hooks/use-draggable.mdx

@@ -7,17 +7,13 @@ icon: 'bullseye-pointer'
 import {Story} from '/snippets/story.mdx';
 import {CodeSandbox} from '/snippets/code.mdx';
 
-<Story id="react-draggable--example" height="125" hero />
-
-## Usage
-
-The `useDraggable` hook requires an `id` and accepts all the same options as the `Draggable` class. Refer to the [Input](#input) section below for more information.
-
 <CodeSandbox files={{
   'App.js': {code: app, hidden: true},
   'Draggable.js': {code, active: true},
   'styles.css': {code: styles, hidden: true},
-}} height={220} previewHeight={140} />
+}} height={220} previewHeight={200} hero />
+
+The `useDraggable` hook requires an `id` and accepts all the same options as the `Draggable` class. Refer to the [Input](#input) section below for more information.
 
 ## API Reference
 

apps/docs/sandpack.js

@@ -70,22 +70,6 @@ class SandpackElement extends HTMLElement {
       files = JSON.parse(this.getAttribute("files"));
     } catch {}
 
-    const styles = files['styles.css'];
-    const backgroundColor = document.documentElement.classList.contains('dark')
-      ? '#11131b'
-      : '#fafafd';
-
-    if (styles) {
-      const background = \`html {background-color: \${backgroundColor};}\`;
-
-      files['styles.css'] = typeof styles == 'string' ? {
-        code: \`\${background} \${styles}\`,
-      } : {
-        ...styles,
-        code: \`\${background} \${styles.code}\`,
-      };
-    }
-
     const sandpackComponent = React.createElement(Sandpack, {
       files,
       template: "react",
@@ -107,7 +91,7 @@ class SandpackElement extends HTMLElement {
 }
 
 customElements.define("code-sandbox", SandpackElement);
-`.replace(/\n/g, ' ');
+`;
 
 script.type = 'module';
 script.innerText = code;

apps/docs/snippets/code.mdx

@@ -1,9 +1,9 @@
-export const CodeSandbox = ({ files, height, previewHeight, showTabs }) => {
+export const CodeSandbox = ({ files, height, previewHeight, showTabs, hero }) => {
   const Element = 'code-sandbox';
 
   return (
     <Element
-      class="not-prose"
+      class={`not-prose${hero ? ' hero' : ''}`}
       files={JSON.stringify(files)}
       height={height}
       style={previewHeight ? {'--preview-height': `${previewHeight}px`} : undefined}

apps/docs/style.css

@@ -117,6 +117,11 @@ kbd {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+html:not(.dark) .hero .sp-layout {
+  box-shadow: none;
+}
+
+
 .sp-tabs-scrollable-container {
   padding-left: 0;
   padding-right: 0;
@@ -131,6 +136,10 @@ kbd {
   border-color: rgb(var(--primary-light));
 }
 
+.sp-layout {
+  gap: 0px;
+}
+
 .dark .sp-layout {
   --tw-ring-color: rgb(var(--gray-800) / 0.5);
 }
@@ -140,6 +149,10 @@ kbd {
   order: 1;
 }
 
+.sp-preview {
+  flex-basis: 100% !important;
+}
+
 .sp-preview, .sp-preview-container {
   background-color: transparent;
 }
@@ -151,3 +164,57 @@ kbd {
 code-sandbox[style*="--preview-height"] .sp-preview {
   height: var(--preview-height) !important;
 }
+
+.sp-preview-container, .sp-overlay {
+  background-color: #fafafd;
+}
+
+.dark .sp-preview-container, .dark .sp-overlay {
+  background-color: #11131b;
+}
+
+.sp-preview-container iframe {
+  background: transparent;
+  color-scheme: normal;
+}
+
+.hero .sp-preview-container, .hero .sp-overlay {
+  --gradient: linear-gradient(65deg, #56fff420, #001AFF20, #5F6AF220, #F25FD020, #56FFF520, #F25FD020, #001AFF20, #56fff420);
+  background-image: var(--gradient);
+  animation: background 16s linear infinite;
+  animation-direction: alternate;
+  background-size: 600% 100%;
+}
+
+.dark .hero .sp-preview-container, .dark .hero .sp-overlay {
+  --gradient: linear-gradient(65deg, #56fff480, #001AFF80, #5F6AF280, #F25FD080, #56FFF580, #F25FD080, #001AFF80, #56fff480);
+  animation: gradient 16s linear infinite;
+}
+
+
+@keyframes gradient {
+  0% {
+    background-color: #ff0000;
+  }
+  25% {
+    background-color: #7f00ff;
+  }
+  50% {
+    background-color: #00affa;
+  }
+  75% {
+    background-color: #00f594;
+  }
+  100% {
+    background-color: #ff0000
+  }
+}
+
+@keyframes background-position {
+  0% {
+    background-position: 0% 50%;
+  }
+  100% {
+    background-position: 100% 50%;
+  }
+}

apps/stories/.storybook/main.ts

@@ -1,22 +1,19 @@
 import {dirname, join} from 'path';
-import {mergeConfig} from 'vite';
+import {mergeConfig, optimizeDeps} from 'vite';
 
 export default {
-  stories: ['../stories/**/*.stories.tsx'],
-
+  stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.tsx'],
   addons: [
     getAbsolutePath('@storybook/addon-links'),
     getAbsolutePath('@storybook/addon-essentials'),
     getAbsolutePath('storybook-dark-mode'),
   ],
-
   framework: {
     name: getAbsolutePath('@storybook/react-vite'),
     options: {
       strictMode: true,
     },
   },
-
   async viteFinal(config, {configType}) {
     // customize the Vite config here
     return mergeConfig(config, {
@@ -28,11 +25,8 @@ export default {
       },
     });
   },
-
-  docs: {},
-
-  typescript: {
-    reactDocgen: 'react-docgen-typescript',
+  docs: {
+    autodocs: 'tag',
   },
 };
 

apps/stories/package.json

@@ -13,8 +13,8 @@
   "dependencies": {
     "@dnd-kit/abstract": "*",
     "@dnd-kit/dom": "*",
-    "@dnd-kit/helpers": "*",
     "@dnd-kit/react": "*",
+    "@dnd-kit/helpers": "*",
     "@tanstack/react-virtual": "^3.0.0-beta.54",
     "clipboard": "^2.0.11",
     "prismjs": "^1.29.0",
@@ -26,19 +26,16 @@
   "devDependencies": {
     "@dnd-kit/eslint-config": "*",
     "@measured/auto-frame-component": "^0.1.7",
-    "@storybook/addon-actions": "^8.4.1",
-    "@storybook/addon-docs": "^8.4.1",
-    "@storybook/addon-essentials": "^8.4.1",
-    "@storybook/addon-links": "^8.4.1",
-    "@storybook/manager-api": "^8.4.1",
-    "@storybook/react": "^8.4.1",
-    "@storybook/react-vite": "^8.4.1",
-    "@storybook/theming": "^8.4.1",
-    "@storybook/types": "^8.4.1",
+    "@storybook/addon-actions": "^8.1.5",
+    "@storybook/addon-docs": "^8.1.5",
+    "@storybook/addon-essentials": "^8.1.5",
+    "@storybook/addon-links": "^8.1.5",
+    "@storybook/react": "^8.1.5",
+    "@storybook/react-vite": "^8.1.5",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.56.0",
     "serve": "^14.2.1",
-    "storybook": "^8.4.1",
+    "storybook": "^8.1.5",
     "storybook-dark-mode": "^4.0.1",
     "typescript": "^5.5.2",
     "vite": "^5.1.1"

packages/dom/src/core/plugins/feedback/Feedback.ts

@@ -11,12 +11,10 @@ import {
   Styles,
   parseTranslate,
   ProxiedElements,
-  isSafari,
   getWindow,
   generateUniqueId,
   getDocument,
   getFrameTransform,
-  type Transform,
   DOMRectangle,
   getFrameElement,
 } from '@dnd-kit/dom/utilities';
@@ -176,11 +174,6 @@ export class Feedback extends Plugin<DragDropManager, FeedbackOptions> {
 
       element.setAttribute(ATTRIBUTE, 'true');
 
-      if (isSafari()) {
-        // Fix a bug in Safari > 18.0 where changes to the `translate` css variable do not trigger a repaint
-        styles.set({translate: `var(${CSS_PREFIX}translate)`});
-      }
-
       const transform = untracked(() => dragOperation.transform);
       const translateString = `${transform.x * frameTransform.scaleX + initialTranslate.x}px ${transform.y * frameTransform.scaleY + initialTranslate.y}px 0`;