"}),"s."]})},iconBefore:{type:{name:"union",value:[{name:"node"},{name:"string"}]},required:!1,defaultValue:void 0,description:(0,a.jsx)("p",{children:"An icon to place before the text. If the value is a string, it should name an Assembly icon. If you bring your own SVG or want finer-grained control over how the Icon component is used, pass an element."})},iconAfter:{type:{name:"union",value:[{name:"node"},{name:"string"}]},required:!1,defaultValue:void 0,description:(0,a.jsxs)("p",{children:["An icon to place after the text. See details documented for"," ",(0,a.jsx)("code",{children:"iconBefore"}),"."]})},inline:{type:{name:"bool"},required:!1,defaultValue:"false",description:(0,a.jsx)("p",{children:"A boolean indicating whether the component's wrapper element should be 'flex' (false) or 'inline-flex' (true)."})}},examples:[{exampleModule:t(9550),code:'
import React
from \'react\';\n
import IconText
from \'@mapbox/mr-ui/icon-text\';\n\n
export default class Example extends React.Component {\n
render() {\n
return (\n
<button\n aria-label="Duplicate"\n type="button"\n className="link txt-bold txt-s block"\n >\n <IconText iconBefore="duplicate">Duplicate</IconText>\n </button>\n
);\n
}\n
}',description:(0,a.jsx)("p",{children:"The standard button-without-a-background look. Also useful for menu items."})},{exampleModule:t(2781),code:'
import React
from \'react\';\n
import IconText
from \'@mapbox/mr-ui/icon-text\';\n\n
export default class Example extends React.Component {\n
render() {\n
return (\n
<button\n aria-label="Take me there"\n type="button"\n className="link link--purple"\n >\n <IconText iconAfter="chevron-right">Take me there</IconText>\n </button>\n
);\n
}\n
}',description:(0,a.jsx)("p",{children:"Go see the next thing!"})},{exampleModule:t(2960),code:'
import React
from \'react\';\n
import IconText
from \'@mapbox/mr-ui/icon-text\';\n
import Icon
from \'@mapbox/mr-ui/icon\';\n\n
export default class Example extends React.Component {\n
render() {\n
return (\n
<IconText\n inline={true}\n iconBefore={<Icon name="github" />}\n iconAfter="check"\n >\n <span className="txt-kbd">hi</span>\n </IconText>\n
);\n
}\n
}',description:(0,a.jsx)("p",{children:"Inline, both icons and the child is JSX"})}]},{name:"LoaderFull",description:null,props:{opaque:{type:{name:"bool"},required:!1,defaultValue:void 0,description:(0,a.jsxs)("p",{children:["By default, the loader's overlay is semi-transparent. If this prop is ",(0,a.jsx)("code",{children:"true"}),", the component hides the contents of the page with an entirely opaque container."]})}},examples:[{exampleModule:t(3264),code:'
import React
, { useEffect
, useState
} from \'react\';\n
import LoaderFull
from \'@mapbox/mr-ui/loader-full\';\n\n
export default function Example() {\n
const [loading
, setLoading
] = useState(false);\n\n
useEffect(() => {\n
let timer
;\n\n
if (loading
) {\n timer
= setTimeout(() => {\n
setLoading(false);\n
}, 3000);\n
}\n\n
return () => {\n
if (timer
) {\n
clearTimeout(timer
);\n
}\n
}\n
}, [loading
]);\n\n
return (\n
<>\n <button\n aria-label="Show loader"\n className="btn"\n onClick={() => setLoading(true)}\n >\n Show loader\n </button>\n {loading
&& <LoaderFull />}\n </>\n
);\n
}',description:(0,a.jsx)("p",{children:"Click the button to show the loader for 3 seconds."})},{exampleModule:t(9977),code:'
import React
, { useEffect
, useState
} from \'react\';\n
import LoaderFull
from \'@mapbox/mr-ui/loader-full\';\n\n
export default function Example() {\n
const [loading
, setLoading
] = useState(false);\n\n
useEffect(() => {\n
let timer
;\n\n
if (loading
) {\n timer
= setTimeout(() => {\n
setLoading(false);\n
}, 3000);\n
}\n\n
return () => {\n
if (timer
) {\n
clearTimeout(timer
);\n
}\n
}\n
}, [loading
]);\n\n
return (\n
<>\n <button\n aria-label="Show loader"\n className="btn"\n onClick={() => setLoading(true)}\n >\n Show loader\n </button>\n {loading
&& <LoaderFull opaque={true} />}\n </>\n
);\n
}',description:(0,a.jsx)("p",{children:"An opaque loader. Click the button to show it for three seconds."})}]},{name:"LoaderLocal",description:null,props:{themeLoader:{type:{name:"string"},required:!1,defaultValue:"'bg-gray-faint'",description:(0,a.jsx)("p",{children:"Assembly classes to apply to the loader component"})}},examples:[{exampleModule:t(9160),code:'
import React
, { useState
} from \'react\';\n
import LoaderLocal
from \'@mapbox/mr-ui/loader-local\';\n\n
export default function Example() {\n
const [loading
, setLoading
] = useState(false);\n\n
return (\n
<div className="flex">\n <button\n className="btn"\n onClick={() => setLoading(!loading)}\n >\n Toggle loader\n </button>\n <div className="relative ml12">\n {loading
&& <LoaderLocal />}\n </div>\n </div>\n
);\n
}',description:(0,a.jsx)("p",{children:"Toggle a local loader on and off."})}]},{name:"MinimumDurationLoader",description:(0,a.jsxs)("p",{children:["Display a loading indicator in place of its children until the"," ",(0,a.jsx)("code",{children:"isLoaded"}),"prop is true. The indicator will be displayed for a minimum amount of time as specified by the ",(0,a.jsx)("code",{children:"minDuration"}),"."]}),props:{children:{type:{name:"node"},required:!0,defaultValue:void 0,description:(0,a.jsx)("p",{children:"The content of the modal."})},isLoaded:{type:{name:"bool"},required:!0,defaultValue:void 0,description:(0,a.jsxs)("p",{children:["When ",(0,a.jsx)("code",{children:"false"})," the loader will continue to display until this is passed as `true."]})},loader:{type:{name:"node"},required:!1,defaultValue:'
',description:(0,a.jsx)("p",{children:"An optional for passing a custom loader."})},minDuration:{type:{name:"number"},required:!1,defaultValue:"1000",description:(0,a.jsx)("p",{children:"The minimum duration the loader should appear for (defaults to one second)."})}},examples:[{exampleModule:t(2270),code:'
import React
, { useState
, useEffect
} from \'react\';\n
import MinimumDurationLoader
from \'@mapbox/mr-ui/minimum-duration-loader\';\n\n
export default function Example() {\n
const [loading
, setLoading
] = useState(false);\n\n \n
useEffect(() => {\n
let timer
;\n\n timer
= setTimeout(() => {\n
setLoading(true);\n
}, 500);\n\n
return () => {\n
if (timer
) {\n
clearTimeout(timer
);\n
}\n
}\n
}, [loading
]);\n\n
return (\n
<div className="flex flex--center-cross">\n <button\n className="btn"\n onClick={() => setLoading(false)}\n >\n Restart loader\n </button>\n <div className="ml12">\n <MinimumDurationLoader isLoaded={loading}>\n Peekaboo!\n </MinimumDurationLoader>\n </div>\n </div>\n
);\n
}',description:(0,a.jsx)("p",{children:"Restart the loader to see a loader for 1 second before the content appears."})}]},{name:"Modal",description:(0,a.jsxs)("div",{children:[(0,a.jsx)("p",{children:"An accessible modal dialog."}),(0,a.jsxs)("p",{children:["To get a standard button arrangement at the bottom of the modal, use the",(0,a.jsx)("code",{children:"primaryAction"}),", ",(0,a.jsx)("code",{children:"secondaryAction"}),", and"," ",(0,a.jsx)("code",{children:"tertiaryAction"})," props."]}),(0,a.jsxs)("p",{children:["This modal ",(0,a.jsx)("em",{children:"traps focus within it"}),". You should be aware of that, because it can sometimes introduce a hurdle when integrating the modal with other things, especially third-party libraries. But it's an essential UX feature."]})]}),props:{accessibleTitle:{type:{name:"string"},required:!0,defaultValue:void 0,description:(0,a.jsxs)("div",{children:[(0,a.jsx)("p",{children:"A screen-reader-friendly modal title. Required for accessibility."}),(0,a.jsxs)("p",{children:["This ",(0,a.jsx)("strong",{children:"will not be displayed."})," It's only for screen readers. You can visually display your own header text however you'd like."]})]})},onExit:{type:{name:"func"},required:!1,defaultValue:void 0,description:(0,a.jsxs)("div",{children:[(0,a.jsx)("p",{children:"Invoked when the modal should close. When this callback is provided, a close button will be in the top right corner, and a click on the underlay or the Escape key will close the modal."}),(0,a.jsx)("p",{children:"If this prop is not provided, the close button will not be present and a click on the underlay or Escape will not close the modal. The reason you might not provide this function is that you want to force the user to do something, instead of allowing them to sneak out of the modal."})]})},exitOnUnderlayClicked:{type:{name:"bool"},required:!1,defaultValue:"true",description:(0,a.jsxs)("p",{children:["If ",(0,a.jsx)("code",{children:"onExit"})," is provided but this prop is set as false, a click on the underlay will not close the modal. The only way of closing the modal is clicking on the close button."]})},size:{type:{name:"enum",value:[{value:"'small'",computed:!1},{value:"'large'",computed:!1},{value:"'auto'",computed:!1}]},required:!1,defaultValue:"'large'",description:(0,a.jsxs)("p",{children:["Modal container size. Options are ",(0,a.jsx)("code",{children:"small"}),","," ",(0,a.jsx)("code",{children:"large"}),", or ",(0,a.jsx)("code",{children:"auto"}),". If ",(0,a.jsx)("code",{children:"auto"}),"is provided, a width is not specified."]})},initialFocus:{type:{name:"string"},required:!1,defaultValue:void 0,description:(0,a.jsxs)("p",{children:["Selector for a specific element that should receive initial focus. The value will be passed to ",(0,a.jsx)("code",{children:"querySelector"}),"."]})},children:{type:{name:"node"},required:!0,defaultValue:void 0,description:(0,a.jsx)("p",{children:"The content of the modal."})},padding:{type:{name:"enum",value:[{value:"'large'",computed:!1},{value:"'none'",computed:!1}]},required:!1,defaultValue:"'large'",description:(0,a.jsxs)("p",{children:[(0,a.jsx)("code",{children:"'large'"})," or ",(0,a.jsx)("code",{children:"'none'"}),"."]})},margin:{type:{name:"enum",value:[{value:"'large'",computed:!1},{value:"'default'",computed:!1}]},required:!1,defaultValue:"'default'",description:(0,a.jsxs)("p",{children:[(0,a.jsx)("code",{children:"'large'"})," to compensate for a fixed top header or"," ",(0,a.jsx)("code",{children:"'default'"})," to be closer to the top of the viewport."]})},zIndex:{type:{name:"number"},required:!1,defaultValue:"'auto'",description:(0,a.jsx)("p",{children:"z-index of the modal"})},themeOverlay:{type:{name:"string"},required:!1,defaultValue:"''",description:(0,a.jsxs)("p",{children:["Additional CSS classes to apply to the overlay, along with existing classes ",(0,a.jsx)("code",{children:"fixed top bottom left right bg-darken50"})]})},themeContent:{type:{name:"string"},required:!1,defaultValue:"''",description:(0,a.jsxs)("p",{children:["Additional CSS classes to apply to the content, along with existing classes ",(0,a.jsx)("code",{children:"relative bg-white round"})]})},primaryAction:{type:{name:"shape",value:{text:{name:"string",required:!0},callback:{name:"func",required:!0},destructive:{name:"bool",required:!1}}},required:!1,defaultValue:void 0,description:(0,a.jsxs)("div",{children:[(0,a.jsx)("p",{children:"The modal's primary action. If this is provided, an encouraging button will be rendered at the bottom of the modal."}),(0,a.jsx)("p",{children:"Provide this and other action props if you want a standard button arrangement at the bottom of the modal. If you need a more custom arrangement, leave them out and insert your buttons into the content."}),(0,a.jsx)("p",{children:"The value is an object with the following properties:"}),(0,a.jsxs)("ul",{children:[(0,a.jsxs)("li",{children:[(0,a.jsx)("code",{children:"text"}),": ",(0,a.jsx)("strong",{children:"(required)"})," The text of the button."]}),(0,a.jsxs)("li",{children:[(0,a.jsx)("code",{children:"callback"}),": ",(0,a.jsx)("strong",{children:"(required)"})," Invoked when the button is clicked."]}),(0,a.jsxs)("li",{children:[(0,a.jsx)("code",{children:"destructive"}),": If ",(0,a.jsx)("code",{children:"true"}),", the"," ",(0,a.jsx)("a",{href:"#button",children:"Button"})," will be primed for desctruction."]})]})]})},secondaryAction:{type:{name:"shape",value:{text:{name:"string",required:!0},callback:{name:"func",required:!0}}},required:!1,defaultValue:void 0,description:(0,a.jsxs)("div",{children:[(0,a.jsxs)("p",{children:["The modal's secondary action. If this is provided, a discouraging button will be rendered at the bottom of the modal. See the description of",(0,a.jsx)("code",{children:"primaryAction"}),"."]}),(0,a.jsx)("p",{children:(0,a.jsxs)("strong",{children:["Can only be used in combination with ",(0,a.jsx)("code",{children:"primaryAction"}),"."]})}),(0,a.jsx)("p",{children:"The value is an object with the following properties:"}),(0,a.jsxs)("ul",{children:[(0,a.jsxs)("li",{children:[(0,a.jsx)("code",{children:"text"}),": ",(0,a.jsx)("strong",{children:"(required)"})," The text of the button."]}),(0,a.jsxs)("li",{children:[(0,a.jsx)("code",{children:"callback"}),": ",(0,a.jsx)("strong",{children:"(required)"})," Invoked when the button is clicked."]})]})]})},tertiaryAction:{type:{name:"shape",value:{text:{name:"string",required:!0},callback:{name:"func",required:!0}}},required:!1,defaultValue:void 0,description:(0,a.jsxs)("div",{children:[(0,a.jsxs)("p",{children:["The modal's tertiary action."," ",(0,a.jsx)("strong",{children:"You should rarely if ever need this."}),"If this is provided, a ",(0,a.jsx)("em",{children:"very"})," discouraging button will be rendered at the bottom of the modal. See the description of",(0,a.jsx)("code",{children:"primaryAction"}),"."]}),(0,a.jsx)("p",{children:(0,a.jsxs)("strong",{children:["Can only be used in combination with ",(0,a.jsx)("code",{children:"primaryAction"})," ","and",(0,a.jsx)("code",{children:"secondaryAction"}),"."]})}),(0,a.jsx)("p",{children:"The value is an object with the following properties:"}),(0,a.jsxs)("ul",{children:[(0,a.jsxs)("li",{children:[(0,a.jsx)("code",{children:"text"}),": ",(0,a.jsx)("strong",{children:"(required)"})," The text of the button."]}),(0,a.jsxs)("li",{children:[(0,a.jsx)("code",{children:"callback"}),": ",(0,a.jsx)("strong",{children:"(required)"})," Invoked when the button is clicked."]})]})]})},allowEventBubbling:{type:{name:"bool"},required:!1,defaultValue:"false",description:(0,a.jsx)("p",{children:"We stop propagation on clicks by default to enable more intuitive operation with React Portals. If you need click events to bubble up to parent components, set this prop to true"})}},examples:[{exampleModule:t(7438),code:'
import React
, { ReactElement
, useState
} from \'react\';\n
import Modal
from \'@mapbox/mr-ui/modal\';\n
import Button
from \'@mapbox/mr-ui/button\';\n\n
export default function Example(): ReactElement
{\n
const [modal
, setModal
] = useState
<boolean>(false);\n const renderModal = (): ReactElement => {\n
return (\n
<Modal\n accessibleTitle="Animals"\n onExit={() => setModal(false)}\n primaryAction={{ text: \'Okay\', callback: () => setModal(false) }}\n secondaryAction={{ text: \'Not sure\', callback: () => setModal(false) }}\n tertiaryAction={{ text: \'Really not sure\', callback: () => setModal(false) }}\n >\n <div className="prose">\n <h4>Animals</h4>\n <ul>\n <li>Humpback whale</li>\n <li>Rufous hummingbird</li>\n <li>Sea otter</li>\n <li>Snowshoe hare</li>\n </ul>\n </div>\n </Modal>\n
);\n
};\n\n return (\n <>\n <Button\n size="medium"\n onClick={() => setModal(true)}\n passthroughProps={{ \'aria-label\': \'Show modal\' }}\n >\n Show modal\n </Button>\n {modal
&& renderModal()}\n </>\n );\n}',description:(0,a.jsx)("p",{children:"The standard modal."})},{exampleModule:t(2669),code:'
import React
, { ReactElement
, useState
} from \'react\';\n
import Modal
from \'@mapbox/mr-ui/modal\';\n
import Button
from \'@mapbox/mr-ui/button\';\n\n
export default function Example(): ReactElement
{\n
const [modal
, setModal
] = useState(false);\n
const renderModal
= (): ReactElement => {\n
return (\n
<Modal\n accessibleTitle="Animals"\n onExit={() => setModal(false)}\n exitOnUnderlayClicked={false}\n padding="none"\n size="small"\n initialFocus="#modal-input"\n >\n <>\n <h2 className="px24 py24 bg-gray-dark color-white txt-h4 txt-fancy round-t">\n Animals!\n </h2>\n <div className="px24 py24">\n <div className="prose">\n <p>Type an animal name. Here are some suggestions:</p>\n <ul>\n <li>Humpback whale</li>\n <li>Rufous hummingbird</li>\n <li>Sea otter</li>\n <li>Snowshoe hare</li>\n </ul>\n </div>\n <div className="align-center mt24">\n <input className="input mb12" id="modal-input" />\n <Button\n size="medium"\n onClick={() => setModal(false)}\n passthroughProps={{ \'aria-label\': \'Done\' }}\n >\n Ok, done\n </Button>\n </div>\n </div>\n </>\n </Modal>\n
);\n
};\n\n
return (\n
<>\n <Button\n size="medium"\n onClick={() => setModal(true)}\n passthroughProps={{ \'aria-label\': \'Show modal\' }}\n >\n Show modal\n </Button>\n {modal
&& renderModal()}\n </>\n
);\n
}',description:(0,a.jsx)("p",{children:"A small modal, unpadded to allow for custom background coloring, with initial focus set on an input. Also features its own action special button. It does not exit on overlay clicked"})}]},{name:"Popover",description:(0,a.jsx)("p",{children:"Display a popover. The popover is positioned relative to an anchor element"}),props:{children:{type:{name:"node"},required:!0,defaultValue:void 0,description:(0,a.jsx)("p",{children:"The trigger element."})},active:{type:{name:"bool"},required:!1,defaultValue:"false",description:(0,a.jsx)("p",{children:"Triggers the active state of the popover. When true, the popover appears."})},content:{type:{name:"union",value:[{name:"func"},{name:"node"}]},required:!0,defaultValue:void 0,description:(0,a.jsx)("p",{children:"The popover content. This can either be a string, valid JSX, or a function returning either."})},placement:{type:{name:"enum",value:[{value:"'top'",computed:!1},{value:"'bottom'",computed:!1},{value:"'left'",computed:!1},{value:"'right'",computed:!1}]},required:!1,defaultValue:"'right'",description:(0,a.jsx)("p",{children:"Preferred placement of the popover in relation to the anchor. Adjusted according to available space."})},alignment:{type:{name:"enum",value:[{value:"'center'",computed:!1},{value:"'start'",computed:!1},{value:"'end'",computed:!1}]},required:!1,defaultValue:"'center'",description:(0,a.jsxs)("p",{children:[(0,a.jsx)("code",{children:"'center'"}),", ",(0,a.jsx)("code",{children:"'start'"}),", ",(0,a.jsx)("code",{children:"'end'"})," ","Alignment of the popover edge in relation to the trigger element."]})},coloring:{type:{name:"enum",value:[{value:"'light'",computed:!1},{value:"'dark'",computed:!1},{value:"'warning'",computed:!1},{value:"'error'",computed:!1}]},required:!1,defaultValue:"'light'",description:(0,a.jsxs)("p",{children:[(0,a.jsx)("code",{children:"'light'"}),", ",(0,a.jsx)("code",{children:"'dark'"}),", ",(0,a.jsx)("code",{children:"'warning'"}),", or ",(0,a.jsx)("code",{children:"'error'"}),"."]})},padding:{type:{name:"enum",value:[{value:"'medium'",computed:!1},{value:"'small'",computed:!1},{value:"'none'",computed:!1}]},required:!1,defaultValue:"'medium'",description:(0,a.jsxs)("p",{children:[(0,a.jsx)("code",{children:"'medium'"}),", ",(0,a.jsx)("code",{children:"'small'"}),", or ",(0,a.jsx)("code",{children:"'none'"}),"."]})},zIndex:{type:{name:"number"},required:!1,defaultValue:"'auto'",description:(0,a.jsx)("p",{children:"z-index of the popover."})},hasPointer:{type:{name:"bool"},required:!1,defaultValue:"true",description:(0,a.jsx)("p",{children:"Whether or not the popover has a triangle pointer."})},hideWhenAnchorIsOffscreen:{type:{name:"bool"},required:!1,defaultValue:"false",description:(0,a.jsxs)("div",{children:[(0,a.jsxs)("p",{children:["If ",(0,a.jsx)("code",{children:"true"}),", the popover will hide when its anchor is scrolled offscreen. By default, the popover will follow its anchor wherever it goes."]}),(0,a.jsxs)("p",{children:["If your anchor is within an internally scrolling area, you may want to use ",(0,a.jsx)("code",{children:"true"}),", so the popover doesn't existing in a disembodied state after its anchor is scrolled away."]})]})},allowPlacementAxisChange:{type:{name:"bool"},required:!1,defaultValue:"true",description:(0,a.jsxs)("p",{children:["If ",(0,a.jsx)("code",{children:"false"}),", the popover is ",(0,a.jsx)("em",{children:"not"})," allowed to change axes on the anchor when modifying its position to fit available space. By default, popovers on the",(0,a.jsx)("code",{children:"left"})," and ",(0,a.jsx)("code",{children:"right"}),", for example, might change to ",(0,a.jsx)("code",{children:"bottom"})," is there is neither space on the left nor the right."]})},clickOutsideCloses:{type:{name:"bool"},required:!1,defaultValue:"true",description:(0,a.jsxs)("p",{children:["If ",(0,a.jsx)("code",{children:"false"}),", clicking outside the popover will not close it. By default, it does."]})},escapeCloses:{type:{name:"bool"},required:!1,defaultValue:"true",description:(0,a.jsxs)("p",{children:["If ",(0,a.jsx)("code",{children:"false"}),", hitting Escape will not close the popover. By default, it does."]})},onExit:{type:{name:"func"},required:!1,defaultValue:void 0,description:(0,a.jsx)("p",{children:"A function called when popover is dismissed. You need to use this callback to remove the Popover from the rendered page."})},getInitialFocus:{type:{name:"func"},required:!1,defaultValue:"(e) => e.preventDefault()",description:(0,a.jsx)("p",{children:"A function that returns a DOM node. Use to specify which element should receive focus when popover is first rendered."})},offsetFromAnchor:{type:{name:"number"},required:!1,defaultValue:"6",description:(0,a.jsx)("p",{children:"Number of pixels by which the popover should be offset from its anchor."})},passthroughProps:{type:{name:"object"},required:!1,defaultValue:void 0,description:(0,a.jsxs)("p",{children:["Props to pass directly to popover content options from"," ",(0,a.jsx)("code",{children:"@radix-ui/react-popover"}),"."]})}},examples:[{exampleModule:t(1082),code:'
import React
, { ReactElement
, useState
} from \'react\';\n
import Popover
from \'@mapbox/mr-ui/popover\';\n\n
export default function Example(): ReactElement
{\n
const [open
, setOpen
] = useState(false);\n\n
const renderPopover
= <div>This is a popover.</div>;\n\n
return (\n
<Popover\n active={open}\n content={renderPopover}\n onExit={() => setOpen(false)}\n alignment="center"\n >\n <button className="btn" onClick={() => setOpen(!open)}>\n Toggle popover\n </button>\n </Popover>\n
);\n
}',description:(0,a.jsx)("p",{children:"Standard popover."})},{exampleModule:t(9961),code:'
import React
, { ReactElement
, useState
} from \'react\';\n
import Popover
from \'@mapbox/mr-ui/popover\';\n\n
export default function Example(): ReactElement
{\n
const [open
, setOpen
] = useState(false);\n\n
const renderPopover
= (\n
<>\n This is a dark popover.\n </>\n
);\n\n
return (\n
<Popover\n active={open}\n content={renderPopover}\n coloring="dark"\n onExit={() => setOpen(false)}\n alignment="center"\n >\n <button className="btn btn--gray" onClick={() => setOpen(!open)}>\n Toggle popover\n </button>\n </Popover>\n
);\n
}',description:(0,a.jsx)("p",{children:"Dark popover."})},{exampleModule:t(2636),code:'
import React
, { ReactElement
, useState
} from \'react\';\n
import Popover
from \'@mapbox/mr-ui/popover\';\n\n
export default function Example(): ReactElement
{\n
const [open
, setOpen
] = useState(false);\n\n
const renderPopover
= (\n
<>\n This is a warning popover.\n </>\n
);\n\n
return (\n
<Popover\n active={open}\n content={renderPopover}\n coloring="warning"\n onExit={() => setOpen(false)}\n placement="left"\n >\n <button\n onClick={() => setOpen(!open)}\n className="btn btn--orange"\n >\n Toggle popover\n </button>\n </Popover>\n
);\n
}',description:(0,a.jsx)("p",{children:"Warning popover."})},{exampleModule:t(1211),code:'
import React
, { ReactElement
, useState
} from \'react\';\n
import Popover
from \'@mapbox/mr-ui/popover\';\n\n
export default function Example(): ReactElement
{\n
const [open
, setOpen
] = useState(false);\n\n
const renderPopover
= (\n
<>\n This is a error popover.\n </>\n
);\n\n
return (\n
<Popover\n active={open}\n content={renderPopover}\n coloring="error"\n onExit={() => setOpen(false)}\n alignment="start"\n >\n <button\n onClick={() => setOpen(!open)}\n className="btn btn--red"\n >\n Toggle popover\n </button>\n </Popover>\n
);\n
}',description:(0,a.jsx)("p",{children:"Error popover."})},{exampleModule:t(3478),code:'
import React
, { ReactElement
, useState
} from \'react\';\n
import Popover
from \'@mapbox/mr-ui/popover\';\n
import Button
from \'@mapbox/mr-ui/button\';\n\n
function ExampleInner(): ReactElement
{\n
const [items
, setItems
] = useState([0]);\n\n
return (\n
<>\n <ul>\n {items
&&\n items
.map((_: number, index: number) => (\n
<li key={index}>This is a popover!</li>\n
))}\n </ul>\n <div className="flex flex--row mt6">\n <Button onClick={() => setItems([...items, 0])} size="medium">\n Add\n </Button>\n <span className="ml6">\n <Button onClick={() => setItems(items.slice(1))} size="medium">\n Remove\n </Button>\n </span>\n </div>\n </>\n
);\n
}\n\n\n
export default function Example(): ReactElement
{\n
const [open
, setOpen
] = useState(false);\n\n
const renderPopover
= (\n
<ExampleInner />\n
);\n\n
return (\n
<div className="flex flex--space-between-main">\n <button\n data-popover-ignore-clicks={true}\n onClick={() => setOpen(!open)}\n className="btn"\n >\n Trigger here\n </button>\n <Popover\n active={open}\n content={renderPopover}\n onExit={() => setOpen(false)}\n placement="top"\n alignment="start"\n >\n <span>hi</span>\n </Popover>\n </div>\n
);\n
}',description:(0,a.jsx)("p",{children:"Popover with non-static height."})}]},{name:"Select",description:null,props:{options:{type:{name:"arrayOf",value:{name:"shape",value:{label:{name:"node",required:!0},value:{name:"string",required:!0},disabled:{name:"bool",required:!1},active:{name:"bool",required:!1},options:{name:"arrayOf",value:{name:"shape",value:{label:{name:"node",required:!0},value:{name:"string",required:!0},disabled:{name:"bool",required:!1},active:{name:"bool",required:!1}}},required:!1}}}},required:!0,defaultValue:void 0,description:(0,a.jsxs)("p",{children:["An array of objects containing ",(0,a.jsx)("code",{children:"label"})," ",(0,a.jsx)("code",{children:"value"})," ","key value pairings to represent each option. An optional"," ",(0,a.jsx)("code",{children:"disable"})," key can be provided to disable the selection of an indiviual ",(0,a.jsx)("code",{children:"