@primer/components 29.0.0-rc.f749c85e → 29.1.0
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +13 -1
- package/dist/browser.esm.js +240 -194
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +339 -293
- package/dist/browser.umd.js.map +1 -1
- package/lib/ActionList/Divider.js +1 -1
- package/lib/ActionList/Header.js +2 -2
- package/lib/ActionList/Item.js +10 -10
- package/lib/ActionList/List.js +1 -1
- package/lib/AvatarPair.js +1 -1
- package/lib/AvatarStack.js +1 -1
- package/lib/BranchName.js +1 -1
- package/lib/Breadcrumb.js +2 -2
- package/lib/Button/Button.js +1 -1
- package/lib/Button/ButtonClose.js +1 -1
- package/lib/Button/ButtonInvisible.js +1 -1
- package/lib/Button/ButtonTableList.js +1 -1
- package/lib/CircleBadge.js +1 -1
- package/lib/CircleOcticon.js +1 -1
- package/lib/CounterLabel.js +2 -2
- package/lib/Dialog/ConfirmationDialog.js +1 -1
- package/lib/Dialog/Dialog.js +5 -5
- package/lib/Dialog.js +4 -4
- package/lib/Dropdown.js +2 -2
- package/lib/DropdownStyles.js +6 -6
- package/lib/FilterList.js +1 -1
- package/lib/FilteredActionList/FilteredActionList.js +2 -2
- package/lib/Flash.js +1 -1
- package/lib/Label.js +2 -2
- package/lib/Link.js +1 -1
- package/lib/Overlay.js +1 -1
- package/lib/Pagehead.js +1 -1
- package/lib/Pagination/Pagination.js +1 -1
- package/lib/Popover.js +1 -1
- package/lib/ProgressBar.js +1 -1
- package/lib/SelectMenu/SelectMenuDivider.js +1 -1
- package/lib/SelectMenu/SelectMenuFilter.js +1 -1
- package/lib/SelectMenu/SelectMenuFooter.js +1 -1
- package/lib/SelectMenu/SelectMenuHeader.js +2 -2
- package/lib/SelectMenu/SelectMenuItem.js +1 -1
- package/lib/SelectMenu/SelectMenuList.js +1 -1
- package/lib/SelectMenu/SelectMenuLoadingAnimation.js +1 -1
- package/lib/SelectMenu/SelectMenuModal.js +2 -2
- package/lib/SelectMenu/SelectMenuTab.js +1 -1
- package/lib/SelectMenu/SelectMenuTabPanel.js +1 -1
- package/lib/SideNav.js +5 -5
- package/lib/StateLabel.js +1 -1
- package/lib/SubNav.js +1 -1
- package/lib/TabNav.js +2 -2
- package/lib/TextInput.js +2 -2
- package/lib/Timeline.js +16 -19
- package/lib/Tooltip.js +1 -1
- package/lib/UnderlineNav.js +2 -2
- package/lib/theme-preval.d.ts +12 -6
- package/lib/theme-preval.js +2930 -1738
- package/lib/utils/testing.d.ts +4707 -2355
- package/lib-esm/ActionList/Divider.js +1 -1
- package/lib-esm/ActionList/Header.js +2 -2
- package/lib-esm/ActionList/Item.js +10 -10
- package/lib-esm/ActionList/List.js +1 -1
- package/lib-esm/AvatarPair.js +1 -1
- package/lib-esm/AvatarStack.js +1 -1
- package/lib-esm/BranchName.js +1 -1
- package/lib-esm/Breadcrumb.js +2 -2
- package/lib-esm/Button/Button.js +1 -1
- package/lib-esm/Button/ButtonClose.js +1 -1
- package/lib-esm/Button/ButtonInvisible.js +1 -1
- package/lib-esm/Button/ButtonTableList.js +1 -1
- package/lib-esm/CircleBadge.js +1 -1
- package/lib-esm/CircleOcticon.js +1 -1
- package/lib-esm/CounterLabel.js +2 -2
- package/lib-esm/Dialog/ConfirmationDialog.js +1 -1
- package/lib-esm/Dialog/Dialog.js +5 -5
- package/lib-esm/Dialog.js +4 -4
- package/lib-esm/Dropdown.js +2 -2
- package/lib-esm/DropdownStyles.js +6 -6
- package/lib-esm/FilterList.js +1 -1
- package/lib-esm/FilteredActionList/FilteredActionList.js +2 -2
- package/lib-esm/Flash.js +1 -1
- package/lib-esm/Label.js +2 -2
- package/lib-esm/Link.js +1 -1
- package/lib-esm/Overlay.js +1 -1
- package/lib-esm/Pagehead.js +1 -1
- package/lib-esm/Pagination/Pagination.js +1 -1
- package/lib-esm/Popover.js +1 -1
- package/lib-esm/ProgressBar.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuDivider.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuFilter.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuFooter.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuHeader.js +2 -2
- package/lib-esm/SelectMenu/SelectMenuItem.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuList.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuLoadingAnimation.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuModal.js +2 -2
- package/lib-esm/SelectMenu/SelectMenuTab.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuTabPanel.js +1 -1
- package/lib-esm/SideNav.js +5 -5
- package/lib-esm/StateLabel.js +1 -1
- package/lib-esm/SubNav.js +1 -1
- package/lib-esm/TabNav.js +2 -2
- package/lib-esm/TextInput.js +2 -2
- package/lib-esm/Timeline.js +12 -17
- package/lib-esm/Tooltip.js +1 -1
- package/lib-esm/UnderlineNav.js +2 -2
- package/lib-esm/theme-preval.d.ts +12 -6
- package/lib-esm/theme-preval.js +2930 -1738
- package/lib-esm/utils/testing.d.ts +4707 -2355
- package/package.json +3 -2
- package/.changeset/README.md +0 -8
- package/.changeset/config.json +0 -10
- package/.devcontainer/devcontainer.json +0 -8
- package/.eslintrc.json +0 -105
- package/.github/ISSUE_TEMPLATE/bug_report.md +0 -38
- package/.github/ISSUE_TEMPLATE/new_component_proposal_template.md +0 -41
- package/.github/dependabot.yml +0 -18
- package/.github/pull_request_template.md +0 -18
- package/.github/workflows/ci.yml +0 -31
- package/.github/workflows/deploy_preview.yml +0 -47
- package/.github/workflows/deploy_production.yml +0 -70
- package/.github/workflows/release.yml +0 -35
- package/.github/workflows/release_canary.yml +0 -70
- package/.github/workflows/release_candidate.yml +0 -60
- package/.github/workflows/size.yml +0 -13
- package/.github/workflows/stale.yml +0 -26
- package/.gitignore +0 -10
- package/.npmrc +0 -4
- package/.nvmrc +0 -1
- package/.storybook/main.js +0 -11
- package/.storybook/preview.js +0 -11
- package/.vscode/launch.json +0 -21
- package/.vscode/settings.json +0 -13
- package/@types/@styled-system/index.d.ts +0 -0
- package/@types/@styled-system/prop-types/index.d.ts +0 -1
- package/@types/@styled-system/props/index.d.ts +0 -1
- package/@types/jest-styled-components/index.d.ts +0 -1
- package/CODEOWNERS +0 -2
- package/babel-defines.js +0 -13
- package/babel.config.js +0 -39
- package/contributor-docs/CODE_OF_CONDUCT.md +0 -76
- package/contributor-docs/CONTRIBUTING.md +0 -274
- package/contributor-docs/adrs/adr-001-typescript.md +0 -23
- package/contributor-docs/adrs/adr-002-behavior-isolation.md +0 -106
- package/contributor-docs/behaviors.md +0 -132
- package/contributor-docs/component-contents-api-patterns.md +0 -315
- package/contributor-docs/principles.md +0 -39
- package/docs/.eslintrc +0 -0
- package/docs/.gitignore +0 -91
- package/docs/components/PropsList.js +0 -5
- package/docs/components/State.js +0 -9
- package/docs/components/constants.js +0 -34
- package/docs/components/index.js +0 -2
- package/docs/content/ActionList.mdx +0 -72
- package/docs/content/ActionMenu.mdx +0 -80
- package/docs/content/AnchoredOverlay.mdx +0 -35
- package/docs/content/Avatar.mdx +0 -33
- package/docs/content/AvatarStack.mdx +0 -43
- package/docs/content/BorderBox.md +0 -46
- package/docs/content/Box.md +0 -74
- package/docs/content/BranchName.md +0 -18
- package/docs/content/Breadcrumbs.md +0 -52
- package/docs/content/Buttons.md +0 -54
- package/docs/content/CircleBadge.md +0 -45
- package/docs/content/CircleOcticon.md +0 -18
- package/docs/content/CounterLabel.md +0 -30
- package/docs/content/Details.md +0 -105
- package/docs/content/Dialog.md +0 -108
- package/docs/content/Dialog2.mdx +0 -179
- package/docs/content/Dropdown.md +0 -72
- package/docs/content/DropdownMenu.mdx +0 -49
- package/docs/content/FilterList.md +0 -44
- package/docs/content/FilteredSearch.md +0 -39
- package/docs/content/Flash.md +0 -42
- package/docs/content/Flex.md +0 -58
- package/docs/content/FormGroup.md +0 -44
- package/docs/content/Grid.md +0 -59
- package/docs/content/Header.md +0 -79
- package/docs/content/Heading.md +0 -22
- package/docs/content/Label.md +0 -40
- package/docs/content/LabelGroup.md +0 -31
- package/docs/content/Link.md +0 -37
- package/docs/content/Overlay.mdx +0 -90
- package/docs/content/Pagehead.md +0 -27
- package/docs/content/Pagination.md +0 -187
- package/docs/content/PointerBox.md +0 -81
- package/docs/content/Popover.md +0 -137
- package/docs/content/Portal.mdx +0 -71
- package/docs/content/Position.md +0 -97
- package/docs/content/ProgressBar.mdx +0 -29
- package/docs/content/SelectMenu.md +0 -433
- package/docs/content/SelectPanel.mdx +0 -67
- package/docs/content/SideNav.md +0 -179
- package/docs/content/Spinner.mdx +0 -32
- package/docs/content/StateLabel.md +0 -33
- package/docs/content/StyledOcticon.md +0 -34
- package/docs/content/SubNav.md +0 -102
- package/docs/content/TabNav.md +0 -50
- package/docs/content/Text.md +0 -29
- package/docs/content/TextInput.md +0 -32
- package/docs/content/Timeline.md +0 -138
- package/docs/content/Tooltip.md +0 -41
- package/docs/content/Truncate.md +0 -65
- package/docs/content/UnderlineNav.md +0 -53
- package/docs/content/anchoredPosition.mdx +0 -163
- package/docs/content/core-concepts.md +0 -70
- package/docs/content/focusTrap.mdx +0 -103
- package/docs/content/focusZone.mdx +0 -145
- package/docs/content/getting-started.md +0 -134
- package/docs/content/index.md +0 -33
- package/docs/content/linting.md +0 -35
- package/docs/content/overriding-styles.mdx +0 -80
- package/docs/content/philosophy.md +0 -23
- package/docs/content/primer-theme.md +0 -89
- package/docs/content/ssr.mdx +0 -41
- package/docs/content/system-props.mdx +0 -37
- package/docs/content/theme-reference.md +0 -8
- package/docs/content/theming.md +0 -250
- package/docs/content/useOnEscapePress.mdx +0 -56
- package/docs/content/useOnOutsideClick.mdx +0 -57
- package/docs/content/useOpenAndCloseFocus.mdx +0 -49
- package/docs/content/useOverlay.mdx +0 -62
- package/docs/content/useSafeTimeout.mdx +0 -32
- package/docs/gatsby-config.js +0 -30
- package/docs/gatsby-node.js +0 -101
- package/docs/package-lock.json +0 -20979
- package/docs/package.json +0 -35
- package/docs/src/@primer/gatsby-theme-doctocat/components/hero.js +0 -21
- package/docs/src/@primer/gatsby-theme-doctocat/components/live-code.js +0 -84
- package/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js +0 -39
- package/docs/src/@primer/gatsby-theme-doctocat/components/nav-dropdown.js +0 -48
- package/docs/src/@primer/gatsby-theme-doctocat/components/wrap-page-element.js +0 -25
- package/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +0 -54
- package/docs/src/@primer/gatsby-theme-doctocat/nav.yml +0 -132
- package/docs/src/@primer/gatsby-theme-doctocat/primer-components-hero.svg +0 -1411
- package/docs/src/props.js +0 -77
- package/jest.config.js +0 -13
- package/lib/__tests__/ActionList.d.ts +0 -1
- package/lib/__tests__/ActionList.js +0 -67
- package/lib/__tests__/ActionMenu.d.ts +0 -1
- package/lib/__tests__/ActionMenu.js +0 -154
- package/lib/__tests__/AnchoredOverlay.d.ts +0 -1
- package/lib/__tests__/AnchoredOverlay.js +0 -161
- package/lib/__tests__/Avatar.d.ts +0 -1
- package/lib/__tests__/Avatar.js +0 -70
- package/lib/__tests__/AvatarStack.d.ts +0 -1
- package/lib/__tests__/AvatarStack.js +0 -71
- package/lib/__tests__/BorderBox.d.ts +0 -1
- package/lib/__tests__/BorderBox.js +0 -61
- package/lib/__tests__/Box.d.ts +0 -1
- package/lib/__tests__/Box.js +0 -81
- package/lib/__tests__/BranchName.d.ts +0 -1
- package/lib/__tests__/BranchName.js +0 -39
- package/lib/__tests__/Breadcrumb.d.ts +0 -1
- package/lib/__tests__/Breadcrumb.js +0 -42
- package/lib/__tests__/BreadcrumbItem.d.ts +0 -1
- package/lib/__tests__/BreadcrumbItem.js +0 -52
- package/lib/__tests__/Button.d.ts +0 -1
- package/lib/__tests__/Button.js +0 -152
- package/lib/__tests__/Caret.d.ts +0 -1
- package/lib/__tests__/Caret.js +0 -52
- package/lib/__tests__/CircleBadge.d.ts +0 -1
- package/lib/__tests__/CircleBadge.js +0 -87
- package/lib/__tests__/CircleOcticon.d.ts +0 -1
- package/lib/__tests__/CircleOcticon.js +0 -74
- package/lib/__tests__/CounterLabel.d.ts +0 -1
- package/lib/__tests__/CounterLabel.js +0 -61
- package/lib/__tests__/Details.d.ts +0 -1
- package/lib/__tests__/Details.js +0 -120
- package/lib/__tests__/Dialog.d.ts +0 -1
- package/lib/__tests__/Dialog.js +0 -188
- package/lib/__tests__/Dropdown.d.ts +0 -1
- package/lib/__tests__/Dropdown.js +0 -70
- package/lib/__tests__/DropdownMenu.d.ts +0 -1
- package/lib/__tests__/DropdownMenu.js +0 -153
- package/lib/__tests__/FilterList.d.ts +0 -1
- package/lib/__tests__/FilterList.js +0 -39
- package/lib/__tests__/FilterListItem.d.ts +0 -1
- package/lib/__tests__/FilterListItem.js +0 -49
- package/lib/__tests__/FilteredSearch.d.ts +0 -1
- package/lib/__tests__/FilteredSearch.js +0 -39
- package/lib/__tests__/Flash.d.ts +0 -1
- package/lib/__tests__/Flash.js +0 -65
- package/lib/__tests__/Flex.d.ts +0 -1
- package/lib/__tests__/Flex.js +0 -77
- package/lib/__tests__/FormGroup.d.ts +0 -1
- package/lib/__tests__/FormGroup.js +0 -58
- package/lib/__tests__/Grid.d.ts +0 -1
- package/lib/__tests__/Grid.js +0 -107
- package/lib/__tests__/Header.d.ts +0 -1
- package/lib/__tests__/Header.js +0 -63
- package/lib/__tests__/Heading.d.ts +0 -1
- package/lib/__tests__/Heading.js +0 -112
- package/lib/__tests__/Label.d.ts +0 -1
- package/lib/__tests__/Label.js +0 -49
- package/lib/__tests__/LabelGroup.d.ts +0 -1
- package/lib/__tests__/LabelGroup.js +0 -41
- package/lib/__tests__/Link.d.ts +0 -1
- package/lib/__tests__/Link.js +0 -73
- package/lib/__tests__/Overlay.d.ts +0 -1
- package/lib/__tests__/Overlay.js +0 -145
- package/lib/__tests__/Pagehead.d.ts +0 -1
- package/lib/__tests__/Pagehead.js +0 -40
- package/lib/__tests__/Pagination/Pagination.d.ts +0 -1
- package/lib/__tests__/Pagination/Pagination.js +0 -50
- package/lib/__tests__/Pagination/PaginationModel.d.ts +0 -1
- package/lib/__tests__/Pagination/PaginationModel.js +0 -186
- package/lib/__tests__/PointerBox.d.ts +0 -1
- package/lib/__tests__/PointerBox.js +0 -49
- package/lib/__tests__/Popover.d.ts +0 -1
- package/lib/__tests__/Popover.js +0 -70
- package/lib/__tests__/Portal.d.ts +0 -1
- package/lib/__tests__/Portal.js +0 -124
- package/lib/__tests__/Position.d.ts +0 -1
- package/lib/__tests__/Position.js +0 -149
- package/lib/__tests__/ProgressBar.d.ts +0 -1
- package/lib/__tests__/ProgressBar.js +0 -71
- package/lib/__tests__/SelectMenu.d.ts +0 -1
- package/lib/__tests__/SelectMenu.js +0 -155
- package/lib/__tests__/SelectPanel.d.ts +0 -1
- package/lib/__tests__/SelectPanel.js +0 -83
- package/lib/__tests__/SideNav.d.ts +0 -1
- package/lib/__tests__/SideNav.js +0 -75
- package/lib/__tests__/Spinner.d.ts +0 -1
- package/lib/__tests__/Spinner.js +0 -56
- package/lib/__tests__/StateLabel.d.ts +0 -1
- package/lib/__tests__/StateLabel.js +0 -74
- package/lib/__tests__/StyledOcticon.d.ts +0 -1
- package/lib/__tests__/StyledOcticon.js +0 -43
- package/lib/__tests__/SubNav.d.ts +0 -1
- package/lib/__tests__/SubNav.js +0 -65
- package/lib/__tests__/SubNavLink.d.ts +0 -1
- package/lib/__tests__/SubNavLink.js +0 -52
- package/lib/__tests__/TabNav.d.ts +0 -1
- package/lib/__tests__/TabNav.js +0 -53
- package/lib/__tests__/Text.d.ts +0 -1
- package/lib/__tests__/Text.js +0 -108
- package/lib/__tests__/TextInput.d.ts +0 -1
- package/lib/__tests__/TextInput.js +0 -81
- package/lib/__tests__/ThemeProvider.d.ts +0 -1
- package/lib/__tests__/ThemeProvider.js +0 -444
- package/lib/__tests__/Timeline.d.ts +0 -1
- package/lib/__tests__/Timeline.js +0 -80
- package/lib/__tests__/Tooltip.d.ts +0 -1
- package/lib/__tests__/Tooltip.js +0 -72
- package/lib/__tests__/Truncate.d.ts +0 -1
- package/lib/__tests__/Truncate.js +0 -66
- package/lib/__tests__/UnderlineNav.d.ts +0 -1
- package/lib/__tests__/UnderlineNav.js +0 -75
- package/lib/__tests__/UnderlineNavLink.d.ts +0 -1
- package/lib/__tests__/UnderlineNavLink.js +0 -54
- package/lib/__tests__/behaviors/anchoredPosition.d.ts +0 -1
- package/lib/__tests__/behaviors/anchoredPosition.js +0 -390
- package/lib/__tests__/behaviors/focusTrap.d.ts +0 -1
- package/lib/__tests__/behaviors/focusTrap.js +0 -234
- package/lib/__tests__/behaviors/focusZone.d.ts +0 -1
- package/lib/__tests__/behaviors/focusZone.js +0 -570
- package/lib/__tests__/behaviors/iterateFocusableElements.d.ts +0 -1
- package/lib/__tests__/behaviors/iterateFocusableElements.js +0 -55
- package/lib/__tests__/filterObject.d.ts +0 -1
- package/lib/__tests__/filterObject.js +0 -30
- package/lib/__tests__/hooks/useAnchoredPosition.d.ts +0 -1
- package/lib/__tests__/hooks/useAnchoredPosition.js +0 -54
- package/lib/__tests__/hooks/useOnEscapePress.d.ts +0 -1
- package/lib/__tests__/hooks/useOnEscapePress.js +0 -32
- package/lib/__tests__/hooks/useOnOutsideClick.d.ts +0 -1
- package/lib/__tests__/hooks/useOnOutsideClick.js +0 -87
- package/lib/__tests__/hooks/useOpenAndCloseFocus.d.ts +0 -1
- package/lib/__tests__/hooks/useOpenAndCloseFocus.js +0 -60
- package/lib/__tests__/hooks/useProvidedStateOrCreate.d.ts +0 -1
- package/lib/__tests__/hooks/useProvidedStateOrCreate.js +0 -45
- package/lib/__tests__/theme.d.ts +0 -1
- package/lib/__tests__/theme.js +0 -36
- package/lib/__tests__/themeGet.d.ts +0 -1
- package/lib/__tests__/themeGet.js +0 -25
- package/lib/__tests__/useSafeTimeout.d.ts +0 -1
- package/lib/__tests__/useSafeTimeout.js +0 -45
- package/lib/stories/ActionList.stories.d.ts +0 -40
- package/lib/stories/ActionList.stories.js +0 -382
- package/lib/stories/ActionMenu.stories.d.ts +0 -29
- package/lib/stories/ActionMenu.stories.js +0 -338
- package/lib/stories/AnchoredOverlay.stories.d.ts +0 -6
- package/lib/stories/AnchoredOverlay.stories.js +0 -127
- package/lib/stories/AvatarStack.stories.d.ts +0 -8
- package/lib/stories/AvatarStack.stories.js +0 -49
- package/lib/stories/Button.stories.d.ts +0 -57
- package/lib/stories/Button.stories.js +0 -114
- package/lib/stories/ConfirmationDialog.stories.d.ts +0 -7
- package/lib/stories/ConfirmationDialog.stories.js +0 -111
- package/lib/stories/Dialog.stories.d.ts +0 -13
- package/lib/stories/Dialog.stories.js +0 -265
- package/lib/stories/DropdownMenu.stories.d.ts +0 -12
- package/lib/stories/DropdownMenu.stories.js +0 -122
- package/lib/stories/Overlay.stories.d.ts +0 -7
- package/lib/stories/Overlay.stories.js +0 -185
- package/lib/stories/Portal.stories.d.ts +0 -8
- package/lib/stories/Portal.stories.js +0 -104
- package/lib/stories/SelectPanel.stories.d.ts +0 -32
- package/lib/stories/SelectPanel.stories.js +0 -342
- package/lib/stories/ThemeProvider.stories.d.ts +0 -6
- package/lib/stories/ThemeProvider.stories.js +0 -102
- package/lib/stories/useAnchoredPosition.stories.d.ts +0 -8
- package/lib/stories/useAnchoredPosition.stories.js +0 -351
- package/lib/stories/useFocusTrap.stories.d.ts +0 -9
- package/lib/stories/useFocusTrap.stories.js +0 -356
- package/lib/stories/useFocusZone.stories.d.ts +0 -12
- package/lib/stories/useFocusZone.stories.js +0 -599
- package/lib-esm/__tests__/ActionList.d.ts +0 -1
- package/lib-esm/__tests__/ActionList.js +0 -54
- package/lib-esm/__tests__/ActionMenu.d.ts +0 -1
- package/lib-esm/__tests__/ActionMenu.js +0 -141
- package/lib-esm/__tests__/AnchoredOverlay.d.ts +0 -1
- package/lib-esm/__tests__/AnchoredOverlay.js +0 -135
- package/lib-esm/__tests__/Avatar.d.ts +0 -1
- package/lib-esm/__tests__/Avatar.js +0 -58
- package/lib-esm/__tests__/AvatarStack.d.ts +0 -1
- package/lib-esm/__tests__/AvatarStack.js +0 -57
- package/lib-esm/__tests__/BorderBox.d.ts +0 -1
- package/lib-esm/__tests__/BorderBox.js +0 -49
- package/lib-esm/__tests__/Box.d.ts +0 -1
- package/lib-esm/__tests__/Box.js +0 -69
- package/lib-esm/__tests__/BranchName.d.ts +0 -1
- package/lib-esm/__tests__/BranchName.js +0 -28
- package/lib-esm/__tests__/Breadcrumb.d.ts +0 -1
- package/lib-esm/__tests__/Breadcrumb.js +0 -31
- package/lib-esm/__tests__/BreadcrumbItem.d.ts +0 -1
- package/lib-esm/__tests__/BreadcrumbItem.js +0 -41
- package/lib-esm/__tests__/Button.d.ts +0 -1
- package/lib-esm/__tests__/Button.js +0 -141
- package/lib-esm/__tests__/Caret.d.ts +0 -1
- package/lib-esm/__tests__/Caret.js +0 -42
- package/lib-esm/__tests__/CircleBadge.d.ts +0 -1
- package/lib-esm/__tests__/CircleBadge.js +0 -73
- package/lib-esm/__tests__/CircleOcticon.d.ts +0 -1
- package/lib-esm/__tests__/CircleOcticon.js +0 -61
- package/lib-esm/__tests__/CounterLabel.d.ts +0 -1
- package/lib-esm/__tests__/CounterLabel.js +0 -49
- package/lib-esm/__tests__/Details.d.ts +0 -1
- package/lib-esm/__tests__/Details.js +0 -109
- package/lib-esm/__tests__/Dialog.d.ts +0 -1
- package/lib-esm/__tests__/Dialog.js +0 -174
- package/lib-esm/__tests__/Dropdown.d.ts +0 -1
- package/lib-esm/__tests__/Dropdown.js +0 -59
- package/lib-esm/__tests__/DropdownMenu.d.ts +0 -1
- package/lib-esm/__tests__/DropdownMenu.js +0 -139
- package/lib-esm/__tests__/FilterList.d.ts +0 -1
- package/lib-esm/__tests__/FilterList.js +0 -28
- package/lib-esm/__tests__/FilterListItem.d.ts +0 -1
- package/lib-esm/__tests__/FilterListItem.js +0 -38
- package/lib-esm/__tests__/FilteredSearch.d.ts +0 -1
- package/lib-esm/__tests__/FilteredSearch.js +0 -28
- package/lib-esm/__tests__/Flash.d.ts +0 -1
- package/lib-esm/__tests__/Flash.js +0 -53
- package/lib-esm/__tests__/Flex.d.ts +0 -1
- package/lib-esm/__tests__/Flex.js +0 -66
- package/lib-esm/__tests__/FormGroup.d.ts +0 -1
- package/lib-esm/__tests__/FormGroup.js +0 -47
- package/lib-esm/__tests__/Grid.d.ts +0 -1
- package/lib-esm/__tests__/Grid.js +0 -96
- package/lib-esm/__tests__/Header.d.ts +0 -1
- package/lib-esm/__tests__/Header.js +0 -52
- package/lib-esm/__tests__/Heading.d.ts +0 -1
- package/lib-esm/__tests__/Heading.js +0 -101
- package/lib-esm/__tests__/Label.d.ts +0 -1
- package/lib-esm/__tests__/Label.js +0 -38
- package/lib-esm/__tests__/LabelGroup.d.ts +0 -1
- package/lib-esm/__tests__/LabelGroup.js +0 -28
- package/lib-esm/__tests__/Link.d.ts +0 -1
- package/lib-esm/__tests__/Link.js +0 -62
- package/lib-esm/__tests__/Overlay.d.ts +0 -1
- package/lib-esm/__tests__/Overlay.js +0 -123
- package/lib-esm/__tests__/Pagehead.d.ts +0 -1
- package/lib-esm/__tests__/Pagehead.js +0 -28
- package/lib-esm/__tests__/Pagination/Pagination.d.ts +0 -1
- package/lib-esm/__tests__/Pagination/Pagination.js +0 -37
- package/lib-esm/__tests__/Pagination/PaginationModel.d.ts +0 -1
- package/lib-esm/__tests__/Pagination/PaginationModel.js +0 -182
- package/lib-esm/__tests__/PointerBox.d.ts +0 -1
- package/lib-esm/__tests__/PointerBox.js +0 -38
- package/lib-esm/__tests__/Popover.d.ts +0 -1
- package/lib-esm/__tests__/Popover.js +0 -56
- package/lib-esm/__tests__/Portal.d.ts +0 -1
- package/lib-esm/__tests__/Portal.js +0 -104
- package/lib-esm/__tests__/Position.d.ts +0 -1
- package/lib-esm/__tests__/Position.js +0 -138
- package/lib-esm/__tests__/ProgressBar.d.ts +0 -1
- package/lib-esm/__tests__/ProgressBar.js +0 -60
- package/lib-esm/__tests__/SelectMenu.d.ts +0 -1
- package/lib-esm/__tests__/SelectMenu.js +0 -145
- package/lib-esm/__tests__/SelectPanel.d.ts +0 -1
- package/lib-esm/__tests__/SelectPanel.js +0 -67
- package/lib-esm/__tests__/SideNav.d.ts +0 -1
- package/lib-esm/__tests__/SideNav.js +0 -63
- package/lib-esm/__tests__/Spinner.d.ts +0 -1
- package/lib-esm/__tests__/Spinner.js +0 -45
- package/lib-esm/__tests__/StateLabel.d.ts +0 -1
- package/lib-esm/__tests__/StateLabel.js +0 -63
- package/lib-esm/__tests__/StyledOcticon.d.ts +0 -1
- package/lib-esm/__tests__/StyledOcticon.js +0 -31
- package/lib-esm/__tests__/SubNav.d.ts +0 -1
- package/lib-esm/__tests__/SubNav.js +0 -52
- package/lib-esm/__tests__/SubNavLink.d.ts +0 -1
- package/lib-esm/__tests__/SubNavLink.js +0 -41
- package/lib-esm/__tests__/TabNav.d.ts +0 -1
- package/lib-esm/__tests__/TabNav.js +0 -42
- package/lib-esm/__tests__/Text.d.ts +0 -1
- package/lib-esm/__tests__/Text.js +0 -95
- package/lib-esm/__tests__/TextInput.d.ts +0 -1
- package/lib-esm/__tests__/TextInput.js +0 -70
- package/lib-esm/__tests__/ThemeProvider.d.ts +0 -1
- package/lib-esm/__tests__/ThemeProvider.js +0 -408
- package/lib-esm/__tests__/Timeline.d.ts +0 -1
- package/lib-esm/__tests__/Timeline.js +0 -69
- package/lib-esm/__tests__/Tooltip.d.ts +0 -1
- package/lib-esm/__tests__/Tooltip.js +0 -61
- package/lib-esm/__tests__/Truncate.d.ts +0 -1
- package/lib-esm/__tests__/Truncate.js +0 -55
- package/lib-esm/__tests__/UnderlineNav.d.ts +0 -1
- package/lib-esm/__tests__/UnderlineNav.js +0 -62
- package/lib-esm/__tests__/UnderlineNavLink.d.ts +0 -1
- package/lib-esm/__tests__/UnderlineNavLink.js +0 -43
- package/lib-esm/__tests__/behaviors/anchoredPosition.d.ts +0 -1
- package/lib-esm/__tests__/behaviors/anchoredPosition.js +0 -388
- package/lib-esm/__tests__/behaviors/focusTrap.d.ts +0 -1
- package/lib-esm/__tests__/behaviors/focusTrap.js +0 -227
- package/lib-esm/__tests__/behaviors/focusZone.d.ts +0 -1
- package/lib-esm/__tests__/behaviors/focusZone.js +0 -487
- package/lib-esm/__tests__/behaviors/iterateFocusableElements.d.ts +0 -1
- package/lib-esm/__tests__/behaviors/iterateFocusableElements.js +0 -48
- package/lib-esm/__tests__/filterObject.d.ts +0 -1
- package/lib-esm/__tests__/filterObject.js +0 -27
- package/lib-esm/__tests__/hooks/useAnchoredPosition.d.ts +0 -1
- package/lib-esm/__tests__/hooks/useAnchoredPosition.js +0 -46
- package/lib-esm/__tests__/hooks/useOnEscapePress.d.ts +0 -1
- package/lib-esm/__tests__/hooks/useOnEscapePress.js +0 -23
- package/lib-esm/__tests__/hooks/useOnOutsideClick.d.ts +0 -1
- package/lib-esm/__tests__/hooks/useOnOutsideClick.js +0 -68
- package/lib-esm/__tests__/hooks/useOpenAndCloseFocus.d.ts +0 -1
- package/lib-esm/__tests__/hooks/useOpenAndCloseFocus.js +0 -52
- package/lib-esm/__tests__/hooks/useProvidedStateOrCreate.d.ts +0 -1
- package/lib-esm/__tests__/hooks/useProvidedStateOrCreate.js +0 -36
- package/lib-esm/__tests__/theme.d.ts +0 -1
- package/lib-esm/__tests__/theme.js +0 -33
- package/lib-esm/__tests__/themeGet.d.ts +0 -1
- package/lib-esm/__tests__/themeGet.js +0 -22
- package/lib-esm/__tests__/useSafeTimeout.d.ts +0 -1
- package/lib-esm/__tests__/useSafeTimeout.js +0 -39
- package/lib-esm/stories/ActionList.stories.d.ts +0 -40
- package/lib-esm/stories/ActionList.stories.js +0 -334
- package/lib-esm/stories/ActionMenu.stories.d.ts +0 -29
- package/lib-esm/stories/ActionMenu.stories.js +0 -293
- package/lib-esm/stories/AnchoredOverlay.stories.d.ts +0 -6
- package/lib-esm/stories/AnchoredOverlay.stories.js +0 -101
- package/lib-esm/stories/AvatarStack.stories.d.ts +0 -8
- package/lib-esm/stories/AvatarStack.stories.js +0 -32
- package/lib-esm/stories/Button.stories.d.ts +0 -57
- package/lib-esm/stories/Button.stories.js +0 -78
- package/lib-esm/stories/ConfirmationDialog.stories.d.ts +0 -7
- package/lib-esm/stories/ConfirmationDialog.stories.js +0 -86
- package/lib-esm/stories/Dialog.stories.d.ts +0 -13
- package/lib-esm/stories/Dialog.stories.js +0 -240
- package/lib-esm/stories/DropdownMenu.stories.d.ts +0 -12
- package/lib-esm/stories/DropdownMenu.stories.js +0 -94
- package/lib-esm/stories/Overlay.stories.d.ts +0 -7
- package/lib-esm/stories/Overlay.stories.js +0 -154
- package/lib-esm/stories/Portal.stories.d.ts +0 -8
- package/lib-esm/stories/Portal.stories.js +0 -68
- package/lib-esm/stories/SelectPanel.stories.d.ts +0 -32
- package/lib-esm/stories/SelectPanel.stories.js +0 -284
- package/lib-esm/stories/ThemeProvider.stories.d.ts +0 -6
- package/lib-esm/stories/ThemeProvider.stories.js +0 -83
- package/lib-esm/stories/useAnchoredPosition.stories.d.ts +0 -8
- package/lib-esm/stories/useAnchoredPosition.stories.js +0 -313
- package/lib-esm/stories/useFocusTrap.stories.d.ts +0 -9
- package/lib-esm/stories/useFocusTrap.stories.js +0 -309
- package/lib-esm/stories/useFocusZone.stories.d.ts +0 -12
- package/lib-esm/stories/useFocusZone.stories.js +0 -554
- package/migrating.md +0 -250
- package/now.json +0 -17
- package/package-lock.json +0 -28656
- package/rollup.config.js +0 -36
- package/script/build +0 -19
- package/script/setup +0 -12
- package/src/ActionList/Divider.tsx +0 -25
- package/src/ActionList/Group.tsx +0 -45
- package/src/ActionList/Header.tsx +0 -74
- package/src/ActionList/Item.tsx +0 -460
- package/src/ActionList/List.tsx +0 -253
- package/src/ActionList/index.ts +0 -21
- package/src/ActionMenu.tsx +0 -106
- package/src/AnchoredOverlay/AnchoredOverlay.tsx +0 -180
- package/src/AnchoredOverlay/index.ts +0 -2
- package/src/Avatar.tsx +0 -46
- package/src/AvatarPair.tsx +0 -31
- package/src/AvatarStack.tsx +0 -161
- package/src/BaseStyles.tsx +0 -53
- package/src/BorderBox.tsx +0 -18
- package/src/Box.tsx +0 -54
- package/src/BranchName.tsx +0 -19
- package/src/Breadcrumb.tsx +0 -87
- package/src/Button/Button.tsx +0 -40
- package/src/Button/ButtonBase.tsx +0 -43
- package/src/Button/ButtonClose.tsx +0 -40
- package/src/Button/ButtonDanger.tsx +0 -43
- package/src/Button/ButtonGroup.tsx +0 -55
- package/src/Button/ButtonInvisible.tsx +0 -27
- package/src/Button/ButtonOutline.tsx +0 -43
- package/src/Button/ButtonPrimary.tsx +0 -41
- package/src/Button/ButtonStyles.tsx +0 -36
- package/src/Button/ButtonTableList.tsx +0 -58
- package/src/Button/index.ts +0 -16
- package/src/Caret.tsx +0 -133
- package/src/CircleBadge.tsx +0 -55
- package/src/CircleOcticon.tsx +0 -37
- package/src/CounterLabel.tsx +0 -52
- package/src/Details.tsx +0 -23
- package/src/Dialog/ConfirmationDialog.tsx +0 -184
- package/src/Dialog/Dialog.tsx +0 -419
- package/src/Dialog.tsx +0 -149
- package/src/Dropdown.tsx +0 -158
- package/src/DropdownMenu/DropdownButton.tsx +0 -15
- package/src/DropdownMenu/DropdownMenu.tsx +0 -115
- package/src/DropdownMenu/index.ts +0 -4
- package/src/DropdownStyles.ts +0 -128
- package/src/FilterList.tsx +0 -81
- package/src/FilteredActionList/FilteredActionList.tsx +0 -152
- package/src/FilteredActionList/index.ts +0 -2
- package/src/FilteredSearch.tsx +0 -28
- package/src/Flash.tsx +0 -77
- package/src/Flex.tsx +0 -15
- package/src/FormGroup.tsx +0 -27
- package/src/Grid.tsx +0 -15
- package/src/Header.tsx +0 -84
- package/src/Heading.tsx +0 -21
- package/src/Label.tsx +0 -75
- package/src/LabelGroup.tsx +0 -18
- package/src/Link.tsx +0 -46
- package/src/Overlay.tsx +0 -194
- package/src/Pagehead.tsx +0 -17
- package/src/Pagination/Pagination.tsx +0 -214
- package/src/Pagination/index.ts +0 -4
- package/src/Pagination/model.tsx +0 -187
- package/src/PointerBox.tsx +0 -31
- package/src/Popover.tsx +0 -236
- package/src/Portal/Portal.tsx +0 -96
- package/src/Portal/index.ts +0 -5
- package/src/Position.tsx +0 -63
- package/src/ProgressBar.tsx +0 -52
- package/src/SelectMenu/SelectMenu.tsx +0 -125
- package/src/SelectMenu/SelectMenuContext.tsx +0 -9
- package/src/SelectMenu/SelectMenuDivider.tsx +0 -25
- package/src/SelectMenu/SelectMenuFilter.tsx +0 -51
- package/src/SelectMenu/SelectMenuFooter.tsx +0 -28
- package/src/SelectMenu/SelectMenuHeader.tsx +0 -50
- package/src/SelectMenu/SelectMenuItem.tsx +0 -137
- package/src/SelectMenu/SelectMenuList.tsx +0 -42
- package/src/SelectMenu/SelectMenuLoadingAnimation.tsx +0 -24
- package/src/SelectMenu/SelectMenuModal.tsx +0 -121
- package/src/SelectMenu/SelectMenuTab.tsx +0 -88
- package/src/SelectMenu/SelectMenuTabPanel.tsx +0 -30
- package/src/SelectMenu/SelectMenuTabs.tsx +0 -44
- package/src/SelectMenu/hooks/useKeyboardNav.js +0 -90
- package/src/SelectMenu/index.ts +0 -15
- package/src/SelectPanel/SelectPanel.tsx +0 -173
- package/src/SelectPanel/index.ts +0 -2
- package/src/SideNav.tsx +0 -193
- package/src/Spinner.tsx +0 -59
- package/src/StateLabel.tsx +0 -110
- package/src/StyledOcticon.tsx +0 -24
- package/src/SubNav.tsx +0 -129
- package/src/TabNav.tsx +0 -77
- package/src/Text.tsx +0 -13
- package/src/TextInput.tsx +0 -183
- package/src/ThemeProvider.tsx +0 -176
- package/src/Timeline.tsx +0 -141
- package/src/Tooltip.tsx +0 -263
- package/src/Truncate.tsx +0 -36
- package/src/UnderlineNav.tsx +0 -110
- package/src/__tests__/.eslintrc.json +0 -11
- package/src/__tests__/ActionList.tsx +0 -49
- package/src/__tests__/ActionMenu.tsx +0 -138
- package/src/__tests__/AnchoredOverlay.tsx +0 -151
- package/src/__tests__/Avatar.tsx +0 -45
- package/src/__tests__/AvatarStack.tsx +0 -45
- package/src/__tests__/BorderBox.tsx +0 -44
- package/src/__tests__/Box.tsx +0 -43
- package/src/__tests__/BranchName.tsx +0 -27
- package/src/__tests__/Breadcrumb.tsx +0 -31
- package/src/__tests__/BreadcrumbItem.tsx +0 -32
- package/src/__tests__/Button.tsx +0 -129
- package/src/__tests__/Caret.tsx +0 -36
- package/src/__tests__/CircleBadge.tsx +0 -69
- package/src/__tests__/CircleOcticon.tsx +0 -52
- package/src/__tests__/CounterLabel.tsx +0 -51
- package/src/__tests__/Details.tsx +0 -116
- package/src/__tests__/Dialog.tsx +0 -157
- package/src/__tests__/Dropdown.tsx +0 -57
- package/src/__tests__/DropdownMenu.tsx +0 -138
- package/src/__tests__/FilterList.tsx +0 -27
- package/src/__tests__/FilterListItem.tsx +0 -32
- package/src/__tests__/FilteredSearch.tsx +0 -27
- package/src/__tests__/Flash.tsx +0 -46
- package/src/__tests__/Flex.tsx +0 -59
- package/src/__tests__/FormGroup.tsx +0 -39
- package/src/__tests__/Grid.tsx +0 -83
- package/src/__tests__/Header.tsx +0 -50
- package/src/__tests__/Heading.tsx +0 -92
- package/src/__tests__/Label.tsx +0 -35
- package/src/__tests__/LabelGroup.tsx +0 -31
- package/src/__tests__/Link.tsx +0 -48
- package/src/__tests__/Overlay.tsx +0 -103
- package/src/__tests__/Pagehead.tsx +0 -24
- package/src/__tests__/Pagination/Pagination.tsx +0 -31
- package/src/__tests__/Pagination/PaginationModel.tsx +0 -133
- package/src/__tests__/Pagination/__snapshots__/Pagination.tsx.snap +0 -184
- package/src/__tests__/PointerBox.tsx +0 -35
- package/src/__tests__/Popover.tsx +0 -69
- package/src/__tests__/Portal.tsx +0 -103
- package/src/__tests__/Position.tsx +0 -118
- package/src/__tests__/ProgressBar.tsx +0 -41
- package/src/__tests__/SelectMenu.tsx +0 -142
- package/src/__tests__/SelectPanel.tsx +0 -65
- package/src/__tests__/SideNav.tsx +0 -63
- package/src/__tests__/Spinner.tsx +0 -44
- package/src/__tests__/StateLabel.tsx +0 -50
- package/src/__tests__/StyledOcticon.tsx +0 -28
- package/src/__tests__/SubNav.tsx +0 -51
- package/src/__tests__/SubNavLink.tsx +0 -32
- package/src/__tests__/TabNav.tsx +0 -33
- package/src/__tests__/Text.tsx +0 -79
- package/src/__tests__/TextInput.tsx +0 -50
- package/src/__tests__/ThemeProvider.tsx +0 -441
- package/src/__tests__/Timeline.tsx +0 -59
- package/src/__tests__/Tooltip.tsx +0 -53
- package/src/__tests__/Truncate.tsx +0 -45
- package/src/__tests__/UnderlineNav.tsx +0 -59
- package/src/__tests__/UnderlineNavLink.tsx +0 -32
- package/src/__tests__/__snapshots__/ActionList.tsx.snap +0 -27
- package/src/__tests__/__snapshots__/ActionMenu.tsx.snap +0 -80
- package/src/__tests__/__snapshots__/AnchoredOverlay.tsx.snap +0 -332
- package/src/__tests__/__snapshots__/Avatar.tsx.snap +0 -19
- package/src/__tests__/__snapshots__/AvatarStack.tsx.snap +0 -377
- package/src/__tests__/__snapshots__/BorderBox.tsx.snap +0 -14
- package/src/__tests__/__snapshots__/Box.tsx.snap +0 -201
- package/src/__tests__/__snapshots__/BranchName.tsx.snap +0 -17
- package/src/__tests__/__snapshots__/Breadcrumb.tsx.snap +0 -29
- package/src/__tests__/__snapshots__/BreadcrumbItem.tsx.snap +0 -79
- package/src/__tests__/__snapshots__/Button.tsx.snap +0 -832
- package/src/__tests__/__snapshots__/Caret.tsx.snap +0 -373
- package/src/__tests__/__snapshots__/CircleBadge.tsx.snap +0 -141
- package/src/__tests__/__snapshots__/CircleOcticon.tsx.snap +0 -64
- package/src/__tests__/__snapshots__/CounterLabel.tsx.snap +0 -22
- package/src/__tests__/__snapshots__/Details.tsx.snap +0 -15
- package/src/__tests__/__snapshots__/Dialog.tsx.snap +0 -200
- package/src/__tests__/__snapshots__/Dropdown.tsx.snap +0 -249
- package/src/__tests__/__snapshots__/DropdownMenu.tsx.snap +0 -106
- package/src/__tests__/__snapshots__/FilterList.tsx.snap +0 -13
- package/src/__tests__/__snapshots__/FilterListItem.tsx.snap +0 -80
- package/src/__tests__/__snapshots__/FilteredSearch.tsx.snap +0 -32
- package/src/__tests__/__snapshots__/Flash.tsx.snap +0 -32
- package/src/__tests__/__snapshots__/Flex.tsx.snap +0 -130
- package/src/__tests__/__snapshots__/FormGroup.tsx.snap +0 -25
- package/src/__tests__/__snapshots__/Grid.tsx.snap +0 -178
- package/src/__tests__/__snapshots__/Header.tsx.snap +0 -79
- package/src/__tests__/__snapshots__/Heading.tsx.snap +0 -13
- package/src/__tests__/__snapshots__/Label.tsx.snap +0 -74
- package/src/__tests__/__snapshots__/LabelGroup.tsx.snap +0 -15
- package/src/__tests__/__snapshots__/Link.tsx.snap +0 -213
- package/src/__tests__/__snapshots__/Pagehead.tsx.snap +0 -15
- package/src/__tests__/__snapshots__/PointerBox.tsx.snap +0 -174
- package/src/__tests__/__snapshots__/Popover.tsx.snap +0 -4687
- package/src/__tests__/__snapshots__/Position.tsx.snap +0 -44
- package/src/__tests__/__snapshots__/ProgressBar.tsx.snap +0 -53
- package/src/__tests__/__snapshots__/SelectMenu.tsx.snap +0 -469
- package/src/__tests__/__snapshots__/SelectPanel.tsx.snap +0 -123
- package/src/__tests__/__snapshots__/SideNav.tsx.snap +0 -143
- package/src/__tests__/__snapshots__/Spinner.tsx.snap +0 -33
- package/src/__tests__/__snapshots__/StateLabel.tsx.snap +0 -409
- package/src/__tests__/__snapshots__/StyledOcticon.tsx.snap +0 -25
- package/src/__tests__/__snapshots__/SubNav.tsx.snap +0 -44
- package/src/__tests__/__snapshots__/SubNavLink.tsx.snap +0 -199
- package/src/__tests__/__snapshots__/TabNav.tsx.snap +0 -58
- package/src/__tests__/__snapshots__/Text.tsx.snap +0 -7
- package/src/__tests__/__snapshots__/TextInput.tsx.snap +0 -440
- package/src/__tests__/__snapshots__/ThemeProvider.tsx.snap +0 -15
- package/src/__tests__/__snapshots__/Timeline.tsx.snap +0 -157
- package/src/__tests__/__snapshots__/Tooltip.tsx.snap +0 -227
- package/src/__tests__/__snapshots__/Truncate.tsx.snap +0 -17
- package/src/__tests__/__snapshots__/UnderlineNav.tsx.snap +0 -59
- package/src/__tests__/__snapshots__/UnderlineNavLink.tsx.snap +0 -130
- package/src/__tests__/behaviors/anchoredPosition.ts +0 -295
- package/src/__tests__/behaviors/focusTrap.tsx +0 -236
- package/src/__tests__/behaviors/focusZone.tsx +0 -549
- package/src/__tests__/behaviors/iterateFocusableElements.tsx +0 -61
- package/src/__tests__/filterObject.ts +0 -54
- package/src/__tests__/hooks/useAnchoredPosition.tsx +0 -31
- package/src/__tests__/hooks/useOnEscapePress.tsx +0 -16
- package/src/__tests__/hooks/useOnOutsideClick.tsx +0 -48
- package/src/__tests__/hooks/useOpenAndCloseFocus.tsx +0 -48
- package/src/__tests__/hooks/useProvidedStateOrCreate.tsx +0 -39
- package/src/__tests__/theme.ts +0 -41
- package/src/__tests__/themeGet.ts +0 -15
- package/src/__tests__/useSafeTimeout.tsx +0 -36
- package/src/behaviors/anchoredPosition.ts +0 -442
- package/src/behaviors/focusTrap.ts +0 -184
- package/src/behaviors/focusZone.ts +0 -713
- package/src/constants.ts +0 -62
- package/src/hooks/index.ts +0 -11
- package/src/hooks/useAnchoredPosition.ts +0 -53
- package/src/hooks/useCombinedRefs.ts +0 -40
- package/src/hooks/useDetails.tsx +0 -54
- package/src/hooks/useDialog.ts +0 -121
- package/src/hooks/useFocusTrap.ts +0 -80
- package/src/hooks/useFocusZone.ts +0 -64
- package/src/hooks/useOnEscapePress.ts +0 -63
- package/src/hooks/useOnOutsideClick.tsx +0 -82
- package/src/hooks/useOpenAndCloseFocus.ts +0 -27
- package/src/hooks/useOverlay.tsx +0 -32
- package/src/hooks/useProvidedRefOrCreate.ts +0 -14
- package/src/hooks/useProvidedStateOrCreate.ts +0 -27
- package/src/hooks/useRenderForcingRef.ts +0 -22
- package/src/hooks/useResizeObserver.ts +0 -11
- package/src/hooks/useSafeTimeout.ts +0 -38
- package/src/hooks/useScrollFlash.ts +0 -21
- package/src/index.ts +0 -165
- package/src/polyfills/eventListenerSignal.ts +0 -66
- package/src/stories/ActionList.stories.tsx +0 -364
- package/src/stories/ActionMenu.stories.tsx +0 -322
- package/src/stories/AnchoredOverlay.stories.tsx +0 -117
- package/src/stories/AvatarStack.stories.tsx +0 -37
- package/src/stories/Button.stories.tsx +0 -88
- package/src/stories/ConfirmationDialog.stories.tsx +0 -105
- package/src/stories/Dialog.stories.tsx +0 -240
- package/src/stories/DropdownMenu.stories.tsx +0 -84
- package/src/stories/Overlay.stories.tsx +0 -186
- package/src/stories/Portal.stories.tsx +0 -109
- package/src/stories/SelectPanel.stories.tsx +0 -300
- package/src/stories/ThemeProvider.stories.tsx +0 -104
- package/src/stories/useAnchoredPosition.stories.tsx +0 -320
- package/src/stories/useFocusTrap.stories.tsx +0 -400
- package/src/stories/useFocusZone.stories.tsx +0 -663
- package/src/sx.ts +0 -9
- package/src/theme-preval.js +0 -120
- package/src/theme.ts +0 -3
- package/src/utils/deprecate.tsx +0 -73
- package/src/utils/isNumeric.tsx +0 -4
- package/src/utils/iterateFocusableElements.ts +0 -121
- package/src/utils/ssr.tsx +0 -1
- package/src/utils/test-deprecations.tsx +0 -19
- package/src/utils/test-helpers.tsx +0 -7
- package/src/utils/test-matchers.tsx +0 -109
- package/src/utils/testing.tsx +0 -243
- package/src/utils/theme.js +0 -64
- package/src/utils/types.ts +0 -90
- package/src/utils/uniqueId.ts +0 -6
- package/src/utils/userAgent.ts +0 -7
- package/stats.html +0 -3279
- package/tsconfig.json +0 -20
@@ -1,433 +0,0 @@
|
|
1
|
-
---
|
2
|
-
title: SelectMenu
|
3
|
-
---
|
4
|
-
|
5
|
-
The `SelectMenu` components are a suite of components which can be combined together to make several different variations of our GitHub select menu. At it's most basic form, a select menu is comprised of a `SelectMenu` wrapper, which contains a `summary` component of your choice and a `Select.Modal` which contains the select menu content. Use `SelectMenu.List` to wrap items in the select menu, and `SelectMenu.Item` to wrap each item.
|
6
|
-
|
7
|
-
Several additional components exist to provide even more functionality: `SelectMenu.Header`, `SelectMenu.Filter`, `SelectMenu.Tabs`, `SelectMenu.TabPanel` `SelectMenu.Footer` and `SelectMenu.Divider`.
|
8
|
-
|
9
|
-
## Basic Example
|
10
|
-
|
11
|
-
```jsx live
|
12
|
-
<SelectMenu>
|
13
|
-
<Button as="summary">Projects</Button>
|
14
|
-
<SelectMenu.Modal>
|
15
|
-
<SelectMenu.Header>Projects</SelectMenu.Header>
|
16
|
-
<SelectMenu.List>
|
17
|
-
<SelectMenu.Item href="#">Primer React bugs</SelectMenu.Item>
|
18
|
-
<SelectMenu.Item href="#">Primer React roadmap</SelectMenu.Item>
|
19
|
-
<SelectMenu.Item href="#"> Project 3</SelectMenu.Item>
|
20
|
-
<SelectMenu.Item href="#">Project 4</SelectMenu.Item>
|
21
|
-
</SelectMenu.List>
|
22
|
-
</SelectMenu.Modal>
|
23
|
-
</SelectMenu>
|
24
|
-
```
|
25
|
-
|
26
|
-
## SelectMenu
|
27
|
-
|
28
|
-
Main wrapper component for select menu.
|
29
|
-
|
30
|
-
```jsx
|
31
|
-
<SelectMenu>{/* all other sub components are wrapped here*/}</SelectMenu>
|
32
|
-
```
|
33
|
-
|
34
|
-
### Component Props
|
35
|
-
|
36
|
-
| Name | Type | Default | Description |
|
37
|
-
| :--------- | :-------- | :-----: | :--------------------------------------------------------------------------------------------------------------------------------------- |
|
38
|
-
| initialTab | String | | If using the `SelectMenu.Tabs` component, you can use this prop to change the tab shown on open. By default, the first tab will be used. |
|
39
|
-
| ref | React ref | | ref to pass down to SelectMenu component |
|
40
|
-
|
41
|
-
## SelectMenu.MenuContext
|
42
|
-
|
43
|
-
SelectMenu.MenuContext is a [context object](https://reactjs.org/docs/context.html#reactcreatecontext) that exposes some helpful state values to be used via [`React.useContext`](https://reactjs.org/docs/hooks-reference.html#usecontext) in consuming applications. SelectMenu.MenuContext can only be used in components that are already wrapped in a `SelectMenu` as `SelectMenu` contains the [context provider](https://reactjs.org/docs/context.html#contextprovider).
|
44
|
-
|
45
|
-
### Values available on MenuContext
|
46
|
-
|
47
|
-
| Name | Type | Description |
|
48
|
-
| :------------- | :------- | :---------------------------------------------------------------------------------------------------------------------------------------------- |
|
49
|
-
| selectedTab | string | The currently selected tab |
|
50
|
-
| setSelectedTab | function | Used to update the currently selected tab state |
|
51
|
-
| open | boolean | State for open/closed status of the menu modal |
|
52
|
-
| setOpen | function | Used to update the `open` state |
|
53
|
-
| initialTab | string | Mostly used internally to pass down which tab should be set to open by default. To change this value use the `initialTab` prop on `SelectMenu`. |
|
54
|
-
|
55
|
-
### Example Usage
|
56
|
-
|
57
|
-
```jsx
|
58
|
-
import {SelectMenu, Button} from `@primer/components`
|
59
|
-
import React, {useContext} from 'react'
|
60
|
-
|
61
|
-
const MyMenu = () => {
|
62
|
-
<SelectMenu>
|
63
|
-
<MyButton />
|
64
|
-
<SelectMenu.Modal>
|
65
|
-
content
|
66
|
-
</SelectMenu.Modal>
|
67
|
-
</SelectMenu>
|
68
|
-
}
|
69
|
-
|
70
|
-
// note that we can only use the context in components that are already wrapped by SelectMenu (and thus the Context.Provider)
|
71
|
-
const MyButton = () => {
|
72
|
-
const menuContext = useContext(SelectMenu.MenuContext);
|
73
|
-
|
74
|
-
return (
|
75
|
-
<Button as="summary">{menuContext.open ? 'Open' : 'Closed'}</Button>
|
76
|
-
)
|
77
|
-
}
|
78
|
-
```
|
79
|
-
|
80
|
-
## SelectMenu.Modal
|
81
|
-
|
82
|
-
Used to wrap the content in a `SelectMenu`.
|
83
|
-
|
84
|
-
```jsx
|
85
|
-
<SelectMenu.Modal>
|
86
|
-
{/* all menu content is wrapped in the modal*/}
|
87
|
-
</SelectMenu.Menu>
|
88
|
-
```
|
89
|
-
|
90
|
-
### Right-aligned modal
|
91
|
-
|
92
|
-
Use the `align='right'` prop to align the modal to the right. Note that this only modifies alignment for the modal, and not the SelectMenu itself. You will need to wrap the SelectMenu in a relatively positioned element for this to work properly.
|
93
|
-
|
94
|
-
```jsx live
|
95
|
-
<Box position="relative" display="flex" justifyContent="flex-end">
|
96
|
-
<SelectMenu>
|
97
|
-
<Button as="summary">Projects</Button>
|
98
|
-
<SelectMenu.Modal align="right">
|
99
|
-
<SelectMenu.Header>Projects</SelectMenu.Header>
|
100
|
-
<SelectMenu.List>
|
101
|
-
<SelectMenu.Item href="#">Primer React bugs</SelectMenu.Item>
|
102
|
-
<SelectMenu.Item href="#">Primer React roadmap</SelectMenu.Item>
|
103
|
-
<SelectMenu.Item href="#"> Project 3</SelectMenu.Item>
|
104
|
-
<SelectMenu.Item href="#">Project 4</SelectMenu.Item>
|
105
|
-
</SelectMenu.List>
|
106
|
-
</SelectMenu.Modal>
|
107
|
-
</SelectMenu>
|
108
|
-
</Box>
|
109
|
-
```
|
110
|
-
|
111
|
-
### Component Props
|
112
|
-
|
113
|
-
| Prop name | Type | Default | Description |
|
114
|
-
| :-------- | :--------------- | :------ | ------------------------------------------------- |
|
115
|
-
| align | String | 'left' | Use `right` to align the select menu to the right |
|
116
|
-
| width | String or Number | 300px | Sets the modal width |
|
117
|
-
|
118
|
-
## SelectMenu.List
|
119
|
-
|
120
|
-
Used to wrap the select menu list content. All menu items **must** be wrapped in a SelectMenu.List in order for the accessbility keyboard handling to function properly. If you are using the `SelectMenu.TabPanel` you do not need to provide a `SelectMenu.List` as that component renders a `SelectMenu.List` as a wrapper.
|
121
|
-
|
122
|
-
```jsx
|
123
|
-
<SelectMenu.List>{/* all menu list items are wrapped in the list*/}</SelectMenu.List>
|
124
|
-
```
|
125
|
-
|
126
|
-
### Component Props
|
127
|
-
|
128
|
-
SelectMenu.List components do not get any additional props besides system props.
|
129
|
-
|
130
|
-
## SelectMenu.Item
|
131
|
-
|
132
|
-
Individual items in a select menu. SelectMenu.Item renders an anchor tag by default, you'll need to make sure to provide the appropriate `href`.
|
133
|
-
|
134
|
-
You can use a `button` tag instead by utilizing the [`as` prop](/core-concepts#the-as-prop). Be sure to consider [which HTML element is the right choice](https://marcysutton.com/links-vs-buttons-in-modern-web-applications) for your usage of the component.
|
135
|
-
|
136
|
-
```jsx
|
137
|
-
<SelectMenu.Item href="/link/to/thing" selected={true}>
|
138
|
-
{/* wraps an individual list item*/}
|
139
|
-
</SelectMenu.Item>
|
140
|
-
```
|
141
|
-
|
142
|
-
### System props
|
143
|
-
|
144
|
-
<Note variant="warning">
|
145
|
-
|
146
|
-
System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
|
147
|
-
|
148
|
-
</Note>
|
149
|
-
|
150
|
-
SelectMenu components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
|
151
|
-
|
152
|
-
### Component Props
|
153
|
-
|
154
|
-
| Name | Type | Default | Description |
|
155
|
-
| :------- | :------- | :-----: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
156
|
-
| selected | boolean | | Used to apply styles to the selected items in the list. |
|
157
|
-
| onClick | function | | Function called when item is clicked. By default we also close the menu when items are clicked. If you would like the menu to stay open, pass an `e.preventDefault()` to your onClick handler. |
|
158
|
-
|
159
|
-
## SelectMenu.Filter
|
160
|
-
|
161
|
-
Use a `SelectMenu.Filter` to add a filter UI to your select menu. Users are expected to implement their own filtering and manage the state of the `value` prop on the input. This gives users more flexibility over the type of filtering and type of content passed into each select menu item.
|
162
|
-
|
163
|
-
```jsx live
|
164
|
-
<SelectMenu>
|
165
|
-
<Button as="summary">Projects</Button>
|
166
|
-
<SelectMenu.Modal>
|
167
|
-
<SelectMenu.Header>Filter by Project</SelectMenu.Header>
|
168
|
-
<SelectMenu.Filter placeholder="Filter projects" value="" aria-label="Filter Projects" />
|
169
|
-
<SelectMenu.List>
|
170
|
-
<SelectMenu.Item href="#">Primer React bugs</SelectMenu.Item>
|
171
|
-
<SelectMenu.Item href="#">Primer React roadmap</SelectMenu.Item>
|
172
|
-
<SelectMenu.Divider>More Options</SelectMenu.Divider>
|
173
|
-
<SelectMenu.Item href="#"> Project 3</SelectMenu.Item>
|
174
|
-
<SelectMenu.Item href="#">Project 4</SelectMenu.Item>
|
175
|
-
</SelectMenu.List>
|
176
|
-
</SelectMenu.Modal>
|
177
|
-
</SelectMenu>
|
178
|
-
```
|
179
|
-
|
180
|
-
### System Props
|
181
|
-
|
182
|
-
<Note variant="warning">
|
183
|
-
|
184
|
-
System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
|
185
|
-
|
186
|
-
</Note>
|
187
|
-
|
188
|
-
SelectMenu.Filter components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
|
189
|
-
|
190
|
-
### Component Props
|
191
|
-
|
192
|
-
SelectMenu.Filter components receive all the props that the [TextInput](/TextInput) component gets.
|
193
|
-
|
194
|
-
| Name | Type | Default | Description |
|
195
|
-
| :---- | :----- | :-----: | :------------------------------------------------------------------------------------------------------------- |
|
196
|
-
| value | String | | Users of this component must provide a value for the filter input that is managed in the consuming application |
|
197
|
-
|
198
|
-
## SelectMenu.Tabs
|
199
|
-
|
200
|
-
Use `SelectMenu.Tabs` to wrap the the tab navigation and `SelectMenu.Tab` for each tab in the navigation.
|
201
|
-
|
202
|
-
`SelectMenu.TabPanel` should wrap each corresponding panel for each of the tabs. The `tabName` prop for each `SelectMenu.TabPanel` must match the name provided in the `tabName` prop on `SelectMenu.Tab`.
|
203
|
-
|
204
|
-
To set one of the tabs to be open by default, use `initialTab` on the main `SelectMenu` component. Otherwise, the first tab will be shown by default.
|
205
|
-
|
206
|
-
Each `Select.Menu` tab will need to have an `index` prop. The first tab should be at index `0`, the second at index `1` and so forth. The `index` prop is used to show the first tab by default.
|
207
|
-
|
208
|
-
If you need access to the selected tab state, you can find it in the MenuContext object exported from `SelectMenu` as `MenuContext.selectedTab`.
|
209
|
-
|
210
|
-
```jsx live
|
211
|
-
<SelectMenu>
|
212
|
-
<Button as="summary">Projects</Button>
|
213
|
-
<SelectMenu.Modal>
|
214
|
-
<SelectMenu.Header>Projects</SelectMenu.Header>
|
215
|
-
<SelectMenu.Tabs>
|
216
|
-
<SelectMenu.Tab index={0} tabName="Repository" />
|
217
|
-
<SelectMenu.Tab index={1} tabName="Organization" />
|
218
|
-
</SelectMenu.Tabs>
|
219
|
-
<SelectMenu.TabPanel tabName="Repository">
|
220
|
-
<SelectMenu.Item href="#">Primer React bugs</SelectMenu.Item>
|
221
|
-
<SelectMenu.Item href="#">Primer React roadmap</SelectMenu.Item>
|
222
|
-
<SelectMenu.Item href="#"> Project 3</SelectMenu.Item>
|
223
|
-
<SelectMenu.Item href="#">Project 4</SelectMenu.Item>
|
224
|
-
</SelectMenu.TabPanel>
|
225
|
-
<SelectMenu.TabPanel tabName="Organization">
|
226
|
-
<SelectMenu.Item href="#"> Project 2</SelectMenu.Item>
|
227
|
-
</SelectMenu.TabPanel>
|
228
|
-
<SelectMenu.Footer>Showing 3 of 3</SelectMenu.Footer>
|
229
|
-
</SelectMenu.Modal>
|
230
|
-
</SelectMenu>
|
231
|
-
```
|
232
|
-
|
233
|
-
### Component Props
|
234
|
-
|
235
|
-
SelectMenu.Tabs components do not get any additional props besides system props.
|
236
|
-
|
237
|
-
## SelectMenu.Tab
|
238
|
-
|
239
|
-
Used for each individual tab inside of a `SelectMenu.Tabs`. Be sure to set the `index` prop to correspond to the order the tab is in. The `tabName` prop should correspond to the `tabName` set on the `SelectMenu.TabPanel`.
|
240
|
-
|
241
|
-
The `onClick` prop is optional and can be used for any events or data fetching you might need to trigger on tab clicks.
|
242
|
-
|
243
|
-
```jsx
|
244
|
-
<SelectMenu.Tab index={0} tabName="Repository"/>
|
245
|
-
<SelectMenu.Tab index={1} tabName="Organization"/>
|
246
|
-
```
|
247
|
-
|
248
|
-
### System Props
|
249
|
-
|
250
|
-
<Note variant="warning">
|
251
|
-
|
252
|
-
System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
|
253
|
-
|
254
|
-
</Note>
|
255
|
-
|
256
|
-
SelectMenu.Tab components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
|
257
|
-
|
258
|
-
### Component Props
|
259
|
-
|
260
|
-
| Name | Type | Default | Description |
|
261
|
-
| :------ | :------- | :-----: | :------------------------------------------------------------------------------------------------------------------------- |
|
262
|
-
| tabName | String | | Used to identify the corresponding tab. Must match the string used in the `tabs` array in the `SelectMenu.Tabs` component. |
|
263
|
-
| index | Number | | The index at which the tab is in the list of tabs |
|
264
|
-
| onClick | Function | | Function to be called when the tab is clicked. Optional. |
|
265
|
-
|
266
|
-
## SelectMenu.TabPanel
|
267
|
-
|
268
|
-
Wraps the content for each tab. Make sure to use the `tabName` prop to identify each tab panel with the correct tab in the tab navigation.
|
269
|
-
|
270
|
-
**Note**: SelectMenu.TabPanel wraps content in a SelectMenu.List, so adding a SelectMenu.List manually is not necessary.
|
271
|
-
|
272
|
-
```jsx
|
273
|
-
<SelectMenu.TabPanel tabName="Repository">{/* Wraps content for each tab */}</SelectMenu.TabPanel>
|
274
|
-
```
|
275
|
-
|
276
|
-
### System Props
|
277
|
-
|
278
|
-
<Note variant="warning">
|
279
|
-
|
280
|
-
System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
|
281
|
-
|
282
|
-
</Note>
|
283
|
-
|
284
|
-
SelectMenu.TabPanel components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
|
285
|
-
|
286
|
-
### Component Props
|
287
|
-
|
288
|
-
| Name | Type | Default | Description |
|
289
|
-
| :------ | :----- | :-----: | :------------------------------------------------------------------------------------------------------------------------- |
|
290
|
-
| tabName | String | | Used to identify the corresponding tab. Must match the string used in the `tabs` array in the `SelectMenu.Tabs` component. |
|
291
|
-
|
292
|
-
## SelectMenu.Divider
|
293
|
-
|
294
|
-
Use a `SelectMenu.Divider` to add information between items in a `SelectMenu.List`.
|
295
|
-
|
296
|
-
```jsx live
|
297
|
-
<SelectMenu>
|
298
|
-
<Button as="summary">Projects</Button>
|
299
|
-
<SelectMenu.Modal>
|
300
|
-
<SelectMenu.Header>Projects</SelectMenu.Header>
|
301
|
-
<SelectMenu.List>
|
302
|
-
<SelectMenu.Item href="#">Primer React bugs</SelectMenu.Item>
|
303
|
-
<SelectMenu.Item href="#">Primer React roadmap</SelectMenu.Item>
|
304
|
-
<SelectMenu.Divider>More Options</SelectMenu.Divider>
|
305
|
-
<SelectMenu.Item href="#"> Project 3</SelectMenu.Item>
|
306
|
-
<SelectMenu.Item href="#">Project 4</SelectMenu.Item>
|
307
|
-
</SelectMenu.List>
|
308
|
-
</SelectMenu.Modal>
|
309
|
-
</SelectMenu>
|
310
|
-
```
|
311
|
-
|
312
|
-
### System Props
|
313
|
-
|
314
|
-
<Note variant="warning">
|
315
|
-
|
316
|
-
System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
|
317
|
-
|
318
|
-
</Note>
|
319
|
-
|
320
|
-
SelectMenu.Divder components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
|
321
|
-
|
322
|
-
### Component Props
|
323
|
-
|
324
|
-
SelectMenu.Divider components do not get any additional props besides system props.
|
325
|
-
|
326
|
-
## SelectMenu.Footer
|
327
|
-
|
328
|
-
Use a `SelectMenu.Footer` to add content to the bottom of the select menu.
|
329
|
-
|
330
|
-
```jsx live
|
331
|
-
<SelectMenu>
|
332
|
-
<Button as="summary">Projects</Button>
|
333
|
-
<SelectMenu.Modal>
|
334
|
-
<SelectMenu.Header>Projects</SelectMenu.Header>
|
335
|
-
<SelectMenu.List>
|
336
|
-
<SelectMenu.Item href="#">Primer React bugs</SelectMenu.Item>
|
337
|
-
<SelectMenu.Item href="#">Primer React roadmap</SelectMenu.Item>
|
338
|
-
<SelectMenu.Item href="#"> Project 3</SelectMenu.Item>
|
339
|
-
<SelectMenu.Item href="#">Project 4</SelectMenu.Item>
|
340
|
-
<SelectMenu.Footer>Use ⌥ + click/return to exclude labels.</SelectMenu.Footer>
|
341
|
-
</SelectMenu.List>
|
342
|
-
</SelectMenu.Modal>
|
343
|
-
</SelectMenu>
|
344
|
-
```
|
345
|
-
|
346
|
-
### System Props
|
347
|
-
|
348
|
-
<Note variant="warning">
|
349
|
-
|
350
|
-
System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
|
351
|
-
|
352
|
-
</Note>
|
353
|
-
|
354
|
-
SelectMenu.Footer components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
|
355
|
-
|
356
|
-
### Component Props
|
357
|
-
|
358
|
-
SelectMenu.Footer components do not get any additional props besides system props.
|
359
|
-
|
360
|
-
## SelectMenu.Header
|
361
|
-
|
362
|
-
Use a `SelectMenu.Header` to add a header to the top of the select menu content.
|
363
|
-
|
364
|
-
```jsx live
|
365
|
-
<SelectMenu>
|
366
|
-
<Button as="summary">Projects</Button>
|
367
|
-
<SelectMenu.Modal>
|
368
|
-
<SelectMenu.Header>Projects</SelectMenu.Header>
|
369
|
-
<SelectMenu.List>
|
370
|
-
<SelectMenu.Item href="#">Primer React bugs</SelectMenu.Item>
|
371
|
-
<SelectMenu.Item href="#">Primer React roadmap</SelectMenu.Item>
|
372
|
-
<SelectMenu.Item href="#"> Project 3</SelectMenu.Item>
|
373
|
-
<SelectMenu.Item href="#">Project 4</SelectMenu.Item>
|
374
|
-
<SelectMenu.Footer>Use ⌥ + click/return to exclude labels.</SelectMenu.Footer>
|
375
|
-
</SelectMenu.List>
|
376
|
-
</SelectMenu.Modal>
|
377
|
-
</SelectMenu>
|
378
|
-
```
|
379
|
-
|
380
|
-
### System Props
|
381
|
-
|
382
|
-
<Note variant="warning">
|
383
|
-
|
384
|
-
System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
|
385
|
-
|
386
|
-
</Note>
|
387
|
-
|
388
|
-
SelectMenu.Header components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
|
389
|
-
|
390
|
-
### Component Props
|
391
|
-
|
392
|
-
SelectMenu.Header components do not get any additional props besides system props.
|
393
|
-
|
394
|
-
## SelectMenu.LoadingAnimation
|
395
|
-
|
396
|
-
Use a `SelectMenu.LoadingAnimation` to add a loading animation inside of the SelectMenu.
|
397
|
-
|
398
|
-
**Note**: You will need to handle showing/hiding the appropriate modal content for your application during the loading state. We recommend always showing the `SelectMenu.Filter` and `SelectMenu.Header` (if used) and hiding the rest of the modal content during the loading state.
|
399
|
-
|
400
|
-
```jsx live
|
401
|
-
<SelectMenu>
|
402
|
-
<Button as="summary">Projects</Button>
|
403
|
-
<SelectMenu.Modal>
|
404
|
-
<SelectMenu.Header>Projects</SelectMenu.Header>
|
405
|
-
<SelectMenu.Filter placeholder="Filter projects" value="" aria-label="Filter Projects" />
|
406
|
-
{true ? (
|
407
|
-
<SelectMenu.LoadingAnimation />
|
408
|
-
) : (
|
409
|
-
<SelectMenu.List>
|
410
|
-
<SelectMenu.Item href="#">Primer React bugs</SelectMenu.Item>
|
411
|
-
<SelectMenu.Item href="#">Primer React roadmap</SelectMenu.Item>
|
412
|
-
<SelectMenu.Item href="#"> Project 3</SelectMenu.Item>
|
413
|
-
<SelectMenu.Item href="#">Project 4</SelectMenu.Item>
|
414
|
-
<SelectMenu.Footer>Use ⌥ + click/return to exclude labels.</SelectMenu.Footer>
|
415
|
-
</SelectMenu.List>
|
416
|
-
)}
|
417
|
-
</SelectMenu.Modal>
|
418
|
-
</SelectMenu>
|
419
|
-
```
|
420
|
-
|
421
|
-
### System Props
|
422
|
-
|
423
|
-
<Note variant="warning">
|
424
|
-
|
425
|
-
System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
|
426
|
-
|
427
|
-
</Note>
|
428
|
-
|
429
|
-
SelectMenu.LoadingAnimation components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
|
430
|
-
|
431
|
-
### Component Props
|
432
|
-
|
433
|
-
SelectMenu.LoadingAnimation components do not get any additional props besides system props.
|
@@ -1,67 +0,0 @@
|
|
1
|
-
---
|
2
|
-
title: SelectPanel
|
3
|
-
status: Alpha
|
4
|
-
---
|
5
|
-
|
6
|
-
A `SelectPanel` provides an anchor that will open an overlay with a list of selectable items, and a text input to filter the selectable items
|
7
|
-
|
8
|
-
## Example
|
9
|
-
|
10
|
-
```javascript live noinline
|
11
|
-
function getColorCircle(color) {
|
12
|
-
return function () {
|
13
|
-
return (
|
14
|
-
<Box
|
15
|
-
borderWidth="1px"
|
16
|
-
borderStyle="solid"
|
17
|
-
bg={color}
|
18
|
-
borderColor={color}
|
19
|
-
width={14}
|
20
|
-
height={14}
|
21
|
-
borderRadius={10}
|
22
|
-
margin="auto"
|
23
|
-
/>
|
24
|
-
)
|
25
|
-
}
|
26
|
-
}
|
27
|
-
|
28
|
-
const items = [
|
29
|
-
{leadingVisual: getColorCircle('#a2eeef'), text: 'enhancement', id: 1},
|
30
|
-
{leadingVisual: getColorCircle('#d73a4a'), text: 'bug', id: 2},
|
31
|
-
{leadingVisual: getColorCircle('#0cf478'), text: 'good first issue', id: 3},
|
32
|
-
{leadingVisual: getColorCircle('#ffd78e'), text: 'design', id: 4},
|
33
|
-
{leadingVisual: getColorCircle('#ff0000'), text: 'blocker', id: 5},
|
34
|
-
{leadingVisual: getColorCircle('#a4f287'), text: 'backend', id: 6},
|
35
|
-
{leadingVisual: getColorCircle('#8dc6fc'), text: 'frontend', id: 7}
|
36
|
-
]
|
37
|
-
|
38
|
-
function DemoComponent() {
|
39
|
-
const [selected, setSelected] = React.useState([items[0], items[1]])
|
40
|
-
const [filter, setFilter] = React.useState('')
|
41
|
-
const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
|
42
|
-
const [open, setOpen] = React.useState(false)
|
43
|
-
|
44
|
-
return (
|
45
|
-
<SelectPanel
|
46
|
-
renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
|
47
|
-
<DropdownButton aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
|
48
|
-
{children || 'Select Labels'}
|
49
|
-
</DropdownButton>
|
50
|
-
)}
|
51
|
-
placeholderText="Filter Labels"
|
52
|
-
open={open}
|
53
|
-
onOpenChange={setOpen}
|
54
|
-
items={filteredItems}
|
55
|
-
selected={selected}
|
56
|
-
onSelectedChange={setSelected}
|
57
|
-
onFilterChange={setFilter}
|
58
|
-
showItemDividers={true}
|
59
|
-
overlayProps={{width: 'small', height: 'xsmall'}}
|
60
|
-
/>
|
61
|
-
)
|
62
|
-
}
|
63
|
-
|
64
|
-
render(<DemoComponent />)
|
65
|
-
```
|
66
|
-
|
67
|
-
## Component props
|
package/docs/content/SideNav.md
DELETED
@@ -1,179 +0,0 @@
|
|
1
|
-
---
|
2
|
-
title: SideNav
|
3
|
-
---
|
4
|
-
|
5
|
-
The Side Nav is a vertical list of navigational links, typically used on the left side of a page. For maximum flexibility, **SideNav elements have no default width or positioning.**
|
6
|
-
|
7
|
-
## Default example
|
8
|
-
|
9
|
-
```jsx live
|
10
|
-
<SideNav bordered maxWidth={360} aria-label="Main">
|
11
|
-
<SideNav.Link href="#account">
|
12
|
-
<Text>Account</Text>
|
13
|
-
</SideNav.Link>
|
14
|
-
<SideNav.Link href="#home" selected>
|
15
|
-
<Text>Profile</Text>
|
16
|
-
</SideNav.Link>
|
17
|
-
<SideNav.Link href="#emails">
|
18
|
-
<Text>Emails</Text>
|
19
|
-
</SideNav.Link>
|
20
|
-
<SideNav.Link href="#notifications">
|
21
|
-
<Text>Notifications</Text>
|
22
|
-
</SideNav.Link>
|
23
|
-
</SideNav>
|
24
|
-
```
|
25
|
-
|
26
|
-
Different kinds of content can be added inside a SideNav item. Use system props to further style them if needed.
|
27
|
-
|
28
|
-
## Full variant
|
29
|
-
|
30
|
-
Add the `variant='full'` prop to a `SideNav.Link` to spread child elements across the link, which is useful for status icons, labels, and the like.
|
31
|
-
|
32
|
-
```jsx live
|
33
|
-
<SideNav bordered maxWidth={360} aria-label="Main">
|
34
|
-
<SideNav.Link href="#url">
|
35
|
-
<Text>Text Only</Text>
|
36
|
-
</SideNav.Link>
|
37
|
-
<SideNav.Link href="#url">
|
38
|
-
<Avatar size={16} mr={2} src="https://avatars.githubusercontent.com/hubot?s=32" />
|
39
|
-
<Text>With an avatar</Text>
|
40
|
-
</SideNav.Link>
|
41
|
-
<SideNav.Link href="#url">
|
42
|
-
<StyledOcticon sx={{mr: 2}} size={16} icon={ZapIcon} />
|
43
|
-
<Text>With an Octicon</Text>
|
44
|
-
</SideNav.Link>
|
45
|
-
<SideNav.Link href="#url" variant="full" selected>
|
46
|
-
<Text>With a status icon</Text>
|
47
|
-
<StyledOcticon sx={{mr: 2}} size={16} icon={DotIcon} color="icon.success" />
|
48
|
-
</SideNav.Link>
|
49
|
-
<SideNav.Link href="#url" variant="full">
|
50
|
-
<Text>With a label</Text>
|
51
|
-
<Label outline>label</Label>
|
52
|
-
</SideNav.Link>
|
53
|
-
<SideNav.Link href="#url" variant="full">
|
54
|
-
<Text>With a counter</Text>
|
55
|
-
<CounterLabel>16</CounterLabel>
|
56
|
-
</SideNav.Link>
|
57
|
-
<SideNav.Link href="#url">
|
58
|
-
<Heading as="h5" sx={{fontSize: 1}}>
|
59
|
-
A heading
|
60
|
-
</Heading>
|
61
|
-
<Text>and some more content</Text>
|
62
|
-
</SideNav.Link>
|
63
|
-
</SideNav>
|
64
|
-
```
|
65
|
-
|
66
|
-
## Lightweight variant
|
67
|
-
|
68
|
-
Add the `variant="lightweight"` prop to `SideNav` to render an alternative, more lightweight version that has items with no borders and are more condensed.
|
69
|
-
|
70
|
-
```jsx live
|
71
|
-
<Box
|
72
|
-
borderWidth="1px"
|
73
|
-
borderStyle="solid"
|
74
|
-
borderColor="border.primary"
|
75
|
-
borderRadius={2}
|
76
|
-
p={3}
|
77
|
-
backgroundColor="bg.secondary"
|
78
|
-
maxWidth={360}
|
79
|
-
>
|
80
|
-
<Box
|
81
|
-
borderStyle="solid"
|
82
|
-
borderColor="border.primary"
|
83
|
-
borderWidth={0}
|
84
|
-
borderBottomWidth={1}
|
85
|
-
borderRadius={0}
|
86
|
-
mb={2}
|
87
|
-
pb={1}
|
88
|
-
>
|
89
|
-
<Heading as="h5" fontSize={1} color="text.secondary">
|
90
|
-
Menu
|
91
|
-
</Heading>
|
92
|
-
</Box>
|
93
|
-
<SideNav variant="lightweight">
|
94
|
-
<SideNav.Link href="#url">
|
95
|
-
<Text>Account</Text>
|
96
|
-
</SideNav.Link>
|
97
|
-
<SideNav.Link href="#url" selected>
|
98
|
-
<Text>Profile</Text>
|
99
|
-
</SideNav.Link>
|
100
|
-
<SideNav.Link href="#url">
|
101
|
-
<Text>Emails</Text>
|
102
|
-
</SideNav.Link>
|
103
|
-
<SideNav.Link href="#url">
|
104
|
-
<Text>Notifications</Text>
|
105
|
-
</SideNav.Link>
|
106
|
-
</SideNav>
|
107
|
-
</Box>
|
108
|
-
```
|
109
|
-
|
110
|
-
It can also appear nested, as a sub navigation. Use margin/padding [System Props](/system-props) to add indentation.
|
111
|
-
|
112
|
-
```jsx live
|
113
|
-
<SideNav bordered maxWidth={360}>
|
114
|
-
<SideNav.Link href="#url">
|
115
|
-
<StyledOcticon mr={2} size={16} icon={PersonIcon} />
|
116
|
-
<Text>Account</Text>
|
117
|
-
</SideNav.Link>
|
118
|
-
<SideNav.Link href="#url" selected>
|
119
|
-
<StyledOcticon mr={2} size={16} icon={OctofaceIcon} />
|
120
|
-
<Text>Profile</Text>
|
121
|
-
</SideNav.Link>
|
122
|
-
|
123
|
-
<SideNav bordered variant="lightweight" py={3} pl={6} backgroundColor="sidenav.selectedBg">
|
124
|
-
<SideNav.Link href="#url" selected>
|
125
|
-
<Text>Sub item 1</Text>
|
126
|
-
</SideNav.Link>
|
127
|
-
<SideNav.Link href="#url">
|
128
|
-
<Text>Sub item 2</Text>
|
129
|
-
</SideNav.Link>
|
130
|
-
<SideNav.Link href="#url">
|
131
|
-
<Text>Sub item 3</Text>
|
132
|
-
</SideNav.Link>
|
133
|
-
</SideNav>
|
134
|
-
|
135
|
-
<SideNav.Link href="#url">
|
136
|
-
<StyledOcticon mr={2} size={16} icon={MailIcon} />
|
137
|
-
<Text>Emails</Text>
|
138
|
-
</SideNav.Link>
|
139
|
-
</SideNav>
|
140
|
-
```
|
141
|
-
|
142
|
-
## Usage with React Router
|
143
|
-
|
144
|
-
If using React Router, you can use the `as` prop to render the element as a `NavLink`. React Router will automatically handle setting `aria-current="page"` for you.
|
145
|
-
|
146
|
-
```
|
147
|
-
<SideNav.Link as={NavLink} to="...">...</SideNav.Link>
|
148
|
-
```
|
149
|
-
|
150
|
-
## System props
|
151
|
-
|
152
|
-
<Note variant="warning">
|
153
|
-
|
154
|
-
System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
|
155
|
-
|
156
|
-
</Note>
|
157
|
-
|
158
|
-
`SideNav` components get `COMMON`, `BORDER`, `LAYOUT`, and `FLEX` system props. `SideNav.Link` components get `COMMON` and `TYPOGRAPHY` system props. Read our [System Props](/system-props) doc page for a full list of available props.
|
159
|
-
|
160
|
-
## Component props
|
161
|
-
|
162
|
-
### SideNav
|
163
|
-
|
164
|
-
| Name | Type | Default | Description |
|
165
|
-
| :------- | :------ | :------: | :----------------------------------------------------------------------------- |
|
166
|
-
| as | String | 'nav' | Sets the HTML tag for the component. |
|
167
|
-
| bordered | Boolean | false | Renders the component with a border. |
|
168
|
-
| variant | String | 'normal' | Set to `lightweight` to render [in a lightweight style](#lightweight-variant). |
|
169
|
-
|
170
|
-
### SideNav.Link
|
171
|
-
|
172
|
-
| Name | Type | Default | Description |
|
173
|
-
| :-------- | :------ | :------: | :------------------------------------------------------------------------------------------------ |
|
174
|
-
| as | String | 'a' | Sets the HTML tag for the component. |
|
175
|
-
| href | String | | URL to be used for the Link |
|
176
|
-
| muted | Boolean | false | Uses a less prominent shade for Link color, and the default link shade on hover |
|
177
|
-
| selected | Boolean | false | Sets the link as selected, giving it a different style and setting the `aria-current` attribute. |
|
178
|
-
| underline | Boolean | false | Adds underline to the Link |
|
179
|
-
| variant | String | 'normal' | Set to `full` to render [a full variant](#full-variant), suitable for including icons and labels. |
|