[ScrollArea] Create new ScrollArea component

docs/data/api/scroll-area-corner.json

@@ -0,0 +1,19 @@
+{
+  "props": {
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
+  },
+  "name": "ScrollAreaCorner",
+  "imports": [
+    "import { ScrollArea } from '@base_ui/react/ScrollArea';\nconst ScrollAreaCorner = ScrollArea.Corner;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "ScrollAreaCorner",
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/mui-base/src/ScrollArea/Corner/ScrollAreaCorner.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-scroll-area/\">Scroll Area</a></li></ul>",
+  "cssComponent": false
+}

docs/data/api/scroll-area-root.json

@@ -0,0 +1,30 @@
+{
+  "props": {
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "gutter": {
+      "type": {
+        "name": "enum",
+        "description": "'both-edges'<br>&#124;&nbsp;'none'<br>&#124;&nbsp;'stable'"
+      },
+      "default": "'stable'"
+    },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } },
+    "type": {
+      "type": { "name": "enum", "description": "'inlay'<br>&#124;&nbsp;'overlay'" },
+      "default": "'overlay'"
+    }
+  },
+  "name": "ScrollAreaRoot",
+  "imports": [
+    "import { ScrollArea } from '@base_ui/react/ScrollArea';\nconst ScrollAreaRoot = ScrollArea.Root;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "ScrollAreaRoot",
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/mui-base/src/ScrollArea/Root/ScrollAreaRoot.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-scroll-area/\">Scroll Area</a></li></ul>",
+  "cssComponent": false
+}

docs/data/api/scroll-area-scrollbar.json

