@lobehub/ui 5.11.0 → 5.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/base-ui/ScrollArea/atoms.d.mts +9 -2
- package/es/base-ui/ScrollArea/atoms.mjs +8 -1
- package/es/base-ui/ScrollArea/atoms.mjs.map +1 -1
- package/es/base-ui/ScrollArea/style.mjs +167 -5
- package/es/base-ui/ScrollArea/style.mjs.map +1 -1
- package/es/base-ui/ScrollArea/type.d.mts +10 -2
- package/package.json +1 -1
|
@@ -4,12 +4,19 @@ import { ScrollArea } from "@base-ui/react/scroll-area";
|
|
|
4
4
|
|
|
5
5
|
//#region src/base-ui/ScrollArea/atoms.d.ts
|
|
6
6
|
type ScrollAreaRootProps = React.ComponentProps<typeof ScrollArea.Root>;
|
|
7
|
+
type ScrollAreaFadeOrientation = 'vertical' | 'horizontal' | 'both';
|
|
7
8
|
type ScrollAreaViewportProps = React.ComponentProps<typeof ScrollArea.Viewport> & {
|
|
8
9
|
/**
|
|
9
10
|
* Enable gradient scroll fade on the viewport edges.
|
|
11
|
+
*
|
|
12
|
+
* - `true` / `'vertical'`: fade top and bottom edges.
|
|
13
|
+
* - `'horizontal'`: fade start and end edges.
|
|
14
|
+
* - `'both'`: fade all four edges (combined via `mask-composite: intersect`).
|
|
15
|
+
* - `false`: no fade.
|
|
16
|
+
*
|
|
10
17
|
* @default false
|
|
11
18
|
*/
|
|
12
|
-
scrollFade?: boolean;
|
|
19
|
+
scrollFade?: boolean | ScrollAreaFadeOrientation;
|
|
13
20
|
};
|
|
14
21
|
type ScrollAreaContentProps = React.ComponentProps<typeof ScrollArea.Content>;
|
|
15
22
|
type ScrollAreaScrollbarProps = React.ComponentProps<typeof ScrollArea.Scrollbar>;
|
|
@@ -59,5 +66,5 @@ declare const ScrollAreaCorner: {
|
|
|
59
66
|
displayName: string;
|
|
60
67
|
};
|
|
61
68
|
//#endregion
|
|
62
|
-
export { ScrollAreaContent, ScrollAreaContentProps, ScrollAreaCorner, ScrollAreaCornerProps, ScrollAreaRoot, ScrollAreaRootProps, ScrollAreaScrollbar, ScrollAreaScrollbarProps, ScrollAreaThumb, ScrollAreaThumbProps, ScrollAreaViewport, ScrollAreaViewportProps };
|
|
69
|
+
export { ScrollAreaContent, ScrollAreaContentProps, ScrollAreaCorner, ScrollAreaCornerProps, ScrollAreaFadeOrientation, ScrollAreaRoot, ScrollAreaRootProps, ScrollAreaScrollbar, ScrollAreaScrollbarProps, ScrollAreaThumb, ScrollAreaThumbProps, ScrollAreaViewport, ScrollAreaViewportProps };
|
|
63
70
|
//# sourceMappingURL=atoms.d.mts.map
|
|
@@ -16,10 +16,17 @@ const ScrollAreaRoot = ({ className, ...rest }) => {
|
|
|
16
16
|
});
|
|
17
17
|
};
|
|
18
18
|
ScrollAreaRoot.displayName = "ScrollAreaRoot";
|
|
19
|
+
const resolveFadeClass = (scrollFade) => {
|
|
20
|
+
if (!scrollFade) return void 0;
|
|
21
|
+
const orientation = scrollFade === true ? "vertical" : scrollFade;
|
|
22
|
+
if (orientation === "horizontal") return styles.viewportFadeHorizontal;
|
|
23
|
+
if (orientation === "both") return styles.viewportFadeBoth;
|
|
24
|
+
return styles.viewportFade;
|
|
25
|
+
};
|
|
19
26
|
const ScrollAreaViewport = ({ className, scrollFade = false, ...rest }) => {
|
|
20
27
|
return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ScrollAreaGlobalStyle, {}), /* @__PURE__ */ jsx(ScrollArea.Viewport, {
|
|
21
28
|
...rest,
|
|
22
|
-
className: mergeStateClassName(cx(styles.viewport, scrollFade
|
|
29
|
+
className: mergeStateClassName(cx(styles.viewport, resolveFadeClass(scrollFade)), className)
|
|
23
30
|
})] });
|
|
24
31
|
};
|
|
25
32
|
ScrollAreaViewport.displayName = "ScrollAreaViewport";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"atoms.mjs","names":["BaseScrollArea"],"sources":["../../../src/base-ui/ScrollArea/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';\nimport { cx } from 'antd-style';\nimport type React from 'react';\n\nimport ScrollAreaGlobalStyle from './globalStyle';\nimport { styles } from './style';\n\nconst mergeStateClassName = <TState,>(\n base: string,\n className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n if (typeof className === 'function') return (state: TState) => cx(base, className(state));\n return cx(base, className);\n};\n\nexport type ScrollAreaRootProps = React.ComponentProps<typeof BaseScrollArea.Root>;\nexport type ScrollAreaViewportProps = React.ComponentProps<typeof BaseScrollArea.Viewport> & {\n /**\n * Enable gradient scroll fade on the viewport edges.\n * @default false\n */\n scrollFade?: boolean;\n};\nexport type ScrollAreaContentProps = React.ComponentProps<typeof BaseScrollArea.Content>;\nexport type ScrollAreaScrollbarProps = React.ComponentProps<typeof BaseScrollArea.Scrollbar>;\nexport type ScrollAreaThumbProps = React.ComponentProps<typeof BaseScrollArea.Thumb>;\nexport type ScrollAreaCornerProps = React.ComponentProps<typeof BaseScrollArea.Corner>;\n\nexport const ScrollAreaRoot = ({ className, ...rest }: ScrollAreaRootProps) => {\n return (\n <BaseScrollArea.Root {...rest} className={mergeStateClassName(styles.root, className) as any} />\n );\n};\n\nScrollAreaRoot.displayName = 'ScrollAreaRoot';\n\nexport const ScrollAreaViewport = ({\n className,\n scrollFade = false,\n ...rest\n}: ScrollAreaViewportProps) => {\n return (\n <>\n <ScrollAreaGlobalStyle />\n <BaseScrollArea.Viewport\n {...rest}\n className={\n mergeStateClassName(
|
|
1
|
+
{"version":3,"file":"atoms.mjs","names":["BaseScrollArea"],"sources":["../../../src/base-ui/ScrollArea/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';\nimport { cx } from 'antd-style';\nimport type React from 'react';\n\nimport ScrollAreaGlobalStyle from './globalStyle';\nimport { styles } from './style';\n\nconst mergeStateClassName = <TState,>(\n base: string,\n className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n if (typeof className === 'function') return (state: TState) => cx(base, className(state));\n return cx(base, className);\n};\n\nexport type ScrollAreaRootProps = React.ComponentProps<typeof BaseScrollArea.Root>;\n\nexport type ScrollAreaFadeOrientation = 'vertical' | 'horizontal' | 'both';\n\nexport type ScrollAreaViewportProps = React.ComponentProps<typeof BaseScrollArea.Viewport> & {\n /**\n * Enable gradient scroll fade on the viewport edges.\n *\n * - `true` / `'vertical'`: fade top and bottom edges.\n * - `'horizontal'`: fade start and end edges.\n * - `'both'`: fade all four edges (combined via `mask-composite: intersect`).\n * - `false`: no fade.\n *\n * @default false\n */\n scrollFade?: boolean | ScrollAreaFadeOrientation;\n};\nexport type ScrollAreaContentProps = React.ComponentProps<typeof BaseScrollArea.Content>;\nexport type ScrollAreaScrollbarProps = React.ComponentProps<typeof BaseScrollArea.Scrollbar>;\nexport type ScrollAreaThumbProps = React.ComponentProps<typeof BaseScrollArea.Thumb>;\nexport type ScrollAreaCornerProps = React.ComponentProps<typeof BaseScrollArea.Corner>;\n\nexport const ScrollAreaRoot = ({ className, ...rest }: ScrollAreaRootProps) => {\n return (\n <BaseScrollArea.Root {...rest} className={mergeStateClassName(styles.root, className) as any} />\n );\n};\n\nScrollAreaRoot.displayName = 'ScrollAreaRoot';\n\nconst resolveFadeClass = (\n scrollFade: ScrollAreaViewportProps['scrollFade'],\n): string | undefined => {\n if (!scrollFade) return undefined;\n const orientation: ScrollAreaFadeOrientation = scrollFade === true ? 'vertical' : scrollFade;\n if (orientation === 'horizontal') return styles.viewportFadeHorizontal;\n if (orientation === 'both') return styles.viewportFadeBoth;\n return styles.viewportFade;\n};\n\nexport const ScrollAreaViewport = ({\n className,\n scrollFade = false,\n ...rest\n}: ScrollAreaViewportProps) => {\n return (\n <>\n <ScrollAreaGlobalStyle />\n <BaseScrollArea.Viewport\n {...rest}\n className={\n mergeStateClassName(cx(styles.viewport, resolveFadeClass(scrollFade)), className) as any\n }\n />\n </>\n );\n};\n\nScrollAreaViewport.displayName = 'ScrollAreaViewport';\n\nexport const ScrollAreaContent = ({ className, ...rest }: ScrollAreaContentProps) => {\n return (\n <BaseScrollArea.Content\n {...rest}\n className={mergeStateClassName(styles.content, className) as any}\n />\n );\n};\n\nScrollAreaContent.displayName = 'ScrollAreaContent';\n\nexport const ScrollAreaScrollbar = ({ className, ...rest }: ScrollAreaScrollbarProps) => {\n return (\n <BaseScrollArea.Scrollbar\n {...rest}\n className={mergeStateClassName(styles.scrollbar, className) as any}\n />\n );\n};\n\nScrollAreaScrollbar.displayName = 'ScrollAreaScrollbar';\n\nexport const ScrollAreaThumb = ({ className, ...rest }: ScrollAreaThumbProps) => {\n return (\n <BaseScrollArea.Thumb\n {...rest}\n className={mergeStateClassName(styles.thumb, className) as any}\n />\n );\n};\n\nScrollAreaThumb.displayName = 'ScrollAreaThumb';\n\nexport const ScrollAreaCorner = ({ className, ...rest }: ScrollAreaCornerProps) => {\n return (\n <BaseScrollArea.Corner\n {...rest}\n className={mergeStateClassName(styles.corner, className) as any}\n />\n );\n};\n\nScrollAreaCorner.displayName = 'ScrollAreaCorner';\n"],"mappings":";;;;;;;AASA,MAAM,uBACJ,MACA,cACG;AACH,KAAI,OAAO,cAAc,WAAY,SAAQ,UAAkB,GAAG,MAAM,UAAU,MAAM,CAAC;AACzF,QAAO,GAAG,MAAM,UAAU;;AAyB5B,MAAa,kBAAkB,EAAE,WAAW,GAAG,WAAgC;AAC7E,QACE,oBAACA,WAAe,MAAhB;EAAqB,GAAI;EAAM,WAAW,oBAAoB,OAAO,MAAM,UAAU;EAAW,CAAA;;AAIpG,eAAe,cAAc;AAE7B,MAAM,oBACJ,eACuB;AACvB,KAAI,CAAC,WAAY,QAAO,KAAA;CACxB,MAAM,cAAyC,eAAe,OAAO,aAAa;AAClF,KAAI,gBAAgB,aAAc,QAAO,OAAO;AAChD,KAAI,gBAAgB,OAAQ,QAAO,OAAO;AAC1C,QAAO,OAAO;;AAGhB,MAAa,sBAAsB,EACjC,WACA,aAAa,OACb,GAAG,WAC0B;AAC7B,QACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,uBAAD,EAAyB,CAAA,EACzB,oBAACA,WAAe,UAAhB;EACE,GAAI;EACJ,WACE,oBAAoB,GAAG,OAAO,UAAU,iBAAiB,WAAW,CAAC,EAAE,UAAU;EAEnF,CAAA,CACD,EAAA,CAAA;;AAIP,mBAAmB,cAAc;AAEjC,MAAa,qBAAqB,EAAE,WAAW,GAAG,WAAmC;AACnF,QACE,oBAACA,WAAe,SAAhB;EACE,GAAI;EACJ,WAAW,oBAAoB,OAAO,SAAS,UAAU;EACzD,CAAA;;AAIN,kBAAkB,cAAc;AAEhC,MAAa,uBAAuB,EAAE,WAAW,GAAG,WAAqC;AACvF,QACE,oBAACA,WAAe,WAAhB;EACE,GAAI;EACJ,WAAW,oBAAoB,OAAO,WAAW,UAAU;EAC3D,CAAA;;AAIN,oBAAoB,cAAc;AAElC,MAAa,mBAAmB,EAAE,WAAW,GAAG,WAAiC;AAC/E,QACE,oBAACA,WAAe,OAAhB;EACE,GAAI;EACJ,WAAW,oBAAoB,OAAO,OAAO,UAAU;EACvD,CAAA;;AAIN,gBAAgB,cAAc;AAE9B,MAAa,oBAAoB,EAAE,WAAW,GAAG,WAAkC;AACjF,QACE,oBAACA,WAAe,QAAhB;EACE,GAAI;EACJ,WAAW,oBAAoB,OAAO,QAAQ,UAAU;EACxD,CAAA;;AAIN,iBAAiB,cAAc"}
|
|
@@ -22,11 +22,6 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
22
22
|
scrollbar: css`
|
|
23
23
|
pointer-events: none;
|
|
24
24
|
|
|
25
|
-
position: relative;
|
|
26
|
-
|
|
27
|
-
display: flex;
|
|
28
|
-
justify-content: center;
|
|
29
|
-
|
|
30
25
|
margin: 8px;
|
|
31
26
|
border-radius: ${cssVar.borderRadiusSM};
|
|
32
27
|
|
|
@@ -74,6 +69,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
74
69
|
`,
|
|
75
70
|
thumb: css`
|
|
76
71
|
width: 100%;
|
|
72
|
+
height: 100%;
|
|
77
73
|
border-radius: inherit;
|
|
78
74
|
background: ${cssVar.colorTextQuaternary};
|
|
79
75
|
`,
|
|
@@ -147,6 +143,172 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
147
143
|
0 var(--lobe-scroll-area-fade-size),
|
|
148
144
|
calc(100% - var(--lobe-scroll-area-fade-size)) 100%;
|
|
149
145
|
}
|
|
146
|
+
`,
|
|
147
|
+
viewportFadeHorizontal: css`
|
|
148
|
+
--scroll-area-overflow-x-start: inherit;
|
|
149
|
+
--scroll-area-overflow-x-end: inherit;
|
|
150
|
+
--lobe-scroll-area-fade-size: 40px;
|
|
151
|
+
--lobe-scroll-area-fade-left: min(
|
|
152
|
+
var(--lobe-scroll-area-fade-size),
|
|
153
|
+
var(--scroll-area-overflow-x-start, 0px)
|
|
154
|
+
);
|
|
155
|
+
--lobe-scroll-area-fade-right: min(
|
|
156
|
+
var(--lobe-scroll-area-fade-size),
|
|
157
|
+
var(--scroll-area-overflow-x-end, 0px)
|
|
158
|
+
);
|
|
159
|
+
|
|
160
|
+
/* Fade the CONTENT via mask, so it works on background images too. */
|
|
161
|
+
mask-image: linear-gradient(
|
|
162
|
+
to right,
|
|
163
|
+
transparent 0,
|
|
164
|
+
#000 var(--lobe-scroll-area-fade-left),
|
|
165
|
+
#000 calc(100% - var(--lobe-scroll-area-fade-right)),
|
|
166
|
+
transparent 100%
|
|
167
|
+
);
|
|
168
|
+
mask-repeat: no-repeat;
|
|
169
|
+
mask-size: 100% 100%;
|
|
170
|
+
|
|
171
|
+
/* Scroll-driven animation: use scroll position to drive the mask. */
|
|
172
|
+
@supports (animation-timeline: scroll()) {
|
|
173
|
+
/*
|
|
174
|
+
* Important: drive fade by *distance to edges* (first/last 40px),
|
|
175
|
+
* so reaching start/end doesn't cause a sudden snap.
|
|
176
|
+
*/
|
|
177
|
+
@keyframes lobe-scroll-area-fade-left-in {
|
|
178
|
+
from {
|
|
179
|
+
--lobe-scroll-area-fade-left: 0;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
to {
|
|
183
|
+
--lobe-scroll-area-fade-left: var(--lobe-scroll-area-fade-size);
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
@keyframes lobe-scroll-area-fade-right-out {
|
|
188
|
+
from {
|
|
189
|
+
--lobe-scroll-area-fade-right: var(--lobe-scroll-area-fade-size);
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
to {
|
|
193
|
+
--lobe-scroll-area-fade-right: 0;
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
animation-name: lobe-scroll-area-fade-left-in, lobe-scroll-area-fade-right-out;
|
|
198
|
+
animation-duration: 1ms, 1ms;
|
|
199
|
+
animation-timing-function: linear, linear;
|
|
200
|
+
animation-fill-mode: both, both;
|
|
201
|
+
animation-timeline: scroll(self x), scroll(self x);
|
|
202
|
+
|
|
203
|
+
animation-range:
|
|
204
|
+
0 var(--lobe-scroll-area-fade-size),
|
|
205
|
+
calc(100% - var(--lobe-scroll-area-fade-size)) 100%;
|
|
206
|
+
}
|
|
207
|
+
`,
|
|
208
|
+
viewportFadeBoth: css`
|
|
209
|
+
--scroll-area-overflow-x-start: inherit;
|
|
210
|
+
--scroll-area-overflow-x-end: inherit;
|
|
211
|
+
--scroll-area-overflow-y-start: inherit;
|
|
212
|
+
--scroll-area-overflow-y-end: inherit;
|
|
213
|
+
--lobe-scroll-area-fade-size: 40px;
|
|
214
|
+
--lobe-scroll-area-fade-top: min(
|
|
215
|
+
var(--lobe-scroll-area-fade-size),
|
|
216
|
+
var(--scroll-area-overflow-y-start, 0px)
|
|
217
|
+
);
|
|
218
|
+
--lobe-scroll-area-fade-bottom: min(
|
|
219
|
+
var(--lobe-scroll-area-fade-size),
|
|
220
|
+
var(--scroll-area-overflow-y-end, 0px)
|
|
221
|
+
);
|
|
222
|
+
--lobe-scroll-area-fade-left: min(
|
|
223
|
+
var(--lobe-scroll-area-fade-size),
|
|
224
|
+
var(--scroll-area-overflow-x-start, 0px)
|
|
225
|
+
);
|
|
226
|
+
--lobe-scroll-area-fade-right: min(
|
|
227
|
+
var(--lobe-scroll-area-fade-size),
|
|
228
|
+
var(--scroll-area-overflow-x-end, 0px)
|
|
229
|
+
);
|
|
230
|
+
|
|
231
|
+
mask-composite: intersect;
|
|
232
|
+
|
|
233
|
+
/*
|
|
234
|
+
* Combine vertical + horizontal fades by intersecting two gradient masks
|
|
235
|
+
* so the four corners stay transparent only when both axes overflow.
|
|
236
|
+
*/
|
|
237
|
+
mask-image:
|
|
238
|
+
linear-gradient(
|
|
239
|
+
to bottom,
|
|
240
|
+
transparent 0,
|
|
241
|
+
#000 var(--lobe-scroll-area-fade-top),
|
|
242
|
+
#000 calc(100% - var(--lobe-scroll-area-fade-bottom)),
|
|
243
|
+
transparent 100%
|
|
244
|
+
),
|
|
245
|
+
linear-gradient(
|
|
246
|
+
to right,
|
|
247
|
+
transparent 0,
|
|
248
|
+
#000 var(--lobe-scroll-area-fade-left),
|
|
249
|
+
#000 calc(100% - var(--lobe-scroll-area-fade-right)),
|
|
250
|
+
transparent 100%
|
|
251
|
+
);
|
|
252
|
+
mask-repeat: no-repeat, no-repeat;
|
|
253
|
+
mask-size:
|
|
254
|
+
100% 100%,
|
|
255
|
+
100% 100%;
|
|
256
|
+
|
|
257
|
+
@supports (animation-timeline: scroll()) {
|
|
258
|
+
@keyframes lobe-scroll-area-fade-top-in-both {
|
|
259
|
+
from {
|
|
260
|
+
--lobe-scroll-area-fade-top: 0;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
to {
|
|
264
|
+
--lobe-scroll-area-fade-top: var(--lobe-scroll-area-fade-size);
|
|
265
|
+
}
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
@keyframes lobe-scroll-area-fade-bottom-out-both {
|
|
269
|
+
from {
|
|
270
|
+
--lobe-scroll-area-fade-bottom: var(--lobe-scroll-area-fade-size);
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
to {
|
|
274
|
+
--lobe-scroll-area-fade-bottom: 0;
|
|
275
|
+
}
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
@keyframes lobe-scroll-area-fade-left-in-both {
|
|
279
|
+
from {
|
|
280
|
+
--lobe-scroll-area-fade-left: 0;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
to {
|
|
284
|
+
--lobe-scroll-area-fade-left: var(--lobe-scroll-area-fade-size);
|
|
285
|
+
}
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
@keyframes lobe-scroll-area-fade-right-out-both {
|
|
289
|
+
from {
|
|
290
|
+
--lobe-scroll-area-fade-right: var(--lobe-scroll-area-fade-size);
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
to {
|
|
294
|
+
--lobe-scroll-area-fade-right: 0;
|
|
295
|
+
}
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
animation-name:
|
|
299
|
+
lobe-scroll-area-fade-top-in-both, lobe-scroll-area-fade-bottom-out-both,
|
|
300
|
+
lobe-scroll-area-fade-left-in-both, lobe-scroll-area-fade-right-out-both;
|
|
301
|
+
animation-duration: 1ms, 1ms, 1ms, 1ms;
|
|
302
|
+
animation-timing-function: linear, linear, linear, linear;
|
|
303
|
+
animation-fill-mode: both, both, both, both;
|
|
304
|
+
animation-timeline: scroll(self y), scroll(self y), scroll(self x), scroll(self x);
|
|
305
|
+
|
|
306
|
+
animation-range:
|
|
307
|
+
0 var(--lobe-scroll-area-fade-size),
|
|
308
|
+
calc(100% - var(--lobe-scroll-area-fade-size)) 100%,
|
|
309
|
+
0 var(--lobe-scroll-area-fade-size),
|
|
310
|
+
calc(100% - var(--lobe-scroll-area-fade-size)) 100%;
|
|
311
|
+
}
|
|
150
312
|
`
|
|
151
313
|
}));
|
|
152
314
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/ScrollArea/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n content: css`\n display: flex;\n flex-direction: column;\n gap: 16px;\n\n font-size: ${cssVar.fontSizeSM};\n line-height: 1.375rem;\n color: ${cssVar.colorText};\n `,\n\n corner: css`\n background: ${cssVar.colorFillSecondary};\n `,\n\n root: css`\n position: relative;\n box-sizing: border-box;\n border-radius: ${cssVar.borderRadiusLG};\n background: ${cssVar.colorBgLayout};\n `,\n\n scrollbar: css`\n pointer-events: none;\n\n
|
|
1
|
+
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/ScrollArea/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n content: css`\n display: flex;\n flex-direction: column;\n gap: 16px;\n\n font-size: ${cssVar.fontSizeSM};\n line-height: 1.375rem;\n color: ${cssVar.colorText};\n `,\n\n corner: css`\n background: ${cssVar.colorFillSecondary};\n `,\n\n root: css`\n position: relative;\n box-sizing: border-box;\n border-radius: ${cssVar.borderRadiusLG};\n background: ${cssVar.colorBgLayout};\n `,\n\n scrollbar: css`\n pointer-events: none;\n\n margin: 8px;\n border-radius: ${cssVar.borderRadiusSM};\n\n opacity: 0;\n background: transparent;\n\n transition: opacity 150ms;\n\n &::before {\n content: '';\n position: absolute;\n }\n\n &[data-scrolling] {\n transition-duration: 0ms;\n }\n\n &[data-hovering],\n &[data-scrolling] {\n pointer-events: auto;\n opacity: 1;\n }\n\n &[data-orientation='vertical'] {\n width: 4px;\n\n &::before {\n inset-inline-start: 50%;\n transform: translateX(-50%);\n width: 20px;\n height: 100%;\n }\n }\n\n &[data-orientation='horizontal'] {\n height: 4px;\n\n &::before {\n inset-block-end: -8px;\n inset-inline: 0;\n width: 100%;\n height: 20px;\n }\n }\n `,\n\n thumb: css`\n width: 100%;\n height: 100%;\n border-radius: inherit;\n background: ${cssVar.colorTextQuaternary};\n `,\n\n viewport: css`\n position: relative;\n height: 100%;\n outline: none;\n\n &:focus-visible {\n outline: 2px solid ${cssVar.colorPrimary};\n outline-offset: 2px;\n }\n `,\n\n viewportFade: css`\n --scroll-area-overflow-y-start: inherit;\n --scroll-area-overflow-y-end: inherit;\n --lobe-scroll-area-fade-size: 40px;\n --lobe-scroll-area-fade-top: min(\n var(--lobe-scroll-area-fade-size),\n var(--scroll-area-overflow-y-start, 0px)\n );\n --lobe-scroll-area-fade-bottom: min(\n var(--lobe-scroll-area-fade-size),\n var(--scroll-area-overflow-y-end, 0px)\n );\n\n /* Fade the CONTENT via mask, so it works on background images too. */\n mask-image: linear-gradient(\n to bottom,\n transparent 0,\n #000 var(--lobe-scroll-area-fade-top),\n #000 calc(100% - var(--lobe-scroll-area-fade-bottom)),\n transparent 100%\n );\n mask-repeat: no-repeat;\n mask-size: 100% 100%;\n\n /* Scroll-driven animation: use scroll position to drive the mask. */\n @supports (animation-timeline: scroll()) {\n /*\n * Important: drive fade by *distance to edges* (first/last 40px),\n * so reaching top/bottom doesn't cause a sudden snap.\n */\n @keyframes lobe-scroll-area-fade-top-in {\n from {\n --lobe-scroll-area-fade-top: 0;\n }\n\n to {\n --lobe-scroll-area-fade-top: var(--lobe-scroll-area-fade-size);\n }\n }\n\n @keyframes lobe-scroll-area-fade-bottom-out {\n from {\n --lobe-scroll-area-fade-bottom: var(--lobe-scroll-area-fade-size);\n }\n\n to {\n --lobe-scroll-area-fade-bottom: 0;\n }\n }\n\n animation-name: lobe-scroll-area-fade-top-in, lobe-scroll-area-fade-bottom-out;\n animation-duration: 1ms, 1ms;\n animation-timing-function: linear, linear;\n animation-fill-mode: both, both;\n animation-timeline: scroll(self y), scroll(self y);\n\n animation-range:\n 0 var(--lobe-scroll-area-fade-size),\n calc(100% - var(--lobe-scroll-area-fade-size)) 100%;\n }\n `,\n\n viewportFadeHorizontal: css`\n --scroll-area-overflow-x-start: inherit;\n --scroll-area-overflow-x-end: inherit;\n --lobe-scroll-area-fade-size: 40px;\n --lobe-scroll-area-fade-left: min(\n var(--lobe-scroll-area-fade-size),\n var(--scroll-area-overflow-x-start, 0px)\n );\n --lobe-scroll-area-fade-right: min(\n var(--lobe-scroll-area-fade-size),\n var(--scroll-area-overflow-x-end, 0px)\n );\n\n /* Fade the CONTENT via mask, so it works on background images too. */\n mask-image: linear-gradient(\n to right,\n transparent 0,\n #000 var(--lobe-scroll-area-fade-left),\n #000 calc(100% - var(--lobe-scroll-area-fade-right)),\n transparent 100%\n );\n mask-repeat: no-repeat;\n mask-size: 100% 100%;\n\n /* Scroll-driven animation: use scroll position to drive the mask. */\n @supports (animation-timeline: scroll()) {\n /*\n * Important: drive fade by *distance to edges* (first/last 40px),\n * so reaching start/end doesn't cause a sudden snap.\n */\n @keyframes lobe-scroll-area-fade-left-in {\n from {\n --lobe-scroll-area-fade-left: 0;\n }\n\n to {\n --lobe-scroll-area-fade-left: var(--lobe-scroll-area-fade-size);\n }\n }\n\n @keyframes lobe-scroll-area-fade-right-out {\n from {\n --lobe-scroll-area-fade-right: var(--lobe-scroll-area-fade-size);\n }\n\n to {\n --lobe-scroll-area-fade-right: 0;\n }\n }\n\n animation-name: lobe-scroll-area-fade-left-in, lobe-scroll-area-fade-right-out;\n animation-duration: 1ms, 1ms;\n animation-timing-function: linear, linear;\n animation-fill-mode: both, both;\n animation-timeline: scroll(self x), scroll(self x);\n\n animation-range:\n 0 var(--lobe-scroll-area-fade-size),\n calc(100% - var(--lobe-scroll-area-fade-size)) 100%;\n }\n `,\n\n viewportFadeBoth: css`\n --scroll-area-overflow-x-start: inherit;\n --scroll-area-overflow-x-end: inherit;\n --scroll-area-overflow-y-start: inherit;\n --scroll-area-overflow-y-end: inherit;\n --lobe-scroll-area-fade-size: 40px;\n --lobe-scroll-area-fade-top: min(\n var(--lobe-scroll-area-fade-size),\n var(--scroll-area-overflow-y-start, 0px)\n );\n --lobe-scroll-area-fade-bottom: min(\n var(--lobe-scroll-area-fade-size),\n var(--scroll-area-overflow-y-end, 0px)\n );\n --lobe-scroll-area-fade-left: min(\n var(--lobe-scroll-area-fade-size),\n var(--scroll-area-overflow-x-start, 0px)\n );\n --lobe-scroll-area-fade-right: min(\n var(--lobe-scroll-area-fade-size),\n var(--scroll-area-overflow-x-end, 0px)\n );\n\n mask-composite: intersect;\n\n /*\n * Combine vertical + horizontal fades by intersecting two gradient masks\n * so the four corners stay transparent only when both axes overflow.\n */\n mask-image:\n linear-gradient(\n to bottom,\n transparent 0,\n #000 var(--lobe-scroll-area-fade-top),\n #000 calc(100% - var(--lobe-scroll-area-fade-bottom)),\n transparent 100%\n ),\n linear-gradient(\n to right,\n transparent 0,\n #000 var(--lobe-scroll-area-fade-left),\n #000 calc(100% - var(--lobe-scroll-area-fade-right)),\n transparent 100%\n );\n mask-repeat: no-repeat, no-repeat;\n mask-size:\n 100% 100%,\n 100% 100%;\n\n @supports (animation-timeline: scroll()) {\n @keyframes lobe-scroll-area-fade-top-in-both {\n from {\n --lobe-scroll-area-fade-top: 0;\n }\n\n to {\n --lobe-scroll-area-fade-top: var(--lobe-scroll-area-fade-size);\n }\n }\n\n @keyframes lobe-scroll-area-fade-bottom-out-both {\n from {\n --lobe-scroll-area-fade-bottom: var(--lobe-scroll-area-fade-size);\n }\n\n to {\n --lobe-scroll-area-fade-bottom: 0;\n }\n }\n\n @keyframes lobe-scroll-area-fade-left-in-both {\n from {\n --lobe-scroll-area-fade-left: 0;\n }\n\n to {\n --lobe-scroll-area-fade-left: var(--lobe-scroll-area-fade-size);\n }\n }\n\n @keyframes lobe-scroll-area-fade-right-out-both {\n from {\n --lobe-scroll-area-fade-right: var(--lobe-scroll-area-fade-size);\n }\n\n to {\n --lobe-scroll-area-fade-right: 0;\n }\n }\n\n animation-name:\n lobe-scroll-area-fade-top-in-both, lobe-scroll-area-fade-bottom-out-both,\n lobe-scroll-area-fade-left-in-both, lobe-scroll-area-fade-right-out-both;\n animation-duration: 1ms, 1ms, 1ms, 1ms;\n animation-timing-function: linear, linear, linear, linear;\n animation-fill-mode: both, both, both, both;\n animation-timeline: scroll(self y), scroll(self y), scroll(self x), scroll(self x);\n\n animation-range:\n 0 var(--lobe-scroll-area-fade-size),\n calc(100% - var(--lobe-scroll-area-fade-size)) 100%,\n 0 var(--lobe-scroll-area-fade-size),\n calc(100% - var(--lobe-scroll-area-fade-size)) 100%;\n }\n `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,SAAS,GAAG;;;;;iBAKG,OAAO,WAAW;;aAEtB,OAAO,UAAU;;CAG5B,QAAQ,GAAG;kBACK,OAAO,mBAAmB;;CAG1C,MAAM,GAAG;;;qBAGU,OAAO,eAAe;kBACzB,OAAO,cAAc;;CAGrC,WAAW,GAAG;;;;qBAIK,OAAO,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CzC,OAAO,GAAG;;;;kBAIM,OAAO,oBAAoB;;CAG3C,UAAU,GAAG;;;;;;2BAMY,OAAO,aAAa;;;;CAK7C,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8DjB,wBAAwB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8D3B,kBAAkB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyGtB,EAAE"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ScrollAreaContentProps, ScrollAreaCornerProps, ScrollAreaRootProps, ScrollAreaScrollbarProps, ScrollAreaThumbProps, ScrollAreaViewportProps } from "./atoms.mjs";
|
|
1
|
+
import { ScrollAreaContentProps, ScrollAreaCornerProps, ScrollAreaFadeOrientation, ScrollAreaRootProps, ScrollAreaScrollbarProps, ScrollAreaThumbProps, ScrollAreaViewportProps } from "./atoms.mjs";
|
|
2
2
|
import { ReactNode } from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/base-ui/ScrollArea/type.d.ts
|
|
@@ -8,7 +8,15 @@ interface ScrollAreaProps extends Omit<ScrollAreaRootProps, 'children'> {
|
|
|
8
8
|
corner?: boolean;
|
|
9
9
|
cornerProps?: ScrollAreaCornerProps;
|
|
10
10
|
scrollbarProps?: Omit<ScrollAreaScrollbarProps, 'children'>;
|
|
11
|
-
|
|
11
|
+
/**
|
|
12
|
+
* Enable gradient scroll fade on the viewport edges.
|
|
13
|
+
*
|
|
14
|
+
* Accepts a boolean (true ≡ vertical) or an explicit orientation:
|
|
15
|
+
* `'vertical' | 'horizontal' | 'both'`.
|
|
16
|
+
*
|
|
17
|
+
* @default false
|
|
18
|
+
*/
|
|
19
|
+
scrollFade?: boolean | ScrollAreaFadeOrientation;
|
|
12
20
|
thumbProps?: ScrollAreaThumbProps;
|
|
13
21
|
viewportProps?: Omit<ScrollAreaViewportProps, 'children' | 'scrollFade'>;
|
|
14
22
|
}
|