122:T4a4, Label { if (!Array.isArray(newlySelectedItems)) { return } setSelectedItemIds(newlySelectedItems.map(item => item.id)) if (newlySelectedItems.length < selectedItemIds.length) { const newlySelectedItemIds = newlySelectedItems.map(({id}) => id) const removedItemIds = selectedTokenIds.filter(id => !newlySelectedItemIds.includes(id)) for (const removedItemId of removedItemIds) { onTokenRemove(removedItemId) } return } setTokens(newlySelectedItems.map(({id, text}) => ({id, text}))) }} aria-labelledby="autocompleteLabel-multiselect-tokens" items={items} /> 123:T691,import {Autocomplete, FormControl} from '@primer/react' import React from 'react' export default function Default() { const [inputValue, setInputValue] = React.useState('') return ( Label { setInputValue(e.currentTarget.value) }} /> item.text).includes(inputValue) ? { text: inputValue, id: inputValue, // `handleAddItem` callback isn't needed for this specific example, // but it's included here to show that it exists handleAddItem: selectedItem => { // eslint-disable-next-line no-console console.log('added item:', selectedItem) return }, } : undefined } items={items} /> ) } const items = [ {text: 'Components', id: 'add-new-0'}, {text: 'Figma', id: 'add-new-1'}, {text: 'Design patterns', id: 'add-new-2'}, {text: 'Design tokens', id: 'add-new-3'}, {text: 'Icons', id: 'add-new-4'}, {text: 'Rails', id: 'add-new-5'}, {text: 'React', id: 'add-new-6'}, ] 124:T41d, Label { setInputValue(e.currentTarget.value) }} /> item.text).includes(inputValue) ? { text: inputValue, id: inputValue, // `handleAddItem` callback isn't needed for this specific example, // but it's included here to show that it exists handleAddItem: selectedItem => { // eslint-disable-next-line no-console console.log('added item:', selectedItem) return }, } : undefined } items={items} /> 125:T5ee,import { BoldIcon, ItalicIcon, CodeIcon, LinkIcon, HeadingIcon, ListOrderedIcon, ListUnorderedIcon, QuoteIcon, TasklistIcon, } from '@primer/octicons-react' import {ActionBar} from '@primer/react' import React from 'react' // The wrapping div with the style attribute is for demonstration purposes only export default function Overflow() { return (

) } 126:T425,

