@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
966 lines • 34.1 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/data/ScrollBoxPage.tsx";
import { ScrollBox, Scroll, ScrollContainer, ScrollContent } from '../../../../';
import Library from '../../Library';
import { SampleListElements } from '../samples';
import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "preact/jsx-dev-runtime";
export default function ScrollBoxPage() {
return _jsxDEV(Library.Page, {
title: "ScrollBox",
intro: _jsxDEV("p", {
children: ["The composite ", _jsxDEV("code", {
children: "ScrollBox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 16,
columnNumber: 25
}, this), " component provides a container for scrolling content, while individual ", _jsxDEV("code", {
children: "Scroll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 17,
columnNumber: 51
}, this), " components are available for additional customization if needed."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 15,
columnNumber: 9
}, this),
children: [_jsxDEV(Library.Section, {
title: "ScrollBox",
intro: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "ScrollBox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 26,
columnNumber: 13
}, this), " is an opinionated composite component that provides a shorthand for styling scrollable content."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 25,
columnNumber: 11
}, this),
children: [_jsxDEV(Library.SectionL2, {
children: [_jsxDEV(Library.Usage, {
componentName: "ScrollBox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 32,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
title: "Basic Scrollbox",
withSource: true,
children: _jsxDEV("div", {
className: "w-[280px] h-[200px]",
children: _jsxDEV(ScrollBox, {
children: _jsxDEV("ul", {
children: _jsxDEV(SampleListElements, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 37,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 36,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 35,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 34,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 33,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 31,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Component API",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "ScrollBox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 46,
columnNumber: 13
}, this), " accepts all standard", ' ', _jsxDEV(Library.Link, {
href: "/using-components#composite-components-api",
children: "composite component props"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 47,
columnNumber: 13
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 45,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "borderless",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Disable the border on the ", _jsxDEV("code", {
children: "ScrollBox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 55,
columnNumber: 43
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 54,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "boolean"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 58,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 57,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "false"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 61,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 60,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 53,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Turning off borders",
withSource: true,
children: _jsxDEV("div", {
className: "w-[280px] h-[200px]",
children: _jsxDEV(ScrollBox, {
borderless: true,
children: _jsxDEV("ul", {
children: _jsxDEV(SampleListElements, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 68,
columnNumber: 21
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 67,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 66,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 65,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 64,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 52,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 44,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 22,
columnNumber: 7
}, this), _jsxDEV(Library.Section, {
title: "Working with scrolling components",
intro: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Scroll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 81,
columnNumber: 13
}, this), " and its allies allow for more customization control if ", _jsxDEV("code", {
children: "ScrollBox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 82,
columnNumber: 24
}, this), " ", "doesn't", " meet flexibility needs."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 80,
columnNumber: 11
}, this),
children: _jsxDEV(Library.SectionL2, {
title: "Composing Scroll components",
children: _jsxDEV(Library.SectionL3, {
children: [_jsxDEV("p", {
children: ["Sizing constraints are dictated by the immediate parent container of the outermost ", _jsxDEV("code", {
children: "Scroll*"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 91,
columnNumber: 32
}, this), " component. Here and in following examples, the parent container sets width (", _jsxDEV("code", {
children: "320px"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 93,
columnNumber: 15
}, this), ") and height (", _jsxDEV("code", {
children: "200px"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 93,
columnNumber: 47
}, this), ")."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 89,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Using Scroll components to manage scroll",
withSource: true,
children: _jsxDEV("div", {
className: "w-[320px] h-[200px]",
children: _jsxDEV(ScrollContainer, {
children: _jsxDEV(Scroll, {
children: _jsxDEV(ScrollContent, {
children: _jsxDEV("ul", {
children: _jsxDEV(SampleListElements, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 104,
columnNumber: 25
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 103,
columnNumber: 23
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 102,
columnNumber: 21
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 101,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 100,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 99,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 95,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 88,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 87,
columnNumber: 9
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 77,
columnNumber: 7
}, this), _jsxDEV(Library.Section, {
title: "Scroll",
intro: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Scroll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 119,
columnNumber: 13
}, this), " is a presentational component providing a fluid container that scrolls on overflow."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 118,
columnNumber: 11
}, this),
children: [_jsxDEV(Library.SectionL2, {
children: [_jsxDEV(Library.Usage, {
componentName: "Scroll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 125,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
children: _jsxDEV(Library.Demo, {
title: "Basic Scroll",
withSource: true,
children: _jsxDEV("div", {
className: "w-[320px] h-[200px]",
children: _jsxDEV(Scroll, {
children: _jsxDEV("ul", {
children: _jsxDEV(SampleListElements, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 131,
columnNumber: 21
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 130,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 129,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 128,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 127,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 126,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 124,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Component API",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Scroll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 141,
columnNumber: 13
}, this), " accepts all standard", ' ', _jsxDEV(Library.Link, {
href: "/using-components#presentational-components-api",
children: "presentational component props"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 142,
columnNumber: 13
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 140,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "variant",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: [_jsxDEV("code", {
children: "Scroll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 150,
columnNumber: 17
}, this), "'s", " default ", _jsxDEV("code", {
children: "'raised'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 151,
columnNumber: 32
}, this), " ", _jsxDEV("code", {
children: "variant"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 151,
columnNumber: 58
}, this), ' ', "renders CSS shadows to hint that content is scrollable. These can be disabled by using the ", _jsxDEV("code", {
children: "flat"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 153,
columnNumber: 46
}, this), " variant."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 149,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `'raised' | 'flat'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 156,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 155,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: 'raised'
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 159,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 158,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 148,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "variant:'flat'",
withSource: true,
children: _jsxDEV("div", {
className: "w-[320px] h-[200px]",
children: _jsxDEV(Scroll, {
variant: "flat",
children: _jsxDEV("ul", {
children: _jsxDEV(SampleListElements, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 167,
columnNumber: 21
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 166,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 165,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 164,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 163,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 147,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "...htmlAttributes",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: [_jsxDEV("code", {
children: "Scroll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 177,
columnNumber: 17
}, this), " accepts HTML element attributes"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 176,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `JSX.HTMLAttributes<HTMLElement>`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 180,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 179,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 175,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 174,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 139,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 115,
columnNumber: 7
}, this), _jsxDEV(Library.Section, {
title: "ScrollContent",
intro: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "ScrollContent"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 191,
columnNumber: 13
}, this), " is a presentational component that puts consistent padding and spacing around content in a", ' ', _jsxDEV("code", {
children: "Scroll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 193,
columnNumber: 13
}, this), " component."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 190,
columnNumber: 11
}, this),
children: [_jsxDEV(Library.SectionL2, {
children: [_jsxDEV(Library.Usage, {
componentName: "ScrollContent"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 198,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
children: _jsxDEV(Library.Demo, {
title: "Scroll with ScrollContent",
withSource: true,
children: _jsxDEV("div", {
className: "w-[320px] h-[200px]",
children: _jsxDEV(Scroll, {
children: _jsxDEV(ScrollContent, {
children: _jsxDEV("ul", {
children: _jsxDEV(SampleListElements, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 205,
columnNumber: 23
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 204,
columnNumber: 21
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 203,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 202,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 201,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 200,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 199,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 197,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Component API",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "ScrollContent"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 216,
columnNumber: 13
}, this), " accepts all standard", ' ', _jsxDEV(Library.Link, {
href: "/using-components#presentational-components-api",
children: "presentational component props"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 217,
columnNumber: 13
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 215,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "...htmlAttributes",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: [_jsxDEV("code", {
children: "Scroll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 225,
columnNumber: 17
}, this), " accepts HTML element attributes"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 224,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `JSX.HTMLAttributes<HTMLDivElement>`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 228,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 227,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 223,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 222,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 214,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 187,
columnNumber: 7
}, this), _jsxDEV(Library.Section, {
title: "ScrollContainer",
intro: _jsxDEV(_Fragment, {
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "ScrollContainer"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 240,
columnNumber: 15
}, this), " is a presentational component that allows the combination of scrolling and non-scrolling content to be constrained to the parent ", "container's", " dimensions. This is very handy when trying to constrain complex content within, e.g., a modal."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 239,
columnNumber: 13
}, this), _jsxDEV("p", {
children: ["Only the content within ", _jsxDEV("code", {
children: "Scroll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 247,
columnNumber: 39
}, this), " actually scrolls."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 246,
columnNumber: 13
}, this)]
}, void 0, true),
children: [_jsxDEV(Library.SectionL2, {
children: [_jsxDEV(Library.Usage, {
componentName: "ScrollContainer"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 253,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
title: "Basic ScrollContainer",
withSource: true,
children: _jsxDEV("div", {
className: "w-[320px] h-[200px]",
children: _jsxDEV(ScrollContainer, {
children: [_jsxDEV("div", {
className: "p-2 border-b",
children: "Non-scrolling content here"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 258,
columnNumber: 17
}, this), _jsxDEV(Scroll, {
children: _jsxDEV(ScrollContent, {
children: _jsxDEV("ul", {
children: _jsxDEV(SampleListElements, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 262,
columnNumber: 23
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 261,
columnNumber: 21
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 260,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 259,
columnNumber: 17
}, this), _jsxDEV("div", {
className: "p-2 border-t",
children: "More non-scrolling content"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 266,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 257,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 256,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 255,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 252,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Component API",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "ScrollContainer"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 274,
columnNumber: 13
}, this), " accepts all standard", ' ', _jsxDEV(Library.Link, {
href: "/using-components#presentational-components-api",
children: "presentational component props"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 275,
columnNumber: 13
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 273,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "borderless",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Disable the border on the ", _jsxDEV("code", {
children: "ScrollContainer"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 283,
columnNumber: 43
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 282,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "boolean"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 286,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 285,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "false"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 289,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 288,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 281,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV("div", {
className: "w-[320px] h-[200px]",
children: _jsxDEV(ScrollContainer, {
borderless: true,
children: [_jsxDEV("div", {
className: "p-2 border-b",
children: "Non-scrolling content here"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 296,
columnNumber: 19
}, this), _jsxDEV(Scroll, {
children: _jsxDEV(ScrollContent, {
children: _jsxDEV("ul", {
children: _jsxDEV(SampleListElements, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 300,
columnNumber: 25
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 299,
columnNumber: 23
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 298,
columnNumber: 21
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 297,
columnNumber: 19
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 295,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 294,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 293,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 280,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "...htmlAttributes",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: [_jsxDEV("code", {
children: "ScrollContainer"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 312,
columnNumber: 17
}, this), " accepts HTML element attributes"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 311,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `JSX.HTMLAttributes<HTMLDivElement>`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 315,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 314,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 310,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 309,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 272,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 235,
columnNumber: 7
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 12,
columnNumber: 5
}, this);
}
//# sourceMappingURL=ScrollBoxPage.js.map