@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
1,424 lines (1,423 loc) • 54 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/input/SelectPage.tsx";
import classnames from 'classnames';
import { useId, useState } from 'preact/hooks';
import { Link } from '../../../..';
import { Select } from '../../../../components/input/Select';
import SelectInInputGroup from '../../../examples/select-in-input-group';
import SelectWithManyOptions from '../../../examples/select-with-custom-options';
import Library from '../../Library';
import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "preact/jsx-dev-runtime";
const defaultItems = [{
id: '1',
name: 'All students'
}, {
id: '2',
name: 'Albert Banana'
}, {
id: '3',
name: 'Bernard California'
}, {
id: '4',
name: 'Cecelia Davenport'
}, {
id: '5',
name: 'Doris Evanescence'
}];
function SelectExample({
textOnly,
items = defaultItems,
...rest
}) {
const [value, setValue] = useState();
const buttonId = useId();
return _jsxDEV(_Fragment, {
children: [_jsxDEV("label", {
htmlFor: buttonId,
children: "Select a person"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 41,
columnNumber: 7
}, this), _jsxDEV(Select, {
...rest,
buttonId: buttonId,
value: value,
onChange: setValue,
buttonContent: value ? _jsxDEV(_Fragment, {
children: [textOnly && value.name, !textOnly && _jsxDEV("div", {
className: "flex",
children: [_jsxDEV("div", {
className: "rounded px-2 mr-2 bg-grey-7 text-white",
children: value.id
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 53,
columnNumber: 19
}, this), _jsxDEV("div", {
className: "truncate",
children: value.name
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 56,
columnNumber: 19
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 52,
columnNumber: 17
}, this)]
}, void 0, true) : _jsxDEV(_Fragment, {
children: "Select one\u2026"
}, void 0, false),
children: items.map(item => _jsxDEV(Select.Option, {
value: item,
disabled: item.disabled,
children: ({
disabled
}) => textOnly ? item.name : _jsxDEV("div", {
className: "flex",
children: [_jsxDEV("div", {
className: classnames('rounded px-2 mr-2 text-white', {
'bg-grey-7': !disabled,
'bg-grey-4': disabled
}),
children: item.id
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 72,
columnNumber: 19
}, this), _jsxDEV("div", {
className: "truncate",
children: item.name
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 80,
columnNumber: 19
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 71,
columnNumber: 17
}, this)
}, item.id, false, {
fileName: _jsxFileName,
lineNumber: 66,
columnNumber: 11
}, this))
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 42,
columnNumber: 7
}, this)]
}, void 0, true);
}
export default function SelectPage() {
return _jsxDEV(Library.Page, {
title: "Selects",
intro: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Select"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 97,
columnNumber: 11
}, this), " and ", _jsxDEV("code", {
children: "MultiSelect"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 97,
columnNumber: 35
}, this), " are composite components which behave like the native ", _jsxDEV("code", {
children: '<select>'
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 98,
columnNumber: 51
}, this), ' ', "element."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 96,
columnNumber: 9
}, this),
children: [_jsxDEV(Library.Section, {
title: "Select",
intro: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Select"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 107,
columnNumber: 13
}, this), " renders a single-selection drop-down control."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 106,
columnNumber: 11
}, this),
children: [_jsxDEV(Library.SectionL2, {
children: [_jsxDEV(Library.Usage, {
componentName: "Select"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 112,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
children: _jsxDEV(Library.Demo, {
title: "Basic Select",
exampleFile: "select-basic",
withSource: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 115,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 114,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 111,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Working with Select",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Select"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 125,
columnNumber: 13
}, this), " toggles a listbox where ", _jsxDEV("code", {
children: "Options"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 125,
columnNumber: 57
}, this), "'", " UI can be customized and values can be objects."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 124,
columnNumber: 11
}, this), _jsxDEV("p", {
children: ["A ", _jsxDEV(Library.Link, {
href: "/feedback-popover",
children: "Popover"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 129,
columnNumber: 15
}, this), ' ', "component is used to wrap the listbox and ensure it is always correctly positioned."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 128,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "Composing and styling Selects",
children: [_jsxDEV(Library.Demo, {
title: "Select with custom Options",
exampleFile: "select-with-custom-options",
withSource: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 135,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Select in InputGroup",
exampleFile: "select-in-input-group",
withSource: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 141,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 134,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "Select with many options",
children: _jsxDEV(Library.Demo, {
title: "Select with many options",
children: _jsxDEV(SelectWithManyOptions, {
items: [...defaultItems.map(({
id,
name
}) => ({
id: `1${id}`,
name: `1 ${name}`
})), ...defaultItems.map(({
id,
name
}) => ({
id: `2${id}`,
name: `2 ${name}`
})), ...defaultItems.map(({
id,
name
}) => ({
id: `3${id}`,
name: `3 ${name}`
})), ...defaultItems.map(({
id,
name
}) => ({
id: `4${id}`,
name: `4 ${name}`
})), ...defaultItems.map(({
id,
name
}) => ({
id: `5${id}`,
name: `5 ${name}`
})), ...defaultItems.map(({
id,
name
}) => ({
id: `6${id}`,
name: `6 ${name}`
}))]
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 150,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 149,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 148,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "Labeling Select",
children: [_jsxDEV("p", {
children: ["There are three ways to label a ", _jsxDEV("code", {
children: "Select"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 183,
columnNumber: 47
}, this), ". Make sure you always use one of them."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 182,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: _jsxDEV(_Fragment, {
children: ["Via", ' ', _jsxDEV("code", {
children: ['<', "label ", '/>']
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 191,
columnNumber: 19
}, this), ' ', "linked to ", _jsxDEV("code", {
children: "buttonId"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 194,
columnNumber: 29
}, this)]
}, void 0, true),
exampleFile: "select-basic",
withSource: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 187,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Via aria-label",
exampleFile: "select-aria-label",
withSource: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 201,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Via aria-labelledby",
exampleFile: "select-aria-labelledby",
withSource: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 207,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 181,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "Select with long content",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Select"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 216,
columnNumber: 15
}, this), " makes sure the button content never overflows, and applies ", _jsxDEV("code", {
children: "text-overflow: ellipsis"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 217,
columnNumber: 27
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 215,
columnNumber: 13
}, this), _jsxDEV("p", {
children: ["If you provide more complex children to ", _jsxDEV("code", {
children: "buttonContent"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 220,
columnNumber: 55
}, this), ", and the default hidden overflow logic does not work for your use case, it is up to you to handle the overflow logic in your components."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 219,
columnNumber: 13
}, this), _jsxDEV("p", {
children: "On the other hand, the listbox will always grow to fit its options."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 225,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Plain text",
children: _jsxDEV("div", {
className: "mx-auto",
children: _jsxDEV(SelectExample, {
textOnly: true,
buttonClasses: "!w-36",
items: defaultItems.map(({
name,
...rest
}) => ({
...rest,
name: `${name} (this item has very long text)`
}))
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 232,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 231,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 230,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Custom options",
children: _jsxDEV("div", {
className: "mx-auto",
children: _jsxDEV(SelectExample, {
buttonClasses: "!w-36"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 245,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 244,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 243,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Input group",
children: _jsxDEV("div", {
className: "mx-auto",
children: _jsxDEV(SelectInInputGroup, {
buttonClasses: "!w-36",
wrapperClasses: ""
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 251,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 250,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 249,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 214,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 123,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Select component API",
children: [_jsxDEV("code", {
children: "Select"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 258,
columnNumber: 11
}, this), " accepts all standard", ' ', _jsxDEV(Library.Link, {
href: "/using-components#composite-components-api",
children: "composite component props"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 259,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "value",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Represents currently selected Option."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 264,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "T"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 268,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 267,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 263,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 262,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "onChange",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "A callback invoked every time selected value changes."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 274,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "(newValue: T) => void"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 278,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 277,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 273,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 272,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "buttonContent",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "The content to be displayed in the toggle button."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 284,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "ComponentChildren"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 288,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 287,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 283,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 282,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "buttonId",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["The toggle button", "'", "s ", _jsxDEV("code", {
children: "id"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 295,
columnNumber: 41
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 294,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "string"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 298,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 297,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "undefined"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 301,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 300,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 293,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 292,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "disabled",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Whether the Select is disabled or not."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 307,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "boolean"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 311,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 310,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "undefined"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 314,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 313,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 306,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Disabled Select",
exampleFile: "select-disabled",
withSource: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 317,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 305,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "alignListbox",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Whether the listbox should be aligned to the right or left side of the toggle button."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 325,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "'left' | 'right'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 330,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 329,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "'left'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 333,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 332,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 324,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Right-aligned listbox",
exampleFile: "select-right",
withSource: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 336,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 323,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "buttonClasses",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Additional classes to pass to toggle button."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 344,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "string | string[]"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 348,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 347,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "undefined"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 351,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 350,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 343,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Custom button",
children: _jsxDEV("div", {
className: "w-96 mx-auto",
children: _jsxDEV(SelectExample, {
buttonClasses: "!bg-yellow-notice"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 356,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 355,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 354,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 342,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "containerClasses",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Additional classes to pass to container."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 362,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "string | string[]"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 366,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 365,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "undefined"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 369,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 368,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 361,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Custom container",
children: _jsxDEV("div", {
className: "w-96 mx-auto",
children: _jsxDEV(SelectExample, {
containerClasses: "border-4 border-yellow-notice"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 374,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 373,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 372,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 360,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "listboxAsPopover",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Determines if the listbox should be rendered using the", ' ', _jsxDEV(Link, {
target: "_blank",
href: "https://developer.mozilla.org/en-US/docs/Web/API/Popover_API",
children: "popover API"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 382,
columnNumber: 17
}, this), ". It", "'", "s mainly used as a test seam, but can help explicitly disabling this behavior if needed."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 380,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "boolean"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 392,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 391,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: [_jsxDEV("code", {
children: "true"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 395,
columnNumber: 17
}, this), " if the browser supports ", _jsxDEV("code", {
children: "[popover]"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 395,
columnNumber: 59
}, this), ". Otherwise it is ", _jsxDEV("code", {
children: "false"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 396,
columnNumber: 35
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 394,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 379,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Non-popover listbox",
exampleFile: "select-non-popover-listbox",
withSource: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 399,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 378,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "popoverClasses",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Additional classes to pass to the popover."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 407,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "string | string[]"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 411,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 410,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "undefined"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 414,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 413,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 406,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Custom popover",
children: _jsxDEV("div", {
className: "w-96 mx-auto",
children: _jsxDEV(SelectExample, {
popoverClasses: "border-4 border-yellow-notice"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 419,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 418,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 417,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 405,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "listboxOverflow",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Determines the behavior of the listbox options when their content is larger than the listbox.", _jsxDEV("ul", {
className: "list-disc",
children: [_jsxDEV("li", {
children: [_jsxDEV("code", {
children: "'truncate'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 430,
columnNumber: 21
}, this), ": Text will use one line and be truncated with an ellipsis."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 429,
columnNumber: 19
}, this), _jsxDEV("li", {
children: [_jsxDEV("code", {
children: "'wrap'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 434,
columnNumber: 21
}, this), ": Text will span multiple lines if needed, ensuring all content is visible."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 433,
columnNumber: 19
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 428,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 425,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "'truncate' | 'wrap'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 440,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 439,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "'truncate'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 443,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 442,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 424,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Truncate listbox options",
exampleFile: "select-truncate-listbox",
withSource: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 446,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Wrap listbox options",
exampleFile: "select-wrap-listbox",
withSource: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 451,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 423,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "onPopoverScroll",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["A callback passed to the ", _jsxDEV("code", {
children: "Popover"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 460,
columnNumber: 42
}, this), "'", "s ", _jsxDEV("code", {
children: "onScroll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 461,
columnNumber: 24
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 459,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: ["() ", '=>', " void ", '|', " undefined"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 464,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 463,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "undefined"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 469,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 468,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 458,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 457,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 257,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Select.Option component API",
children: [_jsxDEV(Library.SectionL3, {
title: "children",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Content of the option. You can pass a callback to receive the option status (", _jsxDEV("code", {
children: "disabled"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 480,
columnNumber: 32
}, this), " and ", _jsxDEV("code", {
children: "selected"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 480,
columnNumber: 58
}, this), ")."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 478,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: ["ComponentChildren | ((", '{', " disabled, selected ", '}', ") ", '=>', ' ', "ComponentChildren)"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 483,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 482,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 477,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 476,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "value",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "The value to set when this option is selected."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 492,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "T"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 496,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 495,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 491,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 490,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "disabled",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Whether the option is disabled or not."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 502,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "boolean"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 506,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 505,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "undefined"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 509,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 508,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 501,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Disabled options",
children: _jsxDEV("div", {
className: "w-96 mx-auto",
children: _jsxDEV(SelectExample, {
items: defaultItems.map(item => item.id !== '4' ? item : {
...item,
disabled: true
})
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 514,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 513,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 512,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 500,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "classes",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["CSS class(es) that will be appended to the CSS classes applied to the options", "'", "s outermost element."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 524,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "string | string[] | undefined"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 529,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 528,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "undefined"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 532,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 531,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 523,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 522,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "elementRef",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["A ", _jsxDEV("code", {
children: "Ref"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 539,
columnNumber: 19
}, this), " applied to the option", "'", "s outermost element."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 538,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: ["MutableRef", '<', "HTMLElement | undefined", '>', " | undefined"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 543,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 542,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "undefined"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 548,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 547,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 537,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 536,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "title",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["If provided, it is set as the option", "'", "s ", _jsxDEV("code", {