@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
596 lines • 21.7 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/feedback/PopoverPage.tsx";
import { Link } from '../../../../components/navigation';
import Library from '../../Library';
import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "preact/jsx-dev-runtime";
export default function PopoverPage() {
return _jsxDEV(Library.Page, {
title: "Popover",
intro: _jsxDEV(_Fragment, {
children: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Popover"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 11,
columnNumber: 13
}, this), " is a floating element rendered above other content and positioned next to an anchor element."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 10,
columnNumber: 11
}, this)
}, void 0, false),
children: _jsxDEV(Library.Section, {
title: "Popover",
intro: _jsxDEV(_Fragment, {
children: [_jsxDEV("p", {
children: ["By default, ", _jsxDEV("code", {
children: "Popover"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 22,
columnNumber: 27
}, this), " will be displayed below the anchor element, unless there is not enough space below."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 21,
columnNumber: 13
}, this), _jsxDEV("p", {
children: "It will always be at least as wide as the anchor element, but it can grow to fit its content if needed. However, it will never grow beyond the viewport."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 25,
columnNumber: 13
}, this), _jsxDEV("p", {
children: ["In browsers that support it, ", _jsxDEV("code", {
children: "Popover"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 31,
columnNumber: 44
}, this), " uses the", ' ', _jsxDEV(Link, {
target: "_blank",
href: "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover",
children: _jsxDEV("code", {
children: "popover"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 36,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 32,
columnNumber: 15
}, this), ' ', "attribute and gets toggled via", ' ', _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: 39,
columnNumber: 15
}, this), ". Otherwise, it is rendered as an absolute-positioned element, so it is recommended to wrap it and its anchor element in a relative-positioned container."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 30,
columnNumber: 13
}, this)]
}, void 0, true),
children: [_jsxDEV(Library.SectionL2, {
children: [_jsxDEV(Library.Usage, {
symbolName: "Popover"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 53,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
children: _jsxDEV(Library.Demo, {
title: "Basic Popover",
exampleFile: "popover-basic",
withSource: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 55,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 54,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 52,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Popover component API",
children: [_jsxDEV(Library.SectionL3, {
title: "align",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Determines to which side of the anchor element the popover should be aligned."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 66,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "'left' | 'right'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 71,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 70,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "'left'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 74,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 73,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 65,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Right-aligned Popover",
exampleFile: "popover-right",
withSource: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 77,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 64,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "anchorElementRef",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "A reference to the element to which the popover should anchor, which will be used to calculate the popover size and positioning."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 85,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: 'RefObject<HTMLElement | undefined>'
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 91,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 90,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 84,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 83,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "asNativePopover",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Determines if 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: 99,
columnNumber: 17
}, this), ' ', "should be used. It", "'", "s mainly used as a test seam, but can be used to explicitly disable use of the native popover API."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 97,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "boolean"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 109,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 108,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: [_jsxDEV("code", {
children: "true"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 112,
columnNumber: 17
}, this), " if the browser supports ", _jsxDEV("code", {
children: "[popover]"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 112,
columnNumber: 59
}, this), ". Otherwise it is ", _jsxDEV("code", {
children: "false"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 113,
columnNumber: 35
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 111,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 96,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 95,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "classes",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Additional CSS classes to pass to the popover."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 119,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "string | string[]"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 123,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 122,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "undefined"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 126,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 125,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 118,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 117,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "elementRef",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Ref for the popover", "'", "s outermost element."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 132,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: ["RefObject", '<', "HTMLElement", '>']
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 136,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 135,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 131,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 130,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "onClose",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Callback invoked when the popover is automatically closed by clicking away or pressing ", _jsxDEV("code", {
children: "Escape"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 146,
columnNumber: 43
}, this), ".", _jsxDEV("br", {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 147,
columnNumber: 17
}, this), "The caller should use this callback to keep local state in sync, so that the popover is re-rendered with ", _jsxDEV("code", {
children: "open"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 149,
columnNumber: 57
}, this), " set to", ' ', _jsxDEV("code", {
children: "false"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 150,
columnNumber: 17
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 144,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: '() => void'
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 153,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 152,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 143,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 142,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "onScroll",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Handler for ", '"', "scroll", '"', " events on the outermost element."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 159,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: '() => void | undefined'
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 163,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 162,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 158,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 157,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "open",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Whether the ", _jsxDEV("code", {
children: "Popover"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 170,
columnNumber: 29
}, this), " is currently open or not."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 169,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "boolean"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 173,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 172,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 168,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 167,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "restoreFocusOnClose",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Determines if focus should be restored when the", ' ', _jsxDEV("code", {
children: "Popover"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 181,
columnNumber: 17
}, this), " is closed."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 179,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "boolean"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 184,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 183,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "true"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 187,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 186,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 178,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 177,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "variant",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Set the ", _jsxDEV("code", {
children: "Popover"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 194,
columnNumber: 25
}, this), " style variant."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 193,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "'panel' | 'custom'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 197,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 196,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "'panel'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 200,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 199,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 192,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Custom Popover",
exampleFile: "popover-custom",
withSource: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 203,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 191,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 63,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 17,
columnNumber: 7
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 6,
columnNumber: 5
}, this);
}
//# sourceMappingURL=PopoverPage.js.map