127:T907,import React from 'react' import {ActionList, ActionMenu} from '@primer/react' export default function Submenus() { return ( Open menu { alert('Item one clicked') }} > Item one { alert('Item two clicked') }} > Item two Item with submenus { alert('Sub-item one clicked') }} > Sub-item one { alert('Sub-item two clicked') }} > Sub-item two Sub-item with submenu { alert('Sub-item one clicked') }} > Sub-item one { alert('Sub-item two clicked') }} > Sub-item two ) } 128:T774, Open menu { alert('Item one clicked') }} > Item one { alert('Item two clicked') }} > Item two Item with submenus { alert('Sub-item one clicked') }} > Sub-item one { alert('Sub-item two clicked') }} > Sub-item two Sub-item with submenu { alert('Sub-item one clicked') }} > Sub-item one { alert('Sub-item two clicked') }} > Sub-item two 129:T4c9,import React from 'react' import {ActionList, ActionMenu} from '@primer/react' const items = [{label: 'Item one'}, {label: 'Item two'}, {label: 'Item three'}] export default function MultiSelect() { const [selectedIndices, setSelectedIndices] = React.useState>(() => new Set([0])) const handleSelect = (index: number): void => { const newSelectedIndices = new Set(selectedIndices) if (selectedIndices.has(index)) { newSelectedIndices.delete(index) } else { newSelectedIndices.add(index) } setSelectedIndices(newSelectedIndices) } return ( Open menu ) } 12a:T579,import React from 'react' import {ActionList, ActionMenu, Stack} from '@primer/react' export default function InactiveItem() { return ( Open menu Item one { alert('Item two clicked') }} > Item two { alert('Item three clicked') }} > Item three Open menu (all items inactive) Item one Item two Item three ) } 12b:T45f, Open menu Item one { alert('Item two clicked') }} > Item two { alert('Item three clicked') }} > Item three Open menu (all items inactive) Item one Item two Item three 12c:T56a,import React from 'react' import {ActionList, ActionMenu} from '@primer/react' export default function Dividers() { return ( Options { alert('Item one clicked') }} > Item one Description about item one that is kind of long and bulky { alert('Item two clicked') }} > Item two A long and bulky description for the second item { alert('Item three clicked') }} > Item three One last and long bulky description we will use for the third item ) } 12d:T44f, Options { alert('Item one clicked') }} > Item one Description about item one that is kind of long and bulky { alert('Item two clicked') }} > Item two A long and bulky description for the second item { alert('Item three clicked') }} > Item three One last and long bulky description we will use for the third item 12e:T590,import React from 'react' import {ActionList, ActionMenu, Button} from '@primer/react' function ListItemWithContextMenu({children}: {children: string}) { const handleContextMenu: React.MouseEventHandler = event => { event.preventDefault() setOpen(true) } const [open, setOpen] = React.useState(false) const triggerRef = React.useRef(null) return (

Menu item one Menu item two Menu item three

) } export default function ContextMenu() { return ( <>

Right click the list items below to see the context menu

List item one

List item two

List item three

) } 12f:T450,import React from 'react' import {ActionList, Avatar} from '@primer/react' import {PencilIcon} from '@primer/octicons-react' export default function LeadingAndTrailingVisuals() { return ( Item one Item two Item three ) } 3c:["$","div",null,{"className":"page-module__zr0YUq__layout","children":["$L45",["$","main",null,{"id":"skip-nav","className":"page-module__zr0YUq__content__main","children":["$","$L46",null,{"source":{"compiledSource":"$47","frontmatter":{"title":"CommandPalette","description":"Global search dialog component","id":"command_palette","show-tabs":false,"internal":true},"scope":{"ActionBar":"$48","ActionList":"$49","ActionMenu":"$4a","AnchoredOverlay":"$4b","Autocomplete":"$4c","Avatar":"$4d","AvatarStack":"$4e","Banner":"$4f","BaseStyles":"$50","BranchName":"$51","Breadcrumb":"$52","Breadcrumbs":"$53","Button":"$54","ButtonBase":"$55","ButtonGroup":"$56","Checkbox":"$57","CheckboxGroup":"$58","CircleBadge":"$59","ConfirmationDialog":"$5a","CounterLabel":"$5b","Details":"$5c","Dialog":"$5d","DragHandle":"$5e","Flash":"$5f","FocusKeys":"$60","FormControl":"$61","Header":"$62","Heading":"$63","IconButton":"$64","IssueLabelToken":"$65","Label":"$66","LabelGroup":"$67","Link":"$68","LinkButton":"$69","NavList":"$6a","Overlay":"$6b","PageHeader":"$6c","PageLayout":"$6d","Pagination":"$6e","Popover":"$6f","Portal":"$70","PortalContext":"$71","ProgressBar":"$72","Radio":"$73","RadioGroup":"$74","RelativeTime":"$75","SegmentedControl":"$76","Select":"$77","SelectPanel":"$78","SideNav":"$79","SkeletonBox":"$7a","Spinner":"$7b","SplitPageLayout":"$7c","Stack":"$7d","StateLabel":"$7e","SubNav":"$7f","Text":"$80","TextInput":"$81","TextInputWithTokens":"$82","Textarea":"$83","ThemeProvider":"$84","Timeline":"$85","ToggleSwitch":"$86","Token":"$87","Tooltip":"$88","TreeView":"$89","Truncate":"$8a","UnderlineNav":"$8b","VisuallyHidden":"$8c","asSlot":"$8d","createComponent":"$8e","defaultPaneWidth":"$8f","isSlot":"$90","registerPortalRoot":"$91","theme":"$92","useAnchoredPosition":"$93","useColorSchemeVar":"$94","useConfirm":"$95","useDetails":"$96","useFocusTrap":"$97","useFocusZone":"$98","useFormControlForwardedProps":"$99","useId":"$9a","useIsomorphicLayoutEffect":"$9b","useMergedRefs":"$9c","useOnEscapePress":"$9d","useOnOutsideClick":"$9e","useOpenAndCloseFocus":"$9f","useOverlay":"$a0","usePaneWidth":"$a1","useProvidedRefOrCreate":"$a2","useRefObjectAsForwardedRef":"$a3","useResizeObserver":"$a4","useResponsiveValue":"$a5","useRovingTabIndex":"$a6","useSafeTimeout":"$a7","useSlots":"$a8","useSyncedState":"$a9","useTheme":"$aa","Announce":"$ab","AriaAlert":"$ac","AriaStatus":"$ad","Blankslate":"$ae","Card":"$af","DataTable":"$b0","DefaultFeatureFlags":"$b1","FeatureFlags":"$b2","FilteredActionList":"$b3","FilteredActionListLoadingTypes":"$b4","Hidden":"$b5","InlineMessage":"$b6","IssueLabel":"$b7","KeybindingHint":"$b8","ScrollableRegion":"$b9","SkeletonAvatar":"$ba","SkeletonText":"$bb","Table":"$bc","Tabs":"$bd","TopicTag":"$be","UnderlinePanels":"$bf","createColumnHelper":"$c0","getAccessibleKeybindingHintString":"$c1","useFeatureFlag":"$c2","useOverflow":"$c3","useTab":"$c4","useTabList":"$c5","useTabPanel":"$c6","REACT_COMPONENT_DATA_NAME":"CommandPalette","REACT_COMPONENT_DATA_PROPS":[],"REACT_COMPONENT_PASSTHROUGH_DATA":null,"REACT_COMPONENT_DATA_SUBCOMPONENTS":[{"name":"CommandPalette","props":[{"name":"isOpen","type":"boolean","defaultValue":"","required":true,"description":{"compiledSource":"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n return _jsx(_Fragment, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}}},{"name":"onClose","type":"() => void","defaultValue":"","required":true,"description":{"compiledSource":"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n return _jsx(_Fragment, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}}},{"name":"title","type":"string","defaultValue":"","required":false,"description":{"compiledSource":"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n return _jsx(_Fragment, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}}},{"name":"children","type":"React.ReactNode","defaultValue":"","required":false,"description":{"compiledSource":"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n return _jsx(_Fragment, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}}},{"name":"returnFocusRef","type":"any","defaultValue":"","required":false,"description":{"compiledSource":"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n return _jsx(_Fragment, {});\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}}}]}]}},"hierarchy":[{"name":"Product UI","url":"/product"},{"name":"Internal Components","url":"/product/internal-components"},{"name":"CommandPalette","url":"/product/internal-components/command-palette"}],"rootFrontmatter":{"title":"CommandPalette","description":"Global search dialog component","id":"command_palette","show-tabs":false,"internal":true},"examples":{"product":{"useTheme.default":{"fullCode":"import React from 'react'\nimport {useTheme} from '@primer/react'\n\nexport default function Default() {\n const {colorScheme, colorMode, resolvedColorMode, resolvedColorScheme, dayScheme, nightScheme} = useTheme()\n return (\n <>\n

colorScheme: {colorScheme}

colorMode: {colorMode}

resolvedColorMode: {resolvedColorMode}

resolvedColorScheme: {resolvedColorScheme}

dayScheme: {dayScheme}

nightScheme: {nightScheme}

\n \n )\n}\n","previewCode":"<>\n

colorScheme: {colorScheme}

colorMode: {colorMode}

resolvedColorMode: {resolvedColorMode}

resolvedColorScheme: {resolvedColorScheme}

dayScheme: {dayScheme}

nightScheme: {nightScheme}

\n"},"useSafeTimeout.default":{"fullCode":"import React from 'react'\nimport {useSafeTimeout} from '@primer/react'\n\nexport default function Default() {\n const {safeSetTimeout, safeClearTimeout} = useSafeTimeout()\n let timeoutId: number | null = null\n\n const handleOnClick = () => {\n timeoutId = safeSetTimeout(() => window.alert('Hello!'), 3000)\n }\n\n const cancelTimeout = () => {\n if (timeoutId) {\n safeClearTimeout(timeoutId)\n }\n }\n\n return (\n

\n \n {timeoutId ?? }\n

\n )\n}\n","previewCode":"

\n \n {timeoutId ?? }\n

"},"useResponsiveValue.default":{"fullCode":"import React from 'react'\n// eslint-disable-next-line primer-react/no-use-responsive-value\nimport {Button, IconButton, useResponsiveValue} from '@primer/react'\nimport {DownloadIcon} from '@primer/octicons-react'\n\nexport default function Default() {\n const label = useResponsiveValue(\n {\n narrow: null,\n regular: 'Download',\n wide: 'Download all assets',\n },\n 'Download',\n )\n\n if (!label) {\n return \n }\n\n return \n}\n","previewCode":""},"useResizeObserver.deps-array":{"fullCode":"$c7","previewCode":"<>\n {\n setResizeEnabled(!resizeEnabled)\n }}\n >\n Toggle useResizeObserver behavior\n \n \n

Enable useResizeObserver behavior to resize me!

{width && height ? `I am ${width}px wide and ${height}px tall` : null}

\n \n"},"useResizeObserver.default":{"fullCode":"import React from 'react'\nimport {useResizeObserver} from '@primer/react'\n\nexport default function Default() {\n const [width, setWidth] = React.useState()\n const [height, setHeight] = React.useState()\n const wrapperRef = React.useRef(null)\n useResizeObserver(resizeObserverEntries => {\n if (resizeObserverEntries.length) {\n const {contentRect} = resizeObserverEntries[0]\n setWidth(contentRect.width)\n setHeight(contentRect.height)\n }\n }, wrapperRef)\n\n return (\n

\n Resize me! {width && height ? `I am ${width}px wide and ${height}px tall` : null}\n

\n )\n}\n","previewCode":"

\n Resize me! {width && height ? `I am ${width}px wide and ${height}px tall` : null}\n

"},"useRefObjectAsForwardedRef.default":{"fullCode":"import React from 'react'\nimport {useRefObjectAsForwardedRef} from '@primer/react'\n\nconst ForwardedRefComponent = React.forwardRef((_props, forwardedRef) => {\n const internalRef = React.useRef(null)\n useRefObjectAsForwardedRef(forwardedRef, internalRef)\n\n React.useEffect(() => {\n if (internalRef.current) {\n internalRef.current.style.border = '1px solid lightblue'\n }\n }, [internalRef])\n\n return (\n

This div has a light blue outline when the ref is set

\n )\n})\n\nForwardedRefComponent.displayName = 'ForwardedRefComponent'\n\nexport default function Default() {\n const ref = React.useRef(null)\n\n return \n}\n","previewCode":""},"useProvidedRefOrCreate.default":{"fullCode":"import React from 'react'\nimport {useProvidedRefOrCreate} from '@primer/react'\n\nexport default function Default() {\n const providedRef = React.useRef(null)\n const ref = useProvidedRefOrCreate(providedRef)\n\n React.useEffect(() => {\n if (ref.current) {\n ref.current.style.border = '1px solid lightblue'\n }\n }, [ref])\n\n return

This div has a light blue outline when the ref is set

\n}\n","previewCode":"

This div has a light blue outline when the ref is set

"},"useOverlay.prevent-focus-on-open":{"fullCode":"$c8","previewCode":"<>\n \n {isOpen && (\n \n

Welcome to my overlay.

\n \n {\n setIsOpen(false)\n }}\n >\n Close the overlay\n \n \n )}\n"},"useOverlay.initial-focus-ref":{"fullCode":"$c9","previewCode":"<>\n \n {isOpen && (\n \n

Overlay content in here

\n \n {\n setIsOpen(false)\n }}\n >\n Close the overlay\n \n \n )}\n"},"useOverlay.ignore-click-refs":{"fullCode":"$ca","previewCode":"<>\n

\n \n \n

\n {isOpen && (\n \n

Welcome to my overlay.

\n \n {\n setIsOpen(false)\n }}\n >\n Close the overlay\n \n \n )}\n"},"useOverlay.default":{"fullCode":"$cb","previewCode":"<>\n \n {isOpen && (\n \n

Welcome to my overlay.

\n \n {\n setIsOpen(false)\n }}\n >\n Close the overlay\n \n \n )}\n"},"useOpenAndCloseFocus.prevent-focus-on-open":{"fullCode":"$cc","previewCode":"

\n \n {isOpen && (\n \n

Welcome to my overlay.

\n \n {\n setIsOpen(false)\n }}\n >\n Close the overlay\n \n \n )}\n

"},"useOpenAndCloseFocus.initial-focus-ref":{"fullCode":"$cd","previewCode":"

\n \n {isOpen && (\n \n

Welcome to my overlay.

\n \n {\n setIsOpen(false)\n }}\n >\n Close the overlay\n \n \n )}\n

"},"useOpenAndCloseFocus.default":{"fullCode":"$ce","previewCode":"

\n \n {isOpen && (\n \n

Welcome to my overlay.

\n \n {\n setIsOpen(false)\n }}\n >\n Close the overlay\n \n \n )}\n

"},"useOnOutsideClick.ignored-refs":{"fullCode":"$cf","previewCode":"<>\n

\n \n \n

\n {isOpen && (\n

\n Click outside of this div to close the overlay\n

\n )}\n"},"useOnOutsideClick.default":{"fullCode":"import React from 'react'\nimport {useOnOutsideClick} from '@primer/react'\n\nexport default function Default() {\n const [isOpen, setIsOpen] = React.useState(true)\n const containerRef = React.useRef(null)\n\n const closeOverlay = React.useCallback(() => {\n setIsOpen(false)\n }, [setIsOpen])\n\n const showOverlay = React.useCallback(() => {\n setIsOpen(true)\n }, [setIsOpen])\n\n useOnOutsideClick({onClickOutside: closeOverlay, containerRef})\n\n return (\n <>\n \n {isOpen && (\n

\n Click outside of this div to hide it\n

\n )}\n \n )\n}\n","previewCode":"<>\n \n {isOpen && (\n

\n Click outside of this div to hide it\n

\n )}\n"},"useOnEscapePress.default":{"fullCode":"import React from 'react'\nimport {useOnEscapePress} from '@primer/react'\n\nexport default function Default() {\n const [open, setOpen] = React.useState(false)\n\n useOnEscapePress(() => {\n setOpen(false)\n })\n\n return (\n

\n \n {open &&

Hit the "Escape" key to hide this message again

}\n

\n )\n}\n","previewCode":"

\n \n {open &&

Hit the "Escape" key to hide this message again

}\n

"},"useOnEscapePress.callback-dependencies":{"fullCode":"import React from 'react'\nimport {useOnEscapePress} from '@primer/react'\n\nexport default function CallbackDependencies() {\n const [open, setOpen] = React.useState(false)\n const [escapeEnabled, setEscapeEnabled] = React.useState(false)\n\n useOnEscapePress(() => {\n if (escapeEnabled) {\n setOpen(false)\n }\n }, [escapeEnabled])\n\n return (\n <>\n

\n {\n setEscapeEnabled(!escapeEnabled)\n }}\n >\n {escapeEnabled ? 'Disable' : 'Enable'} useOnEscapePress behavior\n \n {escapeEnabled ? : null}\n

\n {open &&

Hit the "Escape" key to hide this message again

}\n \n )\n}\n","previewCode":"<>\n

\n {\n setEscapeEnabled(!escapeEnabled)\n }}\n >\n {escapeEnabled ? 'Disable' : 'Enable'} useOnEscapePress behavior\n \n {escapeEnabled ? : null}\n

\n {open &&

Hit the "Escape" key to hide this message again

}\n"},"useFormControlForwardedProps.default":{"fullCode":"import React from 'react'\nimport {FormControl, useFormControlForwardedProps} from '@primer/react'\n\nconst CustomInput = (externalProps: {type: string}) => {\n const props = useFormControlForwardedProps(externalProps)\n return \n}\n\nexport default function Default() {\n return (\n \n Custom input\n \n \n This is not a Primer input, but it still has `aria-describedby` and similar attributes applied automatically\n \n \n )\n}\n","previewCode":"\n Custom input\n \n \n This is not a Primer input, but it still has `aria-describedby` and similar attributes applied automatically\n \n"},"useFocusZone.prevent-scroll":{"fullCode":"$d0","previewCode":"<>\n \n \n

Focus can be moved with up and down arrow keys in here, and the container will not scroll when focus moves.

\n \n \n \n \n \n \n \n \n \n \n \n"},"useFocusZone.nesting-focus-zones":{"fullCode":"$d1","previewCode":"<>\n \n \n

Focus can be moved with arrow up and arrow down keys in here.

\n \n \n \n\n

Focus can be moved with up, down, left, or right arrow keys in here.

\n \n \n \n

\n \n \n"},"useFocusZone.get-next-focusable":{"fullCode":"$d2","previewCode":"<>\n \n

\n Focus can be moved in rows with left and right arrow keys. Focus can be moved in columns with the up and down\n arrow keys.\n

\n \n \n \n \n \n \n \n \n \n \n

\n \n \n"},"useFocusZone.focusable-elemenet-filter":{"fullCode":"import React from 'react'\nimport {Link, useFocusZone} from '@primer/react'\n\nexport default function FocusableElementFilter() {\n const {containerRef} = useFocusZone({focusableElementFilter: (element: Element) => element.tagName === 'BUTTON'})\n\n return (\n <>\n \n }\n style={{\n border: '1px solid',\n margin: '1rem',\n padding: '1rem',\n display: 'flex',\n flexDirection: 'column',\n gap: '1rem',\n }}\n >\n

\n Focus can be moved with up and down arrow keys in here, but links will be skipped unless using the\n Tab key.\n

\n \n Link one\n \n Link two\n \n \n \n \n )\n}\n","previewCode":"<>\n \n \n

\n Focus can be moved with up and down arrow keys in here, but links will be skipped unless using the Tab\n key.\n

\n \n Link one\n \n Link two\n \n \n \n"},"useFocusZone.focus-out-behavior":{"fullCode":"$d3","previewCode":"$d4"},"useFocusZone.focus-in-strategy":{"fullCode":"$d5","previewCode":"$d6"},"useFocusZone.disable":{"fullCode":"$d7","previewCode":"<>\n \n \n \n \n \n

When the focus zone is enabled, focus can be moved with up and down arrow keys in here.

\n \n \n \n \n \n"},"useFocusZone.default":{"fullCode":"import React from 'react'\nimport {useFocusZone} from '@primer/react'\n\nexport default function Default() {\n const {containerRef} = useFocusZone()\n\n return (\n <>\n \n }\n style={{\n border: '1px solid',\n margin: '1rem',\n padding: '1rem',\n display: 'flex',\n flexDirection: 'column',\n gap: '1rem',\n }}\n >\n

Focus can be moved with up and down arrow keys in here.

\n \n \n \n \n \n \n )\n}\n","previewCode":"<>\n \n \n

Focus can be moved with up and down arrow keys in here.

\n \n \n \n \n \n"},"useFocusZone.bind-keys":{"fullCode":"import React from 'react'\nimport {useFocusZone} from '@primer/react'\nimport {FocusKeys} from '@primer/behaviors'\n\nexport default function BindKeys() {\n const {containerRef} = useFocusZone({bindKeys: FocusKeys.JK})\n\n return (\n <>\n \n }\n style={{border: '1px solid', margin: '1rem', padding: '1rem', display: 'flex', gap: '1rem'}}\n >\n

Focus can be moved with J and K keys.

\n \n \n \n \n \n \n )\n}\n","previewCode":"<>\n \n \n

Focus can be moved with J and K keys.

\n \n \n \n \n \n"},"useFocusZone.active-descendant":{"fullCode":"$d8","previewCode":"<>\n \n Focus and move the active descendant w/ up and down arrow keys\n \n \n \n

The active descendant can be moved in here while the controlling element is focused.

\n \n \n \n \n"},"useFocusTrap.return-focus":{"fullCode":"$d9","previewCode":"

\n \n \n \n {trapEnabled ? (\n

\n Focus trap is enabled. Focus will be trapped in here.\n

\n ) : (\n

\n Focus trap is disabled. Focus will not be trapped in here.\n

\n )}\n \n \n \n

\n \n"},"useFocusTrap.initial-focus-ref":{"fullCode":"$da","previewCode":"

\n \n \n \n {trapEnabled ? (\n

\n Focus trap is enabled. Focus will be trapped in here.\n

\n ) : (\n

\n Focus trap is disabled. Focus will not be trapped in here.\n

\n )}\n \n \n \n

\n \n"},"useFocusTrap.default":{"fullCode":"$db","previewCode":"

\n \n \n \n {trapEnabled ? (\n

\n Focus trap is enabled. Focus will be trapped in here.\n

\n ) : (\n

\n Focus trap is disabled. Focus will not be trapped in here.\n

\n )}\n \n \n \n

\n \n"},"useFocusTrap.custom-return-focus":{"fullCode":"$dc","previewCode":"

\n \n \n \n \n {trapEnabled ? (\n

\n Focus trap is enabled. Focus will be trapped in here.\n

\n ) : (\n

\n Focus trap is disabled. Focus will not be trapped in here.\n

\n )}\n \n \n \n

\n \n"},"useConfirm.default":{"fullCode":"import React from 'react'\nimport {useConfirm} from '@primer/react'\n\nexport default function Default() {\n const [isUsingPrimer, setIsUsingPrimer] = React.useState(true)\n const confirm = useConfirm()\n const confirmStopUsingPrimer = React.useCallback(async () => {\n if (await confirm({title: 'Are you sure?', content: 'Using Primer is cool and fun.'})) {\n setIsUsingPrimer(false)\n }\n }, [confirm])\n const handleStartUsingPrimer = () => {\n setIsUsingPrimer(true)\n }\n\n return (\n \n )\n}\n","previewCode":""},"useConfirm.custom-dialog-buttons":{"fullCode":"import React from 'react'\nimport {useConfirm} from '@primer/react'\n\nexport default function CustomDialogButtons() {\n const [isUsingPrimer, setIsUsingPrimer] = React.useState(true)\n const confirm = useConfirm()\n const confirmStopUsingPrimer = React.useCallback(async () => {\n if (\n await confirm({\n title: 'Are you sure?',\n content: 'Using Primer is cool and fun.',\n cancelButtonContent: 'No',\n confirmButtonContent: 'Yes',\n confirmButtonType: isUsingPrimer ? 'danger' : 'primary',\n })\n ) {\n setIsUsingPrimer(false)\n }\n }, [confirm, isUsingPrimer])\n const handleStartUsingPrimer = () => {\n setIsUsingPrimer(true)\n }\n\n return (\n \n )\n}\n","previewCode":""},"useColorSchemeVar.default":{"fullCode":"import React from 'react'\nimport {useColorSchemeVar} from '@primer/react'\n\nexport default function Default() {\n const colorSchemeVar = useColorSchemeVar({light: 'day', dark: 'night'}, 'other')\n\n return Color scheme alias: {colorSchemeVar}\n}\n","previewCode":"Color scheme alias: {colorSchemeVar}"},"underline_panels.leading-icons":{"fullCode":"import React from 'react'\nimport {UnderlinePanels} from '@primer/react/experimental'\nimport {CodeIcon, EyeIcon, GitPullRequestIcon} from '@primer/octicons-react'\n\nexport default function LeadingIcons() {\n return (\n \n Tab 1\n Tab 2\n Tab 3\n Panel 1\n Panel 2\n Panel 3\n \n )\n}\n","previewCode":"\n Tab 1\n Tab 2\n Tab 3\n Panel 1\n Panel 2\n Panel 3\n"},"underline_panels.default":{"fullCode":"import React from 'react'\nimport {UnderlinePanels} from '@primer/react/experimental'\n\nexport default function Default() {\n return (\n \n Tab 1\n Tab 2\n Tab 3\n Panel 1\n Panel 2\n Panel 3\n \n )\n}\n","previewCode":"\n Tab 1\n Tab 2\n Tab 3\n Panel 1\n Panel 2\n Panel 3\n"},"underline_panels.counters":{"fullCode":"import React from 'react'\nimport {UnderlinePanels} from '@primer/react/experimental'\n\nexport default function Counters() {\n return (\n \n Tab 1\n Tab 2\n Tab 3\n Panel 1\n Panel 2\n Panel 3\n \n )\n}\n","previewCode":"\n Tab 1\n Tab 2\n Tab 3\n Panel 1\n Panel 2\n Panel 3\n"},"underline_nav.leading-icons":{"fullCode":"import React from 'react'\nimport {UnderlineNav} from '@primer/react'\nimport {CodeIcon, EyeIcon, GitPullRequestIcon, CommentDiscussionIcon, ProjectIcon} from '@primer/octicons-react'\n\nexport default function LeadingIcons() {\n return (\n \n \n Code\n \n Issues\n Pull Requests\n Discussions\n Projects\n \n )\n}\n","previewCode":"\n \n Code\n \n Issues\n Pull Requests\n Discussions\n Projects\n"},"underline_nav.default":{"fullCode":"import React from 'react'\nimport {UnderlineNav} from '@primer/react'\n\nexport default function Default() {\n return (\n \n \n Code\n \n Pull requests\n Actions\n Projects\n Wiki\n \n )\n}\n","previewCode":"\n \n Code\n \n Pull requests\n Actions\n Projects\n Wiki\n"},"underline_nav.counters":{"fullCode":"import React from 'react'\nimport {UnderlineNav} from '@primer/react'\n\nexport default function Default() {\n return (\n \n \n Code\n \n Pull requests\n \n Actions\n \n \n Projects\n \n Wiki\n \n )\n}\n","previewCode":"\n \n Code\n \n Pull requests\n \n Actions\n \n \n Projects\n \n Wiki\n"},"truncate.max-width":{"fullCode":"import React from 'react'\nimport {Truncate} from '@primer/react'\n\nexport default function MaxWidth() {\n return (\n \n Some example text\n \n )\n}\n","previewCode":"\n Some example text\n"},"truncate.hover-expand":{"fullCode":"import React from 'react'\nimport {Truncate} from '@primer/react'\n\nexport default function HoverExpand() {\n return (\n \n Hover this example text\n \n )\n}\n","previewCode":"\n Hover this example text\n"},"truncate.fit-to-parent":{"fullCode":"import React from 'react'\nimport {Truncate} from '@primer/react'\n\nexport default function Default() {\n return (\n

\n \n Some example text\n \n

\n )\n}\n","previewCode":"

\n \n Some example text\n \n

"},"truncate.default":{"fullCode":"import React from 'react'\nimport {Truncate} from '@primer/react'\n\nexport default function Default() {\n return Some example text\n}\n","previewCode":"Some example text"},"tree_view.no-indentation":{"fullCode":"import React from 'react'\nimport {TreeView} from '@primer/react'\n\nexport default function Default() {\n return (\n \n \n Parent node\n \n Child node one\n \n Child node two\n \n \n \n Sibling node one\n Sibling node two\n \n )\n}\n","previewCode":"\n \n Parent node\n \n Child node one\n \n Child node two\n \n \n \n Sibling node one\n Sibling node two\n"},"tree_view.loading-count-unknown":{"fullCode":"import React from 'react'\nimport {TreeView} from '@primer/react'\n\nexport default function LoadingCountUnknown() {\n return (\n \n \n Parent node\n \n \n Sibling node one\n Sibling node two\n \n )\n}\n","previewCode":"\n \n Parent node\n \n \n Sibling node one\n Sibling node two\n"},"tree_view.loading-count-known":{"fullCode":"import React from 'react'\nimport {TreeView} from '@primer/react'\n\nexport default function LoadingCountKnown() {\n return (\n \n \n Parent node\n \n \n Sibling node one\n Sibling node two\n \n )\n}\n","previewCode":"\n \n Parent node\n \n \n Sibling node one\n Sibling node two\n"},"tree_view.leading-trailing-visuals":{"fullCode":"$dd","previewCode":"$de"},"tree_view.default":{"fullCode":"import React from 'react'\nimport {TreeView} from '@primer/react'\n\nexport default function Default() {\n return (\n \n \n Parent node\n \n Child node one\n \n Child node two\n \n \n \n Sibling node one\n Sibling node two\n \n )\n}\n","previewCode":"\n \n Parent node\n \n Child node one\n \n Child node two\n \n \n \n Sibling node one\n Sibling node two\n"},"tooltip.position":{"fullCode":"import React from 'react'\nimport {Tooltip} from '@primer/react/experimental'\n\nexport default function Position() {\n return (\n \n \n \n )\n}\n","previewCode":"\n \n"},"tooltip.label":{"fullCode":"import React from 'react'\nimport {Tooltip} from '@primer/react/experimental'\nimport {Link} from '@primer/react'\nimport {BookIcon} from '@primer/octicons-react'\n\nexport default function Label() {\n return (\n \n \n \n \n \n )\n}\n","previewCode":"\n \n \n \n"},"tooltip.default":{"fullCode":"import React from 'react'\nimport {Tooltip} from '@primer/react/experimental'\n\nexport default function Default() {\n return (\n \n \n \n )\n}\n","previewCode":"\n \n"},"token.size":{"fullCode":"import React from 'react'\nimport {Stack, Token} from '@primer/react'\n\nexport default function Size() {\n return (\n \n \n \n \n \n \n )\n}\n","previewCode":"\n \n \n \n \n"},"token.remove-button":{"fullCode":"import React from 'react'\nimport {Token} from '@primer/react'\n\nexport default function Remove() {\n return (\n {\n alert('Fake remove callback')\n }}\n />\n )\n}\n","previewCode":" {\n alert('Fake remove callback')\n }}\n/>"},"token.leading-visual":{"fullCode":"import React from 'react'\nimport {Token} from '@primer/react'\nimport {GitBranchIcon} from '@primer/octicons-react'\n\nexport default function Default() {\n return \n}\n","previewCode":""},"token.issueLabel-default":{"fullCode":"import React from 'react'\nimport {IssueLabelToken} from '@primer/react'\n\nexport default function IssueLabelDefault() {\n return \n}\n","previewCode":""},"token.issueLabel-color":{"fullCode":"import React from 'react'\nimport {IssueLabelToken} from '@primer/react'\n\nexport default function IssueLabelColor() {\n return \n}\n","previewCode":""},"token.interactive":{"fullCode":"import React from 'react'\nimport {Token} from '@primer/react'\n\nexport default function Interactive() {\n return (\n {\n alert('Fake onClick callback')\n }}\n text=\"Token as

Name	Default	Description
isOpen Required		`boolean`
onClose Required		`() => void`
title		`string`
children		`React.ReactNode`
returnFocusRef		`any`