@@ -0,0 +1,23 @@
+{
+  "props": {
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "orientation": {
+      "type": { "name": "enum", "description": "'horizontal'<br>&#124;&nbsp;'vertical'" },
+      "default": "'vertical'"
+    },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
+  },
+  "name": "ScrollAreaScrollbar",
+  "imports": [
+    "import { ScrollArea } from '@base_ui/react/ScrollArea';\nconst ScrollAreaScrollbar = ScrollArea.Scrollbar;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "ScrollAreaScrollbar",
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/mui-base/src/ScrollArea/Scrollbar/ScrollAreaScrollbar.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-scroll-area/\">Scroll Area</a></li></ul>",
+  "cssComponent": false
+}

docs/data/api/scroll-area-thumb.json

@@ -0,0 +1,19 @@
+{
+  "props": {
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
+  },
+  "name": "ScrollAreaThumb",
+  "imports": [
+    "import { ScrollArea } from '@base_ui/react/ScrollArea';\nconst ScrollAreaThumb = ScrollArea.Thumb;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "ScrollAreaThumb",
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/mui-base/src/ScrollArea/Thumb/ScrollAreaThumb.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-scroll-area/\">Scroll Area</a></li></ul>",
+  "cssComponent": false
+}

docs/data/api/scroll-area-viewport.json

@@ -0,0 +1,19 @@
+{
+  "props": {
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
+  },
+  "name": "ScrollAreaViewport",
+  "imports": [
+    "import { ScrollArea } from '@base_ui/react/ScrollArea';\nconst ScrollAreaViewport = ScrollArea.Viewport;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "ScrollAreaViewport",
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/mui-base/src/ScrollArea/Viewport/ScrollAreaViewport.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-scroll-area/\">Scroll Area</a></li></ul>",
+  "cssComponent": false
+}

docs/data/components/scroll-area/ScrollAreaInlay.js

@@ -0,0 +1,118 @@
+'use client';
+import * as React from 'react';
+import { ScrollArea } from '@base_ui/react/ScrollArea';
+import { styled } from '@mui/system';
+
+const data = [
+  'f47ac10b-58cc-4372-a567-0e02b2c3d479',
+  '7c9e6679-7425-40de-944b-e07fc1f90ae7',
+  '550e8400-e29b-41d4-a716-446655440000',
+  '9b2b38e2-4c7b-4e53-a228-c89c535c5072',
+  '3fa85f64-5717-4562-b3fc-2c963f66afa6',
+  '4dfbdfc4-2d0e-4e6c-8bd6-7c8d765f0a1c',
+  'aa9e5d30-cf2a-4234-bc9b-6a5d965c6a00',
+  '16fd2706-8baf-433b-82eb-8c7fada847da',
+  '66ed7a57-e4b7-4b82-8b1e-2a8942f8ec6e',
+  'f9e87c8f-7b4f-4c7e-bb72-ebe8e2277c5e',
+];
+
+export default function ScrollAreaInlay() {
+  return (
+    <ScrollAreaRoot type="inlay" gutter="none">
+      <ScrollAreaViewport>
+        <div style={{ padding: '10px 20px' }}>
+          <h3 style={{ margin: '20px 0 10px' }}>User IDs</h3>
+          <ul
+            style={{
+              padding: '10px 20px',
+              margin: 0,
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 5,
+            }}
+          >
+            {data.map((value) => (
+              <li key={value} style={{ padding: 5, whiteSpace: 'nowrap' }}>
+                {value}
+              </li>
+            ))}
+          </ul>
+        </div>
+      </ScrollAreaViewport>
+      <ScrollAreaScrollbar>
+        <ScrollAreaThumb />
+      </ScrollAreaScrollbar>
+      <ScrollAreaScrollbar orientation="horizontal">
+        <ScrollAreaThumb />
+      </ScrollAreaScrollbar>
+      <ScrollAreaCorner />
+    </ScrollAreaRoot>
+  );
+}
+
+const ScrollAreaRoot = styled(ScrollArea.Root)`
+  width: 250px;
+  height: 250px;
+  border-radius: 6px;
+  background: #f5f5f5;
+  overflow: hidden;
+`;
+
+const ScrollAreaViewport = styled(ScrollArea.Viewport)`
+  width: 100%;
+  height: 100%;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+
+const ScrollAreaScrollbar = styled(ScrollArea.Scrollbar)`
+  width: 10px;
+  height: calc(100% - var(--scroll-area-corner-height));
+  background: rgb(220 220 220);
+  box-sizing: border-box;
+
+  &[data-orientation='horizontal'] {
+    width: calc(100% - var(--scroll-area-corner-width));
+    height: 10px;
+  }
+`;
+
+const ScrollAreaThumb = styled(ScrollArea.Thumb)`
+  background: rgb(180 180 180);
+
+  &[data-orientation='vertical'] {
+    width: 10px;
+    height: var(--scroll-area-thumb-height, 0);
+  }
+
+  &[data-orientation='horizontal'] {
+    width: var(--scroll-area-thumb-width, 0);
+    height: 10px;
+  }
+
+  &:hover {
+    background: rgb(150 150 150);
+  }
+
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    min-width: 22px;
+    min-height: 22px;
+  }
+`;
+
+const ScrollAreaCorner = styled(ScrollArea.Corner)`
+  width: var(--scroll-area-corner-width, 10px);
+  height: var(--scroll-area-corner-height, 10px);
+  background: rgb(220 220 220);
+`;

docs/data/components/scroll-area/ScrollAreaInlay.tsx

@@ -0,0 +1,118 @@
+'use client';
+import * as React from 'react';
+import { ScrollArea } from '@base_ui/react/ScrollArea';
+import { styled } from '@mui/system';
+
+const data = [
+  'f47ac10b-58cc-4372-a567-0e02b2c3d479',
+  '7c9e6679-7425-40de-944b-e07fc1f90ae7',
+  '550e8400-e29b-41d4-a716-446655440000',
+  '9b2b38e2-4c7b-4e53-a228-c89c535c5072',
+  '3fa85f64-5717-4562-b3fc-2c963f66afa6',
+  '4dfbdfc4-2d0e-4e6c-8bd6-7c8d765f0a1c',
+  'aa9e5d30-cf2a-4234-bc9b-6a5d965c6a00',
+  '16fd2706-8baf-433b-82eb-8c7fada847da',
+  '66ed7a57-e4b7-4b82-8b1e-2a8942f8ec6e',
+  'f9e87c8f-7b4f-4c7e-bb72-ebe8e2277c5e',
+];
+
+export default function ScrollAreaInlay() {
+  return (
+    <ScrollAreaRoot type="inlay" gutter="none">
+      <ScrollAreaViewport>
+        <div style={{ padding: '10px 20px' }}>
+          <h3 style={{ margin: '20px 0 10px' }}>User IDs</h3>
+          <ul
+            style={{
+              padding: '10px 20px',
+              margin: 0,
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 5,
+            }}
+          >
+            {data.map((value) => (
+              <li key={value} style={{ padding: 5, whiteSpace: 'nowrap' }}>
+                {value}
+              </li>
+            ))}
+          </ul>
+        </div>
+      </ScrollAreaViewport>
+      <ScrollAreaScrollbar>
+        <ScrollAreaThumb />
+      </ScrollAreaScrollbar>
+      <ScrollAreaScrollbar orientation="horizontal">
+        <ScrollAreaThumb />
+      </ScrollAreaScrollbar>
+      <ScrollAreaCorner />
+    </ScrollAreaRoot>
+  );
+}
+
+const ScrollAreaRoot = styled(ScrollArea.Root)`
+  width: 250px;
+  height: 250px;
+  border-radius: 6px;
+  background: #f5f5f5;
+  overflow: hidden;
+`;
+
+const ScrollAreaViewport = styled(ScrollArea.Viewport)`
+  width: 100%;
+  height: 100%;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+
+const ScrollAreaScrollbar = styled(ScrollArea.Scrollbar)`
+  width: 10px;
+  height: calc(100% - var(--scroll-area-corner-height));
+  background: rgb(220 220 220);
+  box-sizing: border-box;
+
+  &[data-orientation='horizontal'] {
+    width: calc(100% - var(--scroll-area-corner-width));
+    height: 10px;
+  }
+`;
+
+const ScrollAreaThumb = styled(ScrollArea.Thumb)`
+  background: rgb(180 180 180);
+
+  &[data-orientation='vertical'] {
+    width: 10px;
+    height: var(--scroll-area-thumb-height, 0);
+  }
+
+  &[data-orientation='horizontal'] {
+    width: var(--scroll-area-thumb-width, 0);
+    height: 10px;
+  }
+
+  &:hover {
+    background: rgb(150 150 150);
+  }
+
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    min-width: 22px;
+    min-height: 22px;
+  }
+`;
+
+const ScrollAreaCorner = styled(ScrollArea.Corner)`
+  width: var(--scroll-area-corner-width, 10px);
+  height: var(--scroll-area-corner-height, 10px);
+  background: rgb(220 220 220);
+`;