@a-type/ui 4.0.2 → 4.0.5

package/src/components/scrollArea/ScrollArea.stories.tsx

@@ -1,5 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import clsx from 'clsx';
+import { Box } from '../box/Box.js';
+import { Button } from '../button/Button.js';
+import { Input } from '../input/Input.js';
 import { ScrollArea } from './ScrollArea.js';
 
 const meta = {
@@ -25,80 +28,102 @@ type Story = StoryObj<{ direction: 'vertical' | 'horizontal' | 'both' }>;
 export const Default: Story = {
 	render({ direction }) {
 		return (
-			<ScrollArea style={{ height: '200px', width: '400px' }}>
+			<ScrollArea
+				direction={direction}
+				style={{ height: '200px', width: '400px' }}
+			>
+				<ScrollArea.Content
+					className={clsx(
+						direction === 'horizontal' && 'w-10000px',
+						direction === 'both' && 'w-800px',
+					)}
+				>
+					<Content />
+				</ScrollArea.Content>
+			</ScrollArea>
+		);
+	},
+};
+
+export const ConstraintTest: Story = {
+	render({ direction }) {
+		return (
+			<ScrollArea direction={direction} className="w-300px h-300px">
 				<ScrollArea.Content>
-					<div
-						className={clsx(
-							direction === 'horizontal' && 'w-10000px',
-							direction === 'both' && 'w-800px',
-						)}
-					>
-						<p>
-							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non
-							risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing
-							nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas
-							ligula massa, varius a, semper congue, euismod non, mi. Proin
-							porttitor, orci nec nonummy molestie, enim est eleifend mi, non
-							fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa,
-							scelerisque vitae, consequat in, pretium a, enim. Pellentesque
-							congue. Ut in risus volutpat libero pharetra tempor. Cras
-							vestibulum bibendum augue. Praesent egestas leo in pede. Praesent
-							blandit odio eu enim. Pellentesque sed dui ut augue blandit
-							sodales. Vestibulum ante ipsum primis in faucibus orci luctus et
-							ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed
-							pede pellentesque fermentum. Maecenas adipiscing ante non diam
-							sollicitudin ornare. Morbi in sem quis dui placerat ornare.
-							Pellentesque odio nisi, euismod in, pharetra a, ultricies in,
-							diam. Sed arcu. Cras consectetur. Vivamus fermentum nibh in augue.
-							Praesent a lacus at urna consequat rhoncus. Morbi dapibus sapien
-							vel ante. Aliquam erat volutpat. Pellentesque sagittis ligula eget
-							metus. Vestibulum commodo. Ut rhoncus gravida arcu.
-						</p>
-						<p>
-							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non
-							risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing
-							nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas
-							ligula massa, varius a, semper congue, euismod non, mi. Proin
-							porttitor, orci nec nonummy molestie, enim est eleifend mi, non
-							fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa,
-							scelerisque vitae, consequat in, pretium a, enim. Pellentesque
-							congue. Ut in risus volutpat libero pharetra tempor. Cras
-							vestibulum bibendum augue. Praesent egestas leo in pede. Praesent
-							blandit odio eu enim. Pellentesque sed dui ut augue blandit
-							sodales. Vestibulum ante ipsum primis in faucibus orci luctus et
-							ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed
-							pede pellentesque fermentum. Maecenas adipiscing ante non diam
-							sollicitudin ornare. Morbi in sem quis dui placerat ornare.
-							Pellentesque odio nisi, euismod in, pharetra a, ultricies in,
-							diam. Sed arcu. Cras consectetur. Vivamus fermentum nibh in augue.
-							Praesent a lacus at urna consequat rhoncus. Morbi dapibus sapien
-							vel ante. Aliquam erat volutpat. Pellentesque sagittis ligula eget
-							metus. Vestibulum commodo. Ut rhoncus gravida arcu.
-						</p>
-						<p>
-							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non
-							risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing
-							nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas
-							ligula massa, varius a, semper congue, euismod non, mi. Proin
-							porttitor, orci nec nonummy molestie, enim est eleifend mi, non
-							fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa,
-							scelerisque vitae, consequat in, pretium a, enim. Pellentesque
-							congue. Ut in risus volutpat libero pharetra tempor. Cras
-							vestibulum bibendum augue. Praesent egestas leo in pede. Praesent
-							blandit odio eu enim. Pellentesque sed dui ut augue blandit
-							sodales. Vestibulum ante ipsum primis in faucibus orci luctus et
-							ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed
-							pede pellentesque fermentum. Maecenas adipiscing ante non diam
-							sollicitudin ornare. Morbi in sem quis dui placerat ornare.
-							Pellentesque odio nisi, euismod in, pharetra a, ultricies in,
-							diam. Sed arcu. Cras consectetur. Vivamus fermentum nibh in augue.
-							Praesent a lacus at urna consequat rhoncus. Morbi dapibus sapien
-							vel ante. Aliquam erat volutpat. Pellentesque sagittis ligula eget
-							metus. Vestibulum commodo. Ut rhoncus gravida arcu.
-						</p>
-					</div>
+					<Box gap>
+						<Input placeholder="Test input" />
+						<Button>Submit</Button>
+					</Box>
+					<Content />
 				</ScrollArea.Content>
 			</ScrollArea>
 		);
 	},
 };
+
+function Content() {
+	return (
+		<>
+			<p>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
+				Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies
+				sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius
+				a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy
+				molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.
+				Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium
+				a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra
+				tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede.
+				Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit
+				sodales. Vestibulum ante ipsum primis in faucibus orci luctus et
+				ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede
+				pellentesque fermentum. Maecenas adipiscing ante non diam sollicitudin
+				ornare. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi,
+				euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consectetur.
+				Vivamus fermentum nibh in augue. Praesent a lacus at urna consequat
+				rhoncus. Morbi dapibus sapien vel ante. Aliquam erat volutpat.
+				Pellentesque sagittis ligula eget metus. Vestibulum commodo. Ut rhoncus
+				gravida arcu.
+			</p>
+			<p>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
+				Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies
+				sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius
+				a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy
+				molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.
+				Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium
+				a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra
+				tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede.
+				Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit
+				sodales. Vestibulum ante ipsum primis in faucibus orci luctus et
+				ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede
+				pellentesque fermentum. Maecenas adipiscing ante non diam sollicitudin
+				ornare. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi,
+				euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consectetur.
+				Vivamus fermentum nibh in augue. Praesent a lacus at urna consequat
+				rhoncus. Morbi dapibus sapien vel ante. Aliquam erat volutpat.
+				Pellentesque sagittis ligula eget metus. Vestibulum commodo. Ut rhoncus
+				gravida arcu.
+			</p>
+			<p>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
+				Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies
+				sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius
+				a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy
+				molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.
+				Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium
+				a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra
+				tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede.
+				Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit
+				sodales. Vestibulum ante ipsum primis in faucibus orci luctus et
+				ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede
+				pellentesque fermentum. Maecenas adipiscing ante non diam sollicitudin
+				ornare. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi,
+				euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consectetur.
+				Vivamus fermentum nibh in augue. Praesent a lacus at urna consequat
+				rhoncus. Morbi dapibus sapien vel ante. Aliquam erat volutpat.
+				Pellentesque sagittis ligula eget metus. Vestibulum commodo. Ut rhoncus
+				gravida arcu.
+			</p>
+		</>
+	);
+}

package/src/components/scrollArea/ScrollArea.tsx

@@ -1,35 +1,37 @@
 import {
 	ScrollArea as BaseScrollArea,
+	ScrollAreaContentProps,
 	ScrollAreaRootProps,
 	ScrollAreaScrollbarProps,
 } from '@base-ui/react/scroll-area';
+import { Ref } from 'react';
 import { withClassName } from '../../hooks.js';
 
 export type * from '@base-ui/react/scroll-area';
 
 export const ScrollAreaRoot = withClassName(
 	BaseScrollArea.Root,
-	'layer-components:(min-w-0 min-h-0 flex flex-col)',
+	'layer-components:(min-w-0 min-h-0 flex flex-col box-border)',
 );
 
 export const ScrollAreaViewport = withClassName(
 	BaseScrollArea.Viewport,
-	'layer-components:(h-full outline-none overscroll-contain min-h-0)',
+	'layer-components:(h-full outline-none min-h-0)',
 	'layer-components:focus-visible:(outline-none ring-2 ring-accent)',
 );
 
 export const ScrollAreaVerticalFades = withClassName(
 	'div',
 	'layer-components:(pointer-events-none absolute inset-0 [--scroll-area-overflow-y-start:inherit] [--scroll-area-overflow-y-end:inherit])',
-	'layer-components:before:(content-empty [--scroll-area-overflow-y-start:inherit] top-0 block left-0 w-full absolute transition-height h-[min(40px,var(--scroll-area-overflow-y-start,,40px))] bg-gradient-to-b bg-gradient-from-bg bg-gradient-via-bg bg-gradient-to-transparent)',
-	'layer-components:after:(content-empty [--scroll-area-overflow-y-end:inherit] bottom-0 block left-0 w-full absolute transition-height h-[min(40px,var(--scroll-area-overflow-y-end,,40px))] bg-gradient-to-t bg-gradient-from-bg bg-gradient-via-bg bg-gradient-to-transparent)',
+	'layer-components:before:(content-empty [--scroll-area-overflow-y-start:inherit] top-0 block left-0 w-full absolute transition-height h-[min(40px,var(--scroll-area-overflow-y-start,40px))] bg-gradient-to-b bg-gradient-from-bg bg-gradient-to-transparent)',
+	'layer-components:after:(content-empty [--scroll-area-overflow-y-end:inherit] bottom-0 block left-0 w-full absolute transition-height h-[min(40px,var(--scroll-area-overflow-y-end,40px))] bg-gradient-to-t bg-gradient-from-bg bg-gradient-to-transparent)',
 );
 
 export const ScrollAreaHorizontalFades = withClassName(
 	'div',
 	'layer-components:(pointer-events-none absolute inset-0 [--scroll-area-overflow-x-start:inherit] [--scroll-area-overflow-x-end:inherit])',
-	'layer-components:before:(content-empty [--scroll-area-overflow-x-start:inherit] left-0 block top-0 h-full absolute transition-width w-[min(40px,var(--scroll-area-overflow-x-start,,40px))] bg-gradient-to-r bg-gradient-from-bg bg-gradient-to-transparent)',
-	'layer-components:after:(content-empty [--scroll-area-overflow-x-end:inherit] right-0 block top-0 h-full absolute transition-width w-[min(40px,var(--scroll-area-overflow-x-end,,40px))] bg-gradient-to-l bg-gradient-from-bg bg-gradient-to-transparent)',
+	'layer-components:before:(content-empty [--scroll-area-overflow-x-start:inherit] left-0 block top-0 h-full absolute transition-width w-[min(40px,var(--scroll-area-overflow-x-start,40px))] bg-gradient-to-r bg-gradient-from-bg bg-gradient-to-transparent)',
+	'layer-components:after:(content-empty [--scroll-area-overflow-x-end:inherit] right-0 block top-0 h-full absolute transition-width w-[min(40px,var(--scroll-area-overflow-x-end,40px))] bg-gradient-to-l bg-gradient-from-bg bg-gradient-to-transparent)',
 );
 
 export const ScrollAreaViewportFades = () => (
@@ -39,9 +41,20 @@ export const ScrollAreaViewportFades = () => (
 	</>
 );
 
+const BaseScrollContentWithoutMinWidth = (
+	props: ScrollAreaContentProps & { ref?: Ref<HTMLDivElement> },
+) => (
+	<BaseScrollArea.Content
+		{...props}
+		style={{ ...props.style, minWidth: undefined }}
+	/>
+);
+BaseScrollContentWithoutMinWidth.displayName = 'ScrollAreaContent';
+
 export const ScrollAreaContent = withClassName(
-	BaseScrollArea.Content,
+	BaseScrollContentWithoutMinWidth,
 	'layer-components:(flex flex-col)',
+	'layer-components:[[data-scroll-direction=horizontal]>&,[data-scroll-direction=both]>&]:min-w-min-content',
 );
 
 export const ScrollAreaThumb = withClassName(
@@ -80,17 +93,31 @@ export const ScrollAreaCorner = withClassName(
 
 const ScrollAreaDefault = ({
 	disableFades,
+	direction,
 	...props
 }: ScrollAreaRootProps & {
 	disableFades?: boolean;
+	direction?: 'vertical' | 'horizontal' | 'both';
 }) => (
 	<ScrollAreaRoot {...props}>
-		<ScrollAreaViewport>
+		<ScrollAreaViewport
+			style={{
+				overflow:
+					direction === 'vertical'
+						? 'clip scroll'
+						: direction === 'horizontal'
+						? 'scroll clip'
+						: 'scroll scroll',
+			}}
+			data-scroll-direction={direction}
+		>
 			{props.children}
 			{!disableFades && <ScrollAreaViewportFades />}
 		</ScrollAreaViewport>
-		<ScrollAreaScrollbar />
-		<ScrollAreaScrollbar orientation="horizontal" />
+		{direction !== 'horizontal' && <ScrollAreaScrollbar />}
+		{direction !== 'vertical' && (
+			<ScrollAreaScrollbar orientation="horizontal" />
+		)}
 		<ScrollAreaCorner />
 	</ScrollAreaRoot>
 );